/* Estilos de la publicación digital.
 *
 * FUENTE ÚNICA. Extraído de burreria/tarjetas-v13.html, que es la exportación
 * del Laboratorio Tipográfico donde Oscar diseña.
 *
 * Si se cambia un estilo en el laboratorio, hay que volver a extraerlo aquí, o
 * maqueta y publicación divergen. Ya ocurrió una vez: la vista previa y el HTML
 * exportado tenían CSS distinto escrito a mano, y una línea de separación
 * existía solo en el exportado, de modo que Oscar no la veía al diseñar.
 *
 * El test tests/oraculo/ falla si divergen.
 */

body{margin:0;background:#fff;font-family:Inter,system-ui,sans-serif}
.pagina{min-width:1661px;padding:12px 14px}
.caja-carrera{position:sticky;top:0;z-index:6;background:#fff;width:1661px;
  padding:8px 0 6px;border-bottom:1px solid #d6d3ce;margin-bottom:10px}
.bloque-caballo{margin-bottom:16px}
.caja-caballo{width:1661px;padding:3px 0 4px}
.caja-datos{width:1661px;padding:4px 0 2px}
.fila-tarj{display:flex;gap:10px;overflow-x:auto;width:1661px;
  align-items:stretch;padding-bottom:3px}
.regla{border-bottom:1px solid currentColor;height:0;margin:1px 0 2px}
/* --- rejilla --- */
.tarjeta{flex:0 0 547px;width:547px;min-width:0;overflow:hidden}
.tarjeta{border:1px solid #d6d3ce;border-radius:4px;padding:10px}
.tarjeta + .tarjeta{border-left:1px solid #d6d3ce;padding-left:5px}
.tabla{display:grid;grid-template-columns:40px 14px 14px 14px 23px 133px 26px 26px 16px 20px 90px 36px 50px 30px}
.celda{padding:1px 3px;overflow:hidden;white-space:nowrap}
.tabla > .celda:nth-child(14n+2){text-align:center}
.tabla > .celda:nth-child(14n+3){text-align:center}
.tabla > .celda:nth-child(14n+4){text-align:center}
.tabla > .celda:nth-child(14n+5){text-align:right}
.tabla > .celda:nth-child(14n+7){text-align:center}
.tabla > .celda:nth-child(14n+8){text-align:center}
.tabla > .celda:nth-child(14n+9){text-align:right}
.tabla > .celda:nth-child(14n+10){text-align:right}
.tabla > .celda:nth-child(14n+12){text-align:right}
.tabla > .celda:nth-child(14n+13){text-align:right}
.tabla > .celda:nth-child(14n+14){text-align:right}

/* --- estilos --- */
.st-base{font-size:10px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-enc-carrera{font-size:14px; line-height:1.35; font-variation-settings:"wght" 700; font-weight:700; color:#18181b; font-feature-settings:"tnum" 1}
.st-rotulo-col{font-size:9.5px; line-height:1.35; letter-spacing:0.04em; font-variation-settings:"wght" 600; font-weight:600; color:#71717a; text-transform:uppercase; font-feature-settings:"tnum" 1}
.st-ref-ant{font-size:12.5px; line-height:1.35; font-variation-settings:"wght" 481; font-weight:481; color:#71717a; font-feature-settings:"tnum" 1}
.st-parcial{font-size:13px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-puesto{font-size:12.5px; line-height:1.35; font-variation-settings:"wght" 600; font-weight:600; color:#18181b; font-feature-settings:"tnum" 1}
.st-nombre{font-size:13.5px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-caballo-estudiado{font-size:13.5px; line-height:1.35; font-variation-settings:"wght" 800; font-weight:800; color:#18181b; text-transform:uppercase; font-feature-settings:"tnum" 1}
.st-caballo-rival{font-size:13.5px; line-height:1.35; font-variation-settings:"wght" 700; font-weight:700; color:#18181b; font-feature-settings:"tnum" 1}
.st-gano-siguiente{font-size:13.5px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-style:italic; font-feature-settings:"tnum" 1}
.st-handicap{font-size:12px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#71717a; font-feature-settings:"tnum" 1; vertical-align:0.35em}
.st-marca-irreg{font-size:11.5px; line-height:1.35; font-variation-settings:"wght" 831; font-weight:831; color:#eb0505; font-feature-settings:"tnum" 1}
.st-cifra{font-size:12.5px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-jinete{font-size:13px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-separacion{font-size:13.5px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-dividendo{font-size:12px; line-height:1.35; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-pie-notas{font-size:13.5px; line-height:1.3; font-variation-settings:"wght" 400; font-weight:400; color:#3f3f46; font-feature-settings:"tnum" 1}
.st-caja-carrera{font-size:15.5px; line-height:1.45; font-variation-settings:"wght" 507; font-weight:507; color:#18181b; font-feature-settings:"tnum" 1}
.st-caja-caballo{font-size:19px; line-height:1.4; font-variation-settings:"wght" 455; font-weight:455; color:#18181b; font-feature-settings:"tnum" 1}
.st-caja-datos{font-size:12.5px; line-height:1.4; font-variation-settings:"wght" 400; font-weight:400; color:#3f3f46; font-feature-settings:"tnum" 1}
.st-ref-ant-bold{font-size:12.5px; line-height:1.35; font-variation-settings:"wght" 900; font-weight:900; color:#71717a; font-feature-settings:"tnum" 1}
.st-pie-notas-caballo{font-size:13.5px; line-height:1.3; font-variation-settings:"wght" 656; font-weight:656; color:#3f3f46; font-feature-settings:"tnum" 1}
.st-nombre-caballo-caja{font-size:19px; line-height:1.4; font-variation-settings:"wght" 814; font-weight:814; color:#18181b; font-feature-settings:"tnum" 1}
.st-dividendo-favorito{font-size:12px; line-height:1.35; font-variation-settings:"wght" 779; font-weight:779; color:#18181b; font-feature-settings:"tnum" 1}
.st-caja-carrera-condiciones{font-size:15.5px; line-height:1.45; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-style:italic; font-feature-settings:"tnum" 1}
.st-caja-carrera-premios{font-size:13px; line-height:1.45; font-variation-settings:"wght" 400; font-weight:400; color:#18181b; font-feature-settings:"tnum" 1}
.st-caja-carrera-bold{font-size:22px; line-height:1.45; font-variation-settings:"wght" 816; font-weight:816; color:#18181b; font-feature-settings:"tnum" 1}
.st-caja-datos-calificacion{font-size:12.5px; line-height:1.4; font-variation-settings:"wght" 858; font-weight:858; color:#3f3f46; font-feature-settings:"tnum" 1}
.st-orden-tarjeta{font-size:14px; line-height:1.35; font-variation-settings:"wght" 700; font-weight:700; color:#18181b; font-feature-settings:"tnum" 1}
/* --- lineas de separacion --- */
.caja-carrera{border-bottom:1px solid #d6d3ce}
.bloque-caballo{border-bottom:1px solid #d6d3ce;padding-bottom:12px}
.bloque-caballo:last-of-type{border-bottom:none;padding-bottom:0}

:root { --alto-enc: 0px; }
  html { scroll-snap-type: y proximity; scroll-behavior: smooth; scroll-padding-top: var(--alto-enc); }
  .bloque-caballo { scroll-snap-align: start; }
  #espaciador-final { width: 1px; pointer-events: none; }
  #navcab { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex;
            align-items: center; gap: 8px; background: #1a472a; color: #fff; padding: 8px 10px;
            border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.28);
            font: 600 13px/1 Inter, system-ui, sans-serif; user-select: none; }
  #navcab button { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
                   display: grid; place-items: center; font-size: 17px; background: rgba(255,255,255,.14); }
  #navcab button:hover { background: rgba(255,255,255,.30); }
  #navcab button:disabled { opacity: .35; cursor: default; }
  #navcab .etiqueta { min-width: 120px; text-align: center; }
  .bloque-caballo.destacado { animation: destaque 1.1s ease-out; }
  @keyframes destaque { from { background:#fff8d6; box-shadow:0 0 0 3px #f0d264; } to { background:transparent; box-shadow:none; } }
  @media print { #navcab, #espaciador-final { display: none; } }



/* Estilos propios de las pantallas 1 y 2 (portada y día).
 *
 * NO salen del laboratorio: allí solo se diseña la tarjeta. Viven en un archivo
 * aparte para que volver a extraer el CSS del laboratorio no los borre. El
 * generador concatena los dos al publicar.
 *
 * Todo aquí es fluido a propósito: estas dos pantallas son listas y tablas, y
 * deben leerse sin desplazamiento horizontal en un móvil de 375 px. La de
 * carrera es la única que impone un ancho, porque las tarjetas lo exigen.
 */

/* --- La tipografía, servida por nosotros ---------------------------------- *
 *
 * Hasta el 2026-08-27 el CSS pedía `Inter` por su nombre y no la enviaba: la
 * veía quien la tuviera instalada. Ningún teléfono la tiene, así que los
 * lectores de móvil —la mayoría en Perú— leían con la letra del sistema, más
 * ancha, y **sin los pesos intermedios**: los nueve valores que el laboratorio
 * afinó (455, 481, 507, 650, 656, 779, 814, 816, 831, 858) se redondeaban a
 * negrita y normal, y la jerarquía del diseño se aplanaba.
 *
 * Es variable: un solo archivo cubre de 100 a 900, por eso `font-weight` declara
 * el rango entero. Recortada al alfabeto latino, las fracciones y las cifras
 * tabulares pesa 74 KB, frente a los 854 del original de Google.
 *
 * `swap`: si tarda, el texto se lee con la del sistema y salta a Inter al
 * llegar. Nunca hay texto invisible.
 *
 * Para probar Inter Tight —misma familia, más estrecha— basta cambiar el
 * `url()` por `InterTight.woff2`; las dos se publican. */
@font-face {
  font-family: "Inter";
  src: url("Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- El inflado de texto de Safari en iOS ---------------------------------- *
 *
 * Safari en el iPhone **agranda por su cuenta** el texto de los bloques cuando
 * cambia el ancho de la ventana —al girar a horizontal, sobre todo—. Lo hace
 * para que las páginas viejas de escritorio se lean sin ampliar, y no avisa: el
 * CSS pide 9,5 px y el teléfono pinta más. Por eso las notas de irregulares se
 * ven más grandes en horizontal que en vertical.
 *
 * `100%` y no `none`: con `none`, algunos navegadores desactivan también el
 * ajuste que el propio lector pide, y aquí el zoom tiene que seguir funcionando
 * —es la contrapartida de haber aceptado una tarjeta más ancha que la pantalla—.
 *
 * Va en `html` porque se hereda, y con el prefijo de WebKit porque es el único
 * que lo implementa así. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* Verde de pista, oscuro: el único color del sitio aparte del negro y los
     grises. Se reserva a los enlaces y a lo que hay que poder pulsar, para que
     «tiene color» signifique siempre «lleva a alguna parte». */
  --acento: #14532d;
  --acento-claro: #166534;
  --tinta: #18181b;
  --tinta-suave: #52525b;
  --gris: #71717a;
  --filete: #d6d3ce;
  --filete-claro: #e7e5e1;
  --papel-suave: #faf9f7;
}

.sitio {
  background: #fff;
  color: var(--tinta);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* La hoja: el ancho de todo lo que no es una tarjeta. 860 px deja la tabla del
   programa holgada sin que la vista tenga que barrer media pantalla. */
.hoja {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 18px 56px;
}

/* --- Enlaces ------------------------------------------------------------- *
 *
 * Subrayado fino y separado del texto, no el de serie: con tantas cifras
 * alrededor, un subrayado grueso pegado a la línea base ensucia. Al pasar por
 * encima se engrosa, que es la señal de que se puede pulsar.
 */

.sitio a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--acento) 35%, transparent);
  transition: text-decoration-color 0.15s, color 0.15s;
}

.sitio a:hover {
  color: var(--acento-claro);
  text-decoration-color: currentColor;
}

.sitio a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- La marca ------------------------------------------------------------ */

.marca-portada {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--tinta);
}

.marca-logo {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
}

.marca-nombre {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 800;
  font-weight: 800;
}

.marca-lema {
  margin: 4px 0 0;
  color: var(--gris);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* En las pantallas interiores la marca es solo una firma con enlace a casa. */
.marca-interior {
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--filete);
}

.sitio .marca-enlace {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}

.marca-interior .marca-logo {
  width: 34px;
  height: 34px;
}

.marca-interior .marca-nombre {
  font-size: 19px;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.sitio .marca-enlace:hover .marca-nombre {
  color: var(--acento);
}

/* --- Títulos ------------------------------------------------------------- */

.titulo-seccion {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.titulo-dia {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.2;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

/* --- Pantalla 1: los días ------------------------------------------------ */

.lista-dias {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.lista-dias .dia {
  border: 1px solid var(--filete);
  border-radius: 8px;
  margin: 0 0 10px;
  overflow: hidden;
}

/* Toda la tarjeta es el enlace: en el teléfono, apuntar a un renglón de texto
   es incómodo y aquí no hay nada más que pulsar. */
.lista-dias .dia a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

.lista-dias .dia a:hover {
  background: var(--papel-suave);
}

.dia-titulo {
  grid-column: 1;
  font-size: 19px;
  font-variation-settings: "wght" 650;
  font-weight: 650;
}

.dia-datos,
.dia-clasicos {
  grid-column: 1;
  color: var(--tinta-suave);
  font-size: 13.5px;
}

.dia-clasicos {
  font-style: italic;
  color: var(--gris);
}

/* La flecha ocupa las dos filas de la derecha y se desplaza al pasar por
   encima: dice «esto se abre» sin escribirlo. */
.dia-flecha {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--acento);
  font-size: 20px;
  transition: transform 0.15s;
}

.lista-dias .dia a:hover .dia-flecha {
  transform: translateX(3px);
}

/* --- Pantalla 2: el día -------------------------------------------------- */

/* Las dos tablas comparten rejilla. Ancho completo de la hoja y cifras
   tabulares, para que las columnas de números queden a plomo. */
.tabla-programa,
.tabla-inscritos {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum" 1;
}

.tabla-programa {
  margin-bottom: 40px;
}

.tabla-programa caption,
.tabla-inscritos caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.tabla-programa thead th,
.tabla-inscritos thead th {
  text-align: left;
  padding: 4px 10px 5px 0;
  border-bottom: 1px solid var(--tinta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.tabla-programa td,
.tabla-programa tbody th,
.tabla-inscritos td,
.tabla-inscritos tbody th {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--filete-claro);
  text-align: left;
  vertical-align: baseline;
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

.tabla-programa tbody tr:hover {
  background: var(--papel-suave);
}

/* La primera columna es el número de carrera y es el enlace: se le da peso y
   se le quita el subrayado, que en una tabla se confunde con el filete. */
.tabla-programa tbody th {
  font-size: 17px;
  font-variation-settings: "wght" 700;
  font-weight: 700;
  white-space: nowrap;
}

.tabla-programa tbody th a {
  text-decoration: none;
}

.tabla-programa tbody th a:hover {
  text-decoration: underline;
}

.col-hora,
.col-cifra {
  white-space: nowrap;
}

/* Con el prefijo de la tabla: la regla general de celdas las alinea a la
   izquierda y pesa más que una clase suelta. */
.tabla-programa .col-cifra,
.tabla-inscritos .col-cifra {
  text-align: right;
  padding-right: 16px;
}

.col-condicion {
  color: var(--tinta-suave);
}

/* --- Cada carrera del día --- */

.carrera-resumen {
  border-top: 1px solid var(--filete);
  padding-top: 18px;
  margin-bottom: 30px;
}

.carrera-titulo {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.25;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.carrera-titulo a {
  text-decoration: none;
}

.carrera-titulo a:hover {
  text-decoration: underline;
}

.carrera-datos {
  display: block;
  font-size: 14px;
  color: var(--tinta-suave);
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

.clasico {
  margin: 0 0 6px;
  font-style: italic;
}

.condicion {
  margin: 0 0 6px;
  color: var(--tinta-suave);
  font-size: 14px;
}

/* Rótulo de dato: dice qué es lo que sigue sin gastar una línea entera. */
.etiqueta {
  display: inline-block;
  margin-right: 5px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.tabla-inscritos {
  margin: 14px 0 10px;
}

.tabla-inscritos .col-numero {
  width: 2.6em;
  color: var(--gris);
}

.tabla-inscritos .col-caballo {
  font-variation-settings: "wght" 600;
  font-weight: 600;
}

/* Los kilos, a la izquierda (Oscar, 2026-08-02). Llevaban `col-cifra`, que los
   alineaba a la derecha de una columna de 160 px mientras su encabezado «Kg»
   seguía a la izquierda: el dato y su rótulo acababan a 130 px de distancia y el
   cuadro se leía torcido. Con `width` la columna deja de estirarse y el
   encabezado queda justo encima de la cifra. */
.tabla-inscritos .col-kilos {
  text-align: left;
  white-space: nowrap;
  width: 4em;
}

/* La probabilidad del modelo. A la derecha porque es lo que se compara entre
   filas de un vistazo —cuál es el que más papeletas tiene—, y en el verde del
   sitio para que se lea como la misma cifra que sale en la carrera. */
.tabla-inscritos .col-ml {
  text-align: right;
  white-space: nowrap;
  width: 4.5em;
  color: var(--acento);
  font-variation-settings: "wght" 600;
  font-weight: 600;
}

/* El encabezado también a la derecha: la regla general de `thead th` los pone
   todos a la izquierda, que es justo el desajuste que tenía «Kg». */
.tabla-inscritos thead .col-ml,
.tabla-inscritos thead .col-votos {
  text-align: right;
  color: var(--gris);
}

/* Los votos de la cátedra, antes del ML para que los dos pronósticos —el de las
   personas y el de la máquina— queden juntos y se comparen sin saltar la vista.
   En gris: son el término de comparación, no el dato principal de la página. */
.tabla-inscritos .col-votos {
  text-align: right;
  white-space: nowrap;
  width: 3.5em;
  color: var(--tinta-suave);
}

/* Los tres mejores del modelo. El verde llega de borde a borde de la celda, así
   que las tres casillas se localizan de un vistazo sin leer las cifras — igual
   que en las tarjetas de la pantalla de carrera. */
.tabla-inscritos .col-ml-mejor {
  background: #dcfce7;
  color: #14532d;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   El resultado de un día ya corrido (spec 006)

   Tres columnas que solo existen cuando la jornada se corrió: el puesto y la
   separación en el cuadro, y el tiempo en el programa. En un día por correr la
   plantilla no las emite, así que estas reglas no tienen nada que pintar y el
   cuadro queda exactamente como estaba.
   -------------------------------------------------------------------------- */

/* El puesto abre la fila, delante del número de cajón: en un resultado lo
   primero que se busca es el orden de llegada, y ponerlo a la izquierda deja la
   columna leyéndose sola de arriba abajo. En negrita porque es el dato
   principal de la tabla, al contrario que en un día por correr, donde lo es el
   nombre del caballo. */
.tabla-inscritos .col-puesto {
  width: 3em;
  white-space: nowrap;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

/* La separación va pegada al nombre y no al final de la fila: «a un cuerpo» se
   lee junto al caballo del que se dice, no a nueve columnas de distancia.
   Ancho suficiente para «10 cps» y para «No corrió», que es la cadena más larga
   que puede caer aquí. */
.tabla-inscritos .col-separacion {
  width: 6.5em;
  white-space: nowrap;
  color: var(--tinta-suave);
}

/* Los que no salieron: la fila entera atenuada. No se ocultan —quien votó o
   jugó a uno de ellos vuelve a buscarlo—, pero tampoco compiten con los que
   corrieron. */
.tabla-inscritos .fila-no-corrio {
  color: var(--gris);
}

.tabla-inscritos .fila-no-corrio .col-caballo {
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

/* El tiempo del ganador, en el programa del día y en la línea de datos de la
   carrera. Tabular y a la derecha para que los registros de las distintas
   carreras queden a plomo y se comparen de una ojeada. */
.tabla-programa .col-tiempo {
  text-align: right;
  white-space: nowrap;
  width: 6em;
  font-variant-numeric: tabular-nums;
}

.tabla-programa thead .col-tiempo {
  text-align: right;
}

.carrera-tiempo {
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" 600;
  font-weight: 600;
}

/* Un día ya corrido en la portada: la flecha y el título se leen igual, pero la
   línea de datos dice «resultados» en vez de la hora, y conviene que el bloque
   entero se distinga del de la semana que viene sin llegar a parecer apagado. */
.lista-dias .dia-corrida .dia-datos {
  color: var(--tinta-suave);
}

/* El control de orden, alineado con el bloque de texto y separado del programa
   que hay encima: es una acción, no una línea más de la lista. */
.orden-inscritos {
  margin: 0 0 26px;
}

.record {
  margin: 6px 0 0;
  color: var(--gris);
  font-size: 13px;
}

/* --- Botón de enlace ----------------------------------------------------- *
 *
 * El único elemento «de acción» del sitio: llevar del resumen al estudio. Es un
 * enlace normal con aspecto de botón, no un botón: se abre en otra página y
 * tiene que poder copiarse y abrirse en pestaña nueva.
 */

.ir-a-carrera {
  margin: 14px 0 0;
}

.sitio .boton-enlace {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--acento);
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-variation-settings: "wght" 600;
  font-weight: 600;
}

.sitio .boton-enlace:hover {
  background: var(--acento);
  color: #fff;
}

/* El mismo botón cuando es un `<button>` de verdad y no un enlace: el navegador
   le pone su propio fondo, su tipografía y su color, y sin esto el control de
   orden no se parecería al resto de la página. */
.sitio button.boton-enlace {
  background: none;
  color: var(--acento);
  font-family: inherit;
  cursor: pointer;
}

/* --- Presentación del sitio ---------------------------------------------- *
 *
 * El único texto largo de la publicación. Con remates y a 17 px: se lee de
 * corrido, al revés que todo lo demás, que se consulta. El ancho corto no es
 * adorno — a 860 px de línea el ojo pierde el renglón al saltar.
 */

.presentacion {
  max-width: 62ch;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 3px solid var(--tinta);
}

.presentacion p {
  margin: 0 0 14px;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Los títulos de las publicaciones: cursiva y algo más de peso, como en el
   original de Oscar, que los marcaba con negrita y cursiva a la vez. */
.presentacion em {
  font-style: italic;
  font-weight: 700;
  color: var(--tinta);
}

/* --- Navegación al pie --------------------------------------------------- */

.pie-navegacion {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--filete);
  font-size: 14px;
}

/* La navegación de la pantalla de carrera (la que va dentro de `.pagina`) sigue
   siendo la de siempre: hereda el color del texto para no encender de verde una
   página que es toda cifras. */
.pagina nav {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--filete);
}

.pagina nav a {
  color: inherit;
}

@media (max-width: 560px) {
  .marca-portada {
    gap: 12px;
  }

  .marca-logo {
    width: 64px;
    height: 64px;
  }

  .marca-nombre {
    font-size: 30px;
  }

  /* En el teléfono la tabla del programa pierde la pista y la condición: son
     las dos columnas que se pueden consultar ya dentro de la carrera, y sin
     ellas la tabla cabe sin barrido horizontal.

     **Por clase y no por `nth-child`** (corregido el 2026-08-09): en un día ya
     corrido se intercala la columna del tiempo, y las posiciones 4 y 5 pasaban
     a ser pista y **tiempo** — o sea que el teléfono escondía justo el dato del
     resultado y dejaba la condición, que es lo que se quería esconder. Con la
     posición codificada en el selector, añadir una columna rompe la regla en
     silencio. */
  .tabla-programa .col-pista,
  .tabla-programa .col-condicion {
    display: none;
  }

  /* Y el cuadro pierde el jinete, por el mismo motivo: está en la pantalla de
     la carrera. Es lo único prescindible cuando el día ya se corrió — el puesto
     y la separación son *el* dato, y los votos y el ML son los dos pronósticos
     que se contrastan con él. */
  .tabla-inscritos .col-jinete {
    display: none;
  }

  /* El cuadro de inscritos **ya desbordaba 36 px en un teléfono de 375 px antes
     de la spec 006** (medido: 411 px de tabla), aunque no se notara sin mirarlo.
     Las dos columnas del resultado lo habrían llevado a 491. Estos dos ajustes
     lo devuelven por debajo del ancho de pantalla en los dos casos, sin quitar
     ninguna columna de datos:

     1. Menos aire entre columnas. Con siete visibles, cuatro píxeles cada una
        son casi treinta de ancho.
     2. «No corrió» deja de forzar el ancho de su columna: se parte en dos
        líneas en vez de estirarla, y así la separación ocupa lo que miden las
        cifras («10 3/4») y no lo que mide la frase más larga. */
  .tabla-inscritos td,
  .tabla-inscritos tbody th,
  .tabla-inscritos thead th {
    padding-right: 6px;
  }

  /* El ancho da para «3/4 cpo» y «12 1/2» en una línea; la única que se parte en
     dos es «No corrió», y esa es precisamente la que no debe mandar. */
  .tabla-inscritos .col-separacion {
    width: 5.2em;
    white-space: normal;
  }
}


/* --- Correcciones sobre el CSS heredado del laboratorio --- */

/* El título de la carrera SÍ se queda pegado arriba (lo hereda del laboratorio):
 * es la referencia de dónde está el lector, y sin él se pierde al desplazarse.
 *
 * El problema de tenerlo pegado es que tapa el nombre del caballo al saltar de
 * uno a otro. Eso NO se arregla quitando el sticky, sino descontando su altura
 * al desplazarse: `scroll-padding-top` en el elemento que hace scroll.
 *
 * El valor lo fija el script midiendo la caja EN VIVO, porque su altura cambia
 * al redimensionar la ventana (el título se parte en dos líneas). Aquí solo se
 * deja un valor de respaldo por si el script no llega a correr.
 *
 * OJO: no añadir `scroll-margin-top` a los bloques. Los dos valores se SUMAN y
 * dejarían un hueco del doble. */
html {
  scroll-padding-top: 60px;
}

/* --- Barra lateral: opciones y navegación ------------------------------- *
 *
 * Reúne lo que antes estaba repartido en un panel de filtros arriba del
 * documento —que se iba con el scroll— y un control flotante en la esquina.
 * Con carreras de siete caballos y veinte tarjetas cada uno, volver arriba a
 * buscar los filtros eran miles de píxeles.
 *
 * Va fija y superpuesta, no empujando el contenido: el documento ya mide
 * 1760 px de ancho y restarle 260 más lo estrecharía sin ganar nada.
 */

/* **A la derecha** desde el 2026-08-01, a pedido de Oscar. Es también el lado
   que menos estorba: la página se lee de izquierda a derecha y el ojo empieza
   por el cajón y el nombre del caballo, que quedan pegados al borde izquierdo.
   Y en el teléfono cae bajo el pulgar. */
.barra-lateral {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px 20px;
  background: #fff;
  border-left: 1px solid #d6d3ce;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
}

/* Oculta = fuera de la pantalla, no `display:none`: así la transición se ve y
   el foco no salta de golpe al abrirla. */
.barra-lateral.plegada {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: no-preference) {
  .barra-lateral {
    transition: transform 0.18s ease-out;
  }
}

.barra-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d6d3ce;
  padding-bottom: 6px;
}

.barra-titulo {
  color: #18181b;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

/* La marca encabeza el menú y es el camino de vuelta a la portada. */
.barra-marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.barra-marca img {
  width: 26px;
  height: 26px;
}

.barra-marca:hover span {
  color: var(--acento);
}

/* Los enlaces de la barra no se subrayan: son controles, y aquí el subrayado
   compite con los filetes de las tarjetas que hay detrás. */
.barra-lateral a {
  text-decoration: none;
}

.barra-lateral a:hover {
  text-decoration: underline;
}

/* --- Navegación entre carreras, dentro del menú --- */

.barra-navegacion {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e5e1;
}

/* Qué carrera se está leyendo (Oscar, 2026-08-27). Encabeza la barra porque es
   lo primero que hay que saber al abrirla: las flechas de al lado dicen a qué se
   va, no dónde se está. Con más peso que el rótulo «Ir a», que es solo la
   etiqueta del control. */
.barra-carrera {
  font-weight: 600;
  color: #18181b;
}

.nav-hermanas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-hermanas a {
  color: var(--acento);
  text-decoration: none;
  padding: 3px 6px;
  border: 1px solid #d6d3ce;
  border-radius: 5px;
  white-space: nowrap;
}

.nav-hermanas a:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* El extremo del día: se deja el hueco marcado en gris en vez de quitarlo, para
   que los tres controles no bailen de sitio al cambiar de carrera. */
.nav-vacio {
  color: #d4d4d8;
  padding: 3px 6px;
  border: 1px solid transparent;
}

.barra-cerrar,
.abrir-barra {
  border: 1px solid #d6d3ce;
  background: #fff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.barra-cerrar:hover,
.abrir-barra:hover {
  background: #f3f2f0;
}

/* El único control visible mientras la barra está plegada. */
/* Al mismo lado que la barra que abre: si el botón estuviera a la izquierda, el
   panel saldría por el otro extremo de la pantalla y costaría relacionarlos. */
.abrir-barra {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 29;
  width: 34px;
  height: 34px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* --- Filtros de la pantalla de carrera --- */

.panel-filtros {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.filtros-titulo {
  color: #71717a;
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}

/* "En la distancia" ya incluye la pista: se marca y se atenúa para que no
   parezca que queda algo por afinar. */
.filtro.implicito {
  opacity: 0.55;
  cursor: default;
}

/* --- Trece columnas: la tarjeta ya no lleva REF ---
   El laboratorio v13 sigue teniendo 14 columnas y `estilos.css` se extrae de él
   sin tocarlo, así que la rejilla se corrige aquí, que se carga después. Cuando
   Oscar quite REF también del laboratorio, este bloque sobra.
   Las alineaciones tienen que reescribirse enteras: las del laboratorio van con
   `14n + k` y con 13 columnas apuntarían a la celda equivocada. */
/* Reparto de los 40 px que dejó REF (Oscar, 2026-07-28): 10 px para CABALLO
   —de 133 a 143— y los otros 30 se le quitan a la tarjeta, que pasa de 547 a
   517 px. Las columnas suman 502 px y queda la misma holgura de 15 px que
   tenía el diseño original; con la tarjeta más estrecha, además, ahora entran
   tres enteras en los 1661 px de la fila (antes se cortaba la tercera). */
/* --- Anchos de columna ---
   Todos medidos sobre la página, no estimados: cada columna se dimensiona por
   lo más ancho que tiene que mostrar —su dato más largo de la temporada o su
   rótulo, lo que pese más—, de modo que **nada se recorta**.
     PTO 28 (`10º`)      CABALLO 143        HDC 29 (el rótulo)
     CAJ 27 (el rótulo)  KG 22 (`54`)       JINETE 94 (`J.C.Sotomayor`)
     SEP 62 (`3/4 cpo`, desde que se publica sepEstudieFinal)
     VOT 26 (el rótulo; los votos por caballo no pasan de dos cifras)
     % 34 (`100.0`, el caso extremo de una carrera de un solo corredor)

   Las trece de datos suman 553 px. Las dos de pronóstico se añadieron el
   2026-08-02 y **ningún ancho existente se tocó**: se ensanchó la tarjeta las
   dos veces (Oscar lo pidió expresamente, primero «deja los anchos de las
   columnas como están» y luego «no importa que el ancho de la tarjeta
   aumente»). 553 + 26 + 34 = 613, la tarjeta mide 618 y quedan los mismos 5 px
   de aire de siempre. La fila es de 1.988 px para que sigan entrando TRES
   tarjetas enteras: 3 × (618 + 36 de padding + 2 de borde) + 2 × 10 de hueco.
   Los 36 de padding son 10 + 10 + 16 de más a la izquierda, que es lo que
   cuesta el folio del borde.

   El intento anterior fue al revés —robarle 30 px a CABALLO para no mover la
   tarjeta— y hubo que revertirlo: los nombres largos empezaron a recortarse.

   **Al cambiar cualquier ancho hay que rehacer esta cuenta.** Si los tracks
   suman más que la tarjeta, `overflow: hidden` se come la última columna sin
   dar ningún error. Ya pasó una vez con PF. */
.tabla {
  grid-template-columns: 14px 14px 14px 28px 143px 29px 26px 27px 22px 94px 62px 50px 30px 26px 34px;
}

.tarjeta {
  flex: 0 0 618px;
  width: 618px;
  position: relative;
}

/* **El folio se ve siempre, en todas partes** (Oscar, 2026-08-28).
   
   Nació el 2026-08-02 apareciendo solo con un filtro puesto, y el razonamiento
   de entonces era bueno: sin filtro las tarjetas van seguidas por definición, y
   una franja permanente sería una marca que no significa nada. Lo que cambió es
   que ya no se leen todas de un vistazo. Con veinte tarjetas por caballo y una
   fila que se recorre de lado, a la tercera carrera el lector ya no sabe cuánto
   ha retrocedido — y eso pasa igual en el teléfono que en la Mac. La franja dice
   **a cuántas carreras de la más reciente** se está mirando, y eso significa
   algo siempre.

   Lo que sigue dependiendo del filtro es el folio **negro** (más abajo): ese sí
   marca algo que solo ocurre al filtrar.

   El hueco lo abre `.bloque-caballo .tarjeta` con DOS clases a propósito:
   `estilos.css` trae `.tarjeta + .tarjeta{padding-left:5px}` —dos también— y
   este archivo se concatena después, así que gana por orden. Con una sola clase
   perdía, y el folio se montaba sobre el contenido en todas las tarjetas menos
   la primera.

   **En el escritorio no hay que tocar ningún ancho**: la tarjeta es
   `content-box`, así que los 16 px extra de `padding` ensanchan la caja y dejan
   intacto el sitio de la tabla. En el móvil es `border-box` y allí sí hay que
   sumarlos al ancho fijo. */
.bloque-caballo .tarjeta {
  padding-left: 26px;
}

/* Ocupa el alto entero de la tarjeta y el número se ancla arriba, a la altura
   del encabezado. Gris cuando la tarjeta viene justo tras la anterior visible;
   negro cuando el filtro se saltó carreras.

   Se dibuja **encima** de la tarjeta, no dentro del flujo: por eso hace falta el
   `padding` izquierdo de arriba, o se montaría sobre la primera columna. */
.folio {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  padding-top: 11px;
  align-items: flex-start;
  justify-content: center;
  background: #f4f4f5;
  border-right: 1px solid var(--filete);
  border-radius: 3px 0 0 3px;
  font-size: 11px;
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #52525b;
  font-feature-settings: "tnum" 1;
}

/* Negro cuando el filtro se saltó carreras ANTES de esta tarjeta. Incluye el
   caso del principio: si la primera que se ve no es la 1, también hubo salto
   —hay carreras más recientes escondidas— y por eso se marca igual (Oscar,
   2026-08-02). Lo pone el JavaScript, que es quien sabe qué está visible. */
.folio.oscuro {
  background: var(--tinta);
  border-right-color: var(--tinta);
  color: #fff;
}

/* El ancho de 1.760 px es SOLO de la pantalla de carrera, donde lo imponen las
   tarjetas. Iba en `.pagina` a secas y se lo comían también el índice y el día,
   que son listas: tenían un `max-width` de 760 px y aun así salían de 1.760,
   porque esta regla va después y pesa lo mismo. Por eso el día «se veía muy
   ancho» (Oscar, 2026-08-01). */
.pagina-carrera {
  min-width: 1988px;
}

.caja-carrera,
.caja-caballo,
.caja-datos,
.fila-tarj {
  width: 1988px;
}

/* **El desplazamiento horizontal se queda en la fila** (Oscar, 2026-08-28).
   Sin esto, al llegar al extremo de la fila de tarjetas el gesto sigue su
   camino y el navegador lo entiende como «atrás» o «adelante» en el historial:
   el lector recorre la tarjeta, llega al final, y se va de la página sin haber
   pedido nada. Es el mismo problema con la rueda lateral de un ratón, con dos
   dedos en el trackpad y con el dedo en el teléfono.

   `contain` corta la propagación pero deja el rebote dentro de la fila, que es
   la señal de «hasta aquí». `none` quitaría también el rebote y con él la única
   pista de que se ha llegado al extremo. */
.fila-tarj {
  overscroll-behavior-x: contain;
}

.tabla > .celda:nth-child(15n + 1),
.tabla > .celda:nth-child(15n + 2),
.tabla > .celda:nth-child(15n + 3),
.tabla > .celda:nth-child(15n + 7) {
  text-align: center;
}

/* HDC va a la derecha (columna 6). Es una cifra que se compara de línea a
   línea, y centrada bailaba entre los números de uno y de dos dígitos. */
.tabla > .celda:nth-child(15n + 4),
.tabla > .celda:nth-child(15n + 6),
.tabla > .celda:nth-child(15n + 8),
.tabla > .celda:nth-child(15n + 9),
.tabla > .celda:nth-child(15n + 11),
.tabla > .celda:nth-child(15n + 12),
.tabla > .celda:nth-child(15n + 13),
.tabla > .celda:nth-child(15n + 14),
.tabla > .celda:nth-child(15n + 15) {
  text-align: right;
}

/* Los votos de la cátedra (columna 14). En gris y sin peso: son el término de
   comparación del ML, no un dato de la carrera, y compitiendo en negro con el
   dividendo y el peso físico ensuciaban la línea. */
.st-votos {
  font-size: 12px;
  line-height: 1.35;
  color: var(--tinta-suave);
  font-feature-settings: "tnum" 1;
}

/* La probabilidad del modelo (columna 14, `%`). Justificada a la derecha por
   petición de Oscar (2026-08-02). El relleno con espacio de cifra que trae
   `edicion._probabilidad` hace además que el punto decimal caiga a plomo:
   alinear a la derecha no basta, porque la fuente hace tabulares los dígitos
   pero no el punto, y «5.2» y «35.3» no cuadrarían. */
.st-probabilidad {
  font-size: 12px;
  line-height: 1.35;
  color: #18181b;
  font-feature-settings: "tnum" 1;
}

/* Los tres que el modelo pone por delante, en verde (Oscar, 2026-08-02). El
   fondo llega de borde a borde de la celda —el `padding` de `.celda` va por
   dentro— así que las tres casillas verdes forman una columna continua y se
   localizan de un vistazo sin tener que leer las cifras. */
.st-probabilidad-mejor {
  font-size: 12px;
  line-height: 1.35;
  color: #14532d;
  background: #dcfce7;
  font-variation-settings: "wght" 600;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

/* MODO PRUEBA · el «descubrimiento»: el modelo que ignora los votos puso a este
   caballo primero de su carrera y el consenso de la cátedra no lo señalaba.
   Aparece unas 4,7 veces por jornada, y de esos aciertos sale el dividendo alto
   —8,07 de media frente a 3,75 de lo que ambos veían igual.

   **Ámbar y no verde a propósito.** El verde ya significa «entre los tres
   primeros del modelo publicado»; repetirlo aquí haría ilegibles las dos cosas a
   la vez, que es justo lo que interesa comparar en una tarjeta.

   Va sobre la celda del NOMBRE, no sobre la del %, por dos razones: ninguna
   anchura cambia —la rejilla de 15 columnas queda intacta— y la marca no es una
   probabilidad, así que ponerla junto a una cifra la haría parecer un segundo
   pronóstico. Las marcas de estudiado y rival viven en un `span` de dentro, de
   modo que el fondo no compite con ellas.

   Esta clase NO debe aparecer en una edición publicada: solo la produce
   `publicar --modo-prueba`. */
.st-nombre-descubrimiento {
  font-size: 13.5px;
  line-height: 1.35;
  color: #7c2d12;
  background: #ffedd5;
  font-variation-settings: "wght" 400;
  font-weight: 400;
  font-feature-settings: "tnum" 1;
}

/* La distancia y la pista de una carrera anterior, cuando son las de hoy
   (Oscar, 2026-08-23). Es el dato que el lector compara tarjeta a tarjeta, y el
   encabezado entero va ya en negrita, así que la negrita no podía distinguirlo.

   **El mismo verde que la probabilidad**, y a propósito: en esta publicación el
   verde significa «esto es lo que importa mirar», y aquí quiere decir lo mismo.
   Incluye la letra de la pista y la baranda, porque «en la distancia» es
   distancia Y superficie: los 1200 de arena no son los 1200 de césped. */
.st-enc-distancia-hoy {
  color: #14532d;
  background: #dcfce7;
  padding: 0 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* La misma cifra en la cabecera del caballo, detrás del nombre. Aquí va suelta
   —sin columna que la encabece— así que lleva el `%` y su propia caja. */
.st-probabilidad-caja {
  font-size: 13.5px;
  color: #14532d;
  background: #dcfce7;
  padding: 0 5px;
  border-radius: 3px;
  font-variation-settings: "wght" 650;
  font-weight: 650;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* CABALLO y JINETE, a la izquierda: hay que decirlo porque las reglas de
   `estilos.css` con `14n` siguen vivas y alinearían algunas de estas celdas. */
.tabla > .celda:nth-child(15n + 5),
.tabla > .celda:nth-child(15n + 10) {
  text-align: left;
}

/* La línea de filtrado hereda el estilo de rótulo de columna, pero es una frase,
   no una etiqueta: en versalitas a 9,5 px costaba leerla de corrido. Se le quita
   la caja alta y se le da un punto más de cuerpo. */
.contador-tarjetas {
  color: #71717a;
  padding: 2px 0 5px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

.bloque-caballo.sin-coincidencias .contador-tarjetas {
  color: #b91c1c;
}

/* --- Navegación por caballo, dentro de la barra --- */

.nav-caballos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #d6d3ce;
  padding-top: 12px;
}

.nav-pasos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-pasos button {
  border: 1px solid #d6d3ce;
  background: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  flex: 0 0 auto;
}

.nav-pasos button:hover {
  background: #f3f2f0;
}

.nav-posicion {
  flex: 1 1 auto;
  text-align: center;
  color: #52525b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La lista completa: con siete caballos, llegar al último por flechas son seis
   pulsaciones. */
.nav-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-lista button {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  border: 0;
  background: none;
  padding: 3px 4px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #3f3f46;
  border-radius: 4px;
}

.nav-lista button:hover {
  background: #f3f2f0;
}

.nav-lista li.actual button {
  background: #f4f1e8;
  color: #18181b;
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

.nav-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 17px;
  height: 17px;
  background: #18181b;
  color: #fff;
  border-radius: 3px;
  font-size: 10px;
}

@media print {
  .barra-lateral,
  .abrir-barra {
    display: none;
  }
}

/* --- Pie del caballo en dos columnas ------------------------------------- *
 *
 * A la izquierda la estadística del preparador y a la derecha el texto de
 * siempre (sexo, pedigrí, forma, aprontes). La tabla se dimensiona por su
 * contenido y el texto se queda con el resto, que es lo que interesa: las
 * cifras son de ancho conocido y la prosa no.
 *
 * Va aquí y no en `estilos.css` porque es estructura del generador, no
 * tipografía del laboratorio: al reextraer el preset no debe perderse.
 */

.caja-datos {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.datos-texto {
  flex: 1 1 auto;
  /* Sin esto, una línea larga sin espacios ensancharía la columna y empujaría
     la tabla fuera de la caja. */
  min-width: 0;
}

.caja-datos.sin-estadistica .datos-texto {
  width: 100%;
}

/* Los dos cuadros van EN FILA, uno al lado del otro, así que el pie queda con
   tres bloques horizontales: rendimiento · preparador · texto.
   Anchos FIJOS, no ajustados al contenido: con `auto` cada tabla medía distinto
   —de 187 px con una fila a 245 px con "Cambio de preparador"— y el texto de
   cada caballo empezaba en una sangría diferente, dejando un borde izquierdo
   dentado a lo largo de la lista. */
.datos-cuadros {
  /* `0 1 auto`, no `0 0 auto`: con base fija el contenedor se dimensionaba a su
     contenido y `flex-wrap` no llegaba a actuar nunca —seguía saliéndose por la
     derecha, solo que en una línea—. Al permitirle encoger, el ancho lo manda la
     caja y las tablas, que sí tienen ancho fijo, bajan de línea. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  /* Con los dos cuadros de campaña son SIETE tablas, y la fila dejó de caber
     siempre: medido sobre la edición 2026-08-22, 7 de 205 tarjetas llegaban a
     2.031 px en un hueco de 1.988 y se salían por la derecha. Al envolver, esas
     siete bajan el último cuadro a una segunda línea; las 198 restantes quedan
     exactamente igual que antes. */
  flex-wrap: wrap;
}

/* 296 px: los cuatro rótulos en una sola línea miden 246, y a eso hay que
   sumarle ahora el recuadro (20 px de padding) y el aire entre columnas, que
   subió de 6 a 10 px. Con menos, el encabezado parte en dos y dobla su altura. */
.datos-rendimiento {
  flex: 0 0 296px;
}

.datos-preparador {
  flex: 0 0 286px;
}

/* Los aprontes son de ancho variable —el jinete y la pista mandan— y suelen ser
   uno o dos, así que se les deja crecer en vez de fijarles un ancho. */
.datos-aprontes {
  flex: 0 1 auto;
}

/* Los tres cuadros llevan el mismo recuadro que las tarjetas: son piezas del
   mismo documento y hasta ahora flotaban sueltos sobre el blanco, sin nada que
   dijera dónde acababa uno y empezaba el siguiente (Oscar, 2026-08-01).
   El ancho fijo de rendimiento y preparador se mantiene, así que hay que
   descontarles el padding para que no crezcan: `border-box`. */
.cuadro {
  border: 1px solid #d6d3ce;
  border-radius: 4px;
  padding: 8px 10px 9px;
  box-sizing: border-box;
}

/* El rótulo del cuadro va DENTRO del recuadro, no flotando encima. */
.cuadro caption {
  padding-bottom: 4px;
}

/* Una sola fila de cifras y un rótulo largo encima: el ancho lo manda el nombre
   de la pareja, no los números. 196 px porque el par más largo de la edición
   —«J.H. Suárez B. con H. Bocanegra»— mide 177, y hay que sumarle los 22 px que
   se llevan el recuadro y su relleno: con menos, el rótulo parte en dos líneas
   y ese cuadro queda más alto que los de al lado. */
.datos-pareja {
  flex: 0 0 auto;
  min-width: 202px;
}

.datos-rendimiento,
.datos-preparador,
.datos-pareja,
.datos-aprontes,
.datos-campana,
.datos-campana-cl {
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.35;
  color: #3f3f46;
  font-feature-settings: "tnum" 1;
}

.datos-rendimiento caption,
.datos-preparador caption,
.datos-pareja caption,
.datos-aprontes caption,
.datos-campana caption,
.datos-campana-cl caption {
  caption-side: top;
  text-align: left;
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datos-rendimiento th,
.datos-rendimiento td,
.datos-preparador th,
.datos-preparador td,
.datos-pareja th,
.datos-pareja td,
.datos-aprontes th,
.datos-aprontes td,
.datos-campana th,
.datos-campana td,
.datos-campana-cl th,
.datos-campana-cl td {
  padding: 1px 0 1px 10px;
  text-align: right;
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

/* El rótulo de la fila a la izquierda; las cifras, a la derecha. */
.datos-rendimiento th[scope="row"],
.datos-preparador th[scope="row"],
.datos-aprontes th[scope="row"],
.datos-campana th[scope="row"],
.datos-campana-cl th[scope="row"] {
  text-align: left;
  white-space: nowrap;
  padding-left: 0;
}

.datos-rendimiento thead th,
.datos-preparador thead th,
.datos-pareja thead th,
.datos-aprontes thead th,
.datos-campana thead th,
.datos-campana-cl thead th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
  border-bottom: 1px solid #d6d3ce;
  /* Un rótulo partido en dos líneas dobla la altura del encabezado y
     descuadra los tres cuadros del pie entre sí. */
  white-space: nowrap;
}

/* Ganadas es el dato que se busca de un vistazo. */
.datos-preparador tbody td:last-child,
.datos-rendimiento tbody td:nth-child(3) {
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
}

/* 260 px los dos, y el MISMO ancho para ambos: van uno al lado del otro con las
   mismas ocho columnas, y un par de píxeles de diferencia entre ellos se ve. Sin
   ancho fijo medían entre 209 y 255 px según el importe, que es el borde dentado
   que `.datos-rendimiento` explica más arriba. El máximo histórico que ha de
   caber es «990 000» con la CC en tres dígitos. */
.datos-campana,
.datos-campana-cl {
  flex: 0 0 260px;
}

/* --- El cuadro de campaña ------------------------------------------------- *
 *
 * Hereda de los cuadros de arriba todo salvo dos cosas: el pie con el total, que
 * ningún otro cuadro tiene, y la cursiva del título de la clásica, que es lo que
 * distingue las dos tablas de un vistazo cuando van una debajo de otra.
 *
 * El año va a la izquierda pero SIN negrita: es un rótulo de fila, no un dato
 * que se busque. Lo que se busca es la línea del total. */

.datos-campana th[scope="row"],
.datos-campana-cl th[scope="row"] {
  font-variation-settings: "wght" 400;
  font-weight: 400;
}

.datos-campana tfoot th,
.datos-campana tfoot td,
.datos-campana-cl tfoot th,
.datos-campana-cl tfoot td {
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
  border-top: 1px solid #d6d3ce;
}

.datos-campana-cl caption {
  font-style: italic;
}

/* La superficie que se corre hoy encabeza el resumen y va destacada. */
.datos-rendimiento tr.es-de-hoy th,
.datos-rendimiento tr.es-de-hoy td {
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
}

/* El total cierra el cuadro y se separa con un filete. */
.datos-rendimiento tbody tr:last-child th,
.datos-rendimiento tbody tr:last-child td {
  border-top: 1px solid #d6d3ce;
}

/* --- Jerarquía: la carrera manda sobre el caballo ------------------------- *
 *
 * Todo lo que identifica la carrera tiene que verse por encima de cualquier
 * caballo (Oscar, 2026-08-01): es el marco en el que se lee todo lo demás. Los
 * cuerpos salen de `estilos.css` —que se extrae del laboratorio y no se toca—,
 * así que se suben aquí, que se carga después.
 *
 * Escala resultante: título de carrera 30 · nombre del caballo 24 · condiciones
 * de la carrera 18. El caballo sigue destacando sobre su propio texto, pero ya
 * no compite con el encabezado.
 */

.caja-carrera {
  padding: 14px 0 12px;
  margin-bottom: 16px;
  /* Más gruesa que la que separa caballos (6 px): es un corte de más rango. */
  border-bottom: 10px solid #18181b;
}

.caja-carrera .st-caja-carrera-bold {
  font-size: 30px;
  line-height: 1.3;
}

.caja-carrera,
.caja-carrera .st-caja-carrera-condiciones {
  font-size: 18px;
  line-height: 1.5;
}

.caja-carrera .st-caja-carrera-premios {
  font-size: 15px;
}

/* El nombre del clásico dentro de la caja de la carrera. Reusa `.clasico` de la
   pantalla de día —misma cursiva— pero al tamaño de la caja, y sin el margen
   inferior de allá, que aquí separaría de más de las condiciones. */
.caja-carrera .clasico {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

/* --- El cajón, en caja negra ---------------------------------------------- *
 *
 * Es el número con el que se apuesta: se busca antes que el nombre y tiene que
 * encontrarse de un salto de vista. `display: inline-block` con ancho mínimo
 * para que un 1 y un 12 ocupen la misma caja y los números queden en columna a
 * lo largo de la carrera.
 */

.cajon-caballo {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 7px 3px;
  border-radius: 4px;
  background: #18181b;
  color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 1.15;
  font-variation-settings: "wght" 700;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}

/* La marca de temporada `[15/40]` de jinete, preparador y stud. En gris y algo
   menor: acompaña al nombre, no compite con él. */
.marca-temporada {
  font-size: 0.78em;
  color: #71717a;
  font-feature-settings: "tnum" 1;
}

/* --- Selector de cuántas tarjetas se ven --- */

.tope-tarjetas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid #e7e5e1;
}

.selector-tope {
  font: inherit;
  padding: 2px 4px;
  border: 1px solid #d6d3ce;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* --- Cuadros de pareja ---------------------------------------------------- *
 *
 * El caballo con su jinete y el jinete con su preparador. El rótulo va en dos
 * pisos: qué relación es, y quiénes son. La segunda línea, en peso normal — el
 * cuadro se busca por la relación, no por los nombres, que ya están arriba.
 */

/* El sujeto SÍ puede partir en dos líneas, al revés que los demás rótulos: un
   par de apellidos largos desalinea la altura de los cuadros, pero recortarlo
   con puntos suspensivos escondería de quién son las cifras. */
.cuadro-sujeto {
  display: block;
  font-variation-settings: "wght" 400;
  font-weight: 400;
  color: #52525b;
  white-space: normal;
}

/* De qué periodo son las cifras. Va al pie y en pequeño porque no se consulta,
   se comprueba: lo que importa es que esté, porque los dos cuadros NO cubren el
   mismo tiempo y sin decirlo se compararían entre sí. */
.datos-pareja tfoot td {
  padding: 3px 0 0;
  text-align: left;
  font-size: 9.5px;
  color: #a1a1aa;
  border-top: 1px solid #e7e5e1;
}

/* Ganadas es el dato que se busca de un vistazo, igual que en los otros. */
.datos-pareja tbody td:nth-child(2) {
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
}

/* --- Cuadro de aprontes --------------------------------------------------- *
 *
 * Los trabajos dejaron de ir dentro del texto del pie el 2026-08-01. En columna
 * las cifras se comparan entre sí, que es como se lee un apronte: distancia,
 * tiempo y calificación son los tres datos por los que se juzga (Oscar,
 * 2026-07-28), y son los que van en negrita — antes con un estilo por fragmento,
 * ahora por columna.
 */

.datos-aprontes .ap-fuerte {
  font-variation-settings: "wght" 700;
  font-weight: 700;
  color: #18181b;
}

/* El jinete y la pista son texto, no cifras: a la izquierda. */
.datos-aprontes .ap-jinete,
.datos-aprontes .ap-pista {
  text-align: left;
  white-space: nowrap;
}

/* Los tramos finales, en gris: acompañan al tiempo, no compiten con él. Son dos
   columnas porque `Aprontes` tiene exactamente dos campos, no una lista. */
.datos-aprontes .ap-tramo {
  color: #71717a;
  white-space: nowrap;
}

.datos-aprontes .ap-sin-trabajos {
  padding-left: 0;
  text-align: left;
  color: #71717a;
}

/* --- El resumen del caballo, entre el nombre y las tarjetas ---------------- *
 *
 * Mismo texto que antes iba al pie, leído ahora antes de los marcadores. Se
 * separa del nombre con un poco de aire y se limita el ancho de línea: a 1760 px
 * la línea de pedigrí cruzaba la pantalla entera y el ojo perdía el renglón.
 */

.caja-resumen {
  width: 1988px;
  max-width: 1180px;
  padding: 2px 0 8px;
}

/* La apreciación del Estudie, en emoji: algo mayor que el texto que la rodea
   —a 12,5 px los dos pulgares se confunden en una mancha— y con `cursor: help`
   para invitar a leer el title, que es donde vive su significado. */
.apreciacion {
  font-size: 15px;
  line-height: 1;
  cursor: help;
}

/* --- Jerarquía entre caballos -------------------------------------------- *
 *
 * Ajustes sobre lo que viene de `estilos.css`, que se extrae del laboratorio:
 * puestos aquí para que volver a exportar el preset no se los lleve por
 * delante.
 *
 * Con veinte tarjetas por caballo, cada bloque es mucho más alto que antes y
 * el filete de 1 px se perdía entre las rejillas de las propias tarjetas: al
 * desplazarse costaba ver dónde acababa un caballo y empezaba el siguiente.
 */

.bloque-caballo {
  border-bottom: 6px solid #a1a1aa;
  padding-bottom: 18px;
}

.bloque-caballo:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* El cajón y el nombre comparten estilo y suben juntos: son las dos cosas que
   el lector busca al saltar de un caballo a otro. */
.st-nombre-caballo-caja {
  font-size: 24px;
}

/* --- La pantalla de carrera en el celular -------------------------------- *
 *
 * Oscar, 2026-08-01, después de probarla en su iPhone: «hay que ampliar y ver
 * en horizontal». La causa es geométrica — la tarjeta mide 558 px y la fila
 * 1.760, contra los ~390 útiles de un teléfono en vertical.
 *
 * **Ninguna columna se elimina** (decisión suya: las trece son necesarias). Lo
 * que cambia es la ventana por la que se mira:
 *
 *   · la página deja de tener ancho fijo y todo pasa a medir el 100 %;
 *   · cada tarjeta ocupa la pantalla entera y se pasa de una a otra deslizando,
 *     con enganche, en vez de tener tres cortadas a la vez;
 *   · dentro de la tarjeta, el marcador se desplaza en horizontal, y **PTO y
 *     CABALLO se quedan pegados a la izquierda** para no perder de vista de
 *     quién es cada línea al llegar a DIV o PF;
 *   · los cuadros del pie se apilan en vez de ir en fila.
 *
 * 760 px y no 560: por debajo de eso la tarjeta ya no cabe entera (578 px con
 * su recuadro), y una tablet en vertical está en el mismo caso que el teléfono.
 */

@media (max-width: 760px) {
  .pagina-carrera {
    min-width: 0;
    padding: 10px 12px 40px;
  }

  .caja-carrera,
  .caja-caballo,
  .caja-datos,
  .caja-resumen,
  .fila-tarj {
    width: 100%;
    max-width: 100%;
  }

  /* El encabezado va pegado arriba y en el teléfono se comía media pantalla. */
  .caja-carrera {
    padding: 8px 0 8px;
    border-bottom-width: 6px;
  }

  .caja-carrera .st-caja-carrera-bold {
    font-size: 20px;
  }

  .caja-carrera,
  .caja-carrera .st-caja-carrera-condiciones {
    font-size: 14px;
  }

  .caja-carrera .st-caja-carrera-premios {
    font-size: 12.5px;
  }

  .st-nombre-caballo-caja {
    font-size: 19px;
  }

  .cajon-caballo {
    font-size: 19px;
  }

  /* **Un solo desplazamiento horizontal, no dos anidados** (Oscar, 2026-08-28).
   *
   * Hasta aquí la tarjeta ocupaba el ancho de la pantalla y el marcador se
   * desplazaba DENTRO de ella. Eran dos desplazamientos anidados que se
   * disputaban el mismo gesto —y el `proximity` de abajo era un apaño para que
   * convivieran, no un arreglo—, y además la tarjeta llenaba la pantalla sin
   * ninguna señal de que hubiera más carreras detrás.
   *
   * Ahora la tarjeta va a **ancho fijo**, igual que en el escritorio y que en
   * horizontal: 546 px = los 528 de la rejilla + 16 de `padding` + 2 de borde.
   * En una pantalla de 390 px la tarjeta se ve **incompleta**, y eso es lo
   * aceptado a cambio: un único desplazamiento que recorre la tarjeta y sigue
   * hasta la siguiente, en vez de dos que se pelean.
   *
   * `proximity` y no `mandatory`: con la tarjeta más ancha que la pantalla, el
   * enganche obligatorio devolvería al lector al principio cada vez que fuera a
   * mirar el dividendo o el porcentaje. */
  .fila-tarj {
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    gap: 12px;
  }

  .tarjeta {
    /* 564 = 546 + los 18 px que abre el folio a la izquierda. */
    flex: 0 0 564px;
    width: 564px;
    box-sizing: border-box;
    scroll-snap-align: start;
    /* Sin desplazamiento propio: el de la fila es ahora el único. Y **visible**,
       no `hidden`: un ancestro con `overflow` recortado se convierte en el
       contenedor de referencia de las celdas ancladas de más abajo, y como la
       tarjeta ya no se desplaza, el anclaje no llegaría a activarse nunca. */
    overflow: visible;
    padding: 8px;
  }

  /* El encabezado dice de qué carrera es la tarjeta: si se va con el
     desplazamiento, al llegar al dividendo ya no se sabe qué se está mirando.
     Se queda anclado a la izquierda, como PTO y CABALLO. */
  .tarjeta > .st-enc-carrera {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100%;
  }

  /* --- La rejilla, más estrecha que en el escritorio (2026-08-27) ---
   *
   * Los anchos del escritorio se fijaron por el dato más largo de la temporada.
   * Aquí se recalcularon **midiendo sobre la propia Inter** los textos de la
   * edición, ahora que la fuente se sirve y las medidas son las mismas en todos
   * los aparatos. Cinco columnas sobraban:
   *
   *   CJ   27 → 18   el rótulo bajó de `CAJ` a `CJ`
   *
   * Y CABALLO 143 → 84 y JINETE 94 → 77: los nombres se truncan con puntos
   * suspensivos en el punto que Oscar fijó.
   *
   * **Cuatro recortes se deshicieron el 2026-08-27** (§16.2 y §16.3), porque el
   * modo de dos lecturas los dejó sin razón de ser: la tarjeta entera se lee en
   * horizontal, así que mutilar la cifra en vertical solo pierde dato. Vuelven a
   * su ancho de escritorio SEP (36 → 62, separaciones completas), DIV (27 → 50,
   * dos decimales y sin tope), `%` (18 → 34, con su decimal) e IRR (21 → 26, el
   * rótulo completo). La tarjeta pasa de 458 a 528 px, contra los 613 del
   * escritorio.
   */
  .tabla {
    grid-template-columns: 14px 14px 14px 28px 84px 29px 26px 18px 22px 77px 62px 50px 30px 26px 34px;
  }

  .tabla,
  .regla,
  .notas {
    min-width: 528px;
  }

  /* --- El nombre y el jinete, recortados (Oscar, 2026-08-27) ---
   *
   * Los anchos están medidos sobre Inter para que el corte caiga exactamente
   * donde él lo pidió: `Tissaia De Vries` → `Tissaia De…` y `H.Bocanegra` →
   * `H.Bocane…`. Con eso se trunca el 29 % de los nombres de caballo y el 23 %
   * de los jinetes.
   *
   * **Las iniciales del jinete nunca se pierden**, y eso es lo que hace el
   * recorte aceptable: el corte es por la derecha, y son las iniciales las que
   * distinguen a los once Herrera y a los cinco Enríquez que empiezan por J. Un
   * `J.J.Enríq…` sigue siendo una sola persona; un `Enríquez` serían cinco.
   *
   * Solo en el móvil: en el escritorio los nombres van enteros. */
  .tabla > .celda:nth-child(15n + 5),
  .tabla > .celda:nth-child(15n + 10) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* PTO y CABALLO, ancladas. Sin esto, al desplazarse hasta el dividendo no se
     sabe de qué caballo es la cifra que se está mirando. */
  .tabla > .celda:nth-child(15n + 4),
  .tabla > .celda:nth-child(15n + 5) {
    position: sticky;
    background: #fff;
    z-index: 1;
  }

  .tabla > .celda:nth-child(15n + 4) {
    left: 0;
  }

  .tabla > .celda:nth-child(15n + 5) {
    left: 28px;
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.25);
  }

  /* **Los cuadros del pie, en fila y desplazándose** (Oscar, 2026-08-28), como
     las tarjetas de arriba. Apilados uno debajo de otro, los siete cuadros
     estiraban la ficha de cada caballo varias pantallas hacia abajo y obligaban
     a un recorrido vertical largo para pasar al caballo siguiente; en fila
     ocupan la altura de uno solo y se recorren con el mismo gesto lateral que
     ya se usa para las tarjetas.

     Conservan sus anchos de escritorio —de ahí que aquí solo se toquen `grow` y
     `shrink`, y no la base—: son los que hacen que los rótulos quepan en una
     línea. `overscroll-behavior-x` para que el gesto no siga hasta el historial
     del navegador, igual que en la fila de tarjetas. */
  .caja-datos {
    flex-direction: column;
    gap: 12px;
  }


  .datos-cuadros {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .datos-rendimiento,
  .datos-preparador,
  .datos-pareja,
  .datos-aprontes,
  .datos-campana,
  .datos-campana-cl {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: none;
    scroll-snap-align: start;
  }

  /* La barra ocupa casi toda la pantalla: 260 px de 390 dejarían el contenido
     asomando por un lado sin poder leerse. */
  .barra-lateral {
    width: min(300px, 88vw);
  }
}


/* --- «Gira el teléfono» ---------------------------------------------------- *
 *
 * El modo horizontal solo sirve si el lector sabe que existe, y nadie gira un
 * teléfono por su cuenta para leer una página web.
 *
 * **Oculto por defecto y visible solo donde hace falta**: en vertical y por
 * debajo de 520 px de ancho. Ese corte deja fuera a las tablets —un iPad mini
 * en vertical tiene 744 px y ahí la tarjeta ya entra— y al escritorio. En
 * horizontal desaparece solo, sin que nadie tenga que cerrarlo.
 *
 * Sin JavaScript: es un párrafo del documento que el CSS enseña o esconde.
 *
 * --- Por qué NO va en el flujo del documento (§16.1) ---
 *
 * Como párrafo normal al principio de la página duraba un segundo, que es
 * exactamente lo que reportó Oscar: *«sólo se ve cuando se desplaza hacia abajo,
 * y aparece sólo un segundo, luego desaparece»*.
 *
 * La causa, medida en un iPhone 13 emulado: `estilos.css` declara
 * `scroll-snap-type: y proximity` con cada `.bloque-caballo` como punto de
 * enganche, y con `scroll-padding-top: 204px` el enganche del PRIMER caballo cae
 * en `scrollY = 58`. El aviso ocupa los primeros 41 px de la página. O sea: al
 * primer gesto, por pequeño que sea, el navegador engancha el primer caballo y
 * se lleva el aviso fuera de la pantalla — y lo que queda arriba es la
 * `caja-carrera`, que está pegada con fondo blanco y lo taparía igualmente. El
 * aviso no tenía ninguna posibilidad de quedarse.
 *
 * Por eso ahora va **fijo al pie de la ventana**: ningún enganche puede
 * quitarlo, no gasta altura de lectura —que en vertical es lo escaso— y al girar
 * el teléfono desaparece solo, como antes. El arreglo va aquí y no en el sitio
 * donde está el problema porque **`estilos.css` no se toca**: es la extracción
 * literal del laboratorio tipográfico. */
.aviso-girar {
  display: none;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--papel-suave);
  border-left: 3px solid var(--acento);
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1.35;
}

@media (orientation: portrait) and (max-width: 520px) {
  .aviso-girar {
    display: block;
    position: fixed;
    /* Sobre el borde inferior, no pegado: en los iPhone con gesto de inicio hay
       una franja de abajo que el sistema se reserva, y un aviso a ras del borde
       cae dentro de ella. */
    left: 10px;
    right: 10px;
    bottom: 12px;
    margin: 0;
    /* Por encima de la caja de la carrera (`z-index: 6` en `estilos.css`) y de
       la barra lateral cerrada, y por debajo del `#navcab` flotante, que es un
       mando y tiene que seguir siendo alcanzable. */
    z-index: 20;
    background: var(--papel-suave);
    border: 1px solid #d6d3ce;
    border-left: 3px solid var(--acento);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-align: center;
  }
}

/* --- El teléfono TUMBADO: la tarjeta entera ------------------------------- *
 *
 * Decisión de Oscar del 2026-08-27, después de medirlo todo: **en vertical no
 * cabe y no va a caber.** La tarjeta completa mide 613 px y un iPhone 13 deja
 * 348 útiles. Recortando nombres, abreviando rótulos y estrechando columnas se
 * bajaba a 458, y seguía sin entrar. La salida no es seguir recortando: es que
 * el teléfono tumbado sea el modo de lectura completa — y por eso los recortes
 * que mutilaban el dato se deshicieron después (§16.2), con lo que el vertical
 * subió a 528 px.
 *
 * Aquí, con ~860 px de ancho, la rejilla de 613 entra holgada. Así que **se
 * deshace todo lo que el vertical hace para sobrevivir**: nombres enteros,
 * columnas a su ancho original, nada anclado y ningún desplazamiento dentro de
 * la tarjeta. Una tarjeta por pantalla, y se pasa de una a otra deslizando.
 *
 * **La cabecera de la carrera no sale.** Tumbado hay unos 400 px de alto —menos
 * con la barra del navegador—, y el título con sus condiciones, premios y
 * apuestas se comía la parte que hace falta para ver una tarjeta entera. El
 * lector recuerda en qué carrera está; para consultarla, gira el teléfono. Sí
 * se queda el encabezado de cada tarjeta, que dice de qué carrera anterior es
 * cada cuadro y sin él serían indistinguibles.
 *
 * **Por orientación y altura, NO por anchura**, y esto costó encontrarlo: con un
 * rango de 761 a 1100 px, el iPhone 16 Pro Max entraba y el 13 no. Tumbados
 * miden 956 y 844 puntos, pero el navegador descuenta las zonas seguras del
 * notch —unos 90 px— y el segundo se quedaba en ~750, por debajo del umbral.
 * Clasificar teléfonos por su anchura nominal no funciona: la anchura utilizable
 * depende del modelo. Lo que define este caso es que la pantalla es baja.
 *
 * Va al final del archivo a propósito: tiene que ganar a la regla de móvil, que
 * un iPhone tumbado también cumple. */

@media (orientation: landscape) and (max-height: 600px) {
  .pagina-carrera {
    min-width: 0;
    width: 100%;
    padding: 6px 10px 30px;
  }

  .caja-carrera {
    display: none;
  }

  .caja-caballo,
  .caja-datos,
  .caja-resumen,
  .fila-tarj {
    width: 100%;
    max-width: 100%;
  }

  .fila-tarj {
    scroll-snap-type: x proximity;
    gap: 12px;
  }

  /* **Ancho fijo, como en el escritorio** (Oscar, 2026-08-28), no una tarjeta
   * por pantalla. Con `100%` la tarjeta llenaba el ancho entero y no había
   * ninguna señal de que hubiera más: parecía que la carrera anterior era todo
   * lo que había. Asomando un trozo de la siguiente, el lector ve que la fila
   * continúa y desliza sin que nadie se lo diga.
   *
   * 631 px = los 613 de la rejilla + 16 de `padding` + 2 de borde. Es el ancho
   * que hace que la tabla quepa entera sin barra de desplazamiento dentro de la
   * tarjeta, que es lo que aquí se busca: en horizontal se lee la tarjeta
   * completa de un vistazo. En un iPhone tumbado (~844 px útiles) deja unos
   * 200 px de la siguiente a la vista. */
  .tarjeta {
    /* 649 = 631 + los 18 px que abre el folio a la izquierda. */
    flex: 0 0 649px;
    width: 649px;
    box-sizing: border-box;
    scroll-snap-align: start;
    overflow-y: hidden;
    padding: 8px;
  }

  /* Nada anclado: cabe todo, y anclar solo quitaría sitio. */
  .tarjeta > .st-enc-carrera {
    position: static;
    width: auto;
    max-width: none;
  }

  .tabla > .celda:nth-child(15n + 4),
  .tabla > .celda:nth-child(15n + 5) {
    position: static;
  }

  /* La rejilla del escritorio, sin recortes: aquí caben los 613 px.
   *
   * Las columnas van fijas y no se estiran, y eso ahora es correcto porque la
   * tarjeta mide exactamente lo que ellas ocupan. Cuando la tarjeta llenaba el
   * ancho de la pantalla sobraban ~180 px en blanco a la derecha —se veía
   * enorme y medio vacía—, y el arreglo fue darle ancho fijo, no repartir el
   * hueco entre las columnas de texto (Oscar, 2026-08-28). */
  .tabla {
    grid-template-columns: 14px 14px 14px 28px 143px 29px 26px 27px 22px 94px 62px 50px 30px 26px 34px;
  }

  .tabla,
  .regla,
  .notas {
    min-width: 613px;
  }

  .tabla > .celda:nth-child(15n + 5),
  .tabla > .celda:nth-child(15n + 10) {
    overflow: visible;
    text-overflow: clip;
  }

  /* **Los cuadros del pie, en fila y desplazándose** (Oscar, 2026-08-28), como
     las tarjetas de arriba. Apilados uno debajo de otro, los siete cuadros
     estiraban la ficha de cada caballo varias pantallas hacia abajo y obligaban
     a un recorrido vertical largo para pasar al caballo siguiente; en fila
     ocupan la altura de uno solo y se recorren con el mismo gesto lateral que
     ya se usa para las tarjetas.

     Conservan sus anchos de escritorio —de ahí que aquí solo se toquen `grow` y
     `shrink`, y no la base—: son los que hacen que los rótulos quepan en una
     línea. `overscroll-behavior-x` para que el gesto no siga hasta el historial
     del navegador, igual que en la fila de tarjetas. */
  .caja-datos {
    flex-direction: column;
    gap: 12px;
  }


  .datos-cuadros {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .datos-rendimiento,
  .datos-preparador,
  .datos-pareja,
  .datos-aprontes,
  .datos-campana,
  .datos-campana-cl {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: none;
    scroll-snap-align: start;
  }
}