/* ========================================
   📍 MENU ACTIVE STATE v4.0
   Estado visual del ítem de menú activo
   ======================================== */

/* ========================================
   1. CLASE PRINCIPAL .menu-active
   ======================================== */

.sidebar-nav-item.menu-active {
    /* Fondo destacado */
    background-color: var(--surface-color, var(--surface-secondary, #2a2a2a));
    
    /* Color de texto en acento */
    color: var(--accent-primary, #00d4ff) !important;
    
    /* Borde izquierdo de 4px */
    border-left: 4px solid var(--accent-color, var(--accent-primary, #00d4ff));
    
    /* Compensar el padding por el borde */
    padding-left: calc(var(--spacing-md, 1rem) - 4px);
    
    /* Sombra sutil para profundidad */
    box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1);
}

/* ========================================
   2. ELEMENTOS INTERNOS DEL ÍTEM ACTIVO
   ======================================== */

/* Icono del menú activo */
.sidebar-nav-item.menu-active .sidebar-nav-icon {
    color: var(--accent-primary, #00d4ff);
    transform: scale(1.1);
    transition: transform var(--transition-base, 250ms);
}

/* Badge del menú activo */
.sidebar-nav-item.menu-active .sidebar-nav-badge {
    background-color: var(--accent-primary, #00d4ff);
    color: var(--text-inverse, #0a0a0a);
    transform: scale(1.05);
}

/* ========================================
   3. INDICADOR VISUAL (BARRA LATERAL)
   ======================================== */

.sidebar-nav-item.menu-active::before {
    /* Usar el pseudo-elemento existente para la barra */
    transform: scaleY(1);
    background: var(--accent-primary, #00d4ff);
}

/* ========================================
   4. EFECTOS ADICIONALES
   ======================================== */

/* Efecto de brillo sutil */
.sidebar-nav-item.menu-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}

/* ========================================
   5. ESTADOS HOVER Y FOCUS
   ======================================== */

/* Hover sobre el ítem activo */
.sidebar-nav-item.menu-active:hover {
    background-color: var(--surface-hover, #333333);
    border-left-color: var(--accent-primary-hover, #00b8e6);
}

/* Focus visible para accesibilidad */
.sidebar-nav-item.menu-active:focus-visible {
    outline: 2px solid var(--accent-primary, #00d4ff);
    outline-offset: 2px;
}

/* ========================================
   6. ANIMACIONES DE TRANSICIÓN
   ======================================== */

/* Animación cuando se activa */
@keyframes menuActivate {
    0% {
        border-left-width: 0;
        padding-left: var(--spacing-md, 1rem);
    }
    100% {
        border-left-width: 4px;
        padding-left: calc(var(--spacing-md, 1rem) - 4px);
    }
}

.sidebar-nav-item.menu-active {
    animation: menuActivate 0.3s ease-out;
}

/* Pulso sutil en el icono al activarse */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
}

.sidebar-nav-item.menu-active .sidebar-nav-icon {
    animation: iconPulse 0.5s ease-out;
}

/* ========================================
   7. VARIANTES DE COLOR
   ======================================== */

/* Variante con color de éxito */
.sidebar-nav-item.menu-active.success {
    border-left-color: var(--accent-success, #00ff88);
    color: var(--accent-success, #00ff88) !important;
}

.sidebar-nav-item.menu-active.success .sidebar-nav-icon {
    color: var(--accent-success, #00ff88);
}

/* Variante con color de advertencia */
.sidebar-nav-item.menu-active.warning {
    border-left-color: var(--accent-warning, #ff8c00);
    color: var(--accent-warning, #ff8c00) !important;
}

.sidebar-nav-item.menu-active.warning .sidebar-nav-icon {
    color: var(--accent-warning, #ff8c00);
}

/* ========================================
   8. RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* En móvil, hacer el borde más visible */
    .sidebar-nav-item.menu-active {
        border-left-width: 6px;
        padding-left: calc(var(--spacing-md, 1rem) - 6px);
    }
}

/* ========================================
   9. MODO OSCURO / CLARO
   ======================================== */

/* Modo oscuro (por defecto) */
.sidebar-nav-item.menu-active {
    /* Estilos por defecto ya definidos arriba */
}

/* Modo claro (futuro) */
.light-mode .sidebar-nav-item.menu-active {
    background-color: rgba(0, 212, 255, 0.1);
    color: #0095ff !important;
    border-left-color: #0095ff;
}

.light-mode .sidebar-nav-item.menu-active .sidebar-nav-icon {
    color: #0095ff;
}

/* ========================================
   10. ACCESIBILIDAD
   ======================================== */

/* Indicador para lectores de pantalla */
.sidebar-nav-item.menu-active::before {
    /* Añadir aria-label dinámicamente con JavaScript */
}

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .sidebar-nav-item.menu-active,
    .sidebar-nav-item.menu-active .sidebar-nav-icon {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   11. ESTADO DESHABILITADO
   ======================================== */

.sidebar-nav-item.menu-active.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   12. COMPATIBILIDAD CON .active EXISTENTE
   ======================================== */

/* Asegurar que .menu-active tiene prioridad sobre .active */
.sidebar-nav-item.menu-active {
    /* Todos los estilos tienen mayor especificidad */
}

/* Si ambas clases están presentes, .menu-active gana */
.sidebar-nav-item.active.menu-active {
    /* Los estilos de .menu-active prevalecen */
}

/* ========================================
   13. TRANSICIONES SUAVES
   ======================================== */

.sidebar-nav-item {
    transition: 
        background-color var(--transition-base, 250ms),
        color var(--transition-base, 250ms),
        border-left-width var(--transition-base, 250ms),
        padding-left var(--transition-base, 250ms),
        box-shadow var(--transition-base, 250ms);
}

/* ========================================
   14. HOVER SOBRE OTROS ÍTEMS
   ======================================== */

/* Cuando hay un ítem activo, los otros se atenúan ligeramente en hover */
.sidebar-nav:has(.menu-active) .sidebar-nav-item:not(.menu-active):hover {
    opacity: 0.8;
}

/* ========================================
   15. INDICADOR DE PÁGINA ACTUAL
   ======================================== */

/* Tooltip opcional que muestra "Página actual" */
.sidebar-nav-item.menu-active::after {
    /* Ya usado para el efecto de brillo, pero se puede extender */
}

/* Badge "Actual" opcional */
.sidebar-nav-item.menu-active .current-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: var(--accent-primary, #00d4ff);
    color: var(--text-inverse, #0a0a0a);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full, 9999px);
    text-transform: uppercase;
}

/* ========================================
   16. ESTADOS DE CARGA
   ======================================== */

/* Skeleton loader para el ítem activo mientras carga */
.sidebar-nav-item.menu-active.loading {
    position: relative;
    overflow: hidden;
}

.sidebar-nav-item.menu-active.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.3) 50%,
        transparent 100%
    );
    animation: loading-shine 1.5s infinite;
}

@keyframes loading-shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ========================================
   17. NOTIFICACIÓN VISUAL
   ======================================== */

/* Pulso para llamar la atención al cambiar de página */
.sidebar-nav-item.menu-active.highlight {
    animation: highlight-pulse 1s ease-out;
}

@keyframes highlight-pulse {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.1);
    }
    50% {
        box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.3);
    }
}

/* ========================================
   18. COMPATIBILIDAD CON TEMAS
   ======================================== */

/* Variables CSS para temas personalizados */
:root {
    --menu-active-bg: var(--surface-secondary, #2a2a2a);
    --menu-active-color: var(--accent-primary, #00d4ff);
    --menu-active-border: var(--accent-primary, #00d4ff);
}

/* Aplicar variables personalizables */
.sidebar-nav-item.menu-active {
    background-color: var(--menu-active-bg);
    color: var(--menu-active-color) !important;
    border-left-color: var(--menu-active-border);
}