/* propuestas.css */
/* ==========================================================================
   El Camino DT — Propuestas
   --------------------------------------------------------------------------
   Cero tokens nuevos. La pantalla entera usa las clases del mercado —la tabla,
   la tarjeta de club, el panel—; lo propio son dos cosas que no existían en
   ninguna otra parte: la lista del canje, que es una tabla dentro de un
   diálogo, y la forma del interés, que es el encabezado de una lista que no
   se puede mostrar entera.
   ========================================================================== */

/* ==========================================================================
   LA MESA DE NEGOCIACIÓN
   --------------------------------------------------------------------------
   La pantalla entera, y no una franja arriba de una tabla. El porqué —qué era
   lo muerto y por qué moverlo no alcanzaba— está escrito en el marcado de
   `propuestas.html`, al lado del `<main>`.

   DOS COLUMNAS Y LA ANCHA ES LA DE LAS PROPUESTAS, al revés que en el mercado:
   allá la tabla manda y el panel acompaña, y acá lo que manda es lo que te
   están preguntando. El lado derecho no es un resumen de la izquierda — es lo
   que hace falta saber ANTES de contestar: con cuánta plata contás y la puerta
   para salir a ofrecer vos.
   ========================================================================== */
body {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-ventana);
  overflow: auto;
}

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

/* La columna de las propuestas rueda por dentro, como la tabla del mercado:
   la página no scrollea, scrollea la lista. Así el lado derecho —la plata y la
   puerta— no se va de la pantalla mientras leés la cuarta propuesta. */
.mesa__lista { gap: var(--sp-4); min-height: 0; }
.mesa__propuestas {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* Y CUANDO NO HAY NINGUNA, EL VACÍO SE PLANTA EN EL MEDIO. Con la lista
   alineada arriba —que es lo correcto cuando hay tarjetas— una sola línea de
   texto quedaba pegada al ángulo de una caja de cuatrocientos píxeles de alto,
   y eso no se lee como «no hay propuestas»: se lee como una pantalla a medio
   cargar. Centrada y con la columna corta, es una respuesta.

   El `:has()` es lo que permite que la MISMA caja tenga los dos comportamientos
   sin que el guion le ponga una clase: con tarjetas adentro, arriba; con el
   cartel, en el medio. */
.mesa__propuestas:has(> .stub) {
  align-content: center;
  justify-items: center;
}
.mesa__propuestas > .stub {
  max-width: 46ch;
  text-align: center;
}

.mesa__lado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mesa__lado > .tarjeta { flex: 0 0 auto; }

.mesa__puerta-texto {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.mesa__puerta .action { width: 100%; }

/* La tabla vieja, adentro del diálogo: con techo, porque un plantel de treinta
   y cuatro en una caja sin tope empuja el diálogo fuera de la pantalla. */
.mesa__tabla { max-height: 46vh; overflow: auto; margin-bottom: var(--sp-6); }
.mesa__dlg .interes { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   UNA PROPUESTA
   --------------------------------------------------------------------------
   Cuatro bloques y cada uno contesta una pregunta distinta: quién llama y
   cuánto pone, quién es el futbolista PARA VOS, qué te queda en el puesto si
   se va, y hasta cuándo tenés para decidir.

   --------------------------------------------------------------------------
   Y EL ACENTO SE USA UNA VEZ POR TARJETA
   --------------------------------------------------------------------------
   «Me está haciendo bastante ruido el tema de los colores» —Alberto,
   22/9/2026—, y el ruido se pudo contar. En la pantalla convivían DOCE tonos, y
   la familia violeta hacía cinco trabajos distintos:

     magenta  232,123,249   títulos de panel y pestaña activa
     violeta  194,123,244   el sello Y el monto
     violeta  166,81,236    el borde del botón
     violeta   161,77,230   el MARCO de la tarjeta entera
     ámbar    247,188,69    el plazo

   más el rojo del club en la barra de arriba. El borde de acento lo había
   puesto yo con este argumento: «estas tarjetas son lo único que se pulsa, y el
   violeta es el color de lo que responde al dedo». El argumento estaba dado
   vuelta. Lo que se pulsa es EL BOTÓN, no la tarjeta; enmarcarla en acento hace
   que el botón use el mismo color que su propio marco, que el sello y que la
   cifra — y entonces el acento deja de señalar nada.

   LA REGLA QUE QUEDA, y es la misma que `chrome.css` ya declara para el botón
   del degradado: **el acento se usa una vez y señala lo que hacés**. De ahí
   salen los tres cambios de abajo, y ninguno es una elección de gusto:

     · EL MARCO VA NEUTRO. Una tarjeta es una superficie, no una acción.
     · EL MONTO VA EN BLANCO, como `US$ 8,9M` en el panel de la derecha. Son la
       misma clase de cifra y estaban de dos colores distintos en la misma
       pantalla: eso es lo que se sentía como inconsistencia. Tamaño y peso ya
       la hacen pesar; el tono no agregaba, competía.
     · EL SELLO SE DISTINGUE POR RELLENO Y NO POR TINTA. Compra y préstamo son
       etiquetas, no acciones, así que la diferencia es estructural —uno lleno,
       el otro con filete— y no un segundo violeta.

   Queda: superficie neutra, dato en blanco, UN violeta —el botón— y UN ámbar
   —lo que vence—. El ámbar recién ahí se lee, que es de lo que se trata.
   -------------------------------------------------------------------------- */
.propuesta {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.propuesta__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-hairline);
}

/* EL ESCUDO GRANDE, y es un pedido del 22/9/2026. Estaba en `crest--sm` —17 px—
   que es la medida de un escudo METIDO EN UN RENGLÓN de tabla, al lado de un
   nombre en versalitas. Acá no acompaña a un texto: es quién te está llamando,
   la primera pregunta de la tarjeta, y a diecisiete píxeles no se distingue un
   club de otro. Cincuenta y dos es el alto de las dos líneas que tiene al lado
   —el nombre y la liga— así que la cabecera no crece por ponerlo: se llena. */
.propuesta__escudo {
  flex: none;
  width: 52px;
  height: 52px;
  --halo: 0.94px;
}

.propuesta__quien { display: grid; gap: 2px; min-width: 0; }

/* Y EL NOMBRE DEL CLUB DEJA LAS VERSALITAS. Era una etiqueta de fila —gris, en
   mayúsculas, del tamaño de un rótulo— porque vivía apretado entre un escudo
   chico y una cifra. Con el escudo grande al lado es el titular de la tarjeta,
   y un titular se escribe como un nombre. */
.propuesta__club {
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De dónde viene y cuánto pesa: la liga, el país y si su plantel es más fuerte
   o más flojo que el tuyo. Es lo que dice si al futbolista lo están subiendo o
   bajando de categoría, y no había dónde mirarlo. */
.propuesta__liga {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.propuesta__plata {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

/* Qué te proponen. La compra lleva el acento y el préstamo no: una es
   definitiva y la otra vuelve en junio, y ésa es toda la jerarquía que hace
   falta. El ámbar no se usa acá aunque esté libre — es el color del plazo, al
   pie de la tarjeta, y repetirlo arriba haría que el plazo dejara de saltar. */
.propuesta__sello {
  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;
}
.propuesta[data-tipo='compra'] .propuesta__sello {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.propuesta[data-tipo='prestamo'] .propuesta__sello {
  border: 1px solid var(--line);
  padding: 0 calc(var(--sp-3) - 1px);
  color: var(--text-muted);
}

/* El número por el que se abre la tarjeta, y debajo QUÉ es ese número. Sin la
   segunda línea, US$ 497k al lado de un futbolista que vale 3,8M se lee como
   una oferta ridícula en vez de como el cargo de una cesión. */
.propuesta__monto {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.propuesta__monto-pie {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* LA FICHA DEL FUTBOLISTA, en pares rótulo/valor. Es lo que faltaba para poder
   contestar sin irse de la pantalla: cómo lo usás, hasta cuándo tiene contrato
   y cuánto vale. Tres filas y no diez — lo que entra en la decisión de hoy. */
.propuesta__ficha {
  display: grid;
  gap: 2px;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
}
.propuesta__ficha > div { display: flex; gap: var(--sp-4); align-items: baseline; }
.propuesta__ficha dt {
  flex: none;
  min-width: 7.5rem;
  color: var(--text-muted);
}
.propuesta__ficha dd { margin: 0; min-width: 0; color: var(--text-secondary); }

/* Lo que le pasa al plantel, debajo de lo que queda en el puesto: son la misma
   consecuencia mirada de cerca y de lejos. */
/* Va con el padre adelante y no con `!important`: `.propuesta__hueco p` es una
   clase MÁS un elemento, así que una clase sola pierde. Nombrar al padre empata
   la cuenta por el camino que se puede leer. */
.propuesta__hueco .propuesta__resto {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Las dos mitades de la decisión, lado a lado: quién es y qué te queda. En la
   columna angosta se apilan, que es lo que tienen que hacer — son dos lecturas
   seguidas, no una comparación. */
.propuesta__cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--sp-5);
}

.propuesta__jugador { display: grid; gap: 2px; min-width: 0; }
.propuesta__nombre { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.propuesta__rol {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* LO QUE TE QUEDA EN EL PUESTO, que es el bloque que esta pantalla no tenía y
   es la decisión de verdad. Va en su propia caja y no como un renglón más de
   la nota: es un dato del PLANTEL y no de la propuesta, y mezclarlo con «quiere
   irse» lo dejaría leído como una opinión del que llama. */
.propuesta__hueco {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
}
.propuesta__hueco p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.propuesta__hueco strong { color: var(--text-primary); }
.propuesta__hueco[data-tono='aviso'] p strong { color: var(--warn); }
.propuesta__hueco[data-tono='malo'] p strong { color: var(--danger); }

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

/* El plazo a la izquierda y las acciones a la derecha: lo que te apura y lo
   que hacés al respecto, en el mismo renglón. */
.propuesta__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}
.propuesta__plazo { font-size: var(--fs-xs); color: var(--warn); }
.propuesta__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-left: auto; }

@media (max-width: 900px) {
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
  .mesa { grid-template-columns: 1fr; }
  .mesa__lista, .mesa__lado { overflow: visible; min-height: auto; }
  /* Y LA LISTA DEJA DE SER LA QUE CEDE, que es lo que faltaba y se vio a 375:
     `flex: 1 1 0` le da base CERO y la deja crecer para llenar una caja que
     rueda por dentro. Sin esa caja —acá rueda la página— la tarjeta se quedaba
     con el alto de cero y las tres propuestas salían por debajo, con el panel
     de la plata dibujado ENCIMA de la primera. Medido a 375 antes de subirlo.
     `0 0 auto` es lo que ya hace la tabla del mercado en esta misma anchura, y
     por el mismo motivo. */
  .mesa__propuestas { overflow: visible; flex: 0 0 auto; }
  .propuesta__acciones { margin-left: 0; width: 100%; }
  .propuesta__acciones .action { flex: 1 1 auto; justify-content: center; }

  /* Y LA CABECERA SE PARTE EN DOS RENGLONES. Medido a 375: con el escudo, el
     nombre y el bloque de plata en la misma fila, al nombre del club le
     quedaban unos 140 px y la línea de la liga salía cortada —«LaLiga · España
     · un pl…»— mientras el pie del monto se apilaba en tres renglones contra el
     borde derecho. Son dos bloques de ancho fijo peleando por una fila que no
     da.

     Arriba quién llama, abajo cuánto pone. Y la plata pasa a alinearse a la
     IZQUIERDA: alineada a la derecha en un renglón propio queda flotando sola
     contra el borde, sin nada con qué formar columna. */
  .propuesta__cab { flex-wrap: wrap; row-gap: var(--sp-4); }
  .propuesta__quien { flex: 1 1 0; }
  .propuesta__liga { white-space: normal; }
  .propuesta__plata {
    margin-left: 0;
    width: 100%;
    justify-items: start;
    text-align: left;
  }
  /* El sello al lado del monto y no encima: en un renglón a lo ancho sobra
     sitio de sobra, y apilarlo suma un renglón por nada. */
  .propuesta__plata {
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: var(--sp-4);
  }
  .propuesta__monto-pie { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   LA FORMA DEL INTERÉS
   --------------------------------------------------------------------------
   Tres renglones arriba de las ocho tarjetas: quién está marcado, cuántos
   clubes lo quieren y de qué categorías, y entre cuánto y cuánto ponen. Es el
   único sitio de la pantalla donde se ve que detrás de las ocho hay cincuenta
   y siete, y por eso va ANTES y no al pie: una nota al pie de una lista de
   ocho llega cuando ya creíste que eran ocho.

   No es una tarjeta adentro de la tarjeta —no lleva superficie ni borde—: es
   la entrada del panel. Lo único que la separa de la lista es la línea de
   abajo, que es el mismo hairline con el que se separa todo en el juego.
   -------------------------------------------------------------------------- */
/* Tenía un filete abajo, que era el corte entre el resumen y la lista de
   clubes cuando las dos vivían en la misma tarjeta. Desde que la lista se abre
   en su card, ese filete no separa nada: queda una raya suelta debajo del
   último renglón del tile, y el corte lo dibuja el borde de la placa. */
.interes {
  display: grid;
  gap: var(--sp-2);
}

/* El marcado, en el mismo renglón y con la misma forma con la que lo nombra
   la tabla de la izquierda: puesto, nombre y ficha. Si acá se llamara distinto
   habría que volver a buscarlo en la tabla para saber si es el mismo. */
.interes__quien {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

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

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

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

/* --------------------------------------------------------------------------
   LO QUE DISTINGUE A UNA TARJETA DE LA DE AL LADO
   --------------------------------------------------------------------------
   `.oferta` es del mercado y no se toca: es la misma tarjeta con la que se
   contestan las ofertas por los tuyos. Lo que se le agrega acá son los dos
   renglones que hacen que ocho clubes que buscan el mismo puesto no se lean
   como el mismo club ocho veces — de qué categoría es cada uno y si tiene con
   qué canjear.
   -------------------------------------------------------------------------- */

/* La categoría, en versalitas y pegada arriba de la nota: es una etiqueta de
   sitio, no una frase. Mismo tratamiento que `.pos` y que `.oferta__club`. */
.oferta__meta {
  margin: 0;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Y si es de tu misma categoría, en ámbar: no es un dato más de dónde queda el
   club, es el aviso de que el que se va lo vas a tener enfrente. */
.oferta__rival { color: var(--warn); }

/* EL QUE MÁS PONE, dicho con palabras. Arriba de US$ 10M el juego redondea a
   millones enteros, así que los primeros de la lista pueden mostrar los tres la
   misma cifra aunque no pongan lo mismo: el orden es verdadero y el número no
   alcanza para verlo. En acento porque es la respuesta a la pregunta con la que
   se abre este panel. */
.oferta__mejor { color: var(--accent-texto); }

/* Con qué te pueden canjear. En cal cuando hay con quién —es lo que convierte
   una venta en un refuerzo— y apagado cuando no: ahí el botón tampoco está, y
   el renglón es lo que explica por qué falta. */
.oferta__canje { color: var(--text-disabled); }
/* El nombre y su nivel no se separan, pero eso NO se pide con `nowrap`: un
   nombre entero que no puede partirse fija el ancho mínimo de la tarjeta y
   termina abriendo una barra horizontal en la columna angosta. Lo que no se
   parte es la unión —el espacio duro entre el apellido y el «(87)», que lo
   escribe la pantalla—, así que el renglón sigue partiéndose donde siempre y
   el nivel nunca arranca solo una línea. */
.oferta__canje strong { color: var(--good); }

/* La lista del canje. Es la fila de 22px de las tablas, con las columnas de un
   canje: quién es, cuánto vale, cuánta plata cambia de mano y el botón.
   Scrollea a las diez filas —son las diez mejores de ese club— para que el
   diálogo no crezca más alto que la ventana. */
.canje {
  display: grid;
  gap: 1px;
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--line-hairline);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

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

/* Lo que cambia de mano. Va en Apagado y no en Cal: no es una calificación
   buena, es el precio — y el color de valor está reservado para lo que vale. */
.canje__plata {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* ==========================================================================
   OFRECER A UNO DE LOS TUYOS, REDISEÑADO (9/10/2026, «quedó obsoleta y un poco
   inútil»): la puerta muestra los tres que más pagarían; la ventana es de dos
   columnas —tu plantel a la izquierda, la ficha y los clubes a la derecha— y
   entra entera en la pantalla: cada columna se desplaza sola.
   ========================================================================== */
.puerta__vista { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 6px; }
.puerta__fila { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); transition: background 160ms ease; }
@media (hover: hover) { .puerta__fila:hover { background: rgb(255 255 255 / 0.09); } }
.puerta__fila:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.puerta__quien { display: grid; min-width: 0; line-height: 1.2; }
.puerta__quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-primary); }
.puerta__quien small { font-size: var(--fs-2xs); color: var(--text-muted); }
.puerta__monto { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-texto, var(--accent)); font-size: var(--fs-sm); }

.ofrecer__escudos { display: inline-flex; align-items: center; }
.ofrecer__escudos .crest { width: 20px; height: 20px; object-fit: contain; margin-right: -4px; filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.6)); }
.ofrecer__escudos b { margin-left: 10px; font-variant-numeric: tabular-nums; }

dialog.ofrecer { width: min(1320px, 96vw); max-width: none; height: min(880px, 92vh); max-height: none; padding: 0; display: none; overflow: hidden; }
dialog.ofrecer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ofrecer__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.ofrecer__titulo { margin: 2px 0 4px; font-size: var(--fs-2xl); font-weight: 800; font-stretch: var(--wd-condensed); line-height: 1.05; }
.ofrecer__cerrar { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: var(--text-primary); }
@media (hover: hover) { .ofrecer__cerrar:hover { background: rgb(255 255 255 / 0.16); } }
.ofrecer__cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 0; }
.ofrecer__lista, .ofrecer__detalle { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-6); }
.ofrecer__lista { border-right: 1px solid rgb(255 255 255 / 0.08); }
.ofrecer .mesa__tabla { max-height: none; overflow: visible; margin: 0; }
.ofrecer .convoc__tabla tbody tr { cursor: pointer; transition: background 140ms ease; }
.ofrecer .convoc__tabla tbody tr[aria-current='true'] { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.ofrecer__monto { font-weight: 800; color: var(--text-primary); }
.ofrecer .dialogo__pie { padding: var(--sp-3) var(--sp-6); border-top: 1px solid rgb(255 255 255 / 0.08); margin: 0; }

.ofrecer .ofertas { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.oferta--ofrecer .oferta__escudo { width: 40px; height: 40px; object-fit: contain; }
.oferta--ofrecer .team__nombre { display: grid; line-height: 1.15; }
.oferta__pais { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.oferta__pais img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
.oferta--mejor { box-shadow: inset 0 0 0 1.5px var(--accent); }
.oferta__alla { font-weight: 700; }
.oferta__alla[data-tono='bueno'] { color: var(--good); }
.oferta__alla[data-tono='aviso'] { color: var(--warn); }
.oferta__alla[data-tono='malo'] { color: var(--danger); }

@media (max-width: 860px) {
  dialog.ofrecer { height: 94vh; width: 100vw; }
  .ofrecer__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
  .ofrecer__lista { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
  .ofrecer__lista, .ofrecer__detalle, .ofrecer__cab { padding-inline: var(--sp-4); }
}
.ofrecer .interes__quien { display: none; }

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