/* scouting.css */
/* ==========================================================================
   El Camino DT — Buscador de jugadores (scouting)
   --------------------------------------------------------------------------
   Composición y controles propios de esta pantalla. Cero tokens nuevos.
   El chrome, el panel, el botón, el segmentado, la tabla de datos y la rampa
   de atributos vienen tal cual de app.css y tokens.css.
   ========================================================================== */

/* Igual que el portal: la pantalla ocupa el alto de la ventana y lo que
   scrollea es la tabla, no la página. */
body {
  display: flex;
  flex-direction: column;
  /* `min-height` y no `height`: el porqué está en `plantel.css`. Resumen: con
     alto fijo, lo que no entra se sale de la caja y el documento rueda sólo
     hasta el borde del cuerpo, no hasta el final del contenido. */
  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;
}

/* UNA BARRA ARRIBA Y DOS TARJETAS DEBAJO, y el reparto viejo —tres columnas de
   296 / 1fr / 372— se cambió con dos medidas y no con una impresión:

   · la columna de criterios pedía **1.022 px** de alto en un hueco de **778**,
     así que los seis mínimos por atributo, que son el mando central de esta
     pantalla, quedaban 244 px por debajo del pliegue;
   · la matriz pedía **878 px** de ancho en un hueco de **702**, así que dos de
     las seis columnas de atributo vivían detrás de un scroll horizontal.

   Las dos cosas eran el mismo error de reparto: la pantalla gastaba el ancho en
   el embudo y le pedía a la tabla que se arreglara con lo que sobraba. Con los
   criterios en una banda de una línea y los mínimos mudados a la cabecera de la
   matriz, la tabla pasa a tener ~1.100 px y entra entera con sitio de sobra.

   Superficie, borde y esquina los pone `.tarjeta` (app.css). */
.scout {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* EL PANEL CEDE EN VENTANAS CHICAS, como en el plantel. Con 344px fijos, a
     1280 la tabla se quedaba con 822 pidiendo 968, y el resultado MEDIDO era
     que las VEINTICUATRO filas truncaban el nombre: «Thiago…», «Milton…». La
     columna que identifica a la persona, ilegible en la pantalla que existe
     para encontrar personas. El techo de 344 no se toca —es lo que la ficha del
     candidato quiere cuando hay lugar— y el piso lo fija lo que esa ficha
     necesita para no romperse. */
  grid-template-columns: minmax(560px, 1fr) clamp(280px, 22%, 344px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* Las dos de abajo scrollean por dentro, así que las dos pueden encogerse. */
.col { min-height: 0; }

/* --------------------------------------------------------------------------
   1. CRITERIOS — LA BANDA
   --------------------------------------------------------------------------
   Cuatro respuestas cortas en una línea: dónde, qué puesto, hasta qué edad,
   hasta cuánto. Son las que acotan el UNIVERSO de la búsqueda; los mínimos por
   atributo, que son los que la afinan, se fueron a la cabecera de la matriz.

   Se alinean por ABAJO y no por el centro: cada campo tiene su rótulo en
   versalitas arriba y un control de alto distinto debajo —un par de
   desplegables, un segmentado, un deslizador— y alineados al centro los tres
   rótulos quedaban en tres alturas distintas. Con `flex-end` los controles
   apoyan en la misma línea y los rótulos flotan donde les toque, que es el
   orden correcto: lo que se toca manda sobre lo que nombra.
   -------------------------------------------------------------------------- */

.criterios {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5) var(--sp-8);
}

.criterios__campo { display: grid; gap: var(--sp-3); align-content: end; min-width: 0; }
.criterios__campo--donde { flex: 0 1 auto; }
/* Un deslizador de menos de 180px no se puede apuntar: cada píxel vale más de
   un año de edad. Es el ancho el que manda, y por eso es `flex-basis` y no un
   `min-width` que la banda pudiera apretar. */
.criterios__campo--rango { flex: 0 1 232px; min-width: 180px; }
.criterios__reset { margin-left: auto; align-self: flex-end; }

.field__hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }

/* La aclaración de dónde se está ojeando, debajo de sus dos desplegables. Sin
   alto reservado: mientras no dice nada no ocupa nada, así que la fila de
   criterios no salta cuando aparece. */
.criterios__eco {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
  max-width: 42ch;
}

/* Botón discreto: la acción secundaria de una cabecera de panel, sin caja. */
.btn--quiet {
  height: 22px;
  padding: 0 var(--sp-3);
  border-color: transparent;
  background: none;
}
@media (hover: hover) {
  .btn--quiet:hover { background: var(--bg-hover); border-color: var(--line); }
}

/* EL DESLIZADOR SE MUDÓ A `app.css`. Nació acá, para el embudo del buscador, y
   se fue el día que seis mesas de negociación lo pusieron en pantallas que no
   cargan esta hoja: el control salía con el AZUL del navegador dentro de un
   mundo violeta, que es la manera más rápida de romper la ilusión de estar
   dentro del juego. Un control que usa media interfaz es del sistema. */

/* --------------------------------------------------------------------------
   EL MÍNIMO POR ATRIBUTO
   --------------------------------------------------------------------------
   La fila de atributo haciendo de ENTRADA. Misma altura, mismo relleno
   proporcional y misma rampa de tramos que en la ficha: lo que allá era "esto
   tiene el jugador", acá es "esto exijo". Que sean el mismo objeto es lo que
   permite comparar el criterio con el resultado de un vistazo.
   -------------------------------------------------------------------------- */

/* Ya no es una pila de seis: es UNO por columna, debajo del rótulo que lo
   nombra. Por eso desapareció el nombre del atributo de adentro del control
   —lo dice la cabecera— y con él los 78px que ocupaba. */
.thr { display: block; height: var(--row-h); }

/* EL RIEL VACÍO TIENE QUE PARECER UN RIEL. En la columna de criterios estaba
   dentro de una pila de seis con su nombre al lado, así que se leía como un
   control aunque estuviera vacío. Solo, en una celda de cabecera y sin relleno,
   un rectángulo un escalón más oscuro que el panel es un hueco: nada dice que
   se pueda arrastrar. El hairline lo convierte en una ranura, que es la misma
   lección que ya se había aprendido con el medidor de condición del partido —
   «el riel se hunde, no se posa». */
.thr__track {
  display: block;
  position: relative;
  width: 100%;
  height: var(--row-h);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-xs);
  background: var(--ink-1000);
  isolation: isolate;
}

/* Con relleno el borde sobra: el propio relleno dibuja el canto. */
.thr:not([data-tier='0']) .thr__track { border-color: transparent; background: var(--bg-row); }

/* El mismo relleno escalado que .attr::before, con la misma rampa. */
.thr__track::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-xs);
  background: var(--fill, transparent);
  transform: scaleX(calc(var(--v) / 20));
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}


.thr__track input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  cursor: ew-resize;
}
.thr__track input::-webkit-slider-runnable-track { height: 100%; background: none; }
.thr__track input::-moz-range-track { height: 100%; background: none; }

/* El pulgar es la marca de lo que elegiste, y eso es uno de los tres usos del
   acento. Una línea, no una bolita: hace de borde del relleno. */
.thr__track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: var(--row-h);
  border: 0;
  border-radius: var(--r-hair);
  background: var(--accent);
}
.thr__track input::-moz-range-thumb {
  width: 3px;
  height: var(--row-h);
  border: 0;
  border-radius: var(--r-hair);
  background: var(--accent);
}
.thr__track input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: var(--r-xs); }

/* La cifra va DENTRO del riel, apoyada sobre su propio relleno, que es
   exactamente como la fila de atributo de la ficha muestra su valor. Afuera
   pedía una tercera columna de 20px por cada uno de los seis, y seis columnas
   de veinte píxeles son ciento veinte que la matriz necesita para sus números.
   `pointer-events: none` porque el riel entero es el control: la cifra no puede
   ser un agujero en el medio del deslizador. */
.thr__value {
  position: absolute;
  inset: 0 var(--sp-3) 0 auto;
  display: grid;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--val, var(--text-primary));
  pointer-events: none;
}
.thr[data-tier='0'] .thr__value { color: var(--text-muted); }
.thr[data-tier='0'] .thr__track input::-webkit-slider-thumb { background: var(--line-strong); }
.thr[data-tier='0'] .thr__track input::-moz-range-thumb { background: var(--line-strong); }

/* --------------------------------------------------------------------------
   2. RESULTADOS
   -------------------------------------------------------------------------- */


.results__count { font-size: var(--fs-sm); color: var(--text-muted); }
.results__count strong { color: var(--text-primary); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Modificador de verdad: hereda los 24px y el radio de .chip y sólo añade
   sitio para la × . Antes reclamaba el nombre del componente y contradecía su
   geometría. */
.chip--filter { padding-right: var(--sp-2); gap: var(--sp-3); }
.chip--filter button {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  color: var(--icon-quiet);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .chip--filter button:hover { background: var(--bg-active); color: var(--text-primary); }
}
.chip--filter .i { width: 10px; height: 10px; }

/* --------------------------------------------------------------------------
   EL REPARTO DE LA MATRIZ
   --------------------------------------------------------------------------
   Las seis columnas de atributo son el PRODUCTO de esta pantalla y las seis de
   identidad son la etiqueta del producto. Sin anchos declarados el reparto
   salía al revés: 592 px para saber quién es y 384 para saber qué tiene, con
   la columna del nombre estirándose hasta 182 px para escribir «Thiago Almada»
   en 96.

   Los números de acá abajo son lo que cada columna ocupa DE VERDAD, medido con
   el contenido más largo de cada una: tres letras de puesto, dos dígitos de
   edad, «US$ 32M» de valor, la barra de coincidencia con su cifra. El nombre no
   lleva ancho: se queda con todo lo que sobre, porque es lo único de la fila
   que no se puede reconocer recortado.

   El club sí puede, y por eso es el que paga cuando la ventana aprieta: al lado
   del nombre va su ESCUDO, que es como este juego reconoce un club. Los 132 de
   acá son lo que pide «Boca Juniors» con su escudo delante; cuando no caben, la
   columna se queda con el escudo solo —ver el repliegue de tres pasos, más
   abajo— en vez de escribir «Boca Junio…», que es un nombre roto al lado de un
   dibujo que ya lo dice entero.
   -------------------------------------------------------------------------- */

/* REPARTO FIJO, y no automático. Con `auto` el navegador reparte el sobrante
   entre todas las columnas según cuánto texto tiene cada una, así que las seis
   de atributo engordaban con la niebla —«19–20» pide más que «20»— y el ancho
   de la tabla bailaba al cambiar de ojeadores o de país. Con `fixed`, once
   columnas valen lo que dicen acá y la doceava —el nombre— se queda con todo
   lo que sobre: en una ventana ancha los apellidos entran enteros y en una
   angosta se recorta el nombre antes que esconderse una columna de atributo. */
.matrix { table-layout: fixed; width: 100%; }

.matrix thead tr:first-child th:nth-child(1) { width: 60px; }
.matrix thead tr:first-child th:nth-child(3) { width: 48px; }
.matrix thead tr:first-child th:nth-child(4) { width: 132px; }
/* 60 y no 52: el rótulo es un botón de orden —«Edad» más su flecha— y a 52 se
   leía «EDAI». La columna la manda su CABECERA y no su dato, que son dos
   dígitos. */
.matrix thead tr:first-child th:nth-child(5) { width: 60px; }
.matrix thead tr:first-child th:nth-child(6) { width: 72px; }
.matrix thead tr:first-child th:nth-child(n + 7) { width: 62px; }

/* Con reparto fijo, lo que no entra se desborda en vez de ensanchar. El club
   pasó a escribir su nombre en `.team__nombre` —un texto suelto dentro de un
   flex es una caja anónima y `text-overflow` no le llega, que es exactamente lo
   que `app.css` ya advertía sobre este componente— y el del futbolista ya se
   recortaba solo. */

/* --------------------------------------------------------------------------
   LA CABECERA DE MÍNIMOS
   --------------------------------------------------------------------------
   El segundo renglón del `<thead>`: cada mínimo debajo del rótulo de la columna
   que filtra. No es una fila de datos y no puede leerse como una —si se leyera
   como una, el DT creería que hay un futbolista llamado «Mínimo que exigís»—
   así que se separa del cuerpo con la misma línea con la que el `<thead>` ya se
   separa de él, y se apoya un escalón tonal más abajo.
   -------------------------------------------------------------------------- */

.matrix__minimos > * { padding-top: 0; padding-bottom: var(--sp-3); }

/* El rótulo apunta a los seis controles: pegado a la derecha, que es el borde
   contra el que empiezan. Suelto a la izquierda de una tirada de seis columnas
   quedaba a cuatrocientos píxeles de lo que nombra. */
.matrix thead .matrix__minimos-rotulo {
  text-align: right;
  padding-right: var(--sp-5);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Sin `hover` en este renglón: la fila de la tabla se enciende al pasar por
   encima y acá eso prometería que se puede elegir un mínimo como se elige un
   futbolista. */
@media (hover: hover) {
  .matrix thead .matrix__minimos:hover { background: none; }
}

.matrix td { padding-block: var(--sp-2); }

.matrix tbody tr { cursor: pointer; }

/* El único momento autorizado de la pantalla: al estrechar la búsqueda, las
   filas que sobreviven se encienden desde un estado ya visible. No se anima
   alto ni se reemplaza el cuerpo de la tabla — los nodos persisten, así que
   las barras de coincidencia se vuelven a medir en el mismo gesto. */
@keyframes fila-entra { from { opacity: 0.15; } to { opacity: 1; } }
.matrix tbody tr.is-enter { animation: fila-entra var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .matrix tbody tr.is-enter { animation: none; }
}
/* El fondo lo pone `app.css`; acá queda el nombre, que sube de peso. */
.matrix tbody tr[aria-current='true'] .who__name { color: var(--text-primary); }

/* La cabecera ordenable (`.sort`) se fue a `app.css`: desde que el plantel
   también ordena, es una primitiva del sistema y no del buscador. */

/* Marca de lista corta dentro del nombre: es una elección del usuario, y eso
   es uno de los tres usos del acento. */
.who__mark { display: inline-flex; vertical-align: -1px; color: var(--accent); }
.who__mark .i { width: 11px; height: 11px; }

/* EL PAÍS SE DECÍA DOS VECES. La celda era el nombre arriba y, debajo, la
   bandera pegada al borde izquierdo con el nombre del país pegado al derecho:
   el mismo dato partido en dos puntas de un renglón que existía sólo para él.
   Ahora es una línea —bandera, nombre— y el país entero vive en el `title` de
   la celda, que es donde el resto del juego lo pone. La fila bajó de dos
   renglones a uno: entran cinco futbolistas más sin tocar la densidad. */
.who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.who__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who .flag { flex: none; }

/* Celda de atributo: la fila de atributo comprimida a una casilla. Leer la
   columna en vertical es lo que convierte la tabla en una comparación. */
.cell {
  display: grid;
  place-items: center;
  width: 26px; height: 20px;
  margin-left: auto;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Toma el relleno y la cifra del mapeo compartido de tramos. */
.cell { background: var(--fill); color: var(--val); }

/* UN RANGO NO ENTRA EN 26 PÍXELES. La casilla es un cuadrado fijo porque lo
   que se compara es la columna en vertical, y con un ancho por celda la
   comparación se desarma; pero «18–20» pide cuarenta y se cortaba a «18–2…».

   Se ensancha SÓLO la estimada: la que ves exacta sigue midiendo lo que medía,
   así que un DT con la red completa ve la matriz de siempre y no paga en
   densidad por una función que no está usando. Que las estimadas sean más
   anchas además las distingue de un vistazo, que es lo correcto — no son el
   mismo tipo de dato. */
.cell--estimado {
  width: auto;
  min-width: 26px;
  padding: 0 var(--sp-2);
}
/* El élite es el tramo 4 desde que la rampa tiene cuatro. */
.cell[data-tier='4'],
.cell[data-tier='5'] { font-weight: 700; }

/* Coincidencia: qué tan bien cumple lo que pediste. Es una escala ordenada,
   así que se lee por brillo con la misma rampa. */
.match { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.match__bar { width: 34px; height: 4px; border-radius: var(--r-pill); background: var(--bg-row); overflow: hidden; }
.match__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent-dim); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform var(--dur) var(--ease); }
.match__fill[data-tier='4'],
.match__fill[data-tier='5'] { background: var(--good); }
.match__num { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   3. VISTA PREVIA
   -------------------------------------------------------------------------- */

.preview { overflow-y: auto; }

/* Y LA CABECERA DOBLA, porque su chapa no cede y la columna es angosta.
   `.panel__head` es una fila de flex con el título y una `.label`, y esa label
   es `white-space: nowrap`: «94 % de coincidencia» pide 189 px al lado de los
   99 de «Candidato», y la columna de la vista previa mide 302. No entra por 30,
   así que la label se salía de la caja y la columna RODABA de costado —13 px a
   1280 y 5 a 1440—, que es peor que doblar porque la vista previa no es un
   diagrama ancho: es una ficha.

   Doblar y no recortar, porque el número es el dato: «94 %» es lo que decide si
   este candidato vale la pena, y unos puntos suspensivos lo borrarían. Va
   acotado a `.preview` y no a `.panel__head` a secas, que la usan las dieciséis
   pantallas — el mismo recorte que ya hacen `.tile` en `card.css` y
   `.entreno__lado` en `entrenamiento.css`. */
.preview .panel__head { flex-wrap: wrap; }

.card-id { display: grid; gap: var(--sp-4); }
.card-id__top { display: flex; align-items: center; gap: var(--sp-5); }

/* Registro Display: 30px comprimido, el slot que el sistema reserva para el
   nombre de un jugador. 22px comprimido es el slot de las cifras. */
.card-id__name {
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.card-id__nac { display: flex; align-items: center; gap: var(--sp-3); }
.card-id__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary); }
/* Cómo llegó a ese club. Va un escalón por debajo del meta —es contexto, no
   identidad— y con el icono alineado al texto y no a la caja.

   EL COLOR ES `--text-secondary` Y NO UN TERCER NIVEL. La primera versión decía
   `var(--text-tertiary, var(--text-secondary))`, y ese token NO EXISTE en el
   sistema: cero definiciones y cero usos en las 37 hojas. Andaba por el
   fallback, o sea que el nombre inventado quedaba escrito y sin efecto — un
   token fantasma con red debajo, que es peor que uno pelado porque no se nota.
   Si algún día hace falta un tercer nivel de texto, se define en `tokens.css`
   y lo usan todos; no se estrena acá de contrabando. */
.card-id__llegada { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); }
/* AL PRIMER RENGLÓN Y NO AL MEDIO. Con `center` el icono se centra contra el
   párrafo ENTERO, así que en cuanto la frase se parte en tres —«Llegó en el
   mercado de verano de 2027, de River Plate, a cambio de Rodrigo Battaglia»,
   que es el caso normal desde que nombra al del canje— el símbolo aparecía
   flotando al lado del segundo renglón, leyéndose como si marcara esa línea.
   El `margin-top` lo baja el pelo que hace falta para que quede sobre la
   primera letra y no sobre el hueco de arriba. */
.card-id__llegada .i { flex: none; opacity: .7; margin-top: .18em; }
.card-id__club { display: flex; align-items: center; gap: var(--sp-3); }

.abilities { display: flex; gap: var(--sp-7); }
.ability { display: grid; gap: var(--sp-3); }

/* El informe del ojeador: lo único de prosa en la pantalla, con su medida. */
.report {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--line-hairline);
}
.report__quote { max-width: 46ch; font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-body); }
.report__by { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }

/* La operación. Es lo único de la vista previa que cambia el mundo, así que se
   separa de los dos botones de marcar con la misma línea de un píxel que separa
   el informe — y va ARRIBA de ellos: la lista corta es lo que se hace cuando no
   se puede comprar, no al revés.

   El `margin-top: auto` se mudó acá desde `.actions`, que era quien empujaba el
   bloque al pie de la columna. Con los dos puestos, el empuje se repartía y
   quedaba un hueco en el medio. */
.fichaje {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-5);
}
.fichaje__precio {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-right: auto;
}
/* Un motivo no es un botón apagado: ocupa el sitio del botón y se lee. */
.fichaje__no { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }

.actions { display: flex; gap: var(--sp-4); padding-top: var(--sp-4); }
.actions .btn { flex: 1 1 auto; justify-content: center; }

/* --------------------------------------------------------------------------
   4. RESPUESTA A PANTALLA
   Estructural. Igual que en el portal, el anclaje al alto de ventana sólo se
   sostiene mientras las dos columnas caben juntas.

   El quiebre bajó de 1400 a 1260, y esta vez está MEDIDO en vez de heredado. La
   cuenta es una resta: la tarjeta de resultados se queda con el ancho de
   ventana menos 424 —32 de relleno de página, 12 de canalón, 344 del candidato
   y 36 entre relleno y bordes de la propia tarjeta— y la tabla pide unos 830
   para que ninguna columna se recorte. De ahí sale 1254, y 1260 es el redondeo.

   Estaba en 1400 porque con tres columnas la matriz ya no entraba ahí, y se
   quedó en 1400 después de que las columnas pasaran a dos: una pantalla que se
   repliega por costumbre y no por medida se apila cuando todavía le sobraban
   ciento cuarenta píxeles.
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .scout { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); }
  .scout > .preview { grid-column: auto; }
  .col { min-height: auto; }
  .preview { overflow: visible; }
  .table-scroll { flex: 0 1 auto; max-height: 460px; }
  /* Sin columna de alto fijo no hay pie al que empujar el bloque: el
     `margin-top: auto` de `.fichaje` dejaría un vacío en el medio. */
  .fichaje { margin-top: var(--sp-5); }
}

/* EL CLUB SE REPLIEGA EN TRES PASOS, Y NO EN UNO. Entre los 1.460 px donde el
   nombre del club entra entero y los 1.080 donde la columna se va, hay una
   franja en la que caben las dos cosas si una de las dos se conforma con menos:
   ahí el club se queda con su ESCUDO, que es como este juego reconoce un club,
   y le devuelve setenta píxeles al nombre del futbolista, que es lo único de la
   fila que recortado no se reconoce.

   Medido a 1400: con el nombre del club puesto se recortaban siete apellidos y
   dieciséis clubes —las dos columnas de texto rotas a la vez, que es el peor de
   los repliegues—; con el escudo solo no se recorta ninguno de los dos. */
@media (max-width: 1460px) {
  .matrix .team__nombre { display: none; }
  .matrix thead tr:first-child th:nth-child(4) { width: 44px; }
}

/* LA COLUMNA DEL CLUB YA NO SE ESCONDE, y sacar esa regla arregló un defecto
   que ella misma causaba. `display: none` sobre una celda no la deja invisible:
   la SACA del modelo de la tabla, así que la fila de cabecera pasaba a tener
   once columnas mientras la de mínimos seguía declarando doce —un `colspan` de
   seis más seis controles— y el navegador inventaba una columna de más al
   final. Se veía a 1024: un séptimo riel vacío a la derecha de Decisiones.

   Y ya no hace falta esconderla: existía porque la tabla vivía apretada en la
   columna del medio de una retícula de tres. Debajo de 1260 la pantalla se
   apila y la tabla se queda con el ancho entero, que a 1024 son casi mil
   píxeles para once columnas. Lo que no entre lo resuelve el scroll de
   `.table-scroll`, que para eso está. */

@media (max-width: 860px) {
  .scout { grid-template-columns: 1fr; }
  .scout > .preview { grid-column: auto; }
  .table-scroll { max-height: none; }

  /* EL NOMBRE PIDE SU ANCHO EN EL TELÉFONO, Y ACÁ ESTÁ POR QUÉ. Con
     `table-layout: fixed`, la columna sin `width` se queda con LO QUE SOBRA —y
     en una ventana de teléfono no sobra nada—. Las once declaradas piden 806 px
     dentro de una caja de 330: el reparto le dio CERO a la doceava, que es el
     nombre del futbolista, la columna de identidad y encima la que se queda
     pegada a la izquierda. Medido a 390: `th:nth-child(2)` en 0 px y la fila
     mostrando la bandera y nada más. Un buscador sin nombres no es un buscador.

     Se arregla pidiéndole ancho, no espacio libre: con 168 px la tabla pasa a
     medir más que su caja y la resuelve `.table-scroll`, que es exactamente lo
     que hacen las otras siete tablas del juego en el teléfono. */
  /* 224 Y NO 168, y el número sale de medir los nombres del juego y no de mirar
     la pantalla. Con 168 de columna al nombre le quedan 120 —la bandera y los
     huecos se llevan 48— y sobre los 3.876 futbolistas que el buscador puede
     listar, 2.044 NO ENTRAN: el 53 %. La MEDIANA ya son 122px, o sea que más de
     la mitad de los nombres se recortaba.

     La distribución, medida en el teléfono con la tipografía de la celda:
     p50 122 · p90 158 · p95 176 · p99 206 · el más largo 271.

     Se toma el p95: 176 de nombre más los 48 de bandera y huecos son 224 de
     columna, y el 5 % que queda se recorta con puntos suspensivos, que es para
     lo que están. Perseguir el p99 son 30px más por catorce nombres de cada mil.

     ESE PÁRRAFO VALE DE 560 PARA ARRIBA, y desde el 10/9/2026 no más abajo: el
     techo de la regla que sigue le pone `min(224px, 40vw)`, así que en un
     teléfono chico la columna mide 133 y el p95 no la protege. Lo que cubre ese
     tramo es el TOPE DE DOS RENGLONES, más abajo en este mismo bloque: el
     nombre envuelve en vez de recortarse y no se pierde ni un apellido.

     Y no era «recortar un poco más»: a 320 px, con la columna en 224 se
     recortaban CERO de 24, y con 133 se recortaban 23. La cuenta la hizo
     `elcamino-dt-04` y corrige lo que yo había dado por buen precio sin
     medirlo.

     LO QUE CUESTA, dicho: la tabla ya mide 857px dentro de una caja de 317 —o
     sea que YA rueda 508 de costado, y eso es el diseño de esta pantalla en el
     teléfono—. Pasa a rodar 564: un 11 % más sobre algo que ya se desplaza, y
     ninguna columna está congelada a la izquierda, así que no le quita sitio a
     nadie. */
  /* EL TECHO ES `min()` DESDE EL 10/9/2026, y con él se cae media frase de
     arriba. «Ninguna columna está congelada a la izquierda» dejó de ser cierto
     el 8/9: `app.css` le puso `position: sticky` a esta misma columna, con las
     otras siete. Desde entonces sus 224 px no son ancho de tabla, son ancho de
     VENTANA — se los saca a la rendija por la que desfilan las otras diez.

     A 320 px eso deja una rendija de 27 px contra columnas de 46 a 75: no entra
     NINGUNA. Arrastrás al tope y la última queda partida contra el borde, con
     un 18 leyéndose «L8» y un 20 «?0». Es el mismo defecto que Alberto grabó en
     el mercado —«der | Ceder»— con números en vez de botones.

     Y EL TECHO DE `app.css` NO PODÍA ARREGLARLO, aunque esta columna esté en su
     lista: `.matrix` es `table-layout: fixed`, y ahí el `max-width` de una celda
     es inerte —el ancho lo fija el `width` declarado en la primera fila—.
     Medido en producción: la celda declaraba `max-width: 128px` y medía 233.
     `reserva` es la otra tabla de maqueta fija y necesitó lo mismo en su hoja.

     El p95 de 224 se conserva donde hay sitio: `min()` sólo muerde por debajo de
     los 560 px de ventana. Lo mide `vara-la-rendija-de-la-tabla.mjs`. */
  .matrix thead tr:first-child th:nth-child(2) { width: min(224px, 40vw); }

  /* Y EL NOMBRE ENVUELVE EN DOS RENGLONES, que es la otra mitad del techo de
     arriba: sin esto el arreglo cambia un defecto por otro. `.who__name` es
     `nowrap` + `ellipsis`, que le sirve a la columna de 224 px porque ahí todo
     entra en una línea; con la columna en 133, no. Medido a 320 sobre el
     buscador de Racing, VEINTITRÉS de veinticuatro nombres perdían apellido
     —«Milton Delgado» en 88 px de los 116 que pide—: la tabla pasaba a leerse y
     dejaba de decir de quién es cada fila, que es para lo que existe la columna
     pegada.

     ENVOLVER SUELTO PARECÍA GRATIS Y NO LO ERA, y la diferencia la hizo el
     control y no el ojo: con los 24 nombres de Racing la fila queda en 54 px y
     la tabla en los mismos 1.381 — pero Racing es un club de 1.656. Con el
     nombre real más largo del juego, «Facundo Nicolás Collares», la fila salta
     a 73 px; con uno de sesenta caracteres, a 138.

     El tope de dos renglones paga las dos cuentas: cero apellidos perdidos y la
     fila clavada en 54 px INCLUSO con el más largo, que se recorta recién en el
     segundo renglón en vez de reventar la fila.

     Va acotado a esta consulta y no a `.who__name`, que es de la tabla ancha:
     ahí la columna mide 224 px, nada envuelve y el tope sería letra muerta. */
  .matrix tbody td:nth-child(2) .who { align-items: flex-start; }
  .matrix tbody td:nth-child(2) .who__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* La banda de criterios se apila: cuatro campos en una línea de 860px dejan
     cada deslizador en ochenta píxeles, que es un control que no se puede
     apuntar. */
  .criterios { flex-direction: column; align-items: stretch; }
  .criterios__campo--rango { flex-basis: auto; }
  .criterios__reset { margin-left: 0; align-self: flex-start; }
}

/* La red de ojeadores se mudó a `equipo.css`: desde que la tarjeta vive en
   Clubes, esta hoja es la única que no la usa. Ver ahí el porqué de la
   mudanza. */

/* --------------------------------------------------------------------------
   EL MANDO DE LAS DOS LISTAS
   --------------------------------------------------------------------------
   La cabecera del panel alinea por línea base —título y recuento son texto—, y
   un grupo de botones alineado por su línea base cuelga: se centra a mano.
   -------------------------------------------------------------------------- */

.segmented--vista { align-self: center; margin-left: auto; }

/* El apagado de los criterios cuando mirás la lista corta. `inert` lo pone el
   guion; esto es sólo el aspecto, y va sobre el mismo selector para que nunca
   se vea apagado algo que todavía responde. */
.criterios__campo[inert],
.criterios__reset[inert],
.matrix__minimos[inert] { opacity: 0.4; }

/* --------------------------------------------------------------------------
   DÓNDE JUEGA
   --------------------------------------------------------------------------
   El campito del puesto, al lado de su nombre. El SVG trae sus propias líneas
   de `.campito`, que es del sistema; acá sólo se lo mide y se le pone al lado
   el rótulo, que es lo que el dibujo no sabe escribir.
   -------------------------------------------------------------------------- */

.donde-juega {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.donde-juega .campito--puesto { width: 92px; flex: none; }

/* Los otros puestos de su línea, apagados: sin ellos, un punto solo no dice si
   está a la izquierda o a la derecha. */
.campito__hermano { fill: var(--text-muted); opacity: 0.45; }

.donde-juega__texto { display: grid; gap: var(--sp-1); }
.donde-juega__pos { font-size: var(--fs-md); color: var(--text-primary); }
.donde-juega__linea { font-size: var(--fs-sm); color: var(--text-secondary); }


/* --------------------------------------------------------------------------
   LAS PASTILLAS DE OJEO, EN EL TELÉFONO
   --------------------------------------------------------------------------
   Cada región es una pastilla de una sola línea —`nowrap` y alto fijo de 26—
   porque en horizontal cuatro pares sueltos se leen como ocho cosas y la
   superficie es la que los agrupa. Eso sigue siendo cierto; lo que no entra es
   la línea: medidas a 320, las cuatro piden entre 371 y 376 px dentro de una
   caja de 258, así que la tira se sale aunque `.ojeo__regiones` ya doble.

   Acá la pastilla dobla por dentro. El alto fijo se va con el `nowrap` —los dos
   sostienen la misma decisión— y el agrupamiento no se pierde, que es lo único
   que esa regla tenía que defender: la pastilla sigue siendo UNA superficie,
   ahora de dos renglones.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .ojeo__fila { height: auto; padding-block: var(--sp-2); }
  .ojeo__region { white-space: normal; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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