/* ==========================================================================
   SIDEBAR BASE
   ========================================================================== */
.side { 
    width: var(--side-width); 
    border-right: 1px solid var(--line); 
    display: flex; 
    flex-direction: column; 
    transition: width var(--transition); 
    flex-shrink: 0; 
    background: #fff;
}

.nav { 
    padding: 10px 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    list-style: none;
    margin: 0;
}

/* Limpieza general de listas y enlaces */
#navContainer ul, #navContainer li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

#navContainer a {
    text-decoration: none !important;
    color: var(--text);
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* ==========================================================================
   NIVEL 1 (PADRES)
   ========================================================================== */
.nav-link { 
    display: flex !important; 
    justify-content: space-between; 
    padding: 10px 15px; 
    border: none; 
    background: transparent; 
    cursor: pointer; 
    width: 100%; 
    border-left: 4px solid transparent !important;
}

/* Contenedor interno: Icono + Texto */
.nav-link > span:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-link:hover, 
.nav-link[aria-expanded="true"]:not(.collapsed) { 
    background: #f8f9fa; 
}

/* Iconos Cuadrados */
.ico-box { 
    min-width: 32px; 
    height: 32px; 
    border-radius: 8px; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-link .lbl {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   NIVEL 2 (SUBMENÚS)
   ========================================================================== */
.nav-sublist {
    background: #fafafa; 
    margin: 0;
    padding: 5px 0;
}

.nav-link-sub {
    padding: 8px 15px 8px 58px; /* Alineado con el texto del padre */
    color: var(--muted);
    font-size: 13px;
    border-left: 4px solid transparent !important;
}

.nav-link-sub:hover {
    background: rgba(0,0,0,0.03);
    color: var(--accent);
}

/* ==========================================================================
   ESTADOS (ACTIVO Y COLAPSADO)
   ========================================================================== */

/* Margen Rojo Activo (Solo para el seleccionado) */
.nav-link.active, 
.nav-link-sub.active {
    border-left-color: var(--accent) !important;
    background: rgba(176, 0, 32, 0.05) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

/* Flecha (Chevron) */
.chevron-icon {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.3s ease;
}

/* Girar flecha cuando el menú está abierto */
.nav-link:not(.collapsed) .chevron-icon {
    transform: rotate(180deg);
}
/* Cuando el sidebar tiene la clase .collapsed */
.side.collapsed {
    width: 70px; /* Ancho mini */
}

/* Ocultar etiquetas y flechas en modo mini */
.side.collapsed .lbl, 
.side.collapsed .chevron-icon, 
.side.collapsed .nav-sublist,
.side.collapsed .sideFooter span {
    display: none !important;
}

/* Centrar los iconos en modo mini */
.side.collapsed .nav-link {
    justify-content: center;
    padding: 10px 0;
}

.side.collapsed .ico-box {
    margin: 0; /* Quita el margen derecho para que quede centrado */
}
/* Footer */
.sideFooter {
    margin-top: auto;
    padding: 20px 15px;
    border-top: 1px solid var(--line);
}
/* Forzar que Bootstrap oculte los menús si no tienen la clase .show */
.collapse:not(.show) {
    display: none !important;
}

/* Asegurar que la animación de Bootstrap funcione */
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}