/* ==========================================================================
   El Camino DT — El plantel y el once
   --------------------------------------------------------------------------
   Cero tokens nuevos. Dos columnas que se hablan: la tabla del plantel, ancha
   y densa, y la cancha con el once. La cancha es fija —no scrollea nunca—
   porque es el estado del equipo y tiene que estar siempre a la vista mientras
   el ojo recorre las veintisiete filas de al lado.
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  /* `min-height` Y NO `height`, QUE ES LA OTRA MITAD DEL MISMO ARREGLO.
     ----------------------------------------------------------------------
     Con `height` el cuerpo mide la ventana SIEMPRE, y cuando su contenido
     pide más, lo que sobra se le sale de la caja. Entonces el documento rueda
     sólo hasta el borde del cuerpo y no hasta el final del contenido: medido
     en el plantel a 1260, rodaba 120 px y quedaban 105 sin alcanzar. Se ve
     como un scroll que «llega hasta ahí y no sigue», que es peor que uno que
     no anda — parece que abajo no hay nada.

     `min-height` conserva lo que `height` daba: el piso de una ventana, para
     que las columnas flexibles se repartan el alto cuando el contenido entra.
     Lo que agrega es que el cuerpo CREZCA cuando no entra, que es la condición
     para que el documento pueda llegar al final.

     Va junto con el `overflow: auto` de acá arriba: uno abre el camino y el
     otro lo hace lo bastante largo. Con uno solo de los dos el defecto queda
     a medio arreglar, y a medio arreglar fue como se lo mandé a Alberto la
     primera vez. */
  min-height: var(--alto-ventana);
  /* `auto` y no `hidden`: el porqué está en `copa.css`, donde se escribió
     entero. Resumen: `hidden` recorta lo que no entra y no hay forma de
     llegar; `auto` se comporta igual mientras entra y deja bajar cuando no. */
  overflow: auto;
}

/* Las dos columnas son TARJETAS: la superficie, el borde y la esquina las
   pone `.tarjeta` (app.css), y entre ellas hay aire en vez de un hairline. */
.plantel {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* La cancha se lleva lo que a la tabla le sobra, y NADA de lo que necesita.
     Medida la tabla, su ancho mínimo son 856px: por debajo de eso las trece
     columnas se estrujan y aparece la barra horizontal. Los 340 del suelo son
     los de siempre, así que en un portátil esta pantalla queda exactamente
     como estaba; recién cuando la ventana pasa de unos 1620 el 21 % supera el
     suelo y la cancha empieza a crecer, con la tabla todavía en más de 1170.

     El techo de 460 no es por la tabla —a esa altura le sobran 660— sino por
     la cancha: se dibuja vertical, y pasados los 460 el dibujo deja de tener
     forma de cancha y se vuelve un cuadrado. Lo que se gana en el camino es
     aire entre las fichas: los puestos abiertos —el MI y el MD— pasan de 16px
     del lateral a 36, que es la diferencia entre un once apretado contra la
     raya y uno que se lee. */
  /* EL PISO BAJA DE 340 A 318 desde que la tabla tiene el selector de rol. La
     columna de la derecha estaba en su mínimo y la tabla pedía quince píxeles
     más de los que había: se los pide a la cancha, que es un DIBUJO y escala,
     mientras que la tabla es la pantalla — trece columnas de dato no se
     comprimen sin recortar la última, que es lo que estaba pasando con
     «Mercado».

     Dieciocho píxeles de cancha son un 6 %: los puestos abiertos pierden dos
     píxeles de aire contra la raya, que era exactamente lo que sobraba según el
     comentario de acá arriba. El techo de 460 no se toca. */
  /* Y EL 21 % SUBE A 26 desde que la ficha se mide contra la cancha: cada píxel
     de cancha son 17,6 centésimos de ficha, así que ensanchar acá es la única
     forma de que los apellidos entren enteros. El suelo y el techo no se tocan,
     así que en un portátil esta pantalla queda exactamente como estaba. */
  grid-template-columns: minmax(0, 1fr) clamp(318px, 26%, 460px);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* Y DE 1400 PARA ARRIBA, LA TABLA LE PRESTA OCHENTA PÍXELES A LA CANCHA. Va en
   una regla aparte y no en un porcentaje más grande porque abajo de 1400 manda
   el suelo de 318 y ahí no hay nada que prestar: a 1280 esta pantalla queda
   exactamente como estaba.

   EL PRECIO ESTÁ MEDIDO Y NO ES GRATIS. La tabla pide 1.080px y a 1440 tiene
   769: **ya se desplazaba a lo ancho antes de este cambio** —el «mínimo de
   856» del comentario de arriba quedó viejo, la tabla creció desde entonces— y
   con esto pasa de mostrar trece columnas de quince a mostrar once. Lo que se
   compra es el apellido: la ficha se mide contra el ancho de la cancha, así que
   a 1440 pasa de 49 a 65 y los nombres enteros van de cuatro de once a ocho.

   Se elige así porque las dos cosas no se pierden igual: una columna que queda
   fuera de la caja se alcanza desplazando, y un apellido cortado adentro de la
   ficha no se alcanza con nada. */
@media (min-width: 1400px) {
  .plantel { grid-template-columns: minmax(0, 1fr) clamp(318px, 33%, 460px); }
}

.plantel__lista,
.plantel__once {
  gap: var(--sp-4);
  min-height: 0;
}

/* SOBRE LA SUPERFICIE TÁCTICA, y SÓLO el panel del once: es el mismo sitio del
   juego que el panel de la previa —donde se decide quién juega— y en FM26 los
   dos van sobre el teal. Acá además contiene la cancha, así que queda como en
   la fuente: césped verde dentro de un panel teal, que son dos verdes distintos
   a propósito. Ver `--tactico-fondo` en `tokens.css`.

   Va en su PROPIA regla y no colgado de la de arriba, que es compartida con
   `.plantel__lista`: metido ahí, el teal se le aplicaba también a la tabla de
   treinta y cinco renglones y dejaba dos textos en 4,48 sobre las filas de
   titular. Un selector de dos líneas es fácil de ampliar sin querer. */
.plantel__once {
  background: var(--tactico-fondo);
  border-color: var(--tactico-borde);
}

.plantel__lista .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

/* --------------------------------------------------------------------------
   EL RESUMEN
   -------------------------------------------------------------------------- */

.resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.dato { display: grid; gap: var(--sp-1); }
.dato__valor { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* EL CONTADOR QUE ADEMÁS HACE ALGO. Siete de los ocho de esta fila son datos y
   éste es el único pulsable, así que tiene que parecerse a los otros siete —es
   un contador, y disfrazarlo de botón rompería la fila— y a la vez avisar que
   se toca. Lo dice el hover y el cursor, no un color: el ámbar del número ya
   está gastado en decir que hay algo que atender, y dos señales encima del
   mismo dato no se leen como una. Hereda la caja de `.dato` y le saca lo que
   un `<button>` trae puesto. */
.dato--accion {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .dato--accion:hover { background: var(--bg-hover); }
}

.dato--accion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   LA TABLA
   -------------------------------------------------------------------------- */

/* La cabecera ordenable es la primitiva `.sort` de `app.css`, la misma que usa
   el buscador. Acá vivía media: cursor y hover sin flecha, y la columna activa
   en VIOLETA —el color de lo pulsable gastado en decir cuál está ordenada, que
   es justo lo que el sistema no permite—. Ahora lo dice la flecha. */

.plantel-tabla tbody tr { cursor: pointer; }
@media (hover: hover) {
  .plantel-tabla tbody tr:hover { background: var(--bg-hover); }
}

/* Los once. Es la única marca que la tabla necesita para que el ojo separe al
   equipo del resto sin leer una columna.

   VA EN EL TINTE DEL VALOR BUENO, NO EN EL LAVADO DEL ACENTO, y la propia fila
   lo delataba: la estampa `.xi` de esas mismas once filas ya está en verde, con
   el motivo escrito tres reglas más abajo —«es una marca por FILA que dice que
   ese futbolista juega»—. El rótulo decía una cosa y su fondo la contraria.

   El fondo violeta era además un choque de tres en una sola pantalla: acá
   marcaba «está en el once», en `.puesto--activo` marca «éste es el puesto que
   estás tocando» y en `.puesto--recibe` marca «soltá acá». Las dos últimas son
   del acento con todo derecho —responden al dedo—; la primera es un dato del
   futbolista que sigue siendo verdad cuando soltás el ratón. Once filas de 35
   con el color de lo pulsable convertían al violeta en el color de un tercio de
   la tabla, que es la misma historia por la que `.xi` se fue del magenta.

   `--tint-good` es el token que ya existía para esto: el fondo de una cifra
   juzgada, al 20 %, el mismo que usan la calificación de partido y el resultado
   del calendario. */
.es-titular { background: var(--tint-good); }
.es-titular td { color: var(--text-primary); }
/* Y el hover sigue siendo del acento, que ahora se distingue: pasar por encima
   de un titular dice «esto responde», y antes se perdía dentro de su propio
   fondo violeta. */
@media (hover: hover) {
  .plantel-tabla tbody tr.es-titular:hover { background: var(--bg-active); }
}

/* Cal, no magenta. Está en versalitas como un rótulo, pero no lo es: es una
   marca por FILA que dice que ese futbolista juega, y el magenta nombra
   secciones. Se fue a magenta cuando el mundo cambió, por una regla mía
   aplicada de más a todo lo que estuviera en versalitas; acá vuelve al color
   que tenía, que era el correcto. */
.xi {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--good);
}

/* LA POSICIÓN VA EN TEXTO, y esto se corrigió a las dos horas de ponerla en
   pastilla. Vale contar por qué, porque es un caso de dos fuentes que dicen
   cosas distintas y hay que elegir.

   En la guía de FM26 los puestos aparecen encapsulados —`POR`, `DF (C)`, cada
   uno en su cajita— y con eso se puso la pastilla acá. Pero esa lista es OTRA
   PANTALLA: una lista agrupada por puesto, donde el puesto es el sujeto. En la
   TABLA DE PLANTILLA de FM26, vista después a 1:1, la columna `Position`
   («M/AM (L)», «GK») es **texto plano**.

   La regla que queda: la pastilla es para el puesto cuando es una ETIQUETA de
   la fila o un CONTROL —el desplegable de rol de FM26 sí es una pastilla—, no
   para el puesto cuando es una columna más de una tabla de trece. En una tabla,
   trece columnas donde una lleva cápsula es una columna gritando.

   Lo que sí se queda del intento es el tono: la columna subió de Apagado a
   Secundario, porque en una tabla con cebra el gris más oscuro se hundía. */
/* EL SELECTOR DE ROL. Dice en qué puesto juega —o un guion si no juega— y abre
   el menú de los once puestos del sistema.

   Se dibuja como un control y no como texto porque LO ES: si pareciera un dato
   más de la fila, nadie lo tocaría. Pero sin relleno y sin borde en reposo, que
   son treinta y cinco en columna: lo que lo delata es el chevrón, y el fondo
   aparece al pasar por encima. El que juega va en el color del valor bueno,
   igual que la estampa que reemplazó. */
.rol-sel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  /* Sin mínimo: la columna mide lo que mide el puesto más largo («MCD») y ni un
     píxel más. Arrancó en 44 y sobraban justo los diecisiete que la tabla no
     tenía — un mínimo elegido a ojo, en la única tabla del juego que va al
     límite. */
  padding: 1px 3px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  /* Apagado pero LEGIBLE: `--text-disabled` da 2,80:1 y es un botón con texto,
     así que le toca el piso de 4,5 igual que a cualquier control. Lo apagado
     acá lo dice el peso del color contra el `--good` del titular, no que no se
     lea. Ver «La Regla del Apagado que se Lee» en `DESIGN.md`. */
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rol-sel::after {
  content: '';
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  opacity: 0.6;
}
@media (hover: hover) {
  .rol-sel:hover { background: var(--bg-raised); color: var(--text-primary); }
}
.rol-sel[aria-expanded='true'] { background: var(--bg-active); color: var(--text-primary); }
.es-titular .rol-sel { color: var(--good); }

/* EL SUPLENTE NO LLEVA FONDO, Y ES UNA DECISIÓN. `es-titular` tiñe la fila
   porque «éste juega» es la respuesta que la tabla existe para dar de un
   vistazo; un segundo fondo para «éste se sienta» dejaría veintitrés de las
   veintiocho filas teñidas de algo y el titular dejaría de saltar. Lo que
   cambia es la MARCA de la columna del puesto: `BCO` en el gris de leer contra
   el `—` apagado del que no viaja, y el verde del que juega por encima de los
   dos. Tres pesos en un solo lugar de la fila.

   Medido sobre el fondo de la tabla: `--text-secondary` da 6,29 y el
   `--text-muted` del `—` da 4,63; los dos por encima del piso de 4,5 que
   `DESIGN.md` le pone a cualquier texto, incluido el apagado. */
.es-suplente .rol-sel { color: var(--text-secondary); }

/* Y EL QUE SENTASTE VOS, en violeta: dice «esto lo decidiste vos y no el
   ayudante», que es la única diferencia que hay entre dos BCO.

   `--accent-texto` Y NO `--accent`, que fue lo primero que escribí. Medido acá
   mismo sobre el fondo de la tabla, el violeta de acento da **2,91** como tinta
   de 13 px, contra el piso de 4,5. No es un descubrimiento: `tokens.css` ya lo
   tiene escrito —«como tinta de texto chico, `--accent` da 2,56–2,95»— y por
   eso existe `--accent-texto`. El token estaba y yo agarré el de al lado. */
.es-suplente .rol-sel[data-mio] { color: var(--accent-texto); }
/* Y el botón de ofrecer también sube, por lo mismo: el lavado verde del titular
   es el fondo más claro de la tabla, y encima de él el gris apagado se quedaba
   en 3,68:1. Un fondo de estado aclara, y lo que va encima tiene que acompañar.
   Es la contracara de la regla del apagado: no es el gris el que está mal, es
   el gris SOBRE ESE fondo. */
.es-titular .venta-chip { color: var(--text-secondary); }
/* La columna mide lo que mide su contenido y no se estira. */
.plantel-tabla .col-rol { width: 1%; white-space: nowrap; }

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

/* La nacionalidad es una columna de un solo dibujo: ocupa lo que ocupa la
   bandera y ni un píxel más, y la bandera se pega al borde derecho como
   cualquier otro dato de esta tabla. El nombre del país lo dice el `title`,
   que es donde va lo que se consulta una vez y no se lee en cada fila. */
.u-nac { width: 1%; }
.plantel-tabla .u-nac .flag { margin-left: auto; }

/* La barra es un BLOQUE, y un bloque no lo mueve `text-align`: sin esto las
   tres columnas de barras quedaban pegadas a la izquierda de su celda y sus
   cabeceras a la derecha, cada título sobre la columna de al lado. */
.plantel-tabla .barra { margin-left: auto; }

/* La aptitud aparece SÓLO cuando hay un puesto elegido: es una respuesta a una
   pregunta, y sin la pregunta sería una columna más de ruido. */
.apt {
  margin-left: var(--sp-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.apt[data-apt='3'] { color: var(--good); }
.apt[data-apt='2'] { color: var(--warn); }
.apt[data-apt='1'] { color: var(--text-muted); }
.apt[data-apt='0'] { color: var(--danger); }

/* Fuera de puesto, la fila entera se apaga: el DT tiene que poder descartar de
   un vistazo sin leer la etiqueta. */
.plantel-tabla tr[data-apt='0'] { opacity: 0.45; }

/* EL QUE NO PUEDE JUGAR SE APAGA, PERO SU MOTIVO NO. Antes la fila entera
   iba a 0,4 de opacidad, y con ella el «ESGUINCE DE TOBILLO» en arcilla: la
   única celda que explica por qué la fila está apagada quedaba en 1,9:1 —«casi
   ni se lee», Alberto, 28/9/2026—. Ahora se apagan las celdas de datos y el
   motivo queda a tinta entera, en una pastilla. */
.plantel-tabla tr[data-veto] { cursor: default; }
.plantel-tabla tr[data-veto] > td:not(:last-child) { opacity: 0.5; }
@media (hover: hover) {
  .plantel-tabla tr[data-veto]:hover { background: none; }
}

.veto {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--danger) 45%, var(--text-primary));
  white-space: nowrap;
}

/* `.barra` se mudó a `app.css`. La miraban el plantel y la reserva —las dos
   cargan esta hoja o la suya— y desde que Contratos dibuja el sueldo con ella
   son tres pantallas que no comparten hoja. El dueño de una pieza que usan
   tres es la que cargan las diecisiete. */

/* --------------------------------------------------------------------------
   LA CANCHA
   --------------------------------------------------------------------------
   Las coordenadas de cada puesto salen de `FORMACIONES` en `mundo.js`, que son
   las mismas que usa el partido para simular: la cancha de esta pantalla y la
   del sábado dibujan al equipo en el mismo sitio porque leen el mismo dato.
   -------------------------------------------------------------------------- */

.cancha {
  /* La línea diluida, una sola vez: la usan tres capas del fondo. */
  --campo-linea-css: color-mix(in srgb, var(--campo-linea) 40%, transparent);
  /* Acá vivía un `container-type: inline-size`, que era de cuando el ancho de
     la ficha salía de un `cqw` sobre esta caja. Ya no: las fichas se miden
     contra sus propias vecinas y en píxeles, así que la cancha no necesita ser
     contenedor de nada. Ver `--esc` en `.puesto`. */
  position: relative;
  flex: 1 1 0;
  /* EL PISO SON 386 PÍXELES, Y YA NO SIGNIFICA LO QUE SIGNIFICABA.

     DE DÓNDE SALIÓ. Decía 260 y era de cuando la ficha tenía tres pisos y medía
     70 de alto; pasó a medir 47,2 y el 260 nunca se recalculó. Nadie lo vio
     porque encima había un `aspect-ratio` que pedía 439 y tapaba al piso: el
     número falso sólo se destapaba donde la proporción NO se aplicaba, y ahí
     estaba el defecto — a 1440×900 el arquero se pisaba con el líbero en el
     5-3-2 y el 5-4-1, que son las dos donde están en la misma vertical a diez
     metros. Los 386 salieron de barrer los diez sistemas bajando el alto de a
     un píxel hasta la primera superposición, con el once lleno.

     Y ESA CUENTA YA NO ES LA QUE MANDA, desde que la ficha se encoge sola. El
     386 se despejaba como `alto de ficha ÷ el hueco más corto entre dos líneas`
     tratando el alto de la ficha como una CONSTANTE, y `--esc` lo convirtió en
     una variable que sale de lo que la cancha deje. Despejar el piso de la
     cancha del alto de la ficha, ahora, sería atar dos números que se mueven uno
     al otro — el lazo que este repositorio ya se comió cuatro veces.

     LO QUE SEPARA A LAS FICHAS HOY ES LA ESCALA, NO ESTE NÚMERO. Medido sobre
     main forzando el alto de la cancha y repintando, con el 5-3-2, que es el
     peor:

         alto de cancha   escala   ficha        pisadas
              420 y más    0,967   78,3 × 45,8       0
                    386    0,889   72,5 × 42,2       0
                    300    0,659   54,1 × 31,8       0
                    250    0,620   51,1 × 30,0       0
                    200    0,620   51,1 × 30,0       1   ← vuelven

     O sea que las once dejan de pisarse recién por debajo de **250**, no de 386,
     y no porque la cuenta falle sino porque **la escala toca su propio piso de
     0,62** —letra de 8px, ver `pintarCancha()`— y no puede encoger más.

     ENTONCES ESTE 386 COMPRA LEGIBILIDAD, NO SEPARACIÓN. Es la altura que
     mantiene a la ficha cerca de su tamaño natural (0,889 de escala) en vez de
     dejarla caer al 0,620 del piso. Y los dos números están ATADOS: bajar este
     `min-height` por debajo de 250 devuelve las superposiciones, porque a partir
     de ahí no hay escala que compense. Quien lo toque tiene que mirar los dos.

     LA CADENA VA EN UN SOLO SENTIDO: la cancha decide su alto primero, las
     fichas se acomodan después. Mientras el piso se mida con la ficha a tamaño
     NATURAL —47,3 px, su máximo— el número es conservador y el lazo no se
     cierra.

     La vara sobrevivió a todo esto porque no calcula: `herramientas/medir-panel-once.html`
     mide las cajas dibujadas y busca superposiciones reales, así que contesta
     igual con la escala puesta. Una vara que compara contra una fórmula habría
     quedado vieja el día que la fórmula cambió. */
  min-height: 386px;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  /* EL CÉSPED ES DOS CAPAS: el desgaste encima y el corte debajo. Cuál de cada
     una toca lo decide `vestirCancha()` en `plantel.js`, que cambia el patrón,
     el tono y el desgaste con cada fecha. Las rayas no van acá: son el SVG
     `.cancha__marcas`. */
  --capa-gasto: linear-gradient(transparent, transparent);
  --capa-corte: repeating-linear-gradient(to right, var(--campo) 0 11.11%, var(--campo-franja) 11.11% 22.22%);
  background: var(--capa-gasto), var(--capa-corte);
}
.cancha[data-patron='horizontales'] {
  --capa-corte: repeating-linear-gradient(to bottom, var(--campo) 0 8.333%, var(--campo-franja) 8.333% 16.666%);
}
.cancha[data-patron='damero'] {
  --capa-corte:
    repeating-conic-gradient(hsl(0 0% 100% / 0.04) 0 25%, transparent 0 50%) 0 0 / 25% 16.666%,
    linear-gradient(var(--campo), var(--campo));
}
.cancha[data-patron='rombos'] {
  --capa-corte:
    repeating-linear-gradient(45deg, hsl(0 0% 100% / 0.035) 0 34px, transparent 34px 68px),
    repeating-linear-gradient(-45deg, hsl(0 0% 0% / 0.08) 0 34px, transparent 34px 68px),
    linear-gradient(var(--campo), var(--campo));
}
.cancha[data-patron='tv'] {
  --capa-corte:
    repeating-linear-gradient(to right, hsl(0 0% 100% / 0.03) 0 20%, transparent 20% 40%),
    repeating-linear-gradient(to bottom, var(--campo) 0 10%, var(--campo-franja) 10% 20%);
}
.cancha[data-patron='diagonales'] {
  --capa-corte: repeating-linear-gradient(35deg, var(--campo) 0 44px, var(--campo-franja) 44px 88px);
}
/* EL DESGASTE, EN TRES GRADOS: pasto nuevo, las bocas de arco pisadas y la
   cancha de fin de temporada con tierra en el medio y barro en el área chica.
   `--campo-gastado` y `--campo-barro` son los mismos que usa la cancha del
   partido. */
.cancha[data-gasto='1'] {
  --capa-gasto:
    radial-gradient(ellipse 26% 7% at 50% 96%, color-mix(in srgb, var(--campo-gastado) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 26% 7% at 50% 4%, color-mix(in srgb, var(--campo-gastado) 45%, transparent), transparent 70%);
}
.cancha[data-gasto='2'] {
  --capa-gasto:
    radial-gradient(ellipse 22% 5% at 50% 99%, color-mix(in srgb, var(--campo-barro) 75%, transparent), transparent 80%),
    radial-gradient(ellipse 30% 9% at 50% 95%, color-mix(in srgb, var(--campo-gastado) 75%, transparent), transparent 70%),
    radial-gradient(ellipse 22% 5% at 50% 1%, color-mix(in srgb, var(--campo-barro) 60%, transparent), transparent 80%),
    radial-gradient(ellipse 30% 9% at 50% 5%, color-mix(in srgb, var(--campo-gastado) 65%, transparent), transparent 70%),
    radial-gradient(ellipse 26% 16% at 50% 50%, color-mix(in srgb, var(--campo-gastado) 45%, transparent), transparent 75%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, hsl(0 0% 0% / 0.3));
}

.cancha__marcas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cancha__marcas * {
  fill: none;
  stroke: var(--campo-linea);
  stroke-opacity: 0.36;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cancha__marcas .punto { fill: var(--campo-linea); fill-opacity: 0.5; stroke: none; }

.puesto {
  position: absolute;
  /* `--x` es el avance hacia el arco rival y `--y` el ancho, igual que en el
     motor. Acá la cancha se dibuja vertical, así que se cruzan. */
  left: var(--y);
  bottom: var(--x);
  transform: translate(-50%, 50%);
  display: grid;
  justify-items: center;

  /* LA FICHA MIDE LO QUE DICE, Y LO QUE SE ENCOGE ES LA LETRA. Antes el ancho
     salía de `--sep` —la distancia entre las dos fichas más juntas de la
     formación— y el contenido no se enteraba: a 1280×800 la columna del once
     deja una cancha de 282px, la caja bajaba a 35 y la cabecera seguía pidiendo
     71, así que el puesto y el nivel se dibujaban por FUERA del cuadrado, sobre
     el pasto, y el apellido se cortaba. Medido en las diez formaciones: once
     cabeceras afuera —todas— y seis apellidos recortados, a 1280×800 y a
     1024×768. Y había un caso peor: en el 3-5-2, el 5-3-2, el 3-4-3 y el 5-4-1
     el arquero y el central están en la MISMA vertical, así que la distancia
     entre esas dos es 0, `min(68px, 0 - 5px)` es negativo y las once fichas
     quedan del ancho de su relleno: 6px, desparramadas sobre el verde.

     Ahora la caja es `max-content` —nunca más chica que lo que tiene adentro,
     así que NADA se sale— y quien se achica para que dos vecinas no se pisen
     es `--esc`, que multiplica la letra y con ella los rellenos, que están en
     `em` justamente para eso. La calcula `plantel.js` mirando las once cajas
     de verdad: ver «CUÁNTO PUEDE MEDIR UNA FICHA» allá.

     El techo de 92px es el apellido más largo que se dibuja entero —trece
     letras a 13px— y de ahí para arriba se recorta: pasado eso la ficha tapa
     más pasto del que aclara. El piso de 3,4em es para el hueco vacío, que no
     tiene ni nivel ni nombre y sin él quedaría del ancho de la pastilla. */
  /* LA TARJETA CON FILETE, la «D» de `herramientas/hoja-el-once.html`, que
     eligió Alberto el 28/9/2026 pidiendo fichas «más agradables a la vista»,
     con el apellido entero y menos grandes. El color de la línea pasó de
     rellenar la pastilla del puesto a ser un filete de tres píxeles arriba:
     sigue agrupando las líneas de un vistazo y deja de gritar.
     EL FILETE ES UNA IMAGEN DE FONDO Y NO UN `border-top`, y es a propósito:
     `plantel.js` descuenta un borde parejo de un píxel al repartir la escala y
     `zonaTactil()` lo lee del lado de arriba. Un borde de tres le movería las
     dos cuentas. Por eso los estados cambian `background-color` y nunca el
     atajo `background`, que se llevaría el filete. */
  --lc: var(--linea-por);
  /* 14 Y NO LOS 13 DE `--fs-2xs`: la ficha blanca se pidió «un poco más
     grande» (28/9/2026). La escala la sigue achicando donde no entra. */
  font-size: calc(14px * var(--esc, 1));
  width: max-content;
  /* 3,6em Y NO 4,9: con 4,9 la ficha de un apellido corto —«Arias»— no
     podía angostarse, y en 1024×700 los tres centrales del 5-3-2, el 5-4-1 y
     el 5-2-3 se pisaban con la escala ya en el piso. Lo cazó
     `medir-panel-once.html` el 28/9/2026. */
  min-width: 3.6em;
  /* 120 y no 92: el techo viejo cortaba «Pérez Curci» con la escala baja. */
  max-width: calc(120px * var(--esc, 1));
  justify-items: stretch;
  gap: 0;
  /* EL RELLENO DE COSTADO SE ACHICA CON LA ESCALA, y más rápido que la letra:
     0,46em a tamaño natural y 0,12em en el piso de 0,62. Es aire, y cuando la
     escala está en el piso lo único que queda por ceder es aire. */
  padding: 0.62em max(0.12em, calc((var(--esc, 1) - 0.62) * 1.2em)) 0.31em;
  /* BLANCA, CON LA CAMISETA DEL CLUB ARRIBA (28/9/2026). Sobre el verde TV la
     tarjeta negra se leía como un agujero; la blanca es la que más contrasta y
     la tira de seis píxeles dice de qué club es sin taparle nada al apellido.
     El color de la línea no se pierde: pasó a la sigla del puesto. */
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: var(--r-sm);
  background-color: hsl(0 0% 98%);
  background-image: var(--camiseta-club, linear-gradient(var(--lc), var(--lc)));
  background-size: 100% 6px;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.35);
  color: hsl(0 0% 8%);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.puesto[data-linea='DEF'] { --lc: var(--linea-def); }
.puesto[data-linea='MED'] { --lc: var(--linea-med); }
.puesto[data-linea='DEL'] { --lc: var(--linea-del); }

@media (hover: hover) {
  .puesto:hover { border-color: hsl(0 0% 0% / 0.3); background-color: hsl(0 0% 100%); }
}

.puesto--activo {
  border-color: var(--accent);
  background-color: hsl(64 100% 92%);
  box-shadow: 0 0 0 1px var(--accent);
}

/* EL HUECO VACÍO SE VE (28/9/2026). Era un blanco al 12 % con el borde al 45 %
   y sobre el césped se perdía: Alberto, con el once vacío, «queda el cuadrado
   poco visible, en ese transparente». Ahora es un hueco OSCURO —se lee como un
   lugar para llenar, no como una ficha desteñida— con el borde punteado blanco
   entero y el texto pleno. */
.puesto--vacio { color: hsl(0 0% 100%); border-style: dashed; border-width: 1.5px; border-color: hsl(0 0% 100% / 0.85); background-color: hsl(0 0% 0% / 0.45); background-image: none; box-shadow: 0 2px 8px hsl(0 0% 0% / 0.3); }

/* Los dos datos cortos, en un renglón. Ver el porqué en `plantel.js`: lo que se
   gana es alto, y el alto es lo que hacía que el arquero se le montara a los
   centrales en diagonal. */
.puesto__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; min-width: 0; }

/* EL PUESTO, EN PASTILLA Y CON EL COLOR DE SU LÍNEA. Es lo que hace FM26 con la
   etiqueta de rol de cada ficha, y sirve para lo que parece: con once fichas
   repartidas, el color agrupa las líneas de un golpe sin leer una sola sigla.

   Sólo acá. En la TABLA del plantel el puesto sigue siendo texto plano, que es
   lo que la propia fuente hace y ya está medido y escrito: la pastilla es para
   el puesto cuando es etiqueta de una ficha, no cuando es una columna más de
   trece. Ver «La Regla de la Etiqueta» en `DESIGN.md`. */
.puesto__rol {
  font-size: 0.77em;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  /* EL PUESTO EN LA TINTA DE SU LÍNEA, ACLARADA, y ya no en pastilla. Acá
     hubo tinta oscura sobre la pastilla y se leía 1,68:1 (está contado en la
     historia de este archivo); la tinta aclarada sobre el fondo casi negro de
     la tarjeta da de sobra en las cuatro líneas. */
  color: color-mix(in srgb, var(--lc) 75%, black);
}

/* El hueco sin nadie no lleva color pleno: el color dice de qué línea es la
   ficha, y una ficha vacía no es de nadie todavía.

   Lleva `[data-linea]` en el selector para EMPATARLE la especificidad a las tres
   reglas de arriba y ganarles por orden. Sin eso, `.puesto--vacio` (0,2,0) perdía
   contra `.puesto[data-linea='MED']` (0,3,0) y el hueco vacío quedaba con el
   verde de la línea y encima el texto apagado: 1,67:1. Se veía como una ficha
   más y no se leía. */
.puesto--vacio[data-linea] .puesto__rol {
  color: hsl(0 0% 100%);
}

.puesto__n {
  font-size: 1em;
  font-weight: 700;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.puesto__nombre {
  color: inherit;
  font-weight: 500;
  text-align: left;
  /* El tope lo pone la ficha, que mide lo que su apellido pide hasta el techo:
     un `max-width` en píxeles acá volvería a fijar por abajo lo que allá se
     calcula. El recorte queda sólo para los apellidos más largos que ese
     techo, que es donde la ficha empieza a tapar cancha. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fuera de puesto se ve en la cancha, no sólo en la tabla: el once mal armado
   tiene que verse mirando el equipo. */
.puesto[data-apt='0'] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 2px 8px hsl(0 0% 0% / 0.4); }
.puesto[data-apt='1'] { border-color: var(--warn); }

/* --------------------------------------------------------------------------
   ARRASTRAR
   --------------------------------------------------------------------------
   Tres estados y ni un color nuevo. El que viaja se apaga —se está yendo de
   donde estaba—, el puesto bajo el cursor se enciende con el violeta de lo
   elegido, y los puestos donde el que viene no juega se apagan con la misma
   opacidad con la que la tabla apaga a los que están fuera de puesto: la regla
   ya existía, sólo cambia el momento en que se aplica.
   -------------------------------------------------------------------------- */

/* La foto que viaja con el cursor (`.foto-arrastre`) y el apagado del que
   viaja (`.arrastrando`) están en `app.css`: desde que el entretiempo también
   se maneja arrastrando, son de las dos pantallas. */

/* Un puesto ocupado se agarra; uno vacío sólo se toca. */
.puesto[draggable='true'] { cursor: grab; }
.puesto[draggable='true']:active { cursor: grabbing; }

.puesto--recibe {
  border-color: var(--accent);
  background-color: hsl(64 100% 92%);
  box-shadow: 0 0 0 1px var(--accent);
}

.cancha--eligiendo .puesto[data-encaja='0'] { opacity: 0.4; }

/* La lista, mientras algo viene de la cancha, dice que soltar acá es sacarlo
   del once. Línea de puntos y no relleno: es un destino posible, no un estado
   del plantel. */
.table-scroll.recibe-salida {
  outline: 1px dashed var(--accent-line);
  outline-offset: -1px;
  border-radius: var(--r-sm);
}

/* `flex: none` y no sólo `min-height`: es hijo de una columna flex, y sin eso
   el reparto lo COMPRIME hasta su mínimo —dos líneas y media— mientras el
   texto pide cuatro. El sobrante no se recorta: se derrama por abajo, encima
   de los botones, porque el panel no tiene `overflow`. Se veía sólo en
   ventanas bajas, que es donde el reparto se pone a apretar. El `min-height`
   se queda como PISO, para que la caja no salte de alto cada vez que el
   mensaje cambia de largo. */
/* EL PISO PASA DE 2,4em A TRES RENGLONES, y con eso el presupuesto de alto del
   panel deja de depender de qué diga el mensaje. 2,4em son renglón y medio, así
   que la caja crecía de 1,7 a 4,3 renglones según el momento: la cancha, que es
   la elástica, se movía debajo del cursor JUSTO mientras se arrastraba a
   alguien. Un piso de tres y ningún mensaje que pase de tres —ver `ayudaBase()`
   y `avisoAlineacion()` en `plantel.js`, que se acortaron para que sea cierto—
   dejan la caja quieta en todos los estados.

   Tres y no cuatro porque son 26 píxeles, y 26 píxeles son la diferencia entre
   que una ventana de 900 de alto conserve las dos columnas o pase a rodar. */
.cancha__ayuda {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
  min-height: calc(3 * var(--lh-body) * 1em);
}

/* EL HUECO QUE NO JUEGA LA NEUTRA lleva una marca de cuatro píxeles en la
   esquina. Es un `::after` posicionado y no un elemento ni un renglón: la ficha
   mide 51 px con dos pisos y cualquier cosa que ocupe alto la pone a pisar a la
   de al lado. Va en la esquina de arriba a la derecha, que es la única de las
   cuatro que no tiene texto —abajo está el apellido y arriba a la izquierda el
   puesto—.

   Y NO ES VIOLETA, que fue lo primero. El color de canal ya dice «este hueco
   está elegido» en esta misma ficha —`.puesto--activo` le pone el borde y el
   halo— así que un punto de acento en una ficha NO elegida señala dos estados
   distintos con el mismo color, que es el uso que la guía le prohíbe al cuarto.
   Gris secundario: se lee como una anotación, que es lo que es.

   NO LLEVA `position: relative`, y eso hay que decirlo porque es lo primero que
   uno escribe: `.puesto` YA es `absolute` —así se coloca en la cancha— y
   pisarle la posición sería mandar las once fichas a la esquina. Un elemento
   absoluto ya es contenedor de posicionamiento para sus hijos. */
.puesto[data-cons]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  /* EN LA TIRA DE LA CAMISETA Y NO EN LA FICHA: abajo de la tira está el
     nivel, y el punto se le montaba encima. Blanco con aro oscuro para que
     se vea sobre cualquier camiseta. */
  box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.55);
}

/* LAS ONCE CONSIGNAS, DE UN VISTAZO. Dos columnas de renglones cortos entre la
   cancha y la línea de ayuda.

   LAS COLUMNAS SE ADAPTAN AL ANCHO, y eso NO es una elegancia: es lo que
   arregló la única ventana donde esta lista rompía algo. Con dos columnas fijas
   pide 128px, y a 1920×1080 eso empujaba la cancha hasta su piso de 386 y
   dejaba al panel escondiendo 41px en los diez sistemas. A esa altura el panel
   NO rueda —la media query de `max-height: 1050px` no aplica— así que no tenía
   dónde poner el excedente.

   Con `auto-fill` la lista usa el ancho que el panel tenga: dos columnas en los
   318px del suelo y tres en los 460 del techo, que es justamente 1920×1080. Ahí
   pasa de once renglones en seis filas a cuatro, y el excedente desaparece.

   EL RESTO DEL RECORRIDO, POR SI ALGUIEN VUELVE A TOCARLO: en una sola columna
   pide 196px. El panel de casi todas las ventanas no esconde nada —su
   `overflow` es `visible`, así que la vara «¿esconde algo?» no puede dar rojo
   ahí— pero la página rueda, y a 1280×800 ya rueda 565px sin esto. Con dos
   columnas ese número no se mueve en 1440×900, 1280×800 ni 1024×768: la lista
   entra en holgura que ya existía. Con una, se pagarían 90px más de rodado en
   la pantalla donde más molesta.

   EL RENGLÓN NO SE RECORTA NUNCA. La consigna más larga —«A pisar el área»— pide
   81px y la columna da de sobra a partir del ancho mínimo del panel; el
   `min-width: 0` está para que el `text-overflow` funcione si algún día una
   consigna nueva se pasa, no porque haga falta hoy.

   Y LOS PUESTOS EN COLUMNA PROPIA, con ancho fijo: son de dos a tres letras y
   alinearlos hace que los once se barran de un golpe. Es la misma razón por la
   que la tabla del plantel alinea el dorsal. */
.consignas-once {
  flex: none;
  display: grid;
  /* 8em, Y ESTE NÚMERO SE PELEÓ CON LOS DOS EXTREMOS. Tiene que ser lo bastante
     GRANDE para que una columna entera quepa —el renglón más ancho pide 125px:
     36 de puesto, 4 de aire, 81 de «Sale jugando» y 4 de relleno— y lo bastante
     CHICO para que en el panel ancho entren tres, porque con dos fijas la lista
     medía 128px de alto y a 1920×1080 empujaba la cancha hasta su piso.

     Con 7em (112px) entraban tres columnas en el panel de 432 de una ventana de
     1440 y quedaban de 124,7: siete píxeles cortos, y «Sale jugando» se
     recortaba en los dos centrales. Se vio JUGANDO una fecha y no midiendo,
     porque yo había comprobado el recorte a 1280 —donde son dos columnas— y no
     a 1440, que es donde aparece la tercera. La lección es del ancho de columna
     y no de la ventana: los quiebres de este bloque están donde `auto-fill`
     cambia de cuenta, no donde cambia la pantalla.

     Y CON 8em TAMPOCO: la tercera columna aparecía a 130,9px y el renglón
     necesitaba 135,3 —39,3 de puesto, 4 de aire, 88 de «Sale jugando» y 4 de
     relleno—, así que al texto le quedaban 86 y faltaban DOS. Se veía sólo
     entre 1440 y 1600, que es la franja donde `auto-fill` cambia de dos
     columnas a tres: a 1440 son dos de 193 y entra, a 1600 son tres de 134 y
     entra, y a 1500 son tres de 130,9 y no.

     Subirlo a 8,5em arreglaba el recorte y rompía lo otro: con columnas de 136
     ya no entraban TRES en ningún panel, la lista se quedaba en dos y 118px de
     alto, y ése era justamente el alto que a 1920×1080 empujaba la cancha hasta
     su piso. Las dos restricciones tiran para lados opuestos y no había número
     que las cumpliera.

     Lo que las destrabó no fue la maqueta sino el CONTENIDO: «Sale jugando»
     pasó a «La juega». Era la más ancha de las trece y la única que pedía 88;
     sin ella la peor es «De espaldas» con 69, el renglón baja a 116 y tres
     columnas entran de sobra. 7,5em es ese renglón con un poco de aire.

     Cuando una maqueta no cierra por dos píxeles, mirá si lo que no entra es
     una palabra que se puede decir más corta.

     LA MORALEJA, que ya costó tres números: el quiebre de este bloque NO está
     donde cambia la ventana sino donde `auto-fill` cambia de cuenta, y hay que
     barrer los anchos INTERMEDIOS. Medir 1280 y 1600 y dar por buena la franja
     del medio es cómo se llegó acá tres veces. */
  grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
  gap: 1px var(--sp-5);
  align-content: start;
}

.cons-fila {
  display: flex;
  align-items: baseline;
  /* LOS AIRES SALEN DE UNA MEDICIÓN Y NO DEL GUSTO. En el panel angosto —318px,
     que es el suelo del `clamp` y lo que da 1280×800— la columna reparte 136px
     por renglón, y con la columna del puesto en 2,6em y estos aires al texto le
     quedaban 81 cuando «A pisar el área» pide 88. Se recortaban dos de los once.
     Apretando el aire y el relleno el texto pasa a tener 95, o sea siete de
     margen sobre el peor caso de hoy.

     LA COLUMNA DEL PUESTO ES 2,8em, Y LLEGAR AHÍ COSTÓ TRES INTENTOS QUE VALE
     DEJAR ESCRITOS. Con 2,2em la cuenta cerraba en el papel —«tres letras en
     versalitas miden 1,9em»— y en la pantalla no: el renglón se leía «MCDDe
     corte», pegado, porque el tracking agrega un espacio DESPUÉS de la última
     letra que la cuenta a ojo no incluye. Con 2,5 tampoco: el `em` se resuelve
     contra la letra del propio elemento y «MCO» pide 34px de los de verdad.

     O sea que el ancho de un texto en versalitas no se estima: se le pregunta
     al navegador. `scrollWidth` contra `clientWidth` en los diez sistemas es la
     única vara que lo contesta, y es la misma que caza el recorte del texto. */
  gap: var(--sp-2);
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .cons-fila:hover { background: var(--bg-row); }
}

/* El elegido se marca como se marca en la cancha: con el color de canal, que es
   el que dice «esto es lo que estás tocando». */
.cons-fila--activa { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.cons-fila__rol {
  flex: none;
  width: 2.8em;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cons-fila__que {
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Y ACÁ NO VA EL PUNTO QUE LLEVA LA FICHA, aunque lo llevó un rato. Dos motivos
   y los dos aparecieron jugando:

   · REPITE. El punto existe en la ficha porque la ficha NO puede decir la
     consigna; la lista la dice con todas las letras, así que la marca no agrega
     nada y hace leer dos veces lo mismo.
   · Y COSTABA OCHO PÍXELES DEL TEXTO. El `::before` vivía dentro de la celda de
     la consigna, así que un renglón marcado pedía 83px contra los 80 que la
     columna da: «De espaldas» con punto se recortaba y sin punto entraba. Se vio
     después de jugar una fecha, con un once que había cambiado.

   La marca de «este hueco no juega la neutra» sigue estando donde hace falta:
   en la ficha de la cancha. */

/* LA CONSIGNA DEL HUECO, QUE ES UNA BANDA DENTRO DE LA LISTA. Dos piezas en una
   columna: los dos o tres botones y la frase de lo que hace. El rótulo se fue
   con la mudanza —lo dice el sitio, que es la fila teñida de arriba— y con él
   17px más el aire de su renglón.

   VA DE LADO A LADO DE LA REJILLA (`grid-column: 1 / -1`) y no adentro de una
   columna: la columna angosta de esta lista mide 136px y el control segmentado
   de tres opciones pide más del doble. Y la teñida es la MISMA tinta de la fila
   elegida, más suave: dice «esto es lo abierto de aquello», no un bloque nuevo.

   RESERVA SU ALTO SÓLO DONDE HACE FALTA, y hace falta en una sola ventana: la
   ALTA, de 1051 para arriba, que es la única donde el panel no rueda y la
   cancha es `flex: 1 1 0`. Ahí todo lo que crece al lado le saca alto al dibujo,
   así que una banda que aparece le corre las once fichas al cursor que acaba de
   tocar una. Donde la cancha pide su proporción con `flex: none` —o sea en todo
   lo demás— la reserva era el precio sin la compra: 80px de agujero en el
   panel, siempre, hasta que tocabas un puesto. Ver los dos bloques de abajo.

   Y EL ALTO RESERVADO ESTÁ MEDIDO, no elegido: las seis familias dan 85,5 px
   —arquero, lateral, central, cinco, interior, extremo y nueve, a 1600×900—
   porque ninguna pasa de una fila de botones. Los 5em son ese número. Con 4,6
   el bloque crecía seis píxeles al elegir un puesto, que es exactamente el
   salto que este `min-height` existe para no dar.

   La frase se recorta a UN renglón por lo mismo: dos la harían crecer en una
   ventana angosta. Lo que dice entero está en el `title` de cada botón, que es
   donde el juego pone siempre lo que no entra. */
.consigna {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  /* SIN MARGEN ARRIBA, y no es estética: la banda vacía —el arquero, que no
     tiene consigna— no lo lleva, así que un margen de 4px hace que la lista
     mida 84 con un lateral elegido y 80 con el arquero. Cuatro píxeles de
     salto en la ventana alta son cuatro píxeles que la cancha cede y las once
     fichas se corren. Lo que la separa de la fila de arriba es su propio
     relleno y el renglón de 1px de la rejilla; pegada se lee mejor, además,
     porque es lo ABIERTO de esa fila y no un bloque nuevo. */
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  min-height: 5em;
}

/* LA BANDA VACÍA NO SE VE, PERO ESTÁ. Sin puesto elegido se dibuja igual —es lo
   que mantiene quieto el alto de la lista— y ahí no puede quedar una tinta ni
   un relleno colgando al final de los once renglones. El `:empty` es exacto: la
   banda sin consigna se dibuja literalmente sin un hijo ni un carácter. */
.consigna:empty { padding: 0; background: none; }

.consigna .segmented { width: 100%; }

.consigna__frase {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* EL SISTEMA, EN UN CONTROL DE ALTO FIJO. Eran diez chips en una fila que se
   doblaba: dos renglones en la columna angosta, tres cuando entraba un sistema
   más, y en el teléfono había que deslizarlos. O sea un control que le comía
   alto a la cancha cada vez que el juego aprendía un dibujo nuevo, y la cancha
   es el recurso escaso de este panel (ver `el-piso-de-la-cancha`).

   Una lista mide lo mismo con diez que con treinta. Los porqués de agrupar por
   línea de fondo están en `pintarSistemas()`; acá sólo se le da el ancho de la
   columna, que es lo que el desplegable de `controles.js` necesita para medir
   su botón. */
.plantel__sistemas { display: flex; }
.plantel__sistemas .desp { width: 100%; }

/* EL BOTÓN TIENE QUE PARECER UN CONTROL, y eso hay que escribirlo: el
   desplegable de `controles.js` le pasa al botón la clase del `<select>` al que
   reemplaza y le deja a ELLA el borde, el fondo y el tamaño (está dicho en la
   cabecera de `controles.css`). Sin esta regla el botón salía sin caja —sólo el
   nombre del sistema y una flechita chiquita a la derecha— y en una cabecera de
   panel eso se lee como un título, no como algo que se toca.

   Es la misma caja que el selector del entrenamiento, con dos diferencias que
   son del sitio: la cifra va al tamaño del cuerpo y no en `--fs-2xs`, porque
   acá el sistema es EL dato del panel y no un filtro al margen; y el color es
   el primario por lo mismo. */
.plantel__sistema {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .plantel__sistema:hover { border-color: var(--line-strong); }
}
.plantel__sistema:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

/* LAS ALINEACIONES GUARDADAS. Una fila: el desplegable se lleva el ancho y el
   botón de borrar es cuadrado al lado, porque elegir cuál cargar es la acción y
   borrar es la excepción. Ir arriba de la fila de acciones y no dentro es a
   propósito: los tres botones de abajo actúan sobre el once que hay puesto, y
   esto trae uno de otro lado. */
/* SIN `margin-top`: el panel ya separa a sus hijos con su propio `gap`, así que
   el margen se sumaba y dejaba a esta fila al doble de distancia que a todas las
   demás. Son ocho píxeles y en este panel ocho píxeles se pelean. */
.alineaciones {
  display: flex;
  gap: var(--sp-3);
}

.alineaciones[hidden] { display: none; }

.alineaciones .desp { flex: 1 1 auto; min-width: 0; }

.alineaciones__borrar {
  flex: none;
  padding-inline: var(--sp-4);
}

/* --------------------------------------------------------------------------
   EL TABLERO: LA CANCHA Y LO QUE SE LE PIDE
   --------------------------------------------------------------------------
   Acá es una caja que no hace nada —una columna con el mismo aire que tenía el
   panel— y en el escritorio ancho parte el panel en dos. Existe por eso: para
   que las once consignas, el planteamiento y la línea de ayuda puedan ponerse
   AL LADO de la cancha sin cambiar el orden en el que se leen cuando no hay
   sitio para dos columnas.

   `flex: 1 1 auto` y no `1 1 0`: lo que reparte el alto adentro sigue siendo la
   cancha, que es la elástica. Esta caja sólo lo transporta.
   -------------------------------------------------------------------------- */

.once__tablero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-height: 0;
}

.once__lado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
}

/* --------------------------------------------------------------------------
   EL PLANTEAMIENTO
   --------------------------------------------------------------------------
   Los tres mandos los dibuja `mandos.css`, la hoja que esta pantalla comparte
   con la previa. Acá está sólo cómo se acomodan: en fila mientras el ancho dé,
   y eso es lo que los hace baratos en ESTA pantalla, donde el alto es el
   recurso escaso —lo dicen los tres botones de acá abajo y los diez sistemas de
   acá arriba, que ya se recortaron por lo mismo—.

   `auto-fit` con un mínimo de 9,5em y no un número de columnas: el panel mide
   de 318 a 1000 según la ventana, así que son tres en fila donde entran y dos
   donde no. Un `repeat(3)` fijo partiría «Muy defensiva» en el panel angosto.
   -------------------------------------------------------------------------- */

.planteo { display: grid; gap: var(--sp-3); align-content: start; }

.planteo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Quién eligió el plan, en el gris de anotación y no en ámbar: que lo proponga
   el ayudante no es algo que haya que atender —es el estado normal hasta que
   toques un mando— y el ámbar de esta pantalla ya está gastado en decir «acá
   falta algo». */
.planteo__quien {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* MIENTRAS EL PANEL SEA UNA COLUMNA, EL MANDO ES UN RENGLÓN: RÓTULO Y
   DESPLEGABLE, uno debajo del otro y nada más.
   ----------------------------------------------------------------------
   TRES EN FILA NO ENTRAN, Y ESTÁ MEDIDO. Es lo primero que se probó, porque es
   lo que menos alto cuesta —76px de maqueta contra 129—. El panel de una columna mide de
   330 a 460 de maqueta, así que cada mando se queda con 106 a 140, y el valor
   más largo que tiene que mostrar el desplegable —«Al contragolpe»— pide 127
   con su flecha y su relleno. O sea que a 1600 entra y a 1280 NO: a 106px los
   tres desplegables decían «Presión…», «Vertigin…» y «Al espa…».

   Y eso es lo único que no se puede recortar acá. Un DT que no lee con qué
   mentalidad va a salir no tiene el control, tiene un adorno: es la misma razón
   por la que la ficha de la cancha dibuja el apellido entero en vez de
   «M. Mere…». La frase se puede mandar al `title` porque explica; el valor, no,
   porque ES el estado.

   LO QUE SE VA, Y NO SE PIERDE. El valor en negrita lo dice el desplegable, que
   está al lado —en la previa no es repetición porque su columna mide 300 y los
   dos quedan lejos; acá pegados es la misma palabra dos veces—. El dibujo
   cuesta 40px por mando y la frase otros 37: los dos vuelven en cuanto el panel
   se parte en dos, que es para lo que existe la columna de leer. La frase,
   mientras tanto, va entera en el `title` del mando (ver `conTitulo` en
   `mandos.js`), que es la misma salida de la consigna en la ficha y la del
   rótulo largo en los tres botones de acá abajo.

   LO QUE CUESTA, Y SE PAGA DE VERDAD. Medido con `herramientas/medir-panel-once.html`
   —el caso más pesado: las diez formaciones, el ayudante apretado y la fila de
   alineaciones guardadas puesta— contra `9c42c9de` en su propio worktree y con
   el MISMO arnés en los dos árboles:

       ventana      alto de cancha      la página rueda
       1280×800        460 → 460            20 → 144
       1366×768        460 → 460            52 → 176
       1440×900        460 → 460             0 →   9
       1600×900        460 → 460             0 →   9
       1680×1050       648 → 507             0 →   0
       1920×1080       682 → 803             0 →   0
       2560×1440      1091 → 932             0 →   0
       1024×700        438 → 438           102 → 240
        375×812        420 → 420          1241 → 1364

   DOS COSAS HAY QUE LEER DE ESA TABLA Y NINGUNA ES CÓMODA.

   · EN LA VENTANA ANGOSTA LA PÁGINA BAJA MÁS. Son los 129px del bloque, y es
     todo lo que se paga: el panel no esconde nada —la vara pregunta eso aparte
     y da 0 en las dieciséis ventanas— así que la lista y los tres botones se
     siguen alcanzando bajando, que es lo que este bloque ya había resuelto.
   · Y EN LA VENTANA ALTA PERO NO ANCHA —1680×1050— LA CANCHA PIERDE ALTO: de
     648 a 507. Ahí el panel es una sola columna y la cancha es la elástica, así
     que el bloque sale de su alto. Es el único sitio donde esta tanda achica lo
     que vino a agrandar, y se dice en vez de taparse.

     No se arregla bajando el quiebre de las dos columnas: a 1680 la tabla del
     plantel no tiene ancho que prestar (ver el bloque de 1850 más abajo). Se
     arreglaría solo el día que la tabla adelgace.

   Las dos filas de 2560 y 1920 se leen al revés de lo que parece: a 2560 el
   alto baja de 1091 a 932 y la cancha MEJORA, porque el ancho pasa de 427 a 605
   y 427×1091 no es una cancha, es un pasillo.
   ---------------------------------------------------------------------- */

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

.planteo .mando {
  /* El rótulo mide lo que mide el más largo («Mentalidad») y el desplegable se
     lleva el resto: dos columnas y no una rejilla flexible, porque tres selects
     que empiezan en sitios distintos se leen como tres controles distintos. Es
     el mismo reparto que la pelota parada de la previa. */
  grid-template-columns: minmax(0, 6em) minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--sp-3);
}

.planteo .mando__head { display: block; }

.planteo .mando__valor,
.planteo .mando__dibujo,
.planteo .mando__frase { display: none; }


/* LOS TRES BOTONES, EN DOS FILAS Y NO EN TRES. Guardar la alineación se lleva
   el ancho entero porque es la única acción de esta pantalla que no está
   repetida en ninguna otra parte; las otras dos van a la par debajo. Son 40
   píxeles, y los dos rótulos largos entran: medidos en la columna de 318, cada
   media columna da 139px y «Que lo proponga el ayudante» se parte en dos
   renglones SIN salirse de la caja (`scrollWidth` = `clientWidth`).

   La fila de tres ahorraba 80 en vez de 40 y se descartó por lo mismo que se
   mide: a 113, 109 y 82 píxeles los tres rótulos quedan partidos en tres y
   cuatro renglones, que es cambiar un defecto de alto por uno de lectura. */
/* LAS TRES EN UNA FILA Y NO EN DOS. La fila de arriba era «Guardar esta
   alineación» a lo ancho y las otras dos debajo: 74px en el escritorio y 94 en
   el teléfono, donde el mínimo táctil pone cada botón en 44. En una sola fila
   son 34 y 44. Es el mismo recorte que ya se le hizo a los diez sistemas —bajar
   el relleno antes que perder una palabra— y por el mismo motivo: en esta
   columna el alto es el recurso escaso y el ancho sobra.

   EL RELLENO BAJA A `--sp-3`, y eso no es cosmética: con el de fábrica —`0
   var(--sp-6)` en `.action`— las tres piden 263px y el panel angosto del
   escritorio da 267, o sea que cualquier rótulo un poco más largo las dobla.
   Con `--sp-3` piden 227 y quedan cuarenta de margen.

   Y ES `flex` CON DOBLADO Y NO UNA REJILLA DE TRES, que es lo que estaba
   escrito primero. Una rejilla de tres columnas NO SE DOBLA: cuando los rótulos
   no entran, las columnas se pasan del ancho del panel y la fila SOBRESALE —
   medido, 62px afuera en una ventana de 320—. Un `1fr` no protege de eso, que
   es la trampa: `1fr` es `minmax(auto, 1fr)` y el `auto` es el ancho mínimo del
   contenido, así que la rejilla crece por debajo en vez de repartir.

   Con `flex-wrap` el peor caso deja de ser desbordar y pasa a ser volver a la
   fila de antes, que es exactamente lo que este bloque ya sabía hacer. Sólo
   ocurre por debajo de 360px de ventana. */
.cancha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex: none;
}
.cancha__acciones .action { flex: 1 1 auto; justify-content: center; padding-inline: var(--sp-3); }

/* Y LA FILA SE ANCLA AL PIE DEL PANEL. Recortar el marco tiene una factura que
   no se ve midiendo el panel: en el escritorio la tarjeta del once NO mide lo
   que mide su contenido —la estira la fila de la rejilla, o sea la TABLA de al
   lado, que es mucho más alta—, así que cada píxel que se le saca al marco se
   convierte en teal vacío al final de la tarjeta. Medido a 1440×900: el hueco
   al pie era de 93px antes de esta tanda y llegó a 241 con los tres recortes
   puestos; a 1024×760, a 448.

   `margin-top: auto` manda el sobrante ARRIBA de la fila: la tarjeta pasa a
   terminar en un control, como termina cualquier panel con pie, y el aire queda
   entre la línea de ayuda y los botones, que es donde un hueco se lee como
   respiro y no como algo que falta.

   NO HACE NADA DONDE NO HAY SOBRANTE, y por eso no lleva media query: en el
   teléfono el panel mide lo que mide su contenido, y en la ventana alta la
   cancha es `flex: 1 1 0` y se lo lleva todo antes de que un margen automático
   pueda repartirse nada.

   Las dos reglas y no una porque la fila de alineaciones guardadas aparece sola
   el día que el DT guarda su primer once, y entonces el pie son DOS bloques: el
   ancla tiene que agarrar al primero de los dos que esté a la vista. */
.plantel__once .alineaciones:not([hidden]) { margin-top: auto; }
.plantel__once .alineaciones[hidden] + .cancha__acciones { margin-top: auto; }
/* El de deshacer aparece solo, y cuando aparece se lleva la fila: si compartiera
   media con «Vaciar el once» los dos rótulos largos quedarían apretados, y éste
   además cambia de texto según cuántos puestos haya corridos. */
.cancha__acciones [data-f='enderezar'] { flex-basis: 100%; }

/* --------------------------------------------------------------------------
   CUANDO NO CABEN LAS DOS COLUMNAS
   -------------------------------------------------------------------------- */

/* EN VENTANAS BAJAS RUEDA LA PÁGINA, Y NI EL PANEL NI LA CANCHA CEDEN.

   ESTO DECÍA LO CONTRARIO, y hay que contar por qué se dio vuelta. Decía: «lo
   que cede es el panel entero: se desplaza. Nada se encima, nada queda abajo
   del borde, y los tres botones se alcanzan bajando». Lo primero era verdad y
   lo segundo dejó de serlo, y encima escondía el defecto de al lado.

   LO QUE ESCONDÍA. La cancha traía `aspect-ratio: 68/105`, que en la columna de
   284 pide 439 de alto. Como 439 es MÁS que el piso de 386, adentro de este
   bloque nunca se pisaba nada — y el `min-height: 260px` falso quedaba tapado.
   Arriba de 820, donde esta regla no llega, la cancha caía a 377 y el 5-3-2 se
   pisaba. O sea que la regla que existía para que no se pisaran era la que
   impedía ver que se pisaban. Ver el comentario del piso en `.cancha`.

   LO QUE DEJÓ DE SER VERDAD. «Se alcanzan bajando» ya se había roto una vez —el
   selector pasó de seis sistemas a diez— y se parchó pegando la barra de
   acciones abajo. El parche funcionaba para los botones y no para lo que la
   barra tapaba: MEDIDO a 1280×800, la barra pegada se comía entre 3 y 5 de las
   once fichas según el sistema, y a 1280×720 además una quedaba entera fuera de
   la caja. La última línea de la cancha —los centrales y el arquero— no estaba.

   Y LA REGLA DE LA CASA LO PROHÍBE: en una pantalla de alto fijo se desplaza una
   LISTA por columna, nunca el panel. Esta columna no tiene ninguna lista: tiene
   un dibujo y tres controles. No hay nada acá que deba desplazarse.

   ASÍ QUE LA CUENTA SE HIZO ENTERA, y no cierra. El panel necesita 386 de cancha
   más 378 de todo lo demás; a 1280×800 tiene 606. Los recortes honestos —la
   cancha pidiendo su piso en vez de su proporción (48), los sistemas apretados
   (32), la ayuda en tres renglones (26), las acciones en dos filas (40)— suman
   146 y llevan el marco de alto fijo hasta los 844 de ventana —con la partida
   más liviana; ver el umbral más abajo—. Apagando ADEMÁS el título del panel y
   los huecos se llega a 804, que sigue sin entrar en un portátil de 800. No hay
   reparto que haga entrar las once fichas legibles en esta columna por debajo
   de eso.

   ENTONCES LO QUE CEDE ES EL MARCO. Debajo del umbral la pantalla suelta el alto
   de la ventana y rueda LA PÁGINA, que es exactamente lo que ya hace el quiebre
   de 900 de ancho acá abajo: las dos columnas se quedan lado a lado, la cancha
   pide su proporción, la barra de acciones se despega y todo se alcanza con la
   rueda. Nada escondido y nada pisado, que era lo que se pedía.

   EL UMBRAL VA EN 960, Y ESE NÚMERO NO ES EL DE LA PANTALLA QUE UNO TIENE
   DELANTE. La primera cuenta dio 844 y estaba medida sobre la partida sembrada,
   que es la más liviana que existe: sin alineaciones guardadas, con la ayuda en
   su mensaje de reposo y sin el botón de deshacer. Este panel tiene TRES cosas
   que aparecen solas y ninguna es rara:

     · la fila de alineaciones guardadas, que existe desde el primer once que el
       DT guarde y son 52 píxeles ..................  844 → 904
     · el cuarto renglón del aviso de «alineación cargada», que enumera a los
       que faltaban con su motivo ..................  904 → 928
     · el botón de deshacer, que aparece al correr un puesto de sitio en el
       pasto .......................................  928 → 956
     · y desde el merge de los rasgos, LA CONSIGNA DEL HUECO, que no aparece ni
       desaparece: reserva 80 px fijos siempre ......  956 → 1048

   Los primeros tres a la vez son un martes cualquiera, no un caso patológico:
   cargás una alineación guardada, te falta gente, corrés a un central. El cuarto
   no es ni eso — está siempre.

   Y EL UMBRAL DE 1050 QUE SALIÓ DE ESA CUENTA ESTABA CORTO, medido el 31/8/2026
   con `herramientas/medir-ventana-que-no-rueda.html`. La cuenta de arriba suma
   bien pero se tomó sobre un panel al que le faltaban dos de los cuatro bloques
   que aparecen solos, porque el barrido que la midió los ponía de a uno: con
   los CUATRO puestos a la vez —alineaciones, cuarto renglón del aviso, botón de
   devolver los puestos y consigna— arriba del umbral viejo seguía escondiendo,
   y la página ahí no rueda:

     · 1920×1051 escondía 18 px, y 1920×1060, nueve
     · 1920×1080 no escondía, pero dejaba la cancha en 386 CLAVADO: holgura
       cero, o sea que el renglón siguiente que alguien agregue desaparece
     · 1280×1080 escondía 52 px, y 1280×1060, setenta

   EL UMBRAL DEPENDE DE CUÁNTAS COLUMNAS ARMA LA LISTA DE CONSIGNAS, que es lo
   que la cuenta vieja no podía ver porque la lista es posterior. Con tres
   columnas la lista ocupa cuatro filas y con dos, seis: son ~40 px de
   diferencia, y por eso el mismo alto alcanza en un panel ancho y no en uno
   angosto. Medido en el peor estado, la holgura sobre el piso de 386:

       alto     3 columnas (≥1440)   2 columnas (1024–1380)
       1051        −18 escondidos       −79 escondidos
       1080          0                  −52 escondidos
       1120         31                  −15 escondidos
       1130         40                   −5 escondidos
       1170         77                    16
       1210        114                    53

   De ahí los dos umbrales: 1130 para el panel ancho y 1210 para el angosto, que
   son los primeros altos donde los dos tienen ~40 px de holgura — la misma que
   tenía 1920×1080 antes de que se contaran los dos bloques que faltaban.

   LA FRONTERA DE COLUMNAS ESTÁ MEDIDA Y EL `1439px` CUBRE DE MÁS A PROPÓSITO:
   son dos columnas hasta 1380 y tres desde 1440, y el corte exacto queda en el
   medio. Cubrir de más sólo hace que una franja de 60 px de ancho ruede un poco
   antes de lo estrictamente necesario, que es el lado barato de equivocarse.

   Y LO QUE ESTO CUESTA, DICHO SIN ADORNOS: el marco de alto fijo ya no llega a
   1080p. Vale para 1440p y para el monitor vertical. Es el precio de que el
   peor estado no esconda nada en vez de que no esconda nada el estado cómodo,
   y era eso o dejar 52 px desapareciendo sin barra de desplazamiento en una
   ventana de 1280×1080.

   LOS 80 PX DE LA CONSIGNA SON RESERVA Y NO CRECEN, comprobado antes de creerle
   al `min-height: 5em` que los pone: se recorrieron los 110 huecos de los diez
   sistemas poniendo `hueco` a mano y repintando, y los 100 que dibujan consigna
   —el arquero no tiene— miden los mismos 80. La primera medición de esto dio
   «no crece» con CERO consignas dibujadas, porque tocar un puesto no pone
   `hueco`: hace falta el control positivo o las dos respuestas se escriben
   igual.

   Y ESO ES LO QUE COSTABA. El umbral estuvo en 1130 hasta el 1/9/2026, con este
   argumento: que la alternativa era «clavar el umbral en 900 y dejar que el
   panel volviera a esconder la última línea de la cancha el día que el DT
   guarda su primera alineación». El argumento era bueno y el número estaba mal,
   porque nunca se midió ESE día: se midió la partida sin alineaciones guardadas
   y se dedujo el peor caso en vez de armarlo.

   REMEDIDO EL 1/9/2026 CON EL PEOR CASO ARMADO A MANO —los siete bloques de la
   columna a la vez, con `.alineaciones` visible, que es la fila de 35,4 px que
   aparece con la primera alineación guardada y NO crece con las siguientes
   (es un desplegable y un botón, no una lista)—, sobre el plantel de 28 de
   `carrera-foto`, en píxeles de MAQUETACIÓN:

     ventana   ¿entra?   le falta   la página rueda
     1600×995     sí         0            0
     1600×990     sí         0            0
     1600×985     NO         4            0
     1600×960     NO        28           15
     1600×900     NO        85           75

   O SEA QUE EL UMBRAL ES 990 Y NO 1130: entre esos dos hay 140 px de ventanas
   —las de 1000 y 1050— que rodaban la página entera sin necesidad. La cláusula
   de ancho de 1440 sí hacía falta y se queda: a 1280 la columna del once mide
   331 en vez de 467 y la consigna se apila más alto.

   LA CUENTA QUE LO PREDICE, para no volver a barrer a ciegas: la columna PIDE
   816 px de maquetación con el peor caso puesto —cancha en su piso de 386,
   consigna 166, ayuda 65,5, y los cuatro bloques chicos— y la cabecera y los
   rellenos se llevan 134. 816 + 134 = 950 de maquetación, que por la escala son
   988 px de ventana. Medido: 990.

   Y NO SE PUEDE BAJAR A 900 GRATIS, que era la tentación. Ahí faltan 85, y los
   85 están justo en los dos bloques que esta media query compacta —la consigna
   pasa de 166 a 82,8 y la ayuda de 65,5 a 43,7—. Pero las compacta porque acá
   la cancha es `flex: none`: **la reserva de tres renglones de la ayuda existe
   sólo donde la cancha PUEDE ceder alto**, o sea en el marco, y sacarla ahí
   devuelve el defecto de que un mensaje al crecer le corra las fichas debajo
   del cursor. Bajar a 900 es una decisión de diseño con precio, no un ajuste.

   OJO CON MEDIR ESTO: la primera medición dio «entra a 900» y era falsa, porque
   se hizo forzando el marco con la ventana todavía por debajo de 1130 — o sea
   con las reglas compactadoras de esta misma media query aún activas. Para
   medir el marco hay que estar ARRIBA del umbral, no simularlo desde abajo.
   Ver «Dos mediciones que no coinciden».

   Y VA COLGADO DE `body:has(.plantel)` PORQUE ESTA HOJA NO ES SÓLO DE ESTA
   PANTALLA: `entrenamiento`, `inferiores`, `pretemporada`, `vestuario` y
   `reserva` también la cargan y heredan de acá su `body { height: … }`. Soltarle
   el alto a las seis desde una regla que se escribió mirando una sola es el
   mismo error que ya costó 650 y 1.570 píxeles inalcanzables en dos de ellas,
   sólo que al revés. */
@media (max-height: 989px), (max-height: 1210px) and (max-width: 1439px) {
  body:has(.plantel) { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  /* Los tres van juntos: `flex: 1 1 0`, `min-height: 0` y `minmax(0, 1fr)` sólo
     saben crecer si el padre tiene un alto definido, y acá se lo acabamos de
     sacar. Sin esto la rejilla se queda en nada y la página no rueda: se
     recorta. Es la misma línea que el quiebre de 900 de ancho de acá abajo, y
     por eso se copia entera en vez de inventarle una variante. */
  /* EL PADRE NO SE SUELTA, Y ESTUVO SUELTO UNAS HORAS POR UN ERROR MÍO DE
     LECTURA (21/9/2026).
     ----------------------------------------------------------------------
     Puse acá `.plantel { flex: 0 0 auto }` para que la pantalla creciera con
     su contenido y el documento pudiera llegar al final. Arreglaba lo que yo
     creía —que había contenido inalcanzable— y rompía lo que Alberto quería:
     «tengo que hacer scroll de toda la página». Y tiene razón: la promesa de
     esta pantalla es que ENTRA, y que lo que sobra rueda adentro de su lista.
     Bajar la página entera para leer la fila veintidós es perder la cabecera,
     el once y los filtros por el camino.

     `flex: 1 1 0` con `min-height: 0` es lo que hace que la lista se quede con
     el alto que sobra y su `.table-scroll` se haga cargo. Se queda como estaba.

     LO QUE SÍ SE QUEDA DE AQUEL DÍA es el `overflow: auto` del cuerpo, unas
     líneas más arriba: no para que la página se baje siempre, sino para que el
     día que algo no entre se pueda llegar igual en vez de quedar recortado. Es
     una red, no el camino. */
  /* LOS DOS PANELES CONSERVAN SU SCROLLER, y esto cambió el 21/9/2026.
     ----------------------------------------------------------------------
     Acá se los soltaba —`overflow: visible`, sin scroller— para que la página
     se bajara y no recortara nada. Tenía sentido cuando el cuerpo llevaba
     `overflow: hidden`: sin soltar, la rejilla se quedaba en nada y lo de
     abajo se perdía.

     Ese cuerpo ahora lleva `overflow: auto`, o sea que hay red. Y Alberto dijo
     qué prefiere cuando hay que elegir: «tengo que hacer scroll de toda la
     página», sobre esta misma pantalla. La promesa es que ENTRA y que lo que
     sobra rueda adentro de su lista — bajar la página entera para leer la fila
     veintidós es perder la cabecera, el once y los filtros por el camino.

     Con el scroller puesto, la lista rueda adentro y la página se queda
     quieta. Si algún día ni así entra, la red del cuerpo lo alcanza igual. */
  .plantel__lista .table-scroll { overflow: auto; }

  /* Y EL PANEL DEL ONCE TAMBIÉN RUEDA ADENTRO, que es lo que faltaba para que
     la pantalla entre de verdad. La cancha tiene proporción fija —105 × 68— y
     por debajo de cierto alto de ventana deja de poder ceder: medido a
     1100×660, el panel pedía 677 px dentro de un `main` de 564 y esos 113 se
     salían por abajo. Eran los 124 px que la página seguía bajando cuando
     Alberto dijo «tengo que hacer scroll de toda la página».

     Con su propio scroller, lo que no entra se recorre ahí —al lado de la
     cancha, sin perder de vista la lista— en vez de arrastrar la pantalla
     entera. `min-height: 0` es la otra mitad: sin él, un hijo de flex no baja
     de su contenido y el `overflow` no llega a usarse nunca. */
  .plantel__once { min-height: 0; overflow: auto; }


  /* QUEDA UN SOBRANTE Y LO DEJO MEDIDO EN VEZ DE SEGUIR PROBANDO.
     ----------------------------------------------------------------------
     Con los dos paneles rodando adentro, la pantalla entra a 1890, 1512 y
     1400. Por debajo la página todavía baja un poco: 24 px a 1280×760 y 124 a
     1100×660. La causa está medida —`main` mide 564 y su única fila de rejilla
     616,9, o sea que el RENGLÓN se sobra de su propia caja y los paneles no
     hacen más que llenarlo— y el arreglo obvio, `grid-template-rows: minmax(0,
     1fr)`, no lo saca y además rompe 900×700: ahí la última fila deja de
     alcanzarse.

     No lo dejo «arreglado» sin estarlo. Lo que sí está: la lista rueda adentro
     en todos los tamaños y se llega a la fila veintidós en todos, que es lo
     que se vino a arreglar. */
  /* La cancha vuelve a pedir su proporción, que es lo que la hace parecer una
     cancha. Puede: acá no compite por el alto con nadie. En la columna de 284
     son 439, veinte por encima del piso de 386.

     PERO CON TECHO, Y ES LO QUE SE AGREGA ACÁ. «Su proporción» significa que el
     alto sale del ANCHO, y la columna del once no siempre mide 284: a 1440×900
     mide 398 y la cancha se va a 614 px de alto. Alberto lo dijo mirándola:
     «queda muy larga». Y lo que sobra no es información —las once fichas se
     colocan en PORCENTAJES del alto, así que estirar la caja estira los huecos
     entre líneas y nada más—: es el mismo defecto que el bloque de
     `max-width: 900` ya tenía tapado con un techo de 420, en la otra rama.

     460 Y NO 420, y el número sale del ancho de columna de cada rama. El techo
     no puede ser el mismo porque la forma no lo es: acá la columna mide 398 y
     420 daría una cancha CUADRADA —1,05 de proporción—, que deja de leerse como
     una cancha; 460 da 1,15, que todavía es más alta que ancha. En la rama del
     teléfono la columna mide 289–342 y 420 sí queda vertical. Los dos están por
     encima del piso medido de 386, que es donde el arquero y el líbero del
     5-3-2 se tocan, y los dos lo tienen defendido igual por el `min-height` de
     la regla base, que en CSS le gana a cualquier `max-height`.

     Medido a 1440×900, con la carrera sembrada: la cancha pasa de 398×614 a
     398×459, y las diez formaciones dan cero superposiciones. A 1920×1080,
     426×459.

     Y EL CONTROL POSITIVO DE ESTA PANTALLA CAMBIÓ, que es lo que hay que saber
     antes de creerle a un barrido de acá en adelante: **romper el piso a mano
     ya no produce pisadas.** Era la forma de comprobar que la vara medía algo
     —forzando la cancha a 300 aparecían las cuatro PO/DFC—, y dejó de funcionar
     el 31/8 cuando la ficha pasó a medirse sola: con la cancha apretada la
     ficha se achica y nunca llega a tocar a la de al lado. O sea que el viejo
     control ahora da «cero pisadas» tanto si la vara mide como si no mide nada.

     El control que sí distingue es ensanchar la FICHA, que es lo único que la
     escala no puede compensar: con `.puesto { min-width: 120px }` aparecen
     pisadas en las diez formaciones (de 3 a 7 por sistema) y sin él, cero. */
  .cancha { flex: none; height: auto; aspect-ratio: 68 / 105; max-height: 460px; }

  /* Y LA TARJETA DEL ONCE DEJA DE ESTIRARSE, que es la otra mitad del arreglo y
     sin ella el techo empeora las cosas. Las dos columnas son celdas de una
     rejilla, así que la del once se estira hasta el alto de la del plantel —a
     1440×900, 1.143 px— aunque su contenido mida 850. Esos ~200 px sobrantes no
     se ven mientras la cancha los tapa creciendo; en cuanto la cancha tiene
     techo, quedan como una banda muerta al pie de la tarjeta.

     Con `align-self: start` la tarjeta termina donde termina lo que tiene
     adentro. Medido a 1440×900: de 1.143 a 764 px de alto, con el mismo
     contenido. La columna del plantel sigue midiendo lo que mide y la página
     rueda lo mismo —los 476 px de scroll los pone la LISTA, no el once—, así
     que esto no es un arreglo de scroll: es que la tarjeta deje de tener un
     agujero abajo. */
  .plantel__once { align-self: start; }

  /* Y POR ESO MISMO LA AYUDA DEJA DE RESERVAR TRES RENGLONES ACÁ. La reserva de
     la regla base existe por un motivo que en este marco NO se cumple: «que el
     mensaje al crecer no le achique la cancha y le corra las fichas debajo del
     cursor». Eso sólo puede pasar donde la cancha es `flex: 1 1 0` y cede alto
     a lo que crece al lado — o sea en la ventana alta, donde el panel no rueda.
     Acá la acabamos de poner en `flex: none` con el alto atado al ancho: lo
     único que se mueve cuando el mensaje crece son los botones de abajo, que es
     lo que hace cualquier bloque que aparece.

     Son 42px con el mensaje corto —«Puesto DFI: elegí a quién lo ocupa» ocupa
     un renglón de 21 en una caja de 63— y se ven como un agujero entre la lista
     de consignas y el control. Es el mismo argumento, palabra por palabra, con
     el que el bloque de `max-width: 900` le saca la reserva a `.consigna` — que
     acá abajo se le saca también, por lo mismo y con los mismos 80px.

     Y VA COLGADA DE `.plantel`, como el `body` de acá arriba y por el mismo
     motivo: `.cancha__ayuda` no es de esta pantalla. La usan también el aviso
     del mercado y la línea del entrenamiento, y las dos cargan esta hoja — un
     selector pelado acá les sacaría a ellas una reserva que nadie midió. */
  .plantel .cancha__ayuda { min-height: 0; }
  /* Y la banda de la consigna, lo mismo: acá la cancha ya no cede alto, así que
     los 80px reservados eran un agujero adentro de la lista hasta que tocabas
     un puesto. La reserva sobrevive únicamente en la ventana alta. */
  .plantel__once .consigna { min-height: 0; }
}

/* --------------------------------------------------------------------------
   EL ESCRITORIO ANCHO: EL PANEL SE PARTE EN DOS Y LA CANCHA DEJA DE SER CUADRADA
   --------------------------------------------------------------------------
   EL DEFECTO, MEDIDO. A 1990×985 con la carrera sembrada, el panel del once
   terminaba 261 px antes del pie de la página y la cancha estaba clavada en su
   techo: 460 × 460, o sea **cuadrada**, que es exactamente lo que el techo de
   460 de acá arriba existía para evitar —«420 daría una cancha CUADRADA, 460 da
   1,15»—. El número era correcto para una columna de 398; en una de 460 deja de
   serlo, porque el techo es fijo y el ancho no.

   Los dos defectos son el MISMO, y por eso se arreglan juntos: todo lo del
   panel competía por una sola columna angosta, así que el ancho que a la tabla
   le sobra no se podía gastar en nada y el alto que sobraba tampoco —la cancha
   no podía crecer a lo alto sin quedar larga, ni a lo ancho sin pasarse del
   techo—.

   LO QUE SE HACE. El panel se lleva el ancho que la tabla no usa y adentro se
   parte en dos: la cancha a la izquierda con el alto entero, y a la derecha lo
   que se LEE —las once consignas, el planteamiento y la línea de ayuda—. La
   cancha vuelve a sacar su alto de su ancho, que es lo que la hace parecer una
   cancha, y ahora el ancho alcanza para que ese alto llene el panel.

   DESDE 1850 Y NO ANTES, Y EL NÚMERO LO PONE LA TABLA. Las quince columnas del
   plantel piden unos 1.330 px de maqueta, así que el panel sólo puede crecer
   con lo que sobre de eso. Medido contra `9c42c9de` en su propio worktree y su
   propio puerto, con la carrera sembrada y en píxeles de maqueta:

       ventana      cancha antes   cancha ahora   hueco al pie   la tabla rueda
       1850×985        427×460        478×738       261 →   2       0 →  35
       1920×1080       427×726        508×785         2 →   2       0 →   0
       1990×985        427×460        539×832       261 →   2       0 →   0
       2560×1440          —           605×934         —  →   2       0 →   0

   O sea que el hueco desaparece, la cancha pasa de cuadrada a cancha y la
   tabla paga treinta y cinco píxeles en una sola franja —de 1850 a 1900— donde
   antes no pagaba nada. Se acepta: una columna que queda fuera de la caja se
   alcanza desplazando y es el mismo precio que esta pantalla ya eligió pagar a
   1440, donde rueda 109 sin que nadie lo tocara. Por debajo de 1850 no se paga
   nada, porque ahí la regla no llega.

   1920×1080 es la fila que explica por qué el defecto no se veía: en una
   ventana ALTA la cancha ya sacaba 726 de alto y no quedaba hueco. El techo de
   460 y la banda muerta son de la ventana de 985, que es la de Alberto.

   La maqueta es la ventana dividida por el zoom del sitio (0,88), que es en
   píxeles de maquetación donde viven estos anchos — mezclar los dos es la
   trampa que ya está escrita en la cabecera de `herramientas/medir-panel-once.html`.
   -------------------------------------------------------------------------- */

@media (min-width: 1850px) {
  .plantel { grid-template-columns: minmax(0, 1fr) clamp(700px, 38%, 940px); }

  /* Y LA TARJETA VUELVE A ESTIRARSE. El `align-self: start` de la ventana baja
     existe para que un techo fijo no deje una banda muerta al pie; acá no hay
     techo fijo —la cancha toma el alto que haya— así que estirarse es lo que
     hace que ese alto exista. Sin esto, la tarjeta vuelve a medir lo que mide
     su contenido y la cancha no tiene de dónde crecer. */
  .plantel__once { align-self: stretch; }

  .once__tablero {
    display: grid;
    /* La columna de la derecha es la de LEER, así que se mide por lo que tiene
       que entrar: las dos columnas de consignas (8,5em cada una) y el renglón
       de un mando sin partir. Por eso es un `clamp` y no una fracción: crecer
       con el panel la volvería una columna de texto ancha y corta, y lo que
       tiene que crecer es el dibujo. */
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 340px);
    /* La fila se lleva todo el alto del tablero, que es de donde la cancha saca
       su techo. Sin `minmax(0, 1fr)` la fila mide lo que mide el contenido y el
       `max-height: 100%` de la cancha no tiene contra qué resolverse. */
    grid-template-rows: minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }

  /* LA CANCHA SACA EL ALTO DEL ANCHO, CON EL PANEL COMO TECHO. `aspect-ratio`
     con el ancho definido por la rejilla da la proporción de una cancha; el
     `max-height: 100%` la frena en el alto que el panel tenga, que es lo que
     impide que vuelva a quedar «muy larga» en una ventana alta.

     Cuál de los dos manda depende de la ventana, y eso es lo correcto: a
     1990×985 manda el alto (604 × 745, proporción 1,23) y en una ventana alta
     manda el ancho. Los dos casos dan una caja más alta que ancha, que es lo
     único que esta regla promete. */
  .cancha {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 68 / 105;
    max-height: 100%;
  }

  /* Y LAS ONCE CONSIGNAS, EN UNA SOLA COLUMNA. Las dos o tres de `auto-fill`
     salieron de un panel donde el alto era el recurso escaso y el ancho
     sobraba; acá es al revés — la columna mide 288 de maqueta y el alto que
     queda debajo de los mandos no lo usa nadie—. Once renglones en una columna
     se barren de arriba abajo de un golpe, que es como se lee una lista de
     puestos; en dos hay que leer en zigzag.

     Y no es sólo estética: `pintarConsignasOnce()` le PREGUNTA al navegador
     cuántas columnas hay para decidir dónde corta la banda de la consigna, así
     que este cambio lo sigue solo y no hay ningún número que recalcular. */
  .consignas-once { grid-template-columns: minmax(0, 1fr); }

  /* Y con la columna de leer vuelve el mando entero —el valor, el dibujo y la
     frase—, que es lo que esa columna vino a hacer: acá el alto que ocupan no
     se lo sacan a nadie. Es el mismo control que dibuja el viernes. */
  .planteo .mando__valor { display: block; }
  .planteo .mando__dibujo { display: block; }
  .planteo .mando__frase { display: block; }
  .planteo__mandos { gap: var(--sp-5); }
  .planteo .mando { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .planteo .mando__head { display: flex; }

  /* Los tres mandos vuelven a una columna: la de la derecha mide 260–340 y tres
     en fila dejarían «Muy defensiva» en 100px. Apilados es como los lee la
     previa, y acá el alto es justo lo que sobra. */
  .planteo__mandos { grid-template-columns: minmax(0, 1fr); }

  /* Y lo que quede después de las consignas, los mandos y la ayuda se va al
     pie de la columna en vez de repartirse entre los bloques: tres cajas
     separadas por huecos distintos se leen como tres bloques sin relación. */
  .once__lado { justify-content: flex-start; }
}


@media (max-width: 900px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .plantel { grid-template-columns: 1fr; }
  .plantel__lista, .plantel__once { overflow: visible; min-height: auto; }
  .plantel__lista .table-scroll { flex: 0 0 auto; max-height: none; }
  /* El once va primero: en una pantalla angosta es lo que se vino a mirar. */
  .plantel__once { order: -1; }

  /* LOS DIEZ SISTEMAS, EN UNA FILA QUE SE DESLIZA. En el teléfono cada chip
     mide 44 por el mínimo táctil, así que doblarse en dos filas cuesta 94px de
     panel — más que las once consignas juntas, que son el contenido. Deslizando
     son 50, y ninguno de los diez se pierde: el que está elegido se centra solo
     (ver `pintarSistemas()`) y los vecinos asoman cortados por el borde, que es
     la única señal que hace falta para que se entienda que hay más.

     Y NO SE HACE EN EL ESCRITORIO, donde el mismo control mide 55 en dos filas:
     ahí no hay dedo que deslice y la rueda del ratón no mueve una fila
     horizontal. Doce píxeles no valen esconderle ocho sistemas a un ratón.

     SE CUELGA DE `[data-f='sistemas']` Y NO DE `.segmented`, que es el selector
     que uno escribe primero: adentro de este mismo panel hay OTRO segmentado
     —el de la consigna del puesto— y `nowrap` sobre él le sacaría el doblado
     que necesita para sus tres botones en 323px. */
  /* AQUÍ VIVÍA EL DESLIZAMIENTO DE LOS SISTEMAS, y se fue con los chips. La
     fila se doblaba en dos renglones y en el teléfono se deslizaba con
     `scroll-snap`, centrando el elegido a mano desde `pintarSistemas()`. Un
     `<select>` no tiene fila que deslizar ni renglón que doblar: mide lo mismo
     en las dos ventanas y en las dos familias de navegador. Lo que aquella
     regla ahorraba —doce píxeles de alto en el teléfono— ahora es lo que se
     ahorra siempre, y crece con cada sistema nuevo en vez de encogerse. */

  /* LA BARRA DE ACCIONES YA NO SE DESPEGA ACÁ PORQUE YA NO SE PEGA EN NINGÚN
     LADO. Vivía acá un `position: static` que deshacía el `sticky` del bloque
     de `max-height`, y ese bloque ya no existe: el panel no se desplaza en
     ninguna ventana, así que no hay nada de lo que los botones puedan irse.
     Lo que queda escrito es lo que aquella regla midió y sigue valiendo como
     motivo para no volver a pegarla: a 375×812 con el once cargado, la barra
     flotando tapaba 77 px de cancha, y con los controles a 44 pasó a tapar 163
     —la línea de fondo y el arquero, que es la parte del campo a la que se
     arrastra un defensor—.

     Y EL `min-height: 320px` DE LA CANCHA TAMBIÉN SE VA: era más bajo que el
     piso de 386 que ahora trae la regla base, así que acá sólo podía bajarlo
     por debajo de donde las fichas se pisan. En una sola columna la cancha
     tiene ancho de sobra y su proporción le da mucho más que 386. */
  /* Y ESE «MUCHO MÁS» ES EL DEFECTO, QUE ES LO QUE AGREGA EL TECHO DE 420. La
     proporción de una cancha de verdad es 68 por 105, o sea que el alto sale
     del ANCHO: en una sola columna, cuanto más ancha es la ventana más alta se
     pone la cancha sin mostrar nada más. Medido sobre `plantel.html` sembrado,
     en píxeles CSS —`getBoundingClientRect` viene en pintados y hay que dividir
     por el zoom, `--escala-sitio`, que el día de esta medición valía 1,08—:

       ventana CSS   cancha       panel «El once»
        361 × 781    303 × 468     892
        400 × 833    342 × 528     952
        600 × 833    459 × 710    1090   ← acá muerde el `max-width: 460`
        833 × 833    459 × 710    1051

     Ochocientos noventa y dos píxeles de panel en una ventana de 781: el once
     no entra en la pantalla y hay que rodar para verlo entero. Y lo que sobra
     no es información, es pasto — las once fichas se colocan en PORCENTAJES del
     alto, así que estirar la caja estira los huecos entre líneas y nada más.

     EL TECHO SON 420 Y SALE DEL PISO, no del gusto: el piso medido son 386 —el
     alto al que el arquero y el líbero del 5-3-2 se tocan, ver la regla base— y
     420 es eso más 34, un canalón de aire por encima del punto de contacto. Por
     debajo de 386 las fichas se pisan; por encima de 420 sólo se estira el
     verde. De paso queda cerca de los 438 que mide la cancha en el escritorio,
     que es la forma que esta pantalla ya tenía aprobada.

     VA COMO `max-height` Y NO COMO `height` PARA NO ROMPER LA PROPORCIÓN DONDE
     TODAVÍA SIRVE: en un teléfono angosto —columna de menos de 272— la
     proporción pide menos de 420 y sigue mandando ella, que es lo que hace que
     la cancha parezca una cancha. El techo sólo aparece cuando la ventana se
     ensancha, que es exactamente donde el problema aparecía.

     Y NO DISTORSIONA EL DIBUJO, comprobado antes de escribirlo: el círculo
     central es un `radial-gradient(circle …)` con el radio en PÍXELES y la
     línea del medio está al 50 %, así que achatar la caja no lo convierte en
     una elipse. Lo único que cambia de forma es el rectángulo.

     EL PISO SIGUE DEFENDIDO Y NO POR ESTE TECHO: `min-height` le gana a
     `max-height` en CSS, así que el `min-height: 386px` de la regla base es
     inalcanzable desde acá. Medido a propósito, forzando `max-height: 300px`:
     la cancha se queda en 386. O sea que bajar este número por error no puede
     hacer que las fichas se pisen — lo peor que puede pasar es que no baje
     nada.

     BARRIDO DE LAS DIEZ FORMACIONES, con el once lleno, en las dos ventanas que
     este bloque gobierna: a 900×800 (cancha 459×419) y a 375×812 (289×419),
     cero superposiciones nuevas. Con control positivo, porque «no encontré» y
     «no busqué» se escriben igual: rompiendo el piso a mano —`min-height` y
     `max-height` a 300— aparecen las cuatro que tienen que aparecer, PO/DFC en
     el 3-5-2, el 5-3-2, el 3-4-3 y el 5-4-1.

     LO QUE SÍ ENCONTRÓ EL BARRIDO, Y NO ES DE ACÁ: en el 3-5-2, a 375×812, un
     MC y el MCD se pisan **ya sin este techo** — 5,9 px de ancho por 9,2 de
     alto sobre la cancha commiteada de 289×446. Son de LÍNEAS DISTINTAS, y por
     eso el ancho de ficha no los protege: `--sep` es la distancia mínima entre
     dos fichas de la MISMA línea (ver `.puesto`), así que a un par cruzado no
     lo mira nadie. El techo no lo crea pero lo profundiza, de 9,2 a 11,5 de
     alto. Queda anotado acá porque el arreglo es del ancho de la ficha y está
     en curso en otra tanda; cuando entre, este párrafo se vuelve a medir. */
  .cancha {
    flex: none;
    height: auto;
    aspect-ratio: 68 / 105;
    max-width: 460px;
    max-height: 420px;
  }

  /* LA CONSIGNA DEJA DE RESERVAR SU ALTO ACÁ: son 80 px que en el teléfono se
     ven vacíos siempre, hasta que se toca un puesto. La reserva existe por un
     motivo que en esta rama NO se cumple —«impide que elegir un puesto le
     cambie el tamaño a la cancha y le corra las fichas debajo del dedo»—: eso
     pasa en el marco de alto fijo, donde la cancha es `flex: 1 1 0` y todo lo
     que crece al lado se lo saca de encima. Acá arriba la cancha es `flex:
     none` con su alto atado al ancho, así que la consigna puede crecer todo lo
     que quiera y no le mueve una ficha a nadie: lo único que corre son los
     botones de abajo, que es lo que hace cualquier bloque que aparece.

     O sea que acá la reserva era el precio sin la compra, igual que la barra de
     acciones pegada que este mismo bloque despegó. */
  .plantel__once .consigna { min-height: 0; }

  /* Y LO MISMO LA LÍNEA DE AYUDA, por el mismo motivo y con el mismo párrafo:
     la cancha de acá arriba es `flex: none` con su alto atado al ancho, así que
     nada de lo que crezca debajo puede correrle una ficha. Se escribe también
     acá y no sólo en el bloque de `max-height: 1050` porque una ventana angosta
     puede ser ALTA —un teléfono de pie no llega a 1050 de ancho pero sí puede
     pasarlos de alto— y ahí aquel bloque no aplica. Acotada a `.plantel` por lo
     mismo que la otra: el mercado y el entrenamiento comparten la clase. */
  .plantel .cancha__ayuda { min-height: 0; }
}

/* El número de camiseta, editable en su celda. Se dibuja como el número que
   ya era —misma tipografía, mismo ancho, sin caja— y sólo al pasar por encima
   o al enfocarlo aparece el borde: una tabla de veintiocho renglones con
   veintiocho cajas de formulario es un formulario, no un plantel. */
.dorsal-edit {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
}
.dorsal-edit::-webkit-outer-spin-button,
.dorsal-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) {
  .dorsal-edit:hover { border-color: var(--line); }
}
.dorsal-edit:focus { border-color: var(--accent); outline: none; background: var(--ink-950); }

/* --------------------------------------------------------------------------
   LA COLUMNA DEL MERCADO
   --------------------------------------------------------------------------
   El botón que MUESTRA el estado es el mismo que lo cambia. En una lista, «a
   quién estoy ofreciendo» es de lo que más se mira, así que la columna lo dice
   sin abrir nada — y no hay un segundo control para cambiarlo.

   Los dos estados no pesan igual a propósito: «En venta» es una decisión tomada
   y se ve, «Ofrecerlo» es una puerta y espera. Con los dos al mismo tono, una
   tabla de treinta y cinco parecía tener treinta y cinco marcados.
   -------------------------------------------------------------------------- */

.u-venta { white-space: nowrap; }

/* LA CELDA DE CONTRATO LLEVA DOS COSAS: el plazo y el chip de firmar. Va a la
   derecha como las demás columnas de número, y entera en un renglón — partida
   en dos, «Se le acaba» quedaría arriba y «RENOVAR» abajo, y la fila crecería
   de alto en las seis filas que más se miran. */
.u-contrato { text-align: right; white-space: nowrap; }
.contrato-plazo { margin-right: var(--sp-2); }

.venta-chip {
  padding: 1px var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* 2,11:1 en `--text-disabled`, y es la única forma de poner a alguien en el
     mercado desde la tabla: un botón no se apaga por debajo del piso. */
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .venta-chip:hover { color: var(--text-secondary); background: var(--bg-hover); }
}

/* El marcado. Ámbar y no violeta: el violeta es lo que ELEGISTE en la
   interfaz —dónde estás, qué está activo— y esto no es un estado de la
   pantalla sino del futbolista. El ámbar ya es la advertencia del sistema, y
   tener a alguien ofrecido es exactamente eso. */
.venta-chip[data-si] {
  background: var(--tint-warn);
  border-color: var(--warn);
  color: var(--warn);
}

@media (hover: hover) {
  .venta-chip[data-si]:hover { color: var(--text-primary); }
}

/* --------------------------------------------------------------------------
   LA ZONA SENSIBLE DE LA FICHA
   --------------------------------------------------------------------------
   La ficha del once mide 32–41 px de alto en un teléfono y el mínimo táctil son
   44. Agrandarla NO es el arreglo —cuando `app.css` le puso un mínimo duro, las
   del 3-5-2 se pisaron seis píxeles— porque once fichas tienen que entrar en una
   cancha de 288×445 con dos de ellas en la misma vertical. Lo que crece es la
   ZONA, como en `.news__dot`, y cuánto puede crecer cada una lo calcula
   `zonaTactil()` en `plantel.js` mirando el aire que tiene cada ficha: ahí está
   la tabla del aire medido y por qué un número fijo no sirve acá.

   `--zona` llega en píxeles de maquetación y en 0 cuando no hay sitio. El
   `inset` sólo toca el eje vertical: de ancho la ficha ya pasa los 44 —la más
   angosta del teléfono son 51— y ensancharla es lo único que la haría pisar a
   su vecina de al lado, que es el eje donde el aire escasea de verdad.

   ESTA REGLA ES LA ÚNICA PUERTA: el guion escribe la variable siempre y no
   pregunta por el puntero, así que la decisión de si la zona existe vive acá y
   en un solo sitio. La pareja `pointer: coarse` + `max-width` es la de
   `app.css`, por lo mismo que el resto del mínimo táctil. */
@media (pointer: coarse) and (max-width: 860px) {
  /* VA EN `::before` Y NO EN `::after`, Y ESO NO ES GUSTO: `.puesto[data-cons]`
     ya usa el `::after` para el punto de la consigna elegida, y un elemento
     tiene UNO de cada uno. Escrito en `::after`, la regla del punto —más
     específica— se lo quedaba entero, así que las fichas con consigna propia se
     quedaban sin zona y las otras la tenían. En la formación de arranque eran
     cinco de once, y salía como «geometría apretada» en vez de como lo que era.
     Lo delató el renglón del arnés que compara contra lo ALCANZABLE: el del
     mínimo táctil decía 42 y sonaba razonable. */
  /* LAS ONCE CONSIGNAS DEL ONCE, que son las que más caro salen de errar de
     toda la pantalla: cada renglón le cambia la consigna a un puesto, y el
     vecino se la cambia a otro. Medían **20 px de alto** —once controles, todos
     iguales— y no tenían zona de ningún tipo: `elementFromPoint` en el centro
     devuelve el propio botón, así que lo que mide la caja es lo que recibe el
     dedo.

     No estaban en el barrido táctil del 28/8/2026 porque todavía no existían:
     las consignas por puesto entraron el 31/8. Es la misma forma de escaparse
     que las tres superficies flotantes que anota `app.css` —un control que no
     estaba cuando se midió— y por eso el número que hay que mirar no es el del
     barrido de aquel día sino el de hoy.

     Acá SÍ se estira la caja y no una zona, al revés que la ficha de al lado:
     la ficha vive en una cancha donde once cajas se pisan si crecen, y esta
     lista es una rejilla con sitio de sobra por abajo — la pantalla del
     teléfono ya rueda. */
  .cons-fila { min-height: 44px; align-items: center; }

  .puesto::before {
    content: '';
    position: absolute;
    /* El eje horizontal se estira UN PÍXEL y no más: es el borde de la propia
       ficha, que si no queda fuera de la zona por lo mismo que el vertical —el
       bloque contenedor de un hijo posicionado es la caja de relleno—. Ensanchar
       de verdad no se hace: el costado es el eje donde dos vecinas se pisan.

       ACÁ DECÍA «de ancho la ficha ya pasa los 44» Y DEJÓ DE SER CIERTO EL
       7/9/2026, así que queda corregido en vez de borrado. Con cinco defensores
       la ficha mide 40,1 a 375 px — antes medía 44,4 y SE PISABA con su vecina
       en cuatro pares. El cambio es a favor del dedo aunque el número baje: dos
       fichas superpuestas no son dos objetivos de 44, son un objetivo que le
       roba el toque al otro, y `elementFromPoint` se lo lleva entero. Cuarenta
       píxeles limpios valen más que cuarenta y cuatro pisados. La zona vertical
       —lo que este bloque construye— sigue midiendo 44 y 45. */
    inset: calc(var(--zona, 0px) * -1) -1px;
  }
}


/* --------------------------------------------------------------------------
   LA CANCHA MÁS ANGOSTA QUE HAY: TRES CENTRALES EN 260 PX
   --------------------------------------------------------------------------
   `plantel.js` achica las once fichas hasta que dos vecinas dejen de tocarse,
   pero no baja de `PISO_ESC = 0,62` —letra de 8 px— porque debajo de eso no se
   lee, y ahí prefiere que dos se toquen a que las once sean ilegibles. Eso está
   bien elegido y no se toca. Lo que este bloque hace es correr el punto donde
   esa elección hace falta.

   MEDIDO A 320, en el 5-3-2: la cancha mide 260 px, los tres centrales quedan a
   41,7 px de centro a centro y la ficha mide 43,7 de ancho — **dos píxeles de
   superposición en cada junta**, ocho pares en las tres formaciones de cinco
   defensores (5-3-2, 5-4-1 y 5-2-3). La escala ya estaba clavada en el piso, o
   sea que no había nada más que encoger por ese lado.

   De esos 43,7, el contenido son 39,2 y el resto es aire: 2,4 de relleno de la
   ficha y 2 de borde. Y de los 39,2, la pastilla del puesto —«DFC», tres
   letras— se lleva 5 px sólo en su propio relleno. A 8 px de letra ese aire ya
   no ordena nada: lo que ordena es el color de la pastilla, que no se toca.

   Así que abajo de 400 se le saca aire a la caja y NO a la letra. El apellido,
   el nivel y la pastilla siguen midiendo lo mismo; la ficha adelgaza lo que
   sobra. Lo verifica `barrido-cancha.html`, que mide las diez formaciones y
   exige cuatro cosas a la vez —ningún hijo fuera de su ficha, ningún par que se
   cruce, ningún apellido recortado y ninguna letra bajo 8 px—: las cuatro
   tienen que seguir en cero, porque adelgazar de más recorta apellidos y eso
   sería cambiar un rojo por otro.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  /* ACÁ VIVÍA `.puesto { padding-inline: 0.02em }` y la pastilla del puesto
     adelgazada, y se fueron el 28/9/2026 con la ficha blanca: el apellido
     quedaba pegado al canto en todos los teléfonos, con la escala en 1 y aire
     de sobra. El relleno de costado ahora se achica solo con `--esc` (ver
     `.puesto`), así que adelgaza cuando la cancha aprieta y no antes; y la
     sigla ya no es pastilla. `barrido-cancha.html` a 320, 360, 375 y 390 lo
     volvió a medir en cero. */

  /* Y LA TARJETA LE DEVUELVE SU RELLENO A LA CANCHA, que es la otra mitad y la
     que da el margen. Sólo con adelgazar la ficha el canalón quedaba en 1,8 px:
     sin superposición, pero apoyado en los apellidos de ESTE club — y el ancho
     de una ficha lo decide qué apellido le tocó, que es un dato del plantel y no
     de la táctica. Con los ocho píxeles de cada lado de la tarjeta la cancha
     pasa de 260 a 276 y el canalón a ~4,4, que ya aguanta un nombre más largo
     sin volver a tocarse.

     Va sobre `.plantel__once` y no sobre `.tarjeta`: esa clase la usan todas
     las pantallas del juego y acá el que necesita el ancho es el dibujo, no la
     tarjeta. */
  .plantel__once { padding-inline: var(--sp-4); }
}

/* ===================================================================
   LA TABLA ENTRA A LO ANCHO: SE PLIEGAN COLUMNAS, NO SE RUEDA DE COSTADO
   --------------------------------------------------------------------------
   «El scroll horizontal es horrendo, saquemos eso» —Alberto, 21/9/2026—.
   Tenía razón y el número lo confirma: la tabla pide 1.102 px y la caja le da
   1.061 a 1400 de ventana, 1.012 a 1280 y 861 a 1100. O sea que desde 1400
   hacia abajo hay barra horizontal, y una barra horizontal en una tabla de
   quince columnas es la peor forma de esconder datos — se ruedan las columnas
   de la derecha, que son justo Contrato y Mercado.

   TRES ESCALONES, Y EL ORDEN ES POR LO QUE APORTA CADA COLUMNA:

     1. Nac. (52 px). Es una bandera. Dice de dónde es y no cambia ninguna
        decisión de la semana; además está en la ficha del jugador.
     2. PJ y Goles (98 px juntos). Son la temporada, no el sábado: para armar
        el equipo pesan menos que el estado y la carga, y viven completos en la
        ficha y en Líderes.
     3. Ánimo y Carga (131 px). Éstas duelen, y por eso van últimas: son dos de
        las tres barras que dicen cómo llega el futbolista. Se van sólo cuando
        no queda otra — y queda Estado, que es la que más pesa de las tres.

   LO QUE NUNCA SE PLIEGA: el once, el nombre, la posición, el nivel, el
   estado, el valor, el contrato y el mercado. Son las ocho con las que se
   arma un equipo y se administra un plantel.

   LOS CORTES SALEN DE LA MEDICIÓN Y NO DE LA SERIE DE SIEMPRE. La tabla pide
   1.102 y la caja es la ventana menos ~340 px de la cancha y los rellenos:
   1400 deja 1.061 —falta 41, alcanza con el escalón 1—; 1280 deja 1.012
   —faltan 90, hacen falta los dos primeros—; 1100 deja 861 —faltan 241, los
   tres—. Los `@media` van redondeados hacia arriba, que es donde el error se
   paga barato: una columna menos unos píxeles antes de hacer falta.

   Y SE PLIEGA POR CLASE, no por `nth-child`: una columna nueva en el medio
   corre los índices y la que se esconde pasa a ser otra, sin error y sin
   aviso. Ya me pasó tres veces en este proyecto.
   ========================================================================== */
/* --------------------------------------------------------------------------
   LA ESCALERA DE ARRIBA SE FUE, Y LA REEMPLAZAN LAS VISTAS (22/9/2026)
   --------------------------------------------------------------------------
   Eran tres `@media` que escondían `col-cede-1`, `-2` y `-3` a 1440, 1320 y
   1160. El razonamiento de arriba SIGUE SIENDO CORRECTO y por eso se deja
   escrito: los cortes estaban medidos, el plegado iba por clase y no por
   `nth-child`, y todo eso se conserva acá abajo con otro nombre.

   LO QUE CAMBIÓ ES QUIÉN DECIDE. La escalera elegía por el ANCHO: a 1160 no
   veías el ánimo ni la carga, jugaras como jugaras. Las vistas lo eligen por
   el JUGADOR, que es lo segundo del deep dive de FM27 —«maximizar la
   información vertical y minimizar el desplazamiento horizontal»— y además
   arregla lo que la escalera no llegaba a tocar: por debajo de 1160 ya no
   quedaba nada que ceder y la tabla se rodaba de costado igual. Medido con la
   partida de muestra, el desborde de esta tabla por ancho de ventana:

     375    430    768   1024   1280   1440
     550px  488px  104px 158px   69px   86px

   Seis anchos, seis desbordes. La escalera cubría tres y los peores quedaban
   afuera.

   NO SE PUEDEN DEJAR LAS DOS, y no es por limpieza: se pelean. A 1024 la
   escalera escondía ánimo y carga, así que el jugador que elige «Cómo están»
   —la vista que existe justamente para verlos— no los vería, y no habría nada
   en pantalla que explicara por qué.

   Las diez columnas que la escalera repartía en tres escalones se reparten hoy
   en tres grupos, y las seis que nunca cedían son las anclas. Es el mismo
   reparto mirado desde el otro lado.
   -------------------------------------------------------------------------- */

/* LAS SEIS ANCLAS NO LLEVAN CLASE. Se identifican por no tener ninguna, que es
   lo que hace que agregar una columna nueva sin pensar la deje visible siempre
   —el lado seguro del error—. */
.plantel-tabla[data-vista='estado']   :is(.col-g-historia, .col-g-plata),
.plantel-tabla[data-vista='historia'] :is(.col-g-estado, .col-g-plata),
.plantel-tabla[data-vista='plata']    :is(.col-g-estado, .col-g-historia) { display: none; }

/* LA TIRA DE VISTAS NO TIENE ESTILO PROPIO, y ésa es la decisión.

   Nació con uno —pastillas sueltas, copiadas de los filtros de la bandeja— y
   duró unas horas: quedaba pegada debajo de la fila de líneas del plantel, con
   la misma forma, y las dos filtran cosas distintas. Treinta líneas de CSS que
   además DUPLICABAN un componente que `app.css` ya tenía.

   Ahora usa `.segmented` a secas, que es la forma agrupada del sistema —caja
   única, fondo hundido, el elegido con relleno de acento y su tilde—, mientras
   la fila de líneas se queda con `.segmented--filtros`, que es la suelta. La
   diferencia entre las dos tiras pasa a ser una diferencia que el sistema ya
   hacía en otras pantallas, y acá no se inventa nada.

   Lo único que queda es el aire de abajo, que es de esta pantalla y no del
   componente. */
.segmented--vistas {
  margin-bottom: var(--sp-4);
  /* `.segmented` es `inline-flex`, que hugea su contenido en cualquier flujo
     normal — pero el panel del plantel es una retícula y una retícula ESTIRA a
     sus hijos aunque sean `inline-*`. Sin esto, la caja agrupada salía de punta
     a punta del panel con las cuatro pastillas apretadas a la izquierda y 900
     px de fondo hundido vacío a la derecha: exactamente el dibujo que esta
     forma existe para no hacer. Se vio en la primera foto. */
  width: fit-content;
}
/* --------------------------------------------------------------------------
   EL NIVEL DE HOY, PEGADO AL DE LA FICHA
   --------------------------------------------------------------------------
   Lo que `chipDeLlegada()` escribe: cuántos puntos de los del 1 al 99 le
   sobran o le faltan HOY a un futbolista respecto de lo que dice su ficha.

   VA AL LADO Y NO EN UNA COLUMNA NUEVA, y no es pereza. Esta tabla ya lleva
   dieciséis columnas y la maqueta de este proyecto tiene medido lo que pasa
   cuando se le agrega una: en la ventana chica desborda, y el barrido de
   grillas lo caza. Metido en la celda que ya existe, la tabla mide lo mismo.

   SIN `position: absolute` NI NADA QUE SE SALGA DE LA CELDA: la fila del
   plantel se ordena y se repinta entera en cada clic de columna, y un hijo
   posicionado contra la celda es la clase de cosa que sobrevive al repintado
   en el sitio equivocado. Es un `<span>` en línea, y punto.

   El tamaño es el de una cifra secundaria —no compite con el nivel, que es el
   dato— y los colores son los tokens semánticos de `tokens.css`: `--good`,
   `--warn` y `--danger`, más `--text-muted` para el neutro. Se escriben así y
   no como `--bad` porque **ese token no existe**: la primera versión de esta
   hoja lo usó, la familia de `--tint-*` sí tiene un `bad` y el estado no, y un
   token fantasma no rompe nada — deja el color en el heredado y se ve casi
   bien. Es la trampa que este proyecto ya tiene anotada. */
.llega {
  display: inline-block;
  margin-inline-start: 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: 0.15em;
  color: var(--text-muted);
}

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

/* En la ventana chica la celda del nivel es de las más apretadas, así que el
   chip se achica con ella en vez de empujar la columna. */
@media (max-width: 560px) {
  .llega { font-size: 0.66em; margin-inline-start: 0.22em; }
}

/* --------------------------------------------------------------------------
   PLEGAR EL PLANTEO (28/9/2026)
   --------------------------------------------------------------------------
   Plegado, las consignas y el planteamiento se van y la cancha —que es la
   elástica del tablero— se lleva ese alto. El botón queda siempre a la vista,
   debajo de la cancha o arriba de la columna de leer, según el ancho. */
/* SE DESPLIEGA, NO APARECE. La caja es una grilla de una fila que va de `0fr` a
   `1fr`: es la forma de animar un alto que nadie conoce de antemano —el de
   once consignas y tres mandos— sin medirlo con un guion. Cerrada no ocupa
   nada y queda `visibility: hidden`, que la saca del tabulador y del lector
   de pantalla recién cuando termina de cerrarse. */
.once__planteo {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  min-height: 0;
}
.once__planteo-dentro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
  overflow: hidden;
}
.plantel__once[data-planteo='oculto'] .once__planteo {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
}

.once__plegar {
  display: inline-flex;
  align-items: center;
  /* Centrado bajo la cancha, que es el eje de la tarjeta (pedido el 28/9). */
  align-self: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  /* EN EL COLOR DE ACENTO, pedido así: en gris se leía como un rótulo más y
     nadie iba a descubrir que abajo hay once consignas y tres mandos. */
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .once__plegar:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
}
.once__plegar:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.plantel__once[data-planteo='visible'] .once__plegar .i { transform: rotate(180deg); }

/* En el escritorio muy ancho la columna de leer va al costado de la cancha;
   plegada, esa columna se queda con el botón y la ayuda, así que deja de
   reservar sus 260–340 y pasa abajo: la cancha se lleva el ancho entero. */
@media (min-width: 1850px) {
  .plantel__once[data-planteo='oculto'] .once__tablero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  /* Con el ancho entero la cancha se medía por el ancho y el techo la
     achataba: 780x857 a 1920x1080. Acá manda el ALTO de la fila y el ancho sale
     de la proporción, centrada. */
  .plantel__once[data-planteo='oculto'] .cancha {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 68 / 105;
    justify-self: center;
  }
}

/* Y LA CANCHA SE LLEVA ESE ALTO DE VERDAD. En las ventanas de hasta 989 de alto
   la cancha tiene un techo fijo —460, y 420 en el teléfono— que no mira cuánto
   sitio hay: plegar acortaba la tarjeta y el dibujo quedaba igual (medido a
   1440x900: 427x460 abierto y plegado). Plegada, el techo pasa a ser lo que
   deja la ventana: el alto de la vista menos lo que ocupa el resto de la
   tarjeta (cabecera, sistema, botón, ayuda y acciones, unos 370). El alto sale
   de `--alto-ventana`, que ya descuenta el `zoom` del sitio. */
/* Y SIN PERDER LA PROPORCIÓN. En las ventanas altas la cancha no tiene techo:
   es la elástica del tablero y se estira hasta el alto que le quede, así que
   plegada llegaba a 427x994 a 1600x1200 —una cancha de hockey—. El segundo
   tope es el ancho del tablero por 1,62, que es lo que la cancha abierta ya se
   permitía (427x691 a esa ventana): plegar nunca la achica y nunca la deforma.
   `cqw` sale de `container-type` en el tablero, puesto sólo plegado. */
.plantel__once[data-planteo='oculto'] .once__tablero { container-type: inline-size; }
.plantel__once[data-planteo='oculto'] .cancha {
  max-height: min(calc(100cqw * 1.62), max(460px, calc(var(--alto-ventana) - 370px)));
}
@media (max-width: 900px) {
  .plantel__once[data-planteo='oculto'] .cancha {
    max-height: max(420px, calc(var(--alto-ventana) - 300px));
  }
}

/* LA APERTURA ES UN SOLO MOVIMIENTO (28/9/2026). Primero fue un fundido del
   bloque y aparte la cancha achicándose, y se sentía a saltos: el bloque
   aparecía entero en un cuadro y la tarjeta crecía de golpe. Ahora el bloque
   abre su alto y la cancha cede el suyo con la MISMA curva y la misma duración,
   así que lo que uno gana lo pierde el otro y la tarjeta casi no cambia de
   tamaño: se ve la cancha subir y el planteo desplegarse debajo. Adentro, las
   consignas y los mandos entran escalonados. La transición se prende recién
   con el primer clic (`data-anima`, lo pone `plantel.js`): desde el principio,
   la cancha se animaba al cargar la pantalla. */
.plantel__once {
  --planteo-dur: 420ms;
  --planteo-curva: cubic-bezier(0.22, 1, 0.36, 1);
}
.plantel__once[data-anima] .cancha {
  transition: max-height var(--planteo-dur) var(--planteo-curva);
}
.plantel__once[data-anima] .once__planteo {
  transition:
    grid-template-rows var(--planteo-dur) var(--planteo-curva),
    opacity calc(var(--planteo-dur) * 0.6) ease,
    visibility 0s linear var(--planteo-dur);
}
.plantel__once[data-anima][data-planteo='visible'] .once__planteo {
  transition:
    grid-template-rows var(--planteo-dur) var(--planteo-curva),
    opacity var(--planteo-dur) ease,
    visibility 0s;
}
.plantel__once[data-anima][data-planteo='visible'] .once__planteo-dentro > * {
  animation: planteo-entra var(--planteo-dur) var(--planteo-curva) both;
}
.plantel__once[data-anima][data-planteo='visible'] .once__planteo-dentro > :nth-child(2) {
  animation-delay: 70ms;
}
@keyframes planteo-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.once__plegar .i { transition: transform var(--planteo-dur, 300ms) var(--planteo-curva, ease); }
@media (prefers-reduced-motion: reduce) {
  .plantel__once[data-anima] .cancha,
  .plantel__once[data-anima] .once__planteo { transition: none; }
  .plantel__once[data-anima][data-planteo='visible'] .once__planteo-dentro > * { animation: none; }
}

/* --------------------------------------------------------------------------
   EL PLANTEL EN EL TELÉFONO (28/9/2026)
   --------------------------------------------------------------------------
   Medido a 375x812: la tabla mide 668 de ancho en una caja de 325 y lo que se
   veía sin deslizar era «en el once», N.º, jugador, posición y nacionalidad.
   EL NIVEL ARRANCABA EN EL PÍXEL 398 —afuera—, y la edad en el 342. O sea que
   la columna por la que se ordena y se decide quién juega había que ir a
   buscarla de costado en cada renglón.

   En el teléfono se van el número de camiseta y la bandera, que son los dos
   datos que menos deciden, y las celdas aprietan su relleno: así entran
   jugador, posición, edad y nivel sin mover nada. El estado, el ánimo y la
   carga siguen ahí, a un deslizamiento. El número se sigue viendo y
   cambiando en la ficha del futbolista. */
@media (max-width: 560px) {
  .plantel-tabla th:nth-child(2),
  .plantel-tabla td:nth-child(2),
  .plantel-tabla .u-nac { display: none; }
  .plantel-tabla :is(th, td) { padding-inline: 6px; }
  /* Los rótulos de arriba eran los que marcaban el ancho —«Posición» con su
     flecha pedía 100 px para una celda que dice «DFC»—, así que bajan a 11 px
     y el nombre, que parte en dos renglones, cede su mínimo de 128 a 84. */
  .plantel-tabla thead th { font-size: 11px; letter-spacing: 0.02em; }
  .plantel-tabla th:nth-child(3),
  .plantel-tabla td:nth-child(3) { min-width: 84px; }

  /* EL RESUMEN, EN TRES COLUMNAS. Eran seis cifras sueltas que envolvían de a
     dos o tres por renglón y ocupaban 200 px antes de la primera fila de la
     tabla; en una grilla fija son dos renglones parejos, y el veredicto del
     equipo va debajo, a lo ancho. */
  .resumen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
    padding: var(--sp-4);
  }
  /* Y cada rótulo baja de renglón dentro de su tercio: «Contratos que se
     acaban» no se partía y se dibujaba encima de la celda de al lado. */
  .resumen .dato, .resumen .dato * { white-space: normal; min-width: 0; }
}