/* ==========================================================================
   El Camino DT — LA PRETEMPORADA
   --------------------------------------------------------------------------
   La pantalla donde se arma el año. Cuatro zonas y una regla que las gobierna:
   **todo lo que se decide y todo lo que eso produce tienen que verse al mismo
   tiempo.** Un destino que cuesta el 20 % del presupuesto no significa nada si
   hay que cerrar un panel para ver cuánto queda en la caja.

   De ahí sale la retícula: dos columnas anchas para lo que se toca —los
   destinos y la concentración— y una angosta a la derecha, fija, para lo que
   eso deja. La de la derecha no scrollea con las otras: es el marcador.

   Cero tokens nuevos, como el resto del proyecto.
   ========================================================================== */

/* La pantalla ocupa el alto de la ventana y no scrollea: lo que scrollea es
   cada lista dentro de su columna. Misma promesa que el portal y la ficha. */
/* `auto` y no `hidden`: el porqué está en `copa.css`. Acá era el caso más
   grave del juego — medido, más de 2.000 px de gira por debajo del borde y sin
   forma de llegar, en las tres ventanas. */
body { min-height: var(--alto-ventana); overflow: auto; }

.pre {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* --------------------------------------------------------------------------
   LA CABECERA
   --------------------------------------------------------------------------
   La escena a la izquierda y las cifras a la derecha, en una sola placa. La
   escena es una FRANJA y no un fondo: si cubriera la banda entera, el texto
   tendría que pelearle el contraste a un cielo azul, y lo que esta cabecera
   dice —cuánto falta y qué llevás decidido— no puede depender de dónde caiga
   una nube.
   -------------------------------------------------------------------------- */

.pre__cab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
  /* 156 y no 132: la escena está compuesta con el horizonte a la mitad y por
     debajo de 150 el cielo se come el pasto, así que lo que quedaba era una
     franja verde oscura sin nada reconocible adentro. */
  min-height: 156px;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  overflow: hidden;
}

/* El cielo cubre la banda y se apaga hacia la derecha, que es donde viven las
   cifras. Dos degradados y no uno: el de abajo apoya el título y el de la
   derecha despeja los números. */
.pre__escena {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pre__escena svg { display: block; width: 100%; height: 100%; }

/* EL VELO DEJA VER LA ESCENA. La primera versión la tapaba con dos degradados
   que arrancaban en el 30 % y en el 38 %, o sea que de la banda entera quedaba
   reconocible una franja de nada: el cielo apagado, el pueblo apagado y los
   arcos apagados. Un dibujo que hay que adivinar es un dibujo que no está.

   Ahora el velo hace un solo trabajo cada uno y empieza tarde: el de la derecha
   despeja la zona de las cifras y el de abajo apoya el título. En el medio no
   pasa nada, que es donde está la cancha. */
.pre__escena::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 55%, var(--bg-panel) 92%),
    linear-gradient(180deg, transparent 46%, rgb(6 8 14 / 78%) 100%);
}

.pre__titulos { position: relative; z-index: 1; display: grid; gap: var(--sp-1); }
.pre__ojo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--label-color);
}
.pre__titulo {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.pre__linea { font-size: var(--fs-sm); color: var(--text-secondary); }

.pre__cifras {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-7);
  align-items: end;
}
.pre__cifra { display: grid; gap: 1px; text-align: right; }
.pre__cifra dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pre__cifra dd {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   LA CABECERA EN UN TELÉFONO: LAS DOS COLUMNAS NO ENTRAN, Y NO ENTRABAN DESDE
   EL PRIMER DÍA
   --------------------------------------------------------------------------
   `minmax(0, 1fr) auto` reparte bien mientras haya de sobra y se rompe en
   silencio cuando no: la columna `auto` de las cifras se queda con su
   min-content —408px, cuatro cifras en fila— y el `minmax(0, ...)` deja que la
   de los títulos baje HASTA CERO. Con ancho cero el texto no se recorta ni
   desborda la página: se sale de su propia caja y se dibuja ENCIMA de las
   cifras. Medido el 8/9/2026 en la pantalla real:

       ventana 320 … 476   →  grid-template-columns: 0px 392px   ← títulos en 0
       ventana 700         →  151px 448px   (los títulos piden 146 de min-content)
       ventana 860         →  305px 448px

   O sea que estaba pisado en TODOS los anchos de teléfono desde que se escribió,
   y encima la cuarta cifra —«En la caja»— quedaba afuera del `overflow: hidden`.
   Lo vio Alberto en un 17 Pro Max (440), pero el 440 no tiene nada de especial:
   el corte medido está en ~695px de ventana, que es donde los títulos dejan de
   alcanzar su min-content. Se usa 820, que ya es el corte del parte más abajo y
   deja margen sobre el número medido.

   POR QUÉ NINGUNA VARA LO ACUSÓ: los barridos de celular miden desborde, texto
   recortado, contraste y área táctil. Un texto que se sale de una caja de ancho
   cero DENTRO de un panel con `overflow: hidden` no es ninguna de las cuatro.
   Es de la familia de [[lo-que-ninguna-vara-acusa]], y por eso esta tanda deja
   `herramientas/movil-pisados.html`, que mide justamente esto.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .pre__cab {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-4);
  }

  /* LA ESCENA DEJA DE SER UNA CAPA Y PASA A SER LA PRIMERA FILA. Con
     `position: absolute; inset: 0` la escena crece con la placa, y como el
     `<svg>` va con `slice` crecer de ALTO es recortar de ANCHO: a 440 la placa
     medía 200 y del dibujo se veían 459 de las 640 unidades del `viewBox`.
     Puesta en la fila 1 —con los títulos encima, en la misma celda— la franja
     mide exactamente lo que miden los títulos a cualquier ancho, sin ningún
     número mágico, y se ve el dibujo entero de punta a punta. Ver
     [[lo-que-ninguna-vara-acusa]]: en un `slice`, el alto de la caja ES el
     encuadre.

     Los márgenes negativos son para que la franja siga sangrando hasta el
     borde de la placa: como fila de la grilla vive dentro del `padding`, y
     como capa vivía contra el borde. */
  .pre__escena {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    /* `align-items: end` de la regla base también le toca a la escena, y con el
       `<svg>` fuera del flujo eso la deja en alto CERO: el dibujo desaparece
       sin que nada falle. Tiene que estirarse a la fila. */
    align-self: stretch;
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-6)) 0;
  }
  /* El `<svg>` sale de la cuenta del alto. Con `width: 100%; height: 100%` en
     una fila de alto automático, el `height` no resuelve contra nada y el
     dibujo cae en su proporción natural —640×220, o sea 142px a 413 de ancho—,
     que es MÁS de lo que miden los títulos y por lo tanto es la franja la que
     manda sobre la fila. Sacándolo del flujo la fila la miden los títulos y el
     dibujo la rellena; con `slice` eso recorta de alto y no de ancho, que es
     la punta barata: el horizonte está a la mitad de la escena. */
  .pre__escena svg { position: absolute; inset: 0; }
  .pre__titulos { grid-area: 1 / 1; align-self: end; }
  .pre__cifras { grid-area: 2 / 1; }

  /* EL VELO, CON EL NÚMERO CALCULADO Y NO ELEGIDO A OJO. El de la derecha
     despejaba la zona de las cifras, que en el teléfono ya no están a la
     derecha ni sobre la escena: ahí lo único que hacía era lavar el dibujo
     contra el borde. Y el de abajo no alcanza: al hugear la franja a los
     títulos, los tres textos quedan sobre el dibujo de punta a punta, y el
     dibujo tiene BLANCO PURO adentro (el sol y las nubes altas).

     El alfa mínimo, medido el 8/9/2026 componiendo el velo sobre blanco:

         .pre__ojo     13px 600  sobre blanco necesita  0,79   (piso 4,5)
         .pre__titulo  26px 700                         0,49   (piso 3, es grande)
         .pre__linea   15px 400                         0,80   (piso 4,5)  ← manda

     Va 0,82 arriba y 0,90 abajo: por encima del peor de los tres en todo el
     alto, sin depender de DÓNDE caiga el sol. Es la regla de
     [[la-punta-peor-de-un-degradado]]: acotar no es medir. El precio es que en
     el teléfono la escena se lee como una textura y no como un cuadro — que es
     lo que dice la regla de arriba: el texto no puede pelearle el contraste a
     un cielo. */
  .pre__escena::after {
    background: linear-gradient(180deg, rgb(6 8 14 / 82%), rgb(6 8 14 / 90%));
  }

  /* Dos y dos, y a la izquierda. En fila piden 408px de min-content y el panel
     tiene 382 de contenido a 440 de ventana y 262 a 320: no entran en ninguno
     de los dos, y la cuarta —«En la caja»— se la comía el `overflow: hidden`.
     El `text-align: right` era de cuando colgaban del borde derecho. */
  .pre__cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
    align-items: start;
  }
  .pre__cifra { text-align: left; }
}

/* --------------------------------------------------------------------------
   EL CUERPO
   -------------------------------------------------------------------------- */

/* DOS COLUMNAS POR ETAPA, Y NUNCA LOS CUATRO BLOQUES A LA VEZ.
   Eran tres columnas con los cuatro bloques puestos siempre, y el dueño lo
   nombró: «se ve todo muy amontonado». No era el reparto —era la cuenta. En
   1900px, cuatro bloques con su marco, su cabecera y su padding dejan a cada
   uno con menos de lo que su contenido pide: la lista de cincuenta y seis
   destinos en una columna de 320, y la concentración con un scroll adentro.

   Desde que la gira se arma UNA SOLA VEZ, los cuatro no tienen por qué convivir:
   dos son de antes de arreglarla y dos de después. Cada etapa reparte el ancho
   entre dos, no entre cuatro, y nadie necesita scroll propio.

   Lo decidido no se pierde al esconder sus bloques: dónde, cuántos días, cuántos
   amistosos y cuánta plata son las cuatro cifras de la cabecera, que está
   siempre. Es el sitio donde vive lo que ya no se toca. */
.pre__cuerpo {
  display: grid;
  gap: var(--sp-5);
  min-height: 0;
}

/* ETAPA 1 · ARMAR — una columna por decisión, y las tres enteras.
   Primero se probó con dos, apilando el plan y lo que deja en la derecha, y la
   medición lo tiró: la columna da 532px y esos dos bloques piden 818 juntos, así
   que el botón que arregla la gira quedaba por debajo del borde. Dos bloques
   apilados en una columna de alto fijo es la trampa de siempre —«una lista por
   columna, nunca el panel»— y acá la pagaba el control que cierra la etapa.

   Tres columnas no es lo que estaba amontonado. Lo que estaba amontonado eran
   CUATRO bloques en tres columnas, con una partida al medio: cada uno con su
   marco, su cabecera y su padding, y ninguno con el alto que su contenido pide.
   Acá hay tres bloques y tres columnas: cada decisión entera, de arriba abajo. */
.pre__cuerpo[data-etapa='armar'] {
  grid-template-columns: minmax(360px, 1.24fr) minmax(320px, 1fr) minmax(300px, 0.94fr);
  grid-template-areas: 'donde plan deja';
  grid-template-rows: minmax(0, 1fr);
}
.pre__cuerpo[data-etapa='armar'] .pre__bloque--gira,
.pre__cuerpo[data-etapa='armar'] .pre__bloque--cuerpo { display: none; }

/* ETAPA 1 bis · LA PROPUESTA — el mismo reparto que la concentración y por el
   mismo motivo: acá no se elige entre sesenta países, se lee UN plan y se
   contesta. Los dos bloques de armar se van y la propuesta se lleva su ancho,
   porque lo que ocupa sitio no son los precios sino los porqués, y un porqué es
   un renglón de texto que necesita medida de lectura. */
.pre__cuerpo[data-etapa='propuesta'] {
  grid-template-columns: minmax(420px, 1.35fr) minmax(340px, 1fr);
  grid-template-areas: 'cuerpo deja';
  grid-template-rows: minmax(0, 1fr);
}
.pre__cuerpo[data-etapa='propuesta'] .pre__bloque--donde,
.pre__cuerpo[data-etapa='propuesta'] .pre__bloque--plan,
.pre__cuerpo[data-etapa='propuesta'] .pre__bloque--gira { display: none; }

/* ETAPA 2 · LA CONCENTRACIÓN — ya no hay nada que elegir salvo los amistosos,
   así que la tira de días y sus filas se llevan el ancho de los dos bloques que
   se fueron. Es la etapa donde el DT pasa el tiempo. */
.pre__cuerpo[data-etapa='concentracion'] {
  grid-template-columns: minmax(420px, 1.35fr) minmax(340px, 1fr);
  grid-template-areas: 'gira deja';
  grid-template-rows: minmax(0, 1fr);
}
.pre__cuerpo[data-etapa='concentracion'] .pre__bloque--donde,
.pre__cuerpo[data-etapa='concentracion'] .pre__bloque--plan,
.pre__cuerpo[data-etapa='concentracion'] .pre__bloque--cuerpo { display: none; }

/* La última fila de cada bloque —la lista— se lleva lo que sobra. Sin esto el
   bloque medía su contenido y la lista de destinos quedaba en dos renglones con
   media columna de aire debajo: el sitio estaba, no lo tomaba nadie. */
.pre__bloque {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--sp-4);
  min-height: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  /* Le dice a la banda de cabecera cuál es su relleno, que no es el de
     `.tarjeta`: acá los cuatro lados son `--sp-5`. Ver `app.css`. */
  --caja-pad-x: var(--sp-5);
  --caja-pad-top: var(--sp-5);
}
/* CUATRO FILAS Y NO TRES, desde que la puerta a la propuesta del cuerpo técnico
   vive acá arriba. `.pre__bloque` declara tres —cabecera, filtros, lista— y con
   un hijo de más el navegador le da al TERCERO el `minmax(0, 1fr)` y al cuarto
   un `auto`: la fila de filtros se quedó en 0px y la lista, que ya se desplaza
   sola, se llevó los 430. Las siete pestañas desaparecían sin dejar hueco, que
   es la manera en que este defecto no se ve hasta que se busca. */
.pre__bloque--donde { grid-area: donde; grid-template-rows: auto auto auto minmax(0, 1fr); }
/* `auto auto` y no `auto minmax(0, 1fr)` era el hueco de trescientos píxeles
   entre «El plan» y el primer dial: con dos filas automáticas en una columna más
   alta que su contenido, la retícula reparte el sobrante ENTRE LAS DOS, así que
   la de la cabecera se estiraba y empujaba todo hacia abajo. La segunda fila se
   lleva el sobrante y la cabecera mide lo que mide. */
.pre__bloque--plan  { grid-area: plan; grid-template-rows: auto minmax(0, 1fr); }
.pre__bloque--cuerpo { grid-area: cuerpo; grid-template-rows: auto minmax(0, 1fr); }
.pre__bloque--gira  { grid-area: gira; grid-template-rows: auto minmax(0, 1fr); }
/* LA COLUMNA DEL EFECTO SE APILA Y EMPUJA EL PIE ABAJO, y por eso es un flex y
   no la retícula de los otros tres bloques. Con filas de retícula había que
   elegir cuál era `1fr`, y la que fuera se llevaba el sobrante: puesto en el
   pie, las medidas se apretaban a 144px y su contenido se metía por encima de
   la plata; puesto en las medidas, el botón que cierra el año flotaba en el
   medio de la columna.

   Apilado, cada cosa mide lo suyo y el `margin-top: auto` del pie se come el
   aire que sobra. Es la misma solución que el pie de una tarjeta de FM26. */
.pre__bloque--deja {
  grid-area: deja;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pre__bloque--deja .pre__pie { margin-top: auto; }

/* LAS NOTAS DE LAS BARRAS NO VAN EN LA ETAPA DE ARMAR, y no es por espacio: es
   que ahí no dicen nada. Explican qué alimenta cada barra —«lo dan los
   amistosos», «los días juntos y los partidos»— y mientras la gira no está
   arreglada NO SE PUEDEN concertar amistosos, así que las tres dicen lo mismo
   todos los días. En la concentración, donde los amistosos entran y salen y las
   barras se mueven con ellos, sí valen y están.

   De paso son los 63px que hacían que el aviso del pie quedara cortado. */
/* Y EN LA PROPUESTA TAMPOCO, por lo mismo llevado un paso más lejos: ahí los
   amistosos ni siquiera están concertados, así que «llevás 2» sería contarle al
   DT dos partidos que todavía no arregló nadie. Lo que esas barras miden en esa
   etapa es lo que dejaría el plan de ellos, y eso ya lo dicen las tres palabras
   —«Rodado», «En construcción», «98 %»— sin ninguna nota. */
.pre__cuerpo[data-etapa='armar'] .pre__medida .pre__pista,
.pre__cuerpo[data-etapa='propuesta'] .pre__medida .pre__pista { display: none; }

/* LA VÁLVULA. Con las tres columnas y lo recortado, esta columna entra de sobra
   en una ventana de 900; en una de 700 no entraría ninguna cosa que le pongas.
   Que se desplace la zona de las medidas y NUNCA el panel: el pie queda clavado
   abajo con su `margin-top: auto` y el botón que arregla la gira no se va del
   borde. Es la regla de una lista por columna, que en este juego ya se pagó. */
.pre__bloque--deja .pre__deja {
  min-height: 0;
  overflow-y: auto;
  /* `flex: 0 0 auto` más abajo la clavaba a su alto natural, así que en una
     ventana de 800 la válvula no abría: la columna medía 440 con 517 adentro y
     el que se salía por abajo era el pie, con el botón. Un `min-height: 0` sin
     dejarla encoger no es una válvula, es un comentario. */
  flex: 1 1 auto;
}

/* Cuando la ventana no da para dos columnas, la del efecto baja entera y la
   otra se lleva el ancho. Se apila el efecto y no la decisión porque el efecto
   es consecuencia: se lee después de haber decidido. */
/* NO HAY UN QUIEBRE INTERMEDIO A DOS COLUMNAS, y se probó: apilar el plan y lo
   que deja en una columna es exactamente la trampa que las tres columnas vienen
   a evitar, y a 1280 volvía a dejar el botón por debajo del borde. Las tres
   entran de sobra —980px de mínimos contra los 1092 que da la ventana chica con
   el zoom del sitio puesto— así que el único quiebre es el de apilar todo. */
@media (max-width: 1180px) {
  .pre__cuerpo[data-etapa='armar'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'donde' 'plan' 'deja';
    grid-template-rows: auto auto auto;
  }
  /* `auto auto`, NO `minmax(0, 1fr) auto`. Apilada, la retícula del cuerpo ya
     no tiene alto definido —`body` pasa a `height: auto` tres renglones más
     abajo—, y un `1fr` con mínimo CERO en un contenedor de alto indefinido
     deja que la fila se derrumbe: medido el 8/9/2026 a 320, 390 y 440, la
     concentración quedaba en 27px con una cabecera de 32. O sea que en el
     teléfono la tira de días y los amistosos NO SE VEÍAN, y encima el título
     del panel de al lado se dibujaba sobre el suyo. Las otras dos etapas ya
     usaban `auto` y por eso no les pasaba: esta fila es la que quedó escrita
     para el reparto de DOS COLUMNAS, donde `1fr` sí quería decir algo. */
  .pre__cuerpo[data-etapa='concentracion'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'gira' 'deja';
    grid-template-rows: auto auto;
  }
  .pre__cuerpo[data-etapa='propuesta'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cuerpo' 'deja';
    grid-template-rows: auto auto;
  }
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }

  /* Y CON LA PÁGINA SCROLLEANDO HAY QUE DESARMAR EL ARMAZÓN DE ALTO FIJO, o el
     renglón de arriba no sirve de nada. `.pre` es `flex: 1 1 0` dentro de un
     `body` en columna y su cuerpo es `minmax(0, 1fr)`: aunque el `body` mida
     `auto`, `.pre` se sigue estirando al alto de la ventana y su fila de
     cuerpo sigue valiendo ese alto. Los bloques entonces se REPARTEN un alto
     prestado en vez de medir el suyo.

     Medido el 8/9/2026 a 440, en la etapa de concentración, antes de esto:
     las dos filas quedaban en 237px cada una y «Cómo llegás a la fecha 1»
     mostraba 0 de sus 248px de contenido — el panel entero adentro de un
     scroller de alto cero. Con las filas en `auto` cada bloque mide lo suyo y
     lo que se desplaza es la página, que es lo que la regla de arriba quiso
     decir.

     Los dos scrollers internos se apagan por lo mismo: existen para repartir
     un alto escaso, y acá ya no hay alto escaso sino página. */
  .pre { flex: 0 0 auto; grid-template-rows: auto auto; }
  .pre__gira, .pre__deja { overflow: visible; }

  /* Y LA LISTA DE DESTINOS CONSERVA SU SCROLLER, CON TECHO. Apilada, las filas
     de `.pre` pasan a `auto` y ahí nada limita la lista: un `overflow: auto`
     sin caja que lo apriete no rueda nunca, se estira. Medido a 1100×660: la
     lista se dibujaba entera —3.058 px— y la pantalla pasaba a medir 3.324.
     Sesenta y dos destinos en una página de tres mil trescientos píxeles no es
     una lista, es un tour.

     El techo es `60dvh` y no un número en píxeles: lo que hay que conservar es
     la proporción —que se vea la lista Y lo que hay debajo— y eso depende de
     la ventana, no de una medida fija. Con él, la pantalla apilada vuelve a
     medir lo que mide el resto de su contenido y los 62 destinos se recorren
     donde están. */
  .pre__destinos { max-height: 60dvh; }
}

/* UN RÓTULO QUE ES UNA FRASE NO SE ESCRIBE EN VERSALITAS.
   `.label` —el rótulo chico del juego, en mayúscula y con tracking— está hecho
   para una palabra: de los ochenta y pico que hay en el código, cuarenta y
   cuatro son de una sola y diecinueve de dos. Los dos más largos de todo el
   juego eran los de esta pantalla, «Cuántos días concentra el plantel» y «Lo
   que el promotor te paga por ir», de cinco y ocho palabras. Una frase de ocho
   palabras en mayúscula con tracking no es un rótulo: es un grito, y encima
   ocupa dos renglones donde el original ocupaba uno.

   Mismo tamaño y mismo color que `.label` —sigue siendo el texto chico que
   acompaña a una cifra grande— pero en la caja y el espaciado con que se
   escribe una oración. Donde el rótulo SÍ es una palabra («Días», «Piernas»,
   «Dónde») se sigue usando `.label`, que es para lo que está. */
.pre__rotulo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   1 · LOS DESTINOS
   -------------------------------------------------------------------------- */

.pre__filtros { flex-wrap: wrap; }

.pre__destinos {
  display: grid;
  align-content: start;
  gap: 1px;
  min-height: 0;
  /* EL SCROLLER SE QUEDA, Y ESO ES UNA DECISIÓN. Son 62 destinos ordenados
     por lo que dejan, de los que se ven trece: una lista que se recorre, no
     una estructura partida al medio. El patrón correcto para una lista larga
     es su scroller — y por eso el cuadro de los torneos y el resumen del
     mercado perdieron el suyo el mismo día y éste no.

     LO QUE SÍ SE LE SACA ES LA CONTENCIÓN DEL GESTO: al llegar al final, la
     rueda sigue de largo hasta la página en vez de morirse acá. Es el mismo
     arreglo que la tarjeta de noticias del portal, donde un `contain` sobre
     una caja sin nada que rodar dejaba la pantalla entera sin scroll.

     (Y MIRÉ SI DESPERDICIABA ALTO, PORQUE LO PARECÍA: el bloque mide 833 px y
     la lista 677. Los 156 de diferencia son las tres filas de cabecera del
     bloque, no aire — la lista ya se queda con el `minmax(0, 1fr)` de abajo.
     Queda anotado para el próximo que haga la misma cuenta.)

     Y EL `overflow-y: auto` DE ACÁ ABAJO SE ME CAYÓ EN UNA EDICIÓN mientras
     escribía este mismo comentario: quedó el texto diciendo que el scroller se
     quedaba y el código sin él. La lista pasó a dibujarse entera —3.058 px— y
     con ella la pantalla, que bajaba 2.297. Un comentario que promete lo
     contrario de lo que hace el código es peor que no tener comentario. */
  overflow-y: auto;
  overscroll-behavior: auto;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
}

/* EN EL TELÉFONO LA LISTA NO RUEDA ADENTRO: rueda la página. Con el dedo, una
   caja de 60dvh que se desplaza sola dentro de otra que también se desplaza es
   una trampa: el pulgar que quiere bajar hasta «El plan» mueve la lista, y el
   que quiere recorrer la lista mueve la página si cae un píxel afuera. Un
   jugador lo reportó desde Android el 25/9/2026 como «imposible jugar» al
   elegir destino y monto. Acá la lista se dibuja entera —el filtro de arriba
   ya la recorta a los que tocan— y el único scroll es el de la página. */
@media (max-width: 560px) {
  .pre__destinos { max-height: none; overflow-y: visible; }
  /* Y SE CORTA EN OCHO: los que siguen quedan detrás del botón de abajo. El
     elegido nunca lleva la marca, así que siempre se ve. */
  .pre__destino[data-resto] { display: none; }
}
/* El botón existe sólo en el teléfono: arriba de 560 la lista rueda en su caja
   y no se corta. */
.pre__destinos-mas { width: 100%; justify-content: center; }
@media (min-width: 561px) {
  .pre__destinos-mas { display: none; }
}

/* La fila del destino: quién a la izquierda y cuatro cifras a la derecha, cada
   una con su rótulo debajo. Los rótulos van DEBAJO y no delante porque son
   cuatro columnas de números que se comparan hacia abajo entre filas: un rótulo
   por celda repetido treinta veces sería ruido, pero sin ninguno las cuatro
   cifras son cuatro números sin nombre. */
.pre__destino {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: var(--bg-panel);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .pre__destino:hover { background: var(--bg-hover); }
}
.pre__destino:focus-visible { outline-offset: -2px; }
.pre__destino[aria-checked='true'] { background: var(--bg-selected); }
.pre__destino[aria-checked='true'] strong { color: var(--accent-texto); }
/* El que la caja no aguanta se ve igual —saber que existe Japón es parte de la
   decisión— pero se apaga. No se esconde: un destino que desaparece deja al DT
   preguntándose si lo soñó. */
.pre__destino[data-lejos] { opacity: 0.5; }

.pre__destino-quien { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pre__destino-quien > span { display: grid; gap: 0; min-width: 0; }
.pre__destino-quien strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre__destino-quien small {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre__bandera { width: 20px; height: 14px; flex: none; border-radius: var(--r-hair); }
.pre__destino .crest { width: 18px; height: 20px; flex: none; --halo: 0.25px; }

.pre__destino-dato { display: grid; gap: 0; text-align: right; min-width: 58px; }
.pre__destino-dato b {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
/* `--text-muted` Y NO `--text-disabled`, y es el hallazgo más repetido de todo
   el barrido de contraste del 10/9/2026: este renglón —«cuesta», «ponen», «si
   cierra bien», «rivales», uno por cada destino de la gira— daba **244 de los
   254 hallazgos** de la pantalla entera, a 2,87:1 contra un piso de 4,5. No es
   texto apagado: es el rótulo que dice qué significa la cifra de al lado. */
.pre__destino-dato small { font-size: var(--fs-2xs); color: var(--text-muted); }
.pre__destino-dato[data-tono='bueno'] b { color: var(--verde-300); }
.pre__destino-dato[data-tono='malo'] b { color: var(--clay-300); }

/* EN EL TELÉFONO EL DESTINO SE PARTE EN DOS RENGLONES, y el motivo es que en
   uno solo el nombre se quedaba SIN NADA.

   La fila es `minmax(0, 1fr) repeat(4, auto)`: el nombre en la primera y las
   cuatro cifras en columnas `auto`, que se llevan lo que su contenido pida. Y
   piden mucho —«si cierra bien», «rivales», «cuesta», «ponen», más las cifras—:
   medido a 390 sobre un botón de 336px, las cuatro y la bandera se llevaban
   TODO y a la columna del nombre le quedaban 0 píxeles. Con `overflow: hidden`
   encima, «En el predio» y «En tu predio, sin viajar» no se veían: no estaban
   recortados con puntos suspensivos, estaban en cero.

   Y eso es lo que lo vuelve grave y no cosmético: el nombre del destino es LO
   QUE ESTÁS ELIGIENDO. Una opción sin rótulo es una decisión a ciegas.

   El piso de `minmax(0, …)` está bien y no se toca: es lo que evita que la fila
   empuje la página de costado. Lo que hay que sacar del renglón son las cuatro
   cifras, no achicar el nombre. */
@media (max-width: 560px) {
  .pre__destino {
    /* NO SON CUATRO IGUALES: los rótulos no miden lo mismo. Repartidas en
       partes iguales, «si cierra bien» —el más largo— doblaba en dos renglones
       y estiraba las SESENTA Y DOS filas. Con la tercera un poco más ancha y la
       de los rivales un poco más angosta, los cuatro entran en un renglón. */
    grid-template-columns: 1fr 1fr 1.25fr 0.75fr;
    row-gap: var(--sp-3);
  }
  .pre__destino-quien { grid-column: 1 / -1; }
  /* Sin el piso de 58 las cuatro reparten en partes iguales el ancho entero, que
     es más de lo que tenían antes. */
  .pre__destino-dato { min-width: 0; }
}

/* --------------------------------------------------------------------------
   2 · EL PLAN
   -------------------------------------------------------------------------- */

/* Los dos mandos miden lo suyo y la zona de los rivales se lleva lo que sobre
   de la columna, con su propio desplazamiento si la ventana es baja: una lista
   por columna, nunca el panel. */
.pre__plan {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--sp-5);
  min-height: 0;
}

.pre__mando { display: grid; gap: var(--sp-3); }
.pre__mando[data-apagado] { opacity: 0.55; }
.pre__mando-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }

.pre__cifra-grande {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.pre__pista { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-muted); }
.pre__pista strong { color: var(--text-secondary); }
.pre__pista--cierre { padding-top: var(--sp-2); border-top: 1px solid var(--line-hairline); }

/* El dial de los dos mandos lo dibuja `controles.css`: es del sistema desde que
   la mesa lo usa para la garantía de un amistoso. Acá no queda una sola regla
   suya, que es como tiene que ser. */

/* --------------------------------------------------------------------------
   3 · LA CONCENTRACIÓN
   --------------------------------------------------------------------------
   Una tira arriba y las filas que se tocan debajo. La primera versión listaba
   los días uno por renglón: entre diez y veintiocho, de los cuales cinco como
   mucho se pueden tocar, y lo accionable quedaba enterrado bajo el trabajo —que
   además no se decide acá—. En una ventana de 1050 eso dejaba los amistosos
   fuera de la pantalla, que es el defecto que el dueño nombró: «la parte baja
   sigue oculta y difícil de entender e interactuar».
   -------------------------------------------------------------------------- */

/* `minmax(0, 1fr)` Y NO LA COLUMNA `auto` DE SIEMPRE, desde el 26/9/2026. La
   tira de abajo reparte sus días en `1fr`, y una grilla de `fr` le pide a su
   madre el ancho de su contenido ENTERO: catorce días daban 348 px. Con la
   columna en `auto` ese pedido se cumplía, el bloque se ensanchaba y todo lo
   de adentro —el aviso de «todavía no arreglaste ninguno», el botón de sumar—
   se cortaba por la derecha: a 360 px, 32 px afuera. Lo vio un jugador desde
   un iPhone, con el texto mordido. Con el mínimo en cero la columna mide lo
   que mide la tarjeta y los días se achican para entrar. */
.pre__gira { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-4); min-height: 0; overflow-y: auto; }

/* LA TIRA. Un día por columna, todos del mismo ancho: lo que se lee acá es la
   FORMA de la concentración —dónde caen los partidos, cuántos días seguidos de
   carga hay antes— y para eso los días tienen que ser comparables entre sí. */
.tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-1);
}
.tira__dia {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  border-radius: var(--r-hair);
  background: var(--ink-850);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-disabled);
}
.tira__dia b { font-weight: 600; }
.tira__dia .crest { width: 15px; height: 17px; --halo: 0.25px; }

/* Los cinco estados, en BRILLO y no en colores: es la misma rampa con la que el
   calendario dice la carga de una sesión, y el acento sigue teniendo sus tres
   trabajos. El único con color propio es el partido, que además lleva el escudo
   del rival — es lo único de la tira que se decidió. */
.tira__dia[data-tipo='trabajo'] { background: var(--ink-800); color: var(--text-muted); }
.tira__dia[data-tipo='duro']    { background: var(--ink-700); color: var(--text-secondary); }
.tira__dia[data-tipo='viaje']   { background: var(--ink-850); color: var(--text-disabled); }
.tira__dia[data-tipo='partido'] { background: var(--accent-wash); color: var(--accent-texto); }

.tira__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  /* La leyenda de la tira dice qué es cada color: es la llave del dibujo, no un
     control apagado. Con `--text-disabled` daba 2,67–2,87:1. */
  color: var(--text-muted);
}
.tira__leyenda span {
  width: 10px;
  height: 10px;
  border-radius: var(--r-hair);
  margin-right: calc(var(--sp-2) * -1);
}
.tira__leyenda span[data-tipo='trabajo'] { background: var(--ink-800); }
.tira__leyenda span[data-tipo='duro']    { background: var(--ink-700); }
.tira__leyenda span[data-tipo='descanso']{ background: var(--ink-850); }
.tira__leyenda span[data-tipo='viaje']   { background: var(--ink-850); }
.tira__leyenda span[data-tipo='partido'] { background: var(--accent-wash); }

/* LAS FILAS QUE SE TOCAN. Alto de control y superficie propia: son lo único de
   este bloque que acciona. */
.pre__partidos { display: grid; gap: var(--sp-2); }

.pre__partido-fila {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
}

.pre__partido-cuando { display: grid; gap: 0; text-align: center; }
.pre__partido-cuando b {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
/* Mismo cambio y mismo motivo que el de `.pre__destino-dato small`: es la fecha
   del amistoso, no un control apagado. No apareció en el barrido porque en esa
   corrida no había amistosos pintados, y por eso se corrige junto con el otro y
   no cuando alguien lo vuelva a ver. */
.pre__partido-cuando small { font-size: var(--fs-2xs); color: var(--text-muted); }

.pre__partido { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pre__partido .crest { width: 24px; height: 27px; flex: none; --halo: 0.3px; }
.pre__partido-quien { display: grid; gap: 0; min-width: 0; }
.pre__partido-quien strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre__partido-quien small {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El tiempo del día del partido. Va entre el rival y los modos porque es un
   dato DE ese partido y no una acción: se lee al pasar, como la sede. */
.pre__clima {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pre__clima .i { color: var(--text-secondary); }

.pre__modos { flex: none; }

/* Y LO QUE VA EN SU LUGAR CUANDO YA NO SE PUEDEN MIRAR. Ocupa la misma columna
   que los modos y se lee como el clima —un dato de la fila, no un control—
   porque eso es lo que pasó a ser: el amistoso sigue ahí y lo resuelve el
   cierre. Sin esto la fila quedaba con un hueco de 200 px y la cruz suelta
   contra el borde, que se lee como un control que se rompió. */
.pre__resuelve {
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* El botón de sumar es una fila más y no un renglón de texto con un enlace: lo
   que hace es lo mismo que hacen las filas de arriba —poner un partido— y tiene
   que verse como una de ellas. */
.pre__sumar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: var(--sp-3);
  text-align: left;
  /* PARTE RENGLÓN, desde el 26/9/2026. `.action` no parte, y la aclaración en
     inglés —«4 left; the promoter sets the day»— pedía 364 px en un teléfono
     de 360: salía cortada por la derecha, y con ella el ancho de la tarjeta.
     Primero baja la aclaración entera; recién si tampoco entra sola, se
     parte. */
  flex-wrap: wrap;
  row-gap: var(--sp-1);
  white-space: normal;
}
/* La aclaración del botón —«quedan 2; el día lo elige el rival»— es la mitad de
   lo que ese control te dice, y el botón NO está inhabilitado: con
   `--text-disabled` quedaba en 2,87:1. */
.pre__sumar small { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; }

.pre__vacio {
  padding: var(--sp-5);
  background: var(--bg-panel);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.pre__vacio--chico { padding: var(--sp-4) 0; }

/* --------------------------------------------------------------------------
   3 bis · QUE LA ARME EL CUERPO TÉCNICO
   --------------------------------------------------------------------------
   Dos superficies y ninguna nueva en el sistema: la PUERTA, que es una fila
   como las del destino pero acentuada, y la PROPUESTA, que son tres tiles, una
   lista de firmas y los pedidos.

   La propuesta se lee, no se opera. Por eso el texto manda sobre la cifra: las
   tres tiles de arriba dicen qué se decidió en tres palabras y todo lo demás
   es prosa con una cara al lado. Es la única zona de esta pantalla donde el
   renglón largo es lo correcto — un porqué no cabe en una etiqueta.
   -------------------------------------------------------------------------- */

/* LA PUERTA. Acentuada y no gris: es una oferta, y una oferta apagada al lado
   de sesenta países en fila no la ve nadie. El borde punteado la separa de las
   filas de destino que vienen abajo — se parece a ellas pero no es una de
   ellas, y esa diferencia tiene que verse antes de leerla. */
.pre__ellos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--bg-selected);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .pre__ellos:hover { background: var(--bg-hover); }
}
.pre__ellos .i { color: var(--accent-texto); }
.pre__ellos-que { display: grid; gap: 1px; min-width: 0; }
.pre__ellos-que strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-texto);
}
.pre__ellos-que small {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* La salida de la etapa, en la cabecera del bloque. Un botón de texto y no una
   acción: irse a armarla a mano no es lo que la pantalla propone. */
.pre__salida {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .pre__salida:hover { color: var(--text-primary); }
}

/* La columna de la propuesta: lo decidido arriba, los porqués en el medio y lo
   que el DT puede contestar abajo. Se desplaza LA ZONA y no el panel —una
   lista por columna— y el bloque de opinar queda clavado al pie, que es donde
   tiene que estar lo accionable. */
.pre__propuesta {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-5);
  min-height: 0;
}

.pre__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.pre__tile {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-page);
}
.pre__tile-que { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pre__tile-que b {
  font-size: var(--fs-md);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre__tile p { font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--text-muted); }
.pre__tile .crest { width: 16px; height: 18px; flex: none; --halo: 0.25px; }
.pre__tile .pre__bandera { flex: none; }
/* Los escudos de los rivales en fila, que es lo único que hace falta para
   reconocer contra quiénes se va a jugar sin leer tres nombres. */
.pre__tile-escudos { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* LAS FIRMAS. Cada decisión con la cara del que la tomó, y en ese orden: primero
   quién habla y después qué dice. Al revés —la frase y la firma abajo, como una
   cita— se lee como texto del juego y no como alguien contestando. */
.pre__razones {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  min-height: 0;
  overflow-y: auto;
}
.pre__razon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); }
.pre__razon-cara {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-selected);
  color: var(--accent-texto);
}
.pre__razon-cara .i { width: 15px; height: 15px; }
.pre__razon-que { display: grid; gap: 1px; min-width: 0; }
.pre__razon-quien {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}
.pre__razon-quien b { color: var(--text-secondary); }
.pre__razon-dice { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-secondary); }

/* OPINAR. Los pedidos son botones mientras se pueden hacer y se convierten en
   la respuesta cuando se hicieron: el sitio donde estaba el botón es el sitio
   donde aparece lo que contestaron, así que no hay que buscar la respuesta en
   otro lado ni queda un botón muerto. */
.pre__opinar { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pre__pedidos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.pre__pedido {
  display: grid;
  gap: 1px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .pre__pedido:hover { background: var(--bg-hover); }
}
.pre__pedido strong { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); }
.pre__pedido small { font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--text-muted); }

/* La respuesta ocupa el sitio del botón. El color dice sí o no de un vistazo y
   la frase dice por qué, que es lo que de verdad se lee. */
.pre__dicho {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-page);
}
.pre__dicho[data-ok='1'] { border-left-color: var(--verde-300); }
.pre__dicho[data-ok=''] { border-left-color: var(--clay-300); }
.pre__dicho-quien { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.pre__dicho-dice { font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   4 · CÓMO LLEGÁS
   -------------------------------------------------------------------------- */

/* SIN SCROLL. Esta columna es el marcador de la pantalla: las tres medidas, la
   plata y el botón que cierra el año. Un scroller acá esconde justamente lo que
   la columna existe para mostrar, y encima corta la barra de una medida al
   medio — que es peor que no dibujarla.

   Lo que cede si no entra es el AIRE entre las medidas, no la información: son
   tres barras, dos renglones de plata y un botón, y eso entra en cualquier
   ventana en la que el juego se pueda jugar. */
.pre__deja { display: grid; align-content: start; gap: var(--sp-5); flex: 0 0 auto; }

.pre__medida { display: grid; gap: var(--sp-2); }
.pre__medida-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pre__medida-cab b {
  font-size: var(--fs-md);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
}

/* La barra no es un adorno: es lo que deja comparar de un vistazo tres escalas
   distintas —ritmo, cohesión y piernas— que en cifras no se comparan. Va en
   BRILLO y no en acento, misma regla que la rampa de atributos. */
.pre__barra {
  height: 4px;
  border-radius: var(--r-hair);
  background: var(--ink-800);
  overflow: hidden;
}
.pre__barra span { display: block; height: 100%; background: var(--text-secondary); }

.pre__riesgo {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.pre__riesgo strong { color: var(--warn); }

.pre__pie { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
/* EL RENGLÓN DE PLATA: rótulo a la izquierda, cifra a la derecha y alineada al
   dígito. Estas reglas se perdieron una vez al mover el dial a la hoja
   compartida, y el síntoma fue el de siempre con un `<dl>`: sin `display: flex`,
   `dt` y `dd` vuelven a ser bloques y la cifra cae debajo del rótulo con la
   sangría que el navegador le pone al `dd`. */
.pre__renglon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pre__renglon dt { min-width: 0; }
.pre__renglon dd {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-secondary);
}
.pre__renglon dd[data-tono='bueno'] { color: var(--verde-300); }
.pre__renglon dd[data-tono='malo'] { color: var(--clay-300); }
.pre__renglon--fuerte { font-size: var(--fs-sm); color: var(--text-secondary); }
.pre__renglon--fuerte dd { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }

.pre__balance { display: grid; gap: var(--sp-1); align-content: center; }

.pre__caja {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-1);
}

/* El botón que cierra el año. Es el único de la pantalla que ocupa el ancho
   entero y el único en relleno pleno: todo lo de arriba se puede deshacer y
   esto no. */
.action--grande {
  width: 100%;
  height: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.pre__aviso { font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--text-muted); }

/* Jugada, la pantalla se mira y no se toca. Los controles se apagan de verdad
   —no basta con que no hagan nada— o el DT prueba y se queda esperando. */
.pre[data-hecha] .pre__destino,
.pre[data-hecha] .range__input,
.pre[data-hecha] .pre__modos,
.pre[data-hecha] .pre__veredicto .action,
.pre[data-hecha] [data-f='sumar'],
.pre[data-hecha] [data-quitar] { pointer-events: none; opacity: 0.5; }

/* --------------------------------------------------------------------------
   CONTRA QUIÉN PODRÍAS JUGAR
   -------------------------------------------------------------------------- */

/* SE DESPLAZA LA LISTA Y NO LA ZONA. Con el `overflow` puesto acá, lo que se
   iba abajo del corte era el pie —«de 170 en la plaza»—, que es justamente la
   cuenta que explica de dónde salen los seis: la única línea que no se podía
   perder era la que se perdía. Tres filas: el rótulo, la lista que se lleva lo
   que sobre, y el pie clavado abajo. */
.pre__rivales {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  min-height: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}
.pre__rivales-lista { display: grid; align-content: start; gap: 1px; min-height: 0; overflow-y: auto; }
.pre__rivales-lista li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.pre__rivales-lista .crest { width: 17px; height: 19px; flex: none; --halo: 0.25px; }
.pre__rival-quien { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La palabra con el color de la respuesta, el mismo que usa la franja del
   veredicto: verde si aceptan, ámbar si lo piensan. */
.pre__rival-dice { flex: none; font-size: var(--fs-2xs); font-weight: 700; }
.pre__rival-dice[data-r='si'] { color: var(--verde-400); }
.pre__rival-dice[data-r='quiza'] { color: var(--warn); }

/* --------------------------------------------------------------------------
   EL PARTE
   --------------------------------------------------------------------------
   Es lo último que el DT ve de un sistema que estuvo armando cuatro semanas, y
   lo que ve ahí es con lo que arranca el año. Era el diálogo genérico de sí o
   no, de quinientos píxeles, con las tres medidas convertidas en una oración.

   Acá tiene su propia caja: la escena arriba —la misma cancha con conos de la
   cabecera de la pantalla, que es lo que ata las dos cosas—, el título encima,
   y abajo tres zonas que cuentan las tres cosas que pasaron: cómo quedó el
   plantel, cómo salieron los partidos y qué dejó en la caja y en la enfermería.

   NO ES UNA PANTALLA. Se lee una vez, se cierra y detrás empieza la temporada;
   por eso sigue siendo un `<dialog>` y no un `.html` propio, como la
   bienvenida del presidente. Lo que cambió es el tamaño y el detalle, no la
   naturaleza. */

.pre-parte {
  width: min(940px, calc(100vw - 2 * var(--sp-6)));
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-6));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  color: var(--text-secondary);
  box-shadow: var(--sombra-modal);
}
.pre-parte::backdrop { background: var(--velo); }

/* --- LA CABECERA ------------------------------------------------------- */

.pre-parte__cab {
  position: relative;
  display: grid;
  gap: var(--sp-1);
  /* Alto mínimo para que la escena tenga banda: con sólo el ojo, el título y
     la línea, la cabecera mide noventa y la cancha con los conos no entra. */
  min-height: 168px;
  align-content: end;
  padding: var(--sp-6);
  padding-bottom: var(--sp-5);
  overflow: hidden;
}
.pre-parte__escena {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pre-parte__escena svg { display: block; width: 100%; height: 100%; }
/* El mismo velo de la cabecera de la pantalla y por el mismo motivo: empieza
   tarde para que la cancha se vea, y apoya el título abajo. Sin la mitad
   derecha, porque acá no hay cifras a la derecha que despejar. */
.pre-parte__escena::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgb(6 8 14 / 82%) 88%, var(--bg-panel) 100%);
}
.pre-parte__cab > * { position: relative; z-index: 1; }
.pre-parte__titulo {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.pre-parte__linea {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.pre-parte__linea .crest { width: 16px; height: 18px; flex: none; --halo: 0.25px; }
.pre-parte__linea .pre__bandera { width: 18px; height: 13px; flex: none; }

/* --- EL CUERPO --------------------------------------------------------- */

/* DOS COLUMNAS Y LAS MEDIDAS CRUZADAS ARRIBA. Las cuatro medidas son una fila
   —se leen de corrido, «a punto, aceitada, 93 %, enchufado»— y las otras dos
   zonas son listas, que se leen hacia abajo. Meter las cuatro medidas en una
   columna las convertía en cuatro renglones de una lista más. */
.pre-parte__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: var(--sp-5);
  max-height: 52vh;
  padding: 0 var(--sp-6) var(--sp-5);
  overflow-y: auto;
}
.pre-parte__zona { display: grid; align-content: start; gap: var(--sp-3); min-width: 0; }
.pre-parte__zona--ancha { grid-column: 1 / -1; }

.pre-parte__medidas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pre-parte__medida { display: grid; gap: var(--sp-1); min-width: 0; }
.pre-parte__medida b {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}
/* La franja de aviso del juego, y con su token: `--warn`, no el ámbar crudo de
   la rampa. Y SIN FONDO, por lo que ya está escrito al lado de la gemela del
   mercado (`.nota-mercado--aviso`): es una nota que explica por qué no hay
   barras, no una alarma, y la caja del parte ya es una superficie. Con fondo y
   redondeo era una tarjeta con un borde grueso de color a un lado, que es otra
   cosa. */
.pre-parte__tarde {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--warn);
  font-size: var(--fs-sm);
}
.pre-parte__tarde strong { color: var(--text-primary); }

/* --- LOS AMISTOSOS ------------------------------------------------------ */

.pre-parte__partidos { display: grid; gap: 1px; }
.pre-parte__partidos li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.pre-parte__partidos .crest { width: 17px; height: 19px; flex: none; --halo: 0.25px; }
.pre-parte__rival { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La letra de la sede y no «de visitante»: en una fila de cinco es la columna
   que se lee de un vistazo, y la palabra entera vive en el `title`. */
.pre-parte__sede {
  flex: none;
  width: 18px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}
.pre-parte__balance {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pre-parte__balance strong { color: var(--text-primary); }
.pre-parte__balance > span {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-secondary);
}

/* --- LA PLATA Y LA ENFERMERÍA ------------------------------------------- */

.pre-parte__plata { display: grid; gap: var(--sp-2); }
.pre-parte__label--medico { margin-top: var(--sp-3); }
.pre-parte__rotos { display: grid; gap: var(--sp-2); }
.pre-parte__rotos li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.pre-parte__roto-quien { flex: none; font-weight: 600; color: var(--text-primary); }
.pre-parte__roto-que {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
/* El plazo con el token semántico y no con el valor de la rampa: cuántas
   semanas se pierde un futbolista es exactamente una advertencia. */
.pre-parte__roto-plazo { flex: none; font-weight: 600; color: var(--warn); }
.pre-parte__nada { font-size: var(--fs-sm); color: var(--text-muted); }
.pre-parte__nada--bien { color: var(--verde-400); }

/* --- EL PIE ------------------------------------------------------------- */

/* Centrado como los otros tres pies de diálogo del juego (3/9/2026). Tiene un
   solo botón, así que acá «ordenar por importancia» no dice nada y lo único que
   cambia es que deje de estar pegado al margen derecho de una caja ancha. El
   criterio vive en `.dialogo__pie` (`app.css`). */
.pre-parte__pie {
  display: flex;
  justify-content: center;
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line-hairline);
  background: var(--bg-raised);
}

@media (max-width: 820px) {
  .pre-parte__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pre-parte__medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}