/* ==========================================================================
   MENU2025.CSS - Hospital Regional Eleazar Guzmán Barrón
   Sistema de Navegación Principal con Variables CSS Unificadas
   Versión: 2.0 - Actualizado para compatibilidad con transparencia.php
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS GLOBALES
   --------------------------------------------------------------------------
   Definimos las variables de color para mantener consistencia visual
   en todo el sitio. Estas variables se sincronizan con las definidas
   en transparencia.php para evitar conflictos de colores.
   ========================================================================== */
:root {
    /* --- Colores Primarios Institucionales --- */
    --minsa-primary: #1a5276;       /* Azul oscuro principal - usado en fondos principales */
    --minsa-secondary: #2980b9;     /* Azul medio - usado para acentos y hover */
    --minsa-accent: #27ae60;        /* Verde institucional - indicadores de estado */
    --minsa-light: #ebf5fb;         /* Azul muy claro - fondos suaves */
    
    /* --- Gradiente Principal --- */
    /* Gradiente diagonal que da profundidad visual al menú */
    --minsa-gradient: linear-gradient(135deg, #1a5276 0%, #2980b9 50%, #1a5276 100%);
    
    /* --- Colores de Texto --- */
    --menu-text-primary: #FFFFFF;   /* Texto principal sobre fondos oscuros */
    --menu-text-secondary: #333333; /* Texto en submenús sobre fondo claro */
    --menu-text-hover: #f1f1f1;     /* Texto al pasar el mouse */
    
    /* --- Colores de Fondo del Submenú --- */
    --submenu-bg: #FFFFFF;          /* Fondo blanco de los desplegables */
    --submenu-hover-bg: #f4f7f9;    /* Fondo al hacer hover en ítems */
    --submenu-border: #f0f0f0;      /* Separadores entre ítems */
    
    /* --- Sombras --- */
    --menu-shadow: 0 2px 10px rgba(0,0,0,0.1);         /* Sombra sutil del menú */
    --submenu-shadow: 0 8px 15px rgba(0,0,0,0.15);     /* Sombra de desplegables */
    
    /* --- Transiciones --- */
    --transition-fast: 0.2s ease;   /* Transiciones rápidas (hover simple) */
    --transition-normal: 0.3s ease; /* Transiciones normales (desplegables) */
}


/* ==========================================================================
   2. CONTENEDOR PRINCIPAL DE NAVEGACIÓN
   --------------------------------------------------------------------------
   El elemento <nav> que envuelve todo el menú. Se mantiene fijo en la
   parte superior de la pantalla durante el scroll (sticky).
   ========================================================================== */
.main-nav {
    /* Fondo con el color primario institucional (usando variable) */
    background-color: var(--minsa-primary);
    
    /* Borde inferior que crea separación visual con el contenido */
    border-bottom: 4px solid var(--minsa-secondary);
    
    /* Posición sticky: el menú "se pega" arriba al hacer scroll */
    position: sticky;
    top: 0;
    
    /* Z-index alto para que siempre esté por encima del contenido */
    z-index: 1000;
    
    /* Sombra suave que da sensación de elevación */
    box-shadow: var(--menu-shadow);
}


/* ==========================================================================
   3. CONTENEDOR DE LA LISTA DEL MENÚ
   --------------------------------------------------------------------------
   La lista <ul> que contiene todos los ítems del menú principal.
   Usa Flexbox para distribuir los elementos horizontalmente.
   ========================================================================== */
.menu-container {
    /* Elimina los estilos por defecto de las listas */
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Flexbox: distribuye los ítems en fila horizontal */
    display: flex;
    
    /* Centra los ítems horizontalmente en el contenedor */
    justify-content: center;
    
    /* Permite que los ítems salten a la siguiente línea si no caben */
    flex-wrap: wrap;
}


/* ==========================================================================
   4. ÍTEMS DEL MENÚ PRINCIPAL
   --------------------------------------------------------------------------
   Cada <li> del menú principal. Position relative es necesario
   para que los submenús (position absolute) se posicionen correctamente.
   ========================================================================== */
.menu-container > li {
    /* Establece el contexto de posicionamiento para los submenús */
    position: relative;
}


/* ==========================================================================
   5. ENLACES DEL MENÚ PRINCIPAL
   --------------------------------------------------------------------------
   Los enlaces <a> dentro de cada ítem. Define la apariencia visual
   del texto y el área clickeable de cada opción.
   ========================================================================== */
.menu-container > li > a {
    /* Display block hace que todo el área sea clickeable */
    display: block;
    
    /* Espaciado interno: 18px arriba/abajo, 15px izquierda/derecha */
    padding: 18px 15px;
    
    /* Color del texto usando variable */
    color: var(--menu-text-primary);
    
    /* Elimina el subrayado típico de los enlaces */
    text-decoration: none;
    
    /* Peso de fuente medio para buena legibilidad */
    font-weight: 500;
    
    /* Tamaño de fuente ligeramente reducido */
    font-size: 0.9rem;
    
    /* Texto en mayúsculas para estilo institucional */
    text-transform: uppercase;
    
    /* Transición suave para el efecto hover */
    transition: all var(--transition-normal);
}


/* ==========================================================================
   6. EFECTOS HOVER Y FOCUS EN ENLACES PRINCIPALES
   --------------------------------------------------------------------------
   Estados interactivos: cuando el usuario pasa el mouse sobre un ítem
   o cuando navega con teclado (accesibilidad).
   ========================================================================== */
.menu-container > li > a:hover,
.menu-container > li:hover > a,
.menu-container > li > a:focus {
    /* Fondo más oscuro para indicar interacción */
    background-color: var(--minsa-secondary);
    
    /* Color de texto ligeramente atenuado */
    color: var(--menu-text-hover);
}

/* Estado activo: ítem de menú correspondiente a la página actual */
.menu-container > li.active > a {
    /* Fondo que indica la página actual */
    background-color: var(--minsa-secondary);
    
    /* Borde inferior como indicador visual adicional */
    border-bottom: 3px solid var(--minsa-accent);
}


/* ==========================================================================
   7. SUBMENÚS (MENÚS DESPLEGABLES)
   --------------------------------------------------------------------------
   Los submenús aparecen al pasar el mouse sobre un ítem con clase
   "dropdown". Usan position absolute para "flotar" sobre el contenido.
   ========================================================================== */
.submenu {
    /* Posición absoluta respecto al padre (li con position relative) */
    position: absolute;
    
    /* Se ubica justo debajo del ítem padre */
    top: 100%;
    left: 0;
    
    /* Fondo blanco para contraste con el menú principal */
    background-color: var(--submenu-bg);
    
    /* Ancho mínimo para que el contenido no quede muy apretado */
    min-width: 220px;
    
    /* Elimina estilos por defecto de lista */
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Sombra pronunciada para efecto de elevación (flotante) */
    box-shadow: var(--submenu-shadow);
    
    /* Borde superior que conecta visualmente con el menú principal */
    border-top: 3px solid var(--minsa-primary);
    
    /* --- ESTADO INICIAL: OCULTO --- */
    opacity: 0;                      /* Invisible */
    visibility: hidden;              /* No interactuable */
    transform: translateY(10px);     /* Ligeramente desplazado hacia abajo */
    
    /* Transición suave para la aparición */
    transition: opacity var(--transition-normal), 
                transform var(--transition-normal);
}


/* ==========================================================================
   8. MOSTRAR SUBMENÚ AL HOVER
   --------------------------------------------------------------------------
   Cuando el usuario pasa el mouse sobre un ítem con clase "dropdown",
   su submenú se hace visible con una animación suave.
   ========================================================================== */
.dropdown:hover > .submenu {
    opacity: 1;                  /* Completamente visible */
    visibility: visible;         /* Puede recibir clics */
    transform: translateY(0);    /* Vuelve a su posición original */
}


/* ==========================================================================
   9. ÍTEMS DENTRO DEL SUBMENÚ
   --------------------------------------------------------------------------
   Cada <li> dentro del submenú. Define los separadores visuales
   entre cada opción del desplegable.
   ========================================================================== */
.submenu li {
    /* Borde inferior sutil como separador */
    border-bottom: 1px solid var(--submenu-border);
}

/* El último ítem no necesita separador inferior */
.submenu li:last-child {
    border-bottom: none;
}


/* ==========================================================================
   10. ENLACES DENTRO DEL SUBMENÚ
   --------------------------------------------------------------------------
   Los enlaces <a> de cada opción del desplegable. Estilo diferente
   al menú principal: texto oscuro sobre fondo claro.
   ========================================================================== */
.submenu li a {
    /* Área clickeable completa */
    display: block;
    
    /* Espaciado interno cómodo */
    padding: 12px 20px;
    
    /* Texto oscuro para legibilidad sobre fondo blanco */
    color: var(--menu-text-secondary);
    
    /* Sin subrayado */
    text-decoration: none;
    
    /* Fuente un poco más pequeña que el menú principal */
    font-size: 0.85rem;
    
    /* Peso normal (no tan grueso como el menú principal) */
    font-weight: 400;
    
    /* Transición rápida para el hover */
    transition: background var(--transition-fast),
                padding var(--transition-fast),
                color var(--transition-fast);
}


/* ==========================================================================
   11. HOVER EN ÍTEMS DEL SUBMENÚ
   --------------------------------------------------------------------------
   Efecto visual cuando el usuario pasa el mouse sobre una opción
   del desplegable. Incluye un sutil desplazamiento del texto.
   ========================================================================== */
.submenu li a:hover {
    /* Fondo ligeramente coloreado */
    background-color: var(--submenu-hover-bg);
    
    /* Texto cambia al color primario institucional */
    color: var(--minsa-primary);
    
    /* Desplazamiento sutil hacia la derecha (efecto elegante) */
    padding-left: 25px;
}

/* Estado focus para accesibilidad con teclado */
.submenu li a:focus {
    background-color: var(--submenu-hover-bg);
    color: var(--minsa-primary);
    outline: 2px solid var(--minsa-accent);
    outline-offset: -2px;
}


/* ==========================================================================
   12. INDICADOR DE DESPLEGABLE (FLECHA)
   --------------------------------------------------------------------------
   Una pequeña flecha (▼) que aparece junto a los ítems del menú
   que tienen submenú, indicando que son desplegables.
   ========================================================================== */
.dropdown > a::after {
    /* Carácter de flecha hacia abajo */
    content: ' ▼';
    
    /* Tamaño reducido para que sea sutil */
    font-size: 0.7rem;
    
    /* Pequeño espacio antes de la flecha */
    margin-left: 5px;
    
    /* Alineación vertical con el texto */
    vertical-align: middle;
    
    /* Semi-transparente para que no sea muy prominente */
    opacity: 0.7;
    
    /* Transición para rotar cuando está abierto (opcional) */
    transition: transform var(--transition-fast);
}

/* Rotación de la flecha cuando el submenú está visible */
.dropdown:hover > a::after {
    transform: rotate(180deg);
}


/* ==========================================================================
   13. BOTÓN HAMBURGUESA (MENÚ MÓVIL)
   --------------------------------------------------------------------------
   Botón que aparece solo en pantallas pequeñas. Al hacer clic,
   muestra/oculta el menú en formato vertical.
   ========================================================================== */
.menu-toggle {
    /* Oculto por defecto (solo visible en móvil) */
    display: none;
    
    /* Fondo oscuro consistente con el menú */
    background: var(--minsa-secondary);
    
    /* Texto blanco */
    color: var(--menu-text-primary);
    
    /* Espaciado interno amplio para fácil toque */
    padding: 15px 20px;
    
    /* Texto alineado a la derecha */
    text-align: right;
    
    /* Cursor de mano para indicar que es clickeable */
    cursor: pointer;
    
    /* Texto en negrita */
    font-weight: bold;
    font-size: 1.2rem;
    
    /* Sin borde */
    border: none;
    
    /* Ancho completo */
    width: 100%;
    
    /* Transición para hover */
    transition: background var(--transition-fast);
}

/* Hover en el botón hamburguesa */
.menu-toggle:hover {
    background: var(--minsa-primary);
}

/* Icono del menú hamburguesa */
.menu-toggle::before {
    content: '☰';
    margin-right: 10px;
}


/* ==========================================================================
   14. ESTILOS RESPONSIVE - TABLETS (max-width: 992px)
   --------------------------------------------------------------------------
   Adaptaciones para pantallas medianas. El menú comienza a
   comportarse de manera diferente para mejor usabilidad táctil.
   ========================================================================== */
@media (max-width: 992px) {
    
    /* --- Mostrar el botón hamburguesa --- */
    .menu-toggle {
        display: block;
    }
    
    /* --- El menú se oculta por defecto --- */
    .menu-container {
        /* Oculto hasta que se active */
        display: none;
        
        /* Disposición vertical en lugar de horizontal */
        flex-direction: column;
        
        /* Ocupa todo el ancho disponible */
        width: 100%;
        
        /* Fondo consistente */
        background: var(--minsa-primary);
    }
    
    /* --- Clase para mostrar el menú (activada con JavaScript) --- */
    .menu-container.active {
        display: flex;
    }
    
    /* --- Ítems ocupan todo el ancho --- */
    .menu-container > li {
        width: 100%;
        
        /* Separador sutil entre ítems */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* --- Enlaces con más espaciado para toque táctil --- */
    .menu-container > li > a {
        padding: 15px 25px;
        
        /* Tamaño de fuente ligeramente mayor para legibilidad */
        font-size: 0.95rem;
    }
    
    /* --- Submenús: comportamiento diferente en móvil --- */
    .submenu {
        /* Ya no flota: se expande empujando el contenido */
        position: static;
        
        /* Ocupa todo el ancho del padre */
        width: 100%;
        
        /* Siempre visible en términos de CSS (controlado por display) */
        opacity: 1;
        visibility: visible;
        transform: none;
        
        /* Pero oculto por defecto con display */
        display: none;
        
        /* Fondo más oscuro para diferenciarlo */
        background: var(--minsa-secondary);
        
        /* Sin sombra en móvil (no es necesaria) */
        box-shadow: none;
        
        /* Borde superior sutil */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* --- Mostrar submenú cuando el padre tiene clase 'open' --- */
    .dropdown.open > .submenu {
        display: block;
    }
    
    /* --- Enlaces del submenú en móvil --- */
    .submenu li a {
        /* Texto blanco sobre fondo oscuro */
        color: var(--menu-text-primary);
        
        /* Indentación para mostrar jerarquía */
        padding-left: 40px;
    }
    
    /* --- Hover en submenú móvil --- */
    .submenu li a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--menu-text-primary);
        padding-left: 45px;
    }
    
    /* --- La flecha del dropdown apunta a la derecha en móvil --- */
    .dropdown > a::after {
        float: right;
        transform: rotate(-90deg);
    }
    
    /* --- Cuando está abierto, la flecha apunta hacia abajo --- */
    .dropdown.open > a::after {
        transform: rotate(0deg);
    }
}


/* ==========================================================================
   15. ESTILOS RESPONSIVE - MÓVILES (max-width: 576px)
   --------------------------------------------------------------------------
   Adaptaciones adicionales para pantallas muy pequeñas.
   Optimizado para uso con una sola mano.
   ========================================================================== */
@media (max-width: 576px) {
    
    /* --- Enlaces más grandes para dedos --- */
    .menu-container > li > a {
        padding: 18px 20px;
        font-size: 1rem;
    }
    
    /* --- Botón hamburguesa más prominente --- */
    .menu-toggle {
        padding: 18px 20px;
        font-size: 1.1rem;
        text-align: center;
    }
    
    /* --- Submenú con más espacio --- */
    .submenu li a {
        padding: 15px 20px 15px 35px;
        font-size: 0.9rem;
    }
}


/* ==========================================================================
   16. MEJORAS DE ACCESIBILIDAD
   --------------------------------------------------------------------------
   Estilos adicionales para mejorar la accesibilidad del menú,
   incluyendo indicadores de focus y soporte para lectores de pantalla.
   ========================================================================== */

/* --- Focus visible para navegación con teclado --- */
.menu-container > li > a:focus-visible {
    /* Outline visible y de buen contraste */
    outline: 3px solid var(--minsa-accent);
    outline-offset: -3px;
    
    /* Fondo para mayor visibilidad */
    background-color: var(--minsa-secondary);
}

/* --- Saltar al contenido (para lectores de pantalla) --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--minsa-accent);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    z-index: 9999;
    transition: top var(--transition-fast);
}

/* Cuando recibe focus, aparece */
.skip-link:focus {
    top: 0;
}

/* --- Indicador de página actual para accesibilidad --- */
.menu-container > li > a[aria-current="page"] {
    background-color: var(--minsa-secondary);
    border-bottom: 3px solid var(--minsa-accent);
}


/* ==========================================================================
   17. ANIMACIONES OPCIONALES
   --------------------------------------------------------------------------
   Animaciones sutiles que mejoran la experiencia de usuario.
   Pueden deshabilitarse para usuarios que prefieren menos movimiento.
   ========================================================================== */

/* --- Animación de entrada del menú en móvil --- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplicar animación cuando el menú se activa */
.menu-container.active {
    animation: slideDown 0.3s ease forwards;
}

/* --- Respetar preferencias de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    /* Desactivar todas las animaciones y transiciones */
    .menu-container,
    .menu-container > li > a,
    .submenu,
    .submenu li a,
    .dropdown > a::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   18. UTILIDADES ADICIONALES
   --------------------------------------------------------------------------
   Clases de utilidad que pueden usarse para casos especiales
   o personalizaciones específicas.
   ========================================================================== */

/* --- Menú transparente (para páginas con hero image) --- */
.main-nav.transparent {
    background-color: transparent;
    box-shadow: none;
}

.main-nav.transparent:hover {
    background-color: var(--minsa-primary);
}

/* --- Menú con gradiente --- */
.main-nav.gradient {
    background: var(--minsa-gradient);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Ítem destacado (ej: "Emergencias") --- */
.menu-container > li.highlighted > a {
    background-color: var(--minsa-accent);
    color: white;
}

.menu-container > li.highlighted > a:hover {
    background-color: #219a52;
}

/* --- Separador visual entre grupos de ítems --- */
.menu-container > li.separator {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 10px;
    padding-left: 10px;
}

@media (max-width: 992px) {
    .menu-container > li.separator {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        margin-top: 10px;
        padding-top: 10px;
    }
}