/* ==========================================================
   DISCÍPULO ONLINE ERP
   TOPBAR V7
========================================================== */

.topbar{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:56px;

    background:#E5E7EB;

    border-bottom:1px solid #D1D5DB;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    z-index:1000;

}

/*==========================================================*/

.topbar-left{

    display:flex;

    align-items:center;

    gap:14px;

}

/*==========================================================*/

.topbar-logo{

    width:280px;

    height:56px;

    display:flex;

    align-items:center;

}

.topbar-logo img{

    height:48px;

    width:auto;

}

/*==========================================================*/

.logo-light{

    display:block;

}

.logo-dark{

    display:none;

}

body.dark-mode .logo-light{

    display:none;

}

body.dark-mode .logo-dark{

    display:block;

}

/*==========================================================*/

.menu-toggle{

    width:36px;

    height:36px;

    border:none;

    background:transparent;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

}

.menu-toggle:hover{

    background:#D6D9DE;

}

.menu-toggle i{

    font-size:17px;

}

/*==========================================================*/

.church-name{

    font-size:13px;

    font-weight:600;

    color:#475569;

}

/*==========================================================*/

.topbar-right{

    display:flex;

    align-items:center;

    gap:8px;

}

/*==========================================================*/

.icon-btn{

    width:34px;

    height:34px;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

    position:relative;

    transition:.2s;

}

.icon-btn:hover{

    background:#D6D9DE;

}

.icon-btn i{

    font-size:15px;

}

/*==========================================================*/

.badge{

    position:absolute;

    top:2px;

    right:2px;

    min-width:15px;

    height:15px;

    background:#EF4444;

    color:#FFF;

    border-radius:20px;

    font-size:9px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==========================================================*/

.user-box{

    display:flex;

    align-items:center;

    gap:10px;

}

.user-avatar{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#FFF;

    border:1px solid #CBD5E1;

    display:flex;

    align-items:center;

    justify-content:center;

}

.user-avatar img{

    width:22px;

    height:22px;

}

.user-box span{

    font-size:13px;

    font-weight:600;

}

/*==========================================================
MODO ESCURO
==========================================================*/

body.dark-mode .topbar{

    background:#1E293B;

    border-bottom:1px solid #334155;

}

body.dark-mode .church-name{

    color:#F8FAFC;

}

body.dark-mode .menu-toggle{

    color:#FFF;

}

body.dark-mode .menu-toggle:hover{

    background:#334155;

}

body.dark-mode .icon-btn{

    color:#FFF;

}

body.dark-mode .icon-btn:hover{

    background:#334155;

}

body.dark-mode .user-box span{

    color:#FFF;

}

body.dark-mode .user-avatar{

    background:#334155;

    border-color:#475569;

}

/*==========================================================*/

@media(max-width:768px){

    .church-name{

        display:none;

    }

    .user-box span{

        display:none;

    }

}