/**
 * UNITY NETWORKS - HEADER GLASS MODERNO
 * Estilos adicionales para asegurar el funcionamiento perfecto del header
 * Inspirado en unity.net.ar con mejoras específicas para el panel de donaciones
 */

/* Asegurar que el glassmorphism funcione en todos los navegadores */
.unity-header {
    background: rgba(20, 30, 60, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(120, 160, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 10, 30, 0.25) !important;
}

/* Asegurar que el dropdown funcione perfectamente con menos susceptibilidad */
.unity-nav-dropdown:hover .unity-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    z-index: 1001 !important;
}

/* Asegurar opacidad extra para el dropdown */
.unity-dropdown-menu {
    background: rgba(10, 15, 30, 0.97) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
}

/* Extender la zona de hover para evitar cierre accidental - CLAVE PARA UX */
.unity-nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -25px;
    right: -25px;
    height: 35px;
    background: transparent;
    z-index: 1000;
}

/* Asegurar que el trigger de "Tienda" tenga el mismo hover que otros elementos */
.unity-dropdown-trigger:hover {
    color: #ffffff !important;
    background: var(--glass-highlight) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 0 20px var(--shadow-blue) !important;
    text-decoration: none !important;
}

.unity-dropdown-trigger::before {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--gradient-blue) !important;
    transition: all var(--transition-smooth) !important;
    transform: translateX(-50%) !important;
}

.unity-dropdown-trigger:hover::before {
    width: 80% !important;
}

/* Delay en la transición para que no se cierre tan fácilmente */
.unity-dropdown-menu {
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition-delay: 0s !important;
}

.unity-nav-dropdown:hover .unity-dropdown-menu {
    pointer-events: auto !important;
    transition-delay: 0.1s !important;
}

/* Hacer el dropdown más fluido y fácil de usar */
.unity-dropdown-menu {
    border-radius: 20px !important;
    padding: 1.5rem 0 !important;
    top: calc(100% + 15px) !important;
}

.unity-dropdown-item {
    padding: 1rem 1.5rem !important;
    margin: 0 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.unity-dropdown-item:hover {
    background: rgba(120, 160, 255, 0.2) !important;
    color: #ffffff !important;
    transform: translateX(10px) scale(1.02) !important;
}

/* Mantener el dropdown abierto cuando el mouse está sobre él */
.unity-dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* Asegurar que los créditos se vean correctamente */
.unity-credits {
    position: relative !important;
    z-index: 10 !important;
}

/* Funcionalidad del menú móvil */
.unity-mobile-toggle {
    display: none !important;
}

.unity-nav {
    display: flex !important;
}

/* Efectos de scroll para el header */
body.scrolled .unity-header {
    background: rgba(20, 30, 60, 0.6) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
}

/* Fijar problemas potenciales en móvil */
@media (max-width: 1024px) {
    .unity-mobile-toggle {
        display: flex !important;
    }
    
    .unity-nav {
        display: none !important;
    }
    
    .unity-header.nav-open .unity-nav {
        display: flex !important;
    }
    
    .unity-dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        margin: 0.5rem 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .unity-dropdown-menu::before {
        display: none !important;
    }
    
    .unity-nav-dropdown::after {
        display: none !important;
    }
}

/* Asegurar que las fuentes se carguen correctamente */
body {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Suavizar transiciones en todos los navegadores */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Asegurar que el padding del body funcione correctamente y sea consistente */
body {
    padding-top: 90px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
}

/* Asegurar que el header se vea igual en todas las páginas - FORZAR CONSISTENCIA */
.unity-header-container {
    max-width: 1400px !important;
    padding: 1rem 2rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 85px !important;
    align-items: center !important;
    display: flex !important;
}

/* FORZAR estos estilos para que se apliquen en index.php y todas las páginas */
body .unity-header .unity-header-container {
    max-width: 1400px !important;
    padding: 1rem 2rem !important;
    margin: 0 auto !important;
    min-height: 85px !important;
    align-items: center !important;
    display: flex !important;
}

/* FORZAR CONSISTENCIA ABSOLUTA DE TAMAÑOS DE TEXTO */
body .unity-header .unity-logo,
body.unity-theme .unity-header .unity-logo {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
    align-items: center !important;
    display: flex !important;
}

body .unity-header .unity-logo-main,
body.unity-theme .unity-header .unity-logo-main {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
}

body .unity-header .unity-logo-sub,
body.unity-theme .unity-header .unity-logo-sub {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.2 !important;
}

body .unity-header .unity-nav-link,
body.unity-theme .unity-header .unity-nav-link {
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0.6rem 1rem !important;
    line-height: 1.2 !important;
    min-height: 44px !important;
}

body .unity-header .unity-credits,
body.unity-theme .unity-header .unity-credits {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0.6rem 1rem !important;
    line-height: 1.2 !important;
    min-height: 44px !important;
}

/* ELIMINAR ESPACIOS VACÍOS EN INDEX */
body .wrap,
body.unity-theme .wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body .content,
body .hero-section,
body main,
body.unity-theme .content,
body.unity-theme .hero-section,
body.unity-theme main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Mejorar el espaciado en dispositivos grandes */
@media (min-width: 1400px) {
    .unity-header-container,
    body .unity-header .unity-header-container {
        padding: 0.75rem 3rem !important;
    }
}

/* Asegurar que el index tenga el mismo espaciado que otras páginas */
body {
    padding-top: 85px !important;
}

/* FORZAR consistencia visual en todas las páginas */
.unity-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
}

/* JavaScript para manejar el menú móvil */
.unity-header.nav-open .unity-hamburger:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}

.unity-header.nav-open .unity-hamburger:nth-child(2) {
    opacity: 0 !important;
}

.unity-header.nav-open .unity-hamburger:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}

/* Fallback para navegadores antiguos */
@supports not (backdrop-filter: blur(20px)) {
    .unity-header {
        background: rgba(20, 30, 60, 0.95) !important;
    }
    
    .unity-dropdown-menu {
        background: rgba(20, 30, 60, 0.95) !important;
    }
}

/* Asegurar que no haya conflicts con otros estilos */
.unity-header * {
    box-sizing: border-box;
}

/* Mejorar la accesibilidad */
.unity-nav-link:focus,
.unity-dropdown-item:focus {
    outline: 2px solid rgba(251, 191, 36, 0.5) !important;
    outline-offset: 2px !important;
}

/* Animaciones suaves para todos los elementos */
.unity-nav-link,
.unity-dropdown-item,
.unity-credits,
.unity-logo {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Asegurar que el z-index funcione correctamente */
.unity-header {
    z-index: 1030 !important;
}

.unity-dropdown-menu {
    z-index: 1031 !important;
}

/* Smooth scrolling para el efecto del header */
html {
    scroll-behavior: smooth;
}

/* Mejorar el contraste en dispositivos con poca luz */
@media (prefers-color-scheme: dark) {
    .unity-header {
        background: rgba(15, 20, 40, 0.6) !important;
    }
    
    .unity-dropdown-menu {
        background: rgba(15, 20, 40, 0.6) !important;
    }
}

/* Asegurar que los iconos se vean bien */
.unity-dropdown-item i,
.unity-nav-link i {
    width: 20px !important;
    text-align: center !important;
}

/* Mejorar los efectos de hover para elementos interactivos */
.unity-nav-link:hover,
.unity-dropdown-item:hover,
.unity-logo:hover,
.unity-credits:hover {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Asegurar que el logo no tenga negrita excesiva */
.unity-logo-main {
    font-weight: 600 !important;
}

/* Consistencia visual para todos los elementos */
.unity-header * {
    font-family: 'Inter', 'Poppins', sans-serif !important;
}

/* Mejorar el contraste del dropdown en todas las condiciones */
.unity-dropdown-menu {
    background: rgba(8, 12, 25, 0.98) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 1px solid rgba(120, 160, 255, 0.4) !important;
}

/* Asegurar que el dropdown se vea bien sobre cualquier fondo */
.unity-dropdown-menu::before {
    background: rgba(8, 12, 25, 0.98) !important;
    backdrop-filter: blur(35px) !important;
    -webkit-backdrop-filter: blur(35px) !important;
}