/* Pantallas públicas de clínicas: la vitrina del club (RSP-275) y el link de inscripción
   (RSP-278). Complementa registration.css (que NO se toca): acá va sólo lo que las clínicas
   agregan — foto del banner, ficha de datos, selector de horario, el aviso del pago y la
   grilla de tarjetas del listado. Se sirve como estático, igual que registration.css y
   store.css (sin Vite). */

/* ---------- Flash (status / error) ----------
   Los renderiza layouts/public. Están duplicados de store.css a propósito: las pantallas
   de clínicas no cargan la hoja de la tienda, y mover estas reglas a registration.css
   tocaría la hoja compartida de todo el flujo de inscripción. */

.flash {
    border-radius: 10px;
    padding: .8rem 1rem;
    margin: 0 0 1rem;
    font-size: .9rem;
    font-weight: 600;
}

.flash--status { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.flash--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Campo con error de validación: el texto lo lista el layout, acá sólo se marca. */
.field__error-mark { border-color: var(--red) !important; }

/* ---------- Ritmo vertical entre tarjetas ----------
   Hasta clínicas, TODAS las pantallas públicas (tienda/ y registro/) tenían una sola .card,
   así que registration.css nunca necesitó separarlas y dos apiladas quedaban pegadas. Se
   usa el mismo 1.5rem con el que ya se separan los bloques del sitio público (.errors,
   .notice y .store-filters), en vez de inventar una escala nueva. La regla vive acá y no en
   registration.css porque esta hoja sólo se carga en las pantallas de clínicas: no puede
   correr el layout de la tienda ni el del wizard de inscripción. */

.card + .card { margin-top: 1.5rem; }

/* ---------- Banner de la clínica ---------- */

/* Banner a sangre: el <img> es hijo directo de `.card`, que tiene `overflow: hidden`, y abajo
   sigue el `.card__header` navy con el nombre y el club.

   RSP-287: acá había un `max-height: 320px` con `object-fit: cover`. Sobre los 680px de `.wrap`
   eso dejaba la franja en ~2.1:1 y, desde que el ABM guarda las fotos en 4:3, le recortaba un
   tercio: el bloque navy arrancaba justo en el corte y parecía estar tapando la foto.

   Ahora la caja tiene la MISMA proporción con la que se guarda la foto, así que se ve entera y
   el header navy baja solo. Es el mismo criterio que `.clinic-card__image`: se acota la
   PROPORCIÓN, nunca el alto suelto —un alto suelto deforma la caja y `cover` recorta—.
   Si se cambia el 4:3 hay que cambiarlo en los tres lados: acá, en la tarjeta del listado y en
   `ClinicForm::CARD_ASPECT_RATIO`.

   `cover` + anclaje arriba quedan por las fotos YA cargadas, que tienen cualquier proporción:
   esas se siguen recortando hasta que el club las vuelva a guardar desde el editor del ABM. */
.clinic-banner__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
}

/* Ficha de datos propios de la clínica: fecha, horarios, entrenadores y precio. */
.clinic-facts {
    margin: 0 0 1.25rem;
    display: grid;
    gap: .75rem;
}

/* La columna de la etiqueta entra en 11rem y no en 9rem (RSP-280): con 9rem, "NOMBRE DEL
   JUGADOR" se partía en dos líneas y, como las dos columnas se alinean por `baseline`, el
   valor quedaba colgado de la PRIMERA línea de la etiqueta y el par se leía desalineado.
   Ensanchar la columna ataca la causa —el salto de línea—; bajar el `baseline` sólo habría
   disimulado el síntoma y empeorado las filas de una sola línea, que son la mayoría. */
.clinic-facts__item {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .75rem;
    align-items: baseline;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.clinic-facts__item:last-child { border-bottom: 0; padding-bottom: 0; }

.clinic-facts dt {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}

.clinic-facts dd { margin: 0; color: var(--ink); font-size: .95rem; }

.clinic-facts__price { font-weight: 700; font-variant-numeric: tabular-nums; }

.clinic-chip {
    display: inline-block;
    margin: 0 .35rem .35rem 0;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: .85rem;
}

@media (max-width: 520px) {
    .clinic-facts__item { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- Selector de horario ---------- */

.clinic-slots { border: 0; margin: 0; padding: 0; }

.clinic-slot {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .6rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.clinic-slot:hover { background: var(--bg); }

.clinic-slot:has(input:checked) { border-color: var(--navy); background: var(--bg); }

.clinic-slot__body { display: flex; flex-direction: column; gap: .15rem; }

.clinic-slot__time { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.clinic-slot__capacity { font-size: .82rem; color: var(--muted); }

/* Horario sin cupos (RSP-277): se muestra igual que el resto pero apagado y sin
   posibilidad de elegirlo, para que se entienda por qué no está disponible. */

.clinic-slot--full { cursor: not-allowed; opacity: .65; }
.clinic-slot--full:hover { background: transparent; }
.clinic-slot__capacity--full { color: var(--red); font-weight: 600; }

/* ---------- Datos del jugador ---------- */

/* El bloque abre con un <h2 class="section-title">, y por ser el PRIMER hijo de este div le
   pegaba `.section-title:first-child { margin-top: 0 }` —una regla pensada para el título
   que encabeza una tarjeta— y el título quedaba pegado a la lista de horarios de arriba
   (RSP-280). El aire se le da al CONTENEDOR: así el título conserva la regla general y el
   bloque respira lo mismo que separa a las demás secciones del formulario. */
.clinic-details { margin-top: 1.75rem; }

.clinic-details[hidden] { display: none; }

/* ---------- Aviso del pago (placeholder hasta RSP-273) ---------- */

.clinic-notice {
    margin: 1.25rem 0 0;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: .9rem;
}

.clinic-notice p { margin: 0 0 .5rem; }
.clinic-notice p:last-child { margin-bottom: 0; }
.clinic-notice__title { font-weight: 700; }

/* ---------- Acciones ---------- */

.clinic-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
}

/* ---------- Vitrina de clínicas (RSP-275) ----------
   Grilla de tarjetas dentro de una .card por sección, misma forma que la tienda
   (.store-grid). Las tarjetas de clínica NO son .card: así no las alcanza el
   `.card + .card { margin-top }` de arriba, que separa las secciones de nivel superior —
   acá la separación la da el `gap` de la grilla. */

/* La vitrina usa el contenedor ancho (`wrap--wide`) para que entren 3 tarjetas por fila.
   La regla se repite acá porque la define store.css, que esta pantalla no carga: duplicar
   un `max-width` es preferible a arrastrar toda la hoja de la tienda. */
.wrap--wide { max-width: 1040px; }

/* 3 por fila en el contenedor ancho. Baja sola a 2 y a 1 al angostar la pantalla.

   La cuenta del mínimo (15rem), que es lo que decide cuántas columnas entran: el ancho útil
   de la grilla son 944px —1040 de `.wrap--wide`, menos 1rem de padding de cada lado, menos
   los 2rem de cada lado de `.card__body`— y el gap es 1rem. Con 15rem entran 3 pistas
   (3×240 + 2×16 = 752) y no una cuarta (4×240 + 3×16 = 1008 > 944). Con los 18rem que había
   antes las 3 pistas necesitaban 896px útiles, o sea una ventana de ~992px: abajo de eso la
   vitrina caía a 2 columnas. Si algún día se toca el ancho del contenedor o el padding de la
   tarjeta, hay que rehacer esta cuenta.

   El tope de 24rem por columna es de RSP-287. Antes la pista era `1fr`, que con `auto-fit`
   estira las tarjetas para que 1 o 2 clínicas ocupen todo el ancho en vez de dejar huecos
   (era la intención de RSP-280). Con la foto en 4:3 eso se volvió contraproducente: una sola
   clínica se llevaba los 1040px del contenedor y su foto quedaba en una franja de ~3.6:1,
   recortada hasta perder el motivo. Acotada a 24rem la tarjeta conserva su proporción sea
   cual sea la cantidad, y `justify-content: center` evita el hueco a la derecha que era lo
   que RSP-280 quería evitar. Con 3 o más la pista igual se achica para llenar la fila. */
/* Subtítulo de fecha que agrupa las próximas clínicas por día, con la misma tipografía que
   el `.section-title` de "Próximas clínicas" y una línea divisoria más fina. */
.clinic-date-group + .clinic-date-group { margin-top: 1.75rem; }

.clinic-date-group__title {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.2rem;
    color: var(--navy);
    margin: 1rem 0 .85rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}

.clinic-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 24rem));
    justify-content: center;
}

.clinic-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* RSP-287: el contenedor de la foto pasa de una franja fija de 150px (que a 18rem de ancho
   daba casi 2:1, demasiado achatada para reconocer una cara) a un 4:3 —cuadrado tirando a
   apaisado—. Va por `aspect-ratio` y no por un alto fijo para que crezca junto con la
   tarjeta: la grilla es `1fr`, así que todas las de una fila miden lo mismo y sus fotos
   también.

   `object-position: top`: desde RSP-287 el ABM ya guarda la foto recortada en 4:3
   (`ClinicForm::CARD_ASPECT_RATIO`), así que para las nuevas esta regla no recorta nada. Sigue
   acá por las fotos YA cargadas, que tienen cualquier proporción: muchas son verticales y con
   el recorte centrado una foto de una persona pierde la cara; anclada arriba lo que se pierde
   es el pie de la imagen.

   Quién acota el alto es el tope de 24rem por columna de `.clinic-cards`, NO un `max-height`
   acá: recortar el alto deformaría el 4:3 y devolvería la franja estirada que este ticket vino
   a sacar. Si alguien deja que la tarjeta vuelva a estirarse, el bug reaparece en la grilla,
   no en esta regla. */
.clinic-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
}

/* Reemplazo de la foto cuando la clínica no tiene (RSP-280). MISMA proporción que
   .clinic-card__image a propósito: es lo que mantiene alineadas entre sí las tarjetas de
   una fila, que es de donde venía el desalineado. Si alguien toca el `aspect-ratio` de
   arriba, tiene que tocar éste. El logo va apagado (gris y translúcido) para que sea telón
   de fondo y no compita con el nombre de la clínica, y con `contain` —nunca `cover`— porque
   un logo recortado se lee como un error. */
.clinic-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

/* Los topes bajan junto con el alto del contenedor (RSP-287): con los de antes el logo
   crecía al mismo ritmo que la caja y dejaba de leerse como fondo. */
.clinic-card__placeholder img {
    max-width: 48%;
    max-height: 45%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .38;
}

.clinic-card__body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex: 1;
    padding: 1rem;
}

.clinic-card__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

/* Entrenador destacado (RSP-286): sale de la ficha de datos y queda pegado al nombre de la
   clínica, que es el orden en el que el padre lee la tarjeta —qué clínica es y quién la
   dicta—. Va bastante más grande que los valores de la ficha (.9rem) y en el color del club
   para que gane peso sin superar al nombre (1.15rem), que es lo que la historia pide leer
   primero. El margen negativo le come parte del `gap` del cuerpo: así la línea se lee como
   parte del encabezado y no como el primer dato suelto.

   La línea es CONDICIONAL, así que dos tarjetas vecinas (una con entrenador y otra sin) no
   arrancan la ficha a la misma altura. Lo que importa sigue alineado: la grilla estira todas
   las tarjetas de la fila al mismo alto y `.clinic-card__actions { margin-top: auto }` deja
   los "Inscribirse" en la misma línea. No se reserva alto vacío a propósito: un hueco fijo
   en toda tarjeta sin entrenador se ve peor que el corrimiento del bloque de datos. */
.clinic-card__coach {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
    margin: -.35rem 0 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--navy);
}

/* El ícono se alinea con el texto y no con la línea de base, que lo dejaría hundido. */
.clinic-card__coach-icon { flex-shrink: 0; width: 1.1rem; height: 1.1rem; align-self: center; }

/* El rótulo dice QUÉ es el nombre que sigue. Pesa menos que el nombre a propósito: el dato
   es la persona, el rótulo sólo lo presenta. */
.clinic-card__coach-label { font-weight: 600; }

/* Nombres largos (o varios entrenadores viejos separados por coma) cortan dentro de la
   tarjeta en vez de ensancharla. */
.clinic-card__coach-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }

.clinic-card__facts { margin: 0; display: grid; gap: .5rem; }

.clinic-card__fact { display: grid; gap: .15rem; }

.clinic-card__facts dt {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}

.clinic-card__facts dd { margin: 0; color: var(--ink); font-size: .9rem; }

.clinic-card__price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Empuja el botón al pie: con tarjetas de alto distinto, todos los "Inscribirse" quedan
   alineados en la misma línea. */
.clinic-card__actions { margin-top: auto; }

.clinic-card__actions .btn { display: block; width: 100%; text-align: center; }