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