/*=========================
        SIDEBAR
=========================*/

.sidebar{

    position: fixed;

    left:0;
    top:0;

    width:260px;

    height:100vh;

    background: url(../img/sidebar_background.png) no-repeat center center/cover;

    border-right:1px solid rgba(255,255,255,0.15);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    z-index:1000;

}

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:15px;

    padding:30px;

}

.sidebar-logo img{

    width:46px;

}

.sidebar-logo h4{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#fff;

}

.sidebar-logo span{

    color: rgba(255,255,255,0.82);

    font-size:14px;

}

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:5px;

    padding:10px 15px;

}

.sidebar-menu a{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    padding:14px 18px;

    border-radius:14px;

    transition:.25s;

    font-weight:500;

}

.sidebar-menu a i{

    font-size:20px;

}

.sidebar-menu a:hover{

    background: rgba(255,255,255,0.12);

    color:#fff;

}

.sidebar-menu a.active{

    background: rgba(255,255,255,0.16);

    color:#fff;

    font-weight:600;

}

.sidebar-menu a.active::before{

    content:"";

    position:absolute;

    left:-15px;

    width:5px;

    height:26px;

    background:var(--primary);

    border-radius:20px;

}

/*=========================
    SUBMENÚ (desplegable)
=========================*/

.sidebar-menu a.has-submenu{

    justify-content:space-between;

    cursor:pointer;

}

.sidebar-menu a.has-submenu > span{

    margin-right:auto;

    margin-left:14px;

}

.submenu-chevron{

    font-size:14px !important;

    transition:transform .25s;

}

.sidebar-menu a.has-submenu[aria-expanded="true"] .submenu-chevron{

    transform:rotate(180deg);

}

.sidebar-menu a.has-submenu.active{

    color:#fff;

}

.submenu{

    display:flex;

    flex-direction:column;

    gap:2px;

    padding-left:20px;

    margin-top:2px;

}

.submenu a{

    position:relative;

    display:flex;

    align-items:center;

    color:#fff;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:500;

    transition:.2s;

}

.submenu a::before{

    content:"";

    width:5px;

    height:5px;

    border-radius:50%;

    background: rgba(255,255,255,0.55);

    margin-right:12px;

}

.submenu a:hover{

    background: rgba(255,255,255,0.12);

    color:#fff;

}

.submenu a:hover::before{

    background:#fff;

}

.sidebar-user{

    margin:20px;

    padding:15px;

    border-radius:16px;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    gap:15px;

}

.sidebar .sidebar-user img {

    width: 50px;

    height: 50px;

    min-width: 50px;

    min-height: 50px;

    max-width: 50px;

    max-height: 50px;

    border-radius: 50%;

    object-fit: cover;

    display: block;

    flex-shrink: 0;

}

.sidebar-user strong{

    display:block;

}

.sidebar-user small{

    color:var(--text-light);

}

/*=====================
    RESPONSIVE
=====================*/

@media(max-width:992px){

.sidebar{

    left:-260px;

    transition:.30s;

}

.sidebar.show{

    left:0;

}

}