/*
 * CUSTOM MENU STYLES - Edificio las Tres Carabelas
 *
 * Mejoras UX/UI para el sistema de menú:
 * - Integración con la paleta de colores corporativa
 * - Jerarquía visual clara entre niveles de menú
 * - Feedback interactivo y moderno
 * - Transiciones suaves y profesionales
 *
 * Paleta de colores del sitio:
 * - Header/Nav: rgba(0, 61, 92, 1) - Azul oscuro corporativo
 * - Footer: rgba(0, 61, 92, 1) - Azul oscuro corporativo (actualizado)
 * - Fondo: rgba(248, 250, 251, 1) - Gris claro
 * - Acento hover: rgba(17, 85, 204, 1) con variaciones de opacidad
 *
 * NOTA: El footer se actualizó de rgba(17, 85, 204, 1) a rgba(0, 61, 92, 1)
 * para unificar la paleta corporativa y mejorar contraste del logo.
 */

/* ==========================================
   ESTILOS GLOBALES DEL MENÚ
   ========================================== */

/* Mejorar la transición general del menú */
[id*="MenuObject"] {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Contenedor principal del menú con sombra sutil */
[id*="MenuObject_"][id*="_container"] {
    box-shadow: 0 2px 4px rgba(0, 61, 92, 0.08);
}

/* ==========================================
   NIVEL 1 - MENÚ PRINCIPAL (Desktop)
   ========================================== */

/* Items del menú principal - Fondo coherente con header */
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
    background-color: rgba(0, 61, 92, 1) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 4px !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: visible;
}

/* Texto del menú principal */
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper button {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 500 !important;
    transition: all 0.25s ease;
}

/* Estado HOVER del menú principal - Usar el azul vibrante del footer */
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper {
    background-color: rgba(17, 85, 204, 1) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 85, 204, 0.3);
}

/* Texto en hover */
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > li.imPage:hover > .label-wrapper button,
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper button {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Estado CURRENT (página actual) */
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper {
    background-color: rgba(17, 85, 204, 1) !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.8) !important;
}

[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnCurrent > .label-wrapper button {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Indicador visual para items con submenú */
[id*="MenuObject_"][id*="_container"] > ul > li.imLevel > .label-wrapper::after {
    content: '▾';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
}

[id*="MenuObject_"][id*="_container"] > ul > li.imLevel:hover > .label-wrapper::after {
    transform: translateY(-50%) rotate(180deg);
    color: rgba(255, 255, 255, 1);
}

/* ==========================================
   NIVEL 2 - PRIMER NIVEL DE SUBMENÚ
   ========================================== */

/* Contenedor de submenús nivel 2 */
[id*="MenuObject"] ul ul {
    background-color: rgba(17, 85, 204, 0.95) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 20px rgba(0, 61, 92, 0.25);
    padding: 8px 0;
    margin-top: 4px;
    backdrop-filter: blur(8px);
}

/* Items del submenú nivel 2 */
[id*="MenuObject"] ul ul li > .label-wrapper {
    background-color: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding-left: 15px !important;
    transition: all 0.25s ease;
}

/* Texto del submenú nivel 2 */
[id*="MenuObject"] ul ul .label,
[id*="MenuObject"] ul ul button {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 400 !important;
    font-size: 11pt !important;
}

/* Hover en submenú nivel 2 */
[id*="MenuObject"] ul ul li:hover > .label-wrapper {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-left-color: rgba(255, 255, 255, 0.9) !important;
    padding-left: 20px !important;
}

[id*="MenuObject"] ul ul li:hover > .label-wrapper .label,
[id*="MenuObject"] ul ul li:hover > .label-wrapper button {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 500 !important;
}

/* Items activos en submenú nivel 2 */
[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-left-color: rgba(255, 255, 255, 1) !important;
}

[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper .label,
[id*="MenuObject"] ul ul .imMnMnCurrent > .label-wrapper button {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 600 !important;
}

/* ==========================================
   NIVEL 3 - SEGUNDO NIVEL DE SUBMENÚ
   ========================================== */

/* Contenedor de submenús nivel 3 */
[id*="MenuObject"] ul ul ul {
    background-color: rgba(17, 85, 204, 0.85) !important;
    margin-left: -8px;
    margin-top: 2px;
}

/* Items del submenú nivel 3 */
[id*="MenuObject"] ul ul ul li > .label-wrapper {
    padding-left: 25px !important;
    border-left-width: 2px !important;
}

[id*="MenuObject"] ul ul ul .label,
[id*="MenuObject"] ul ul ul button {
    font-size: 10pt !important;
    font-weight: 400 !important;
}

/* Hover en submenú nivel 3 */
[id*="MenuObject"] ul ul ul li:hover > .label-wrapper {
    padding-left: 30px !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* ==========================================
   NIVEL 4+ - NIVELES ADICIONALES
   ========================================== */

[id*="MenuObject"] ul ul ul ul {
    background-color: rgba(17, 85, 204, 0.75) !important;
}

[id*="MenuObject"] ul ul ul ul li > .label-wrapper {
    padding-left: 35px !important;
}

[id*="MenuObject"] ul ul ul ul .label,
[id*="MenuObject"] ul ul ul ul button {
    font-size: 9pt !important;
}

/* ==========================================
   SEPARADORES DEL MENÚ
   ========================================== */

[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper {
    background-color: rgba(0, 61, 92, 0.7) !important;
    cursor: default;
    border-radius: 4px !important;
}

[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper .label,
[id*="MenuObject_"][id*="_container"] > ul > .imMnMnSeparator > .label-wrapper button {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 300 !important;
    font-style: italic;
}

[id*="MenuObject"] ul ul .imMnMnSeparator > .label-wrapper {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left: none !important;
    margin: 4px 0;
    padding: 2px 0;
}

[id*="MenuObject"] ul ul .imMnMnSeparator .label,
[id*="MenuObject"] ul ul .imMnMnSeparator button {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 9pt !important;
    font-weight: 300 !important;
}

/* ==========================================
   MENÚ MÓVIL (Hamburger)
   ========================================== */

/* Botón hamburguesa */
[id*="MenuObject"] .hamburger-button {
    background-color: rgba(0, 61, 92, 1) !important;
    border: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease;
}

[id*="MenuObject"] .hamburger-button:hover {
    background-color: rgba(17, 85, 204, 1) !important;
    transform: scale(1.05);
}

[id*="MenuObject"] .hamburger-bar {
    background-color: rgba(255, 255, 255, 1) !important;
    transition: all 0.3s ease;
}

/* Menú móvil desplegado */
[id*="MenuObject-menu-opened"] {
    background-color: rgba(0, 61, 92, 0.98) !important;
    backdrop-filter: blur(10px);
}

[id*="MenuObject-menu-opened"] [id*="_container-menu-opened"] > ul {
    background-color: rgba(0, 61, 92, 1) !important;
}

/* Botón de cierre del menú móvil */
[id*="MenuObject-menu-opened"] .hamburger-menu-close-button {
    color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(17, 85, 204, 1);
    transition: background-color 0.3s ease;
}

[id*="MenuObject-menu-opened"] .hamburger-menu-close-button:hover {
    background-color: rgba(17, 85, 204, 0.8);
}

/* Items en el menú móvil - Todos los niveles */
[id*="MenuObject-menu-opened"] ul li .label-wrapper {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.25s ease;
}

[id*="MenuObject-menu-opened"] ul li:hover .label-wrapper {
    background-color: rgba(17, 85, 204, 0.5) !important;
    border-left-color: rgba(255, 255, 255, 0.8) !important;
}

/* Jerarquía visual en menú móvil mediante indentación */
[id*="MenuObject-menu-opened"] ul ul li .label-wrapper {
    padding-left: 30px !important;
}

[id*="MenuObject-menu-opened"] ul ul ul li .label-wrapper {
    padding-left: 50px !important;
}

[id*="MenuObject-menu-opened"] ul ul ul ul li .label-wrapper {
    padding-left: 70px !important;
}

/* Fondo del menú móvil */
[id*="MenuObject-menu-opened"] .hamburger-menu-background {
    background-color: rgba(0, 61, 92, 0.95) !important;
}

/* ==========================================
   ACCESIBILIDAD Y FOCUS
   ========================================== */

/* Mejorar el indicador de foco para teclado */
[id*="MenuObject"] .label-wrapper:has(:focus-visible) {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(17, 85, 204, 0.3);
}

[id*="MenuObject"] button:focus-visible {
    outline: none;
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */

/* Animación de aparición de submenús */
[id*="MenuObject"] ul ul {
    animation: slideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de hover en items */
[id*="MenuObject"] li .label-wrapper {
    position: relative;
}

[id*="MenuObject"] li .label-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.8);
    transition: width 0.3s ease;
}

[id*="MenuObject"] li:hover .label-wrapper::before {
    width: 100%;
}

/* ==========================================
   RESPONSIVE - AJUSTES POR BREAKPOINT
   ========================================== */

/* Desktop (> 1200px) */
@media (min-width: 1200.0px) {
    [id*="MenuObject_"][id*="_container"] > ul > li {
        margin-inline-start: 3px;
    }

    [id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
        border-radius: 6px !important;
    }
}

/* Tablet (720px - 1200px) */
@media (max-width: 1199.9px) and (min-width: 720.0px) {
    [id*="MenuObject_"][id*="_container"] > ul > li {
        margin-inline-start: 2px;
    }

    [id*="MenuObject"] ul ul {
        min-width: 200px;
    }
}

/* Mobile (< 720px) */
@media (max-width: 719.9px) {
    /* En móvil, asegurar que todos los niveles sean claramente visibles */
    [id*="MenuObject-menu-opened"] ul li .label {
        font-size: 13pt !important;
    }

    [id*="MenuObject-menu-opened"] ul ul li .label {
        font-size: 12pt !important;
    }

    [id*="MenuObject-menu-opened"] ul ul ul li .label {
        font-size: 11pt !important;
    }
}

/* ==========================================
   REFINAMIENTOS FINALES
   ========================================== */

/* Asegurar que los enlaces no tengan el estilo por defecto */
[id*="MenuObject"] a.label {
    text-decoration: none !important;
}

/* Mejorar el contraste en modo alto contraste */
@media (prefers-contrast: high) {
    [id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }

    [id*="MenuObject"] ul ul {
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
    }
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    [id*="MenuObject"],
    [id*="MenuObject"] * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   TEMA OSCURO (Opcional - para futuro)
   ========================================== */

@media (prefers-color-scheme: dark) {
    /* El sitio ya usa colores oscuros, pero se puede refinar si es necesario */
    [id*="MenuObject_"][id*="_container"] > ul > li > .label-wrapper {
        background-color: rgba(0, 61, 92, 1) !important;
    }

    [id*="MenuObject"] ul ul {
        background-color: rgba(17, 85, 204, 0.98) !important;
    }
}

/* ==========================================
   FOOTER BACKGROUND COLOR OVERRIDE
   ========================================== */

/*
 * Cambio de color del footer para mejorar contraste del logo institucional.
 *
 * Problema original:
 * - Logo ce3c_logo_0.png se mimetizaba con el fondo azul vibrante del footer
 *
 * Solución:
 * - Cambiar footer de rgba(17, 85, 204, 1) a rgba(0, 61, 92, 1)
 * - Unificar paleta: header y footer usan el mismo azul oscuro corporativo
 *
 * Resultado:
 * - Logo con contraste natural sin efectos CSS adicionales
 * - Coherencia visual en todo el sitio
 *
 * IMPORTANTE: Este override usa !important para sobrescribir los estilos
 * generados por WebSite X5 en template.css. Se mantiene después de
 * regenerar el sitio si custom.css está incluido en el HEAD.
 */

/* Desktop (> 1200px) */
@media (min-width: 1200.0px) {
    #imFooterBg {
        background-color: rgba(0, 61, 92, 1) !important;
    }
}

/* Tablet (720px - 1200px) */
@media (max-width: 1199.9px) and (min-width: 720.0px) {
    #imFooterBg {
        background-color: rgba(0, 61, 92, 1) !important;
    }
}

/* Mobile (480px - 720px) */
@media (max-width: 719.9px) and (min-width: 480.0px) {
    #imFooterBg {
        background-color: rgba(0, 61, 92, 1) !important;
    }
}

/* Mobile pequeño (< 480px) */
@media (max-width: 479.9px) {
    #imFooterBg {
        background-color: rgba(0, 61, 92, 1) !important;
    }
}