/* ==========================================================================
   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. */
body { height: var(--alto-ventana); overflow: hidden; }

.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);
}

/* --------------------------------------------------------------------------
   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 { 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 { 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);
}
.pre__bloque--donde { grid-area: donde; }
/* `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--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. */
.pre__cuerpo[data-etapa='armar'] .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;
  }
  .pre__cuerpo[data-etapa='concentracion'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'gira' 'deja';
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
}

/* 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;
  overflow-y: auto;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-sm);
}

/* 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);
}
.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);
}
.pre__destino-dato small { font-size: var(--fs-2xs); color: var(--text-disabled); }
.pre__destino-dato[data-tono='bueno'] b { color: var(--verde-300); }
.pre__destino-dato[data-tono='malo'] b { color: var(--clay-300); }

/* --------------------------------------------------------------------------
   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».
   -------------------------------------------------------------------------- */

.pre__gira { display: grid; 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);
  color: var(--text-disabled);
}
.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);
}
.pre__partido-cuando small { font-size: var(--fs-2xs); color: var(--text-disabled); }

.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;
}
.pre__sumar small { font-size: var(--fs-2xs); color: var(--text-disabled); 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; }

/* --------------------------------------------------------------------------
   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 ------------------------------------------------------------- */

.pre-parte__pie {
  display: flex;
  justify-content: flex-end;
  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)); }
}