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

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

/* EL CONTRATO QUE SE ACABA, marcado. Es el único valor de la columna que no
   habla del futbolista sino de la OPORTUNIDAD —a éste su club lo suelta por lo
   que sea—, y en gris, en una tabla de veinticuatro filas, había que ir
   leyéndolos de a uno. El ámbar es el color con el que el sistema avisa, no el
   que celebra: esto no es una buena noticia sobre el jugador, es un plazo que
   se vence. */
.data-table td.contrato--acaba { color: var(--warn); }
.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; }

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