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

/* 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;
}
.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);
}
.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. */
.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; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; }

/* 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); }
.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; }
  /* 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, AL PIE DE LA TABLA
   --------------------------------------------------------------------------
   Cuatro regiones con su precio, en una tira horizontal debajo de la matriz.
   Estaba arriba de todo en la columna de criterios y no es un criterio: no
   acota la búsqueda, decide con cuánta NITIDEZ se leen los números que están
   justo encima. Ahí arriba, además, era el bloque más alto de la columna y
   empujaba el embudo fuera de la pantalla.

   Sigue en esta pantalla y no en una propia por lo que ya decía su archivo: el
   único momento en que un DT se pregunta si le falta cobertura es cuando mira
   una tabla que no puede leer. Lo que cambió es que ahora está pegada a esa
   tabla. Sin tokens nuevos: cada región es una pastilla con su precio de
   control, que es la misma gramática que tenía en vertical.
   -------------------------------------------------------------------------- */

.ojeo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}

.ojeo__titulo { flex: none; color: var(--text-muted); }
.ojeo__regiones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* La región y su precio viajan juntos en una pastilla: cuatro pares sueltos en
   una línea se leen como ocho cosas, y cuál precio es de cuál región pasa a ser
   una pregunta. La superficie es la que agrupa. */
.ojeo__fila {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-row);
}

.ojeo__region { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; white-space: nowrap; }
.ojeo__region strong { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.ojeo__techo { padding-right: var(--sp-2); color: var(--good); }

/* El eco se lleva el renglón entero: es una frase y no una pastilla más, y
   metida en la fila de las cuatro se leía como la quinta región. */
.ojeo__eco {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

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