/* entrenamiento.css */
/* ==========================================================================
   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);
}

@media (hover: hover) {
  .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. */
/* `--text-muted` Y NO `--text-disabled`: aquél da 2,67 sobre la fila y el piso
   es 4,5. Medido el 17/9/2026 junto con el resto de la paleta —ese token no
   pasa sobre NINGUNA superficie del juego, así que no puede ser texto—. Lo
   acusó `barrido-contraste.html` la primera vez que se lo corrió con una
   carrera que dibuja estas filas. */
.fila__crecio { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.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-muted); }

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

@media (hover: hover) {
  .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); }
@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  .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; }
}

/* card.css */
/* ==========================================================================
   El Camino DT — TILE → CARD
   --------------------------------------------------------------------------
   El sistema que da nombre a toda la interfaz de FM26 y que este juego no
   tenía. Está medido de las capturas del artículo del revamp de fichajes —ver
   `referencia/fm26/notas.md`, «La sección de Contratación»— y son tres reglas:

     · una pantalla es una retícula de TILES, y un tile RESUME;
     · al tocar uno se abre una CARD encima, con miga de pan y X, que deja ver
       la pantalla de atrás atenuada;
     · y la card REPITE ARRIBA el resumen que estabas mirando antes de dar el
       detalle.

   La tercera es la que importa y la que no teníamos de ninguna forma. Acá se
   navegaba a otra pantalla y el resumen quedaba atrás: mirabas el histograma
   de contratos, entrabas a la pila, y para volver a ver la forma del plantel
   había que salir. Un detalle sin su resumen obliga a recordar de dónde
   veníamos, y recordar es exactamente lo que una pantalla densa tiene que
   evitar.

   LA CARD ES UN PEDAZO DE PANTALLA, NO UNA CAJA DE DIÁLOGO, y de ahí sale todo
   lo demás de esta hoja: su fondo es `--bg-page` —la pizarra, la misma de la
   pantalla de atrás—, su barra es `--bg-chrome` como cualquier barra del
   juego, y lo de adentro son `.tarjeta` normales. No hay una superficie nueva.
   La alternativa era vestirla de `.dialogo` —una placa de `--bg-panel` con
   padding— y entonces el eco de arriba habría sido un panel dentro de un
   panel, que es lo único que `DESIGN.md` prohíbe de plano.

   POR QUÉ MODAL, que el criterio de este proyecto no regala. La regla general
   es no gastar un modal en algo que no necesita interrumpir; esta card se lo
   gana por dos motivos medidos y no por parecerse a la fuente: el detalle que
   tapa no cabe en el primer viewport de su pantalla, y `<dialog>` trae el foco
   atrapado, el Escape y el fondo inerte, que son las tres cosas que un panel
   desplegable a mano se olvida. El día que un tile quiera abrir algo que sí
   entra en la pantalla, eso no es una card: es un tile más grande.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL TILE
   --------------------------------------------------------------------------
   Una `.tarjeta` que además se abre. No es una clase de aspecto: lo único que
   agrega es la señal de que hay algo detrás y la superficie de clic.

   EL TILE SE QUEDA SÓLO CON EL RESUMEN, y esa es la mitad del sistema que se
   ve en la pantalla y no en la card. Un tile que muestra el detalle entero no
   resume nada, y entonces la card no tiene qué agregar. Si al sacarle el
   detalle a un tile no queda nada, ese tile no quería una card.

   TODA LA PLACA ES BLANCO DE CLIC, pero quien manda es el botón de su
   cabecera: el clic en cualquier sitio del tile lo pulsa a él. Es la única
   forma de que el ratón tenga la superficie grande de la fuente sin que el
   teclado se quede con un `<section>` que no se puede enfocar ni anunciar. Lo
   que NO se secuestra es un control de adentro —un botón, un enlace, una
   fila con su menú—: ahí manda el control, y por eso el reenvío pregunta.
   -------------------------------------------------------------------------- */

.tile { cursor: pointer; }

/* La cabecera del tile deja de ser sólo un título: a la derecha va el control
   que abre, y el `.panel__head` ya es la fila que los sostiene a los dos.

   Y ENVUELVE, porque en un tile la cabecera puede llevar TRES cosas —título,
   eco y el control— y en una columna de 320 px no entran en una línea: medido
   en Propuestas, «Quién lo quiere» se partía a la mitad para hacerle sitio al
   botón. Con el `margin-left: auto` del control, envolver lo baja entero al
   renglón siguiente y pegado a la derecha, en vez de robarle letras al título.
   Donde entran los tres en una línea esto no hace nada. */
.tile > .panel__head { align-items: center; flex-wrap: wrap; }

.tile__ir {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  padding: 0 var(--sp-3);
  height: 22px;
  border-radius: var(--r-sm);
  background: none;
  /* `--text-muted` y no `--text-dim`: el segundo NUNCA estuvo definido en
     `tokens.css` —lo nombraba la lista de colores de DESIGN.md, de donde ya
     salió—. Escrito así, la regla es inválida y el botón se queda con el color
     heredado —que acá es el primario— y entonces el reposo y el `:hover` se
     ven iguales. Cuesta cero verlo si uno no lo mide, porque el resultado es
     legible. */
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.tile__ir .i { width: 12px; height: 12px; }

/* EL TILE ENTERO SE ENCIENDE, no sólo el control. Es lo que dice que la placa
   es el blanco y no ese botoncito de la esquina: al pasar por encima sube el
   borde —la señal de foco de todo el sistema— y el control se aclara con él.
   Sin el borde, el único aviso de que un panel es tocable sería una palabra de
   14px arriba a la derecha. */
@media (hover: hover) {
  .tile:hover { border-color: var(--line-strong); }
}
@media (hover: hover) {
  .tile:hover .tile__ir { color: var(--text-primary); background: var(--bg-row); }
}
@media (hover: hover) {
  .tile:hover .tile__ir .i { transform: translateX(1px); }
}

.tile__ir .i { transition: transform var(--dur-fast) var(--ease); }

/* El foco es del botón y no de la placa: el tile no es enfocable a propósito
   —ver el bloque de arriba— así que el anillo tiene que dibujarse donde el
   teclado realmente está parado. Y arrastra el mismo encendido que el ratón,
   porque las dos maneras de llegar tienen que verse igual de llegadas. */
.tile:has(.tile__ir:focus-visible) { border-color: var(--line-strong); }
.tile__ir:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   2. LA CARD
   --------------------------------------------------------------------------
   Es el quinto escalón de la escala de modales de `app.css` —500 · 680 · 680 ·
   920 · 1120— y el más ancho porque es el único que no lleva una pregunta
   adentro sino una PANTALLA: el eco del tile arriba y su detalle entero
   debajo. Se toca junto con los otros cuatro o la jerarquía se rompe; el
   comentario de la escala vive allá y no acá.

   EL ALTO SE MIDE CON `--alto-ventana` Y NO CON `100dvh`. Adentro del zoom del
   sitio `100dvh` mide de más y lo que sobra se pierde por abajo — que es
   justamente donde termina la lista de una card. El token y su cuenta están en
   `tokens.css`.
   -------------------------------------------------------------------------- */

.dialogo--card {
  width: min(1120px, calc(100vw - 2 * var(--sp-6)));
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-8));
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  /* La pizarra, no la placa: la card es un pedazo de la pantalla de atrás. */
  background: var(--bg-page);
}

/* EL `display` VA CON `[open]`, Y NO A SECAS. Un `<dialog>` cerrado lo esconde
   la hoja del navegador con `dialog:not([open]) { display: none }`, y un
   `display: flex` suelto en la card le gana: la caja cerrada seguía maquetada
   —medida, 278 px de alto en Contratación y 255 en Reserva— con su cabecera y
   su eco dibujados dentro de la página, y en una pantalla llegó a quedarse con
   el punto del medio en el `elementFromPoint`.

   No se vio antes porque el fantasma es corto: al cerrar, el detalle ya se fue
   al almacén y lo que queda es la barra y el resumen, que se parecen bastante a
   una tarjeta más. La forma de encontrarlo fue preguntar quién está en el
   centro de la pantalla, no mirarla.

   La contraprueba que lo aisló: el `.dialogo` normal del juego, cerrado, mide
   `display: none` y 0 px de alto. O sea que no es del `<dialog>` ni del
   navegador — era de esta regla. */
.dialogo--card[open] { display: flex; }

/* --------------------------------------------------------------------------
   2.1 LA BARRA: DE DÓNDE VENÍS Y CÓMO SE SALE
   --------------------------------------------------------------------------
   Miga de pan y X, que es exactamente lo que tiene la de FM26 y las dos cosas
   que un panel encima de otro le debe al que lo abrió: dónde está y cómo se
   vuelve.

   LA MIGA ES LA MISMA DE LA PANTALLA, la de `app.css`, y esto es reúso y no
   parecido: la ruta de una card es la de su pantalla con un escalón más
   —«Contratación › Contratos que se acaban»— así que tiene que leerse con la
   misma voz. Lo único que cambia es la caja: la de la pantalla mide 26px
   porque es un renglón entre el chrome y el contenido, y acá es la barra de la
   card y lleva un control adentro.
   -------------------------------------------------------------------------- */

.card__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
}

.card__cab .breadcrumb {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* La última hoja de la ruta es el nombre de la card y se lee como un título:
   es lo que contesta «¿qué estoy mirando?» cuando la pantalla de atrás quedó
   tapada. Sube a primaria y a peso 600 — la miga de la pantalla no lo hace
   porque allá el título está tres centímetros más abajo, escrito en grande. */
.card__cab .breadcrumb [aria-current='page'] {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2.2 EL CUERPO: EL ECO Y EL DETALLE
   --------------------------------------------------------------------------
   EL ECO NO SE VA CON EL SCROLL, y es la regla entera de este sistema. Si el
   resumen se sube al hacer rodar la lista, la card vuelve a ser una pantalla
   nueva que perdió lo anterior — que es de lo que veníamos. Así que el que
   rueda es el detalle y sólo el detalle: `min-height: 0` en la columna, porque
   sin eso un hijo con scroll crece hasta su contenido y saca la card de la
   ventana en vez de rodar por dentro.
   -------------------------------------------------------------------------- */

.card__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  min-height: 0;
}

/* El eco no se encoge y no rueda: es un envoltorio sin aspecto propio, porque
   la placa que se ve adentro es el clon del tile con su `.tarjeta` puesta. */
.card__eco { flex: none; }

/* El detalle SÍ tiene placa propia —lleva `.tarjeta` en el marcado de
   `card.js`— y es también el que rueda. Van juntas a propósito: si rodara el
   contenedor de afuera, el borde de la placa se iría hacia arriba con la lista
   y a media pantalla no habría placa, sólo renglones sueltos sobre la pizarra.
   Es el mismo scroller de `.objetivos__lista`, con la misma barra fina. */
.card__detalle {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   3. EL MOVIMIENTO — YA NO VIVE ACÁ
   --------------------------------------------------------------------------
   La card llegaba desde un 2 % más chica y cuatro píxeles abajo, con el velo
   entrando por separado y más lento. Sigue haciendo exactamente eso: lo que
   cambió el 1/9/2026 es quién lo escribe.

   Esos mismos cuatro píxeles y ese mismo 2 % estaban escritos TRES VECES —acá,
   en la mesa y en el parte del movimiento—, con el comentario de cada copia
   explicando que era deliberado que el gesto fuera el mismo. Y los otros
   cinco modales del juego no lo tenían: aparecían secos. El argumento de
   entonces —«esta hoja tiene que poder cargarse sola en una pantalla que no
   negocia nada»— era contra `mesa.css` y sigue en pie; contra `movimiento.css`
   no aplica, porque lo cargan las veinticuatro pantallas.

   Está en `movimiento.css`, punto 4, junto con LA SALIDA, que es lo que esta
   copia no tenía: la card llegaba con calma y se apagaba de un fotograma a
   otro. Ahí también está por qué el gesto se mudó de fotogramas a transición,
   que es lo único que permite animar el cierre de un `<dialog>`.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. LA CARD ANGOSTA
   --------------------------------------------------------------------------
   Por debajo de 900px la card deja de tener márgenes que regalar: se pega a
   los bordes y se queda con casi toda la ventana. El eco sigue arriba y sigue
   sin rodar, porque en una ventana chica es cuando más falta hace — es donde
   la pantalla de atrás se ve menos.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .dialogo--card {
    width: calc(100vw - 2 * var(--sp-4));
    max-height: calc(var(--alto-ventana) - 2 * var(--sp-5));
  }
  .card__cuerpo { padding: var(--sp-4); gap: var(--sp-4); }
}

/* menu.css */
/* ==========================================================================
   El Camino DT — El menú del botón derecho
   --------------------------------------------------------------------------
   Cero tokens nuevos. Es la superficie del diálogo —panel sobre línea fuerte—
   con las medidas de la fila de estado: 24px de alto útil, icono apagado a la
   izquierda y texto en 13px.

   SIN SOMBRA, a diferencia del diálogo. La única sombra del sistema existe
   porque un modal tapa la pantalla entera y tiene que despegarse del plano;
   este menú mide 200px y se apoya sobre lo que estabas mirando, así que le
   alcanza con un borde en Línea Fuerte, que es un paso más claro que
   cualquier borde de la pantalla que hay debajo.
   ========================================================================== */

.menu {
  position: fixed;
  /* Por encima del chrome pegajoso (20), que es lo más alto del sistema. */
  z-index: var(--z-flotante);
  display: grid;
  /* `minmax(0, 1fr)` y no la columna automática: una fila del menú lleva el
     texto de la acción a la izquierda y su pista a la derecha —«Cambiar el
     número · Ahora lleva el 2»— y las dos juntas piden más que el ancho máximo
     del menú. Con la columna midiéndose por su contenido, las filas se salían y
     el menú aparecía con una BARRA DE DESPLAZAMIENTO HORIZONTAL abajo, que en
     un menú de cinco renglones no es un control, es un defecto. Con la columna
     acotada a cero, `.menu__texto` hace lo que ya sabía hacer: recortarse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 200px;
  /* Y un poco más de ancho antes de recortar nada: el menú de un futbolista
     lleva su nombre entero —«Ver la ficha de Lucas Ruiz»— y a 280 empezaba a
     comerse el apellido con una pista al lado que sí entraba. */
  max-width: 340px;
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-4));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

.menu__item {
  display: flex;
  align-items: center;
  /* Sin esto la fila se niega a bajar de su contenido —es el `min-width: auto`
     de todo elemento flexible— y la columna acotada de arriba no sirve de
     nada: el que tiene que ceder es el texto de la acción. */
  min-width: 0;
  gap: var(--sp-4);
  min-height: 26px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* CON EL DEDO, 44. La lista de los mínimos táctiles vive en `app.css` —«EL
   DEDO»— y ahí están los ochenta controles del juego; éste es la excepción que
   tiene que estar acá, porque `menu.css` se carga después de `app.css` y la
   regla base de arriba declara `min-height`: a igual especificidad ganaría la
   de este archivo, y el renglón de allá sería una regla muerta que se lee como
   si funcionara. Se corrigió después de escribirlo así y medir 30 px igual.

   POR QUÉ IMPORTA MÁS ACÁ QUE EN UNA TABLA. En una lista, errarle a un renglón
   por dos píxeles abre la ficha del futbolista de al lado y se vuelve; acá
   EJECUTA. Los renglones de este menú venden, mandan a la reserva, sacan del
   banco y cambian el número de la camiseta, y ninguno pregunta después. Un
   menú es la superficie donde el error de puntería es más caro del juego, y
   era la única que había quedado en 30.

   Y LA MISMA VARA QUE EL RESTO: `pointer: coarse` más el ancho, que es la
   pareja con la que `app.css` reparte los 44. Con qué se toca decide el
   mínimo; el ancho está para que una tableta apaisada, que muestra el juego en
   su forma de escritorio, no pierda densidad. */
@media (pointer: coarse) and (max-width: 860px) {
  .menu__item { min-height: 44px; }
}

.menu__item .i { color: var(--icon-quiet); }

/* El hueco de un ítem sin icono. Mide lo que mide un `.i--sm` para que el texto
   quede en la misma columna que el de los ítems que sí lo llevan. */
.menu__hueco { width: 13px; flex: none; }

/* El foco se dibuja como el hover y no sólo con el anillo: en un menú abierto
   con el teclado, el ítem enfocado ES la selección. */
.menu__item:focus {
  background: var(--bg-hover);
  color: var(--text-primary);
}
@media (hover: hover) {
  .menu__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

.menu__item:focus .i { color: inherit; }
@media (hover: hover) {
  .menu__item:hover .i { color: inherit; }
}

/* Una acción que no se puede hacer se muestra apagada con su motivo al lado,
   igual que la tabla del plantel muestra el veto: esconderla dejaría al DT
   buscando una acción que él cree que existe. */
.menu__item[disabled] {
  color: var(--text-disabled);
  cursor: default;
  background: none;
}

.menu__item[disabled] .i { color: var(--text-disabled); }

.menu__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__pista {
  margin-left: auto;
  padding-left: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  /* Y cede antes de empujar. La pista la escribe el dato —el motivo por el que
     algo no se puede, que puede ser una frase entera— y sin esto no se recorta
     ninguna de las dos: el `max-width` del menú corta la pista contra el borde
     con `overflow: hidden`, o sea en silencio y sin puntos suspensivos. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El pie. Aparece sólo en el menú que no tenía ninguna acción que ofrecer —el
   mapa— y dice cómo llegar al menú del navegador. No es un ítem: no se enfoca,
   no se pulsa y no entra en el recorrido del teclado, así que se dibuja como lo
   que es, la letra chica de abajo, separada por la misma línea que separa los
   grupos. */
.menu__pie {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.menu__sep {
  height: 1px;
  margin: var(--sp-2) 0;
  border: 0;
  background: var(--line-hairline);
}

/* Aparece fundiéndose y no creciendo: el menú ya sale del punto que tocaste,
   que es toda la relación de causa que necesita. Esa decisión sigue en pie —el
   desplegable SÍ crece desde su botón porque su botón está en un sitio fijo de
   la pantalla y el menú nace bajo el puntero—; lo que faltaba era irse. */
.menu { animation: menu-aparece var(--dur-fast) var(--ease); }

@keyframes menu-aparece { from { opacity: 0; } }

/* Y SE VA, que hasta el 1/9/2026 no hacía: `menu.js` llamaba a `.remove()` y el
   menú desaparecía entre dos fotogramas después de haber llegado fundiéndose.
   Es la Regla de la Mitad que Falta —ver `movimiento.css`, punto 4— en el
   hermano del desplegable, y se resuelve igual: el guion pone la marca, espera
   lo que dura esto y recién ahí lo saca del DOM.

   Deja de recibir clics en el mismo instante en que empieza a irse. Importa más
   acá que en el desplegable: los ítems de este menú venden a un futbolista y lo
   mandan a la reserva, y un menú que ya se está yendo no puede aceptar el
   segundo clic de un doble clic apurado. */
.menu[data-yendose] {
  animation: menu-se-va var(--dur-fast) var(--ease-salida) forwards;
  pointer-events: none;
}

@keyframes menu-se-va { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  /* La salida no se apaga, se acorta: la regla global de `app.css` la deja en
     1ms, y su `forwards` es lo que mantiene al menú invisible hasta que el
     guion lo saca. Con `none` se quedaría a la vista los 140ms de la espera. */
  .menu[data-yendose] { animation-duration: 1ms; }
}