/* mercado.css */
/* ==========================================================================
   El Camino DT — El mercado de pases
   --------------------------------------------------------------------------
   Cero tokens nuevos. La tabla ancha a la izquierda y el panel de decisión a
   la derecha. El panel no es un resumen de la tabla: es lo que hay que saber
   ANTES de mirarla, y por eso no scrollea con ella.
   ========================================================================== */

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

/* Dos tarjetas con aire entre ellas: la superficie y el borde los pone
   `.tarjeta` (app.css). */
.mercado {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

.mercado__lista { gap: var(--sp-4); min-height: 0; }

/* EL RÓTULO DE ESTA CABECERA ES UNA FRASE, NO UNA MEDIDA, y por eso se dobla.

   `app.css` le pone `white-space: nowrap` al rótulo que acompaña al título de
   un panel, y con razón: ahí siempre van medidas cortas —«4-3-1-2», «10 DE
   11»— que partidas en dos renglones dejan de leerse. Estas dos no son
   medidas, son oraciones que crecen con el nombre de la liga y con cuántos
   hay: «Los 24 mejores que podés pagar en la Primera División, de 137 que sus
   clubes soltarían», y en Propuestas «Ninguno de los tuyos entra en lo que
   buscan los 8 clubes».

   Y NO SE PASABA SÓLO EN LA VENTANA CHICA. Un rótulo `nowrap` dentro de una
   caja de flex encoge la CAJA y deja la tinta afuera, así que el defecto
   estaba en todos los anchos y sólo se veía donde la ventana no lo tapaba.
   Medido con un `Range` sobre la tinta —la caja miente, justamente por esto—,
   en píxeles de maquetación y con las caras ya cargadas:

     ancho    sin doblar                          doblando
      800     60 px fuera de la tarjeta, y de     dentro, cabecera 47
              ahí 52 de página; cabecera 70
      900     dentro (una columna: la tarjeta     dentro, cabecera 47
              mide 833 y el rótulo 674)
     1024     184 px fuera de la tarjeta,         dentro, cabecera 47
              cortados a cuchillo; cabecera 70
     1280     dentro, cabecera 47                 dentro, cabecera 47
     1440     idéntico con y sin: un renglón, cabecera 23

   O sea que a 1024 —un portátil cualquiera— la frase se cortaba a mitad de
   palabra desde siempre, y el `overflow: hidden` del `body` lo tapaba.

   Y NO CUESTA ALTO: donde el rótulo dobla, la cabecera mide lo mismo o MENOS.
   A 800 y a 1024 baja de 70 a 47, porque meter el rótulo adentro le devuelve
   sitio al título, que estaba partido en tres renglones («Mercado / de /
   pases»). A 1280 el rótulo pasa a dos renglones y la cabecera sigue midiendo
   47, porque el que manda ahí es el título. De 1440 para arriba entra en un
   renglón y no cambia nada.

   Se dobla y no se recorta con puntos suspensivos: media frase no dice nada. */
.mercado__lista > .panel__head > .label { white-space: normal; text-align: right; }

/* La columna de la derecha no es una tarjeta: es la pila de las cuatro que
   lleva dentro, y lo que scrollea es la pila. */
.mercado__estado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Una tarjeta dentro de un scroller no se encoge: se scrollea la pila. */
.mercado__estado > .tarjeta { flex: 0 0 auto; }
.mercado__lista .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

.mercado__barra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.mercado__barra .search--campo { width: 160px; }

/* La bandera al lado del escudo, en la columna del club. Con el mercado en un
   solo país sobraba; con diecinueve es el dato que dice si el que estás
   mirando juega a treinta kilómetros o a diez mil. Va antes del escudo porque
   lo que se pregunta primero es de dónde, no de quién. */
.club-de { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* El nombre con su bandera, con la misma forma que el club con su escudo: la
   celda es la misma tabla y las dos cosas se leen igual.

   LA BANDERA VA AL FINAL porque esta columna está alineada a la derecha: el
   borde que comparten las veinticuatro filas es el de atrás, y es ahí donde las
   banderas forman la fila vertical que se barre de un vistazo cuando se buscan
   los argentinos de la lista. Delante del nombre caían cada una en su sitio
   —medido: entre 242 y 281 px— y dejaban de ser una columna. Es lo mismo que
   hace «NAC.» en el plantel. */
.quien-de { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* Las operaciones de una fila. Desde que hay cuatro maneras de mover a un
   futbolista, una celda con un solo botón dejó de alcanzar: comprar y pedir
   prestado son dos decisiones distintas sobre el mismo nombre, y una de ellas
   se puede cuando la otra no.
   El guion del medio es un motivo que no se escribe: ocupa el sitio del botón
   que falta —así la columna no baila entre filas— y explica en el `title`. */
.ops { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.ops .veto { min-width: 1ch; text-align: center; }

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

.veto { font-size: var(--fs-2xs); color: var(--text-muted); }

/* `.data-table td.contrato--acaba` se mudó a `app.css`: desde que el plantel
   propio también tiene columna de contrato la miran dos pantallas, y esta hoja
   la carga una sola. */
.vacio-fila { padding: var(--sp-7) var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   CÓMO ESTÁS
   -------------------------------------------------------------------------- */

.resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  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; }

.nota-mercado {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* La nota que avisa que la caja se va a perder. En ámbar y con un filo a la
   izquierda, que es el mismo tratamiento que el vencimiento de una oferta:
   las dos dicen lo mismo —esto tiene fecha y se te está por pasar— y no hay
   motivo para que se vean distinto. No lleva fondo: es una nota, no una
   alarma, y el panel entero ya es una superficie. */
.nota-mercado--aviso {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--warn);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   DÓNDE TE FALTA GENTE
   --------------------------------------------------------------------------
   El bloque que convierte la lista en una decisión. Cada línea dice cuántos
   tenés, cuántos hacen falta y quién es el más flojo de los que juegan: es la
   respuesta a «¿a quién estoy buscando?».
   -------------------------------------------------------------------------- */

.huecos { display: grid; gap: var(--sp-3); }

.hueco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.hueco__n {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.hueco__pide { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

.hueco__peor {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.hueco__peor strong { color: var(--text-secondary); }

/* Falta gente de verdad: es lo único de este panel que grita. */
.hueco__falta {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warn);
}

.once-lista { display: grid; gap: 1px; }

.fila-once {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 22px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.fila-once__rol { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); color: var(--text-muted); }
.fila-once__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-once__nivel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }

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

@media (max-width: 900px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .mercado { grid-template-columns: 1fr; }
  .mercado__lista, .mercado__estado { overflow: visible; min-height: auto; }
  .mercado__lista .table-scroll { flex: 0 0 auto; }
  /* Primero lo que se decide, después la lista con la que se ejecuta. */
  .mercado__estado { order: -1; }
}

/* --------------------------------------------------------------------------
   LAS OFERTAS POR LOS TUYOS
   --------------------------------------------------------------------------
   La única pieza de todo el juego que PIDE una respuesta, así que es la única
   que se dibuja como una tarjeta con borde propio en vez de una fila más de
   una lista. El acento no es decoración: es lo que la separa del panel de
   información que tiene debajo.

   Cero tokens nuevos, como el resto de la pantalla.
   -------------------------------------------------------------------------- */

/* UNA COLUMNA EN EL PANEL, VARIAS EN UNA CARD. Es la tercera vez que aparece la
   misma propiedad del sistema Tile → Card: una pieza pensada para una columna
   de 320 px se estira cuando su contenido se muda a una card de 1.120. Con las
   otras dos alcanzó un techo de ancho; acá no, porque estas tarjetas están
   para compararse de un vistazo y un techo dejaría media card vacía con la
   lista rodando al lado. Se reparten en columnas, y entonces los ocho clubes
   entran juntos, que es exactamente lo que la card vino a arreglar.

   El `min()` no es adorno: con `minmax(20rem, 1fr)` a secas, un contenedor más
   angosto que 20rem se lleva una pista de 20rem igual y desborda — y el panel
   del mercado, que comparte esta clase, mide menos que eso. Con el `min()` la
   pista nunca pide más que el sitio que hay, así que allá sigue siendo una
   columna sola, como siempre. */
.ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--sp-2);
  align-content: start;
}

.oferta {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.oferta__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Y PUEDE ENCOGERSE. Sin esto la cabecera pide siempre el ancho entero del
     nombre del club en versalitas más el monto —215 px— y ése pasa a ser el
     ancho mínimo de la tarjeta ENTERA: en una columna más angosta que eso, el
     panel abría una barra horizontal y cortaba las ocho tarjetas por la mitad,
     con el monto del lado de afuera. El `min-width: 0` de `.team` no alcanza:
     es el de adentro, y el que fija el piso es este renglón. Con el piso
     liberado, `.team__nombre` hace lo que sabe hacer —recortarse con puntos
     suspensivos— y no hay barra. Misma decisión que LA TABLA NO SE VA DE LA
     TARJETA en `inicio.css`. */
  min-width: 0;
}

/* El escudo y el nombre viven en el MISMO elemento —`escudo()` devuelve la
   imagen y el nombre va pegado detrás—, así que el `gap` de `.oferta__cab`
   cae entre el nombre y el monto y acá adentro no caía ninguno: el dibujo y
   la primera letra quedaban a cero píxeles, y en versalitas con tracking eso
   no se lee como «juntos», se lee como «encimados».

   La forma es la del resto del juego: `.team` pone el flex, el aire y el
   `min-width: 0`, y `.team__nombre` es el único que sabe recortarse — un texto
   suelto dentro de un flex es una caja anónima y `text-overflow` no le llega,
   que es la razón por la que ese span existe en `app.css`. Acá queda sólo lo
   que es de esta tarjeta: la tipografía. */
.oferta__club {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.oferta__club .crest { flex: none; }

/* QUÉ TE ESTÁN PROPONIENDO, en la cabecera y al lado del club. Desde que la
   estantería mezcla las dos clases —te lo compran o te lo piden prestado— el
   número de al lado significa dos cosas distintas: un pase o seis meses de
   alquiler. Sin este rótulo, US$ 643k por un titular se lee como una oferta
   ridícula en vez de como lo que es, el cargo de una cesión.

   LA COMPRA LLEVA EL ACENTO Y EL PRÉSTAMO NO, y ésa es toda la jerarquía que
   hace falta: una es definitiva y la otra vuelve en junio. El ámbar no se usa
   acá aunque estuviera libre — es el color del plazo, dos renglones más abajo,
   y repetirlo arriba haría que el plazo dejara de saltar. */
.oferta__tipo {
  flex: none;
  padding: 1px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.oferta__tipo[data-tipo='compra'] { background: var(--accent-wash); color: var(--accent-texto); }
.oferta__tipo[data-tipo='prestamo'] { background: var(--bg-hover); color: var(--text-secondary); }

/* El monto a la derecha y en acento: es el número por el que se abre la
   tarjeta, y tiene que poder leerse sin leer nada más. Eso estaba escrito acá
   desde el principio y el color decía lo contrario: en `--accent` daba 2,68:1
   sobre la tarjeta. Va en `--accent-texto`, que es el violeta que sí escribe. */
.oferta__monto {
  margin-left: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oferta__quien { display: grid; gap: 1px; }

.oferta__nota {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* El plazo en su propia línea y en ámbar: es lo que convierte la tarjeta en
   una decisión con fecha y no en un aviso que espera. */
.oferta__plazo {
  display: block;
  margin-top: 2px;
  color: var(--warn);
}

/* El que vuelve a la carga. En cal y no en ámbar: el ámbar es del plazo, que
   te apura, y esto es lo contrario — una buena noticia con la que negociar.
   Va arriba del plazo porque es lo que cambió desde la última vez que miraste
   esta tarjeta. */
.oferta__insiste {
  display: block;
  margin-top: 2px;
  color: var(--good);
}

/* El pacto: el mercado está cerrado y esto no se cobra hoy. En violeta, que es
   el color de lo que responde al dedo, porque lo que dice es exactamente qué
   pasa si apretás. */
.oferta__pacto {
  display: block;
  margin-top: 2px;
  color: var(--accent);
}

.oferta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.oferta__acciones .action { flex: 1 1 auto; justify-content: center; }

/* ==========================================================================
   EL RESUMEN DE OFICINA
   --------------------------------------------------------------------------
   Cuatro cifras del mismo tamaño no dicen cuál importa. Acá importa una —la
   plata, que decide todo lo demás— así que se dice grande y una vez, y los
   otros tres datos pasan a ser el renglón que un secretario diría al
   entregarla. Es la misma voz de marcador que usa el resto del juego para el
   número que se lee de lejos.
   ========================================================================== */
.oficina {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-row);
  border-radius: var(--r-md);
}
.oficina__plata {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0;
}
.oficina__cifra {
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.oficina__linea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.oficina__linea strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* LA BARRA DE GASTO, leída de la card de Contratación de FM26 —cada línea de
   presupuesto lleva a la derecha una barra sombreada con lo gastado sobre lo
   disponible—. Acá va debajo y no al costado: la cifra de la caja es la voz de
   marcador de esta tarjeta y una barra a su lado le pelea el renglón.

   Tres píxeles de alto y sin rótulo propio: no es un medidor que se consulta,
   es el trazo que dice de un vistazo si queda mucho o poco. El pie de abajo
   pone las dos cifras, que es donde se leen. */
.gasto { display: grid; gap: var(--sp-3); }
.gasto__barra {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  overflow: hidden;
}
/* NEUTRA, y esto es la Regla del Dedo. La primera versión salió en `--accent` y
   estaba mal: el violeta es de lo que responde al dedo y nada más, y una barra
   de gasto no se toca. Va en `--text-muted`, que es lo que usa `.barra--ancha`
   —la barra de cantidad del resto del juego— cuando el dato no tiene banda.

   Y NO SE PONE ÁMBAR AL LLENARSE, que fue lo siguiente que se pensó: gastar el
   presupuesto es lo que hay que hacer con el presupuesto. Teñir la barra al 80 %
   sería el juego opinando que gastar está mal, y no opina eso — la tarjeta de al
   lado avisa de lo contrario, de la caja que se pierde sin usar. */
.gasto__lleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-muted);
}
.gasto__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.gasto__pie strong { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   LA FILA DE UN CONTRATO QUE SE ACABA
   --------------------------------------------------------------------------
   Dos renglones: quién arriba, y debajo las cuatro cosas que se preguntan
   antes de sentarse —cuándo se le termina, cuánto pide, qué tolera y qué
   fracción de su propio precio cuesta conservarlo—. En un solo renglón no
   entran, y en una tabla de seis columnas se leerían de arriba abajo cuando lo
   que se compara es un futbolista contra el siguiente, no un dato contra otro.
   ========================================================================== */
.contrato {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .contrato:hover { background: var(--bg-hover); }
}
/* QUIÉN ES: el nombre y, debajo, la edad y el puesto escrito. Es el segundo
   renglón de las dos pastillas apiladas de FM26 sin las pastillas —catorce
   renglones con dos rellenos cada uno le ganarían al nivel y a la cifra, que es
   lo que se mira—. El sub va un escalón más abajo en tamaño y en tinta: quien
   barre la pila lee apellidos, y quien se detiene en uno lee la edad. */
.contrato__quien { display: grid; min-width: 0; gap: 1px; }
.contrato__nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.contrato__sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* El que se va en junio lleva la marca en el borde del renglón y no en el
   fondo: el fondo ya lo usa el hover, y dos capas de color en la misma caja se
   pelean. */
/* Y la de la palabra dada iba en `var(--amber)`, que NO EXISTE: la familia son
   `--amber-300/400/500` y el token con significado es `--warn`. Un `box-shadow`
   con una variable que no está es una declaración inválida y se descarta
   ENTERA, así que el renglón prometido no llevaba ninguna marca — y si además
   era urgente, se quedaba con la banda roja de arriba, que dice otra cosa. */
.contrato--urge { box-shadow: inset 2px 0 0 var(--danger); }
.contrato--prometida { box-shadow: inset 2px 0 0 var(--warn); }

.contrato__pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding-left: 2.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.contrato__pie strong { color: var(--text-secondary); }
.contrato__cuando[data-band='bad'] { color: var(--danger); }

/* EL RELOJ. DOS estados y no los tres que parecía: se va en junio, o le queda
   un año. El verde de FM26 —«le queda tiempo»— no puede ocurrir acá, porque la
   pila sólo trae contratos de un año o menos; está escrito en el guion, al lado
   de la marca. Se pinta el ICONO y no el texto:
   el texto ya dice la fecha y pintarlo entero de verde convertiría una fila
   tranquila en un aviso. La arcilla del urgente sigue viniendo de `data-band`,
   que además tiñe la palabra — ahí sí, porque ahí sí es un aviso. */
.contrato__cuando { display: inline-flex; align-items: center; gap: var(--sp-2); }
.contrato__cuando[data-reloj='uno'] .i { color: var(--warn); }
.contrato__cuando[data-reloj='ya'] .i { color: var(--danger); }
/* Lo que tolera, con la misma banda que la mesa: verde el que firma lo que le
   pongas, ámbar el que escucha con límites, arcilla el que no se deja
   encerrar. La palabra va siempre, que es la regla del número al lado. */
.contrato__pret[data-banda='si'] { color: var(--good); }
.contrato__pret[data-banda='quiza'] { color: var(--warn); }
.contrato__pret[data-banda='no'] { color: var(--danger); }
.contrato__razon[data-band='good'] { color: var(--good); }
.contrato__razon[data-band='ok'] { color: var(--warn); }
.contrato__razon[data-band='bad'] { color: var(--danger); }

/* --------------------------------------------------------------------------
   LOS PASES DEL MUNDO
   --------------------------------------------------------------------------
   La pantalla nueva del área —`pases.html`— y sus estilos viven acá y no en una
   hoja propia por lo mismo que el resto: ésta es la hoja del mercado y esa
   pantalla ya la carga. Son cuatro reglas; una hoja nueva para cuatro reglas es
   un archivo más que mantener y otra petición que el navegador hace.

   LOS DOS MANDOS SON UNA FILA Y SE PARTEN SOLOS. En la compu la ventana y el
   país entran al lado del otro; en un teléfono el desplegable de países pide su
   renglón —los nombres largos no entran en media fila— y `wrap` lo baja sin que
   nadie tenga que medir el corte.
   -------------------------------------------------------------------------- */

/* EL ALTO LO MANDA EL `body` DE ESTA HOJA, y eso no es gratis para una
   pantalla que no es el mercado. Arriba de todo, `mercado.css` le pone al
   `body` el alto de la ventana y `overflow: hidden` —lo necesita la rejilla de
   dos columnas, que no scrollea la página sino cada columna— y `pases.html`
   carga esta hoja, así que se lo come. Sin estas tres reglas, la tabla de
   ciento cuarenta y ocho pases se dibujaba entera y el que la mira no podía
   llegar a la fila veinte: no había scroll en ningún lado.

   Es la misma solución que usa `.mercado__lista`: la página no scrollea, el
   contenedor de la tabla sí. Ver `[[las-clases-de-otra-pantalla]]` — un `body`
   de otra pantalla es lo más caro que se puede heredar. */
/* DOS COLUMNAS IGUALES, y la placa cruzando las dos.
   --------------------------------------------------------------------------
   Empezó con la lista ancha y un costado de 340 —la forma del resto del área—
   y acá esa forma estaba mal por una razón que sólo se ve con el mercado
   todavía sin correr: la caja de la izquierda quedaba siendo un rectángulo
   VACÍO del alto de la pantalla con una cabecera de columnas arriba, y la
   derecha, que era la que tenía las cuarenta filas, apretaba su título en dos
   renglones y cortaba los nombres largos.

   Las dos mitades de esta pantalla no son una lista y su contexto: son dos
   listas —lo que pasó y lo que va a pasar— y pesan lo mismo. Con la mitad de
   1.440 cada una, la de la derecha deja de cortar nada y la de la izquierda
   deja de ser un vacío que domina la pantalla.

   La placa va en su propia fila y cruza las dos columnas: es la noticia de la
   pantalla y no de una de sus mitades. */
.pases {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* NO SON EXACTAMENTE IGUALES: la tabla pide seis columnas —dos de ellas con
     nombre de club— y la lista, cuatro. Medido a 1.440 con las dos al 50 %: la
     tabla necesitaba 1.022 px y tenía 631, así que «Llega a» quedaba cortada a
     mitad del nombre. Con 1,35 contra 1 la tabla respira y la lista sigue
     entrando sin partir una línea. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* CADA UNA EN SU FILA, DICHO A MANO, y no por el orden en que están escritas.
   La placa se ESCONDE cuando el mercado todavía no corrió —`hidden`— y un
   elemento escondido no genera caja: el acomodado automático del grid las
   corría a todas una fila para arriba, así que las dos tarjetas caían en la
   fila `auto` de la placa y se quedaban con 136 px de los 563 que tenían
   disponibles. Con la fila declarada, esconder la placa deja su fila en cero y
   las dos cajas siguen llevándose el alto. */
.pases > .placa { grid-column: 1 / -1; grid-row: 1; }
.pases__lista { grid-row: 2; }
.pases__lado { grid-row: 2; }

.pases__lista { min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.pases .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

/* El costado es su tarjeta y lo que se desplaza es la lista de adentro: los
   clubes que salen al mercado son ciento cincuenta en un país grande. */
.pases__lado { min-height: 0; display: flex; }
.pases__resumen-caja { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
/* SIN SCROLLER PROPIO (21/9/2026). Tenía `flex: 1 1 0` con `overflow-y: auto`
   y `overscroll-behavior: contain`, y escondía el QUINTO de sus cinco
   rankings: medido, la caja en 833 px con 932 de contenido y «Dónde se movió
   más plata» entero afuera. Cinco bloques iguales y uno invisible salvo que
   descubras que esa caja rueda — y `contain` hacía además que la rueda no
   pasara a la página, o sea que encima de ese panel no se movía nada.

   Son noventa y nueve píxeles. No hay nada que ganar escondiéndolos: la
   página se baja desde hoy, y un resumen que oculta una de sus cinco partes no
   es un resumen. */
.pases__resumen-caja .resumen-mercado { flex: 0 0 auto; }

/* LA VENTANA, Y NADA MÁS. Acá había una pastilla con un desplegable de países
   —el mando de la pantalla— y se fue con él: lo que queda es el segmentado del
   sistema, que no se estira porque en una columna flex todo hijo se estira, y
   una cápsula de dos botones de novecientos píxeles de ancho no es un control,
   es una barra. */
.pases .segmented { align-self: flex-start; }

/* ══ EL RENGLÓN QUE PARTE LA TABLA EN DOS ══
   La tabla lleva lo hecho arriba y lo que se viene abajo, y entre los dos hace
   falta decir cuál es cuál. No es una cabecera de columnas —ésas ya están, y
   son las mismas para los dos bloques— sino el rótulo de una sección: va con el
   cuerpo y el tono de las etiquetas del sistema, pegajoso al desplazarse, para
   que el que baja por los mil cuatrocientos pases sepa siempre en cuál de los
   dos está parado. */
.pases__corte th {
  padding: var(--sp-6) var(--sp-3) var(--sp-2);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* NO SE PEGA ARRIBA, aunque la tentación de un encabezado de sección es ésa: la
   cabecera de columnas de `.table-scroll` YA es `sticky` en `top: 0`, y dos
   pegajosos a la misma altura terminan uno tapando al otro —el de más abajo en
   el documento gana, así que el corte borraría los nombres de las columnas—.
   Lo que lo hace visible es el aire de arriba y la línea, que es como este
   juego separa sin gastar color. */
.pases__corte:not(:first-child) th { border-top: 1px solid var(--line); }

/* El rótulo y su cuenta, separados: qué bloque es, y cuántas filas tiene. */
.pases__corte th > span:first-child { margin-right: var(--sp-3); }
.pases__corte .label-frase { text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* ══ LA COLUMNA DE LA PLATA TIENE QUE ENTRAR ══
   La tabla se repartía sola y pedía 1.007 px en un hueco de 731: a 1.440 —el
   portátil más común— «Operación» quedaba ENTERA fuera de la caja, y con ella
   la única cifra por la que se lee un mercado. No se veía como un error sino
   como una tabla de cinco columnas, porque en un Mac la barra de desplazamiento
   horizontal no se dibuja hasta que alguien la empuja (ver `la-barra-oculta-es-de-mac`).

   Ensanchar la columna izquierda no alcanzaba: para los 1.007 px había que
   darle tres cuartos de la pantalla y dejar el resumen sin sitio para sus
   barras. Lo que sobra está adentro de la tabla: los dos nombres de club se
   llevaban 560 px entre los dos, pidiendo cada uno el ancho de «Borussia
   Mönchengladbach» aunque esa fila sea una de mil quinientas.

   Así que el reparto se declara en vez de negociarse. Las tres columnas de
   ancho fijo —puesto, nivel y operación— se quedan con lo suyo, y las tres de
   texto se reparten lo que sobra y cortan con puntos suspensivos, que es una
   verdad dicha a tiempo: «Borussia Mönchen…» se lee, y una columna que no está
   no se lee. */
.pases .data-table { table-layout: fixed; width: 100%; }
.pases .data-table thead th:nth-child(1) { width: 3.5rem; }
.pases .data-table thead th:nth-child(3) { width: 3.5rem; }
.pases .data-table thead th:nth-child(6) { width: 9.5rem; }

.pases .data-table td.u-txt,
.pases .team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El escudo pegado al nombre del club, como en toda celda que nombra a uno. El
   `min-width` es lo que deja que el nombre ceda: sin él, un `inline-flex` se
   planta en el ancho de su contenido y el recorte no llega nunca. */
.pases .team { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; }

/* TU CLUB EN LA TABLA DEL MUNDO. El naranja de pertenencia —el mismo con el que
   la tabla de posiciones y el sorteo dicen cuál de estas veinte filas sos vos—
   sobre las operaciones que hiciste. No es un estado ni un valor: dice de quién
   es la fila, que es la tercera clase de cosa que el color del sistema
   distingue. Y es lo que permite que tus pases convivan con los del resto en
   una sola lista en vez de tener tabla aparte. */
.pases tr[data-mio] td { color: var(--tuyo); }
.pases tr[data-mio] .team span { color: var(--tuyo); }

/* La operación, con la gramática de un portal de fichajes: el importe en cifra
   y lo que no es una compra dicho con su palabra, en cal. Un préstamo y un
   pase libre no son cifras cero: son otra clase de operación, y ponerles «US$
   0» los contaría como si algo hubiera costado nada. */
.u-operacion { white-space: nowrap; }
.op-monto { font-variant-numeric: tabular-nums; }
.op-tipo {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-tipo[data-op='libre'] { color: var(--warn); }
.u-cuando { color: var(--text-muted); white-space: nowrap; font-size: var(--fs-xs); }


/* --------------------------------------------------------------------------
   LA TIRA DE ARRIBA
   --------------------------------------------------------------------------
   Lo único de esta pantalla que no es una fila de lista, y por eso existe: un
   mercado tiene NOTICIAS y una tabla ordenada por precio las dice en sus
   primeras filas con el mismo cuerpo de letra que la número cuarenta. Eso no es
   jerarquía, es un listado.

   SON TRES Y NO UNA, desde el 13/9/2026. Con una sola pieza el ancho sobraba a
   ojo —un nombre, dos escudos y una cifra en 1.400 px— y lo que faltaba era
   justamente lo que un portal pone arriba de todo: la tira de rumores.

   Cada pieza va vestida con los colores del club que ficha, que es el recurso
   que la mesa de negociación y la bienvenida ya usan: `coloresDe()` deja
   `--club-fondo`, `--club-franja` y `--club-tinta` en el elemento, y la tinta
   viene como `var()` y no como hexadecimal, así que lo que pinta es literalmente
   el token.

   Y NO LLEVA DEGRADADO, aunque la tentación de un héroe es ésa. El sistema
   tiene UNO en todo el producto y es el botón que hace pasar el tiempo; un
   segundo lo dejaría de señalar. Lo que da la profundidad es el hairline del
   segundo color del club sobre el plano del primero — ver abajo.
   -------------------------------------------------------------------------- */

/* EL CONTENEDOR NO SE PINTA: sólo apila el rótulo y las tres piezas. El color
   es de cada pieza, porque cada una es de un club distinto. */
.placa { display: grid; gap: var(--sp-3); }

.placa__tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-4);
}

.placa__pieza {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--club-fondo, var(--bg-raised));
  color: var(--club-tinta, var(--text-primary));
}

/* EL SEGUNDO COLOR DEL CLUB VA EN UN HAIRLINE, NO EN UNA FRANJA.
   --------------------------------------------------------------------------
   Acá había un `border-left: 4px` con el color de la franja, y estaba mal por
   dos reglas de este proyecto y no por gusto: «hairlines en vez de cajas y
   sombras, un solo píxel de línea», y sobre todo «el color se gasta en RELLENO
   pleno, no en línea ni en subrayado». El relleno ya lo hace el fondo del club,
   que es lo que dice de quién es la pieza; la franja de cuatro píxeles no
   agregaba identidad, agregaba un borde de color.

   Lo que hace falta de verdad es que Boca se vea azul Y ORO —el segundo color
   es la mitad de una identidad— y eso lo dice una línea de un píxel arriba, que
   es el grosor con el que este juego dibuja todo lo demás. */
.placa__pieza { border-top: 1px solid var(--club-franja, var(--line-strong)); }

/* El rótulo dice qué clase de noticia es y va UNA vez, afuera de las piezas:
   repetido en cada una sería el mismo renglón dicho tres veces. En cal del
   sistema —no del club— porque ya no vive sobre ningún color. */
.placa__rotulo {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.placa__quien { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }

/* El nombre es lo más grande de la pantalla después del título del panel: es la
   noticia. Va con el ancho estrecho de la cara de display —el mismo que el
   marcador y la portada— que es lo que hace que un nombre largo entre sin
   bajar de cuerpo. */
.placa__nombre {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.15;
  font-stretch: 88%;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SIN OPACIDAD, Y NO ES UNA PREFERENCIA: ACÁ NINGUNA ES SEGURA.
   --------------------------------------------------------------------------
   Este renglón vive dentro de `.placa__pieza`, que se viste del club —`color:
   var(--club-tinta)` sobre `background: var(--club-fondo)`—, y esa tinta la
   elige `legible()`, que devuelve EN CUANTO alcanza `CONTRASTE_MINIMO = 4.5`.
   Eso **no** quiere decir que todos los clubes queden al filo —Tigre da 8,89 y
   aguanta— pero sí que el PISO del sistema es 4,50:1 exacto, medido sobre los
   1.673: hay clubes sin un punto de margen, así que **no existe un alfa seguro**.
   Cuántos caen a cada uno ya no se lee del código y hay que correrlo.

   Medido con `herramientas/opacidad-sobre-club.mjs`, que es lo que hace que
   esto no sea una opinión:

       alfa    clubes bajo 4,5:1     (de 1.673, y a tinta plena son CERO)
       0,99      45
       0,95     277
       0,90     423
       0,85     503
       0,78     646   ← lo que había acá

   El peor era Defensores de Cambaceres: 3,07:1 con la opacidad puesta, 4,54 sin
   ella. No hay un alfa que se salve, así que la jerarquía la hacen el CUERPO y
   el peso —`--fs-xs` contra el `--fs-md` en 700 del nombre—, que no le deben
   nada al contraste. Lo encontró el barrido de contraste el día que aprendió a
   componer la opacidad: hasta entonces medía el color declarado y esta pantalla
   salía «limpia, cero hallazgos». */
.placa__sub { font-size: var(--fs-xs); white-space: nowrap; }

/* La cifra cierra la pieza por la derecha y no compite con el nombre: la
   noticia es QUIÉN, y cuánto sale es la consecuencia. */
.placa__cifra {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Los escudos de la tira son los grandes de la pantalla: un club se reconoce
   por su escudo antes que por su nombre, y acá hay sitio para que se vea. Con
   tres piezas en la misma fila bajan de 44 a 34, que es lo que deja entrar el
   nombre y la cifra sin recortar. */
.placa .crest { width: 34px; height: 34px; --halo: 0.61px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   EL MERCADO EN UNA VENTANA ANGOSTA
   --------------------------------------------------------------------------
   Debajo de 900 las dos columnas se sueltan en una, como el resto del área: la
   tabla de pases arriba y el resumen del mercado debajo, cada uno con su alto.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* La página vuelve a desplazarse: con una columna el alto de la ventana deja
     de alcanzar, y esconderlo escondería contenido. */
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .pases {
    /* `minmax(0, 1fr)` Y NO `1fr`: un `1fr` pelado tiene mínimo `auto`, así que
       la columna crece hasta lo que mida la tabla —que en un teléfono pide
       novecientos y pico de píxeles— y la pantalla entera se va de ancho en vez
       de que se desplace la tabla adentro de su caja. El reventón se veía en la
       tira de arriba, que cruza las dos columnas y salía del doble de ancha que
       el teléfono. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  /* Y LAS DOS CAJAS VUELVEN A APILARSE, que con una sola columna no pasaba
     solo: las dos tienen `grid-row: 2` dicho a mano para la ventana ancha, y
     dos elementos en la MISMA fila de una rejilla de una columna no se
     superponen — el acomodado automático le inventa una segunda columna a la
     segunda. El resultado era un teléfono con la pantalla el doble de ancha
     que el teléfono y el resumen colgando afuera, a la derecha. */
  .pases__lista, .pases__lado { grid-row: auto; grid-column: 1; }

  .pases__lista, .pases__lado, .pases__resumen-caja { overflow: visible; min-height: auto; }
  .pases .table-scroll { flex: 0 0 auto; }

  /* EL REPARTO DECLARADO ES DE LA VENTANA ANCHA. En un teléfono, repartir
     seiscientos píxeles entre tres columnas de texto deja «Manchester Unit…»
     en «M…» y la tabla deja de decir nada. Acá la tabla vuelve a pedir lo que
     necesita y lo que se desplaza es ella, de costado, adentro de su caja:
     un nombre cortado en la primera letra no se arregla con un puntito. */
  .pases .data-table { table-layout: auto; width: auto; }
  .pases .data-table td.u-txt,
  .pases .team span { overflow: visible; text-overflow: clip; }
  /* Ya no hay scroller que apagar acá: la regla de arriba se lo sacó para
     todas las ventanas. Se deja la línea vacía fuera. */
}

/* --------------------------------------------------------------------------
   EL MERCADO EN NÚMEROS
   --------------------------------------------------------------------------
   La mitad derecha. Dos cifras arriba, un renglón que las desarma y dos
   rankings con su barra: cuánto se movió, quiénes gastaron y dónde.

   LAS CIFRAS SON EL CONTENIDO Y NO UN ADORNO, y por eso van grandes: esta
   tarjeta contesta una pregunta del CONJUNTO —qué tan grande fue este mercado—
   que la tabla de al lado no puede contestar, porque una lista ordenada por
   precio muestra sus filas de arriba y nunca el total. Es la única superficie
   del juego donde un número grande es el dato y no la decoración de un dato.
   -------------------------------------------------------------------------- */

.resumen-mercado { display: grid; gap: var(--sp-5); align-content: start; }

.cifras { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.cifras__par { display: grid; gap: 1px; margin: 0; }
.cifras__n {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  font-stretch: 88%;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ranking { display: grid; gap: var(--sp-2); }
.ranking__titulo { color: var(--text-muted); margin-bottom: var(--sp-1); }

/* Cuatro columnas: escudo, nombre, barra y monto. El nombre cede y la barra
   toma lo que sobra, que es lo que hace que las cinco barras se comparen entre
   sí y no cada una con su propio renglón. */
.ranking__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 26px;
}
.ranking__fila .crest { width: 20px; height: 20px; --halo: 0.36px; }

.ranking__quien {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La barra va contra el PRIMERO del ranking y no contra el total: lo que la
   lista contesta es quién gastó más que quién. Medida contra la suma de los
   sesenta países darían cinco barras de tres píxeles. */
.ranking__barra {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
  position: relative;
}
.ranking__barra::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--parte) * 1%);
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.7;
}

.ranking__monto {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ══ LA SILUETA DEL MERCADO, EN COLUMNAS ══
   El único gráfico del juego que no es una barra en un renglón, y existe porque
   la pregunta que contesta no cabe en una lista: cómo se REPARTEN las
   operaciones por tamaño. Mil quinientos pases de un palo y medio no son el
   mismo mercado que trescientos de veinte, y las dos cifras de arriba —cuánto y
   cuántos— dan el mismo número en los dos casos.

   Una serie sola. Ni leyenda ni color que identifique nada: el violeta es el
   mismo relleno de la barra del ranking, diciendo lo mismo que ahí —tamaño— y
   la cuenta va escrita ARRIBA de cada columna, que es lo que la deja leerse sin
   distinguir un tono.

   Las columnas se apoyan en una línea de base compartida y van redondeadas
   arriba nada más: una columna redondeada abajo flota, y lo que se está
   comparando es exactamente dónde empieza cada una. */
.columnas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
}

.columnas__col { display: grid; gap: var(--sp-1); justify-items: center; }

.columnas__n {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* EL ALTO ES EL DATO. `--parte` llega en porcentaje del más alto y se lleva los
   76 px del riel; el mínimo de 3 px es para que la banda de dos operaciones
   siga siendo una columna y no un renglón vacío — una columna de cero píxeles
   se lee como una banda que no existe, y existe. */
.columnas__barra {
  width: 100%;
  height: max(3px, calc(var(--parte) * 0.76px));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--accent);
  opacity: 0.7;
}

/* El rótulo de abajo es el eje: en cal, y más chico que la cifra, porque lo que
   se compara son las alturas y no las palabras. */
.columnas__rot {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: var(--sp-1);
}

/* UN RUMOR NO SE VE COMO UN HECHO. La fila de lo que todavía no pasó va en cal
   —el mismo tono con el que esta interfaz dice «esto es secundario»— y su
   operación lleva la palabra en vez de la cifra sola. Mezclar un pase cerrado y
   una intención con la misma tipografía sería la peor forma de llenar una
   pantalla: el DT tomaría por hecho algo que todavía se puede caer. */
.pases tr[data-futuro] td { color: var(--text-muted); }
.op-tipo[data-op='futuro'] { color: var(--text-secondary); text-transform: none; letter-spacing: 0; }

/* La fila que pide más pases. El botón va al PRINCIPIO y no al centro: en el
   teléfono la tabla mide 724 de ancho y rueda de costado, así que centrado
   quedaba fuera de la vista (medido: centrado caía en el píxel 362 de 375). */
.pases__mas td { padding: var(--sp-5) var(--sp-4); text-align: start; }
.pases__mas-boton { display: inline-flex; align-items: baseline; gap: var(--sp-3); }

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

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

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

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

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

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

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

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

.tile { cursor: pointer; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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