/**
 * Sidebar Component Styles
 * Mobile navigation menu (hamburger menu)
 * 
 * Usage: Automatically shown on screens < 1000px
 */

/* Desktop: Hide sidebar by default */
.navbar__responsive {
    display: none;
}

#sidebar-container {
    display: none;
    position: absolute;
}

/* Mobile: Show sidebar */
@media (max-width: 1000px) {

    #sidebar-container {
        display: flex;
        margin-left: -50vw;
        transition: all 300ms !important;
        pointer-events: none;  /* No capturar clicks cuando está cerrado */
    }
    
    /* Cuando el sidebar está abierto, permitir clicks */
    #sidebar-container[style*="margin-left: 0px"],
    #sidebar-container[style*="margin-left:0px"] {
        pointer-events: auto;
    }

    .header {
        position: fixed;
        z-index: 1001;
    }

    .navbar__responsive {
        width: 100%;
        position: fixed;
        top: 80px;
        height: 100%;
        z-index: -1;
        display: flex;
    }

    /* Main menu list (left side) */
    .navbar__responsive__list {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #FFF;
        z-index: 3;
    }

    /* Secondary menu lists (right side - slide in) */
    .navbar__responsive__list--second {
        position: absolute;
        width: 40%;
        left: 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #D5D9DB;
        z-index: 2;
        transition: all 300ms !important;
    }
    
    .navbar__responsive__list--second--comer {
        position: absolute;
        width: 40%;
        left: 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #D5D9DB;
        z-index: 2;
        transition: all 300ms !important;
    }
    
    .navbar__responsive__list--second--asg {
        position: absolute;
        width: 40%;
        left: 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #D5D9DB;
        z-index: 2;
        transition: all 300ms !important;
    }

    /* Menu items styling */
    .navbar__responsive .header__nav__item {
        padding: 15px 15px;
        border-top: 1px solid #F5F3F1;
        border-bottom: 1px solid #F5F3F1;
        margin: 0px;
    }
    
    /* Search trigger button styling */
    .navbar__responsive .sidebar-search-trigger {
        background-color: #F5F3F1;
        cursor: pointer;
        transition: background-color 150ms ease;
    }
    
    .navbar__responsive .sidebar-search-trigger:active {
        background-color: #E5E5E5;
    }
    
    .navbar__responsive .sidebar-search-trigger a {
        display: flex;
        align-items: center;
        color: #545859;
        font-weight: 500;
    }

    .navbar__responsive__list--second>div>.header__nav__item {
        padding: 15px 15px;
        border: none;
    }
    
    .navbar__responsive__list--second--comer>div>.header__nav__item {
        padding: 15px 15px;
        border: none;
    }
    
    .navbar__responsive__list--second--asg>div>.header__nav__item {
        padding: 15px 15px;
        border: none;
    }
}