/* ==========================================================================
   El Camino DT — LA MESA DE NEGOCIACIÓN
   --------------------------------------------------------------------------
   El diálogo de 420 px con un párrafo adentro sigue existiendo y sigue siendo
   lo correcto para una pregunta de sí o no. Esto es lo otro: la pantalla donde
   se NEGOCIA, con la forma que tiene en FM26 —cabecera con escudo, expediente,
   términos, y una franja de veredicto de ancho completo abajo—.

   Tres decisiones y sus motivos:

   · ES ANCHA, 780 px. El expediente y los términos tienen que verse al mismo
     tiempo o la mesa no sirve para nada: la gracia es mover un mando mirando
     el dato que lo justifica. Apilados en una columna de 420 px, el dato queda
     fuera de la pantalla justo cuando hace falta.

   · EL VEREDICTO NO ES UNA TERCERA COLUMNA. Va abajo, cruzado, con superficie
     propia. Es el EFECTO de los dos paneles de arriba, no un panel más — la
     misma razón por la que `.trato__saldo` tiene borde en la agenda.

   · NO HAY UN TOKEN NUEVO. Todo sale del sistema. Si esta hoja hubiera
     necesitado un color, un radio o un espacio propio, el sistema habría
     fallado y eso se anota en DESIGN.md, no se resuelve acá.
   ========================================================================== */

.dialogo--mesa {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(920px, calc(100vw - 2 * var(--sp-6)));
  /* Y NO SE SALE DE UNA VENTANA BAJA. La mesa de la pretemporada mide 679px de
     alto con tres términos; en un portátil de 720 eso deja los botones a
     cuarenta píxeles del borde, y con un término más los deja afuera. Lo que
     cede es el CUERPO —expediente y términos— y nunca la cabecera, el veredicto
     ni el pie: quién está enfrente, qué contestan y cómo cerrar son las tres
     cosas que no pueden salirse de la pantalla.

     `--alto-ventana` y no `100vh`, por lo mismo que en la card y en las
     pantallas de alto fijo: `vh` no sabe del zoom del sitio. */
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-6));
  padding: 0;
  overflow: hidden;
}

/* EL `display` VA CON `[open]`, Y NO A SECAS — el mismo fantasma que `card.css`
   documentó el 21/8/2026, por la puerta de al lado y sin que nadie lo notara.

   Un `<dialog>` cerrado lo esconde la hoja del navegador con
   `dialog:not([open]) { display: none }`, y CUALQUIER `display` de una hoja de
   autor le gana, tenga la especificidad que tenga: las de autor van siempre por
   encima de las del navegador. Con `display: grid` suelto, la mesa cerrada
   seguía maquetada. Medido acá el 1/9/2026, creando la caja a mano en una
   pantalla cualquiera del juego: `.dialogo` cerrado da `display: none` y 0px de
   alto, y `.dialogo--mesa` cerrado daba `grid` y 23,6px. La contraprueba y el
   síntoma son los mismos que allá.

   Y desde que la salida del modal va por transición hace falta además por otro
   motivo: `display` es lo que se transiciona con `allow-discrete`, y un
   `display` fijo no tiene entre qué dos valores viajar — la mesa se cerraría de
   golpe mientras los otros seis modales se van con calma. */
.dialogo--mesa[open] { display: grid; }

/* --------------------------------------------------------------------------
   1. LA CABECERA
   --------------------------------------------------------------------------
   Quién está del otro lado, y por eso el escudo manda: en FM26 el escudo es lo
   más grande de la barra, y en una negociación es literalmente con quién estás
   hablando. La franja va sobre la superficie del chrome para que se lea como
   la barra de la pantalla y no como el primer renglón del contenido.
   -------------------------------------------------------------------------- */

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

/* VESTIDA DEL CLUB DE ENFRENTE. Es la misma banda con la que la carta del
   presidente recibe al DT el primer día —franja diagonal del segundo color
   sobre un degradado del primero— y está acá por el mismo motivo que allá: un
   club es su camiseta antes que su nombre. Sentarse con Racing y sentarse con
   Boca no pueden ser la misma caja gris.

   El texto va en `--club-tinta`, que lo decide el contraste y no el gusto:
   sobre el oro de Peñarol el blanco no se lee. */
.dialogo--mesa[data-vestida] .mesa__cab {
  color: var(--club-tinta);
  /* LA FRANJA ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO. Acá se
     escribió primero, y hasta el 8/9/2026 esta cabecera decía que en la carta
     del presidente la franja podía cruzar la banda entera «porque no hay nada
     escrito debajo». Era falso, y también en la vuelta olímpica y en la
     coronación: debajo está el nombre del club, el del título y el de la
     categoría. Las tres se cortan ahora como ésta — ver `bienvenida.css`, que
     es donde quedó la medición.

     Acá hay un título que se estira hasta donde llegue el nombre y un
     bloque a la derecha, y `--club-tinta` se elige por contraste contra el
     FONDO, no contra la franja — el oro de Boca pasando por debajo del texto
     blanco es una línea que no se lee. Entra detrás del escudo, que es opaco,
     y se termina antes de la primera letra. */
  background:
    linear-gradient(112deg, var(--club-franja) 0 9%, transparent 9.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 86%, var(--club-lavado, var(--club-fondo)) 14%), var(--club-fondo) 64%);
  border-bottom-color: color-mix(in srgb, var(--club-fondo) 55%, black);
}

/* Y por si algún día la franja crece: el texto va por encima de las dos capas,
   nunca dentro de ellas. */
.dialogo--mesa[data-vestida] .mesa__id,
.dialogo--mesa[data-vestida] .mesa__contra { position: relative; z-index: 1; }

.mesa__escudo { display: flex; flex: none; }

/* En FM26 el escudo es lo más grande de la barra y manda: acá hace lo mismo,
   porque en una negociación es literalmente con quién estás hablando. */
.mesa__escudo .crest {
  width: 56px;
  height: 56px;
  --halo: 1px;
  /* Tiene que despegarse del fondo aunque compartan color: Racing celeste
     sobre celeste es un escudo que desaparece.
     El halo del rescate va DELANTE y se compone acá: `filter` no se suma. */
  filter: var(--halo-filtro, ) drop-shadow(0 2px 5px hsl(0 0% 0% / 0.45));
}

.mesa__id { min-width: 0; flex: 1 1 auto; }

.mesa__titulo {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mesa__linea { font-size: var(--fs-sm); color: var(--text-muted); }

/* Sobre el color del club, el gris del sistema no contrasta con nada: los dos
   textos de la cabecera heredan la tinta que el club decidió, y el secundario
   se apaga con opacidad y no con otro gris. */
.dialogo--mesa[data-vestida] .mesa__titulo { color: inherit; }
/* Y TAMPOCO SE APAGAN CON OPACIDAD, que es la otra mitad de la misma frase:
   `opacity` no apaga una tinta, la mezcla con el fondo. El 0,78 de estos dos
   dejaba 772 de los 1.673 clubes por debajo de 4,5:1 en esta cabecera. La
   medición entera, de las cinco bandas, está en `bienvenida.css`. */
.dialogo--mesa[data-vestida] .mesa__linea,
.dialogo--mesa[data-vestida] .mesa__contra .label { color: inherit; }
/* El nombre del club, a plena tinta. El 0,78 valía cuando era un renglón de
   apoyo en `--fs-sm`; ahora es uno de los dos titulares de la cabecera, y un
   titular apagado al 78 % pesa menos que el que tiene al lado. */
.dialogo--mesa[data-vestida] .mesa__contra strong { color: inherit; }

/* Con quién se negocia, alineado a la derecha. Es el único sitio de la
   cabecera donde puede ir un nombre que no es el del trato. */
.mesa__contra { display: grid; gap: var(--sp-1); text-align: right; flex: none; }
/* LOS DOS LADOS DE LA MESA PESAN LO MISMO. La cabecera llevaba el título del
   trato en cuerpo grande a la izquierda y el nombre del club de enfrente en
   `--fs-sm` a la derecha: la pantalla anunciaba la OPERACIÓN y susurraba con
   quién. En una negociación es al revés de lo que importa —de quién está del
   otro lado depende todo lo demás—, así que los dos van al mismo cuerpo. */
.mesa__contra strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   2. LO QUE CONTESTARON
   --------------------------------------------------------------------------
   La ida y vuelta. Aparece sólo en la segunda ronda y ocupa una franja entera
   porque es lo que cambió desde la vez anterior: si se leyera como un renglón
   más del expediente, el DT volvería a mover los mandos sin haber leído la
   contraoferta.

   LLEVA EL ESCUDO Y NO UNA BARRA DE COLOR. La primera versión marcaba el tono
   con un filete grueso a la izquierda, que es el vocabulario de un cartel de
   aviso — y esto no es un aviso del sistema: es un club diciendo algo. Con el
   escudo delante se lee como lo que es, alguien hablando, y de paso el tono lo
   carga la palabra, que es donde el sistema quiere el color.
   -------------------------------------------------------------------------- */

.mesa__contesta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-row);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.mesa__contesta-escudo { display: flex; flex: none; }
.mesa__contesta-escudo .crest { width: 28px; height: 28px; --halo: 0.5px; }

.mesa__dicho { display: grid; gap: var(--sp-2); min-width: 0; }

/* Lo dicho va en cursiva y entre comillas tipográficas: es una cita, y una
   cita sin marca de cita se lee como una línea de interfaz más. */
.mesa__comilla { color: var(--text-primary); font-style: italic; }
.mesa__comilla::before { content: '«'; }
.mesa__comilla::after { content: '»'; }
.mesa__comilla strong { color: var(--text-primary); font-weight: 700; font-style: normal; }

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

.mesa__contesta[data-r='si'] .mesa__firma { color: var(--good); }
.mesa__contesta[data-r='quiza'] .mesa__firma { color: var(--warn); }
.mesa__contesta[data-r='no'] .mesa__firma { color: var(--danger); }

/* --------------------------------------------------------------------------
   3. EL CUERPO: EXPEDIENTE Y TÉRMINOS
   -------------------------------------------------------------------------- */

.mesa__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mesa__col {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  padding: var(--sp-6);
}

/* LA MESA ES UN SÁNDWICH TONAL, y ése es todo el trabajo que hace el fondo
   acá. La cabecera es del club; el expediente se apoya en la superficie del
   diálogo porque se LEE; los mandos suben un escalón porque se TOCAN; y el
   veredicto se hunde al tono del chrome porque es la consecuencia y no una
   tercera cosa que hacer.

   Sin eso, el diálogo era un rectángulo plano partido por una línea, y en una
   negociación de un solo término la mitad derecha se leía como un hueco en vez
   de como el sitio donde se decide. La profundidad va por capas tonales y
   nunca por sombras: es la regla del sistema y acá es también lo que ordena la
   pantalla. */
.mesa__col--terminos {
  background: var(--bg-row);
  border-left: 1px solid var(--line-hairline);
  /* Y ESTA COLUMNA DECLARA SU SUPERFICIE. El anillo del pulgar del deslizador
     se recorta contra el fondo sobre el que se apoya, y el fondo de acá no es
     el del diálogo: es un escalón más arriba. Sin este renglón el anillo salía
     en `--bg-panel` —más oscuro que esta columna— y le dibujaba un halo negro
     al pulgar en el único sitio del juego donde se arrastra plata. Ver
     `.range__input::-webkit-slider-thumb` en `app.css`. */
  --rango-plato: var(--bg-row);
}

.mesa__rotulo { color: var(--label-color); }

/* El expediente reusa el ritmo de la fila de dato del sistema: 22px, rótulo a
   la izquierda, valor a la derecha, hairline entre renglones. Es la misma
   lectura que la ficha del futbolista, y a propósito — es la misma cosa. */
.mesa__datos { display: grid; }

.mesa__dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--row-h);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
}

.mesa__dato:last-child { border-bottom: 0; }
.mesa__dato dt { color: var(--text-muted); }
.mesa__dato dd { font-weight: 600; color: var(--text-primary); text-align: right; }
.mesa__dato dd[data-tono='bueno'] { color: var(--good); }
.mesa__dato dd[data-tono='aviso'] { color: var(--warn); }
.mesa__dato dd[data-tono='malo'] { color: var(--danger); }

/* Lo que se puede leer de enfrente: la traducción a castellano de los datos de
   arriba. No es una pista sobre el número —el número no se muestra nunca— es
   el mismo dato dicho de la manera en que se piensa una negociación. */
.mesa__lectura {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

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

/* --------------------------------------------------------------------------
   4. UN TÉRMINO
   -------------------------------------------------------------------------- */

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

.mesa__termino-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* LO QUE VALE EL TÉRMINO ELEGIDO VA EN VOZ DE MARCADOR: 22 px comprimidos, que
   es el registro que el sistema reserva para «la cifra destacada de un
   bloque». Estaba a 14 px, el mismo cuerpo que su etiqueta, y ésa era la
   inversión al revés — el número que se está negociando es lo único de la
   pantalla que el DT mira mientras arrastra. */
/* CUÁNTO MANDA SOBRE CUÁL. Las cuatro salidas iban al mismo cuerpo de
   marcador, y con tres términos eso son tres números de 26px compitiendo: el
   ojo no tiene camino y ninguno lidera.

   El corte NO es «la plata». Se probó —sólo el término de tipo `numero` en
   grande— y dejó sin cifra a la mesa que más importa: en el fichaje el monto es
   un DESLIZADOR, así que la pantalla de comprar un futbolista se quedó sin un
   solo número grande. El corte que sí vale para las nueve mesas es qué PREGUNTA
   contesta cada control: un deslizador y un campo contestan CUÁNTO, y una lista
   o un segmentado contestan CUÁL. La cifra grande es de las de cuánto, que son
   las que se mueven y las que el veredicto juzga; las otras dicen qué elegiste,
   que es estado y no apuesta.

   Y sale del tipo de control, no de una bandera que cada una de las catorce
   páginas tendría que acordarse de poner. */
.mesa__cifra[data-tipo='lista'],
.mesa__cifra[data-tipo='opciones'] {
  font-size: var(--fs-md);
  font-weight: 600;
  font-stretch: normal;
  color: var(--text-secondary);
}

.mesa__cifra {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.mesa__pista {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

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

/* La lista y el número escrito. Comparten la misma piel de campo —la del
   `.trato` de la agenda, que es de donde salen— porque son el mismo gesto:
   escribir un valor en un hueco, no elegir entre opciones a la vista. */
.mesa__lista,
.mesa__numero {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  /* `--line-control` por lo mismo que la opción segmentada de acá abajo: un
     campo de formulario es el caso CENTRAL de WCAG 1.4.11 —lo que hay que poder
     identificar es dónde se escribe— y `--line` daba 1,23 contra el fondo
     levantado del diálogo. Tampoco estaban en los 232 hallazgos del barrido, por
     el mismo motivo: viven en una superficie que hay que abrir. */
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-md);
}

@media (hover: hover) {
  .mesa__lista:hover,
  .mesa__numero:hover { border-color: var(--line-control-strong); }
}

/* El grupo segmentado. Es el control que FM26 rellena PLENO cuando está
   elegido, y acá se rellena con el lavado de acento y no con el violeta a
   fondo: dentro de un diálogo que ya tiene un botón de acento a dos dedos, dos
   bloques violetas plenos se pelean por ser la acción principal. */
.mesa__ops { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); }

/* EL CONTORNO ES `--line-control` Y NO `--line`, POR LO MISMO QUE EL RESTO DE
   LOS CONTROLES (3/9/2026). `--line` es la línea de ORDENAR —hairlines, bordes
   de panel, separadores— y da **1,23 contra el fondo levantado del diálogo**,
   medido en la mesa de `mercado` con el alfa compuesto. Una opción segmentada
   no es un separador: es un control, y lo que WCAG 1.4.11 pide para el contorno
   de un control es 3:1.

   ESTAS TRES NO ESTABAN EN LOS 232 HALLAZGOS del barrido de contorno, y ésa es
   la parte que vale contar: `herramientas/barrido-contraste.html` mide las 23
   pantallas **como cargan**, y un diálogo no existe hasta que alguien lo abre.
   No hay un `dialog`, un `showModal` ni un `.click()` en ese arnés. Así que las
   nueve negociaciones del juego —donde este control vive— quedaban fuera de la
   muestra, y el número 232 era creíble y estaba incompleto. Lo encontró esta
   sesión abriendo la mesa a mano después de publicar el token.

   LA ELEGIDA NO SE TOCA: `[aria-pressed='true']` ya trae `--accent-line`, que
   da 3,77 medido en la misma pasada. Lo que no se veía era la opción EN REPOSO,
   que es justo la que hay que poder distinguir para saber que se puede elegir. */
.mesa__op {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  text-align: center;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .mesa__op:hover { border-color: var(--line-control-strong); }
}

.mesa__op[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--text-primary);
}

.mesa__op strong { font-size: var(--fs-sm); font-weight: 600; }
.mesa__op small { font-size: var(--fs-2xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   5. EL VEREDICTO
   --------------------------------------------------------------------------
   La franja que se mueve sola. Las cuentas a la izquierda —lo que sale hoy, lo
   que queda debiendo, lo que te queda en la caja— y a la derecha la respuesta
   en palabras, que es lo único que se mira antes de apretar.
   -------------------------------------------------------------------------- */

/* LA FRANJA DEL VEREDICTO
   --------------------------------------------------------------------------
   Era un pie de página con una palabra de color a la derecha, y en una mesa de
   negociación eso es esconder la respuesta. El gesto de esta pantalla es mover
   un mando y mirar qué contestan: la palabra tiene que estar donde cae el ojo
   —a la izquierda, arriba de todo lo demás— y tiene que pesar como pesa.

   Tres cosas la convierten en una respuesta y no en un renglón:

   · LA PALABRA VA EN CUERPO DE TITULAR y ya no en `--fs-lg`. Es la única cosa
     de la mesa que se lee sin buscarla, y compite contra una cifra de 26px que
     está a cuarenta píxeles de distancia.
   · LA FRANJA SE TIÑE DEL TONO. Un lavado del 20 %, el mismo que usan la tabla
     de posiciones y el marcador del calendario. No es decoración: es lo que
     hace que la respuesta se vea desde el otro extremo de la pantalla, que es
     donde está el mando que la cambió.
   · LAS CUENTAS PASAN A LA DERECHA, alineadas al dígito. El desglose es el
     porqué, y el porqué se lee después.
   -------------------------------------------------------------------------- */

.mesa__veredicto {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-chrome);
  border-top: 1px solid var(--line);
  transition: background var(--dur-pantalla) var(--ease);
}
.mesa__veredicto[data-r='si']    { background: var(--tint-good); }
.mesa__veredicto[data-r='quiza'] { background: var(--tint-warn); }
.mesa__veredicto[data-r='no']    { background: var(--tint-bad); }

.mesa__respuesta { display: grid; gap: var(--sp-2); min-width: 0; }

.mesa__palabra {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.mesa__palabra[data-r='si'] { color: var(--verde-200); }
.mesa__palabra[data-r='quiza'] { color: var(--warn); }
.mesa__palabra[data-r='no'] { color: var(--clay-300); }

.mesa__detalle { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-secondary); }
.mesa__detalle strong { color: var(--text-primary); }

.mesa__balance { display: grid; gap: var(--sp-1); align-content: center; }

.mesa__renglon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.mesa__renglon dd { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; }
.mesa__renglon dd[data-tono='bueno'] { color: var(--verde-300); }
.mesa__renglon dd[data-tono='aviso'] { color: var(--warn); }
.mesa__renglon dd[data-tono='malo'] { color: var(--clay-300); }

/* El renglón que resume a los otros va un escalón más grande. Es la única
   cifra de la franja que se lee sin buscarla. */
.mesa__renglon--fuerte { font-size: var(--fs-sm); color: var(--text-secondary); }
.mesa__renglon--fuerte dd { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }

/* EL ACUSE DE RECIBO. La respuesta cambia mientras se arrastra un deslizador,
   y un cambio de una palabra a otra —mismo sitio, mismo cuerpo— no se ve: se
   cruzaba de «Aceptan» a «Ni lo miran» sin enterarse de dónde había estado el
   límite. Un solo destello, y sólo cuando la banda CAMBIA, dice dónde estuvo la
   frontera sin dibujarla, que es la regla que gobierna toda esta pantalla.

   Es el segundo y último momento de movimiento del diálogo. Uno para llegar y
   uno para contestar: cualquier tercero sería ruido. */
@media (prefers-reduced-motion: no-preference) {
  .mesa__veredicto--cambio { animation: mesa-acuse var(--dur-pantalla) var(--ease); }
  .mesa__veredicto--cambio .mesa__palabra { animation: mesa-acuse-palabra var(--dur-pantalla) var(--ease-entrada); }
}
@keyframes mesa-acuse {
  from { background: var(--bg-hover); }
}
@keyframes mesa-acuse-palabra {
  from { transform: translateY(3px); opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   5 ter. EL CUERPO CEDE Y LAS TRES ORILLAS NO
   --------------------------------------------------------------------------
   Con `max-height` en el diálogo, alguien tiene que encogerse. Es el cuerpo:
   `min-height: 0` para que pueda hacerlo dentro de la retícula, y su propio
   scroll para que lo que no entra siga siendo alcanzable.
   -------------------------------------------------------------------------- */

.dialogo--mesa .mesa__cuerpo { min-height: 0; overflow-y: auto; }

.dialogo--mesa .dialogo__pie {
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-chrome);
  border-top: 1px solid var(--line-hairline);
}

/* --------------------------------------------------------------------------
   5 bis. CÓMO LLEGA A LA MESA — Y CÓMO SE VA
   --------------------------------------------------------------------------
   Sigue haciendo el mismo trabajo y con los mismos números: decir que la
   pantalla se abrió ENCIMA de lo que estabas mirando, acercándose desde un 2 %
   más chica y cuatro píxeles abajo, con el velo entrando por separado y más
   lento para que el fondo no se apague de golpe. Lo que cambió el 1/9/2026 es
   dónde está escrito.

   Estaba acá, otra vez en `card.css` y una tercera para el parte del
   movimiento —tres copias del mismo gesto—, y los otros cinco modales del
   juego no lo tenían. Ahora lo escribe `movimiento.css`, punto 4, para los
   ocho, junto con LA SALIDA: la mesa llegaba con calma y se apagaba de un
   fotograma a otro, que es la mitad del gesto que le faltaba a todo el
   sistema.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. LA MESA ANGOSTA
   --------------------------------------------------------------------------
   Por debajo de 720 px las dos columnas no caben y se apilan, con el
   expediente primero: se lee antes de tocar. La línea vertical se convierte en
   horizontal, que es la misma separación dicha en el otro eje.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .mesa__cuerpo, .mesa__veredicto { grid-template-columns: minmax(0, 1fr); }
  .mesa__col--terminos {
    border-left: 0;
    border-top: 1px solid var(--line-hairline);
  }
  .mesa__respuesta { text-align: left; }
  .mesa__cab { gap: var(--sp-4); }
  .mesa__escudo .crest { width: 44px; height: 44px; --halo: 0.79px; }
  .mesa__titulo { font-size: var(--fs-lg); white-space: normal; }
}

/* ==========================================================================
   EL PARTE DEL MOVIMIENTO
   --------------------------------------------------------------------------
   La escena de después. Vive en esta hoja y no en una propia porque es la otra
   mitad de la misma cosa: la mesa pregunta y el parte contesta, y las dos
   tienen que verse hermanas —misma cabecera sobre la superficie del chrome,
   mismo balance de cifras, mismo pie—.

   Es ANGOSTA como el diálogo de siempre y no ancha como la mesa: no hay dos
   paneles que mirar a la vez. Hay una lista de dos renglones que se lee de
   arriba abajo.

   Cero tokens nuevos.
   ========================================================================== */

/* El parte lleva una ficha con escudos, una tabla de cuentas y un aviso de
   tres líneas: con el ancho de una pregunta el aviso se partía en cinco. */

/* Y NO SE SALE DE LA VENTANA, que hasta el 2/9/2026 no hacía falta y ese día
   pasó a hacer falta de golpe. El parte del salto tenía cinco o seis renglones
   —el salto se frenaba en el primer miércoles de copa— y con «simular la
   temporada» pasó a tener CINCUENTA: treinta y dos fechas de liga más cada
   partido de copa que el motor jugó. Sin tope, el diálogo crece hacia abajo
   hasta dejar el botón de cerrar fuera de la pantalla, que es un parte que no
   se puede terminar de leer ni cerrar con el mouse.

   Lo que cede es la LISTA, y nunca la cabecera, el pie ni el renglón del
   plantel: qué pasó, cuántos quedan y cómo cerrar son las tres cosas que no
   pueden salirse. Es la misma regla que la mesa tiene escrita treinta líneas
   más arriba, y `--alto-ventana` por el mismo motivo: `vh` no sabe del zoom.

   El `display` va con `[open]` y no a secas — ver la nota de la mesa: un
   `display` de autor le gana a la regla del navegador que esconde los diálogos
   cerrados, y el parte quedaría maquetado con la pantalla apagada. */
/* SUBIÓ DE 760 A 860 el 4/9/2026, y se iguala al balance a propósito: son las
   dos pantallas del MISMO momento —lo que pasó mientras no mirabas y cómo
   terminó el año— y en «Simular toda la temporada» salen una detrás de la otra.
   Con anchos distintos, cerrar el parte hacía saltar la caja cien píxeles antes
   de mostrar el balance. Y el contenido lo pedía: desde que el parte lista
   también los partidos de copa, el renglón trae escudo, rival, torneo, ronda,
   sede y marcador, y «Fase liga · fecha 2 de la Europa League» se cortaba.

   Va con los otros cinco de la escala de `app.css`, que se toca junta. */
.dialogo--parte {
  width: min(860px, calc(100vw - 2 * var(--sp-6)));
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-6));
  padding: 0;
  overflow: hidden;
}

.dialogo--parte[open] { display: flex; flex-direction: column; }

/* `min-height: 0` es lo que deja encoger a un hijo de flex por debajo de su
   contenido; sin él la lista se niega a ceder y el diálogo se sale igual. */
.dialogo--parte > .parte__cab,
.dialogo--parte > .parte__corte,
.dialogo--parte > .parte__plantel,
.dialogo--parte > .dialogo__pie { flex: none; }

.dialogo--parte > .parte__movimientos,
.dialogo--parte > .parte__balance { min-height: 0; overflow-y: auto; }

/* La temporada cede su LISTA y no su marcha: el resumen de arriba es de los que
   hay que poder leer sin desplazar nada. */
.dialogo--parte > .parte__temporada { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.parte__temporada > .parte__partidos { min-height: 0; overflow-y: auto; }

.parte__cab {
  padding: var(--sp-6);
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
}

.parte__cuando {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* POR QUÉ SE FRENÓ EL SALTO, pegado a la cabecera y con el peso de una
   noticia. Ver la nota de `corte` en `parte.js`: esto vive acá arriba porque
   antes vivía en el renglón del plantel, en `--fs-xs` y `--text-muted`, y un
   despido contado en letra chica es un despido que no se lee.

   LA FRANJA ES DE COLOR Y EL TEXTO NO, o casi. El borde de la izquierda lleva
   `--danger` puro, que es donde ese token rinde —una barra de 3 px no tiene
   que pasar ninguna vara de contraste—; el título va en `--clay-300`, que es
   el rojo que la casa usa cuando el rojo tiene que LEERSE sobre el fondo
   oscuro (`.et__veredicto`, `.pre__dato dd`). `--danger` es `--clay-400` y en
   un titular sobre `--bg-raised` queda por debajo del corte; el mismo error
   que la guarda de contraste ya atajó en la fila del médico. */
.parte__corte {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--danger);
}

.parte__corte[data-tono='aviso'] { border-left-color: var(--warn); }

.parte__corte-titulo {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clay-300);
}

.parte__corte[data-tono='aviso'] .parte__corte-titulo { color: var(--amber-300); }

.parte__corte-cuerpo {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.parte__corte-cuerpo strong { color: var(--text-primary); }

.parte__movimientos { display: grid; gap: var(--sp-5); padding: var(--sp-6); }

.parte__lado { display: grid; gap: var(--sp-3); }
.parte__rotulo { color: var(--text-muted); }

/* El color dice la dirección antes que la palabra: lo que entra en verde, lo
   que sale en el rojo del sistema. Es la misma pareja con la que el balance de
   la mesa marca lo que suma y lo que resta, y por eso no hace falta un token
   nuevo para decir «entra». */
.parte__lado[data-lado='entra'] .parte__rotulo { color: var(--good); }
.parte__lado[data-lado='sale'] .parte__rotulo { color: var(--danger); }

.parte__ficha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.parte__lado[data-lado='entra'] .parte__ficha { border-left-color: var(--good); }
.parte__lado[data-lado='sale'] .parte__ficha { border-left-color: var(--danger); }

/* La camiseta. Es el dato que el DT necesita para encontrarlo en la lista del
   plantel diez segundos después, y por eso es lo primero de la ficha. */
.parte__dorsal {
  grid-row: span 2;
  min-width: 2ch;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
  text-align: center;
}

.parte__quien { display: grid; gap: var(--sp-1); min-width: 0; }
.parte__quien strong { color: var(--text-primary); font-size: var(--fs-sm); }
.parte__eco { font-size: var(--fs-2xs); color: var(--text-muted); }

.parte__ruta {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.parte__club { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.parte__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parte__ruta .i { color: var(--icon-quiet); flex: none; }

.parte__nota {
  grid-column: 2;
  font-size: var(--fs-2xs);
  color: var(--warn);
}

/* ==========================================================================
   EL PARTE DE UNA TEMPORADA
   --------------------------------------------------------------------------
   El salto del calendario cuenta partidos y no pases, y hasta el 3/9/2026 los
   contaba por `cuentas` —la lista de rótulo y valor del fichaje—. Treinta y
   seis renglones de «De visitante con Deportivo Morón · 2-0»: sin un escudo,
   sin la fecha, y los de copa al doble de ancho porque el nombre de la llave
   entraba en el rótulo. Alberto pidió «más amor, más onda».

   Lo que faltaba no era decoración. Era lo que este juego hace en todas sus
   otras listas y ésta se salteaba, con las tres cosas escritas en `DESIGN.md`:
   el escudo como forma de reconocer un club, cada marcador en su caja, y la
   fila densa de `--fila-tabla`. Un bloque se lee plano cuando renuncia a las
   jugadas fuertes del sistema en el que vive; el arreglo es traerlo al nivel de
   sus vecinos, no inventarle un lenguaje.

   NO ENTRA UN TOKEN NUEVO NI UN COLOR NUEVO. Los tres tonos del marcador son
   los mismos `--good`/`--warn`/`--danger` que la lista vieja ya usaba en su
   cifra; lo único que cambia es que ahora tiñen una caja y no un texto suelto.
   ========================================================================== */

/* La marcha del año. Reusa `.dato` del sistema —la misma pareja de rótulo en
   versalitas y valor que la tira del calendario— y va sobre `--bg-chrome`, que
   es el escalón con el que este parte ya separa su cabecera y su pie. */
/* LOS TRES DATOS SE REPARTEN EL ANCHO, no se apilan contra el margen izquierdo.
   Eran una fila de flex con `gap`, así que «Jugados 45 · G·E·P 22·11·12 ·
   Goles 81:62» quedaba amontonado en el tercio de la izquierda con media
   cabecera vacía al lado, y los tres se leían como UN dato de siete cifras.
   Pedido por Alberto el 3/9/2026: «veo datos bastante pegados, aprovechemos el
   espacio».

   `grid-auto-flow: column` con columnas de `1fr` reparte a partes iguales sean
   tres o cinco, que es lo que dejaba abierto el `flex-wrap`: esta cabecera la
   escribe `marchaDelParte()` y hoy pone tres, pero el que agregue un cuarto no
   tiene que volver acá. Debajo de 520 px vuelven a una sola columna: tres
   cifras grandes repartidas en un ancho de teléfono se tocan. */
.parte__marcha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 520px) {
  .parte__marcha { grid-auto-flow: row; }
}

.parte__marcha .dato__valor {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
}

/* Los separadores del marcador y de la marcha van en `<i>` y no en el texto:
   el «:» de 3:1 y el «·» de 24·8·12 no son cifras y no pueden pesar como
   ellas. Es la misma disciplina que el `<small>` de «1 de 42» en la tira del
   año, un tamaño más chico. */
/* `--text-secondary` y no `--text-muted`, y lo encontró el barrido de contraste
   el mismo día que se escribió: apagados quedaban en **3,45 y 3,91** contra el
   piso de 4,5. Son texto y significan algo —el «-» separa los dos goles y el
   «·» separa ganados de empatados de perdidos—, así que el piso les aplica
   entero. Siguen pesando menos que las cifras por el `font-weight: 400`, que es
   lo que este par de reglas venía a hacer; lo que no pueden es no leerse. */
.parte__marcha .dato__valor i,
.parte__marcador i { font-style: normal; font-weight: 400; color: var(--text-secondary); }

.parte__marcha .dato__valor b { font-weight: inherit; }
.parte__marcha .dato__valor b[data-tono='bueno'] { color: var(--good); }
.parte__marcha .dato__valor b[data-tono='aviso'] { color: var(--warn); }
.parte__marcha .dato__valor b[data-tono='malo'] { color: var(--danger); }

.parte__partidos { padding: var(--sp-2) var(--sp-4); }

/* La fila. `--fila-tabla` es el token de la fila que se BARRE —32 px, medido
   contra FM26— y esto es exactamente eso: una lista larga que se recorre
   buscando un partido, no una ficha que se lee. */
.parte__partido {
  display: grid;
  grid-template-columns: 2.75rem auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--fila-tabla);
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--line-hairline);
}

.parte__partido:last-child { border-bottom: 0; }

/* La columna que ordena la lista: el número de fecha, o el trofeo cuando el
   partido no es de liga. Tabular para que las dos cifras de «J8» y «J38» caigan
   en la misma columna de dígitos. */
.parte__ronda {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

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

.parte__contra { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }

/* EL NOMBRE CEDE, PERO ÚLTIMO. Con `nowrap` y sin `overflow` un nombre largo no
   se recorta: se DESBORDA de su celda y se mete debajo de la sede y del
   marcador. Medido en el teléfono a 375 px, donde «San Martín de San Juan» y
   «Estudiantes de La Plata» tapaban las dos columnas de la derecha; a 707 px no
   pasaba, que es exactamente por qué el barrido angosto existe.

   El orden de quién cede lo fijan los dos `flex`: el eco de la llave se encoge
   primero (`1 1 0`) y el nombre después (`0 1 auto`), porque de las dos cosas
   la que identifica el partido es contra quién se jugó. Es la misma regla que
   ya sigue la ruta del parte de un pase, un elemento más abajo. */
.parte__contra strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* El nombre de la llave —«Octavos de final · Copa Argentina»— cede antes que el
   rival: de las dos cosas, la que identifica el partido es contra quién. */
.parte__ronda-eco {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* La sede, en una letra. «De visitante con» repetido dieciocho veces es una
   columna de ruido tapando la que importa — la misma razón por la que las
   listas del portal muestran sólo el icono del clima y guardan el parte entero
   en el `title`, que es donde está acá la palabra completa. */
.parte__sede {
  width: 1.25rem;
  text-align: center;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

/* El marcador EN SU CAJA, que es como este juego dibuja un resultado desde la
   tarjeta de «Partidos de hoy». La caja es lo que deja que el color diga cómo
   salió sin pintar de rojo un texto: el tono vive en el fondo y en el borde, y
   la cifra se queda en la tinta principal. */
.parte__marcador {
  min-width: 3.25rem;
  padding: 1px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Teñido al 14 %, muy por debajo del techo del 40 % que el sistema le pone a un
   relleno con texto encima: acá el color es el estado del renglón, no una
   superficie, y con más peso los treinta y seis marcadores se convierten en una
   guarda de colores y dejan de decir cuál salió mal. */
.parte__partido[data-tono='bueno'] .parte__marcador {
  background: color-mix(in srgb, var(--good) 14%, var(--bg-raised));
  border-color: color-mix(in srgb, var(--good) 38%, var(--line));
}

.parte__partido[data-tono='malo'] .parte__marcador {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-raised));
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
}

.parte__balance {
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-chrome);
  border-top: 1px solid var(--line);
}

.parte__plantel {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
  border-top: 1px solid var(--line-hairline);
}

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

/* SIN `justify-content` PROPIO: lo pone `.dialogo__pie` y desde el 3/9/2026 ese
   valor es `center`. Acá había un `flex-end` repetido —el mismo que ya traía la
   regla base cuando esto se escribió— y al centrar los pies del juego ESTE se
   quedó a la derecha, porque una regla más específica gana aunque diga lo que
   la general ya decía. Es el caso que la casa tiene anotado: un valor copiado
   de la base se vuelve el techo el día que la base cambia. */
.dialogo--parte .dialogo__pie {
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-chrome);
  border-top: 1px solid var(--line-hairline);
}

/* Entra como la mesa: por encima de lo que estabas mirando, no en su lugar. */
/* Llega y se va con el gesto de los ocho modales, que escribe `movimiento.css`
   en el punto 4. Antes pedía prestados los fotogramas de la mesa. */

/* ==========================================================================
   LA FICHA, LOS BLOQUES Y EL RENGLÓN CHICO (8/10/2026, «más detalle, datos,
   precisión»): arriba del expediente, quién es —dorsal, nombre, puesto, nivel
   y cinco datos sueltos—; el expediente partido en bloques con su subtítulo,
   y cada dato con la línea chica que dice de dónde sale.
   ========================================================================== */
.mesa__ficha-hueco { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mesa__ficha {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(110deg, color-mix(in srgb, var(--club-fondo, var(--accent)) 16%, transparent), transparent 70%), rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.mesa__ficha-n {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent);
  font-size: var(--fs-lg); font-weight: 900; font-variant-numeric: tabular-nums;
}
.mesa__ficha-id { display: grid; gap: 4px; min-width: 0; }
.mesa__ficha-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); }
.mesa__ficha-id small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); }
.mesa__ficha-id .pos { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.04em; color: #0b0d10; background: var(--ink-300); }
.mesa__ficha-id .pos[data-fam='POR'] { background: #f2c14e; }
.mesa__ficha-id .pos[data-fam='DEF'] { background: #6fa8ff; }
.mesa__ficha-id .pos[data-fam='MED'] { background: #57d68d; }
.mesa__ficha-id .pos[data-fam='DEL'] { background: #ff7a6b; }
.mesa__ficha-niv { display: grid; justify-items: center; line-height: 1; }
.mesa__ficha-niv b { font-size: var(--fs-3xl); font-weight: 900; font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.mesa__ficha-niv small { margin-top: 2px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.mesa__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mesa__chips li { padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: var(--fs-xs); color: var(--text-secondary); }
.mesa__chips b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mesa__seccion { margin: var(--sp-4) 0 var(--sp-1); }
.mesa__seccion:first-child { margin-top: 0; }
.mesa__seccion span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto, var(--accent)); }
.mesa__dato dt small { display: block; margin-top: 1px; font-size: var(--fs-2xs); color: var(--text-muted); }
.mesa__estrellas { letter-spacing: 1px; color: var(--accent-texto, var(--accent)); }
.mesa__lectura--terminos { margin-top: var(--sp-5); }
/* La X del club (`ponerLaCruz()`) cae sobre la esquina de la cabecera: el
   rótulo de la otra parte le deja lugar. */
.en-modo-club .dialogo--mesa .mesa__cab { padding-right: 68px; }

/* QUE SE LEA BIEN (8/10/2026, «que el texto se lea bien, metamos datos
   útiles»): en la mesa del club los rótulos dejan el gris apagado por el
   secundario, los renglones chicos suben un escalón y la escala del dial se
   lee entera. Y el bloque «para decidir» con los términos. */
.en-modo-club .dialogo--mesa .mesa__dato { padding-block: 6px; }
.en-modo-club .dialogo--mesa .mesa__dato dt { color: var(--text-secondary); font-size: var(--fs-sm); }
.en-modo-club .dialogo--mesa .mesa__dato dd { font-size: var(--fs-sm); }
.en-modo-club .dialogo--mesa .mesa__dato dt small { font-size: var(--fs-xs); color: color-mix(in srgb, var(--text-secondary) 80%, transparent); }
.en-modo-club .dialogo--mesa .mesa__chips li { font-size: var(--fs-sm); color: var(--text-primary); }
.en-modo-club .dialogo--mesa .mesa__pista { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }
.en-modo-club .dialogo--mesa :is(.dial__tope, .dial__marca) { font-size: var(--fs-xs); color: var(--text-secondary); }
.en-modo-club .dialogo--mesa .mesa__lectura { font-size: var(--fs-md); line-height: 1.55; color: var(--text-secondary); }
.mesa__ayuda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.mesa__ayuda > div:first-child { grid-column: 1 / -1; }
.mesa__ayuda > div { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.mesa__ayuda dt { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.mesa__ayuda dd { margin: 0; display: grid; gap: 2px; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.mesa__ayuda dd small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.mesa__lectura--terminos > p { margin: 0; }
@media (max-width: 760px) { .mesa__ayuda { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   LA MESA ANCHA (8/10/2026, «un modal horizontal, con los estilos de los
   nuevos modales»): escena con fotos a la izquierda, el expediente al medio
   y, a la derecha, los términos, la respuesta y los botones. La cabecera queda
   arriba de las dos columnas. Con el borde, el radio y el velo de los modales
   del club.
   ========================================================================== */
dialog.dialogo--mesa.mesa--ancha { width: min(86rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; }
/* Horizontal sólo con ancho; en el teléfono queda la mesa de siempre. */
@media (min-width: 761px) {
/* La forma va sin [open]: al cerrar, el diálogo pierde [open] antes del
   fundido y se apilaba en vertical mientras se iba. */
dialog.dialogo--mesa.mesa--ancha[open] { display: grid; }
dialog.dialogo--mesa.mesa--ancha {
  grid-template-columns: minmax(15rem, 0.62fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'escena cab      cab'
    'escena contesta contesta'
    'escena exp      term'
    'escena exp      veredicto'
    'escena exp      pie';
}
.mesa--ancha::backdrop { background: rgb(4 5 8 / 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mesa--ancha .mesa__escena { grid-area: escena; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: end center; padding: var(--sp-7) var(--sp-5); background: var(--ink-950); }
.mesa__foto { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; opacity: 0; transform: scale(1.06); transition: opacity 1400ms ease; }
.mesa__foto--on { opacity: 1; animation: mesa-acerca 9s ease-out both; }
@keyframes mesa-acerca { from { transform: scale(1.14); } to { transform: scale(1.03); } }
.mesa--ancha .mesa__escena::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 10 14 / 0.05) 30%, rgb(8 10 14 / 0.6) 65%, rgb(8 10 14 / 0.94) 100%), linear-gradient(120deg, color-mix(in srgb, var(--club-fondo, var(--accent)) 35%, transparent), transparent 60%); }
.mesa__escena-club { display: grid; justify-items: center; gap: 6px; text-align: center; }
.mesa__escena-escudo .crest { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 14px 28px rgb(0 0 0 / 0.65)); }
.mesa__escena-club .label { color: var(--accent-texto, var(--accent)); }
.mesa__escena-club b { font-size: var(--fs-2xl); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; color: var(--text-primary); text-shadow: 0 2px 8px rgb(0 0 0 / 0.7); }
.mesa--ancha .mesa__cab { grid-area: cab; }
.mesa--ancha .mesa__titulo { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
.mesa--ancha .mesa__contesta { grid-area: contesta; }
.mesa--ancha .mesa__cuerpo { display: contents; }
.mesa--ancha .mesa__cuerpo > .mesa__col:first-child { grid-area: exp; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mesa--ancha .mesa__col--terminos { grid-area: term; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mesa--ancha .mesa__veredicto { grid-area: veredicto; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.mesa--ancha .dialogo__pie { grid-area: pie; justify-content: stretch; }
.mesa--ancha .dialogo__pie .action { flex: 1 1 0; min-height: 52px; font-size: var(--fs-lg); justify-content: center; }
@media (hover: hover) {
  .mesa--ancha .dialogo__pie .action { transition: transform 160ms var(--ease-entrada), box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease; }
  .mesa--ancha .dialogo__pie .action:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.4); }
  .mesa--ancha .dialogo__pie .action:not(.action--callada):hover { filter: brightness(1.08) saturate(1.1); }
  .mesa--ancha .dialogo__pie .action--callada:hover { border-color: var(--accent); }
}
}
@media (min-width: 1101px) { .mesa--ancha .mesa__cab .mesa__escudo, .mesa--ancha .mesa__cab .mesa__contra { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) {
  dialog.dialogo--mesa.mesa--ancha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'cab cab' 'contesta contesta' 'exp term' 'exp veredicto' 'exp pie'; }
}
@media (max-width: 1100px) { .mesa--ancha .mesa__escena { display: none; } }
@media (prefers-reduced-motion: reduce) { .mesa__foto--on { animation: none; } .mesa__foto { transition: none; transform: none; } }

/* LA CABECERA DE LA MESA ANCHA SE LEE CON CUALQUIER CLUB (8/10/2026, «que se
   lea»): con el escudo en la escena, la franja del club pasaba por debajo del
   título —amarillo de La Fiorita bajo letra blanca—. Arriba queda oscura, con
   el color del club como un velo a la izquierda y una raya abajo. */
@media (min-width: 1101px) {
  dialog.dialogo--mesa.mesa--ancha[data-vestida] .mesa__cab {
    color: var(--text-primary);
    background: linear-gradient(100deg, color-mix(in srgb, var(--club-fondo) 32%, var(--bg-raised)) 0%, var(--bg-raised) 70%);
    border-bottom: 3px solid var(--club-fondo);
  }
  dialog.dialogo--mesa.mesa--ancha[data-vestida] .mesa__cab::before,
  dialog.dialogo--mesa.mesa--ancha[data-vestida] .mesa__cab::after { display: none; }
  dialog.dialogo--mesa.mesa--ancha .mesa__linea { color: var(--text-secondary); }
}

/* LAS ANIMACIONES DEL MODO (las de `seleccion.css`): al abrir la mesa, la
   escena entra de costado, los datos suben de a uno, la barra del dial se
   llena desde cero y la respuesta late cuando cambia. */
.mesa--ancha[open] .mesa__escena { animation: agv-escena 520ms var(--ease-entrada) both; }
.mesa--ancha.mesa--entra :is(.mesa__ficha, .mesa__chips li, .mesa__seccion, .mesa__dato, .mesa__ayuda > div, .mesa__termino) { animation: agv-sube 380ms var(--ease-entrada) both; }
.mesa--ancha.mesa--entra .mesa__chips li:nth-child(2), .mesa--ancha.mesa--entra .mesa__dato:nth-child(2) { animation-delay: 40ms; }
.mesa--ancha.mesa--entra .mesa__chips li:nth-child(3), .mesa--ancha.mesa--entra .mesa__dato:nth-child(3) { animation-delay: 80ms; }
.mesa--ancha.mesa--entra .mesa__chips li:nth-child(4), .mesa--ancha.mesa--entra .mesa__dato:nth-child(4) { animation-delay: 120ms; }
.mesa--ancha.mesa--entra .mesa__chips li:nth-child(n+5), .mesa--ancha.mesa--entra .mesa__dato:nth-child(n+5) { animation-delay: 160ms; }
.mesa--ancha.mesa--entra .mesa__col--terminos > * { animation: agv-sube 420ms 120ms var(--ease-entrada) both; }
/* La barra del dial NO se anima al entrar: con un scaleX encima, el relleno
   quedaba más corto que el tirador mientras crecía («¿y esto?»). */
.mesa--ancha .mesa__palabra { transition: color 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .mesa--ancha[open] :is(.mesa__escena, .mesa__ficha, .mesa__chips li, .mesa__seccion, .mesa__dato, .mesa__ayuda > div, .mesa__termino, .mesa__col--terminos > *, .dial__lleno) { animation: none; }
}
/* El rótulo de la marca del dial no se encima con el tope: va un renglón más
   abajo y con aire. */
.mesa--ancha .dial__pie { min-height: 36px; }

/* ==========================================================================
   EL PARTE ANCHO (`parteDeMovimiento()` con un club del otro lado): la
   escena a la izquierda y el parte a la derecha, más grande y con las
   cuentas como casillas.
   ========================================================================== */
dialog.dialogo--parte.parte--ancho { width: min(64rem, calc(100vw - 2rem)); max-width: none; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; }
.parte--ancho::backdrop { background: rgb(4 5 8 / 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 761px) {
  dialog.dialogo--parte.parte--ancho[open] { display: grid; }
  dialog.dialogo--parte.parte--ancho { grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); }
}
.parte--ancho .parte__escena { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: end center; min-height: 26rem; padding: var(--sp-7) var(--sp-5); background: var(--ink-950); }
.parte--ancho .parte__escena::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 10 14 / 0.05) 30%, rgb(8 10 14 / 0.6) 65%, rgb(8 10 14 / 0.94) 100%), linear-gradient(120deg, color-mix(in srgb, var(--club-fondo, var(--accent)) 35%, transparent), transparent 60%); }
.parte--ancho[open] .parte__escena { animation: agv-escena 520ms var(--ease-entrada) both; }
.parte__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.parte--ancho .parte__cab { padding: var(--sp-6) var(--sp-6) var(--sp-3); padding-right: 68px; }
.parte--ancho .dialogo__titulo { font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; }
.parte--ancho .parte__cuando { color: var(--text-secondary); }
.parte--ancho .parte__movimientos { padding-inline: var(--sp-6); }
.parte--ancho .parte__balance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) var(--sp-6) 0; padding: 0; border: 0; background: none; }
.parte--ancho .parte__balance .mesa__renglon { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); animation: agv-sube 380ms 120ms var(--ease-entrada) both; }
.parte--ancho .parte__balance .mesa__renglon dt { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.parte--ancho .parte__balance .mesa__renglon dd { margin: 0; text-align: left; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.parte--ancho .parte__balance .mesa__renglon--fuerte { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.parte--ancho .parte__balance .mesa__renglon--fuerte dd { color: var(--accent-texto, var(--accent)); }
.parte--ancho .parte__plantel { margin: var(--sp-4) var(--sp-6) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: rgb(255 255 255 / 0.04); font-size: var(--fs-md); line-height: 1.5; color: var(--text-secondary); border: 0; }
.parte--ancho .dialogo__pie { margin-top: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.parte--ancho .dialogo__pie .action { min-width: 12rem; min-height: 52px; font-size: var(--fs-lg); justify-content: center; }
@media (hover: hover) { .parte--ancho .dialogo__pie .action:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (max-width: 760px) {
  .parte--ancho .parte__escena { min-height: 11rem; padding: var(--sp-4); }
  .parte--ancho .parte__balance { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .parte--ancho[open] .parte__escena, .parte--ancho .parte__balance .mesa__renglon { animation: none; } }
.parte--ancho .parte__ficha { padding: var(--sp-4); border-radius: var(--r-lg); }
.parte--ancho .parte__dorsal { font-size: var(--fs-2xl); }
.parte--ancho .parte__quien { font-size: var(--fs-lg); }
.parte--ancho .parte__eco, .parte--ancho .parte__ruta { font-size: var(--fs-sm); }
.parte--ancho .parte__nota { font-size: var(--fs-sm); line-height: 1.45; }

/* LA BANDERA DEL CLUB QUE PIDE (8/10/2026): en la escena, debajo del nombre,
   con la liga; y en el bloque «Quién lo quiere». Sin PNG, las iniciales. */
.mesa__bandera { display: inline-block; width: 24px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); vertical-align: -2px; }
.mesa__bandera--letras { display: inline-grid; place-items: center; width: auto; min-width: 30px; padding: 0 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-primary); background: rgb(255 255 255 / 0.12); }
.mesa__donde { display: inline-flex; align-items: center; gap: 8px; }
.mesa__escena-pais { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(8 10 14 / 0.55); font-size: var(--fs-sm); color: var(--text-primary); }
.mesa__escena-pais .mesa__bandera { width: 28px; height: 19px; }

/* SIN SCROLL EN LOS TÉRMINOS (8/10/2026, «evitemos scroll»): la columna se
   aprieta —pistas de una línea, las casillas de «para decidir» en una fila de
   tres, menos aire entre términos— para que entre entera en una pantalla. */
@media (min-width: 761px) {
  .mesa--ancha .mesa__col--terminos { overflow: visible; }
  .mesa--ancha .mesa__termino { margin-bottom: var(--sp-3); }
  .mesa--ancha .mesa__termino + .mesa__termino { padding-top: var(--sp-2); }
  .mesa--ancha .mesa__pista { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.4; }
  .mesa--ancha .mesa__ops .mesa__op { padding-block: 6px; }
  .mesa--ancha .mesa__ayuda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .mesa--ancha .mesa__ayuda > div:first-child { grid-column: auto; }
  .mesa--ancha .mesa__ayuda > div { padding: var(--sp-2) var(--sp-3); gap: 2px; }
  .mesa--ancha .mesa__ayuda dd { font-size: var(--fs-lg); }
  .mesa--ancha .mesa__ayuda dd small { font-size: var(--fs-xs); line-height: 1.3; }
  .mesa--ancha .mesa__lectura--terminos { margin-top: var(--sp-3); }
  .mesa--ancha .mesa__lectura--terminos > p { font-size: var(--fs-sm); line-height: 1.45; }
  .mesa--ancha .mesa__veredicto { padding-block: var(--sp-3); }
}

/* EL DIAL DE LA MESA, MÁS CLARO (8/10/2026, «mejoremos este modulito»): la
   pista se ve aunque esté en el mínimo, el relleno va del ácido al verde con
   brillo, el tirador es un disco con anillo que crece al agarrarlo, y la
   marca de lo que ofrecen lleva su rótulo encima del tope. */
.dialogo--mesa .dial__pista { height: 12px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.dialogo--mesa .dial__lleno { min-width: 12px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #3ad07a)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.dialogo--mesa .dial__tirador { width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 4px 10px rgb(0 0 0 / 0.45); transition: transform 140ms var(--ease-entrada), box-shadow 140ms ease; }
@media (hover: hover) { .dialogo--mesa .dial:hover .dial__tirador { width: 22px; height: 22px; margin-left: -11px; transform: scale(1.15); } }
.dialogo--mesa .dial:active .dial__tirador { transform: scale(1.22); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 10px rgb(0 0 0 / 0.45); }
.dialogo--mesa .dial__tick { width: 2px; background: rgb(255 255 255 / 0.55); }
.dialogo--mesa .dial__marca { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }

/* EL TIRADOR NO SE SALE DE LA PISTA (8/10/2026, «se rompe»): en el mínimo el
   disco quedaba medio afuera y encima del tope. La pista deja medio disco de
   aire a cada lado y el control nativo la acompaña. */
.dialogo--mesa .dial__pista { margin-inline: 11px; }
.dialogo--mesa .dial__nativo { left: 0; width: 100%; }
.dialogo--mesa .dial__pie { margin-top: 4px; }

/* EL DIAL SIN PISARSE (8/10/2026, «sigue mal esto»): el disco más chico, sin
   halo debajo cuando está en el mínimo, y los topes un renglón más abajo, de
   modo que el anillo no toque «US$ …». Arrastrando, el tirador va pegado al
   dedo: sin transición en la posición. */
.dialogo--mesa .dial__tirador { width: 18px; height: 18px; margin-left: -9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 3px 8px rgb(0 0 0 / 0.45); transition: transform 140ms var(--ease-entrada), box-shadow 140ms ease; }
@media (hover: hover) { .dialogo--mesa .dial:hover .dial__tirador { width: 18px; height: 18px; margin-left: -9px; transform: scale(1.12); } }
.dialogo--mesa .dial:active .dial__tirador { transform: scale(1.18); }
.dialogo--mesa .dial__pista { margin-inline: 12px; }
.dialogo--mesa .dial__lleno { min-width: 0; box-shadow: none; transition: none; }
.dialogo--mesa .dial__pie { margin-top: 12px; }
/* El parte ancho, centrado (8/10/2026, «centrado»): título, cuándo, la
   ficha y la nota, al medio; la X tiene su propio aire a los dos lados. */
.parte--ancho .parte__cab { padding-inline: 68px; text-align: center; }
.parte--ancho .dialogo__titulo { text-wrap: balance; }
.parte--ancho .parte__rotulo, .parte--ancho .parte__plantel { text-align: center; }
.parte--ancho .dialogo__pie { justify-content: center; }


/* ==========================================================================
   TIRA Y AFLOJA (8/10/2026): lo que ofrecen, clavado a la izquierda con el
   escudo de ellos; una cuerda trenzada que sale de ahí hasta tu mano; arriba
   de la cuerda, la distancia. La cuerda se afina y pasa del ácido al ámbar y
   al coral a medida que estirás. La mano es un disco blanco con las dos
   flechas; agarrada, crece.
   ========================================================================== */
.mesa__nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tira { --tira: 0; --tinta: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ancla dist techo' 'pista pista pista'; align-items: center; gap: 4px 12px; user-select: none; -webkit-user-select: none; margin-top: var(--sp-2); padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.tira[data-tensa='2'] { --tinta: color-mix(in srgb, var(--accent) 45%, #ffb547); }
.tira[data-tensa='3'] { --tinta: color-mix(in srgb, #ffb547 50%, #ff7a6b); }
.tira__ancla, .tira__techo { display: flex; align-items: center; gap: 8px; line-height: 1.1; }
.tira__ancla small, .tira__techo small { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.tira__ancla b, .tira__techo b { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.tira__techo { text-align: right; justify-content: flex-end; }
.tira__techo b { color: var(--text-secondary); }
.tira__escudo .crest { width: 30px; height: 30px; object-fit: contain; }
.tira__ancla { grid-area: ancla; } .tira__techo { grid-area: techo; }
.tira__pista { grid-area: pista; margin-inline: 17px; position: relative; height: 44px; cursor: grab; touch-action: none; outline: none; }
.tira--tirando .tira__pista { cursor: grabbing; }
.tira__pista::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 6px, transparent 6px 12px); }
.tira__cuerda {
  position: absolute; left: 0; top: 50%; width: calc(var(--tira) * 100%); height: calc(10px - var(--tira) * 4px); transform: translateY(-50%); border-radius: 999px;
  background: repeating-linear-gradient(115deg, var(--tinta) 0 6px, color-mix(in srgb, var(--tinta) 70%, #000) 6px 9px);
  box-shadow: 0 0 calc(var(--tira) * 14px) color-mix(in srgb, var(--tinta) 45%, transparent);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.tira__distancia { grid-area: dist; justify-self: center; white-space: nowrap; font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); transition: color 220ms ease; }
.tira[data-tensa='0'] .tira__distancia { color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.tira__mano {
  position: absolute; top: 50%; left: calc(var(--tira) * 100%); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #111;
  box-shadow: 0 0 0 3px var(--tinta), 0 6px 16px rgb(0 0 0 / 0.45);
  transition: transform 140ms var(--ease-entrada), box-shadow 220ms ease;
}
.tira__mano svg { width: 18px; height: 18px; }
@media (hover: hover) { .tira__pista:hover .tira__mano { transform: scale(1.08); } }
.tira--tirando .tira__mano { transform: scale(1.18); box-shadow: 0 0 0 5px var(--tinta), 0 8px 20px rgb(0 0 0 / 0.5); }
.tira__pista:focus-visible .tira__mano { box-shadow: 0 0 0 3px var(--tinta), 0 0 0 6px var(--text-primary); }
@media (max-width: 760px) {
  .tira { grid-template-areas: 'ancla techo techo' 'dist dist dist' 'pista pista pista'; }
  .tira__distancia { justify-self: start; }
}
/* LA DISTANCIA NO SE ENCIMA CON LOS TOPES (9/10/2026, captura del préstamo
   a São Paulo: «+US$ 3k · 28 %» arriba de «Hasta»). Lo que decide si entra
   en el medio es el ancho de la COLUMNA de los términos, no el de la ventana:
   la mesa angosta a 1400 px tiene la columna más chica que la ancha a 900. */
.mesa__termino:has(> .tira) { container-type: inline-size; }
@container (max-width: 520px) {
  .tira { grid-template-areas: 'ancla techo techo' 'dist dist dist' 'pista pista pista'; }
  .tira__distancia { justify-self: start; }
}
/* La marca de lo que piden, cuando no es el tope: una raya fina sobre la
   pista, con el mismo blanco de los topes. */
.tira__ref { position: absolute; top: 50%; width: 2px; height: 22px; margin-left: -1px; transform: translateY(-50%); border-radius: 2px; background: var(--text-secondary); opacity: 0.7; }
.tira[data-sentido='compra'] .tira__techo b { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .tira__mano, .tira__cuerda, .tira__distancia { transition: none; } }

/* NADA SE ENCIMA (8/10/2026, a 1440×900 en WebKit el veredicto se dibujaba
   encima de las casillas de «para decidir»): la fila de los términos era
   `minmax(0, 1fr)` con el desborde visible, y lo que no entraba caía sobre
   la fila de abajo. Ahora los términos ocupan lo que miden; si la mesa no
   entra en la ventana, rueda la mesa entera —nunca se pisan— y en ventanas
   bajas se aprieta lo accesorio: la lectura repetida y los renglones chicos
   de las casillas. */
@media (min-width: 761px) {
  dialog.dialogo--mesa.mesa--ancha { grid-template-rows: auto auto auto auto auto; overflow-y: auto; scrollbar-width: thin; }
  /* El expediente no estira las filas: mide lo que le dejan los términos y
     rueda adentro (`contain: size`); así la mesa entera rueda sólo si los
     términos no entran. */
  .mesa--ancha .mesa__cuerpo > .mesa__col:first-child { contain: size; overflow-y: auto; }
  .mesa--ancha .mesa__escena { position: sticky; top: 0; align-self: start; height: min(100%, calc(100vh - 2rem)); }
}

/* LOS BOTONES NO SE PIERDEN (8/10/2026, Alberto: «los botones se pierden»).
   Cuando la mesa no entra en la ventana rueda entera, y «Todavía no / Pedir»
   quedaban debajo del borde: había que adivinar que se seguía. El pie va
   pegado abajo, siempre a la vista, con una sombra que dice que hay más. */
@media (min-width: 761px) {
  .mesa--ancha .dialogo__pie {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-panel);
    box-shadow: 0 -14px 24px -14px rgb(0 0 0 / 0.8);
  }
}

/* LA NOTA DEL DIAL NO EMPUJA LA MESA (8/10/2026, «cuando aparece texto abajo,
   el modal se agranda, queda mal»). La nota de un término que cambia con el
   valor pasa de un renglón («Aceptan seguro») a tres («Un 59 % más… se
   bajan»), y la ventana crecía y se encogía mientras arrastrabas. Se le
   reserva el alto del texto más largo; las notas fijas no reservan nada. */


/* SIN SCROLL SI SE PUEDE (8/10/2026). Tres cosas, medidas a 1440×900 con la
   oferta del Chacarita (1105 px de mesa en 868 de ventana):
   · el expediente vuelve a medir lo suyo —el `contain: size` lo obligaba a
     rodar adentro aunque la ventana tuviera lugar—;
   · el veredicto pone el texto y la cuenta lado a lado, no uno arriba del otro;
   · la lectura con sus casillas viaja a la columna corta (`mesa.js`). */
@media (min-width: 761px) {
  .mesa--ancha .mesa__cuerpo > .mesa__col:first-child { contain: none; }
  .mesa--ancha .mesa__veredicto { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: var(--sp-5); padding-block: var(--sp-4); }
  .mesa--ancha .mesa__lectura--al-expediente { margin-top: var(--sp-5); }
}
@media (min-width: 761px) {
  /* El expediente en dos columnas: cada dato es un renglón corto (rótulo y
     valor), y a todo el ancho dejaba la mitad de la columna en blanco y la
     mesa el doble de alta. Las secciones cruzan las dos columnas. */
  .mesa--ancha .mesa__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); align-content: start; }
  .mesa--ancha .mesa__seccion { grid-column: 1 / -1; }
  .mesa--ancha .mesa__dato:last-child { border-bottom: 1px solid var(--line); }
  .mesa--ancha .mesa__veredicto .mesa__balance dd { white-space: nowrap; }
}

/* El término plegable: un renglón con su valor, que se abre en el lugar. */
.mesa__termino--plegable > .mesa__plegar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.mesa__termino--plegable > .mesa__plegar::-webkit-details-marker { display: none; }
.mesa__termino--plegable > .mesa__plegar span::before { content: '+'; display: inline-block; width: 1.2em; color: var(--accent); font-weight: 800; transition: transform var(--dur-fast) var(--ease); }
.mesa__termino--plegable[open] > .mesa__plegar { margin-bottom: var(--sp-3); }
.mesa__termino--plegable[open] > .mesa__plegar span::before { transform: rotate(45deg); }
.mesa__termino--plegable > .mesa__plegar:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-primary); }
.mesa__termino--plegable[open] > .mesa__plegar .mesa__cifra { visibility: hidden; }
/* EN PANTALLAS BAJAS, LO ACCESORIO SE ACHICA ANTES DE QUE LA MESA RUEDE: los
   renglones chicos de las casillas y el párrafo de la lectura, que repite
   con palabras lo que las casillas ya muestran. */
@media (min-width: 761px) and (max-height: 1000px) {
  .mesa--ancha .mesa__ayuda dd small { display: none; }
  .mesa--ancha .mesa__lectura--terminos > p { display: none; }
  .mesa--ancha .mesa__veredicto { padding-block: var(--sp-3); }
}
@media (min-width: 761px) and (max-height: 1000px) {
  .mesa--ancha .tira { padding: 6px 12px; margin-top: var(--sp-1); }
  .mesa--ancha .tira__pista { height: 34px; }
  .mesa--ancha .mesa__termino { gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .mesa--ancha .mesa__cab { padding-block: var(--sp-4); }
}

/* EL PARTE ANCHO, MÁS GRANDE Y CON EL CRUCE (8/10/2026). */
dialog.dialogo--parte.parte--ancho { width: min(76rem, calc(100vw - 2rem)); }
.parte--ancho .parte__escena { min-height: 32rem; }
.parte--ancho .mesa__escena-escudo .crest { width: 120px; height: 120px; }
.parte__movimientos--en-cruce { display: none; }
.parte__cruce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  margin: var(--sp-3) var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-tarjeta);
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--club-propio, var(--accent)) 14%, transparent), transparent 55%),
    radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--club-fondo, var(--accent)) 22%, transparent), transparent 55%),
    rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.pcruce__club { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.pcruce__escudo .crest { width: 96px; height: 96px; filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.55)); }
.pcruce__club b { font-size: var(--fs-xl); font-weight: 800; font-stretch: var(--wd-condensed); line-height: 1.1; }
.pcruce__club small { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-xs); }
.pcruce__club small img, .pcruce__club small svg { width: 18px; height: auto; border-radius: 2px; }
.pcruce__club--tuyo small { color: var(--accent); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--fs-2xs); }
.pcruce__medio { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.pcruce__dorsal {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-2xl); font-weight: 900;
  box-shadow: 0 0 26px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.pcruce__nombre { font-size: var(--fs-2xl); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; }
.pcruce__linea { color: var(--text-secondary); font-size: var(--fs-sm); }
.pcruce__flecha { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); }
.pcruce__flecha i { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--accent)); }
.pcruce__flecha i:last-child { background: linear-gradient(90deg, var(--accent), transparent); position: relative; }
.pcruce__flecha i:last-child::after { content: ''; position: absolute; right: 6px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--accent); border-right: 0; }
.pcruce__flecha em { font-style: normal; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.pcruce__nota { grid-column: 1 / -1; margin: var(--sp-2) 0 0; text-align: center; font-size: var(--fs-md); color: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  .parte--ancho[open] .pcruce__club { animation: agv-sube 520ms 120ms var(--ease-entrada) both; }
  .parte--ancho[open] .pcruce__club:last-of-type { animation-delay: 260ms; }
  .parte--ancho[open] .pcruce__flecha i { animation: pcruce-corre 900ms 320ms var(--ease-entrada) both; transform-origin: left; }
  @keyframes pcruce-corre { from { transform: scaleX(0); opacity: 0; } }
}
@media (max-width: 760px) {
  .parte__cruce { grid-template-columns: 1fr 1fr; margin-inline: var(--sp-4); }
  .pcruce__medio { grid-column: 1 / -1; grid-row: 1; }
  .pcruce__escudo .crest { width: 64px; height: 64px; }
}
.pcruce__escudo { display: grid; place-items: center; width: 96px; height: 96px; }
@media (max-width: 760px) { .pcruce__escudo { width: 64px; height: 64px; } }
@media (min-width: 761px) {
  .parte--ancho .parte__escena { min-height: 36rem; }
  .pcruce__escudo { width: 124px; height: 124px; }
  .pcruce__escudo .crest { width: 124px; height: 124px; }
  .parte__cruce { padding-block: var(--sp-7); }
  .pcruce__nombre { font-size: var(--fs-3xl); }
  .pcruce__dorsal { width: 64px; height: 64px; }
  .pcruce__club b { font-size: var(--fs-2xl); }
}

/* LA MESA SIN RODAR A 800 DE ALTO (8/10/2026, Alberto: «arreglá que la mesa
   no ruede a 800 de alto»). Medido con la oferta del Chacarita: a 1440×800
   sobraban 68 px, a 1366×768 98 y a 1280×720 162. Se recorta aire y no
   contenido: los márgenes del expediente, el relleno de las casillas, del
   veredicto y del pie, y la cabecera. */
@media (min-width: 761px) and (max-height: 880px) {
  .mesa--ancha .mesa__cab { padding-block: var(--sp-3); }
  .mesa--ancha .mesa__ficha-hueco { margin-bottom: var(--sp-2); }
  .mesa--ancha .mesa__chips { gap: 4px; }
  .mesa--ancha .mesa__seccion { margin: var(--sp-2) 0 0; }
  .en-modo-club .dialogo--mesa.mesa--ancha .mesa__dato { padding-block: 3px; }
  .mesa--ancha .mesa__dato dt small { display: none; }
  .mesa--ancha .mesa__termino { gap: 4px; margin-bottom: 4px; }
  .mesa--ancha .mesa__ops .mesa__op { padding-block: 4px; }
  .mesa--ancha .mesa__ayuda dd { padding-block: 6px; }
  .mesa--ancha .mesa__veredicto { padding-block: var(--sp-2); }
  .mesa--ancha .dialogo__pie { padding-block: var(--sp-3); }
  .mesa--ancha .dialogo__pie .action { min-height: 44px; }
}
/* Escalada, la foto de la izquierda baja hasta el pie: su alto fijo sale de
   la ventana, que la escala ya no mide igual. */
@media (min-width: 761px) { .mesa--ancha.mesa--escalada .mesa__escena { position: relative; height: auto; align-self: stretch; } }

/* --------------------------------------------------------------------------
   EL AMISTOSO, CON CARA (9/10/2026, «más detalle, dinamismo, fluidez»)
   La ficha del rival elegido, los que más convocan a un toque y la llegada
   de cada rival nuevo: la ficha y la escena entran, no aparecen.
   -------------------------------------------------------------------------- */
.mesa__ficha--club { grid-template-columns: auto minmax(0, 1fr) auto; }
.mesa__ficha-escudo { display: grid; place-items: center; width: 52px; height: 52px; }
.mesa__ficha-escudo .crest { width: 48px; height: 48px; object-fit: contain; }
.mesa__ficha--club .mesa__ficha-id small img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.mesa__chips li[data-tono='bueno'] b { color: var(--good, #57d68d); }
.mesa__chips li[data-tono='malo'] b { color: var(--danger, #ff7a6b); }
.mesa__chips li[data-tono='aviso'] b { color: var(--warn, #f5b942); }

.mesa__destacados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mesa__destacado {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border: 0; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-align: left;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 140ms var(--ease-entrada, ease);
}
.mesa__destacado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa__destacado .crest { flex: none; width: 22px; height: 22px; object-fit: contain; }
@media (hover: hover) { .mesa__destacado:hover { background: rgb(255 255 255 / 0.09); color: var(--text-primary); } }
.mesa__destacado:active { transform: scale(0.97); }
.mesa__destacado[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--text-primary); }
.mesa__destacado:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tira__ref small { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }

@keyframes mesa-llega { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mesa__ficha-hueco--llega, .mesa__escena-club--llega { animation: mesa-llega 280ms var(--ease-entrada, ease-out) both; }
@media (prefers-reduced-motion: reduce) { .mesa__ficha-hueco--llega, .mesa__escena-club--llega { animation: none; } .mesa__destacado { transition: none; } }
.tira[data-tensa='0'] .tira__ref small { opacity: 0; }
.mesa__op strong .crest { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 4px; }
/* Los datos del que sube de las inferiores, debajo del cruce (9/10/2026). */
.pcruce__chips { grid-column: 1 / -1; display: flex; justify-content: center; }
.pcruce__chips .mesa__chips { justify-content: center; }

/* ==========================================================================
   EL PARTE DE LA SIMULACIÓN (9/10/2026, «rediseñemos también la simulación»)
   Dos columnas que entran enteras: la historia a la izquierda y los partidos,
   filtrables, a la derecha, corriéndose por dentro.
   ========================================================================== */
.dialogo--simulacion { width: min(1160px, calc(100vw - 2 * var(--sp-6))); }
.dialogo--parte > .sim { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
.sim__resumen { display: grid; gap: var(--sp-3); align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sim__reparto { padding: var(--sp-4); border-radius: 18px; background: color-mix(in srgb, var(--bg-raised) 60%, transparent); box-shadow: inset 0 0 0 1px var(--line-hairline); display: grid; gap: var(--sp-3); }
.sim__reparto-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.sim__reparto-num b { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sim__reparto-num small, .sim__datos small, .sim__forma-caja > small, .sim__dest small { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.sim [data-tono="bueno"] { --t: var(--good); } .sim [data-tono="aviso"] { --t: var(--warn); } .sim [data-tono="malo"] { --t: var(--danger); }
.sim__reparto-num b, .sim__datos em[data-tono] { color: var(--t); }
.sim__barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line-hairline); }
.sim__barra i { width: var(--w); background: var(--t); transition: width 600ms cubic-bezier(.16,1,.3,1); }
.sim__eco { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-secondary); }
.sim__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-2); }
.sim__datos > div { display: grid; gap: 2px; justify-items: center; text-align: center; padding: var(--sp-3) var(--sp-2); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 50%, transparent); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.sim__datos b { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sim__datos b i { font-style: normal; opacity: 0.5; margin: 0 1px; }
.sim__datos em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }
.sim__forma-caja { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 40%, transparent); }
.sim__forma { display: flex; flex-wrap: wrap; gap: 4px; }
.sim__f { width: 14px; height: 14px; border-radius: 4px; background: var(--line-strong); }
.sim__f--g { background: var(--good); } .sim__f--e { background: var(--warn); } .sim__f--p { background: var(--danger); }
.sim__f--copa { border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, #fff 40%, transparent); }
.sim__dests { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-2); }
.sim__dest { display: grid; gap: 4px; padding: var(--sp-3); border-radius: 16px; background: color-mix(in srgb, var(--t) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 35%, transparent); }
.sim__dest span { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sim__dest b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.sim__dest em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--t); font-variant-numeric: tabular-nums; }
.sim__esc { width: 24px !important; height: 24px !important; flex: none; }
.sim__lista { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-2); }
.sim__filtro { justify-self: start; }
.sim__filtro small { opacity: 0.6; margin-left: 4px; }
.sim__partidos { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0 !important; }
.sim__partidos[data-ver="liga"] .parte__partido[data-copa="1"], .sim__partidos[data-ver="copa"] .parte__partido[data-copa="0"] { display: none; }
@media (max-width: 860px) {
  .dialogo--parte > .sim { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .sim__resumen, .sim__partidos { overflow: visible; }
}
.sim__tabla { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sim__tabla th, .sim__tabla td { padding: 6px var(--sp-2); text-align: center; }
.sim__tabla thead th { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.sim__tabla tbody th { text-align: left; color: var(--text-primary); font-weight: 700; }
.sim__tabla tbody tr > * { background: color-mix(in srgb, var(--bg-raised) 50%, transparent); }
.sim__tabla tbody tr > :first-child { border-radius: 10px 0 0 10px; }
.sim__tabla tbody tr > :last-child { border-radius: 0 10px 10px 0; }
.sim__tabla td[data-tono] { color: var(--t); font-weight: 800; }