/* ==========================================================================
   SHELL — el mundo, la franja, el escenario, el acompañante y la barra de
   cuartos (fase T1; FASE V, V2-C; PLANUI U1; el marco de la vitrina, §0.2)

   Tres capas siempre (PLANUI §5.5): el ambiente (`#fx-ambiente`, src/ui/fx/,
   fijo detras de todo) -> el velo (la noche del tono, para leer) -> el
   contenido. El marco es el de la vitrina (`vitrina/fusion/estilos/base.css`):
   la franja fija arriba, la barra de los cuartos fija abajo (con la
   trayectoria minima), y entre las dos la parada en 12 columnas: el escenario
   a la izquierda y el acompañante (la placa "Vos") a la derecha, apoyados
   abajo; el mundo queda arriba, a la vista. El partido y el mercado son de
   pantalla completa. En el celular, una columna.
   ========================================================================== */

body { padding: 0; }

/* --- El ambiente ---------------------------------------------------------------
   El canvas lo monta src/ui/fx/ (U1k) adentro de este nodo, despues de idle.
   Hasta entonces (o sin WebGL ni respaldo) queda la noche del tono con la luz
   de la era apenas encendida arriba a la derecha. */
.fx-ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 80% 18%, var(--luz-tenue), transparent 70%),
    radial-gradient(40% 50% at 100% 60%, var(--luz-tenue), transparent 75%),
    linear-gradient(180deg, var(--tono-noche) 0%, var(--tono-vacio) 70%);
}

.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* --- El velo ---------------------------------------------------------------------
   Leve: la lectura la garantiza el panel, no un telon; el mundo queda a la
   vista. Es el vacio del tono con una mascara de alfa (los --velo-* de la
   vitrina con op=linea, sin color-mix): sigue al tono solo. Cada pieza lo
   carga donde va su texto (los de la vitrina: base.css, `html[data-pantalla]`). */
.shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--tono-vacio);
  mask-image: linear-gradient(90deg, var(--mascara-medio) 0%, var(--mascara-suave) 38%, var(--mascara-nada) 62%);
}
.shell[data-pieza="inicio"]::before {
  mask-image: linear-gradient(90deg, var(--mascara-lectura) 0%, var(--mascara-medio) 42%, var(--mascara-nada) 64%);
}
.shell[data-pieza="partido"]::before {
  mask-image: linear-gradient(180deg, var(--mascara-suave) 0%, var(--mascara-nada) 30%, var(--mascara-nada) 60%, var(--mascara-medio) 100%);
}
.shell[data-pieza="mercado"]::before {
  mask-image: linear-gradient(90deg, var(--mascara-lectura) 0%, var(--mascara-medio) 40%, var(--mascara-nada) 66%);
}
.shell[data-pieza="final"]::before {
  mask-image: linear-gradient(90deg, var(--mascara-medio) 0%, var(--mascara-nada) 60%);
}

/* --- La franja (la de la vitrina) ----------------------------------------------
   Fija arriba, translucida. La llena `src/ui/franja.js` desde la `vista`:
   mientras el relato cuenta un split, no cambia. Quien sos, tu club, cuando y
   tu numero; los controles al final. */
.franja {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--franja-linea, var(--franja-alto));
  padding: 0 var(--margen);
  background: var(--franja-fondo);
  font: 500 var(--t-rotulo) / 1 var(--f-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.franja::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--linea) 0%, var(--linea) 45%, var(--filete-fuerte) 78%, var(--linea) 100%);
}

.franja-lockup { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.franja-monograma {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--filete);
  font: 900 15px / 1 var(--f-display);
  font-stretch: var(--ancho-numero);
  color: var(--luz-texto);
}
/* El nombre del juego solo en el inicio; en la carrera, el lugar es de quién sos. */
.franja-nombre {
  display: none;
  font: 800 15px / 1 var(--f-display);
  font-stretch: var(--ancho-titulo);
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}
.shell[data-pieza="inicio"] .franja-nombre { display: inline; }
.shell:not([data-pieza="inicio"]) .franja-lockup { display: none; }

.franja-estado {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  white-space: nowrap;
}
.franja-estado:empty { display: none; }
.fr-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr-quien .ln-glifo-rol { width: 18px; height: 18px; }
.fr-handle {
  font: 800 15px / 1 var(--f-display);
  font-stretch: var(--ancho-titulo);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-rol { color: var(--ink-mute); }
.fr-club { min-width: 0; }
.chip-org {
  display: inline-block;
  padding: 6px 11px;
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--ink);
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.chip-org.sin-org { box-shadow: none; padding-left: 0; color: var(--ink-dim); }
.fr-cuando { display: flex; align-items: center; gap: 16px; min-width: 0; overflow: hidden; line-height: 1.6; }
.fr-anio { color: var(--ink); }
.fr-ventana { overflow: hidden; text-overflow: ellipsis; }
.pips { display: inline-flex; gap: 5px; flex: none; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--linea-fuerte); }
.pips i.on { background: var(--luz); box-shadow: 0 0 8px var(--luz); }
.fr-numero { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.fr-num { font-size: 26px; line-height: 1; color: var(--ink); display: inline-block; }
.fr-numero[data-banda="prospecto"] .fr-num { color: var(--nivel-prospecto); }
.fr-numero[data-banda="titular"] .fr-num { color: var(--nivel-titular); }
.fr-numero[data-banda="elite"] .fr-num { color: var(--nivel-elite); }
.fr-numero[data-banda="clase_mundial"] .fr-num { color: var(--nivel-clase_mundial); }
.fr-rango {
  display: inline-grid;
  font: 800 17px / 1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fr-delta { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.fr-delta.sube { color: var(--up); }
.fr-delta.baja { color: var(--down); }
.fr-banda { color: var(--luz-texto); }

.franja-controles { display: flex; gap: var(--s-2); flex: 0 0 auto; margin-left: auto; }
.franja-estado:not(:empty) ~ .franja-controles { margin-left: 0; }
.franja-toggle {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  padding: 0 var(--s-3);
  font: 600 12px / 1 var(--f-mono);
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--ink-dim);
}
.franja-toggle:hover:not(:disabled) {
  background: var(--luz-tenue);
  box-shadow: inset 0 0 0 1px var(--luz-fuerte);
  color: var(--ink);
}
.franja-toggle[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--luz-fuerte);
  color: var(--luz-texto);
}
/* PLANUI §0.4: la velocidad se lee como ESTADO ("VEL 1×", "VEL RÁPIDO"), no como una acción. */
.franja-toggle.franja-vel { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.franja-vel-rotulo { font-size: 9px; letter-spacing: 0.08em; opacity: 0.6; }
.franja-vel[data-velocidad="instantaneo"] .franja-vel-valor { color: var(--luz-texto); letter-spacing: 0.04em; }
/* Inertes hasta que cargan los módulos: que se vean apagados, no rotos. */
.franja-toggle:disabled { opacity: 0.3; cursor: default; }

/* Entre 641 y 1279 px: el club queda en su chip angosto y la ventana se corta primero. */
@media (min-width: 641px) and (max-width: 1279px) {
  .franja { gap: var(--s-4); }
  .franja-estado { column-gap: 16px; }
  .fr-banda, .fr-rol, .pips { display: none; }
  .chip-org { max-width: 18ch; }
}

/* --- La parada: el area entre la franja y la barra (12 columnas) ----------------
   El escenario a la izquierda (8) y el acompañante a la derecha (4), los dos
   apoyados abajo: arriba queda el mundo. Sin acompañante, el escenario toma el
   ancho que su pieza pida. Nunca una columna centrada. */
.shell-cuerpo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  align-items: end;
  min-height: 100vh;
  padding: calc(var(--franja-alto) + 26px) var(--margen) calc(var(--barra-alto) + 22px);
}
.escenario {
  grid-column: 1 / span 8;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.carrera { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; min-width: 0; }

/* El inicio y la final: sin barra de cuartos, el escenario toma el ancho entero. */
.shell[data-pieza="inicio"] .shell-cuerpo { padding-bottom: 32px; }
.shell[data-pieza="inicio"] .escenario,
.shell[data-pieza="partido"] .escenario,
.shell[data-pieza="mercado"] .escenario,
.shell[data-pieza="minijuego"] .escenario,
.shell[data-pieza="final"] .escenario { grid-column: 1 / -1; }
/* El plan como matriz (§7.4) pide una columna más. */
.shell-cuerpo:has(.parada-decision[data-forma="matriz"]) .escenario { grid-column: 1 / span 9; }

/* El acompañante: la placa "Vos" (el panel de contexto de la vitrina). Solo existe a la vista desde 1180 px (el corte de
   siempre, `acompanante.js`), apoyado abajo; si es mas alto que la pantalla, scrollea adentro. */
.acompanante { display: none; }
@media (min-width: 1180px) {
  .acompanante:not([hidden]) {
    display: block;
    grid-column: 9 / span 4;
    align-self: end;
    min-width: 0;
    max-height: calc(100vh - var(--franja-alto) - var(--barra-alto) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .shell-cuerpo:has(.parada-decision[data-forma="matriz"]) .acompanante { grid-column: 10 / span 3; }
}

/* --- Las piezas del escenario (FASE V, V2-B; PLAN.md §V.4) ---------------
   `.shell[data-pieza]` lo escribe solo el director (src/ui/escena.js); cada
   nodo del escenario dice en qué piezas se ve (`data-piezas` en index.html).
   Una regla por pieza esconde lo que no es suyo, sin pisar el `display` de lo
   que sí: el `hidden` propio de cada renderer sigue mandando por
   `[hidden] { display: none !important }` (base.css). Las hojas de las
   familias no le ponen `display` a un nodo con `data-piezas` por su id (un id
   le gana a esta regla): se lo ponen por su clase. */
.shell[data-pieza="inicio"] .escenario [data-piezas]:not([data-piezas~="inicio"]),
.shell[data-pieza="relato"] .escenario [data-piezas]:not([data-piezas~="relato"]),
.shell[data-pieza="decision"] .escenario [data-piezas]:not([data-piezas~="decision"]),
.shell[data-pieza="partido"] .escenario [data-piezas]:not([data-piezas~="partido"]),
.shell[data-pieza="mercado"] .escenario [data-piezas]:not([data-piezas~="mercado"]),
.shell[data-pieza="minijuego"] .escenario [data-piezas]:not([data-piezas~="minijuego"]),
.shell[data-pieza="final"] .escenario [data-piezas]:not([data-piezas~="final"]) { display: none !important; }

/* --- La barra de abajo: los 6 cuartos del cliente + la trayectoria minima ---------
   Fija abajo. No existe en el inicio ni en el minijuego (los cuartos no se abren ahi). */
.cuartos {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: var(--barra-alto);
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 var(--margen);
  background: var(--franja-fondo);
}
.cuartos::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--linea), var(--filete-fuerte) 22%, var(--linea) 50%);
}
.shell[data-pieza="inicio"] .cuartos,
.shell[data-pieza="minijuego"] .cuartos { display: none; }
.cuarto-boton {
  all: unset;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font: 500 var(--t-rotulo) / 1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 140ms ease, background-color 140ms ease;
}
.cuarto-boton .ln-ico { width: 15px; height: 15px; }
.cuarto-boton::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--luz);
  box-shadow: 0 0 10px var(--luz);
  transform: scaleX(0);
  transition: transform 180ms var(--expo);
}
.cuarto-boton:hover { color: var(--ink); background: var(--luz-tenue); }
.cuarto-boton[aria-current="page"] { color: var(--ink); }
.cuarto-boton[aria-current="page"]::after { transform: none; }
.cuarto-boton:active { transform: translateY(1px); }
.cuarto-boton:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; box-shadow: none; }
/* La letra que abre el cuarto (teclado.js), subrayada apenas. */
.cuarto-letra { text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }

/* La trayectoria minima: de los 15 al presente, una cinta de clubes (la pinta franja.js desde la `vista`). */
.trayectoria {
  margin-left: auto;
  align-self: center;
  width: min(520px, 40vw);
  height: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 10px / 1 var(--f-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tr-cinta { flex: 1; display: flex; gap: 3px; height: 100%; min-width: 0; }
.tr-seg {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 0 0 5px;
  border-top: 2px solid var(--linea-fuerte);
  overflow: hidden;
  white-space: nowrap;
}
.tr-seg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.tr-seg.amateur { border-top-style: dotted; }
.tr-seg.actual { border-top-color: var(--luz); color: var(--ink); }
.tr-seg.actual::after {
  content: '';
  position: absolute;
  right: 0;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--luz);
  box-shadow: 0 0 12px var(--luz), 0 0 2px var(--ink);
}
.tr-hoy { color: var(--ink); white-space: nowrap; }

/* --- El chip de contexto (solo celular): abre el cuarto equivalente al acompañante --- */
.chip-contexto { display: none; }

/* --- Las transiciones (PLANUI §6.3, §9.4) -----------------------------------
   Solo en tres lugares (elegir -> resultado, -> partido, -> final); el
   envoltorio es src/ui/fx/transicion.js y pone `html[data-transicion]`
   mientras dura: los nombres existen solo ahi (unicos, y sin efectos fuera
   de la transicion). El overlay no se traga los clics. El ambiente tiene
   nombre propio y animation: none, asi no se congela en una foto.
   PLANUI §0.4 (P1, 1x con mas cuerpo): el escenario viejo sale en 220 ms con
   un leve zoom-out, blur y fundido; el nuevo entra subiendo 24 px con
   scale .985 -> 1 en 420 ms EXPO; y una franja de luz diagonal lo cruza
   (`.fx-barrido`, la pone fx/transicion.js solo en esta transicion: nunca
   con movimiento reducido). Nada pasa de 700 ms. */
::view-transition { pointer-events: none; }
html[data-transicion] .fx-ambiente { view-transition-name: fx-ambiente; }
html[data-transicion] .escenario { view-transition-name: escenario; }
html[data-transicion] .franja { view-transition-name: franja; }
/* W1: la ficha fija va con la franja (su propio nombre: se ve viva durante la transición, con sus números rodando). */
html[data-transicion] .ficha-fija:not([hidden]) { view-transition-name: ficha; }
html[data-transicion] .cuartos { view-transition-name: cuartos; }
::view-transition-group(fx-ambiente),
::view-transition-new(fx-ambiente) { animation: none; }
::view-transition-old(fx-ambiente) { display: none; }
::view-transition-group(root),
::view-transition-group(franja),
::view-transition-group(ficha),
::view-transition-group(cuartos) { animation-duration: var(--dur-entrada); }
::view-transition-group(escenario) { animation-duration: 420ms; animation-timing-function: var(--expo); }
::view-transition-old(escenario) { animation: vt-salir 220ms ease-in both; }
::view-transition-new(escenario) { animation: vt-entrar 420ms var(--expo) both; }
@keyframes vt-salir { to { opacity: 0; transform: scale(0.97); filter: blur(6px); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(24px) scale(0.985); } }
/* La franja de luz: el nodo vive fuera de la pantalla (nunca se ve fuera de la transicion); su grupo la cruza. */
.fx-barrido {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483000;
  pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--luz) 24%, transparent) 47%, color-mix(in srgb, var(--ink) 30%, transparent) 50%, color-mix(in srgb, var(--luz) 24%, transparent) 53%, transparent 64%);
}
html[data-transicion] .fx-barrido { view-transition-name: fx-barrido; }
::view-transition-old(fx-barrido) { display: none; }
::view-transition-new(fx-barrido) { animation: none; }
::view-transition-group(fx-barrido) { animation: vt-barrido 520ms var(--expo) 40ms both; }
@keyframes vt-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* Elegida una opcion (decision.js pone `.eligiendo` en la parada): las no elegidas se apagan y ya no se tocan. */
.parada-decision.eligiendo .opcion:not([aria-pressed="true"]) {
  opacity: 0.4; filter: saturate(0.35); pointer-events: none;
  transition: opacity 240ms var(--expo), filter 240ms var(--expo);
}
/* Con movimiento reducido (PLANUI §0.3: nunca un corte seco) la misma transicion es un fundido de opacidad corto: los
   grupos no se mueven ni cambian de tamaño (base.css ya les saca la animacion) y lo viejo y lo nuevo se cruzan en
   --dur-fundido. El ambiente sigue con su nombre propio y sin animacion (arriba). Lleva !important y el atributo para
   ganarle a la regla de base.css, que apaga toda animacion de las View Transitions con movimiento reducido. */
html[data-transicion='fundido']::view-transition-old(root),
html[data-transicion='fundido']::view-transition-old(escenario),
html[data-transicion='fundido']::view-transition-old(franja),
html[data-transicion='fundido']::view-transition-old(ficha),
html[data-transicion='fundido']::view-transition-old(cuartos) { animation: vt-fundido-sale var(--dur-fundido) linear both !important; }
html[data-transicion='fundido']::view-transition-new(root),
html[data-transicion='fundido']::view-transition-new(escenario),
html[data-transicion='fundido']::view-transition-new(franja),
html[data-transicion='fundido']::view-transition-new(ficha),
html[data-transicion='fundido']::view-transition-new(cuartos) { animation: vt-fundido-entra var(--dur-fundido) linear both !important; }
@keyframes vt-fundido-sale { to { opacity: 0; } }
@keyframes vt-fundido-entra { from { opacity: 0; } }

/* El mapa decisivo que se jugo como minijuego se cuenta en el cara a cara (paradas/minijuego.js): mientras tanto la
   pieza del minijuego lleva la mascara de la transmision. */
.shell[data-pieza="minijuego"]:has(#minijuego[data-fase="transmision"])::before {
  mask-image: linear-gradient(180deg, var(--mascara-suave) 0%, var(--mascara-nada) 30%, var(--mascara-nada) 60%, var(--mascara-medio) 100%);
}

/* ==========================================================================
   El celular (la vitrina: 10 px de costado, una columna). La franja en dos
   renglones; la barra de cuartos con los iconos arriba de la palabra; el
   acompañante en su hoja (el chip "ver contexto" abre el cuarto).
   ========================================================================== */
@media (max-width: 640px) {
  .franja { gap: var(--s-3); padding: 0 14px; }
  .franja-estado {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 5px;
    align-content: center;
  }
  .fr-quien { grid-row: 1; grid-column: 1; }
  .fr-club { display: none; }
  .fr-cuando { grid-row: 2; grid-column: 1; gap: 10px; font-size: 10px; }
  .fr-ventana { display: none; }
  .fr-numero { grid-row: 1 / span 2; grid-column: 2; }
  .fr-num { font-size: 22px; }
  .fr-rango { font-size: 14px; }
  .fr-rotulo, .fr-banda { display: none; }
  .franja-toggle { min-width: 28px; padding: 0 var(--s-2); }
  #ayudaTeclas, #toggleTextos { display: none; }

  .shell-cuerpo { display: block; padding: calc(var(--franja-alto) + 14px) 10px calc(var(--barra-alto) + 18px); }
  .shell[data-pieza="inicio"] .shell-cuerpo { padding-bottom: 24px; }
  .shell::before,
  .shell[data-pieza]::before {
    mask-image: linear-gradient(180deg, var(--mascara-suave) 0%, var(--mascara-medio) 34%, var(--mascara-lectura) 100%);
  }

  .trayectoria { display: none !important; }
  .cuartos { padding: 0; gap: 0; }
  .cuarto-boton { flex: 1; flex-direction: column; justify-content: center; gap: 5px; padding: 0; font-size: 9px; letter-spacing: 0.06em; }
  .cuarto-boton::after { top: 0; bottom: auto; border-radius: 0 0 2px 2px; }
  .cuarto-letra { text-decoration: none; }

  .chip-contexto:not([hidden]) {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 7px;
    height: 28px;
    margin: 0 0 8px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-chip);
    background: var(--panel-hondo);
    box-shadow: inset 0 0 0 1px var(--filete);
    cursor: pointer;
    font: 600 10px / 1 var(--f-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--luz-texto);
  }
}

/* --- La placa "Vos" del acompañante (el panel de contexto de la vitrina) --------------
   La superficie es la de primitivos.css (`.contexto`); adentro, secciones separadas por lineas. Los otros tipos del
   acompañante (la tabla, la previa, el mercado del mundo, la carrera) van en la misma placa, con su kicker. */
.contexto { padding: 18px 20px 14px; }
.ctx-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0;
  font: 500 var(--t-rotulo) / 1.2 var(--f-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ctx-kicker > span:first-child { color: var(--luz-texto); }
.ctx-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 14px 0 12px; }
.ctx-medidor { flex: 1 0 100%; }
.ctx-grande { display: grid; }
.ctx-grande .ctx-rotulo { margin-bottom: 6px; }
.ctx-numero { font-size: var(--t-num-l); line-height: 0.82; color: var(--ink); }
.ctx-lado { display: grid; gap: 5px; padding-bottom: 3px; }
.ctx-banda { font: 800 19px / 1 var(--f-display); font-stretch: var(--ancho-titulo); letter-spacing: -0.02em; color: var(--luz-texto); }
.ctx-sub { font-size: var(--t-chico); color: var(--ink-dim); line-height: 1.3; }
.ctx-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 var(--t-rotulo) / 1 var(--f-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ctx-fila { display: grid; grid-template-columns: 100px 40px 1fr; align-items: baseline; gap: 6px 10px; padding: 9px 0 8px; box-shadow: inset 0 1px 0 var(--linea); }
.ctx-valor { font-size: var(--t-num-s); line-height: 1; }
.ctx-estado { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-chico); color: var(--ink-dim); }
.ctx-delta { display: inline-flex; align-items: center; gap: 3px; font: 500 11px / 1 var(--f-mono); }
.ctx-delta.sube { color: var(--up); }
.ctx-delta.baja { color: var(--down); }
.ctx-rango { margin-left: auto; font: 500 10px / 1 var(--f-mono); color: var(--ink-mute); letter-spacing: 0.08em; }
.cambio-sube .medidor .valor { background: var(--up); }
.cambio-baja .medidor .valor { background: var(--down); }
.cambio-sube .ctx-valor { color: var(--up); }
.cambio-baja .ctx-valor { color: var(--down); }
/* C1a (PLANUI §0.3): cada fila en el color de su eje (`--eje` inline, acompanante.js): el glifo, el valor y el medidor,
   como en la planilla y en "lo que pasó". Cuando el número rueda, el signo va en el valor (--up / --down); el medidor
   sigue diciendo qué se movió. */
.ctx-fila[data-eje] .ctx-rotulo .ln-ico { color: var(--eje); }
.ctx-fila[data-eje] .ctx-valor { color: var(--eje); }
.ctx-fila[data-eje] .medidor .valor,
.ctx-fila[data-eje]:is(.cambio-sube, .cambio-baja) .medidor .valor { background: var(--eje); }
.ctx-fila[data-eje].cambio-sube .ctx-valor { color: var(--up); }
.ctx-fila[data-eje].cambio-baja .ctx-valor { color: var(--down); }
.ctx-pie { margin-top: 6px; display: grid; gap: 2px; }
.ctx-duelo {
  display: grid;
  grid-template-columns: 100px auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 0;
  box-shadow: inset 0 1px 0 var(--linea);
  font-size: var(--t-chico);
  color: var(--ink-dim);
}
.ctx-duelo b { font: 800 16px / 1 var(--f-display); font-stretch: var(--ancho-titulo); color: var(--ink); }
.campeon-foco { cursor: pointer; border-radius: var(--r-control); transition: color 140ms ease; }
.campeon-foco:hover { color: var(--luz-texto); }
/* Los otros tipos: un cuerpo debajo del kicker, con sus filas separadas por lineas. */
.ctx-cuerpo { margin-top: 12px; display: grid; gap: 0; font-size: var(--t-chico); color: var(--ink-dim); }
.ctx-cuerpo > * + * { box-shadow: inset 0 1px 0 var(--linea); }