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

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