/* ═══════════════════════════════════════════════════════════════════
   SWIMPRO ELITE — RESPONSIVE COMÚN
   Archivo: swimpro-responsive.css · se carga en base.html DESPUÉS de
   {% block extra_css %} para que las reglas de móvil ganen.

   Reglas del refactor (REFACTOR_PLAN.md):
     · No se redefinen clases de Tailwind (grid-cols-*, container…).
       Los grids se arreglan en cada plantilla con md:/lg:.
     · Tablas: por defecto scroll horizontal (.tabla-scroll lo pone
       tablas_responsive.js cuando una tabla no cabe).
     · Tarjetas en móvil SOLO con la clase .tabla-cards en la <table>.
       Las etiquetas salen del data-label de cada <td>.

   Puntos de corte: 1024 · 768 · 640 · 480 · 380 px
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   01. TABLAS CON SCROLL HORIZONTAL (todas, por defecto)
   ───────────────────────────────────────────────────────────────── */
.tabla-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.tabla-scroll > table {
    min-width: 100%;
}
/* Sombra en el borde derecho mientras queda tabla por ver */
@media (max-width: 1024px) {
    .tabla-scroll {
        background:
            linear-gradient(to right, white 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
            linear-gradient(to left, white 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent) left center / 10px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) right center / 10px 100% no-repeat scroll;
    }
}

/* Primera columna fija al desplazar (nombres, grupos…): <table class="tabla-col-fija">.
   El fondo sale de --fondo-col-fija (blanco si no se indica). */
.tabla-col-fija th:first-child,
.tabla-col-fija td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--fondo-col-fija, #fff);
}
@media (max-width: 1024px) {
    .tabla-col-fija th:first-child,
    .tabla-col-fija td:first-child {
        box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.18);
    }
}

/* ─────────────────────────────────────────────────────────────────
   02. TABLAS → TARJETAS EN MÓVIL (solo .tabla-cards)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tabla-scroll:has(> table.tabla-cards) {
        overflow-x: visible;
        background: none;
    }
    table.tabla-cards {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
    }
    table.tabla-cards thead {
        display: none;
    }
    table.tabla-cards,
    table.tabla-cards tbody,
    table.tabla-cards tfoot,
    table.tabla-cards tr,
    table.tabla-cards td {
        display: block;
        width: 100%;
    }
    table.tabla-cards tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 16px;
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border: 1px solid #f1f5f9;
    }
    table.tabla-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.45rem 0 !important;
        border: 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
        white-space: normal;
    }
    table.tabla-cards td:last-child {
        border-bottom: none;
    }
    table.tabla-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
        text-align: left;
    }
    /* Celda que ocupa la fila entera (nombre, acciones…): sin etiqueta */
    table.tabla-cards td.td-titulo,
    table.tabla-cards td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
        font-weight: 700;
    }
    table.tabla-cards td.td-titulo::before {
        content: none;
    }
    table.tabla-cards td.td-acciones {
        justify-content: flex-end;
    }
    /* Filas vacías / "no hay datos" con colspan */
    table.tabla-cards td[colspan] {
        justify-content: center;
        text-align: center;
    }
    table.tabla-cards td[colspan]::before {
        content: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
   03. MODALES A PANTALLA COMPLETA EN MÓVIL
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .modal-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        overflow-y: auto;
    }
    .modal-header {
        border-radius: 0 !important;
    }
    .modal-footer {
        border-radius: 0 !important;
        position: sticky;
        bottom: 0;
        background: white;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    }
}
body.modal-open {
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   04. CABECERAS (.template-header) ESCALABLES
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .template-header {
        padding: 1.8rem 1.5rem !important;
    }
    .template-header h1 {
        font-size: 2rem !important;
    }
}
@media (max-width: 768px) {
    .template-header {
        padding: 1.5rem 1.25rem !important;
        border-radius: 20px !important;
        margin-bottom: 1rem !important;
    }
    .template-header h1 {
        font-size: 1.6rem !important;
        line-height: 1.2;
    }
    .template-header h1 i {
        font-size: 1.4rem !important;
        margin-right: 0.5rem !important;
    }
    .template-header p {
        font-size: 0.9rem;
    }
}
@media (max-width: 480px) {
    .template-header {
        padding: 1.2rem 1rem !important;
        border-radius: 16px !important;
    }
    .template-header h1 {
        font-size: 1.3rem !important;
    }
    .template-header h1 i {
        font-size: 1.1rem !important;
        margin-right: 0.4rem !important;
    }
    .template-header p {
        font-size: 0.8rem;
    }
}
@media (max-width: 380px) {
    .template-header h1 {
        font-size: 1.15rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   05. TARJETAS DE ESTADÍSTICAS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .stat-card {
        padding: 0.75rem 0.5rem !important;
    }
    .stat-card .stat-number,
    .stat-card .stat-value {
        font-size: 1.5rem !important;
    }
    .stat-card .stat-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.3px;
    }
}
@media (max-width: 380px) {
    .stat-card .stat-number,
    .stat-card .stat-value {
        font-size: 1.3rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   06. BOTONES
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .epic-button {
        padding: 0.6rem 1.1rem !important;
        font-size: 0.85rem !important;
    }
}
@media (max-width: 380px) {
    .epic-button {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.8rem !important;
        min-height: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   07. TARJETAS (.epic-card)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .epic-card {
        padding: 1.2rem !important;
        border-radius: 20px !important;
    }
}
@media (max-width: 480px) {
    .epic-card {
        padding: 1rem !important;
        border-radius: 16px !important;
    }
}
@media (max-width: 380px) {
    .epic-card {
        padding: 0.85rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   08. TARJETAS DE NADADOR (ver_grupo)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nadador-card {
        padding: 0.75rem !important;
    }
    .nadador-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 0.95rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   09. FORMULARIOS: 16 px para que iOS no haga zoom al escribir
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="url"],
    select, textarea {
        font-size: 16px !important;
    }
    .epic-input,
    .epic-select {
        padding: 0.7rem 0.9rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   10. IMPRESIÓN desde el navegador
   (los informes tienen su propia base A4 y no cargan este archivo)
   ───────────────────────────────────────────────────────────────── */
@media print {
    .tabla-scroll {
        overflow: visible !important;
        background: none !important;
    }
}