/* ═══════════════════════════════════════════════════════════════════
   SWIMPRO ELITE — COMPONENTES COMUNES DEL CONTENIDO
   Botones, tarjetas, tablas, etiquetas y títulos de sección con un solo
   aspecto en toda la app (las cabeceras van en swimpro-cabecera.css).
   Se carga al final, después del <style> de cada plantilla. El «:not(#_)»
   sube la especificidad para ganar a reglas !important antiguas.
   Las tarjetas de color a propósito (data-color, degradados, texto blanco)
   no se tocan.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --ui-azul: #0B4FB3;
    --ui-azul-osc: #003B73;
    --ui-texto: #0F172A;
    --ui-texto-2: #475569;
    --ui-texto-3: #64748B;
    --ui-borde: #E2E8F0;
    --ui-borde-2: #CBD5E1;
    --ui-fondo-suave: #F8FAFC;
    --ui-verde: #059669;
    --ui-rojo: #DC2626;
    --ui-ambar: #D97706;
    --ui-violeta: #7C3AED;
    --ui-radio: 10px;
    --ui-radio-tarjeta: 16px;
}

/* ───────────────────────── BOTONES ───────────────────────── */
main .epic-button:not(#_) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: .5rem !important;
    min-height: 40px;
    padding: .55rem 1.1rem !important;
    border-radius: var(--ui-radio) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
    cursor: pointer;
    /* por defecto: secundario (blanco con borde) */
    background: #fff !important;
    color: var(--ui-texto) !important;
    border-color: var(--ui-borde-2) !important;
}
main .epic-button:not(#_)::before,
main .epic-button:not(#_)::after { display: none !important; }
main .epic-button:not(#_) i { margin: 0 !important; }
main .epic-button:not(#_):hover { background: var(--ui-fondo-suave) !important; border-color: #94A3B8 !important; }
main .epic-button:not(#_):focus-visible { outline: 3px solid rgba(11, 79, 179, .35) !important; outline-offset: 2px; }
main .epic-button:not(#_):disabled,
main .epic-button:not(#_)[aria-disabled="true"] { opacity: .55 !important; cursor: not-allowed; }

/* Principal */
main .epic-button:not(#_):is(.primary, .blue, .btn-primary) {
    background: var(--ui-azul) !important; color: #fff !important; border-color: var(--ui-azul) !important;
}
main .epic-button:not(#_):is(.primary, .blue, .btn-primary):hover { background: var(--ui-azul-osc) !important; border-color: var(--ui-azul-osc) !important; }
/* Confirmar / guardar */
main .epic-button:not(#_):is(.success, .green) {
    background: var(--ui-verde) !important; color: #fff !important; border-color: var(--ui-verde) !important;
}
main .epic-button:not(#_):is(.success, .green):hover { background: #047857 !important; border-color: #047857 !important; }
/* Peligro */
main .epic-button:not(#_):is(.danger, .red, .bg-red-600) {
    background: var(--ui-rojo) !important; color: #fff !important; border-color: var(--ui-rojo) !important;
}
main .epic-button:not(#_):is(.danger, .red, .bg-red-600):hover { background: #B91C1C !important; border-color: #B91C1C !important; }
/* Aviso */
main .epic-button:not(#_):is(.warning, .gold, .orange) {
    background: var(--ui-ambar) !important; color: #fff !important; border-color: var(--ui-ambar) !important;
}
/* Especial */
main .epic-button:not(#_):is(.purple) {
    background: var(--ui-violeta) !important; color: #fff !important; border-color: var(--ui-violeta) !important;
}
/* Fantasma / transparente */
main .epic-button:not(#_):is(.ghost, .transparent) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--ui-texto-2) !important;
}
main .epic-button:not(#_):is(.ghost, .transparent):hover { background: rgba(15, 23, 42, .05) !important; }
/* Sobre fondo oscuro */
main .epic-button:not(#_):is(.outline-light, .outline-white) {
    background: rgba(255, 255, 255, .10) !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; box-shadow: none !important;
}
main .epic-button:not(#_):is(.outline-light, .outline-white):hover { background: rgba(255, 255, 255, .2) !important; }
main .epic-button:not(#_):is(.outline-purple) { color: var(--ui-violeta) !important; border-color: #C4B5FD !important; }

/* ───────────────────────── TARJETAS ───────────────────────── */
main .epic-card:not(#_):not([data-color]):not([class*="gradient"]):not([style*="gradient"]):not([class*="text-white"]):not(.cabecera-pagina):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]) {
    background: #fff !important;
    border: 1px solid var(--ui-borde) !important;
    border-radius: var(--ui-radio-tarjeta) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .25) !important;
    backdrop-filter: none !important;
}
main .epic-card:not(#_):not([data-color]):not([class*="gradient"]):not([style*="gradient"]):not([class*="text-white"]):not(.cabecera-pagina)::before {
    display: none !important;
}
main .epic-card:not(#_):not([data-color]):not([class*="gradient"]):hover { transform: none !important; }

/* Títulos de sección dentro de las tarjetas */
main .epic-card:not(#_):not([class*="gradient"]):not([class*="text-white"]) :is(h2, h3).epic-section-title,
main :is(.epic-card, .bg-white):not(#_):not([class*="gradient"]):not([class*="text-white"]):not([data-color]) > h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ui-texto) !important;
    -webkit-text-fill-color: var(--ui-texto) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: none !important;
    text-shadow: none !important;
}

/* ───────────────────────── TABLAS ───────────────────────── */
main table.epic-table:not(#_) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
    font-size: .875rem;
    color: var(--ui-texto);
}
main table.epic-table:not(#_) > thead,
main table.epic-table:not(#_) > thead > tr {
    background: var(--ui-fondo-suave) !important;
}
main table.epic-table:not(#_) > thead > tr > th {
    background: var(--ui-fondo-suave) !important;
    color: var(--ui-texto-2) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding: .7rem .9rem !important;
    border-bottom: 1px solid var(--ui-borde) !important;
    border-top: 0 !important;
    white-space: nowrap;
    text-shadow: none !important;
}
main table.epic-table:not(#_) > tbody > tr > td {
    padding: .7rem .9rem !important;
    border-bottom: 1px solid #EEF2F7 !important;
    vertical-align: middle;
}
main table.epic-table:not(#_) > tbody > tr:last-child > td { border-bottom: 0 !important; }
main table.epic-table:not(#_) > tbody > tr:not([class*="cat-"]):hover > td { background: #F8FAFF !important; }
main table.epic-table:not(#_) > tbody > tr { transform: none !important; }

/* ───────────────────────── ETIQUETAS ───────────────────────── */
main .epic-badge:not(#_) {
    border-radius: 999px !important;
    padding: .2rem .65rem !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    animation: none !important;
}
main .epic-badge:not(#_)::before,
main .epic-badge:not(#_)::after { display: none !important; }

/* Móvil: botones algo más compactos */
@media (max-width: 640px) {
    main .epic-button:not(#_) { padding: .5rem .85rem !important; font-size: .84rem !important; }
}