/* ═══════════════════════════════════════════════════════════════════
   SWIMPRO ELITE — CABECERA DE PÁGINA ÚNICA
   Todas las pantallas comparten la misma cabecera: mismo fondo de marca,
   tamaños, alineación, botones y etiquetas. Cada módulo solo cambia su
   color de acento (icono, línea inferior y brillo), que llega por
   <body data-modulo="…"> desde base.html.
   Se carga al final (después del <style> de cada plantilla) para mandar
   sobre las cabeceras antiguas: .epic-gradient-header, .epic-header,
   .template-header, .gradient-bg y .cabecera-pagina. El «:not(#_)» sube
   la especificidad (como un id) para ganar también a reglas !important
   con varias clases que tienen algunas plantillas.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --cab-fondo: linear-gradient(135deg, #021E3D 0%, #003B73 48%, #0B4FB3 100%);
    --acento: #00E5FF;
}
body[data-modulo="oficina"]       { --acento: #22D3EE; }
body[data-modulo="nadador"]       { --acento: #34D399; }
body[data-modulo="planificacion"] { --acento: #38BDF8; }
body[data-modulo="tests"]         { --acento: #A78BFA; }
body[data-modulo="analisis"]      { --acento: #FB923C; }
body[data-modulo="competicion"]   { --acento: #FBBF24; }
body[data-modulo="seco"]          { --acento: #CBD5E1; }
body[data-modulo="familias"]      { --acento: #F472B6; }

/* ── Contenedor ── */
main .epic-gradient-header:not(#_),
main .epic-header:not(#_),
main .template-header:not(#_),
main .gradient-bg:not(#_),
main .cabecera-pagina:not(#_) {
    background: var(--cab-fondo) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 20px 40px -24px rgba(0, 59, 115, .75) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
    min-height: 0 !important;
}
/* Brillo del acento arriba a la derecha y línea inferior */
main .epic-gradient-header:not(#_)::before,
main .epic-header:not(#_)::before,
main .template-header:not(#_)::before,
main .gradient-bg:not(#_)::before,
main .cabecera-pagina:not(#_)::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -8% -60% auto !important;
    width: 46% !important; height: 180% !important;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 26%, transparent), transparent) !important;
    pointer-events: none !important;
    opacity: 1 !important; transform: none !important; animation: none !important;
    border-radius: 0 !important; z-index: 0 !important; filter: none !important;
    display: block !important;
}
main .epic-gradient-header:not(#_)::after,
main .epic-header:not(#_)::after,
main .template-header:not(#_)::after,
main .gradient-bg:not(#_)::after,
main .cabecera-pagina:not(#_)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; height: 3px !important;
    background: linear-gradient(90deg, var(--acento), transparent 70%) !important;
    opacity: .9 !important; transform: none !important; animation: none !important;
    border-radius: 0 !important; z-index: 1 !important; filter: none !important;
    display: block !important;
}
/* Fuera adornos antiguos (círculos, ondas, brillos animados) */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_)
    :is(.deco-circle, .header-deco, .wave, .shimmer, .particles, .glow-orb) { display: none !important; }
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) > * {
    position: relative; z-index: 2;
}

/* ── Alineación: siempre a la izquierda, acciones a la derecha ── */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.text-center, .text-center *) {
    text-align: left !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) .justify-center {
    justify-content: flex-start !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) .mx-auto {
    margin-left: 0 !important;
}

/* ── Título ── */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) h1 {
    font-family: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    text-shadow: none !important;
    margin: 0 0 .3rem !important;
    animation: none !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) h1 i,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) h1 .emoji {
    color: var(--acento) !important;
    -webkit-text-fill-color: var(--acento) !important;
    font-size: .85em !important;
    margin-right: .45rem !important;
}
/* Subtítulo y textos secundarios */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) h1 + p,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) .subtitle,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) .header-subtitle {
    font-size: .95rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, .78) !important;
    text-transform: none !important;
    margin: 0 !important;
    max-width: 60rem;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is([class*="text-blue-1"], [class*="text-blue-2"], [class*="text-gray-3"], [class*="text-gray-4"], [class*="text-indigo-1"], [class*="text-purple-1"]) {
    color: rgba(255, 255, 255, .78) !important;
}
/* Icono en recuadro junto al título (si la plantilla lo trae) */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.header-icon, .icon-box, [class*="w-10"][class*="h-10"], [class*="w-12"][class*="h-12"], [class*="w-14"][class*="h-14"], [class*="w-16"][class*="h-16"]):has(> i) {
    background: color-mix(in srgb, var(--acento) 18%, transparent) !important;
    color: var(--acento) !important;
    border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent) !important;
    border-radius: 14px !important;
    width: 2.9rem !important; height: 2.9rem !important; font-size: 1.25rem !important;
    flex-shrink: 0;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.header-icon, .icon-box, [class*="w-10"][class*="h-10"], [class*="w-12"][class*="h-12"], [class*="w-14"][class*="h-14"], [class*="w-16"][class*="h-16"]) > i {
    color: var(--acento) !important;
}

/* ── Botones de la cabecera: todos iguales (cristal); el principal, blanco ── */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button, .btn, .header-btn, a.rounded-full, a.rounded-lg, a.rounded-xl, button.rounded-full, button.rounded-lg, button.rounded-xl, a[class*="btn"], button[class*="btn"], a[class*="bg-"], button[class*="bg-"], a[class*="px-"][class*="py-"], button[class*="px-"][class*="py-"]) {
    display: inline-flex !important; align-items: center; gap: .45rem;
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .26) !important;
    border-radius: 10px !important;
    padding: .5rem .95rem !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    min-height: 38px;
    line-height: 1.2 !important;
    transform: none !important;
    backdrop-filter: none !important;
    white-space: nowrap;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button, .btn, .header-btn, a.rounded-full, a.rounded-lg, a.rounded-xl, button.rounded-full, button.rounded-lg, button.rounded-xl, a[class*="btn"], button[class*="btn"], a[class*="bg-"], button[class*="bg-"], a[class*="px-"][class*="py-"], button[class*="px-"][class*="py-"]):hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .45) !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button, .btn)::before,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button, .btn)::after { display: none !important; }
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button.primary, .epic-button.success, .epic-button.white, .btn-primary, .btn-principal) {
    background: #fff !important;
    color: #003B73 !important;
    border-color: #fff !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button.primary, .epic-button.success, .epic-button.white, .btn-primary, .btn-principal) i { color: #0B4FB3 !important; }
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button.danger) {
    background: rgba(239, 68, 68, .85) !important; border-color: transparent !important;
}

/* ── Etiquetas / chips de la cabecera ── */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-badge, .badge, .header-badge, .chip, span.rounded-full, span[class*="bg-"][class*="px-"]) {
    background: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    padding: .22rem .7rem !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    animation: none !important;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-badge, .badge, .header-badge, .chip)::before,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-badge, .badge, .header-badge, .chip)::after { display: none !important; }

/* Desplegables dentro de la cabecera */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) select {
    background-color: rgba(255, 255, 255, .95) !important; color: #0f172a !important;
    border-radius: 10px !important; border: 0 !important; min-height: 38px;
}

/* Cifras dentro de la cabecera (resúmenes) */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.stat-card, .header-stat, .stat-item, .bg-white\/10, .bg-white\/15, .bg-white\/20) {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Textos de color oscuro heredados de cabeceras que antes eran blancas */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(p, span, small, label, a):is([class*="text-gray-"], [class*="text-slate-"], [class*="text-blue-5"], [class*="text-blue-6"], [class*="text-blue-7"], [class*="text-blue-8"], [class*="text-indigo-6"]) {
    color: rgba(255, 255, 255, .8) !important;
}
main .cabecera-pagina:not(#_) p { color: rgba(255, 255, 255, .78); }
main .cabecera-pagina:not(#_) strong, main .cabecera-pagina:not(#_) b { color: #fff; }

/* Subtítulos que traían tamaño grande propio */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) p:is([class*="text-lg"], [class*="text-xl"]) {
    font-size: .95rem !important; line-height: 1.45 !important;
}

/* ── Móvil ── */
@media (max-width: 768px) {
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):is(.flex), main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.flex, [style*="display: flex"], [style*="display:flex"]) {
        flex-wrap: wrap !important;
    }
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(a, button) {
        white-space: normal !important;
    }
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) p:is([class*="text-lg"], [class*="text-xl"], [class*="text-base"]) {
        font-size: .88rem !important;
    }
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) {
        padding: 1.1rem 1rem !important;
        border-radius: 16px !important;
        margin-bottom: 1rem !important;
    }
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) h1 + p,
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) .subtitle {
        font-size: .85rem !important;
    }
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(.epic-button, .btn) {
        padding: .45rem .75rem !important; font-size: .8rem !important;
    }
}

@media print {
    main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) {
        box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* Pestañas o filtros dentro de la cabecera: la activa, en blanco */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_) :is(a, button):is(.active, .activo, .activa, [aria-current="page"], [aria-selected="true"]) {
    background: #fff !important;
    color: #003B73 !important;
    border-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EXCEPCIÓN DE DROPDOWNS EN LA CABECERA
   ─────────────────────────────────────────────────────────────────
   La regla base de la cabecera tiene `overflow: hidden` (para que el
   brillo decorativo y los adornos no se salgan). Pero cuando hay un
   `.action-dropdown.open` dentro, necesitamos `overflow: visible`
   para que el menú desplegable salga del hero y se vea completo.

   Usamos `:has()` (CSS Selectors 4) para que la excepción SOLO se
   aplique mientras el dropdown está abierto. Al cerrarlo, la
   cabecera vuelve a su estado original con `overflow: hidden`.

   Ventajas:
     · No toca NINGUNA plantilla
     · Funciona igual en PC, tablet y móvil
     · No rompe otras cabeceras (solo las que tengan dropdown abierto)
     · Soporte universal en navegadores modernos (2024+)
   ═══════════════════════════════════════════════════════════════════ */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has(.action-dropdown.open),
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has([data-dropdown].open) {
    overflow: visible !important;
}

/* Refuerzo del z-index mientras el dropdown está abierto.
   Algunas plantillas tienen capas con z-index alto (badges, decoraciones)
   que podrían taparlo; esto garantiza que el menú siempre quede arriba. */
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has(.action-dropdown.open) .action-dropdown.open,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has([data-dropdown].open) [data-dropdown].open {
    position: relative;
    z-index: 10000;
}
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has(.action-dropdown.open) .action-dropdown.open .action-menu,
main :is(.epic-gradient-header, .epic-header, .template-header, .gradient-bg, .cabecera-pagina):not(#_):has([data-dropdown].open) [data-dropdown].open .action-menu {
    z-index: 10001;
}