/* ==========================================================================
   El Camino DT — Portal (pantalla de inicio)
   --------------------------------------------------------------------------
   Sólo composición y componentes propios de esta pantalla. Cero tokens
   nuevos: todo sale de tokens.css. El chrome, el panel, el botón, la
   pastilla, la tabla de datos, las barras de forma y el segmentado vienen
   tal cual de app.css.
   ========================================================================== */

/* La pantalla ocupa el alto de la ventana y NO scrollea: lo que scrollea es
   la bandeja y la clasificación, cada una dentro de su columna. Es la misma
   promesa que la ficha — todo a la vista de una vez. */
body {
  display: flex;
  flex-direction: column;
  height: var(--alto-ventana);
  overflow: hidden;
}

/* flex-basis 0, no auto: con basis auto el contenido manda y la columna
   crece hasta donde quiera. Con 0, la retícula ocupa exactamente el hueco
   que sobra y son los scrollers internos los que se hacen cargo.

   La retícula ya no dibuja las tres columnas con hairlines de 1px: ahora el
   fondo de la página se ve ENTRE las tarjetas, que es lo que las hace leer
   como placas sueltas y no como tres franjas de un mismo panel. */
.home {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(440px, 1.3fr) minmax(390px, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* La columna es sólo el reparto vertical: no tiene superficie ni borde, los
   tiene cada tarjeta que hay dentro. */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
}

.col__tools { display: flex; align-items: center; gap: var(--sp-1); }

.col__more {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.col__more:hover { color: var(--text-primary); }

/* Bloque interior de una columna. Agrupa sin dibujar otra tarjeta: el
   sistema no anida contenedores, separa con aire y una etiqueta. */
/* Lo que era el bloque interior —agrupar sin dibujar otra tarjeta— ya no
   existe: en este mundo cada bloque ES una tarjeta y se llama `.tarjeta`
   (app.css). De aquel componente sobreviven sólo sus dos piezas de texto,
   que siguen siendo texto dentro de una placa. */
.sub__lead { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.sub__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }

/* El mismo canalón que hay entre columnas y entre tarjetas: dos tarjetas
   pegadas con un aire distinto se leen como si fueran otra cosa. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

/* --------------------------------------------------------------------------
   BANDEJA
   --------------------------------------------------------------------------
   Lo único que distingue un mensaje leído de uno sin leer es el peso y el
   color del asunto. Nada de un punto de color: el acento ya tiene tres
   trabajos en el sistema y este no es uno.
   -------------------------------------------------------------------------- */

.inbox {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  margin-right: calc(var(--sp-4) * -1);
  padding-right: var(--sp-4);
}

/* La fecha se pega arriba mientras el grupo pasa: en una bandeja larga
   perder el día es perder el contexto entero del mensaje. En FM26 no es una
   línea suelta sino una BARRA de ancho completo con superficie propia, que es
   lo que hace que los grupos se lean como días y no como párrafos. */
.inbox__date {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-row);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
}


/* El ritmo de LECTURA, no el de tabla. Una bandeja no se escanea en columna:
   se leen cinco titulares de a uno, y a 22px por fila el asunto y el remitente
   se pisaban. `--row-lectura` es la altura que FM26 le da a esto. */
.msg {
  display: grid;
  /* 40 y no 32: es la medida del avatar en la captura de FM26, y con la fila a
     62 el círculo de 32 quedaba flotando en el medio de un renglón que ya no
     era el suyo. El avatar y la altura de fila son una sola decisión. */
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  width: 100%;
  min-height: var(--row-lectura);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.msg:hover { background: var(--bg-hover); }

/* El mensaje abierto: lavado violeta Y una barra de 4px a la izquierda. La
   barra es lo que hace que se encuentre sin leer nada, que es el trabajo de
   una bandeja de treinta filas. Va con `box-shadow` en vez de `border-left`
   para no correr el contenido de la fila 4px cuando se selecciona. */
.msg[aria-current='true'] {
  background: var(--bg-selected);
  box-shadow: inset 4px 0 0 var(--accent);
}

/* EL PUNTO DEL NO LEÍDO. Entra el 20 de agosto de 2026, leído a 1:1 del video
   de FM26: la fila sin leer lleva un punto violeta pegado al canto izquierdo,
   además del asunto en blanco.

   Y esto contradice una decisión escrita de esta guía —«ningún punto de color:
   el acento ya tiene sus tres trabajos y este no es uno»—, así que vale decir
   por qué se revierte y no simplemente que la fuente lo hace. El argumento de
   entonces daba por sentado que el peso del asunto alcanzaba. No alcanza cuando
   la bandeja se llena: con veinte mensajes y quince leídos, distinguir «blanco
   600» de «apagado 400» obliga a comparar filas entre sí, y comparar es lo que
   un aviso tiene que ahorrar. El punto se ve sin comparar nada.

   El violeta acá SÍ es de los suyos: no dice «esto vale mucho» ni nombra una
   sección — dice «esto te está esperando», que es estado, que es su trabajo.
   Y no compite con la fila abierta, que lleva lavado Y barra de 4px: una es un
   punto de 6px y la otra es la fila entera.

   Va con `::before` sobre el avatar y no como una columna de la retícula: una
   columna más para seis píxeles corre las tres restantes en todas las filas,
   incluidas las catorce que no tienen punto. */
.msg[data-leido='false'] { position: relative; }
.msg[data-leido='false']::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
/* La fila abierta ya se anuncia con su lavado y su barra: el punto ahí sería el
   tercer aviso de lo mismo, y encima cae justo encima de la barra. */
.msg[aria-current='true']::before { display: none; }

/* Acá NO va la silueta, y es una desviación consciente de la fuente. FM26
   pone un monigote genérico en cada fila de su bandeja; nosotros dejamos el
   monograma porque estos remitentes tienen nombre —la secretaria técnica, el
   cuerpo médico, el de prensa— y la inicial dice cuál de ellos escribió,
   mientras que cinco siluetas idénticas no dicen nada. El hueco de retrato
   con silueta es de la ficha y del plantel, donde el sujeto es un futbolista
   sin cara, y llega con esas pantallas. */
.msg__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  /* Un escalón MÁS OSCURO que el panel, no más claro. En la fuente el círculo
     del remitente se hunde en la fila y la inicial es lo que sube; con el
     control elevado detrás, cuarenta píxeles de superficie clara por fila
     convertían la columna izquierda de la bandeja en una hilera de botones. */
  background: var(--ink-900);
  border: 1px solid var(--line-hairline);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 700;
}
.msg[data-leido='false'] .msg__avatar { color: var(--text-primary); }

.msg__main { display: grid; gap: 1px; min-width: 0; }

.msg__from {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg__subject {
  font-size: var(--fs-md);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg[data-leido='false'] .msg__subject { color: var(--text-primary); font-weight: 600; }
.msg[data-leido='false'] .msg__from { color: var(--text-secondary); }

.msg__meta { display: flex; align-items: center; gap: var(--sp-3); }
.msg__time { font-size: var(--fs-xs); color: var(--text-muted); }
.msg__tag { color: var(--warn); }

/* LA DOBLE TILDE DEL LEÍDO. Es lo último que faltaba de la bandeja de FM26, que
   pone la hora a la derecha con una doble tilde verde al lado.

   No inventa vocabulario: `i-check-double` YA significa «leído» en este juego
   —es el icono del botón «Marcar todo como leído» de esta misma barra—, así que
   la fila usa el mismo signo que la acción que la produce.

   Y no duplica el punto violeta del no leído, aunque los dos hablen del mismo
   estado: son los dos lados de un par y NUNCA caen en la misma fila. El punto
   vive a la izquierda, en la entrada del renglón, porque contesta «¿qué me
   falta?»; la tilde vive al final, pegada a la hora, porque contesta «¿esto ya
   está?». En una bandeja llena de nuevos habla el punto; en una al día, la
   tilde.

   Verde 500 y no `--good`: cumple de sobra el piso de icono —6,26:1 sobre la
   fila abierta, contra un piso de 3— y pesa menos que el verde de los VALORES,
   que en este sistema dice «esto es bueno». Que un mensaje esté leído no es un
   valor alto, es un trámite hecho. */
.msg__visto { color: var(--verde-500); display: inline-grid; place-items: center; }

.inbox__empty {
  margin: auto 0;
  padding: var(--sp-8) var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   NOTICIA DESTACADA
   --------------------------------------------------------------------------
   Tres formatos con una sola retícula: portada de diario, posteo y placa de
   televisión. Los tres cuelgan de `--marca`, el color del medio que firma, que
   `prensa.js` planta en el panel y acá se reparte solo. Una hoja de estilo que
   supiera los nombres de los medios sería una hoja que hay que tocar cada vez
   que se agrega un país.
   -------------------------------------------------------------------------- */

/* Sin borde ni relleno propios: la noticia vive dentro de su tarjeta y el
   corte con lo que sigue lo dibuja el borde de la placa.

   Dos filas nombradas —los titulares y los puntos— porque la de arriba es la
   que cede. Los cinco titulares no miden lo mismo: un recorte de diario son
   150px y un posteo con sus cifras son 267, y como la tarjeta pasa sola cada
   siete segundos, esa diferencia sería la columna entera moviéndose de sitio
   —el calendario de abajo subiendo y bajando— cada vez que cambia el titular.
   Acá el que se hace cargo es un scroller interno: la tarjeta mide lo que la
   columna le deja y el titular largo se termina de leer adentro. */
.news {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  min-height: 0;
}

.news__panels {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

/* Y para que ceda tiene que poder: un ítem flexible no baja de su contenido
   mientras no se le diga. Es la tarjeta que se achica primero porque es la
   única de la columna con una salida —«Ver todas»— y con la nota entera a un
   clic; el calendario, en cambio, tiene piso (ver LA TIRA DE QUINCE DÍAS).

   Y ES ESA TARJETA, UNA, NO LAS TRES. El comentario de arriba dice «la tarjeta»
   en singular desde el día que se escribió, pero el selector decía
   `[data-panel='general']` y en esa columna hay TRES con ese atributo: los
   titulares, «Próximo rival» y «Partidos de hoy». O sea que el permiso de
   achicarse por debajo del contenido —pensado para la única que tiene un
   scroller adentro— se lo llevaban también las otras dos, que no tienen dónde
   meter lo que sobra: lo recortan y ya.

   No se veía porque «Próximo rival» son tres renglones y nunca sobra nada. Se
   ve el último sábado del año, cuando esa misma tarjeta pasa a mostrar el
   balance —campeón, Apertura, Clausura, descensos, retiros y los juveniles que
   dejan las inferiores, siete renglones— y en una ventana baja el último queda
   partido contra el borde. La noticia más importante de la temporada, cortada
   a la mitad.

   `:has(.news)` y no una clase nueva en el HTML: la tarjeta ya se distingue por
   lo que lleva adentro, que es exactamente el motivo por el que puede ceder. */
.home[data-vista='general'] .col > .tarjeta[data-panel='general']:has(.news) { min-height: 0; }

/* --------------------------------------------------------------------------
   EL TITULAR DE LA VISTA GENERAL ES UN ADELANTO, NO LA NOTA
   --------------------------------------------------------------------------
   La tarjeta tiene 198px en la columna del medio y los cuatro formatos piden
   197, 183, 231 y 292 —medidos a 1512×945, o sea con la ventana grande—: dos de
   los cuatro no entran nunca. El contenedor scrollea, así que no se perdía nada
   técnicamente, pero la tarjeta pasa sola cada siete segundos: lo que hay
   debajo del borde no se alcanza a leer ni queriendo, y lo que se ve es un
   renglón partido por la mitad con la barra del carrusel encima.

   Lo que se va es lo DECORATIVO del posteo —las tres cifras y la barra de me
   gusta— y el cuerpo se corta en tres renglones con puntos suspensivos, que es
   un corte que se lee como corte. Queda el titular, la bajada y el pie con el
   medio y la fecha, que es lo que un adelanto tiene que decir. La nota entera
   sigue a un clic en «Ver todas las noticias», y ahí sí está completa: esto
   vale sólo dentro de la vista general.

   Medido después: los cuatro paneles quedan en 197, 183, 194 y 184 contra los
   198 de la tarjeta. */
.home[data-vista='general'] .news .xpost__datos,
.home[data-vista='general'] .news .xpost__barra { display: none; }

.home[data-vista='general'] .news .news__body,
.home[data-vista='general'] .news .xpost__texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Y de la portada de diario se van dos cosas más. La bajada segunda —son dos
   párrafos y el segundo es el contexto, «el primer compromiso es contra
   Independiente», que en un adelanto de tres renglones es lo primero que sobra.

   Y EL DIBUJO GRANDE, que era el que de verdad marcaba el alto: 168px de escudo
   contra 121 de texto, así que el panel medía lo que medía el adorno. Esta hoja
   ya lo baja a 96 cuando la columna se angosta —«el dibujo se lleva el ancho del
   titular»— y el argumento por ALTO es el mismo con otro eje: acá tiene 198px de
   tarjeta. */
.home[data-vista='general'] .news .news__text .news__body ~ .news__body { display: none; }
.home[data-vista='general'] .news .news__mark { width: 96px; height: 96px; margin: 0; }

/* El panel es la retícula; el artículo sólo lo contiene junto a los
   indicadores. Cada indicador controla uno de estos. */
.news__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
}

/* CÓMO LLEGA EL TITULAR SIGUIENTE
   --------------------------------------------------------------------------
   La tarjeta pasa sola cada siete segundos y un corte seco a esa cadencia se
   lee como un parpadeo de la pantalla. Es la misma llegada que ya tiene el
   producto entre pantalla y pantalla (`movimiento.css`) y por eso usa sus
   piezas: DOS animaciones sobre el mismo elemento, porque el fundido y el
   recorrido no quieren la misma curva —con la de llegada, que gasta el 90 %
   del camino en el primer tercio, un fundido se termina antes de que el ojo lo
   registre—. El viaje es de 6px y no de 10: es una tarjeta llegando dentro de
   una columna, no una pantalla entera.

   Y no llega de una pieza: el titular primero, la bajada después y las
   etiquetas al final, con 50ms entre medio. Es lo que hace que se lea como una
   noticia que se está escribiendo y no como un bloque que se desliza. Escalón
   corto a propósito: el titular —lo único que se viene a leer— ya está entero
   a los 240ms, y lo que se demora es lo que se lee después. */
@media (prefers-reduced-motion: no-preference) {
  .news__panel:not([hidden]) {
    animation: mov-entra-funde var(--dur-pantalla) ease-out both,
               news-entra-corre var(--dur-pantalla) var(--ease-entrada) both;
  }
  .news__panel:not([hidden]) > * {
    animation: mov-entra-funde var(--dur-pantalla) ease-out backwards;
  }
  .news__panel:not([hidden]) > :nth-child(2) { animation-delay: 50ms; }
  .news__panel:not([hidden]) > :nth-child(3) { animation-delay: 100ms; }
  .news__panel:not([hidden]) > :nth-child(n + 4) { animation-delay: 150ms; }
}
@keyframes news-entra-corre { from { transform: translateY(6px); } }

/* Sólo la portada tiene dos columnas: el resto ocupa el ancho entero porque un
   posteo con una columna de adorno al lado deja de parecer un posteo. */
.news__panel--diario { grid-template-columns: minmax(0, 1fr) auto; }

/* --------------------------------------------------------------------------
   FORMATO 1 · LA PORTADA
   -------------------------------------------------------------------------- */

/* La marca entra UNA vez y entra en horizontal: el sello en su color y la regla
   que va debajo, que es como se imprime una cabecera. Esto antes llevaba
   además un filete vertical de color por el borde izquierdo del panel y era
   una segunda marca diciendo lo mismo — con el sello ya en color, la barra
   lateral no informaba, decoraba. */
.cabecera {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  min-width: 0;
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid hsl(var(--marca) / 0.4);
}

/* El sello es lo único de la portada que va del color del medio, y va en
   grande: en un diario la marca pesa más que la volanta. */
.cabecera__sello {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
  color: hsl(var(--marca));
  white-space: nowrap;
}

.cabecera__seccion {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  white-space: nowrap;
}

.news__text { display: grid; gap: var(--sp-4); min-width: 0; }

/* El recorte de tabla que un diario imprime al costado de la nota. Ancho fijo:
   es una columna de imprenta y no un bloque que se estira con el texto. */
.recorte {
  width: 170px;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-row);
}

.recorte__fila {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: baseline;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.recorte__pos { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.recorte__club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recorte__pts { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.recorte__fila--mio { color: var(--tuyo); }
.recorte__fila--mio .recorte__club { font-weight: 700; }

/* El salto entre los de arriba y vos. Va punteado a propósito: una línea llena
   diría "acá termina la tabla" y lo que dice es "acá faltan renglones". */
.recorte__fila--corte {
  margin-top: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line);
}

/* --------------------------------------------------------------------------
   FORMATO 2 · EL POSTEO
   -------------------------------------------------------------------------- */

.xpost { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-5); }

/* Las siglas del medio en su color. Los logotipos reales no se dibujan —los de
   los clubes tampoco— y una pastilla con las iniciales es lo que hace una
   aplicación cuando no tiene la imagen. */
.xpost__avatar {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid hsl(var(--marca) / 0.45);
  background: hsl(var(--marca) / 0.16);
  color: hsl(var(--marca));
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.xpost__cuerpo { display: grid; gap: var(--sp-5); min-width: 0; }

.xpost__quien {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-sm);
}
.xpost__nombre { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.xpost__ok { flex: none; color: hsl(var(--marca)); }
.xpost__arroba {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.xpost__logo { flex: none; margin-left: auto; color: var(--text-secondary); }

/* El cuerpo del posteo va un punto más grande que la prosa del diario: en la
   red el texto ES la nota, no la bajada de un titular. */
.xpost__texto {
  max-width: 56ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-primary);
  text-wrap: pretty;
}
.xpost__texto strong { font-weight: 700; }

.xpost__hilo {
  display: grid;
  gap: var(--sp-4);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--line);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* La tarjeta de cifras que va enganchada al posteo. Tres como mucho: con
   cuatro deja de leerse de un vistazo, que es lo único que hace bien. */
.xpost__datos { display: flex; gap: var(--sp-4); }
.xpost__datos > div {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-row);
}
.xpost__datos dt {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.xpost__datos dd {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xpost__pie { font-size: var(--fs-sm); color: var(--text-muted); }

.xpost__barra {
  display: flex;
  gap: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.xpost__barra span { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   FORMATO 3 · LA PLACA
   -------------------------------------------------------------------------- */

/* El color del canal entra por el borde izquierdo y por el lavado de la banda,
   nunca como relleno macizo detrás de texto: de los doce países hay medios de
   marca clara y de marca oscura, y un relleno que funciona con uno deja el
   texto ilegible con el otro. */
.placa {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid hsl(var(--marca));
  border-radius: var(--r-md);
  background: var(--bg-row);
}

.placa__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: hsl(var(--marca) / 0.14);
  border-bottom: 1px solid hsl(var(--marca) / 0.28);
}
.placa__canal {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--marca));
}
.placa__rotulo {
  margin-left: auto;
  padding: 2px var(--sp-4);
  border-radius: var(--r-xs);
  background: var(--bg-raised);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

/* Titular a la izquierda y tanteador a la derecha, en la misma línea mientras
   entren. Envuelve solo —sin consulta de medios— porque este panel mide una
   cosa en la vista general y otra en la de Noticias, y las dos anchuras
   conviven en la misma pantalla: un corte por ancho de ventana acertaría en
   una y erraría en la otra. */
.placa__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-8);
  padding: var(--sp-6);
}

.placa__titulo {
  flex: 1 1 14ch;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.placa__marcador {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.placa__equipo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
}
.placa__equipo--der { text-align: left; }

/* Voz de marcador: el ancho comprimido y las cifras tabulares que usa el resto
   del juego para los números que se leen de lejos. */
.placa__goles {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.placa__goles i { font-style: normal; font-size: var(--fs-lg); color: var(--text-muted); }

.placa__pen { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }

/* LA MISMA PLACA, EN LA COLUMNA QUE NO ES SUYA
   --------------------------------------------------------------------------
   La placa nació para la pantalla de Noticias, donde tiene el ancho entero y
   una columna para ella sola. En la Vista general vive en una tarjeta de unos
   400px dentro de una columna con otras tres, y ahí sus medidas de origen —el
   titular a `fs-xl`, el tanteador a `fs-3xl` y `sp-6` de aire por todos lados—
   la llevan a 267px de alto: más de lo que esa columna puede darle nunca.

   Se compacta, y sólo acá: el titular baja un escalón y se corta a dos
   renglones, el tanteador baja dos, y el aire pasa de `sp-6` a `sp-5`. Son
   204px en la columna angosta y 171 cuando entra en un renglón. Nada
   desaparece — el que quiera la noticia entera tiene «Ver todas» al lado, que
   es la razón por la que ésta es la tarjeta que cede.

   El corte del titular a dos renglones es lo único que puede esconder texto, y
   por eso va con `-webkit-line-clamp` y no con un alto fijo: un titular de dos
   renglones se ve entero y uno de tres se corta con puntos suspensivos, que es
   una señal de que hay más. Un alto fijo lo cortaría a la mitad de una letra. */
.home[data-vista='general'] .placa__cabecera { padding: var(--sp-3) var(--sp-5); }
.home[data-vista='general'] .placa__cuerpo { padding: var(--sp-5); gap: var(--sp-4) var(--sp-5); }
.home[data-vista='general'] .placa__titulo {
  font-size: var(--fs-lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home[data-vista='general'] .placa__goles { font-size: var(--fs-2xl); }
.home[data-vista='general'] .placa__equipo { font-size: var(--fs-sm); }

.placa__zocalo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.placa__zocalo span + span::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ink-600);
  vertical-align: middle;
}

/* Registro normal: el ancho comprimido es voz de marcador (cifras, nombres,
   reloj) y esto es un titular de prosa. */
.news__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.news__body {
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}
.news__body + .news__body { color: var(--text-muted); }

/* La marca de la competición es ornamento, y el acento no decora nunca: va en
   tono neutro. De cal sería el bloque de acento más grande de la pantalla, y
   no dice absolutamente nada.

   CRECIÓ DE 84 A 168 Y SE SALE POR EL BORDE. En la fuente la tarjeta de
   noticias no es un bloque de texto: tiene un dibujo grande a la derecha que se
   corta contra el canto de la placa, y es lo que la hace parecer una portada en
   vez de un párrafo. A 84px y centrada en su columna, la nuestra era una
   viñeta. Al doble y sangrada contra el borde hace el mismo trabajo con la
   misma materia —el escudo del torneo que ya estaba— y sin inventar un arte que
   este juego no tiene.

   Va más apagada que antes justamente porque ahora es grande: al 100 % de
   `--ink-700` un dibujo de 168px compite con el titular, que es lo que se vino
   a leer. Y `overflow: hidden` en el panel es lo que la corta; sin él la
   tarjeta se ensanchaba y empujaba a la columna del medio. */
.news__mark {
  width: 168px; height: 168px;
  margin: calc(var(--sp-6) * -1) calc(var(--sp-7) * -1) calc(var(--sp-6) * -1) 0;
  /* Un paso por debajo del que tenía a 84px, no dos. A `--ink-800` —tres
     puntos de luminancia sobre el panel— el dibujo grande desaparecía y la
     tarjeta volvía a ser un párrafo; a `--ink-700`, que era el de la viñeta,
     168px de escudo compiten con el titular. `--ink-750` es el punto donde se
     ve que hay un dibujo y no se lee antes que la noticia. */
  color: var(--ink-750);
  flex: none;
}
.news__panel--diario { overflow: hidden; }

@media (max-width: 1400px) {
  /* Con la columna del medio estrecha, el dibujo se lleva el ancho del titular:
     vuelve a la viñeta antes que dejar «Arranca la temporada para Platense» en
     cuatro renglones. */
  .news__mark { width: 96px; height: 96px; margin: 0; }
}

.news__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.news__meta span + span::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ink-600);
  vertical-align: middle;
}

.news__pager { grid-column: 1 / -1; display: flex; gap: var(--sp-3); }

/* Cuando el enlace ES la cabecera sube de tamaño y de peso: pasa de eco al pie
   de un rótulo a ser lo único que encabeza la tarjeta. Sigue sin ser magenta —
   es un enlace, no el nombre de una sección. */
.col__more--titular {
  font-size: var(--fs-sm);
  font-weight: 600;
  /* EN BLANCO Y NO EN GRIS, con el globo en color. Cuando el enlace ES la
     cabecera de la tarjeta deja de ser un eco al pie de un rótulo y pasa a ser
     lo único que la encabeza: en la fuente se lee con el mismo peso visual que
     un rótulo magenta, no como una nota. Leído a 1:1 del video. */
  color: var(--text-primary);
}
.col__more--titular:hover { color: var(--text-primary); }
.col__more--titular:hover .i:first-child { color: var(--accent-strong); }
.col__more--titular .i:first-child { color: var(--accent); }

/* LA BARRA DEL PAGINADOR, no el puntito. En la captura de FM26 son tramos
   largos que ocupan el ancho entero de la tarjeta —unos 85 px cada uno— y no
   una hilera de guiones cortos arrinconados a la izquierda. La diferencia no es
   de gusto: un tramo largo se puede pulsar sin apuntar, y sobre todo hace de
   REGLA — se ve de un vistazo cuántas noticias hay y en cuál estás, que es lo
   que un carrusel que pasa solo tiene que decir.

   Se reparten el ancho con `flex: 1` en vez de medir fijo, así que cuatro
   noticias dan cuatro tramos anchos y nueve dan nueve angostos, sin que nadie
   elija un número. */
.news__dot {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-700);
  transition: background var(--dur-fast) var(--ease);
}
.news__dot:hover { background: var(--ink-600); }
.news__dot[aria-selected='true'] { background: var(--accent); }

/* El punto de la nota que se está leyendo CUENTA lo que le queda. Se llena en
   los mismos siete segundos que tarda el carrusel en pasar, así que el cambio
   deja de ser una sorpresa y se ve venir; y como la rotación se detiene al
   acercar el mouse o al entrar con el teclado, la barra se detiene con ella y
   dice que el titular ya no se va a ir solo.

   El plazo lo escribe `inicio.js` en `--rotacion-titulares`: la cifra vive en
   el reloj que rota y no escrita dos veces, que es como se desincronizan una
   animación y su temporizador. Se anima la escala y no el ancho: lo mismo a la
   vista, sin pedirle al navegador que rehaga la retícula sesenta veces por
   segundo durante siete segundos. */
@media (prefers-reduced-motion: no-preference) {
  .news__dot[aria-selected='true'] {
    position: relative;
    overflow: hidden;
    background: var(--ink-700);
  }
  .news__dot[aria-selected='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accent);
    transform-origin: left;
    animation: news-cuenta var(--rotacion-titulares, 7000ms) linear both;
  }
  .news:hover .news__dot[aria-selected='true']::after,
  .news:focus-within .news__dot[aria-selected='true']::after,
  .portada__apertura:hover .news__dot[aria-selected='true']::after,
  .portada__apertura:focus-within .news__dot[aria-selected='true']::after {
    animation-play-state: paused;
  }
}
@keyframes news-cuenta { from { transform: scaleX(0); } }

/* --------------------------------------------------------------------------
   PRÓXIMO RIVAL Y PARTIDO DE HOY
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CUPOS INTERNACIONALES
   --------------------------------------------------------------------------
   Seis filas de 22px, el mismo ritmo que la fila de atributo y la de
   clasificación. La vía va a la derecha y apagada: es el porqué, y el porqué
   se lee después del quién.
   -------------------------------------------------------------------------- */

/* La zona de un club en la tabla de la Nacional. Las dos zonas van apiladas en
   un solo cuadro, así que la letra tiene que viajar con el nombre — sin ella,
   dos primeros puestos seguidos parecen un error. */
.team__zona {
  flex: 0 0 auto;
  margin-left: var(--sp-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cupos { display: grid; gap: 0; }

.cupo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 22px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--line-hairline);
}

.cupo:last-child { border-bottom: 0; }

.cupo__n {
  width: 14px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cupo__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cupo__via { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-muted); }

/* Una plaza sin dueño todavía: se ve el hueco, no se rellena con el siguiente
   de la tabla. */
.cupo--vacante .cupo__name { color: var(--text-disabled); font-style: italic; }

/* La tarjeta del rival tiene dos pisos desde que trae forma y comparación:
   arriba QUIÉN es, abajo CÓMO viene. Separados por un hairline, que es lo que
   este sistema usa para dividir dentro de una placa. */
.rival { display: grid; gap: var(--sp-5); }
.rival__top { display: flex; align-items: center; gap: var(--sp-5); }
.rival__id { display: grid; gap: 1px; min-width: 0; }
.rival__name { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.rival__note { font-size: var(--fs-xs); color: var(--text-muted); }

.rival__pie {
  display: flex;
  gap: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-hairline);
}
.rival__dato { display: grid; gap: var(--sp-3); align-content: start; }
.rival__nada { font-size: var(--fs-xs); color: var(--text-muted); }

/* El veredicto: palabra en su color y cifra al lado en gris. La cifra no se
   tiñe — repetir el color en las dos mitades de la misma frase no lo dice dos
   veces, lo dice más fuerte de lo que es. */
.rival__veredicto { font-size: var(--fs-sm); font-weight: 600; }
.rival__veredicto[data-band='good'] { color: var(--good); }
.rival__veredicto[data-band='ok']   { color: var(--text-secondary); }
.rival__veredicto[data-band='bad']  { color: var(--danger); }
.rival__veredicto em {
  margin-left: var(--sp-3);
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* LA FILA DE DOS TARJETAS. Es la única del portal, y por eso es una clase y no
   una regla de la columna: el resto de la columna del medio sigue siendo una
   pila. Las dos miden lo mismo —en la captura son 290 y 300 px— así que no hay
   una principal y una accesoria; son dos respuestas a la misma pregunta.

   `align-items: start` es lo que las deja de distinta altura sin estirarse: la
   del rival lleva dos pisos y la de partidos uno, y forzarlas a la misma altura
   dejaba media tarjeta vacía debajo del partido. */
.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

/* Por debajo de 1180 la columna del medio ya no tiene ancho para dos: la fila
   se deshace y vuelven a apilarse, que es lo que hacían antes. */
@media (max-width: 1180px) {
  .par { grid-template-columns: minmax(0, 1fr); }
}

/* Sin borde, sin fondo propio y sin radio: la placa que envuelve esto ya es
   la tarjeta de «Partidos». Una caja dentro de la caja sería el
   segundo marco para una sola cosa. */
.today { display: grid; gap: var(--sp-2); }
/* El enlace es el que lleva la retícula: así toda la línea es el destino y no
   hay un trozo del partido que no se pueda pulsar. */
/* CADA EQUIPO EN SU PASTILLA, y el resultado en la suya. Era una línea de
   texto plana con el horario en el medio, y en la fuente es otra cosa: dos
   bloques con superficie —escudo y nombre adentro— separados por una caja con
   la hora o el marcador. La diferencia no es decorativa: un partido son DOS
   sujetos enfrentados, y escritos al aire sobre la misma línea el ojo tiene
   que buscar dónde termina uno y empieza el otro. Con las pastillas, la
   estructura del dato se ve antes de leerlo. */
.today__link {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: 0;
  border-radius: var(--r-sm);
}
.today__team {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  height: 34px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-row);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* EL RECORTE VA SOBRE `.today__nombre` Y NO SOBRE `span`, y el selector viejo
   —`.today__team span`— no recortaba nada: `escudo()` devuelve un `<img>` y el
   nombre iba de texto pelado, así que dentro de la pastilla no había un solo
   `<span>` al que aplicárselo. Nadie lo vio porque hace falta un nombre largo
   para que se note, y entonces se nota mucho: «Gimnasia y Esgrima de Mendoza»
   ocupaba 65 px de alto dentro de una pastilla de 34 y los 31 que sobraban
   caían encima de la línea del clima. Ver el comentario de `inicio.js`. */
.today__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El de la derecha se lee de derecha a izquierda —nombre y después escudo—,
   que es como se enfrentan dos equipos en cualquier marcador del mundo. */
.today__team--right { flex-direction: row-reverse; }
.today__link:hover .today__team { background: var(--bg-active); border-color: var(--line); }

.today__time {
  display: grid;
  place-items: center;
  min-width: 62px;
  height: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--ink-950);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   CALENDARIO
   --------------------------------------------------------------------------
   La densidad se compra con iconos: a este tamaño "Entrenamiento de
   resistencia" no entra, pero un cono sí, y se reconoce sin leer. El texto
   completo aterriza en la línea de detalle de abajo, que sí es alcanzable.
   -------------------------------------------------------------------------- */

/* LO QUE ACOMPAÑA AL TÍTULO DEL CALENDARIO SON DOS COSAS, y por eso viajan
   juntas. `.panel__head` reparte con `space-between`: con el rango y el botón
   sueltos, tres hijos dejan el rango flotando en el medio de la cabecera, que
   no es donde vive ninguna medida del juego. Envueltos, la cabecera vuelve a
   tener dos lados.

   `align-self: center` por lo mismo que `.col__tools` de la bandeja, doce
   secciones más abajo: `.panel__head` alinea por `baseline`, que es lo correcto
   para un título y su eco de texto y manda media línea abajo a cualquier botón.

   Y el rango conserva su `nowrap`, que lo perdió al dejar de ser hijo directo
   de la cabecera: «16 ago – 29 ago» partido en dos renglones no es un rango. */
.cal__jefe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-4);
}

.panel__head .cal__jefe { align-self: center; }
.cal__jefe .label { white-space: nowrap; }

/* Y AL DOBLAR SE ALINEA A LA IZQUIERDA, que es la regla que `app.css` ya tiene
   escrita para el rótulo suelto de cualquier cabecera: en una línea el grupo
   termina en el borde derecho y ahí `flex-end` no tiene margen sobre el que
   actuar, pero cuando la cabecera dobla —a 860 el título se queda solo arriba—
   dejarlo a la derecha lee torcido debajo de un título alineado a la
   izquierda. El punto de corte es el mismo de esa regla, a propósito: dos
   cabeceras que doblan a anchos distintos son dos cabeceras distintas. */
@media (max-width: 860px) {
  .cal__jefe { justify-content: flex-start; }
}

/* Apagado cuando no hay temporada que simular: sin club, o con la
   post-temporada ya terminada. Es la misma disciplina que el «Hoy» del mes
   —un control que no significa nada enseña a no leer los que sí—. */
.cal__jefe .action:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.cal__jefe .action:disabled:hover { background: none; color: var(--text-disabled); }

/* EL CARTEL DE «SIMULANDO». Un salto largo son seis o diez segundos de bucle
   síncrono, y sin esto la pantalla se queda quieta después del clic — que no se
   lee como «está pensando» sino como «el botón no anduvo». Ver `correrElSalto()`
   en `inicio.js`: el bucle se parte en tramos y entre uno y otro esto se pinta.

   Sin botones a propósito: el salto no se puede cancelar a mitad —lo que ya se
   jugó, jugado está— y un botón que no cancela nada es peor que ninguno. */
.dialogo--espera { width: min(360px, calc(100vw - 2 * var(--sp-6))); }

.espera__eco {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.espera__barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-raised);
  overflow: hidden;
}

/* La transición es lo que convierte doce saltos de barra en un movimiento. Y
   dura menos que el tramo más corto medido (750 ms), o la barra iría siempre
   una medición atrás de lo que ya pasó. */
.espera__barra i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 200ms ease-out;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* La tira de quince días se estira hasta el pie de su tarjeta en vez de dejar
   un hueco muerto debajo: la cabecera de días mide lo suyo y las dos semanas
   se reparten lo que sobra. Son SIEMPRE dos filas —`quincena()` pide catorce
   días desde el lunes—, así que la retícula puede nombrarlas de a una.

   Estira, pero no se deja encoger. Es un ítem flexible dentro de una tarjeta
   que puede quedarse corta, y con `overflow: hidden` encima lo que sobraba se
   recortaba a media semana: el sábado con la mitad de su número y sus marcas
   cortadas al ras. Dos defensas, y las dos dicen lo mismo —dos filas enteras
   o ninguna—: el piso de la tira es su propio contenido, y el piso de cada
   fila es el día más cargado de esa semana y no un número fijo, porque un día
   con tres marcas mide más que uno con una. Que la ventana sea baja se
   resuelve apretando el aire (ver LA VENTANA BAJA), no partiendo un renglón. */
/* Y NO SE ESTIRA, QUE ES LO CONTRARIO DE LO QUE HACÍA. Tenía `flex: 1 1 auto`
   para no dejar un hueco muerto bajo la tira, y ese estirón le salía de la
   única tarjeta de la columna que puede achicarse por debajo de su contenido:
   la de titulares. O sea que el calendario se quedaba con TODO el sobrante y la
   noticia pagaba la cuenta — medido, y es peor cuanto más grande la pantalla:
   en una ventana de 1600x1000 el calendario llegaba a 333px y a la noticia le
   quedaban 211, con la placa cortada por la mitad. Con más pantalla, menos
   noticia.

   Ahora toma lo suyo —`min-content`, que son sus dos semanas enteras— y el
   sobrante queda para el que sí sabe qué hacer con él. El hueco muerto que el
   estirón evitaba no aparece: sin `flex-grow` la tarjeta mide lo que mide su
   contenido y es la tarjeta entera la que se acorta, no la tira dentro de una
   tarjeta alta. */
.home[data-vista='general'] .cal--quincena {
  flex: 0 0 auto;
  min-height: min-content;
  grid-template-rows: auto repeat(2, minmax(min-content, 1fr));
}

/* Y el piso de la tira sólo vale si la tarjeta que la contiene también lo
   tiene: `.tarjeta--grow` trae `min-height: 0` —está pensada para las que se
   encogen porque adentro llevan un scroller— y con ese cero la placa se
   achicaba por debajo de su contenido y la leyenda terminaba dibujada fuera
   del borde. El calendario no tiene scroller ni nada que recortar: mide lo que
   mide, y el hueco que falte lo cede la tarjeta de titulares. */
.home[data-vista='general'] .tarjeta[data-panel~='calendario'] { min-height: min-content; }

.cal__head {
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-900);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Es un <button>, no un <div>: tenía hover y todo su detalle vivía en un
   title, así que con teclado no se llegaba. Ahora abre la línea de detalle. */
.cal__day {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  /* 68 y no 58: el bloque del día de partido mide 20 y el número 20, y con los
     6px de aire de la celda los 58 dejaban al bloque tocando el borde de
     abajo. Es la misma cuenta que ya se había hecho para la retícula del mes,
     que mide 76 porque ahí el bloque lleva además el nombre del rival. */
  min-height: 68px;
  padding: var(--sp-3);
  border: 0;
  background: var(--bg-panel);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.cal__day:hover { background: var(--bg-hover); }
.cal__day:focus-visible { outline-offset: -2px; }
.cal__day[aria-pressed='true'] { background: var(--bg-active); }

/* Hoy es una selección, y la selección es uno de los tres usos del acento. */
.cal__day--hoy { background: var(--bg-selected); }
.cal__day--hoy .cal__num { color: var(--accent-texto); font-weight: 700; }

.cal__num { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }

/* EL BLOQUE DEL DÍA DE PARTIDO. Es la única cosa de la retícula que se dibuja
   con superficie en vez de con un glifo, y por eso el día del compromiso se
   encuentra sin leer la tira. Va en el lavado del acento y no en relleno pleno:
   catorce celdas y una de ellas con un bloque violeta sólido se leería como la
   celda SELECCIONADA, que es lo que marca `--hoy`, y las dos coinciden la mitad
   de las semanas. El lavado dice «acá pasa algo» sin decir «acá estás».

   La letra es L o V y no un avión: se lee en el mismo golpe de vista que el
   escudo y ocupa lo mismo, mientras que un icono al lado de otro icono obliga a
   distinguir dos dibujos de 12px. El avión sigue siendo el glifo del viaje en
   la retícula del mes, donde hay sitio para el nombre y para él. */
.cal__chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-3) 2px 2px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  font-size: var(--fs-2xs);
  font-weight: 700;
  /* El violeta que escribe: en `--accent-strong` daba 3,84:1 sobre la celda de
     hoy, que ya está teñida de violeta. */
  color: var(--accent-texto);
  line-height: 1;
}
/* De visitante, el bloque se apaga: la diferencia entre jugar en tu cancha y
   jugar afuera es la primera cosa que un DT mira en una quincena. */
.cal__chip[data-sede='V'] { background: var(--bg-raised); color: var(--text-secondary); }
/* Sobre la celda de hoy —que ya está teñida de violeta— el bloque sube un paso
   o desaparece dentro de su propio fondo. PERO SÓLO EL DE LOCAL: el de
   visitante subido al lavado del acento se veía idéntico a uno de local, y el
   día que se mira más de la quincena es justamente hoy. La sede es un dato del
   partido y no puede depender de en qué celda cae. */
.cal__day--hoy .cal__chip { background: var(--accent-wash-hi); }
.cal__day--hoy .cal__chip[data-sede='V'] { background: var(--ink-800); }

.cal__marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--icon-quiet); }
.cal__marks .i { width: 12px; height: 12px; }
/* El día de partido se marca con BRILLO, no con acento: misma regla que la
   rampa de atributos, y el acento queda libre para sus tres trabajos. */
.cal__mark--partido { color: var(--text-primary); }
.cal__mark--medico { color: var(--warn); }

/* Detalle del día elegido. La retícula no tiene sitio para el texto y un
   title no es alcanzable con teclado: el texto completo aterriza acá. */
.cal__detail {
  min-height: 20px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.cal__detail strong { color: var(--text-primary); font-weight: 600; }
.cal__detail em { font-style: normal; color: var(--text-muted); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.cal-legend li { display: flex; align-items: center; gap: var(--sp-3); }
.cal-legend .i { width: 12px; height: 12px; color: var(--icon-quiet); }
/* Un amistoso ES un partido, así que lleva la misma pelota. Lo que lo separa
   es el brillo: el oficial va en Primario y el amistoso en Apagado, porque no
   cuenta para ninguna tabla. Dos glifos distintos habrían dicho que son dos
   cosas distintas, y no lo son. */
.cal__mark--amistoso { color: var(--text-muted); }
.cal-legend li[data-acto='amistoso'] .i { color: var(--text-muted); }

/* ==========================================================================
   LA AGENDA
   --------------------------------------------------------------------------
   La vista Calendario a lo ancho. El panel es el mismo que el de la tira de
   quince días; lo que cambia es el corte. Tres piezas, de arriba abajo y de
   izquierda a derecha en el orden en que se preguntan:

     LA BANDA    dónde estoy en el año, y cuándo puedo comprar.
     EL MES      qué me viene, día por día.
     LA LISTA    todo lo que hay, sin recortar y sin tener que pasar meses.

   La banda arriba y no al costado porque es la que sitúa a las otras dos: sin
   ella, un 9 de enero es un número.
   ========================================================================== */

.solo-agenda { display: none; }
.home[data-vista='calendario'] .solo-agenda { display: grid; }
.home[data-vista='calendario'] .solo-vistazo,
.home[data-vista='calendario'] .cal--quincena { display: none; }

/* --------------------------------------------------------------------------
   LA BANDA DEL AÑO
   --------------------------------------------------------------------------
   Cuarenta semanas en una regla. Los tramos del campeonato abajo —cada uno
   proporcional a lo que dura, que es lo único que hace legible que los
   playoffs son cuatro semanas y el Apertura dieciséis— y las ventanas de
   mercado en su propia pista encima, porque se SUPERPONEN a los torneos y
   pintarlas en la misma fila obligaría a partir el Apertura en tres.
   -------------------------------------------------------------------------- */

.anio { gap: var(--sp-2); }

.anio__pista {
  position: relative;
  display: flex;
  gap: 1px;
  height: 22px;
  background: var(--line-hairline);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.anio__tramo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: var(--sp-2);
  background: var(--bg-row);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La post-temporada es del mismo año pero no es lo mismo: se hunde un tono en
   vez de cambiar de color. El acento tiene sus tres trabajos y este no es uno. */
.anio__tramo[data-tipo='playoff'] { background: var(--ink-800); color: var(--text-disabled); }
/* En el tramo que se está jugando, el nombre se lee. */
.anio__tramo[data-ahora='true'] { background: var(--bg-selected); color: var(--text-primary); }

/* La pista de las ventanas: fina, y sólo con barras donde hay mercado. */
.anio__ventanas {
  position: relative;
  height: 12px;
  border-radius: var(--r-hair);
  background: var(--line-hairline);
}

/* Ámbar y no acento: una ventana de mercado no es algo que elegiste ni algo
   que se pulsa, es un plazo. Es el mismo trabajo que hace el ámbar en la marca
   de revisión médica del calendario — «esto tiene fecha». */
.anio__ventana {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--sp-3);
  border-radius: var(--r-hair);
  background: hsl(40 90% 52% / 0.22);
  box-shadow: inset 0 0 0 1px hsl(40 90% 52% / 0.42);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--amber-300);
  white-space: nowrap;
  overflow: hidden;
}
.anio__ventana[data-pasada='true'] {
  background: hsl(40 90% 52% / 0.08);
  box-shadow: inset 0 0 0 1px hsl(40 90% 52% / 0.18);
  color: var(--text-disabled);
}

/* Dónde estás. Una línea de acento de 2px cruzando las dos pistas: es una
   selección, que es uno de los tres usos permitidos. */
.anio__hoy {
  position: absolute;
  inset-block: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--accent-strong);
  border-radius: var(--r-hair);
  pointer-events: none;
}

/* EL PIE ES UNA FILA DE DATOS, NO UN RENGLÓN DE FRASES.
   --------------------------------------------------------------------------
   Decía «Semana 1 de 44 · Mercado de verano abierto · cierra en 6 fechas ·
   Amistosos: 0 de 8 · En la caja: 10,53 M · Pretemporada sin armar»: seis
   hechos de cinco temas distintos, con la misma letra y el mismo peso, y el
   único modo de encontrar uno era leerlos todos. Los puntos separadores no
   ayudaban: separaban tanto los hechos entre sí como las partes de un mismo
   hecho —«abierto · cierra en 6 fechas» es uno solo— así que el renglón tenía
   cinco fronteras falsas.

   Ahora son cinco bloques de `.dato`, la primitiva que el juego ya usa para
   una fila de cifras: EL VALOR ARRIBA Y EL RÓTULO DEBAJO, que es la Regla de
   la Etiqueta —una etiqueta chica encima de un texto grande es un antetítulo,
   y un antetítulo es ruido— y está resuelta con `order` en `app.css`.

   La frontera entre bloques la dibuja una línea vertical y no un punto: un
   separador que ocupa el alto de los dos renglones dice «acá termina un dato»
   sin poder confundirse con la puntuación de adentro. */
.anio__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3) 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.anio__pie .dato {
  display: grid;
  align-content: start;
  gap: 1px;
  padding-inline: var(--sp-5);
  border-left: 1px solid var(--line-hairline);
}
/* El primero arranca en el borde de la tarjeta, como el resto de la banda: una
   línea a la izquierda del primer bloque lo separaría de nada. */
.anio__pie .dato:first-child { padding-left: 0; border-left: 0; }

.anio__pie .dato__valor {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Lo que matiza al valor —«de 44», «· cierra en 6 fechas»— va en el mismo
   cuerpo y en Apagado: es la diferencia entre la palabra que se busca y la que
   la explica, y hacerla más chica además la volvería un tercer tamaño de letra
   en un bloque que ya tiene dos. */
.anio__pie .dato__valor small { font-size: inherit; font-weight: 500; color: var(--text-muted); }
.anio__pie .dato__valor strong { font-weight: inherit; }

/* --------------------------------------------------------------------------
   EL CUERPO: MES A LA IZQUIERDA, TODO LO DEMÁS A LA DERECHA
   -------------------------------------------------------------------------- */

.agenda {
  /* 1,62 y no 1,45. El reparto se movió el día que la retícula del mes dejó de
     dibujar glifos y pasó a escribir el nombre de cada sesión: con 1,45 la
     celda medía 88px de los que la pastilla gastaba 32 en icono y aire, y
     «Descanso» —la palabra que más veces aparece en un mes— no entraba por dos
     píxeles. La lista de la derecha cede treinta y uno y se queda en 370, muy
     por encima del piso de 300 que ya tenía declarado. */
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.85fr);
  gap: var(--sp-6);
  align-items: start;
  min-height: 0;
}

.agenda__mes { display: grid; gap: var(--sp-4); min-width: 0; }

.mes__head { display: flex; align-items: center; gap: var(--sp-3); }
.mes__titulo {
  min-width: 11ch;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   LA RETÍCULA DEL MES, EN LA FORMA DE FM26
   --------------------------------------------------------------------------
   Ocho columnas y no siete: la primera es el carril de las semanas, que en la
   fuente lleva el estilo de entrenamiento de la fila y acá lleva el número de
   semana de la temporada y qué se juega esa semana.

   Es `auto` y no un ancho fijo porque su contenido es texto —«Fecha 12»,
   «Playoffs»— y un carril medido en píxeles o corta el rótulo o deja aire; los
   siete días se reparten lo que queda, que es lo que ya hacían.
   -------------------------------------------------------------------------- */

.calendar--mes {
  grid-template-columns: 62px repeat(7, minmax(0, 1fr));
  /* LA FILA DE LUN…DOM MIDE LO SUYO Y NO LO DE UN DÍA. `grid-auto-rows` vale
     para TODAS las filas implícitas, y la cabecera es una de ellas: llevaba los
     mismos 64px que un martes con dos turnos, o sea cuarenta y dos de aire
     entre los rótulos y el primer día. Cuarenta y dos por retícula, en la
     pantalla que ya llega más justa de alto del portal — y estaban ahí desde
     que la retícula del mes existe, escondidos en un valor que nadie leyó como
     «esto también le toca a la cabecera».

     Se arregla nombrando la primera fila: `auto` es su contenido, y las seis
     semanas siguen saliendo de `grid-auto-rows`. */
  grid-template-rows: auto;
  grid-auto-rows: minmax(64px, auto);
}

/* El hueco de la cabecera sobre el carril: la fila de LUN…DOM tiene ocho
   casillas y la primera no nombra ningún día. */
.cal__head--sem { padding: 0; }

/* EL CARRIL. Va en la misma superficie que la cabecera de días y no en la del
   día, que es lo que lo saca de la retícula sin dibujarle un borde: se lee como
   margen del calendario y no como una octava columna de celdas. */
.cal__sem {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  padding: var(--sp-2);
  background: var(--ink-900);
  text-align: center;
}
.cal__sem b {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
/* Las semanas sin número —el receso y las cuatro fechas FIFA, que son semanas
   que el torneo no tiene— quedan con el punto, que ocupa el mismo sitio: sin
   él, el rótulo de «Receso» sube y las seis filas dejan de alinear sus rótulos
   en la misma vertical. */
.cal__sem--muda { color: var(--text-disabled); }
/* EL RÓTULO NO VA EN VERSALITAS, que es lo que este sistema hace con toda
   etiqueta micro. Acá no entra: «RECESO» son cincuenta píxeles en redonda y
   sesenta en versalitas con su tracking, y el carril mide sesenta y dos —o le
   robaba el ancho a los siete días, que es de donde no se puede sacar. La
   palabra más larga que puede caer acá es «Reducido». */
.cal__sem small {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
/* La semana en la que estás, con la misma marca que el día de hoy y por el
   mismo motivo: es una selección, y la selección es uno de los tres usos del
   acento. */
.cal__sem[data-ahora='true'] { background: var(--bg-selected); }
.cal__sem[data-ahora='true'] b { color: var(--accent-texto); }
.cal__sem[data-ahora='true'] small { color: var(--text-secondary); }

.calendar--mes .cal__day {
  min-height: 64px;
  gap: 3px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
/* El número del día pierde su interlínea de párrafo: la línea de 19,5px que
   trae de fábrica son cuatro píxeles y medio por fila, y seis filas de eso
   empujan al panel del día fuera de una ventana de 800. */
.calendar--mes .cal__num { font-size: var(--fs-sm); line-height: 1.2; }

/* Los días del mes de al lado se ven —una semana partida al medio es peor que
   un día apagado— pero no compiten. */
.cal__day--fuera { background: var(--ink-900); }
.cal__day--fuera .cal__num { color: var(--text-disabled); }
.cal__day--fuera .cal__acto,
.cal__day--fuera .cal__pase { opacity: 0.45; }

/* Un día dentro de una ventana de mercado se levanta un escalón. Sin color:
   el ámbar de la banda ya nombra la ventana, y repetirlo en treinta celdas
   convertiría un plazo en un fondo.

   EL BORDE ÁMBAR SE FUE DE ACÁ. El primer y el último día de la ventana
   llevaban un `inset` de 3px que pretendía decir «acá abre» y «acá cierra».
   Era la franja de color pegada al costado de una celda, que es justo lo que
   este sistema ya había rechazado en la tabla de clasificación: ahí la franja
   de zona es una CELDA de 3px con su leyenda, porque un dato se marca en el
   contenido y no pintándole un borde al contenedor.

   Y no hacía falta. El límite ya está dicho cuatro veces: el escalón de fondo
   cambia entre dos celdas contiguas —ESE es el borde—, la cabecera del mes
   trae la fecha de cierre, la agenda tiene sus filas de «Abre» y «Cierra», y
   la banda del año lleva la barra ámbar. Una marca que hay que buscar no está
   informando; está decorando. */
.cal__day--mercado { background: var(--bg-row); }
.cal__day--mercado.cal__day--fuera { background: var(--ink-850); }

/* --------------------------------------------------------------------------
   LA PASTILLA DEL TURNO
   --------------------------------------------------------------------------
   Un renglón por turno, con el icono y el nombre de la sesión. Lo que dice el
   brillo es la CARGA —ver `pesoDelActo()` en `inicio.js`— y no la familia: el
   acento tiene tres trabajos en este sistema y colorear un calendario no es
   ninguno de los tres.

   Alto de 16px y `line-height` de 1: dos pastillas, el número del día y el aire
   de la celda son exactamente los 72px de la fila, y ese número es el que deja
   las seis semanas de diciembre dentro de la pantalla sin scroller.
   -------------------------------------------------------------------------- */

.cal__acto {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--r-hair);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
}
.cal__acto span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal__acto .i { width: 10px; height: 10px; flex: none; color: var(--icon-quiet); }

/* Los tres escalones de carga. El de arriba es el único con superficie: en una
   semana de siete renglones lo que se busca con el ojo es dónde están los dos
   días duros, y una superficie se encuentra sin leer. */
.cal__acto[data-peso='alto'] {
  background: var(--bg-raised);
  color: var(--text-primary);
}
.cal__acto[data-peso='alto'] .i { color: var(--text-secondary); }
.cal__acto[data-peso='medio'] { color: var(--text-secondary); }
.cal__acto[data-peso='bajo'] { color: var(--text-disabled); }
.cal__acto[data-peso='bajo'] .i { color: var(--text-disabled); }

/* --------------------------------------------------------------------------
   EL BLOQUE DEL PARTIDO
   --------------------------------------------------------------------------
   La única cosa de la retícula con superficie propia, y por eso el día de
   compromiso se encuentra sin leer el mes entero. En el mismo renglón que
   ocupa una pastilla de entrenamiento entran la marca de la competición, el
   escudo del rival, su nombre y de qué lado se juega —o el marcador, cuando ya
   se jugó—, que es la forma que tiene en la captura de FM26.

   Va en el lavado del acento y no en relleno pleno, que es la misma decisión
   que ya estaba tomada para el bloque de la tira de quince días: una celda con
   un violeta sólido se leería como la celda SELECCIONADA.
   -------------------------------------------------------------------------- */

.cal__pase {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  height: 19px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}
/* De visitante el bloque se apaga: la diferencia entre jugar en tu cancha y
   jugar afuera es la primera cosa que un DT mira en un mes. La cancha neutral
   va con el de visitante porque tampoco es tu casa. */
.cal__pase[data-sede='V'],
.cal__pase[data-sede='N'] { background: var(--bg-raised); color: var(--text-secondary); }

.cal__pase-rival {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal__pase .crest { width: 12px; height: 14px; flex: none; --halo: 0.25px; }
/* La letra de la sede, al fondo de la casilla. `margin-left: auto` y no
   `justify-content: space-between`: con el nombre del rival encogiéndose, el
   reparto por espacio le regala al nombre el sitio que no tiene. */
.cal__pase-sede { flex: none; margin-left: auto; color: var(--text-muted); }
.cal__pase[data-sede='L'] .cal__pase-sede { color: var(--accent-texto); }

/* Y LA LETRA SE VA CUANDO LA COLUMNA SE ESTRECHA. En una ventana de 1280 la
   celda mide 93px de los que el bloque gasta 36 en el escudo y el aire: al
   nombre del rival le quedaban cuarenta y cinco, o sea siete letras.

   Paga la letra porque el fondo del bloque YA dice si se juega en casa —lavado
   del acento contra superficie levantada— así que es el único dato del renglón
   que está escrito dos veces en el mismo renglón. Lo que se pierde es la
   diferencia entre visitante y cancha neutral, y eso lo contestan el panel del
   día de abajo y la lista de la derecha, las dos a un golpe de vista.

   La consulta es por el ancho de la COLUMNA DEL MES y no de la ventana, igual
   que en la programación y en la clasificación: lo que decide si el nombre
   entra es el sitio que tiene la celda, y ese sitio cambia con el ancho de la
   ventana pero también con el de la lista de al lado. */
.agenda__mes { container: mes / inline-size; }

@container mes (max-width: 800px) {
  .cal__pase-sede { display: none; }
}

/* Sobre la celda de hoy —que ya está teñida de violeta— el bloque de local
   sube un paso o desaparece dentro de su propio fondo. El de visitante NO
   sube: subido al lavado del acento se vería idéntico a uno de local, y el día
   que más se mira del mes es justamente hoy. */
.cal__day--hoy .cal__pase { background: var(--accent-wash-hi); }
.cal__day--hoy .cal__pase[data-sede='V'],
.cal__day--hoy .cal__pase[data-sede='N'] { background: var(--ink-800); }

.cal__day--libre .cal__acto { color: var(--text-disabled); }

/* El marcador de un día jugado, en la celda. Reusa la banda de la tabla de
   programación: verde, gris o arcilla según de qué lado quedó. */
.cal__res {
  flex: none;
  margin-left: auto;
  padding: 0 var(--sp-2);
  border-radius: var(--r-hair);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cal__res[data-band='good'] { background: var(--tint-good); color: var(--verde-200); }
.cal__res[data-band='bad']  { background: var(--tint-bad);  color: var(--clay-300); }
.cal__res[data-band='ok']   { background: var(--bg-raised); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   EL DÍA ELEGIDO
   --------------------------------------------------------------------------
   Debajo del mes y no en un diálogo: elegir un día tiene que poder hacerse
   quince veces seguidas mientras se busca un hueco, y quince diálogos que se
   abren y se cierran son quince interrupciones.
   -------------------------------------------------------------------------- */

.dia {
  display: grid;
  gap: var(--sp-3);
  min-height: 76px;
  align-content: start;
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
}
.dia__titulo { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.dia__linea { font-size: var(--fs-sm); color: var(--text-secondary); }
.dia__linea strong { color: var(--text-primary); font-weight: 600; }
.dia__nota { font-size: var(--fs-xs); color: var(--text-muted); }
.dia__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   TODOS LOS COMPROMISOS
   --------------------------------------------------------------------------
   La lista larga que el juego no tenía. La tira de Programación muestra seis
   partidos alrededor de hoy y la vista de temporada completa, sólo partidos.
   Acá entra TODO lo que le pasa al club en el año, hitos incluidos, porque el
   cierre del mercado es un compromiso tanto como un sábado.
   -------------------------------------------------------------------------- */

.agenda__lista { display: grid; gap: var(--sp-4); min-width: 0; }
/* Y contenedor propio, igual que el mes: las dos columnas crecen a ritmos
   distintos —1,62 contra 0,85— y lo que decide si un renglón puede permitirse
   una letra más grande es el ancho de SU columna. */
.agenda__lista { container: lista / inline-size; }

.agenda__scroll {
  display: grid;
  align-content: start;
  /* Medido contra la columna de la izquierda: un mes de seis semanas más su
     cabecera y el panel del día. La lista termina donde termina el mes, que es
     lo que hace que la vista entera quepa sin scroll de página. */
  max-height: 470px;
  overflow-y: auto;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
}

/* La cabecera de mes es sticky dentro del scroller: en una lista de sesenta
   filas, perder el mes es perder la fecha. Misma regla que la bandeja. */
.ag__mes {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ag {
  display: grid;
  /* La columna del medio son 20px y no 16: es la del escudo del rival y la del
     logo de la competición, o sea las dos cosas de este renglón que se
     reconocen sin leer. A 16 el logo de una liga es una mancha; a 20 se lee, y
     el renglón mide lo mismo —cincuenta— porque quien manda en su alto son las
     dos líneas de texto de al lado y no el icono. */
  grid-template-columns: 52px 20px minmax(0, 1fr) auto;
  /* LOS TRES DE LOS COSTADOS SE ALINEAN CON EL RENGLÓN DEL NOMBRE, no con el
     centro de la fila. La columna del medio lleva DOS renglones —el nombre y
     el pie— y las otras tres uno solo: centrados en la fila, el logo de la
     competición caía entre las dos líneas, unos cuatro píxeles por debajo del
     escudo del rival que tiene al lado. Con el logo en 28 eso deja de leerse
     como un matiz y se lee como un renglón torcido. La fecha y la hora, igual.

     `--ag-linea` es el alto del renglón del nombre —lo manda el escudo, que es
     más alto que la letra— y los tres se centran DENTRO de esa altura: el eje
     del logo, el del escudo, el de la fecha y el de la hora pasan a ser uno
     solo, y el pie cuelga debajo sin arrastrar a nadie. */
  --ag-linea: 20px;
  align-items: start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--line-hairline);
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.ag:last-child { border-bottom: 0; }
.ag:hover { background: var(--bg-hover); }
.ag:focus-visible { outline-offset: -2px; }
.ag[aria-current='true'] { background: var(--bg-selected); }

.ag__dia { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ag[aria-current='true'] .ag__dia { color: var(--accent-strong); font-weight: 700; }
.ag__dia,
.ag__marca,
.ag__nombre,
.ag__saldo,
.ag > .kickoff,
.ag > .rating { display: flex; align-items: center; min-height: var(--ag-linea); }
.ag__marca { color: var(--icon-quiet); }
/* El icono y la marca de liga crecen JUNTOS: comparten columna, y dejar el
   icono en 14 con el logo en 16 desalinea los dos renglones que alternan. */
.ag__marca .i, .ag__marca .logo-liga, .ag__marca img { width: 20px; height: 20px; object-fit: contain; }

.ag__que { display: grid; gap: 1px; min-width: 0; }
.ag__nombre {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.ag__nombre span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag__nombre .crest { width: 13px; height: 15px; flex: none; --halo: 0.25px; }
.ag__pie { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Un hito no es un partido y no puede parecerlo: sin escudo, con el nombre en
   Secundario y no en Primario. */
.ag[data-clase='hito'] .ag__nombre { font-weight: 500; color: var(--text-secondary); }
.ag[data-clase='libre'] .ag__nombre { font-weight: 500; color: var(--text-disabled); }

.ag__saldo { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ag__saldo[data-signo='mas'] { color: var(--good); }
.ag__saldo[data-signo='menos'] { color: var(--danger); }

/* --------------------------------------------------------------------------
   EL DIÁLOGO DEL AMISTOSO
   --------------------------------------------------------------------------
   Tres decisiones en una pantalla, y las tres tienen que verse a la vez: el
   rival cambia lo que piden, la sede cambia quién paga, y el monto cambia si
   aceptan. Repartirlas en tres pasos habría escondido justamente la relación
   que hace que esto sea una negociación y no un formulario.
   -------------------------------------------------------------------------- */

/* El diálogo del sistema mide 420px, que es lo correcto para una pregunta de
   sí o no. Este no es una pregunta: son tres mandos y un resumen que se mueve,
   y a 420px las tres sedes se pisan. Se ensancha con una variante y no
   tocando `.dialogo`, para que la caja de confirmar siga midiendo lo que mide. */
.dialogo--trato { width: min(680px, calc(100vw - 2 * var(--sp-6))); }

.trato { display: grid; gap: var(--sp-5); }
.trato__campo { display: grid; gap: var(--sp-3); }
.trato__campo > .label { color: var(--label-color); }

.trato select,
.trato input[type='number'] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-md);
}
.trato select:hover, .trato input[type='number']:hover { border-color: var(--line-strong); }

.trato__sedes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.trato__sede {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  text-align: left;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.trato__sede:hover { border-color: var(--line-strong); }
.trato__sede[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--text-primary);
}
.trato__sede strong { font-size: var(--fs-md); font-weight: 600; }
.trato__sede small { font-size: var(--fs-2xs); color: var(--text-muted); }

/* El resumen del trato. Es lo único de la pantalla que se mueve solo cuando
   tocás cualquiera de los tres mandos, y por eso vive aparte y con borde:
   es el efecto, no un cuarto mando. */
.trato__saldo {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-row);
  border-radius: var(--r-xs);
}
.trato__cifra { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.trato__cifra strong { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.trato__cifra strong[data-signo='mas'] { color: var(--good); }
.trato__cifra strong[data-signo='menos'] { color: var(--danger); }
.trato__desglose { font-size: var(--fs-xs); color: var(--text-muted); }

/* La respuesta del club, en palabras y no en un número. Ver `agenda.js`: la
   franja del medio existe para que el regateo sea una decisión y no una
   cuenta, y dibujar la frontera exacta la resolvería. */
.trato__animo { font-size: var(--fs-sm); font-weight: 600; }
.trato__animo[data-r='si'] { color: var(--good); }
.trato__animo[data-r='quiza'] { color: var(--warn); }
.trato__animo[data-r='no'] { color: var(--danger); }

/* --------------------------------------------------------------------------
   Y EN UNA VENTANA ALTA, LA VISTA SE ESTIRA HASTA EL BORDE
   --------------------------------------------------------------------------
   Toda la geometría de arriba está escrita contra el alto que FALTA: la celda
   con su piso de 64, la lista con su techo de 470, el reparto medido para que
   el panel del día entre en una ventana de 800. En una ventana de 1000 o de
   1400 esos mismos números dejan de ser un piso y pasan a ser un tope: la
   tarjeta ocupa el alto entero —`.tarjeta--grow`— y adentro la agenda medía
   536 de 828, o sea casi trescientos píxeles de nada debajo de una lista con
   sesenta filas que no entran y un mes de celdas apretadas.

   El sobrante se reparte entre las dos únicas cosas que saben qué hacer con
   él: las semanas del mes —las celdas crecen todas lo mismo, y su contenido
   sigue arriba— y el scroller de la lista, que termina donde termina el mes,
   que es lo que ya prometía el comentario de `.agenda__scroll`. El panel del
   día no crece: mide lo que dice.

   VA EN UNA MEDIA QUERY Y NO SUELTO, y el umbral no es de gusto: es
   exactamente cuándo el `body` tiene un alto definido. Por debajo de 1401 de
   ancho o de 891 de alto manda el documento (ver RESPUESTA A PANTALLA y LA
   VENTANA BAJA), y sin alto que repartir un `1fr` mide su contenido — o sea
   que la lista pasaría a medir sus 2.650px de sesenta filas y estiraría la
   página. Ahí siguen mandando los techos de siempre. */
@media (min-width: 1401px) and (min-height: 891px) {
  .home[data-vista='calendario'] .agenda {
    /* basis 0 y no auto, por lo mismo que `.home`: con basis auto el alto de
       la agenda sale de su contenido, el contenido son filas en `1fr` y esas
       filas vuelven a preguntar por el alto de la agenda. El bucle se corta
       midiendo max-content —celdas de 508px y la lista de 2.650— y desborda
       la tarjeta. Con basis 0, la agenda recibe el hueco que sobra, ese hueco
       es un alto definido, y recién ahí un `1fr` significa una fracción. */
    flex: 1 1 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  /* Cabecera y panel del día miden lo suyo; el mes se lleva el resto. */
  .home[data-vista='calendario'] .agenda__mes { grid-template-rows: auto minmax(0, 1fr) auto; }
  /* El piso de 64 sigue siendo el piso: `1fr` es el techo, no el alto. */
  .home[data-vista='calendario'] .calendar--mes { grid-auto-rows: minmax(64px, 1fr); }
  /* Título y segmentado miden lo suyo; el scroller se lleva el resto. */
  .home[data-vista='calendario'] .agenda__lista { grid-template-rows: auto auto minmax(0, 1fr); }
  .home[data-vista='calendario'] .agenda__scroll { max-height: none; }

  /* --------------------------------------------------------------------
     LA CELDA SABE SI TIENE SITIO
     --------------------------------------------------------------------
     Todo lo que sigue —el bloque del partido en dos renglones, el nombre en
     dos líneas, la letra un escalón más grande— se paga en ALTO DE CELDA, y la
     celda no siempre lo tiene: un mes de seis semanas reparte el mismo hueco
     entre seis filas en vez de cinco. Medido a 1600: en febrero la celda mide
     103 y en septiembre 84, y a 1600x895 —el borde de esta media query— son 71.
     Un bloque de dos renglones necesita 93 y ahí se desbordaba: cinco celdas
     de septiembre pintando por fuera de su casilla.

     Así que la puerta la abre la celda misma. `container-type: size` se puede
     acá y no en la vista suelta porque el alto de la fila sale de `1fr`, o sea
     del hueco de la retícula y no de lo que la celda lleve adentro: contener
     el tamaño no le quita nada y no hay bucle posible. En una ventana donde la
     página scrollea la fila mide su contenido, y ahí esto sería un cero.

     Son dos puertas y no una porque son dos gastos distintos, y los dos números
     están MEDIDOS forzando cada paso en una ventana donde nada se recorta: el
     bloque de dos renglones necesita 84px de contenido y con el escalón de
     letra 89,2. Las puertas van en 86 y 91 —tres y dos de margen— y se miden
     contra la CAJA DE CONTENIDO, que es lo que una consulta de contenedor mira:
     la celda tiene 10px de relleno vertical, así que una fila de 103 pregunta
     con 93. Ese detalle costó una vuelta: con las puertas puestas en el alto de
     la FILA no abría ninguna y todo el trabajo quedaba apagado, que es la clase
     de error que se ve como «no pasó nada».

     Y cada puerta necesita ADEMÁS su ancho —la columna del mes—, que es la otra
     mitad de la misma pregunta: el renglón entero no sirve de nada si la
     palabra no entra. Un mes cambia de forma entero, nunca celda por celda,
     porque las seis filas miden lo mismo. */
  .home[data-vista='calendario'] .calendar--mes .cal__day { container: celda / size; }

  /* EL BLOQUE DEL PARTIDO PASA A DOS RENGLONES, Y EL NOMBRE SE LEE ENTERO.
     --------------------------------------------------------------------
     «Un renglón y no dos» (ver EL BLOQUE DEL PARTIDO) se decidió contra el
     alto que faltaba: la segunda línea costaba doce píxeles por fila y seis
     semanas de eso dejaban el panel del día fuera de la ventana. Donde el alto
     no falta la cuenta se da vuelta: esos píxeles ya están pagados y en su
     lugar hay aire.

     Y lo que compran es lo único que la retícula del mes NO decía: contra
     quién se juega. Medido a 1600, al nombre le quedaban 56px de los 157 que
     mide «Independiente Rivadavia»; con el renglón entero para él son 107 y
     entra en dos líneas. `break-word` es para el club cuyo apellido no entra
     ni solo en una línea —«Mönchengladbach»—, que se parte en vez de cortarse
     sin avisar.

     El ancho es del contenedor del mes, igual que la letra de la sede: a 900 de
     columna el renglón del nombre da 99px e «Independiente» mide 92 en trece. */
  @container mes (min-width: 900px) {
    @container celda (min-height: 86px) {
      .cal__pase {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 1px;
        height: auto;
        padding: var(--sp-2);
      }
      /* El escudo crece con el bloque: en doce píxeles un escudo es una mancha
         de color y a veinte es el club. Es la medida de `.crest--sm` más un
         escalón, con su halo en la misma proporción (ver `app.css`). */
      .cal__pase .crest { width: 20px; height: 22px; --halo: 0.36px; }
      .cal__pase-rival {
        grid-column: 1 / -1;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      /* La sede y el marcador se quedan en el primer renglón, al fondo, que es
         donde estaban: lo que se mudó abajo es el nombre. */
      .cal__pase-sede,
      .cal__res { grid-column: 3; grid-row: 1; }
    }
  }

  /* --------------------------------------------------------------------
     Y CON MUCHO SITIO, LA LETRA SUBE UN ESCALÓN
     --------------------------------------------------------------------
     La escala de esta pantalla se fijó contra una celda de 122px de ancho. En
     una ventana de 2000 la celda mide 151 y la letra sigue siendo la misma: el
     mes se lee como una miniatura de sí mismo, con un escudo de 20px flotando
     en una celda de 103 de alto. Acá sube un escalón —13 a 14 en las pastillas
     y en el bloque, 15 a 16 en el número del día— y el escudo pasa a 24.

     EL ANCHO SALE DE LA PALABRA MÁS LARGA. El renglón del nombre mide
     `(columna − 70) / 7 − 20`; a 950 son 105,7 e «Independiente» mide 98,3 en
     catorce, o sea siete de margen. Por debajo, la letra grande le comería a
     la palabra el sitio que la línea nueva le acaba de dar, que es cambiar una
     mejora por otra. A 1600 de ventana la columna mide 960 y entra; a 1440
     mide 830 y no. */
  @container mes (min-width: 950px) {
    @container celda (min-height: 91px) {
      .cal__num { font-size: var(--fs-md); }
      .cal__acto { font-size: var(--fs-xs); }
      .cal__acto .i { width: 12px; height: 12px; }
      .cal__pase, .cal__res { font-size: var(--fs-xs); }
      .cal__pase .crest { width: 24px; height: 26px; --halo: 0.43px; }
    }

    /* Fuera de la celda no hay nada que se pueda desbordar, así que a estos
       les alcanza con el ancho. EL RÓTULO DEL CARRIL NO SUBE Y EL NÚMERO SÍ:
       el carril mide 62 y «Reducido» —la palabra más larga que puede caer
       ahí— mide 60 en trece y 64 en catorce, o sea que subirlo obligaría a
       ensancharlo, y ese ancho sale de los siete días, que es de donde no se
       puede sacar (ver LA RETÍCULA DEL MES). */
    .cal__sem b { font-size: var(--fs-lg); }
    .dia__titulo { font-size: var(--fs-lg); }
    .dia__linea { font-size: var(--fs-md); }
    .dia__nota { font-size: var(--fs-sm); }
  }

  /* --------------------------------------------------------------------
     Y LA LISTA, CON SU PROPIA PUERTA
     --------------------------------------------------------------------
     El renglón de la lista se queda sin sitio por el nombre del rival, que ahí
     va en UNA sola línea y no puede envolver: «Gimnasia y Esgrima La Plata»
     mide 217 en dieciséis en negrita. A 480 de columna el hueco del nombre da
     221; a 456 —una ventana de 1440— da 205 y lo recorta, que es exactamente
     lo que pasó al ensanchar la columna de la fecha. Por debajo de la puerta
     la lista se queda con el escalón anterior, que ya es más grande que el de
     antes de todo esto.

     Lo que manda el alto del renglón son sus dos líneas de texto, así que
     crece de 50 a 54 y la lista muestra dos filas menos: eso es lo que cuesta
     poder leerlas. */
  @container lista (min-width: 480px) {
    /* El renglón crece con lo más alto que lleva, que es el LOGO de 28 y no el
       escudo de 24: con la altura puesta en 24 el logo la excedía por dos por
       arriba y por dos por abajo, y su centro caía dos píxeles más bajo que el
       del escudo. Dos, no cuatro — pero el arreglo cuesta lo mismo. */
    .ag { grid-template-columns: 94px 28px minmax(0, 1fr) auto; --ag-linea: 28px; }
    .ag__marca .i,
    .ag__marca .logo-liga,
    .ag__marca img { width: 28px; height: 28px; }
    .ag__mes { font-size: var(--fs-xs); }
    /* LA FECHA EN VERSALITAS Y EN UN RENGLÓN. El día de la semana es una etiqueta
       —«sáb», «mié»— y este sistema escribe las etiquetas en versalitas; en 52px
       además se partía en dos («sáb» arriba, «13/2» abajo), que es un renglón de
       alto regalado en cada una de las cincuenta filas. Los 94 salen de medir las
       cincuenta: la más ancha es «SÁB 12/10» con 90 en versalitas. El primer
       intento fue 76 —el ancho de un «SÁB 13/2»— y recortaba veintiséis de las
       cincuenta: en una columna de fechas la peor es la de dos dígitos y mes de
       dos dígitos, no la del medio. */
    .ag__dia {
      font-size: var(--fs-sm);
      font-weight: 600;
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      white-space: nowrap;
    }
    /* El nombre del rival es LO que se busca en esta lista: 700 y no 600, que es
       el mismo peso que la tabla de clasificación le da al club. */
    .ag__nombre { font-size: var(--fs-md); font-weight: 700; }
    .ag__nombre .crest { width: 22px; height: 24px; --halo: 0.4px; }
    /* Y EL PIE, EN VERSALITAS. «J2 · de visitante» son dos etiquetas y no una
       frase; en versalitas dejan de competir con el nombre de arriba —que es lo
       que se lee primero— y el renglón pasa a tener dos alturas claras en vez de
       dos textos parecidos. */
    .ag__pie {
      font-size: var(--fs-2xs);
      font-weight: 600;
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
    }
    /* La hora y el marcador, tabulares y en 700: es la columna que se lee en
       vertical, y una cifra que se lee en vertical tiene que alinear y pesar. */
    .ag__saldo { font-size: var(--fs-sm); font-weight: 700; }
  }

  /* Y LA BANDA DEL AÑO, que no está en ninguno de los dos contenedores: mide
     el ancho entero de la tarjeta, y con la ventana en 1401 ya le sobra sitio
     a cualquiera de sus rótulos. Las dos pistas crecen con la letra: una barra
     de 12px con una palabra de 14 adentro la deja fuera de su propia caja. */
  .home[data-vista='calendario'] .anio__tramo,
  .home[data-vista='calendario'] .anio__ventana { font-size: var(--fs-xs); }
  .home[data-vista='calendario'] .anio__pista { height: 26px; }
  .home[data-vista='calendario'] .anio__ventanas { height: 16px; }
  .home[data-vista='calendario'] .anio__pie .dato__valor { font-size: var(--fs-md); }
}

@media (max-width: 1180px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .agenda__scroll { max-height: 360px; }
}

/* --------------------------------------------------------------------------
   PARTIDOS Y CLASIFICACIÓN
   -------------------------------------------------------------------------- */

/* En el vistazo general son seis filas y mide lo que mide; en la vista de
   temporada completa son cuarenta y seis y se encoge hasta donde la tarjeta
   le deja, scrolleando por dentro. Un solo scroller que sólo reclama alto
   cuando su tarjeta puede encogerse. */
.fixtures-wrap {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}
.fixtures-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); }

/* Las dos tarjetas de la columna tienen scroller adentro, así que las dos
   pueden encogerse: sin `min-height: 0` el contenido manda y la primera se
   lleva el alto entero, dejando a la clasificación en un renglón de cabecera y
   filtros. El reparto dos tercios / un tercio sólo se aplica cuando las dos
   quedan APILADAS —por debajo de 1180px, ver el bloque de la vista al final de
   esta hoja—; de 1181 para arriba van una al lado de la otra y el `flex` de
   una celda de retícula no significa nada. */
.home[data-vista='programacion'] .col > .tarjeta { flex: 1 1 0; min-height: 0; }
.home[data-vista='programacion'] .col > .tarjeta:first-child { flex: 2 1 0; }

.fixtures td { padding-block: var(--sp-3); }

/* LA TIRA NO SE VA DE LA TARJETA. Es la misma historia que la clasificación de
   más abajo —y se arregla con la misma llave—, sólo que acá el que empujaba no
   era el rótulo de una cifra sino el nombre del rival: medida por su contenido,
   la tira pedía 564px dentro de una tarjeta de 411 porque «Gimnasia y Esgrima
   de Mendoza» —o cualquiera de los cinco nombres largos de la categoría— se
   quedaba con 249px de columna. (Los números de este comentario son de
   MAQUETACIÓN: `getBoundingClientRect()` los devuelve un 8 % más grandes,
   pintados, por el zoom del sitio.) Lo que se caía del borde era el RESULTADO, o
   sea la columna por la que existe la tira: un scroller vertical no dibuja
   barra horizontal, así que se llegaba arrastrando y por lo tanto no se llegaba
   nunca.

   `table-layout: fixed` da vuelta quién manda. La fecha, la competición y el
   marcador piden en píxeles lo que mide su rótulo, y el rival se queda con TODO
   lo que sobre —mucho en un monitor, poco en un portátil—, recortándose con
   puntos suspensivos el día que no alcance. El escudo va delante y no detrás
   justamente por eso: es lo que distingue a las dos Gimnasias cuando las dos
   dicen «Gimnasia y Esgrim…».

   Y LA SEDE SE MUDÓ ADENTRO DEL RIVAL. Una columna entera —rótulo, acolchado y
   todo: cincuenta píxeles— para una sola letra era el gasto más caro de la
   tira, y pegada al nombre se lee mejor de lo que se leía en su casilla:
   contra quién y dónde es una sola pregunta. Como la columna del rival mide
   fijo y la letra no se estira, las seis siguen cayendo en la misma vertical,
   que es lo único que su casilla aportaba. */
.fixtures { width: 100%; table-layout: fixed; }

/* CADA RENGLÓN ES UNA PLACA. En la captura de FM26 la programación no es una
   tabla con hairlines sino una pila de bloques con superficie y 3px de aire
   entre uno y otro, y ése es el motivo por el que su columna derecha se lee de
   un vistazo mientras la nuestra pedía seguir el renglón con el dedo.

   Se hace con `border-collapse: separate` y `border-spacing`, que es la única
   forma de que una TABLA tenga aire entre filas: `gap` no existe en tablas y
   `margin` en un `<tr>` no hace nada. El precio son las esquinas, que hay que
   redondear en la primera y la última celda de cada fila y no en la fila —una
   fila de tabla no recorta a sus celdas—; se resuelve con `:first-child` y
   `:last-child`, no con una clase, para que ninguna pantalla tenga que
   acordarse de ponerla.

   La cabecera pegajosa sigue funcionando: `border-spacing` no la despega
   porque el `sticky` es de la celda y no de la fila. Lo que sí hubo que
   corregir es su fondo, que ahora tiene que tapar el aire de la primera placa
   cuando se rueda por debajo. */
.fixtures {
  border-collapse: separate;
  border-spacing: 0 3px;
}
.fixtures tbody tr { background: var(--bg-row); }
.fixtures tbody tr > *:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.fixtures tbody tr > *:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Sin línea entre filas: el aire ya separa, y una raya dentro de una placa es
   la segunda frontera para una sola división. */
.fixtures tbody td { border-bottom: 0; }
.fixtures tbody tr:hover { background: var(--bg-active); }
/* Y el aire empieza DESPUÉS de la cabecera, no antes: `border-spacing` reparte
   también arriba, y la primera placa aparecía descolgada tres píxeles. */
.fixtures thead th { border-bottom: 0; padding-bottom: var(--sp-3); }
.fixtures tbody td:first-child { padding-left: var(--sp-4); }
.fixtures tbody td:last-child { padding-right: var(--sp-4); }

/* De dónde salen los tres números. Setenta y seis es «mié 21/10», la fecha más
   ancha que da un año entero, con su acolchado. Ochenta y seis es el rótulo
   RESULTADO, que es más ancho que el marcador más largo que la tira dibuja
   —«2-2 (4-3)» dentro de su chapa, sesenta y seis—: manda el rótulo.

   Y ciento ocho es la columna que hubo que discutir, porque es la única de las
   cuatro que la mide su RÓTULO y no su dato: COMPETICIÓN entero pide noventa y
   seis píxeles para encabezar catorce («J1»). Se probó abreviarlo —«Comp.», con
   su `abbr`, como se abrevia en el Buscador— y se volvió atrás a propósito: el
   rótulo va entero y los dieciocho píxeles de diferencia los paga el nombre del
   rival, que es la única columna elástica y la única que sabe recortarse. De
   yapa, la etiqueta entra con más aire que la que necesita el rótulo: sólo se
   recortan las de CONMEBOL —«Grupo A · F1» es la más larga del juego—, en la
   fila donde el escudo del torneo ya dijo de qué se trata. */
.fixtures th.col-fecha { width: 76px; }
.fixtures th.col-comp  { width: 108px; }
.fixtures th.col-marca { width: 86px; }

/* Y el marcador termina pegado al borde de la tarjeta, como la fecha empieza
   pegada al suyo —eso ya lo decide `.data-table td:first-child`—. No es sólo
   simetría: son seis píxeles que en esta tira valen un nombre de club más. */
.fixtures th:last-child,
.fixtures td:last-child { padding-right: 0; }

/* El cinturón sobre el tirante, igual que en la clasificación: con los anchos
   de arriba no debería salirse nada, pero cualquier etiqueta que un día no
   quepa volvería a abrir la barra horizontal en vez de recortarse. */
.fixtures th, .fixtures td { overflow: hidden; }

/* Los dos textos que pueden no entrar viven en un span propio y no sueltos
   dentro del flex: a una caja anónima no le llega `text-overflow` (ver `.team`
   en `app.css`, que ya lo explica para el nombre del club). */
.fixtures .comp { min-width: 0; }
.fixtures .comp__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Y CUANDO NI ASÍ ALCANZA, LA ETIQUETA SE VA Y QUEDA LA MARCA. Las tres
   columnas se cobran lo suyo en píxeles, así que lo que se estrecha es siempre
   el rival: en la ventana más angosta que todavía dibuja tres columnas —1401px,
   uno menos y se apilan— la tabla baja a 356 y al nombre le quedaban 56.
   Seis renglones diciendo «Racing Cl…», «Independie…» no son una programación.

   Se va la etiqueta de la competición, que es de los cuatro datos el único que
   tiene quien lo diga por él: el escudo del torneo sigue ahí, y distinguir la
   fecha de liga del miércoles de copa era su trabajo desde el principio. El
   rótulo de la columna se esconde con ella —una columna de marcas no lleva
   título, como no lo lleva en FM— pero sigue estando para quien lee la tabla
   con un lector de pantalla.

   La consulta es por el ancho de la TARJETA y no de la ventana, por el mismo
   motivo que en la clasificación: la misma ventana tiene esta tira angosta en
   el vistazo general y ancha en la vista de Programación. Y los dos números son
   del ancho de ADENTRO de la tarjeta —una consulta de contenedor mide la caja
   de contenido, no la del borde—, que es justo lo que mide la tabla: 356 en esa
   ventana de 1401, 411 en una de 1600, 503 en una de 1920. */
.tarjeta.prog { container: prog / inline-size; }

@container prog (max-width: 400px) {
  .fixtures th.col-comp { width: 36px; }
  .fixtures .comp__nombre { display: none; }
  .fixtures th.col-comp span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* Y AL REVÉS, EN UN MONITOR: con la tarjeta holgada la columna se estira los
   diez píxeles que le faltaban para «Grupo A · F1» —la fase de grupos, la
   etiqueta más larga del juego— y al rival le siguen sobrando ciento setenta,
   más de lo que mide el nombre más largo de la categoría. La escalera tiene
   tres escalones y no dos porque la columna se mide contra tres cosas
   distintas: sin sitio para el rótulo, con sitio para el rótulo, y con sitio
   para la etiqueta más larga. */
@container prog (min-width: 470px) {
  .fixtures th.col-comp { width: 118px; }
}

/* LA SEDE, AL FONDO DE LA CASILLA DEL RIVAL. Va empujada con un `margin-left`
   automático y NO estirando el nombre con un `flex: 1`: la caja del nombre se
   habría llevado también el `text-align: right` que la tabla le pasa a todas sus
   celdas, y el nombre quedaba despegado del escudo y flotando contra la letra.
   Así las seis letras caen en la misma vertical —lo único que su columna
   aportaba— y el rival sigue empezando pegado a su escudo.

   Jugar de local es un dato del partido y no una ventaja que la pantalla tenga
   que celebrar: se distingue por peso y no por color, igual que en la lista de
   la temporada completa. */
.fixtures .venue { margin-left: auto; flex: none; font-size: var(--fs-xs); color: var(--text-muted); }
.fixtures .venue[data-sede='L'] { color: var(--text-secondary); font-weight: 600; }
.fixtures .venue abbr[title] { text-decoration: none; }

/* Y el empujón tiene un tope, porque la tira también se dibuja con las columnas
   apiladas —por debajo de 1401px— y ahí la tarjeta mide mil cien: sin tope, la
   letra se iba a setecientos píxeles del nombre al que pertenece. Doscientos
   sesenta y cuatro es el escudo más el nombre más largo del juego; pasado eso,
   correr la letra más a la derecha no la acerca a nada. */
.fixtures a.team { max-width: 264px; }

/* Cada fila de la programación abre la visualización del partido. El subrayado
   aparece en el nombre del rival —que es el enlace real— aunque el clic entre
   por cualquier punto de la fila. */
.fixtures tr[data-partido] { cursor: pointer; }
.fixtures tr[data-partido]:hover a.team .team__nombre { text-decoration: underline; }

.kickoff { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   LA TEMPORADA COMPLETA
   --------------------------------------------------------------------------
   La segunda forma del panel de Programación, y la única que existe en la
   vista de Programación. Ver el comentario del bloque en `index.html`: acá
   sólo se dibuja, la decisión está allá.

   El renglón NO es una fila de tabla. Una tabla de cinco columnas estirada a
   1.500px reparte el sobrante entre las columnas y deja la competición a un
   palmo de su rótulo; una retícula de anchos fijos con un solo tramo elástico
   —el nombre del rival, que es lo único que mide distinto en cada renglón—
   mantiene las cinco columnas alineadas en el mismo sitio los treinta y tres
   renglones. Es la misma gramática que la agenda (`.ag`), que resolvió esto
   antes: retícula, hairline abajo, sin caja.
   -------------------------------------------------------------------------- */

.temporada {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--sp-5);
  min-height: 0;
}

/* La cabecera del año: qué se viene, a la izquierda, y cómo venís, a la
   derecha. Sin superficie propia — dentro de una tarjeta, una segunda caja es
   una caja anidada, y el sistema no anida contenedores. Separa el hairline. */
.temporada__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5) var(--sp-9);
  align-items: end;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.proximo, .balance { display: grid; gap: var(--sp-4); min-width: 0; }
.balance { justify-items: end; }

.proximo__rival {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
  color: inherit;
}
.proximo__rival .crest { flex: none; }
.proximo__rival:hover .proximo__id strong { text-decoration: underline; }

.proximo__id { display: grid; gap: 1px; min-width: 0; }
.proximo__id strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
}
.proximo__pie { font-size: var(--fs-xs); color: var(--text-muted); }

/* El cuándo es la otra mitad de la respuesta y por eso viaja pegado al rival,
   no en un renglón aparte: «San Lorenzo» sin fecha no es un próximo partido. */
.proximo__cuando {
  display: grid;
  gap: 1px;
  margin-left: auto;
  padding-left: var(--sp-6);
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.proximo__cuando b { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }

.proximo__nada { font-size: var(--fs-sm); color: var(--text-muted); }

/* El balance del año en la voz de marcador: tres cifras y su letra. No es un
   tablero de KPIs —no hay una cifra enorme sola— sino la misma fila de dato
   del resto del juego, con el número en Primario y el rótulo pegado. */
.balance__cifras { display: flex; align-items: baseline; gap: var(--sp-6); }
.balance__par {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.balance__par b {
  margin-right: 2px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.balance__pie {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.temporada__mandos { display: flex; align-items: center; gap: var(--sp-5); }

.temporada__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  margin-right: calc(var(--sp-4) * -1);
  padding-right: var(--sp-4);
}

/* La barra de mes se pega arriba mientras el grupo pasa: perder el mes en una
   lista de un año entero es perder el contexto de todo lo que hay debajo. Es
   la misma pieza que agrupa la bandeja por día en FM26. */
.pt-mes {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.pt-mes > span:first-child::first-letter { text-transform: uppercase; }

/* Lo que ese mes dejó. Es la única cuenta que un encabezado de grupo puede
   hacer sin repetir lo que ya dicen sus filas. */
.pt-mes__eco {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pt {
  display: grid;
  grid-template-columns: 84px 108px 84px minmax(0, 1fr) 96px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-hairline);
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.pt:last-child { border-bottom: 0; }
a.pt:hover { background: var(--bg-hover); }
a.pt:hover .pt__rival span { text-decoration: underline; }
a.pt:focus-visible { outline-offset: -2px; }

/* Dónde estás parado. Es la única marca de canal de toda la lista, y le
   corresponde: la fila de hoy no es un valor bueno, es el estado de la
   pantalla. */
.pt[aria-current='true'] { background: var(--bg-selected); }
.pt[aria-current='true'] .pt__dia { color: var(--accent-strong); font-weight: 700; }

.pt__dia { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.pt__comp {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
/* La tira de Programación no achica la marca: el piso de 18 vale también acá
   (ver LA ESCALA DE LAS MARCAS DE LIGA, en `app.css`). */
.pt__comp .comp__logo { width: 18px; height: 18px; }

.pt__sede { font-size: var(--fs-xs); color: var(--text-muted); }
/* Jugar de local es un dato del partido, no una ventaja que la pantalla tenga
   que celebrar: se distingue por peso y no por color. */
.pt__sede[data-sede='L'] { color: var(--text-secondary); font-weight: 600; }

.pt__rival {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.pt__rival span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt__rival .crest { flex: none; }

.pt__marca { justify-self: end; font-size: var(--fs-sm); }

/* Dónde se corta el año: el primero que todavía no se jugó. Es la frontera
   entre lo que ya pasó y lo que viene, y en una lista de treinta y seis
   renglones esa frontera no se encuentra sola. La hora en Primario alcanza:
   marcarlo más sería competir con la fila de hoy, que es la que manda. */
.pt--proximo .kickoff { color: var(--text-primary); }

/* El sábado que tu equipo mira. Sin rival, sin sede y sin hora: ocupa su
   renglón para que nadie se pregunte si la J2 falta por un error. */
.pt--libre { grid-template-columns: 84px 108px 84px minmax(0, 1fr); }
.pt__libre { font-size: var(--fs-sm); color: var(--text-disabled); }

.standings td { padding-block: var(--sp-2); }

/* LA TABLA NO SE VA DE LA TARJETA. Con la ventana angosta se iba: nueve
   columnas medidas por su contenido, y el nombre más largo de la categoría
   —«San Martín de Tucumán»— empujando hasta dejar los PUNTOS, que es la
   columna por la que existe la tabla, del otro lado de una barra horizontal.
   Una clasificación que hay que desplazar para leer el puntaje no es una
   clasificación.

   Se arregla con `table-layout: fixed`, que da vuelta quién manda: los anchos
   dejan de salir del contenido y salen de la cabecera. Cada columna de cifras
   pide lo que necesita para su rótulo —«POS», «DIF», «PTS» con su flecha de
   orden— y el club se queda con TODO lo que sobre, sea mucho o poco. Cuando es
   poco, el nombre se recorta con puntos suspensivos (`.team__nombre`) y las
   nueve columnas siguen a la vista, que era lo único que había que salvar.

   Y de paso desaparece el otro efecto de medir por contenido: con la ventana
   ancha, las siete columnas de números se repartían el sobrante y quedaban
   separadísimas entre sí mientras el nombre del club iba apretado. */
.tarjeta--tabla { container: tabla / inline-size; }

/* Y LAS PESTAÑAS NO SE VAN DE LA TARJETA TAMPOCO. Eran cuatro —las tres tablas
   y los promedios— y entraban siempre. Después cada copa que jugás se sumó como
   una más, y un año bueno son nueve: Zona B, Zona A, General, Promedios, Copa,
   Libertadores, Trofeo, Supercopa y Recopa. En la columna angosta del portal
   eso mide seiscientos y pico contra quinientos disponibles, y el segmentado no
   se defiende solo: es un `flex` sin envoltura, así que las últimas se salían
   por el borde derecho de la placa y quedaban cortadas por la mitad. La
   Supercopa desaparecía entera.

   Envuelve, no se desliza. Una pestaña escondida detrás de un desplazamiento
   horizontal que nadie anuncia es una competición que el DT no sabe que está
   jugando; el segundo renglón cuesta veintiocho píxeles de tabla y las muestra
   todas. Es lo mismo que ya hacen el planteamiento, la previa y la pizarra con
   este control. El `row-gap` de 2px es el mismo aire que el relleno del
   segmentado, para que los dos renglones se lean como un solo bloque y no como
   dos controles. */
.tarjeta--tabla .segmented { flex-wrap: wrap; row-gap: var(--sp-1); }

.standings { table-layout: fixed; }
.standings th.gutter { width: 3px; }
/* Las de cifras miden lo que mide su rótulo y no un porcentaje: en una tabla
   de reparto fijo lo que no se pide en píxeles se reparte por igual entre
   TODAS las columnas, y con anchos en tanto por ciento el nombre del club
   terminaba con la misma casilla que la G. Setenta y dos deja aire alrededor de
   dos cifras y de «DIF ↑»; el resto de la tabla es del club, que es la única
   columna que tiene algo largo que decir.

   (Ni `min-width` ni `max()` sirven acá: el ancho de una casilla no lo decide
   la casilla sino la columna, y las dos formas terminaban con las cifras en
   veintinueve píxeles y los rótulos recortados a «PC», «JU», «DI», «PT» — que
   era, además, de donde salía la última barra de desplazamiento: no la empujaba
   la tabla sino el texto que no entraba en su casilla.) */
.standings th.u-num { width: 72px; }

/* Y nada se sale de su casilla. Es el cinturón sobre el tirante: con los anchos
   de arriba no debería hacer falta, pero cualquier rótulo que un día no quepa
   volvería a abrir la barra horizontal en vez de recortarse. */
.standings th, .standings td { overflow: hidden; }

/* Y CUANDO NI ASÍ ALCANZA, SE VAN TRES COLUMNAS. En una tarjeta angosta las
   siete de cifras se quedan con todo y al club le sobraban cuarenta píxeles:
   la tabla no se salía, pero decía «Ciud…», «Atl…», «Al…» doce veces seguidas.
   Una clasificación en la que no se lee quién va primero no está arreglada.

   Ganados, empatados y perdidos son los que se van, y en ese orden de
   importancia: los partidos jugados, la diferencia de gol y los puntos son los
   que contestan la pregunta de la tabla; G-E-P la desglosan. Se van los tres
   juntos porque un «G» solo, sin la E ni la P al lado, no se lee como nada.

   La consulta es por el ancho de la TARJETA y no de la ventana: la misma
   ventana tiene esta tabla angosta en el vistazo general y ancha en la vista de
   tabla, y una consulta de ventana las trataría igual a las dos. */
@container tabla (max-width: 700px) {
  .standings .col-plegable { display: none; }
}

/* Y en la tarjeta más angosta las cinco que quedan se aprietan hasta lo que
   mide su rótulo: es el último sitio de donde sacar píxeles antes de empezar a
   comerse los nombres. Cincuenta es «DIF» con su flecha y su aire mínimo. */
@container tabla (max-width: 560px) {
  .standings th.u-num { width: 50px; }
}
/* El fondo lo pone `app.css` para todas las tablas del juego; acá queda sólo lo
   que es de la clasificación: el nombre del club, que sube de peso. */
.standings tbody tr[aria-current='true'] .team { color: var(--text-primary); font-weight: 600; }

/* `.zone-chip` se mudó a `app.css` el día que la fase de grupos de la
   Libertadores necesitó la misma franja. La regla del sistema es explícita: una
   regla sube cuando la usa una segunda pantalla. */

/* La flecha de movimiento no lleva color: la dirección ya lo dice todo, y
   teñir de cal una subida de puesto abría un cuarto uso del acento. */
.move { display: inline-flex; width: 11px; color: var(--icon-quiet); }
.move .i { width: 11px; height: 11px; }

/* La respuesta a «¿entro a los playoffs?». Va ENTRE la tabla y la leyenda, que
   es el orden en que se lee: los datos, la conclusión, y recién después qué
   significan los colores. Lleva su color en el texto y no en una franja al
   costado — la clasificación es un dato, y un dato se marca en el contenido.

   Los tres tonos son los del sistema y no unos nuevos: `--good` para estar
   adentro, `--warn` para estar cerca y `--clay-300` para haber quedado afuera,
   que es el mismo rojo apagado con el que el entretiempo dice que vas
   perdiendo. Sin tono —la fecha 1, cuando lo único cierto es la regla— se lee
   en gris como la leyenda de abajo. */
.po-eco {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.po-eco strong { font-weight: 600; }
.po-eco[data-tono='bueno'] { color: var(--good); }
.po-eco[data-tono='aviso'] { color: var(--warn); }
.po-eco[data-tono='malo'] { color: var(--clay-300); }

/* La leyenda de zonas se fue a `app.css`: la usan el portal y las ligas, o sea
   dos pantallas. Acá dejaba a la de las ligas SIN NINGÚN estilo —`ligas.html`
   no carga esta hoja—, así que el chip caía encima del texto y las tres
   referencias salían en seis renglones. Una regla en la hoja de una pantalla es
   una regla que la de al lado no tiene. */

/* --------------------------------------------------------------------------
   RESPUESTA A PANTALLA
   Estructural: las columnas se repliegan, la tipografía no se toca.
   -------------------------------------------------------------------------- */

/* Anclar la pantalla al alto de la ventana sólo se sostiene mientras las tres
   columnas caben una al lado de la otra. En cuanto se apilan, el mismo alto
   tiene que repartirse entre más filas y el contenido se recorta. A partir de
   acá manda el documento: la página scrollea y cada columna mide lo que mide,
   con un techo para los dos listados largos. */
@media (max-width: 1400px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  /* basis 0 sólo tiene sentido cuando hay un alto que repartir. Con el
     documento suelto, la retícula vuelve a medir lo que mide su contenido:
     si no, se queda corta y las columnas se recortan entre sí. */
  .home { flex: 0 0 auto; grid-template-columns: minmax(300px, 0.9fr) minmax(400px, 1.2fr); }
  .home > .col:last-child { grid-column: 1 / -1; }
  .col { min-height: auto; }
  .inbox { flex: 0 1 auto; max-height: 460px; }
  .table-scroll { flex: 0 1 auto; max-height: 420px; }
}

/* LA VENTANA BAJA
   --------------------------------------------------------------------------
   El mismo problema que el ancho, en el otro eje. La columna del medio pide
   unos 760px de alto —noticia, dúo y calendario— y con el chrome de dos pisos
   eso son unos 895 de ventana: en cualquier portátil sobra pantalla a lo ancho
   y falta a lo alto. Lo que faltaba lo pagaba la tira de quince días, el único
   panel que estira, con media semana recortada por abajo.

   La respuesta NO es scrollear —la promesa de esta pantalla es que todo se ve
   de una vez— sino apretar el aire, que es lo único que sobra: el canalón, el
   acolchado de las tarjetas y, sobre todo, la tira, que pasa a un renglón por
   día —número a la izquierda, marcas a la derecha— en vez de dos. Se ven los
   catorce días enteros y ninguna letra cambia de tamaño. */
@media (min-width: 1401px) and (max-height: 900px) {
  .home { gap: var(--sp-4); padding: var(--sp-4); }
  .tarjeta { gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
}

/* Y EL CALENDARIO SE APRIETA ANTES: HASTA 1040 Y NO HASTA 900.
   --------------------------------------------------------------------------
   Los 900 salían de cuándo la columna deja de entrar ENTERA. Pero la cuenta
   cambió el día que la noticia dejó de poder achicarse hasta desaparecer: lo
   que hay que preguntar ya no es «¿entra todo?» sino «¿entra todo con una
   noticia entera adentro?», y eso pasa a los 1040. Entre 900 y 1040 no
   desbordaba nada y sin embargo la placa salía cortada, que es el defecto que
   nadie miraba porque la pantalla se veía completa.

   La leyenda de las marcas es lo otro que cede, y son 46px que a 1440x900
   deciden entre una noticia entera y una noticia partida.

   Y AHORA LA LEYENDA ES DE ESTA VISTA Y DE NINGUNA OTRA. Este comentario decía
   lo contrario —«la pantalla de Calendario la conserva siempre»— y era cierto
   mientras las dos retículas dibujaran glifos. Desde que la del mes escribe el
   nombre de cada sesión dentro de su pastilla, la leyenda ahí explicaría
   símbolos que ya no están; la tira de quince días del vistazo general sigue
   siendo de glifos —la celda mide 58px y no entra otra cosa— y es el único
   sitio donde hace falta. Por eso la etiqueta `solo-vistazo` en el marcado, y
   por eso esta regla puede seguir apagándola cuando la ventana aprieta: lo que
   se pierde es la traducción de catorce glifos que el panel del día de abajo
   sigue escribiendo con todas sus letras. */
@media (min-width: 1401px) and (max-height: 1040px) {
  /* El día en una línea: el número y sus marcas dejan de apilarse. Es la misma
     información con la mitad del alto, y el que estaba encima de todo —qué
     pasa el sábado— sigue leyéndose igual de rápido. */
  .home[data-vista='general'] .cal--quincena .cal__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 34px;
    padding: var(--sp-2) var(--sp-3);
  }

  .home[data-vista='general'] .cal-legend { display: none; }
}

/* Y si ni apretada entra —una ventana de portátil viejo, o un día con seis
   partidos en el dúo— manda el documento y la página scrollea, igual que
   cuando las columnas se apilan. Recortar nunca.

   EL UMBRAL SUBE DE 700 A 890, y es la misma regla contestando a una pregunta
   que cambió. Los 700 medían cuándo la columna deja de entrar; desde que la
   noticia no puede achicarse hasta desaparecer, lo que hay que medir es cuándo
   deja de entrar CON UNA NOTICIA ENTERA adentro, y a 1440 de ancho eso pasa a
   los 890: medido, la tarjeta de titulares recibe 238px a 860 y necesita 300.
   Entre 700 y 890 la pantalla se veía completa y la noticia salía partida —el
   defecto no se veía como un error, se veía como una noticia mal escrita. */
@media (min-width: 1401px) and (max-height: 890px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .home { flex: 0 0 auto; }
  .col { min-height: auto; }
  /* Sin un alto que repartir, los dos listados largos necesitan techo, y acá
     el techo es una fracción de la ventana y no un número fijo: la ventana ya
     es baja y un tope de 460px la haría scrollear de más. */
  .inbox, .table-scroll { flex: 0 1 auto; max-height: 45dvh; }
}

@media (max-width: 1080px) {
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; }
  .news__panel, .news__panel--diario { grid-template-columns: minmax(0, 1fr); }
  .home > .col:last-child { grid-column: auto; }
  .col { min-height: auto; }
  .inbox { max-height: 420px; }
  .news__mark { display: none; }
  /* El recorte de tabla no se esconde como el ornamento: son puntos, y en el
     teléfono pasa a ser una franja debajo de la nota. */
  .recorte { width: auto; }
  .xpost__datos { flex-wrap: wrap; }
  .xpost__barra { gap: var(--sp-7); }
  .calendar { grid-template-columns: repeat(7, minmax(38px, 1fr)); }
  .cal__day { min-height: 48px; }
}


/* --------------------------------------------------------------------------
   LAS VISTAS DE LA BARRA
   --------------------------------------------------------------------------
   La misma pantalla, recortada. Cada solapa deja a la vista un panel y esconde
   los demás; en vez de una regla por panel, se esconde todo lo que NO es el
   elegido. Es una línea por vista y, sobre todo, cada panel que queda conserva
   su propio `display` — la bandeja sigue siendo flex, el dúo sigue siendo
   grid— en vez de que una regla común se lo imponga a todos.
   -------------------------------------------------------------------------- */

.home:not([data-vista='general']) { grid-template-columns: minmax(0, 1fr); }

.home[data-vista='mensajes'] [data-panel]:not([data-panel~='mensajes']),
.home[data-vista='calendario'] [data-panel]:not([data-panel~='calendario']),
.home[data-vista='noticias'] [data-panel]:not([data-panel~='noticias']),
.home[data-vista='programacion'] [data-panel]:not([data-panel~='programacion']),
.home[data-vista='rival'] [data-panel]:not([data-panel~='rival']) { display: none; }

/* Los techos que existen para que tres columnas convivan sobran cuando el
   panel es lo único en pantalla: son justo lo que el DT vino a mirar. */
.home[data-vista='mensajes'] .inbox,
.home[data-vista='programacion'] .table-scroll { max-height: none; }

/* Y el dúo de rival y partidos de hoy, con una columna sola, se lee mejor
   partido en dos que estirado a lo ancho de la ventana. */
.home[data-vista='rival'] .duo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --------------------------------------------------------------------------
   LA VISTA DE PROGRAMACIÓN
   --------------------------------------------------------------------------
   Es la única solapa donde el panel trae DOS cosas que se miran juntas —el año
   y la tabla— y por eso es la única que no se limita a estirar su columna a lo
   ancho. Estiradas, las dos quedaban una debajo de la otra: la tabla empezaba
   fuera de la ventana y la lista del año, que es lo que se vino a leer, se
   cortaba a mitad de camino. Una al lado de la otra caben las dos enteras, y es
   además lo que hace la fuente: la programación a la izquierda y la posición a
   la derecha, sin cambiar de pantalla para cruzarlas.

   El ancho de la derecha no es un gusto: es lo que mide la tabla de posiciones
   con sus ocho columnas, que es la misma que vive en la tercera columna del
   vistazo general. Debajo de eso empieza a apretar los números.
   -------------------------------------------------------------------------- */

.home[data-vista='programacion'] .col[data-panel~='programacion'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 542px);
  align-items: stretch;
}
.home[data-vista='programacion'] .prog { min-height: 0; }

/* Las dos formas del panel. La corta y la del año no conviven nunca: son el
   mismo dato con otro corte, igual que la quincena y la agenda. */
.solo-temporada { display: none; }
.home[data-vista='programacion'] .solo-temporada { display: grid; }
.home[data-vista='programacion'] .no-temporada { display: none; }
.home[data-vista='programacion'] .temporada { flex: 1 1 auto; }

/* Por debajo de 1400 de ancho —y por debajo de 700 de alto— manda el documento
   y la pantalla scrollea (ver la Regla del Alto de Ventana). Con el año suelto
   en el documento, la lista se estira a sus mil cuatrocientos píxeles y la
   tabla de al lado —que sí tiene techo— queda flotando arriba de una columna
   vacía. Techo para las dos, del mismo alto, y las dos columnas terminan donde
   termina la ventana. */
@media (max-width: 1400px), (min-width: 1401px) and (max-height: 700px) {
  .home[data-vista='programacion'] .temporada__scroll,
  .home[data-vista='programacion'] .table-scroll { max-height: 62vh; }
}

/* Y cuando ya no entran una al lado de la otra, la tabla vuelve debajo del
   año. Es el mismo repliegue que hace el resto del portal: se apilan las
   columnas, no se achica la letra. */
@media (max-width: 1180px) {
  .home[data-vista='programacion'] .col[data-panel~='programacion'] { display: flex; }
}

/* En pantalla chica el renglón se aprieta, pero no se rinde: las cuatro
   columnas fijas ceden ancho para que el nombre del rival siga entrando
   entero. Esconder la sede habría sido más fácil y habría dejado la lista sin
   contestar dónde se juega, que es media pregunta de un calendario. */
@media (max-width: 860px) {
  .pt {
    grid-template-columns: 60px 70px 70px minmax(0, 1fr) 76px;
    gap: var(--sp-4);
  }
  .pt--libre { grid-template-columns: 60px 70px 70px minmax(0, 1fr); }
  .temporada__cabecera { grid-template-columns: minmax(0, 1fr); }
  .balance { justify-items: start; }
}

/* --------------------------------------------------------------------------
   EL CORREO
   --------------------------------------------------------------------------
   En la vista Mensajes la bandeja y el lector son las dos únicas columnas. El
   buscador y «marcar todo» aparecen sólo ahí: en el vistazo general la bandeja
   es una tira de titulares, y dos controles más serían dos que nadie usa.
   -------------------------------------------------------------------------- */

.solo-correo { display: none; }
.home[data-vista='mensajes'] .solo-correo { display: flex; }
/* Los iconos de la cabecera son retícula y no caja flexible: sin esta línea
   heredarían el `display: flex` de arriba, y `place-items` deja de centrar
   horizontalmente en cuanto el contenedor es flex — el glifo quedaba pegado a
   la izquierda de su cuadrado de 26. */
.home[data-vista='mensajes'] .icon-btn.solo-correo { display: grid; }

/* --------------------------------------------------------------------------
   LOS CUATRO DE LA CABECERA DE LA BANDEJA
   --------------------------------------------------------------------------
   `.panel__head` alinea por `baseline`, que es lo correcto para un título y su
   eco de texto, pero manda los botones media línea abajo. Se los alinea al
   centro sin tocar la regla general.
   -------------------------------------------------------------------------- */

.panel__head .col__tools { align-self: center; }

/* Apagado de verdad: «marcar todo como leído» sin nada por marcar. Se le quita
   también el hover, o al pasar por encima seguiría diciendo que se puede. */
.col__tools .icon-btn:disabled { color: var(--text-disabled); cursor: default; }
.col__tools .icon-btn:disabled:hover { background: none; color: var(--text-disabled); }

/* La estrella encendida es el filtro puesto, y se pinta con el mismo violeta
   con el que se marca todo lo activo en el resto del juego. */
.col__tools .icon-btn[aria-pressed='true'] { color: var(--accent); background: var(--bg-active); }

/* La estrella lleva su contador adentro, así que deja de ser un cuadrado: en
   columna los dos hijos se apilarían uno encima del otro. */
.col__tools .icon-btn[data-filtro] {
  grid-auto-flow: column;
  width: auto;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
}
.col__tools .icon-btn[data-filtro] .segmented__count { margin-left: 0; }

.home[data-vista='mensajes'] { grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr); }

/* El lector es un panel más y no una capa encima: leer un mensaje no debería
   tapar la lista de la que salió. */
.lector__cuerpo { display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; overflow: auto; }

.lector__asunto {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}

.lector__de {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.lector__de strong { color: var(--text-primary); }
.lector__para { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.lector__texto { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-body); max-width: 68ch; }
.lector__texto p + p { margin-top: var(--sp-4); }

.lector__firma { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); }
.lector__firma strong { color: var(--text-secondary); }

.lector__acciones,
.lector__gestion { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   LAS RESPUESTAS DE UN PLANTEO
   --------------------------------------------------------------------------
   No son botones de acción y no pueden parecerlo: un enlace del correo te
   lleva a otra pantalla y esto CAMBIA EL JUEGO sin moverte de acá. Por eso
   cada una ocupa su propia fila, dice lo que hace en una línea y no hay
   ninguna destacada sobre las otras — la respuesta buena depende del plantel
   que tengas, y marcar una con el acento sería el juego eligiendo por vos.

   Se apilan en columna y no en fila porque se leen COMPARANDO, y tres cajas
   de anchos distintos en una fila obligan a saltar de una a otra para
   encontrar dónde empieza cada texto.
   -------------------------------------------------------------------------- */

.lector__respuestas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 68ch;
}

.respuesta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.respuesta:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.respuesta:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.respuesta__texto { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.respuesta__pista { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }

/* Lo que pasó al contestar. Va con el acento porque es la única línea del
   mensaje que no estaba escrita de antemano: es la consecuencia de lo que
   acabás de decidir.

   Y lleva el acento como lo lleva el resto del juego —lavado en el fondo y
   `--accent-line` en los cuatro lados, igual que la opción elegida de la mesa
   y la sede del trato— y no como una barra gruesa a la izquierda, que fue lo
   primero que escribí. La barra lateral no existe en ninguna otra pantalla:
   el único borde izquierdo de color del proyecto es el de `.placa`, y ahí es
   el color de UN MEDIO concreto, que es un dato y no un énfasis. */
.lector__respondido {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  color: var(--text-primary);
}

.lector__gestion {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-hairline);
  margin-top: auto;
}

/* El destacado se ve en la lista sin abrir el mensaje. */
.msg__tag .i { color: var(--warn); }

/* --------------------------------------------------------------------------
   LA FECHA LIBRE
   --------------------------------------------------------------------------
   Las zonas de nueve del Federal dejan a un club sin partido dos sábados al
   año. Su fila ocupa el mismo alto que las demás y no lleva a ninguna parte:
   apagada, alineada con los rivales y sin cursor de enlace. Que se vea que
   está y que se vea que no es un partido.
   -------------------------------------------------------------------------- */

.fila-libre { cursor: default; }
.fila-libre .libre {
  text-align: left;
  color: var(--text-disabled);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   TU RECORRIDO EN UNA COPA
   --------------------------------------------------------------------------
   Ocupa el sitio de la tabla cuando la pestaña elegida es una copa: es la
   misma pregunta —cómo vamos— contestada por otro torneo. Una llave por
   renglón, con el ritmo de la fila de dato y el hairline de siempre.

   El estado se dice apagando y no coloreando de rojo: la eliminada baja a
   `--text-muted` y la ganada se queda encendida. Es la misma regla que la
   rampa de atributos —la ausencia de brillo ES la señal— y evita meter un
   verde y un rojo nuevos en un panel que ya tiene los chips de zona.
   -------------------------------------------------------------------------- */
.ruta { display: grid; gap: 1px; }

.ruta__paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
}
.ruta__paso:last-child { border-bottom: 0; }

.ruta__ronda { color: var(--text-secondary); }
.ruta__rival { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ruta__rival .crest { flex: none; }
.ruta__marcador { color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* TRES RESULTADOS Y TRES TINTAS, Y NINGUNA APAGA EL RENGLÓN. Antes eran dos:
   ganado o «perdido», y en «perdido» caía todo lo que no fuera una victoria —el
   empate de grupo, la vuelta que pasaste por penales— con la fila entera en gris
   y el escudo del rival al 60 %. El recorrido de un finalista se veía casi todo
   apagado, o sea que la pantalla contaba una campaña que no era la que pasó.

   Ahora el marcador se tiñe y el renglón NO se toca: el nombre del rival y la
   ronda valen lo mismo se haya ganado o perdido —son el recorrido, no el
   veredicto—. Es la misma gramática que el resto del portal: verde lo bueno,
   arcilla lo negativo, y el empate sin color, que es lo que un empate es. */
.ruta__paso[data-estado='gano'] .ruta__marcador { color: var(--good); font-weight: 600; }
.ruta__paso[data-estado='perdio'] .ruta__marcador { color: var(--danger); }
.ruta__paso[data-estado='porjugar'] .ruta__marcador { color: var(--text-muted); }

/* ==========================================================================
   LA PRETEMPORADA
   --------------------------------------------------------------------------
   Dos superficies y ninguna nueva: el renglón del pie de la banda del año y un
   diálogo que reusa la placa de `preguntar()`. Las dos mesas —la de la gira y
   la de cada amistoso— no ponen una regla acá: son la mesa compartida de
   `mesa.css`, que es todo el punto de que exista.
   ========================================================================== */

/* El quinto bloque de la banda. Va al final del pie, después de la caja,
   porque es el único de los cinco que además ACCIONA: los cuatro de la
   izquierda dicen cómo está el año y éste abre lo que falta decidir. El botón
   vive en la línea del VALOR —al lado de «Sin armar»— y no debajo del rótulo,
   que lo dejaría flotando sin dueño; de eso se ocupa el `gap` del valor. */
/* Sin armar, el renglón se pone ámbar: es la misma tinta con la que la banda
   nombra las ventanas de mercado, y por lo mismo —un plazo que vence—. No es
   acento: no es algo que elegiste ni algo donde estás, que son dos de los tres
   trabajos del violeta. */
.anio__pre[data-estado='sin'] strong { color: var(--warn); }

.dialogo--pre { width: min(600px, calc(100vw - 2 * var(--sp-6))); }
/* CUATRO BOTONES EN EL PIE, que es uno más de los que este diálogo lleva en
   cualquier otra parte del juego. Medidos suman 566px de los 568 que hay: entran
   por dos píxeles con la ventana ancha y no entran con una angosta. Se dejan
   envolver antes que recortarse — la misma decisión que ya tomaron las pestañas
   de la clasificación, y por el mismo motivo: un control escondido detrás de un
   desplazamiento horizontal es un control que no existe. */
.dialogo--pre .dialogo__pie { flex-wrap: wrap; }

/* Los cuatro datos de la gira, en la retícula de datos del sistema. */
.pre__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.pre__dato dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pre__dato dd { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.pre__dato dd[data-tono='bueno'] { color: var(--verde-300); }
.pre__dato dd[data-tono='malo'] { color: var(--clay-300); }

/* Lo que la gira va a dejar, en prosa. Es lo único del diálogo que habla del
   plantel y no de la plata, y por eso va suelto y no en la retícula de arriba:
   una cifra más entre cuatro cifras se lee como una cifra más. */
.pre__lectura {
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--line-strong);
  background: var(--bg-row);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.pre__lectura strong { color: var(--text-primary); }

.pre__rotulo { margin-top: var(--sp-5); margin-bottom: var(--sp-3); }

.pre__lista { display: grid; gap: 1px; background: var(--line-hairline); border-radius: var(--r-sm); overflow: hidden; }

/* Un renglón por amistoso. Es la misma familia que la fila de la agenda —día,
   escudo, nombre y una cifra a la derecha— porque es la misma cosa contada en
   otro sitio, y dos maneras de dibujar un amistoso son dos maneras de
   confundirse. */
.pre__partido {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-panel);
  font-size: var(--fs-sm);
}
.pre__dia {
  flex: none;
  min-width: 56px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pre__partido .crest { width: 15px; height: 17px; flex: none; --halo: 0.25px; }
.pre__rival {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-primary);
}
.pre__sede { flex: none; font-size: var(--fs-xs); color: var(--text-muted); }
.pre__plata { flex: none; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pre__plata[data-signo='mas'] { color: var(--verde-300); }
.pre__plata[data-signo='menos'] { color: var(--clay-300); }

.pre__vacio { font-size: var(--fs-sm); color: var(--text-muted); }

/* Los marcadores del parte. Sin fondo ni retícula: son tres renglones dentro de
   un diálogo que ya termina, no una tabla. */
.pre__parte-lista { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pre__parte-lista li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.pre__parte-lista li > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.pre__parte-lista .crest { width: 15px; height: 17px; flex: none; --halo: 0.25px; }

/* ==========================================================================
   LA LLEGADA DE LA PRETEMPORADA
   --------------------------------------------------------------------------
   El único modal del juego que se anuncia solo, y la única superficie con una
   ESCENA. Las dos cosas son excepciones y las dos están ganadas: el año abre
   acá, y lo que la escena dice —julio, el predio vacío, los arcos puestos— es
   el estado del club en ese momento, no un adorno.

   La composición es de arriba abajo y no de dos columnas como la mesa, porque
   esto no se compara: se lee una vez y se contesta. Cielo, título encima del
   cielo, las tres decisiones en orden, y los dos botones.
   ========================================================================== */

.dialogo--llegada {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(600px, calc(100vw - 2 * var(--sp-6)));
  /* EL ALTO SE MIDE CON `--alto-ventana` Y NO CON `100vh`, por lo mismo que la
     card y las pantallas de alto fijo: adentro del zoom del sitio, `vh` no sabe
     de la barra del navegador ni del zoom, y el modal terminaba con los botones
     por debajo del borde en una ventana baja. Si el cuerpo no entra, scrollea el
     cuerpo: el cielo y los dos botones no se van nunca. */
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-6));
  padding: 0;
  overflow: hidden;
}
/* EL `display` VA CON `[open]`, por lo mismo que en la card y en la mesa: un
   `display` de hoja de autor le gana al `dialog:not([open]) { display: none }`
   del navegador, así que suelto dejaba este modal maquetado con el diálogo
   cerrado. Y desde que la salida va por transición hace falta además para que
   `allow-discrete` tenga entre qué dos valores viajar. Ver `mesa.css`. */
.dialogo--llegada[open] { display: grid; }

.dialogo--llegada .llegada__cuerpo { overflow-y: auto; }

/* El cielo. Alto fijo y no proporcional: la escena está compuesta para esta
   franja —el horizonte cae a dos tercios— y a otra altura el pueblo del fondo
   se sale por arriba o el pasto se come los arcos. */
.llegada__cielo {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--ink-900);
}
.llegada__escena { display: block; width: 100%; height: 100%; }

/* El título se apoya SOBRE la escena y no debajo: lo que hace que esto sea una
   llegada y no una tarjeta con una imagen arriba es que las dos cosas ocupen el
   mismo sitio. Se apoya en el fundido de la propia escena, que es opaco al 92 %
   ahí abajo, así que no hace falta una segunda capa de velo. */
.llegada__titulos {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-5);
  left: var(--sp-6);
  display: grid;
  gap: var(--sp-1);
}
.llegada__ojo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--label-color);
}
.llegada__titulo {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.llegada__cuerpo {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}

.llegada__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.llegada__lead strong { color: var(--text-primary); font-weight: 600; }

/* Las tres decisiones. Van numeradas porque el orden IMPORTA —el destino manda
   sobre contra quién podés jugar— y ésa es la única razón que hace legítimo
   numerar una lista: que la secuencia sea el dato. */
.llegada__pasos { display: grid; gap: var(--sp-4); }
.llegada__pasos li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.llegada__paso-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-wash);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-texto);
}
.llegada__paso-q { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.llegada__paso-q strong { color: var(--text-primary); font-weight: 600; }

.llegada__pie {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dialogo--llegada .dialogo__pie { padding: 0 var(--sp-6) var(--sp-6); }

/* El movimiento: uno solo. El cielo entra desde un poco más abajo y un poco
   más grande mientras el diálogo aparece, que es lo que hace que la escena se
   lea como una ventana que se abre y no como una imagen que ya estaba. */
@media (prefers-reduced-motion: no-preference) {
  .dialogo--llegada[open] .llegada__escena {
    animation: llegada-cielo var(--dur-escena) var(--ease-entrada) both;
  }
}
@keyframes llegada-cielo {
  from { transform: scale(1.06) translateY(6px); opacity: 0; }
}