/* ==========================================================================
   El Camino DT — La semana de entrenamiento
   --------------------------------------------------------------------------
   Cero tokens nuevos. Todo sale de `tokens.css`, y las dos piezas que ya
   existían —`.resumen`/`.dato` y `.barra`— vienen heredadas de `plantel.css`,
   que esta pantalla carga antes que a sí misma. Es la regla del producto: la
   pantalla siguiente no inventa nada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   EL ALTO ES DE LA PÁGINA, NO DE LA VENTANA
   --------------------------------------------------------------------------
   Esta pantalla SE BAJA, y tiene que poder hacerlo. Su propio comentario de más
   abajo cuenta el reparto que la ordenó —tres columnas para que el parte médico
   no quede a mil ochocientos píxeles del borde— y en ese reparto la página
   entera igual mide más que un monitor: la tabla del plantel sola pide más de
   ochocientos.

   Y no se bajaba. Esta pantalla carga `plantel.css` por las piezas que hereda
   —`.resumen`, `.dato`, `.barra`—, y esa hoja trae ADEMÁS el armazón de SU
   pantalla en un selector de elemento: `body { height: var(--alto-ventana);
   overflow: hidden }`, que es correcto allá —tabla y cancha, cada una con su
   scroll adentro— y acá recorta la pantalla a la altura de la ventana sin dejar
   forma de llegar a lo que queda debajo. Medido sobre 72cb072 antes de
   tocar nada: **981px inalcanzables a 1280×720 y 535 a 2000×1200**, y lo que se perdía no era el
   pie de página — era «El plantel en la semana», que es la mitad de lo que se
   decide acá.

   LA LECCIÓN, QUE VALE PARA LAS CINCO PANTALLAS QUE PIDEN PRESTADO: una hoja
   que se carga por sus COMPONENTES trae también su MARCO si lo escribió en un
   selector de elemento. Se devuelve acá y no allá porque las otras tres que
   heredan de `plantel.css` —inferiores, vestuario y reserva— sí quieren ese
   marco: son pantallas de tabla con scroll adentro, y medidas se pasan por
   diez píxeles, no por mil.

   El `display: flex` de `plantel.css` se queda: es el armazón de todas las
   pantallas y `.entreno` cuenta con él para su `width: 100%`.
   -------------------------------------------------------------------------- */

body { height: auto; min-height: var(--alto-ventana); overflow: visible; }

/* --------------------------------------------------------------------------
   LA RETÍCULA
   --------------------------------------------------------------------------
   Tres columnas donde la pantalla las banca, y en ese orden por un motivo:
   lo que se EDITA (la semana y el plantel), lo que se mira MIENTRAS se edita
   (las sesiones y el reparto) y lo que se CONSULTA (el predio y la camilla).

   La tercera columna existe para acortar la página, no para llenarla. Con las
   cuatro tarjetas de lado apiladas en una sola columna, el parte médico —que
   son cuatro líneas— quedaba a mil ochocientos píxeles del borde superior y
   había que rodar toda la pantalla para leerlo. Repartidas en dos, la página
   entra casi entera en un monitor de escritorio.

   El tope de ancho subió de 1600 a 2160. Con 1600 en un monitor de 2000 el
   juego dejaba doscientos píxeles de margen a cada lado mientras la tabla del
   plantel apretaba ocho columnas en novecientos: ancho desperdiciado afuera y
   ancho faltante adentro, que es el peor de los dos repartos posibles.
   -------------------------------------------------------------------------- */

.entreno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem 20rem;
  gap: var(--sp-6);
  align-items: start;
  align-content: start;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
  /* El `width: 100%` no es redundante y costó encontrarlo. `body` es un flex
     en columna —así se arma el armazón de todas las pantallas— y en un flex,
     un `margin: auto` en el eje transversal APAGA el estirado: con sólo
     `margin: 0 auto`, la retícula se encogía a su ancho de contenido y quedaba
     centrada en 1655 px dentro de una ventana de 2000, con la tabla apretada y
     dos franjas vacías a los costados. Con el ancho declarado, los márgenes
     automáticos vuelven a hacer lo único que se les pide, que es centrar
     cuando la ventana pasa del tope. */
  width: 100%;
  max-width: 2160px;
  margin: 0 auto;
}

/* La colocación es explícita porque el flujo automático no sabe que la primera
   columna es alta: con colocación automática, la segunda tarjeta de lado caía
   debajo de la semana en vez de al costado. */
.entreno__semana { grid-column: 1; grid-row: 1; }
.entreno__lado--a { grid-column: 2; grid-row: 1; }
.entreno__lado--b { grid-column: 3; grid-row: 1; }

/* Con el cuerpo a 16px, «Las sesiones» y su pista no entran en la misma línea
   de una columna de 21rem y el rótulo se partía en dos. La pista baja: es el
   dato de segunda de esa cabecera, y un título partido se lee peor que una
   cabecera de dos renglones. */
.entreno__lado .panel__head { flex-wrap: wrap; }

/* Las dos columnas son pilas de tarjetas, no superficies: la placa la pone
   `.tarjeta` (app.css). */
.entreno__semana,
.entreno__lado { display: grid; gap: var(--sp-5); align-content: start; }

/* --------------------------------------------------------------------------
   LA PREVISIÓN
   --------------------------------------------------------------------------
   Va arriba de la grilla a propósito. Es el precio, y el precio se lee antes
   de comprar: puesto abajo, el DT tendría que bajar la vista después de cada
   clic y la relación entre lo que tocó y lo que costó se rompería.
   -------------------------------------------------------------------------- */

.dato__cola {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0;
}

.dato__valor[data-band='good'] { color: var(--good); }
.dato__valor[data-band='ok']   { color: var(--warn); }
.dato__valor[data-band='bad']  { color: var(--danger); }
.dato__valor[data-alerta] { color: var(--danger); }

/* --------------------------------------------------------------------------
   LA GRILLA
   -------------------------------------------------------------------------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
}

.dia {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-2);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

/* El día de partido se distingue por el FONDO y no por el borde: es el día que
   el calendario impone, y tiene que leerse como una pared y no como una
   selección. */
.dia[data-ocupado] { background: var(--ink-950); }
.dia[data-hoy] { border-color: var(--accent-line); }

.dia__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--sp-1) var(--sp-1);
  border-bottom: 1px solid var(--line-hairline);
}

.dia__nombre {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.dia[data-hoy] .dia__nombre { color: var(--accent-texto); }

/* --------------------------------------------------------------------------
   EL TURNO
   -------------------------------------------------------------------------- */

.turno {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.turno:hover { background: var(--bg-hover); color: var(--text-primary); }
.turno:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

.turno[data-sel] {
  border-color: var(--accent);
  background: var(--bg-selected);
  color: var(--text-primary);
}

.turno__nombre {
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.turno__pie {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.turno .i { color: var(--icon-quiet); }
.turno[data-sel] .i { color: var(--accent); }

/* Las dos sesiones que no cargan se dibujan más apagadas que las demás: la
   grilla tiene que dejar ver de un vistazo dónde aflojaste, y el color hace
   ese trabajo antes que los nombres. */
.turno[data-sesion='descanso'],
.turno[data-sesion='recuperacion'] { background: var(--ink-950); color: var(--text-muted); }

.turno[data-sesion='fisico'],
.turno[data-sesion='partidillo'] { color: var(--text-primary); }

.turno--partido {
  cursor: default;
  background: none;
  border-style: dashed;
  border-color: var(--line);
  color: var(--text-muted);
  grid-row: span 2;
  align-content: center;
}

.turno--partido .turno__pie { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   ACCIONES Y FOCO
   -------------------------------------------------------------------------- */

/* Los mandos son dos ejes distintos —cuánto y qué— y por eso son dos grupos
   rotulados y no una fila de siete botones. El rótulo micro sobre cada grupo
   es lo único que evita que «Suave» y «Aguantar» se lean como opciones
   excluyentes entre sí, que es exactamente lo que no son. */
.entreno__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-6);
}

.entreno__mando { display: grid; gap: var(--sp-2); }

/* El botón del ayudante se va al final de la fila; los dos mandos mandan a la
   izquierda porque son la decisión y él es el atajo. */
.entreno__acciones > .action { margin-left: auto; }

/* --------------------------------------------------------------------------
   EL PLANTEL EN LA SEMANA
   --------------------------------------------------------------------------
   Ocho columnas en el orden en que se decide: quién es, qué hizo, cómo está,
   qué le va a pasar, y qué hacés vos. Las dos últimas son las únicas que
   llevan controles, y llevarlas juntas al borde derecho es lo que hace que la
   tabla se pueda leer entera sin tocarla y editar entera sin leerla.
   -------------------------------------------------------------------------- */

.entreno__plantel { gap: var(--sp-4); }

/* Veintiocho filas no entran en una pantalla y no tienen que entrar: la altura
   está topada en unas doce y la cabecera queda pegada, que es la primitiva que
   `.table-scroll` ya resuelve. Sin tope, la tarjeta del plantel empujaba la
   grilla y la previsión fuera del primer viewport — y la previsión arriba de
   la grilla es la regla de esta pantalla.

   El `flex` hay que devolverlo. `.table-scroll` nace con `flex: 1 1 0` porque
   sus dos usos anteriores —la clasificación y la matriz de resultados— viven
   en una tarjeta que se estira hasta el alto de su columna y le REPARTEN el
   sobrante. Acá la tarjeta mide lo que mide su contenido, no hay sobrante que
   repartir, y una base de 0 dejaba el scroller en cero píxeles con las
   veintiocho filas dibujadas y desbordando por debajo. */
/* EL TOPE SE MEDÍA CONTRA LA COSA EQUIVOCADA, y la cuenta lo delata. La tabla
   empieza en el píxel 594 del documento y cada fila mide 42; restarle a la
   ventana las 39rem que tiene encima daba, en un portátil de 900, 274px de
   ventanilla: SEIS futbolistas de veintiocho, no los ocho que prometía el
   comentario, y en uno de 800 el suelo de 16rem la dejaba en cinco. Veintiocho
   filas mirándose por una mirilla de cinco, con el scroll de la página por
   fuera peleándole al de la tabla por la misma rueda.

   El error de fondo: restar lo que hay encima de la tabla da el alto que entra
   SIN RODAR LA PÁGINA, y la página rueda igual —mide 1963— así que ese cálculo
   no compraba nada. Lo que hay que restar es lo único que la tabla nunca puede
   ocupar cuando el DT ya la trajo arriba de todo: el chrome pegajoso y el aire
   del pie, unas 9rem. Ahí sí la cabecera pegada de `.table-scroll` hace su
   trabajo, que es para lo que estaba.

   Con la cuenta nueva: diecisiete filas en un portátil de 900 y el plantel
   entero en un monitor de escritorio. El suelo de 24rem es el mínimo que
   todavía es una tabla y no una mirilla. */
.entreno__plantel .table-scroll {
  flex: 0 1 auto;
  max-height: clamp(24rem, calc(var(--alto-ventana) - 9rem), 74rem);
  /* Y LA RUEDA SIGUE DE LARGO cuando la tabla se termina. `.table-scroll` nace
     con `overscroll-behavior: contain` porque sus otros usos viven en pantallas
     de alto fijo, donde no hay página que rodar y contener es gratis. Acá la
     página SÍ rueda —es la de arriba, la que este archivo acaba de devolver— y
     la tabla ocupa media pantalla: con la contención puesta, el DT que baja con
     el puntero encima de la tabla la termina y la página no se mueve, que es
     exactamente el síntoma que veníamos a arreglar, un tamaño más chico. */
  overscroll-behavior: auto;
}

.plantel-sem { width: 100%; }
.plantel-sem td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
.plantel-sem th { padding-bottom: var(--sp-2); }

/* El sobrante se reparte entre las ocho columnas y no se lo lleva el nombre.
   Probado al revés —`width: 100%` en la primera— y quedaba un pozo de
   doscientos píxeles entre el apellido y los minutos, con las seis columnas de
   datos amontonadas contra el borde derecho: una tabla ancha con la
   información apretada, que es peor que una tabla angosta. */

/* Las barras sí mejoran creciendo: comparar dos medidores de 44px cuesta más
   que comparar dos de 64. */
@media (min-width: 1560px) {
  .plantel-sem td.u-num .meter__track { width: 64px; }
}

/* Las celdas con medidor apilan barra y palabra: la barra da el vistazo y la
   palabra da el dato, y una al lado de la otra en una tabla de ocho columnas
   no entran sin encoger la barra hasta volverla ilegible. */
.plantel-sem td.u-num { text-align: right; }
.plantel-sem td.u-num .meter__track { display: inline-block; vertical-align: middle; width: 44px; }

.fila__cifra {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  margin-top: 2px;
}

.fila__cifra[data-band='ok']  { color: var(--warn); }
.fila__cifra[data-band='bad'] { color: var(--danger); }

.fila__quien { display: grid; gap: 1px; }
.fila__pos {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

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

/* La etiqueta de estado. Es un `.chip` más chico y con bandas propias: el chip
   de 24px de `app.css` es de cabecera y en una fila de tabla de 28 empuja la
   altura de todas las demás. */
.fila__tag {
  display: inline-block;
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-hair);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.fila__tag[data-band='bad'] { border-color: var(--danger); color: var(--danger); }
.fila__tag[data-band='ok']  { border-color: var(--warn); color: var(--warn); }

/* La rotura es la única columna que se lee como número puro. Va en tabular y
   sin barra a propósito: es una probabilidad chica —el 1,6 % de una semana
   normal— y una barra de 44px sobre ese rango no dibujaría nada. */
.fila__riesgo { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.fila__riesgo[data-band='ok']  { color: var(--warn); }
.fila__riesgo[data-band='bad'] { color: var(--danger); font-weight: 600; }

/* Lo ganado entrenando. Es la única cifra de la tabla que sólo puede subir, y
   por eso es la única que se pinta en verde sin condición de alarma: acá el
   color no avisa de nada, celebra. */
.fila__crecio { font-variant-numeric: tabular-nums; color: var(--text-disabled); }
.fila__crecio[data-band='good'] { color: var(--good); font-weight: 600; }

/* El lesionado se apaga entero menos su etiqueta: sigue en la lista porque su
   plan se decide igual, pero no compite por la atención con los que juegan. */
.plantel-sem tr[data-roto] .fila__quien .team,
.plantel-sem tr[data-roto] td.u-num { color: var(--text-disabled); }

.fila__vacio { text-align: center; color: var(--text-muted); padding: var(--sp-7) var(--sp-3); }

/* --------------------------------------------------------------------------
   LOS DOS CONTROLES DE LA FILA
   -------------------------------------------------------------------------- */

/* El `<select>` nativo, por el mismo motivo por el que lo usa la mesa de
   negociación: trae su teclado, su búsqueda por letra y su lista larga sin que
   nadie los reescriba. Acá va en la versión compacta. */
.entreno__sel {
  width: 100%;
  min-width: 8.5rem;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-2xs);
  cursor: pointer;
}

.entreno__sel:hover { border-color: var(--line-strong); color: var(--text-primary); }
.entreno__sel:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

/* La exigencia es un segmentado en miniatura. No reusa `.segmented` porque ése
   está dimensionado para una cabecera y acá hay veintiocho: con su altura, la
   tabla medía el doble y dejaba de poder leerse de un vistazo. */
.mini { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }

.mini__btn {
  padding: 2px var(--sp-2);
  border: 0;
  background: var(--bg-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.mini__btn + .mini__btn { border-left: 1px solid var(--line); }
.mini__btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.mini__btn:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.mini__btn[aria-pressed='true'] { background: var(--accent); color: var(--text-on-accent); }

/* --------------------------------------------------------------------------
   EL CUERPO TÉCNICO
   --------------------------------------------------------------------------
   Cuatro filas con la misma retícula: icono, quién, nivel y precio. El nombre
   del preparador va arriba y el puesto abajo porque de un predio se recuerda a
   la gente, y porque cuatro rótulos de puesto idénticos en cuatro filas
   seguidas se vuelven invisibles a la segunda visita.
   -------------------------------------------------------------------------- */

.cuerpo { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }

.cuerpo__fila {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-row);
  border-radius: var(--r-sm);
}

.cuerpo__icono { display: flex; color: var(--icon-quiet); }
.cuerpo__cuerpo { display: grid; gap: 1px; min-width: 0; }
.cuerpo__puesto { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); }
.cuerpo__quien { font-size: var(--fs-2xs); color: var(--text-secondary); }
.cuerpo__pie { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* Los pips van bajo el nombre y ocupan las dos columnas de la derecha: cinco
   puntos dicen «tres de cinco» sin leer, que es lo que un nivel necesita. */
.cuerpo__nivel { grid-column: 2; display: flex; gap: 3px; margin-top: 2px; }

/* EL CUERPO RESUMIDO, en el tile: la misma fila con dos cosas menos —quién es y
   qué sale mejorarlo—, así que sus tres hijos entran tal cual en la retícula de
   `1rem | 1fr | auto` sin una columna nueva. Lo único que hay que decir es que
   los pips vuelven a su columna: en la fila completa bajan un renglón porque
   comparten sitio con el nombre y el pie, y acá no hay ni nombre ni pie. */
.cuerpo__fila--resumen { padding: var(--sp-2) var(--sp-3); }
.cuerpo__fila--resumen .cuerpo__nivel { grid-column: auto; margin-top: 0; }

/* Y UN TECHO DE ANCHO, que sólo hace falta desde que esta lista aparece en dos
   sitios de anchos muy distintos. En su columna de 320 px los pips caen al lado
   del puesto y se leen como un par; repetida arriba de la card, que mide 1.120,
   la columna del medio es `1fr` y se estira: el nombre queda a la izquierda y
   sus pips a seiscientos píxeles, y dejan de ser el mismo dato. El techo no
   hace nada en el tile —es más ancho que su columna— y es lo único que hace
   falta en el eco. */
.cuerpo--resumen { max-width: 24rem; }

.pip { width: 12px; height: 3px; border-radius: var(--r-pill); background: var(--ink-800); }
.pip[data-on] { background: var(--accent); }

.cuerpo__subir { grid-row: 1 / span 2; grid-column: 3; font-variant-numeric: tabular-nums; }
.cuerpo__subir[disabled] { opacity: 0.4; cursor: not-allowed; }

.cuerpo__tope {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: var(--fs-2xs);
  color: var(--good);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Ya es una tarjeta; lo único propio es que su contenido va más apretado que
   el de una pila de bloques. */
.entreno__foco { gap: var(--sp-4); }

.foco { display: grid; gap: var(--sp-2); }

.foco__fila {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--sp-3);
}

.barra--ancha { width: 100%; }

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

/* --------------------------------------------------------------------------
   LA PALETA
   -------------------------------------------------------------------------- */

.paleta { display: grid; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }

.sesion {
  display: grid;
  grid-template-columns: 1.1rem 1rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sesion:hover { background: var(--bg-hover); color: var(--text-primary); }
.sesion:focus-visible { outline: var(--focus-ring); outline-offset: -1px; }
.sesion .i { color: var(--icon-quiet); }

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

.sesion__cuerpo { display: grid; gap: 1px; min-width: 0; }
.sesion__nombre { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); }
.sesion__pie { font-size: var(--fs-2xs); color: var(--text-muted); line-height: var(--lh-snug); }

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

.sesion__carga[data-band='good'] { color: var(--good); }
.sesion__carga[data-band='ok']   { color: var(--warn); }
.sesion__carga[data-band='bad']  { color: var(--danger); }

/* --------------------------------------------------------------------------
   EL PARTE MÉDICO — Y POR QUÉ SUS CLASES NO SE LLAMAN `parte__`
   --------------------------------------------------------------------------
   Se llamaban así hasta el 23 de agosto de 2026, y chocaban: `mesa.css` tiene
   su propia familia `parte__` —la del PARTE DEL MOVIMIENTO, el que cuenta quién
   entra y quién sale— y esa hoja carga en las veintidós pantallas. O sea que
   acá convivían dos bloques distintos con el mismo nombre, y el de la mesa se
   colaba sin que nadie lo hubiera pedido.

   Lo que se veía, medido en el DOM y no deducido: los `<span>` de la camilla
   salían en VERSALITAS —«3 SEM.»— con el tracking de un rótulo y un `margin-top`
   de la otra hoja, y un `.parte__quien` salía `display: grid`. El `color` era el
   único que chocaba de frente, y ahí ganaba la hoja correcta por orden de carga:
   o sea que la mitad del choque estaba tapada por un accidente del orden, que es
   la peor manera de que un defecto se quede quieto.

   La regla que queda: **el nombre corto se lo lleva la hoja que vive en todas
   las pantallas.** `mesa.css` está en las veintidós y este bloque en una, así
   que el que se muda es éste. Y se muda ENTERO —bloque y elementos—, no sólo
   las dos clases que chocaban hoy: media familia renombrada es la misma bomba
   con la mecha más larga.

   `medico` sale del título de la superficie, que ya decía «Parte médico». El
   `data-card="parte"` y el `id="t-parte"` del documento NO cambian: nombran la
   card y su rótulo, no el estilo, y ahí no hay ninguna colisión.
   -------------------------------------------------------------------------- */

/* El techo es por el mismo motivo que el de `.cuerpo--resumen`: estas filas son
   `1fr | auto` y se diseñaron para una columna de 320 px, donde el nombre y su
   porcentaje quedan pegados. Repetidas en una card de 1.120 el `1fr` se estira
   y los dos extremos de la misma fila se alejan un palmo. Es una propiedad del
   sistema Tile → Card y no de esta pantalla: un tile pensado para una columna
   angosta necesita un techo el día que su contenido se muda a una card ancha. */
.medico { display: grid; gap: var(--sp-3); max-width: 34rem; }
.medico__lista { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }

.medico__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--line);
  background: var(--bg-row);
  font-size: var(--fs-xs);
}

.medico__fila[data-band='bad']  { border-left-color: var(--danger); }
.medico__fila[data-band='good'] { border-left-color: var(--good); }
.medico__fila[data-band='ok']   { border-left-color: var(--warn); }

.medico__quien { font-weight: 600; color: var(--text-primary); }

/* La línea que cuenta el resto no es una fila de futbolista: no lleva marca de
   color en el canto ni fondo de fila, porque no señala a nadie. */
.medico__fila--resto {
  background: none;
  border-left-color: transparent;
  padding-top: 0;
  color: var(--text-disabled);
}

.medico__que {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.medico__cuando {
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ANGOSTO
   --------------------------------------------------------------------------
   La grilla de siete columnas es lo primero que se rompe. Se parte en cuatro y
   después en dos antes que encoger los turnos: un turno más angosto que su
   nombre deja de ser legible, y una semana que no se lee no se edita.
   -------------------------------------------------------------------------- */

/* En una columna de 21rem las seis barras del foco no entran con el rótulo de
   8rem que usaban cuando la tarjeta vivía a lo ancho. Se aprieta el rótulo y
   no la barra: el nombre del atributo se lee igual truncado y una barra corta
   deja de comparar, que es lo único que la barra hace. */
.entreno__lado .foco__fila { grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; gap: var(--sp-2); }

/* Dos columnas: la tercera se mete debajo de la segunda. Es el primer paso y
   no el último porque la tabla del plantel todavía tiene sitio; lo que se
   pierde acá es página corta, no legibilidad. */
@media (max-width: 1560px) {
  .entreno { grid-template-columns: minmax(0, 1fr) 22rem; }
  .entreno__semana { grid-row: 1 / span 2; }
  .entreno__lado--b { grid-column: 2; grid-row: 2; }
}

@media (max-width: 1180px) {
  .entreno { grid-template-columns: minmax(0, 1fr); }
  .entreno__semana,
  .entreno__lado--a,
  .entreno__lado--b { grid-column: 1; grid-row: auto; }
  /* De vuelta a lo ancho, el foco recupera su rótulo entero y las tarjetas de
     lado se reparten de a dos. */
  .entreno__lado { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
  .entreno__lado .foco__fila { grid-template-columns: 8rem minmax(0, 1fr) 3rem; }
}

@media (max-width: 900px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .entreno__lado { grid-template-columns: minmax(0, 1fr); }
}

/* La tabla del plantel es lo segundo que se rompe después de la grilla. No se
   encoge: se deja rodar en horizontal dentro de su propio contenedor, que es
   lo que `.table-scroll` ya hace. Ocho columnas apiladas en tarjetas serían
   otra pantalla, no ésta más angosta. */
@media (max-width: 720px) {
  .plantel-sem { min-width: 44rem; }
}

@media (max-width: 560px) {
  .entreno { padding: var(--sp-4) var(--sp-3) var(--sp-7); }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foco__fila,
  .entreno__lado .foco__fila { grid-template-columns: 6rem minmax(0, 1fr) 2.6rem; }
  .entreno__acciones > .action { margin-left: 0; }
}

/* LA FILA CON UN CONTROL ADENTRO PIDE SU ALTO ACÁ.
   La base de `.data-table` son 32 px —el ritmo denso, medido de FM26— y en esta
   tabla no entra: su fila lleva un desplegable y un mando de exigencia, y a 32 el control queda
   pegado al borde de arriba y al de abajo. Se declara la excepción donde vive y
   no con una regla automática en `app.css`: probada, `tr:has(button)` se llevaba
   puestas las tablas de plantel y mercado, que tienen una pastilla de 20 px y
   entran en 32 de sobra. */
.entreno__plantel .data-table tbody td { height: var(--fila-tabla-control); }


/* --------------------------------------------------------------------------
   EL RÓTULO DE LA CABECERA, EN EL TELÉFONO
   --------------------------------------------------------------------------
   `app.css` le pone `white-space: nowrap` a lo que acompaña al título de un
   panel, y tiene razón para lo que esa regla protege: ahí suele haber una
   medida corta —«4-3-1-2», «5 CAMBIOS»— y «4-3-1-2» partido en dos renglones
   deja de ser una formación.

   Esta pantalla no pone una medida, pone UNA FRASE: «28 futbolistas · ninguno con plan propio»
   —379 px—, y una frase con `nowrap` en una ventana de teléfono no se
   estrecha ni dobla: se sale, y empuja la página entera.

   Así que acá el rótulo dobla. Va en esta hoja y no en `app.css` porque la
   regla compartida sigue siendo la correcta para las pantallas que ponen una
   medida; lo que hay son tres excepciones —ésta, `inferiores` y `copa`— y es el
   número que hay que mirar el día que aparezca una cuarta.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .panel__head > .label:not(:first-child) { white-space: normal; }
}