/* ==========================================================================
   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. En la carta
     del presidente cruza la banda entera y ahí se puede: no hay nada escrito
     debajo. 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%, white 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; }
.dialogo--mesa[data-vestida] .mesa__linea,
.dialogo--mesa[data-vestida] .mesa__contra .label { color: inherit; opacity: 0.78; }
/* 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);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-md);
}

.mesa__lista:hover, .mesa__numero:hover { border-color: var(--line-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); }

.mesa__op {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  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);
}

.mesa__op:hover { border-color: var(--line-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. */
.dialogo--parte {
  width: min(680px, 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__plantel,
.dialogo--parte > .dialogo__pie { flex: none; }

.dialogo--parte > .parte__movimientos,
.dialogo--parte > .parte__balance { 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);
}

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

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

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

/* 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. */