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

.sidebar{

    width:270px;
    height:100vh;

    display:flex;
    flex-direction:column;

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

    position:fixed;
    left:0;
    top:0;

    z-index:999;

    transition:.35s ease;

}

.sidebar__inner {
    background: url("../assets/images/sidebar-back.jpg");
    background-repeat: repeat-x;
    background-size: contain;
}


/*=====================================================
LOGO
=====================================================*/

.sidebar__logo{

    padding:35px 20px 25px;

    display:flex;

    justify-content:center;

}

.sidebar__logo img{

    width:110px;
    max-width:100%;

}


/*=====================================================
MENU
=====================================================*/

.sidebar__menu{

    flex:1;

    overflow-y:auto;

}

.sidebar__menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.sidebar__menu li{

    margin:8px 18px;

}


/*=====================================================
LINKS
=====================================================*/

.sidebar__menu a,
.submenu-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 20px;

    color:#FFF;

    text-decoration:none;

    font-size:20px;

    font-weight:700;

    border-radius:14px;

    transition:.30s;

    background:none;

    border:none;

    cursor:pointer;

}

.sidebar__menu a:hover,
.submenu-toggle:hover{

    background:rgba(255,255,255,.08);

}


/*=====================================================
ACTIVE
=====================================================*/

.sidebar__menu li.active>a{

    background:#536DD7;

    box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10);

}


/*=====================================================
ARROW
=====================================================*/

.arrow{

    width:10px;
    height:10px;

    border-right:2px solid white;
    border-bottom:2px solid white;

    transform:rotate(45deg);

    transition:.30s;

}

.has-submenu.open .arrow{

    transform:rotate(225deg);

}


/*=====================================================
SUBMENU
=====================================================*/

.submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    padding-left:15px;

}

.has-submenu.open .submenu{

    max-height:500px;

}

.submenu li{

    margin:5px 0;

}

.submenu a{

    font-size:17px;

    color:#C8D2FF;

    padding:12px 20px;

    font-weight:500;

}


/*=====================================================
FOOTER
=====================================================*/

.sidebar__footer{

    padding:20px;

    text-align:center;

    color:#FFF;

}


/*=====================================================
SCROLL
=====================================================*/

.sidebar__menu::-webkit-scrollbar{

    width:6px;

}

.sidebar__menu::-webkit-scrollbar-thumb{

    background:#425AC9;

    border-radius:20px;

}


/*=====================================================
HAMBURGER
=====================================================*/

.menu-toggle{

    display:none;

    position:fixed;

    left:20px;

    top:20px;

    width:50px;
    height:50px;

    border:none;

    border-radius:10px;

    background:#425AC9;

    color:white;

    font-size:26px;

    cursor:pointer;

    z-index:1200;

}


/*=====================================================
OVERLAY
=====================================================*/

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.70);

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:998;

}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}


/*=====================================================
MOBILE
=====================================================*/

@media(max-width:991px){

.sidebar{

transform:translateX(-100%);

}

.sidebar.show{

transform:translateX(0);

}

.menu-toggle{

display:block;

}

}
/*=====================================================
CORRECCIÓN DE ESTRUCTURA DEL SIDEBAR
=====================================================*/

/* En escritorio el sidebar participa en el grid principal. */
.sidebar.sidebar__inner {
    position: sticky;
    top: 0;
    left: auto;
    width: 100%;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}

.sidebar.sidebar__inner .sidebar__menu {
    min-height: 0;
}

body.sidebar-is-open {
    overflow: hidden;
}

@media (max-width: 991px) {
    .sidebar.sidebar__inner {
        position: fixed;
        top: 0;
        left: 0;
        width: min(85vw, 290px);
        height: 100dvh;
        display: flex;
        transform: translateX(-105%);
        box-shadow: 18px 0 45px rgba(0, 0, 0, 0.35);
        visibility: hidden;
        transition: transform 0.35s ease, visibility 0.35s ease;
        z-index: 1100;
    }

    .sidebar.sidebar__inner.show {
        display: flex;
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-overlay {
        z-index: 1090;
    }
}