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

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

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

.plantel-tabla tr[data-veto] { opacity: 0.4; cursor: default; }
.plantel-tabla tr[data-veto]:hover { background: none; }

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

/* Estado y ánimo: la misma barra corta, que se lee de un vistazo y no compite
   con los números de al lado. */
.barra {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
}

.barra::before {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: var(--r-pill);
  background: var(--text-muted);
}

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

/* --------------------------------------------------------------------------
   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);
  background:
    /* El círculo central y la mitad de cancha, en líneas blancas diluidas sobre
       césped. Esto decía «con líneas y no con verde: es la misma pizarra que el
       resto del juego, no una cancha de videojuego», y era la decisión más
       vieja del sistema — sostenida en un recorte comprimido. El video de FM26
       a 1:1 muestra el campo de tácticas VERDE. Ver `--campo` en `tokens.css`. */
    radial-gradient(circle at 50% 50%, transparent 33px, var(--campo-linea-css) 33px, var(--campo-linea-css) 34px, transparent 34px),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--campo-linea-css) calc(50% - 1px), var(--campo-linea-css) 50%, transparent 50%),
    repeating-linear-gradient(to right, var(--campo) 0 11.11%, var(--campo-franja) 11.11% 22.22%);
}

.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. */
  font-size: calc(var(--fs-2xs) * var(--esc, 1));
  width: max-content;
  min-width: 3.4em;
  max-width: calc(92px * var(--esc, 1));
  gap: 0.08em;
  padding: 0.31em 0.15em;   /* los 4px y 2px de siempre, en em para que escalen */
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.puesto:hover { border-color: var(--line-strong); background: var(--bg-hover); }

.puesto--activo {
  border-color: var(--accent);
  background: var(--bg-selected);
  box-shadow: 0 0 0 1px var(--accent);
}

.puesto--vacio { border-style: dashed; }

/* 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: center; gap: 0.23em; 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 {
  padding: 0 0.31em;
  border-radius: var(--r-xs);
  background: var(--linea-por);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--text-on-accent);
}
.puesto[data-linea='DEF'] .puesto__rol { background: var(--linea-def); }
.puesto[data-linea='MED'] .puesto__rol { background: var(--linea-med); }
.puesto[data-linea='DEL'] .puesto__rol { background: var(--linea-del); }

/* 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 {
  background: none;
  color: var(--text-muted);
}

.puesto__n {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.puesto__nombre {
  color: var(--text-secondary);
  /* 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); }
.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: var(--bg-selected);
  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: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary);
}

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

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

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

/* 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. */
  .plantel__lista, .plantel__once { overflow: visible; min-height: auto; }
  .plantel__lista .table-scroll { flex: 0 0 auto; max-height: none; overflow-x: auto; }
  /* 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; }
}

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

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

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

.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. */
  .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: de ancho la ficha ya pasa los 44, y el costado es el
       eje donde dos vecinas se pisan. */
    inset: calc(var(--zona, 0px) * -1) -1px;
  }
}