/* Estilos consolidados del NavMenu para mejor organización */

/* Base styles - Solución para scroll en contenedor flex */
.nav-menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* Crucial para que flex + overflow funcione */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1a1f25;
    color: #ffffff;
    /* Scrollbar fino */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.nav-header {
    flex-shrink: 0;
}

.brand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

.brand-name {
    margin-top: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
}

/* Secciones de categorías - FORZAR vertical en todas las resoluciones */
.nav-pills {
    flex: 1 1 auto;
    min-height: 0; /* Crucial para scroll en flex */
    padding: 0.5rem 0;
    flex-direction: column !important;
    display: flex !important;
    /* NO poner overflow aquí, deja que nav-menu maneje el scroll */
}

.nav-item {
    margin-bottom: 0.25rem;
    padding: 0 0.15rem;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.nav-link {
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    padding: 0.65rem 0.5rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: visible;
}

.link-text {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Permitir que textos hagan wrap en móviles pequeños */
@media (max-width: 480px) {
    .nav-link,
    .link-text,
    .submenu-button {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-link.active {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-left: 3px solid #60a5fa;
}

/* Submenús */
.submenu-button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.submenu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.submenu-button.active {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Contenedores de submenús - SIEMPRE expanden hacia abajo (NUNCA popup flotante) */
.submenu-container {
    position: relative !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    /* Prevenir cualquier comportamiento de popup */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
}

.submenu-container.show {
    position: relative !important;
    max-height: none; /* Sin límite de altura - la altura la determina su contenido */
    overflow: visible; /* Permite que el contenido se muestre sin recorte */
    display: block !important;
    /* Sin transición en max-height cuando es 'none' */
}

/* Ocultar scrollbar en Chrome, Safari, Opera */
.submenu-container.show::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Scrollbar para nav-menu (Chrome, Safari, Opera) */
.nav-menu::-webkit-scrollbar {
    width: 5px;
}
.nav-menu::-webkit-scrollbar-track {
    background: transparent;
}
.nav-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

.submenu-items {
    padding: 0.5rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.submenu-items .nav-link {
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Separadores de secciones */
.text-uppercase.text-muted.small {
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Ajustes para escritorio */
@media (min-width: 768px) {
    .nav-menu {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }
    
    .brand-container {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .sidebar-logo {
        width: 90px;
        height: 90px;
    }

    .brand-name {
        font-size: 1.3rem;
    }

    .nav-pills .nav-link {
        padding: 0.8rem 1.2rem;
    }

    .link-text {
        font-size: 1rem;
    }
    
    .submenu-items .nav-link {
        padding: 0.65rem 1.2rem;
        font-size: 0.95rem;
    }
}

/* Ajustes para móviles (tablets pequeñas) */
@media (max-width: 767.98px) {
    .nav-menu {
        padding-top: 0.5rem;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 3.5rem);
        -webkit-overflow-scrolling: touch;
        flex-direction: column !important;
    }
    
    /* FORZAR nav-pills vertical en móviles */
    .nav-pills {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
    }
    
    .nav-item {
        width: 100% !important;
        display: block !important;
    }
    
    /* FORZAR submenús a expandir hacia abajo, NUNCA popup */
    .submenu-container {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .brand-container {
        padding: 0.5rem 0.3rem;
        margin-bottom: 0.3rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-logo {
        width: 50px;
        height: 50px;
    }

    .brand-name {
        font-size: 0.95rem;
        margin-top: 0.3rem;
    }

    .nav-pills .nav-link {
        padding: 0.5rem 0.35rem;
        font-size: 0.88rem;
    }

    .link-text {
        font-size: 0.88rem;
    }
    
    .submenu-items .nav-link {
        padding: 0.4rem 0.3rem;
        font-size: 0.84rem;
    }
    
    .nav-item {
        margin-bottom: 0.1rem;
        padding: 0 0.1rem;
    }
    
    .submenu-container {
        padding-left: 0;
        max-height: none; /* Sin límite en móviles - scroll en nav-menu */
    }
    
    .submenu-button {
        padding: 0.5rem 0.35rem;
        font-size: 0.88rem;
    }
    
    .submenu-items {
        padding-left: 0.15rem;
        margin-left: 0.3rem;
    }
}

/* Ajustes para celulares muy pequeños */
@media (max-width: 479.98px) {
    .brand-container {
        padding: 0.5rem 0.4rem;
        margin-bottom: 0.4rem;
    }

    .sidebar-logo {
        width: 42px;
        height: 42px;
    }

    .brand-name {
        font-size: 0.85rem;
        margin-top: 0.2rem;
    }

    .nav-pills .nav-link {
        padding: 0.45rem 0.3rem;
        font-size: 0.82rem;
    }

    .link-text {
        font-size: 0.82rem;
    }
    
    .submenu-items .nav-link {
        padding: 0.35rem 0.25rem;
        font-size: 0.77rem;
    }
    
    .nav-item {
        margin-bottom: 0.08rem;
        padding: 0 0.05rem;
    }
    
    .submenu-items {
        padding-left: 0.1rem;
        margin-left: 0.2rem;
    }
}

/* Touch scrolling para iOS */
.nav-menu, .submenu-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}