/* ==========================================================================
   LA TRANSMISION (PLANUI U2b; portado de vitrina/fusion/estilos/partido.css
   con op=linea, §4.9-§4.10). La serie es el cara a cara: la costura del
   ambiente de fondo, la grafica del kit arriba (el marcador, la fuerza, los
   mapas), los nombres gigantes en el medio y una franja de transmision abajo
   (tus libres, el plan como barras, Fearless). La fecha marcada, el mismo
   cara a cara al Bo1 con la p grande. El Swiss, la misma transmision vista en
   un stream. A pantalla completa (sin acompañante). Prefijo tx-.
   ========================================================================== */
.tx {
  /* la interfaz toma el acento del tono de la pantalla (la competicion); los derivados de --luz se recalculan aca */
  --luz: var(--tono-acento);
  --contra: var(--tono-contra);
  --luz-texto: color-mix(in srgb, var(--luz) 52%, var(--ink));
  --luz-suave: color-mix(in srgb, var(--luz) 22%, transparent);
  --luz-tenue: color-mix(in srgb, var(--luz) 10%, transparent);
  --luz-fuerte: color-mix(in srgb, var(--luz) 40%, transparent);
  --filete: color-mix(in srgb, var(--luz) 34%, var(--linea));
  --filete-fuerte: color-mix(in srgb, var(--luz) 70%, transparent);
  position: relative;
}
.tx .panel { background: var(--tx-panel); }
.tx .num { font-family: var(--f-display); font-weight: 900; font-stretch: var(--ancho-numero); letter-spacing: -0.02em; }
.tx .rot-logo { display: inline-grid; place-items: center; height: 16px; }
.tx .rot-logo img { display: block; height: 16px; width: auto; max-width: 44px; object-fit: contain; }
.eq-kicker { display: flex; flex-wrap: wrap; align-items: center; 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); }
.eq-kicker > span:first-child { color: var(--luz-texto); }
@keyframes latido-vivo { 50% { opacity: 0.35; } }

/* ---------- la serie: arriba la grafica, en el medio la costura (los nombres), abajo la franja ---------- */
.tx-serie { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 10px; height: var(--tx-alto); min-height: 520px; }
/* P1: las cartas de carga de cada mapa esperan su entrada a 52vw del centro (fill backwards): sin recorte, la página
   tenía scroll horizontal (1671 px a 1440, 517 a 390). Se recorta solo a lo ancho: VICTORIA/DERROTA sale por arriba. */
.tx-serie { overflow-x: clip; }
.tx-arriba { position: relative; z-index: 3; display: grid; justify-items: center; gap: 8px; }
.tx-mc { min-width: min(600px, 100%); }
.tx-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; width: min(600px, 100%); }
.tx-fuerza { display: flex; align-items: center; gap: 9px; padding: 4px 9px; background: var(--ln-tv-placa); }
.tx-fuerza[data-lado='a'] { justify-content: flex-end; }
.tx-fuerza[data-lado='a'] .tx-fuerza-k { order: -1; justify-items: end; }
.tx-fuerza b { font-size: var(--t-num-s); line-height: 1; color: var(--ink); text-shadow: 0 1px 8px var(--tx-sombra-nombre); }
.tx-fuerza-k { display: grid; gap: 4px; font: 500 10px / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink); }
.tx-fuerza-k small { font-size: 10px; text-shadow: 0 1px 6px var(--tx-sombra-nombre); }
.tx-fuerza-barra { position: relative; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--linea-fuerte); overflow: hidden; }
.tx-fuerza-barra::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--tx-a); }
.tx-fuerza[data-lado='a'] .tx-fuerza-barra::before { transform-origin: right; }
.tx-fuerza[data-lado='b'] .tx-fuerza-barra::before { background: var(--tx-b); }
.tx-mapas { display: flex; gap: 6px; padding: 6px 10px; background: var(--ln-tv-placa); box-shadow: inset 0 0 0 1px var(--ln-tv-raya); }
.tx-mp { position: relative; width: 30px; height: 7px; transform: skewX(-22deg); background: var(--ln-tv-raya); }
.tx-mp[data-decisivo] { width: 40px; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.tx-mp-in { position: absolute; inset: 0; opacity: 0; }
.tx-mp-in[data-res='W'] { opacity: 1; background: var(--tx-a); box-shadow: 0 0 10px var(--tx-a); }
.tx-mp-in[data-res='L'] { opacity: 1; background: var(--tx-b); box-shadow: 0 0 10px var(--tx-b); }
.tx-mp[data-siguiente] { animation: tx-siguiente 1.6s ease-in-out infinite; }
@keyframes tx-siguiente { 50% { box-shadow: inset 0 0 0 1px var(--luz), 0 0 10px var(--luz-fuerte); } }

/* los nombres gigantes: Mona condensada mayuscula, sobre cada mitad de la costura */
.tx-escenario { position: relative; z-index: 2; min-height: 0; }
.tx-caras, .tx-juego, .tx-par { position: absolute; inset: 0; pointer-events: none; }
.tx-par-mapa { visibility: hidden; }
.tx-cara { position: absolute; bottom: 2px; display: grid; gap: 10px; max-width: 46%; }
.tx-cara[data-lado='a'] { left: 0; justify-items: start; }
.tx-cara[data-lado='b'] { right: 0; justify-items: end; text-align: right; }
.tx-cara::before { content: ''; position: absolute; inset: -30% -20% -14%; z-index: -1; pointer-events: none; background: radial-gradient(56% 52% at 50% 64%, var(--velo-medio), var(--velo-nada) 72%); }
.tx-cara-n {
  font: 900 clamp(76px, 9.2vw, 140px) / 0.84 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; text-shadow: 0 3px 0 var(--tx-sombra-nombre), 0 0 40px var(--tx-sombra-nombre);
}
.tx-cara-q {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 9px;
  background: var(--ln-tv-placa); box-shadow: inset 3px 0 0 var(--tx-a), inset 0 0 0 1px var(--ln-tv-raya);
  font: 600 12px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.tx-cara[data-lado='b'] .tx-cara-q { flex-direction: row-reverse; padding: 7px 9px 7px 14px; box-shadow: inset -3px 0 0 var(--tx-b), inset 0 0 0 1px var(--ln-tv-raya); }
.tx-cara-logo { width: 24px; height: 24px; flex: none; }
.tx-logo-b { position: absolute; z-index: 1; width: clamp(96px, 11vw, 160px); height: clamp(96px, 11vw, 160px); transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 10px 30px var(--sombra)); }
.tx-logo-b .ln-tv-logo { width: 100%; height: 100%; }
.tx-logo-b .ln-tv-logo img { width: 100%; height: 100%; object-fit: contain; }
/* sin logo oficial (o sin red): el escudo con las iniciales, al tamaño del logo y en el tono del rival */
.tx-logo-b .ln-tv-mono, .tx-sw-logo-b .ln-tv-mono {
  padding: 0 0 6%; border-radius: 0; clip-path: polygon(50% 0, 100% 13%, 100% 56%, 50% 100%, 0 56%, 0 13%); box-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tx-b) 46%, var(--panel-hondo)), color-mix(in srgb, var(--tx-b) 18%, var(--panel-hondo)));
  font: 900 clamp(26px, 3vw, 44px) / 1 var(--f-display); font-stretch: var(--ancho-numero); letter-spacing: -0.01em; color: var(--ink);
}

/* un mapa: el rotulo, las dos cartas de carga a los costados de la costura y VICTORIA/DERROTA del lado del ganador */
.tx-mapa, .tx-charla, .tx-alerta, .tx-sw-enjuego, .tx-cierre { visibility: hidden; }
.tx-mapa { position: absolute; inset: 0; }
.tx-mapa-n {
  position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; padding: 8px 18px;
  background: var(--ln-tv-placa); box-shadow: inset 0 2px 0 var(--luz), inset 0 0 0 1px var(--ln-tv-raya);
  font: 700 13px / 1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.tx-mapa-n span { color: var(--luz-texto); letter-spacing: 0.12em; }
.tx-carga {
  position: absolute; top: 12%; width: clamp(120px, 11.6vw, 176px); aspect-ratio: 308 / 560; margin: 0; border-radius: 4px; overflow: hidden;
  background: var(--bg-sunken); box-shadow: 0 0 0 1px var(--tx-a), 0 0 34px -8px var(--tx-a), 0 30px 60px -22px var(--sombra);
}
.tx-carga[data-lado='a'] { right: calc(50% + 22px); }
.tx-carga[data-lado='b'] { left: calc(50% + 22px); box-shadow: 0 0 0 1px var(--tx-b), 0 0 34px -8px var(--tx-b), 0 30px 60px -22px var(--sombra); }
.tx-carga-arte { display: block; width: 100%; height: 100%; }
.tx-carga figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 34px 12px 12px; background: linear-gradient(0deg, var(--velo-lectura) 30%, var(--velo-nada)); }
.tx-carga figcaption b { font: 900 24px / 0.9 var(--f-display); font-stretch: var(--ancho-momento); text-transform: uppercase; color: var(--ink); }
.tx-carga figcaption span { display: flex; align-items: center; gap: 6px; font: 600 10.5px / 1.2 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.tx-carga-logo { width: 16px; height: 16px; flex: none; }
.tx-vd { position: absolute; top: -2%; width: 50%; display: grid; justify-items: center; pointer-events: none; }
.tx-vd[data-lado='a'] { left: 0; }
.tx-vd[data-lado='b'] { right: 0; }
.tx-vd .ln-vd { transform: scale(0.64); transform-origin: 50% 0; }
.tx-charla, .tx-alerta { position: absolute; left: 50%; bottom: 6px; z-index: 2; width: min(620px, 52%); transform: translateX(-50%); }
.tx-charla .ln-placa, .tx-alerta .ln-placa { display: grid; max-width: none; width: 100%; }

/* la placa de cierre: el resultado grande, quien se la lleva y el texto del motor */
.tx-cierre { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; gap: 14px; }
.tx-cierre::before { content: ''; position: absolute; inset: -6% -4%; z-index: -1; background: radial-gradient(46% 56% at 50% 48%, var(--velo-lectura), var(--velo-medio) 52%, var(--velo-nada) 78%); }
.tx-cierre-res { display: flex; align-items: center; gap: 26px; }
.tx-cierre-eq { display: flex; align-items: center; gap: 22px; }
.tx-cierre-eq b { font-size: var(--t-num-xl); line-height: 0.82; color: var(--ink-dim); }
.tx-cierre-eq[data-gana] b { color: var(--ink); text-shadow: 0 0 40px var(--tx-a); }
.tx-cierre-eq[data-lado='b'][data-gana] b { text-shadow: 0 0 40px var(--tx-b); }
.tx-cierre-logo { width: 88px; height: 88px; }
.tx-cierre-logo img { width: 100%; height: 100%; object-fit: contain; }
.tx-cierre-guion { font: 900 64px / 1 var(--f-display); font-style: normal; color: var(--ink-mute); }
.tx-cierre-t { font: 900 clamp(46px, 5.6vw, 84px) / 0.9 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); text-align: center; }
.tx-cierre-t[data-gano='true'] { text-shadow: 0 0 34px var(--tx-a); }
.tx-cierre-t[data-gano='false'] { text-shadow: 0 0 34px var(--tx-b); }
.tx-cierre-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: min(900px, 96%); }
.tx-cierre-pie .ln-placa { max-width: min(620px, 100%); }

/* ---------- la franja de transmision: el plan, tus libres como cartas de carga y la tira de Fearless ---------- */
.tx-franja { position: relative; z-index: 3; display: grid; }
.tx-cab { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; column-gap: 20px; row-gap: 6px; padding: 12px 20px 11px; box-shadow: inset 0 -1px 0 var(--linea); }
.tx-cab .rotulo-cat { grid-column: 1 / -1; }
.tx-cab .tx-titulo { margin: 0; font-size: 22px; line-height: 1.1; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-cab .tx-titulo .ln-linea { display: inline; }
.tx-cab .planteo { margin: 0; font-size: 13.5px; min-width: 0; }
.tx-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.tx-cuerpo > section { min-width: 0; padding: 12px 18px 14px; }
.tx-cuerpo > section + section { box-shadow: inset 1px 0 0 var(--linea); }
.tx-k-n { font: 900 13px / 1 var(--f-display); font-stretch: var(--ancho-numero); color: var(--ink); }
.tx-cartas { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tx-carta {
  all: unset; box-sizing: border-box; position: relative; display: block; width: 72px; aspect-ratio: 308 / 560; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: transform 160ms var(--expo), box-shadow 160ms ease;
}
.tx-carta-arte { display: block; width: 100%; height: 100%; }
.tx-carta-n { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 4px 6px; text-align: center; font: 600 11.5px / 1 var(--f-cuerpo); color: var(--ink); background: linear-gradient(0deg, var(--velo-lectura) 35%, var(--velo-nada)); }
.tx-carta[data-campeon]:hover, .tx-carta[data-campeon]:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 0 0 1px var(--tx-a), 0 0 22px -2px var(--tx-a); }
.tx-planes { display: grid; }
.tx-op {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 122px; align-items: center; gap: 14px; height: 42px; padding: 0 12px 0 14px; border-radius: var(--r-control);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tx-a) 12%, transparent) calc(var(--v) * 100%), transparent calc(var(--v) * 100%));
}
.tx-op::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left; transform: scaleX(var(--v)); background: color-mix(in srgb, var(--tx-a) 70%, transparent); }
.tx-op .op-label { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-op-mapas { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.tx-op-mapas i { position: relative; width: 8px; height: 22px; border-radius: 1px; background: var(--linea); transform-origin: bottom; }
.tx-op-mapas i::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 100%); border-radius: inherit; background: var(--ink-dim); }
.tx-op-mapas i[data-decisivo]::before { background: var(--luz); box-shadow: 0 0 8px var(--luz-fuerte); }
.tx-op-mapas i[data-jugado] { background: var(--ln-tv-raya); }
.tx-op-serie { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.tx-op-serie b { font-size: 24px; line-height: 1; color: var(--ink); }
.tx-op[data-mejor] .tx-op-serie b { color: var(--up); }
.tx-op-serie small { font: 500 10px / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.tx-insp { padding: 8px 14px 0; min-height: calc(2.9em + 19px); font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
.tx-insp-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-textos='completos'] .tx-insp-t { -webkit-line-clamp: unset; display: block; }
.tx-insp-t b { font-weight: 600; color: var(--ink); }
.tx-insp-mono { margin-top: 3px; font: 500 12px / 1.35 var(--f-mono); color: var(--ink-dim); }
.tx-serie[data-jugando] .tx-op.bloqueada { opacity: 0.5; }
.tx-qs { display: grid; grid-template-columns: repeat(5, 38px); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tx-q { position: relative; width: 38px; height: 38px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--tono-noche) 70%, transparent); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.tx-q-ico, .tx-q-ico img { display: block; width: 100%; height: 100%; }
.tx-q[data-leido] { box-shadow: inset 0 0 0 1px var(--down), 0 0 14px color-mix(in srgb, var(--down) 50%, transparent); }

/* la fecha: la p grande, las opciones y lo que se juega */
.tx-serie[data-modo='fecha'] .tx-op { grid-template-columns: auto minmax(0, 1fr); }
/* G-fix C1: el Bo1 que frena: cada fila crece con su sello y su premio (no se pisan), y la regla de cada vara en lugar de la p */
.tx-op[data-g1] { height: auto; min-height: 42px; padding-block: 8px; align-items: start; }
.tx-op[data-g1] .op-label { white-space: normal; overflow: visible; line-height: 1.25; }
.tx-op[data-g1] .g1-sello-riesgo { display: flex; margin: 6px 0 0; }
.tx-chance-regla { max-width: 280px; }
.tx-regla { display: grid; gap: 2px; margin: 0; font: 600 14px / 1.35 var(--f-cuerpo); color: var(--ink); }
.tx-regla b { font: 800 10px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.tx-regla[data-riesgo='arriesgado'] b { color: var(--warn); }
.tx-regla[data-riesgo='seguro'] b { color: var(--up); }
.tx-chance { display: grid; align-content: start; gap: 8px; min-width: 180px; }
.tx-chance-p { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.tx-chance-p b { font-size: var(--t-num-l); line-height: 0.86; color: var(--ink); text-shadow: 0 0 26px var(--tx-a); }
.tx-chance-p small { font: 500 10px / 1.2 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-dim); }
.tx-chance-barra { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; transform: skewX(-22deg); background: var(--tx-b); transform-origin: left; }
.tx-chance-barra::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: var(--tx-a); box-shadow: 0 0 12px var(--tx-a); }
.tx-porque { display: grid; align-content: start; gap: 8px; max-width: 320px; }
.tx-porque-t { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* ---------- el celular: la costura parte en vertical (tu lado arriba, el rival abajo) y la franja se apila ---------- */
@media (max-width: 640px) {
  .tx-serie { height: auto; min-height: calc(100vh - var(--franja-alto) - var(--barra-alto) - 32px); grid-template-rows: auto 62vh auto; row-gap: 8px; }
  .tx-mc { min-width: 0; width: 100%; }
  .tx-sub { gap: 10px; }
  .tx-fuerza-barra { width: 36px; }
  .tx-mp { width: 20px; }
  .tx-mp[data-decisivo] { width: 26px; }
  .tx-cara { max-width: 100%; gap: 6px; }
  .tx-cara[data-lado='a'] { top: 18%; bottom: auto; }
  .tx-cara[data-lado='b'] { bottom: 4%; }
  .tx-cara-n { font-size: clamp(54px, 17vw, 80px); }
  .tx-cara-q { font-size: 10.5px; }
  .tx-carga { top: 30%; width: 27vw; }
  .tx-carga[data-lado='a'] { right: calc(50% + 6px); }
  .tx-carga[data-lado='b'] { left: calc(50% + 6px); }
  .tx-carga figcaption b { font-size: 17px; }
  .tx-par-mapa .tx-cara-q { display: none; }
  .tx-cara-escudo { width: clamp(40px, 12vw, 56px); height: clamp(40px, 12vw, 56px); }
  .tx-duelo { font-size: 11px; gap: 6px; max-width: calc(100vw - 40px); }
  .tx-duelo .tx-retrato { width: 22px; height: 22px; }
  .tx-mapa-n { padding: 6px 10px; gap: 4px; max-width: calc(100vw - 32px); }
  .tx-vd { width: 100%; left: 0; right: 0; }
  .tx-vd[data-lado='a'] { top: 0; }
  .tx-vd[data-lado='b'] { top: auto; bottom: 0; }
  .tx-vd .ln-vd { transform: scale(0.6); }
  .tx-vd[data-lado='b'] .ln-vd { transform-origin: 50% 100%; }
  .tx-charla, .tx-alerta { width: 100%; }
  .tx-cierre-eq b { font-size: var(--t-num-l); }
  .tx-cierre-logo { width: 56px; height: 56px; }
  .tx-cab { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 10px; }
  .tx-cab .tx-titulo { font-size: 19px; white-space: normal; }
  .tx-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .tx-cuerpo > section { padding: 12px 14px; }
  .tx-cuerpo > section + section { box-shadow: inset 0 1px 0 var(--linea); }
  .tx-plan { order: -1; }
  .tx-cartas { flex-wrap: wrap; }
  .tx-carta { width: calc((100% - 40px) / 6); min-width: 46px; }
  .tx-op { grid-template-columns: auto minmax(0, 1fr) 64px; height: 46px; }
  .tx-op-mapas { display: none; }
  .tx-op .op-label { white-space: normal; font-size: 14px; line-height: 1.2; }
  .tx-qs { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .tx-q { width: auto; height: auto; aspect-ratio: 1; }
}

/* ---------- el Swiss: la pagina del stream (teñida de la noche de Worlds) y el video adentro del reproductor ---------- */
.tx-swiss { height: var(--tx-alto); min-height: 560px; }
/* P2 (PLANUI §0.5): tres columnas como una plataforma de streaming: el riel EN VIVO, el player (que ocupa lo que queda, 16:9)
   con la info y los paneles, y el chat pegado a la derecha. El mismo gap chico entre las tres. */
.tx-sw {
  position: relative; display: grid; grid-template-columns: var(--tx-rl-ancho) minmax(0, 1fr) var(--tx-chat-ancho); gap: var(--tx-sw-gap); height: 100%;
}
.tx-sw-stream {
  --tx-sw-pw: min(100cqw, calc((var(--tx-alto) - 12px - var(--tx-sw-bajo)) * 16 / 9));
  position: relative; display: flex; flex-direction: column; gap: var(--tx-sw-gap); min-width: 0; min-height: 0; container: tx-col / inline-size;
}
.tx-sw-lateral { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; }
.tx-sw-lateral > *, .tx-sw-stream > * { min-width: 0; }
.tx-sw-player {
  position: relative; flex: none; width: var(--tx-sw-pw); margin-inline: auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-panel); container-type: inline-size;
  box-shadow: 0 0 0 200vmax var(--tx-sw-pagina), inset 0 0 0 1px var(--filete);
}
.tx-sw-player::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--velo-medio) 0%, var(--velo-nada) 24%), linear-gradient(0deg, var(--velo-medio) 0%, var(--velo-nada) 36%); }
.tx-sw-graf { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tx-sw-vivo { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 3px; background: var(--down); font: 700 11px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg-void); }
.tx-sw-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-void); animation: latido-vivo 1.6s ease-in-out infinite; }
.tx-sw-graf > .tx-sw-vivo { position: absolute; top: 14px; left: 16px; margin: 0; }
.tx-sw-agua { position: absolute; top: 12px; right: 16px; display: grid; height: 32px; opacity: 0.86; }
.tx-sw-agua img { display: block; height: 32px; width: auto; }
.tx-sw-graf > .tx-mc { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); min-width: min(620px, 72%); }
.tx-sw-cara { position: absolute; display: grid; gap: 8px; pointer-events: none; }
.tx-sw-cara[data-lado='a'] { left: 4%; top: 37%; justify-items: start; }
.tx-sw-cara[data-lado='a'] .tx-cara-n { font-size: clamp(54px, 9.4cqw, 120px); }
.tx-sw-cara[data-lado='b'] { left: 74%; top: 42%; transform: translate(-50%, -38%); justify-items: center; text-align: center; }
.tx-sw-cara[data-lado='b'] .tx-cara-n { font-size: clamp(26px, 3.8cqw, 50px); }
.tx-sw-cara[data-lado='b'] .tx-cara-q { box-shadow: inset 0 -2px 0 var(--tx-b), inset 0 0 0 1px var(--ln-tv-raya); padding: 6px 10px; }
.tx-sw-logo-b { width: clamp(84px, 15cqw, 190px); height: clamp(84px, 15cqw, 190px); filter: drop-shadow(0 10px 30px var(--sombra)); }
.tx-sw-logo-b img { width: 100%; height: 100%; object-fit: contain; }
.tx-pn-camino { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tx-pn-camino li {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; width: 58px; height: 64px;
  background: var(--ln-tv-placa); box-shadow: inset 0 -3px 0 var(--ln-tv-raya), inset 0 0 0 1px var(--ln-tv-raya);
  font: 600 10px / 1 var(--f-mono); letter-spacing: 0.06em; color: var(--ink);
}
.tx-pn-camino li[data-res='W'] { box-shadow: inset 0 -3px 0 var(--up), inset 0 0 0 1px var(--ln-tv-raya); }
.tx-pn-camino li[data-res='L'] { box-shadow: inset 0 -3px 0 var(--down), inset 0 0 0 1px var(--ln-tv-raya); }
.tx-pn-camino li[data-res='vivo'] { box-shadow: inset 0 -3px 0 var(--luz), inset 0 0 0 1px var(--luz-fuerte); }
.tx-pn-camino span, .tx-pn-camino small { color: var(--ink-dim); }
.tx-pn-camino small { font-size: 9px; text-transform: uppercase; }
.tx-cam-logo { width: 18px; height: 18px; }
.tx-cam-res { position: absolute; inset: 0; display: grid; place-items: center; font: 900 22px / 1 var(--f-display); color: var(--bg-void); background: var(--down); }
.tx-cam-res[data-res='W'] { background: var(--up); }
.tx-sw-juego { z-index: 2; }
.tx-sw-juego .tx-charla { bottom: 56px; width: min(560px, 60%); }
.tx-sw-enjuego {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; padding: 16px 26px 18px;
  background: var(--ln-tv-placa); box-shadow: inset 0 2px 0 var(--luz), inset 0 0 0 1px var(--ln-tv-raya);
}
.tx-enjuego { top: 42%; }
.tx-sw-enjuego-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11px / 1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.tx-sw-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--down); box-shadow: 0 0 10px var(--down); animation: latido-vivo 1.2s ease-in-out infinite; }
.tx-sw-enjuego-vs { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 26px / 1 var(--f-display); font-stretch: var(--ancho-titulo); color: var(--ink); }
.tx-sw-enjuego-p { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: var(--t-chico); color: var(--ink); }
.tx-sw-enjuego-p b { font-size: var(--t-num); }
.tx-sw-vd { top: 10%; }
.tx-sw-vd .ln-vd { transform: scale(0.6); }
/* el reproductor: la barra de controles se esconde sola */
.tx-pl-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 2px; height: 46px; padding: 0 10px;
  border-radius: 0 0 var(--r-panel) var(--r-panel); background: linear-gradient(0deg, var(--stream-barra), var(--stream-nada)); transition: opacity 260ms ease;
}
.tx-sw-player[data-ui='off']:not(:focus-within) .tx-pl-barra { opacity: 0; }
.tx-pl-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-control); cursor: pointer; color: var(--ink); }
.tx-pl-btn:hover { background: var(--stream-control); }
.tx-pl-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tx-pl-btn .pl-ico, .tx-pl-calidad .pl-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-pl-btn .pl-ico.lleno { fill: currentColor; stroke: none; }
.tx-pl-vivo { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; font: 700 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.tx-pl-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--down); box-shadow: 0 0 8px var(--down); }
.tx-pl-espacio { flex: 1; }
.tx-pl-calidad { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font: 600 12px / 1 var(--f-mono); color: var(--ink); }
.tx-sw-player[data-pausa] .tx-sw-graf { filter: brightness(0.6); }

/* la pagina: el canal, EN VIVO, los espectadores, el clip, la racha de hype y los cruces de la ronda */
.tx-sw-info { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 14px 16px; border-radius: var(--r-panel); background: var(--tx-sw-panel); box-shadow: inset 0 0 0 1px var(--filete); }
.tx-sw-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tx-sw-alto); box-shadow: 0 0 0 2px var(--down), inset 0 0 0 1px var(--linea); overflow: hidden; font-style: normal; }
.tx-sw-avatar-logo img { display: block; height: 30px; width: auto; }
.tx-sw-txt { display: grid; gap: 6px; min-width: 0; }
.tx-sw-titulo { margin: 0; font: 650 16.5px / 1.3 var(--f-cuerpo); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sw-canal { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 13.5px; color: var(--ink-dim); }
.tx-sw-canal b { font: 700 14px / 1 var(--f-cuerpo); color: var(--luz-texto); }
.tx-sw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tx-sw-tags span { padding: 4px 9px; border-radius: var(--r-chip); background: var(--tx-sw-alto); font: 600 11.5px / 1 var(--f-cuerpo); color: var(--ink); }
.tx-sw-acciones { display: grid; justify-items: end; gap: 10px; }
.tx-sw-espect { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink-dim); }
.tx-sw-espect b { font-size: 16px; color: var(--ink); }
.tx-sw-fila { display: flex; align-items: center; gap: 14px; }
.tx-clip {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-control); cursor: pointer;
  background: var(--tx-sw-alto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 700 12px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.tx-clip:hover { box-shadow: inset 0 0 0 1px var(--luz-fuerte); }
.tx-clip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tx-clip-et { display: inline-grid; }
.tx-clip-et > span { grid-area: 1 / 1; }
.tx-clip-ya { visibility: hidden; color: var(--tono-contra); }
.tx-clip[data-hecho] .tx-clip-t { visibility: hidden; }
.tx-clip[data-hecho] .tx-clip-ya { visibility: inherit; }
.tx-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-ico.lleno { fill: currentColor; stroke: none; }
.tx-hype { display: grid; gap: 6px; width: 210px; }
.tx-hype-k { display: flex; align-items: center; gap: 6px; font: 700 10.5px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.tx-ico-llama { color: var(--tono-contra); }
.tx-hype-nivel { margin-left: auto; font-weight: 700; color: color-mix(in srgb, var(--tono-contra) 70%, var(--ink)); }
.tx-hype-barra { position: relative; display: block; height: 7px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.tx-hype-in { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); border-radius: inherit; background: linear-gradient(90deg, var(--tono-luz), var(--tono-contra)); transition: transform 600ms var(--expo); }
/* P2: la info se apila cuando la columna del player es angosta */
@container tx-col (max-width: 700px) {
  .tx-sw-info { grid-template-columns: 44px minmax(0, 1fr); padding: 12px 14px; }
  .tx-sw-avatar { width: 44px; height: 44px; }
  .tx-sw-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 10px; }
  .tx-sw-titulo { font-size: 15px; }
}
@media (max-height: 920px) {
  @container tx-col (max-width: 1000px) { .tx-sw-tags { display: none; } }
}
@media (max-height: 820px) {
  @container tx-col (max-width: 1000px) { .tx-pr-op-puntos { display: none; } .tx-pr { gap: 8px; padding-block: 12px 10px; } }
}
/* angosta y baja: la info en tres filas justas (el título, el canal y los tags no se parten) */
@container tx-col (max-width: 1000px) {
  .tx-sw-canal span, .tx-sw-tags { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tx-sw-tags { flex-wrap: nowrap; }
  .tx-sw-info { padding: 12px 14px; }
}

/* ---------- P2 · el riel EN VIVO: los otros cruces como canales y los co-streams; es contexto, nada parece un botón ---------- */
/* el riel y los paneles van encima de la sombra de 200vmax del player (que tiñe la página) */
.tx-riel { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r-panel); background: var(--tx-sw-panel); box-shadow: inset 0 0 0 1px var(--filete); cursor: default; }
.tx-rl-cab { display: flex; align-items: center; gap: 8px; flex: none; height: 42px; margin: 0; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--linea); font: 700 10.5px / 1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.tx-rl-cuerpo { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 4px 0 8px; }
.tx-rl-it[data-fuera], .tx-rl-k[data-fuera] { display: none; }
.tx-rl-k { margin: 10px 14px 4px; font: 700 10px / 1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-rl-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.tx-rl-it { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'av n esp' 'av sub sub'; align-content: center; align-items: center; column-gap: 10px; row-gap: 3px; height: 46px; padding: 0 12px 0 14px; }
.tx-rl-av { grid-area: av; }
.tx-rl-n { grid-area: n; }
.tx-rl-sub { grid-area: sub; }
.tx-rl-esp { grid-area: esp; }
.tx-rl-av { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.tx-rl-dos { overflow: visible; }
.tx-rl-dos .tx-rl-logo { position: absolute; width: 21px; height: 21px; }
.tx-rl-dos .tx-rl-logo:first-child { left: 0; top: 0; }
.tx-rl-dos .tx-rl-logo:last-child { right: 0; bottom: 0; }
.tx-rl-logo img { width: 100%; height: 100%; object-fit: contain; }
.tx-rl-comp { background: var(--tx-sw-alto); }
.tx-rl-comp .tx-rl-logo { width: 22px; height: 22px; }
.tx-rl-comp img { width: 100%; height: 100%; object-fit: contain; }
.tx-rl-ini { font: 800 12px / 1 var(--f-cuerpo); letter-spacing: 0.02em; color: var(--bg-void); box-shadow: inset 0 0 0 2px var(--velo-medio); }
.tx-rl-c1 { background: var(--tx-chat-c1); }
.tx-rl-c2 { background: var(--tx-chat-c2); }
.tx-rl-c3 { background: var(--tx-chat-c3); }
.tx-rl-c4 { background: var(--tx-chat-c4); }
.tx-rl-c5 { background: var(--tx-chat-c5); }
.tx-rl-c6 { background: var(--tx-chat-c6); }
.tx-rl-c7 { background: var(--tx-chat-c7); }
.tx-rl-c8 { background: var(--tx-chat-c8); }
.tx-rl-txt { display: contents; }
.tx-rl-n { min-width: 0; font: 700 13px / 1.15 var(--f-cuerpo); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-rl-sub { min-width: 0; font-size: 11.5px; line-height: 1.15; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-rl-idioma { display: inline-block; margin-right: 6px; padding: 1px 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 700 9.5px / 1.2 var(--f-mono); letter-spacing: 0.06em; color: var(--ink); }
.tx-rl-esp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); }
.tx-rl-esp b { font-weight: 600; }
.tx-rl-punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--down); animation: latido-vivo 1.6s ease-in-out infinite; }

/* ---------- P2 · los paneles del canal (debajo de la info): tu camino en el Swiss y la tabla; solo si hay alto ---------- */
.tx-sw-paneles { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; overflow: hidden; container: tx-pn / size; }
.tx-sw-paneles { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tx-sw-gap); align-items: stretch; }
.tx-pn { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; padding: 12px 14px; border-radius: var(--r-panel); background: var(--tx-sw-panel); box-shadow: inset 0 0 0 1px var(--linea); }
.tx-pn-k { margin: 0; font: 700 10.5px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.tx-pn-tabla { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tx-pn-tabla li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.tx-pn-tabla li > b { font-size: 14px; color: var(--ink); }
.tx-pn-eqs { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.tx-pn-eq { display: inline-flex; align-items: center; gap: 5px; font: 700 12px / 1 var(--f-mono); color: var(--ink-dim); }
.tx-pn-logo { width: 18px; height: 18px; flex: none; }
.tx-pn-logo img { width: 100%; height: 100%; object-fit: contain; }
.tx-pn-eq[data-vos] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--luz); }
@container tx-pn (max-height: 96px) { .tx-pn { display: none; } }
/* ancho y bajo (1920): la tabla en columnas de tres filas */
@container tx-pn (min-width: 1000px) { .tx-pn-tabla { grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 28px; } }

/* el chat vivo: nombres de colores, insignias y emotes propios, destacados */
.tx-chat { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-panel); background: var(--tx-sw-panel); box-shadow: inset 0 0 0 1px var(--filete); overflow: hidden; }
.tx-chat-cab { display: flex; align-items: center; gap: 9px; flex: none; height: 42px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--linea); font-size: 13.5px; color: var(--ink); }
.tx-chat-cab .ln-ico { color: var(--luz-texto); }
.tx-chat-modo { margin-left: auto; font: 500 10.5px / 1 var(--f-mono); color: var(--ink-dim); }
.tx-chat-pista { position: relative; flex: 1; min-height: 0; overflow: hidden; mask-image: linear-gradient(180deg, transparent 0%, var(--mascara) 12%); }
.tx-chat-lista { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; padding: 0; list-style: none; }
.tx-msg { height: var(--tx-msg-alto); padding: 0 14px; font-size: 13.5px; line-height: var(--tx-msg-alto); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-msg b { font-weight: 700; }
.tx-msg[data-alto='2'] { height: calc(var(--tx-msg-alto) * 2); display: grid; align-content: center; }
.tx-msg p { margin: 0; height: calc(var(--tx-msg-alto) * 0.86); line-height: calc(var(--tx-msg-alto) * 0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-msg-destacado { margin: 0 8px; padding: 0 10px; border-radius: 4px; background: color-mix(in srgb, var(--tono-contra) 15%, transparent); box-shadow: inset 3px 0 0 var(--tono-contra); }
.tx-msg-k { font: 700 10px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--tono-contra) 72%, var(--ink)); }
.tx-msg-anuncio { margin: 0 8px; padding: 0 10px; border-radius: 4px; background: color-mix(in srgb, var(--tono-luz) 13%, transparent); box-shadow: inset 3px 0 0 var(--tono-luz); }
.tx-msg-sistema { text-align: center; font-style: italic; color: var(--ink-dim); }
.tx-c1 { color: var(--tx-chat-c1); }
.tx-c2 { color: var(--tx-chat-c2); }
.tx-c3 { color: var(--tx-chat-c3); }
.tx-c4 { color: var(--tx-chat-c4); }
.tx-c5 { color: var(--tx-chat-c5); }
.tx-c6 { color: var(--tx-chat-c6); }
.tx-c7 { color: var(--tx-chat-c7); }
.tx-c8 { color: var(--tx-chat-c8); }
.tx-ins { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.tx-ins-1 { fill: var(--tx-ins-color); }
.tx-ins-2 { fill: none; stroke: var(--tx-ins-tinta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tx-ins-sub1 { --tx-ins-color: var(--tx-ins-sub1); }
.tx-ins-sub2 { --tx-ins-color: var(--tx-ins-sub2); }
.tx-ins-sub2 .tx-ins-2 { fill: var(--tx-ins-sub2); stroke: none; }
.tx-ins-sub3 { --tx-ins-color: var(--tx-ins-sub3); }
.tx-ins-sub4 { --tx-ins-color: var(--tx-ins-sub4); }
.tx-ins-sub4 .tx-ins-2 { fill: var(--tx-ins-tinta); stroke: none; }
.tx-ins-sub5 { --tx-ins-color: var(--tx-ins-sub5-b); }
.tx-ins-sub5 .tx-ins-2 { stroke: var(--tx-ins-sub5); stroke-width: 1; }
.tx-ins-mod { --tx-ins-color: var(--tx-ins-mod); }
.tx-ins-vip { --tx-ins-color: var(--tx-ins-vip); }
.tx-ins-vip .tx-ins-2 { fill: var(--tx-ins-tinta); stroke: none; }
.tx-emote { display: inline-block; width: 24px; height: 24px; margin: 0 1px; vertical-align: -7px; }
.tx-ep-f { fill: var(--tx-e-f); }
.tx-ep-l { fill: var(--tx-e-l); }
.tx-ep-g { fill: var(--tx-e-g); }
.tx-ep-w { fill: var(--tx-e-w); }
.tx-ep-t { fill: none; stroke: var(--tx-e-t); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-ep-k { fill: none; stroke: var(--tx-e-k); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tx-em-garra { --tx-e-f: var(--tx-em-garra-fondo); --tx-e-w: var(--tx-em-garra-t); --tx-e-k: var(--tx-em-garra-f); }
.tx-em-vamo { --tx-e-f: var(--tx-em-vamo-f); --tx-e-w: var(--tx-em-vamo-t); }
.tx-em-fe { --tx-e-f: var(--tx-em-f-f); --tx-e-l: var(--tx-em-fe-f); --tx-e-g: var(--tx-em-fe-l); }
.tx-em-gg { --tx-e-f: var(--tx-em-gg-f); --tx-e-t: var(--tx-em-gg-t); }
.tx-emote.tx-em-f { --tx-e-f: var(--tx-em-f-f); --tx-e-l: var(--tx-em-f-l); --tx-e-g: var(--tx-em-f-t); }
.tx-em-nervio { --tx-e-f: var(--tx-em-nervio-f); --tx-e-l: var(--tx-em-nervio-l); --tx-e-w: var(--tx-em-garra-t); --tx-e-k: var(--tx-em-nervio-t); --tx-e-g: var(--tx-em-nervio-gota); }
.tx-em-ojos { --tx-e-f: var(--tx-em-ojos-f); --tx-e-l: var(--tx-em-ojos-l); }
.tx-em-copa { --tx-e-f: var(--tx-em-copa-f); --tx-e-t: var(--tx-em-copa-t); }
.tx-chat-pie { display: flex; align-items: center; justify-content: center; gap: 10px; flex: none; height: 38px; padding: 0 12px; box-shadow: inset 0 1px 0 var(--linea); font: 600 10.5px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.tx-chat-ojo { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); }

/* AFUERA (o ADENTRO): el takeover sobre la columna del stream; el chat sigue al costado */
.tx-afuera { position: absolute; grid-column: 2; grid-row: 1; inset: 0; z-index: 4; display: grid; align-content: center; padding: 0 5%; pointer-events: none; }
.tx-afuera::before { content: ''; position: absolute; inset: -12px; background: linear-gradient(90deg, var(--velo-lectura) 0%, var(--velo-medio) 44%, var(--velo-nada) 78%); }
.tx-af-apagon { position: absolute; inset: -12px; z-index: 2; background: var(--oscuro-total); opacity: 0; visibility: hidden; }
.tx-af-cuerpo { position: relative; z-index: 1; display: grid; justify-items: start; gap: 14px; max-width: 660px; pointer-events: auto; }
.tx-af-fin { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 11px; background: var(--ln-tv-placa); box-shadow: inset 0 0 0 1px var(--ln-tv-raya); font: 700 11px / 1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.tx-af-fin i { width: 8px; height: 8px; background: var(--ink-mute); }
.tx-af-t {
  display: flex; margin: 0; font: 900 var(--t-momento) / 0.82 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 4px 0 var(--tx-sombra-nombre), 0 0 60px color-mix(in srgb, var(--down) 46%, transparent);
  animation: tx-af-vivo 4.8s ease-in-out infinite;
}
.tx-afuera:not([data-fuera]) .tx-af-t { text-shadow: 0 4px 0 var(--tx-sombra-nombre), 0 0 60px color-mix(in srgb, var(--up) 46%, transparent); }
@keyframes tx-af-vivo { 50% { text-shadow: 0 4px 0 var(--tx-sombra-nombre), 0 0 90px color-mix(in srgb, var(--down) 30%, transparent); } }
.tx-af-l { display: inline-block; }
.tx-af-rec { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.tx-af-rec b { font-size: var(--t-num-l); line-height: 1; color: var(--ink); }
.tx-af-rec span { max-width: 44ch; font-size: var(--t-cuerpo); line-height: 1.4; color: var(--ink); }
.tx-af-dos { display: grid; gap: 6px; }
.tx-af-dos p { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 500 12.5px / 1.2 var(--f-mono); color: var(--ink-dim); }
.tx-af-dos p[data-elegida] { color: var(--ink); }
.tx-af-dos b { font-size: 20px; color: var(--ink); }
.tx-af-dos small { font-size: 12.5px; color: var(--ink-dim); }
.tx-af-cambios { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 9px 12px; background: var(--ln-tv-placa); box-shadow: inset 0 0 0 1px var(--ln-tv-raya); }
.tx-af-cambio { display: inline-flex; align-items: center; gap: 7px; margin: 0; font: 500 12px / 1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.tx-af-cambio b { font-size: 18px; color: var(--ink); }
.tx-af-delta { display: inline-flex; align-items: center; gap: 3px; }
.tx-af-delta.sube { color: var(--up); }
.tx-af-delta.baja { color: var(--down); }

/* ---------- el suspenso del mapa decisivo: la placa entre las dos cartas (la serie) o abajo en el video (el Swiss) ---------- */
.tx-sus {
  position: absolute; left: 50%; top: calc(12% + var(--tx-sus-carta) * 280 / 308); z-index: 2; width: min(200px, 80%);
  display: grid; justify-items: center; gap: 8px; padding: 14px 16px 12px; text-align: center; visibility: hidden;
  transform: translate(-50%, -50%);
  background: var(--ln-tv-placa); box-shadow: inset 0 2px 0 var(--luz), inset 0 0 0 1px var(--ln-tv-raya), 0 26px 56px -20px var(--sombra);
}
.tx-sus-brillo { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 2px 0 var(--ink), 0 0 0 1px var(--ink), 0 0 0 4px var(--luz-fuerte), 0 0 40px 6px var(--luz-fuerte), inset 0 0 26px var(--luz-suave); }
.tx-sus-k { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 12px / 1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.tx-sus-punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--down); box-shadow: 0 0 10px var(--down); animation: latido-vivo 1.2s ease-in-out infinite; }
.tx-sus-linea { margin: 0; font: 600 12.5px / 1.3 var(--f-cuerpo); color: var(--ink-dim); text-wrap: balance; }
.tx-sus-p { display: grid; gap: 5px; width: 100%; margin-top: 2px; }
.tx-sus-nums { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.tx-sus-nums b { font-size: var(--t-num-s); line-height: 1; color: var(--ink); text-shadow: 0 0 18px var(--tx-a); }
.tx-sus-nums b[data-lado='b'] { font-size: 20px; color: var(--ink-dim); text-shadow: none; }
.tx-sus-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.tx-sus-logo { display: grid; width: 24px; height: 24px; }
.tx-sus-barra { position: relative; display: block; height: 8px; overflow: hidden; transform: skewX(-22deg); background: var(--tx-b); box-shadow: 0 0 12px color-mix(in srgb, var(--tx-b) 40%, transparent); }
.tx-sus-si { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); transform-origin: left; background: var(--tx-a); box-shadow: 0 0 14px var(--tx-a); }
.tx-sus-si::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: var(--ink); }
.tx-sus-pie { margin: 0; font: 500 10.5px / 1.3 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-dim); }
.tx-sw-sus { top: 73%; width: min(280px, 58%); }

/* ---------- el mapa decisivo que se jugo como minijuego (PLANUI §0.3, punto 6.1): despues del veredicto, el panel del
   minijuego le deja el lugar al cara a cara (`paradas/minijuego.js` pone data-fase="transmision" y monta la transmision
   en .mj-transmision). Lo demas del panel (el titulo, la apuesta, el widget) queda en el DOM, sin verse. ---------- */
#minijuego[data-fase='transmision'] {
  display: block; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
}
#minijuego[data-fase='transmision']::before,
#minijuego[data-fase='transmision']::after { display: none; }
#minijuego[data-fase='transmision'] > :not(.mj-transmision) { display: none; }
#minijuego:not([data-fase='transmision']) > .mj-transmision { display: none; }

/* el camino quieto: nada late ni respira */
@media (prefers-reduced-motion: reduce) { .tx-mp[data-siguiente], .tx-af-t, .tx-sw-vivo i, .tx-sw-punto, .tx-sus-punto { animation: none; } }
html[data-reducido] :is(.tx-mp[data-siguiente], .tx-af-t, .tx-sw-vivo i, .tx-sw-punto, .tx-sus-punto) { animation: none; }

@media (max-width: 640px) {
  .tx-swiss { height: auto; min-height: 0; }
  .tx-sw { display: flex; flex-direction: column; gap: 0; height: auto; margin: 0 -10px; }
  .tx-sw-player { width: 100%; border-radius: 0; }
  .tx-sw-scroll { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 10px; background: var(--tx-sw-pagina); }
  .tx-sw-scroll > .tx-chat { height: 320px; }
  .tx-sw-graf > .tx-mc { top: 8px; min-width: 0; width: 94%; }
  .tx-sw-graf > .tx-sw-vivo, .tx-sw-agua, .tx-pl-barra { display: none; }
  .tx-sw-cara[data-lado='a'] { top: auto; bottom: 8px; left: 10px; }
  .tx-sw-cara[data-lado='a'] .tx-cara-q, .tx-sw-cara[data-lado='b'] .tx-cara-q { display: none; }
  .tx-sw-cara[data-lado='a'] .tx-cara-n { font-size: 40px; }
  .tx-sw-cara[data-lado='b'] .tx-cara-n { font-size: 16px; }
  .tx-sw-logo-b { width: 64px; height: 64px; }
  .tx-sus { top: 87%; width: min(260px, 74%); gap: 6px; padding: 10px 12px; }
  .tx-sw-sus { top: 73%; width: min(230px, 66%); gap: 4px; padding: 7px 10px; }
  .tx-sw-sus :is(.tx-sus-linea, .tx-sus-pie) { display: none; }
  .tx-sw-sus .tx-sus-k { font-size: 10px; }
  .tx-sw-sus .tx-sus-nums b { font-size: 18px; }
  .tx-sw-sus .tx-sus-nums b[data-lado='b'] { font-size: 15px; }
  .tx-sw-info { grid-template-columns: 44px minmax(0, 1fr); }
  .tx-sw-avatar { width: 44px; height: 44px; }
  .tx-sw-acciones { grid-column: 1 / -1; justify-items: start; margin-top: 10px; }
  .tx-sw-fila { flex-wrap: wrap; }
  .tx-sw-titulo { white-space: normal; font-size: 15px; }
  .tx-afuera { grid-column: auto; grid-row: auto; position: fixed; inset: var(--franja-alto) 0 var(--barra-alto); padding: 0 18px; }
  .tx-af-t { font-size: clamp(64px, 22vw, 96px); }
  .tx-af-rec { flex-direction: column; gap: 6px; }
}

/* ---------- P1 (PLANUI §0.4): equipo contra equipo; el duelo de campeones como segunda linea ---------- */
.tx-cara-eq { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); margin: 0; }
.tx-cara[data-lado='b'] .tx-cara-eq { flex-direction: row-reverse; }
.tx-cara-escudo { width: clamp(64px, 7vw, 112px); height: clamp(64px, 7vw, 112px); flex: none; filter: drop-shadow(0 8px 24px var(--sombra)); }
.tx-cara-escudo img { width: 100%; height: 100%; object-fit: contain; }
.tx-duelo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; white-space: nowrap; overflow: hidden;
  background: var(--ln-tv-placa); box-shadow: inset 0 0 0 1px var(--ln-tv-raya);
  font: 700 13px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.tx-duelo-reposo { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 1; }
.tx-mapa-n .tx-duelo { padding: 0; background: none; box-shadow: none; }
.tx-mapa-k { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.tx-duelo-n[data-lado='a'] { color: color-mix(in srgb, var(--tx-a) 40%, var(--ink)); }
.tx-duelo-n[data-lado='b'] { color: color-mix(in srgb, var(--tx-b) 40%, var(--ink)); }
.tx-duelo-vs { font-style: normal; font-weight: 500; color: var(--ink-dim); letter-spacing: 0.04em; }
.tx-duelo-tuyo { font: 500 10.5px / 1 var(--f-mono); letter-spacing: 0.08em; color: var(--ink-dim); }
.tx-retrato { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 2px; overflow: hidden; background: var(--bg-sunken); box-shadow: 0 0 0 1px var(--tx-a); }
.tx-retrato[data-lado='b'] { box-shadow: 0 0 0 1px var(--tx-b); }
.tx-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tx-sw-cara .tx-cara-escudo { width: clamp(44px, 7cqw, 92px); height: clamp(44px, 7cqw, 92px); }
.tx-sw-duelo { font-size: 12px; }

/* ---------- P1 → P2 · la predicción ES la decisión (la tarjeta de Twitch): encima del video si la columna es ancha; si no,
   saliendo de abajo del video (y ahí se queda cerrada después de elegir, como en Twitch) ---------- */
.tx-swiss:not([data-jugando]) .tx-pl-barra { display: none; }
.tx-swiss .tx-sw-cara[data-lado='a'] { top: 17%; }
.tx-swiss .tx-sw-cara[data-lado='b'] .tx-cara-q { display: none; }
.tx-swiss .tx-sw-cara[data-lado='b'] { transform: translate(-50%, -80%); }
.tx-swiss .tx-sw-logo-b { width: clamp(64px, 10cqw, 128px); height: clamp(64px, 10cqw, 128px); }
.tx-swiss .tx-chat { opacity: 0.86; }
.tx-sw-graf .ln-mc-rotulo { max-width: none; white-space: nowrap; }
/* mientras se juega el Bo1, las caras del video se apagan: el cartel EN JUEGO y el resultado ocupan el centro */
.tx-swiss[data-jugando] .tx-sw-cara { opacity: 0; transition: opacity var(--dur-fundido) ease; }
/* el player angosto (la columna del medio a 1100-1440): la escena se escala con su ancho (cqw); el marcador baja y se
   angosta y tu lado baja con él (la cara del rival la baja `seguir`, en stream.js, hasta debajo del marcador) */
@media (min-width: 641px) {
  @container (max-width: 1000px) {
    .tx-sw-graf > .tx-mc { top: 48px; min-width: 0; width: 92%; }
    .tx-sw-graf .ln-mc-sigla { font-size: clamp(14px, 2.3cqw, 19px); }
    .tx-sw-graf .ln-mc-centro { gap: 8px; padding-inline: 10px; }
    .tx-sw-agua { display: none; }
    .tx-swiss .tx-sw-cara[data-lado='a'] { top: 36%; }
    .tx-swiss .tx-sw-cara[data-lado='a'] .tx-cara-n { font-size: clamp(36px, 8.4cqw, 76px); }
    .tx-swiss .tx-sw-logo-b { width: clamp(52px, 9cqw, 96px); height: clamp(52px, 9cqw, 96px); }
  }
}
.tx-pr {
  --pr-c: var(--pr-0);
  position: relative; z-index: 4; width: min(100%, 760px); margin: -48px auto 0;
  display: grid; gap: 10px; padding: 14px 16px 12px; border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--tx-sw-panel) 94%, transparent); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 2px var(--pr-0), 0 24px 60px -18px var(--sombra);
  animation: tx-pr-late 1.6s ease-in-out infinite;
}
@container tx-col (min-width: 1000px) {
  .tx-sw-stream > .tx-pr { position: absolute; left: 50%; top: calc(var(--tx-sw-pw) * 9 / 16 - 3cqw); width: min(58%, 680px); margin: 0; translate: -50% -100%; }
}
@container tx-col (min-width: 640px) and (max-width: 999.98px) {
  .tx-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 18px; }
  .tx-pr > .tx-pr-cab { grid-column: 1 / -1; }
  .tx-pr > .tx-cab { grid-column: 1; grid-row: 2 / span 2; }
  .tx-pr > .tx-pr-ops { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .tx-pr > .tx-sw-insp { grid-column: 2; grid-row: 3; }
}
@keyframes tx-pr-late { 50% { box-shadow: 0 0 0 2px var(--pr-1), 0 0 34px -4px var(--pr-1), 0 24px 60px -18px var(--sombra); } }
.tx-pr[data-cerrada] { animation: none; box-shadow: 0 0 0 1px var(--linea-fuerte), 0 24px 60px -18px var(--sombra); }
.tx-pr-cab { display: flex; align-items: center; gap: 10px; margin: 0; }
.tx-pr-ico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--pr-0); }
.tx-pr-k { font: 800 13px / 1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.tx-pr-estado {
  margin-left: auto; white-space: nowrap; padding: 5px 10px; border-radius: var(--r-chip); background: var(--pr-1);
  font: 800 11px / 1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  animation: tx-pr-llama 1.1s ease-in-out infinite;
}
@keyframes tx-pr-llama { 50% { transform: scale(1.08); filter: brightness(1.35); } }
.tx-pr[data-cerrada] .tx-pr-estado { animation: none; background: var(--linea-fuerte); }
.tx-pr { grid-template-columns: minmax(0, 1fr); }
.tx-pr > * { min-width: 0; }
.tx-pr .tx-cab { display: block; padding: 0; box-shadow: none; }
.tx-pr .rotulo-cat { display: none; }
.tx-pr .tx-titulo { margin: 0; font-size: clamp(18px, 2.2cqw, 24px); max-width: none; white-space: normal; }
.tx-pr .planteo { margin-top: 6px; font-size: 13px; }
.tx-pr-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.tx-pr-op {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px;
  padding: 10px 12px; border: 0; border-radius: var(--r-control); text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--pr-c) 16%, var(--tx-sw-alto)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pr-c) 50%, transparent);
  color: var(--ink); transition: transform 140ms, box-shadow 140ms, background 140ms;
}
.tx-pr-op[data-color='1'] { --pr-c: var(--pr-1); }
.tx-pr-op[data-color='2'] { --pr-c: var(--pr-2); }
.tx-pr-op[data-color='3'] { --pr-c: var(--pr-3); }
.tx-pr-op:is(:hover, :focus-visible, .apuntada) { transform: translateY(-2px); background: color-mix(in srgb, var(--pr-c) 30%, var(--tx-sw-alto)); box-shadow: inset 0 0 0 2px var(--pr-c), 0 0 24px -6px var(--pr-c); }
.tx-pr-op-t { display: grid; gap: 3px; min-width: 0; }
.tx-pr-op-t .op-label { font: 700 15px / 1.15 var(--f-cuerpo); }
.tx-pr-op-t small { font: 500 10.5px / 1.2 var(--f-mono); color: var(--ink-dim); }
.tx-pr-op-p { font-size: 30px; line-height: 1; color: var(--pr-c); }
.tx-pr-op-barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; position: relative; }
.tx-pr-op-barra::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--pr-c); }
.tx-pr-op-puntos { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 600 11px / 1 var(--f-mono); color: var(--ink-dim); }
.tx-pr-op-puntos svg { width: 13px; height: 13px; color: var(--pr-c); }
.tx-pr-op-votan { margin-left: auto; }
.tx-pr[data-cerrada] .tx-pr-op { cursor: default; }
.tx-pr[data-cerrada] .tx-pr-op:not([data-elegida]) { opacity: 0.4; filter: saturate(0.3); }
.tx-pr-op[data-elegida] { box-shadow: inset 0 0 0 2px var(--pr-c), 0 0 30px -4px var(--pr-c); }
.tx-sw-insp { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); }

/* el riel, colapsado a los avatares entre la tablet y 1279 px */
@media (min-width: 641px) and (max-width: 1279.98px) {
  .tx-sw { grid-template-columns: var(--tx-rl-angosto) minmax(0, 1fr) var(--tx-chat-ancho); }
  .tx-rl-cab { justify-content: center; padding: 0; }
  .tx-rl-cab span, .tx-rl-n, .tx-rl-sub, .tx-rl-esp { display: none; }
  .tx-rl-k { height: 1px; margin: 8px 14px; overflow: hidden; color: transparent; background: var(--linea); }
  .tx-rl-it { grid-template-columns: 32px; grid-template-areas: 'av'; justify-content: center; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-pr, .tx-pr-estado, .tx-rl-punto { animation: none; }
}
html[data-reducido] :is(.tx-pr, .tx-pr-estado, .tx-rl-punto) { animation: none; }
@media (max-width: 640px) {
  .tx-pr { margin-top: -28px; width: auto; }
  .tx-pr-ops { grid-template-columns: minmax(0, 1fr); }
  .tx-pr-op-p { font-size: 24px; }
  .tx-sw-duelo { display: none; }
  /* la tira EN VIVO: los cruces y los co-streams en fila, con scroll propio (nunca el de la página) */
  .tx-riel { overflow: hidden; }
  .tx-rl-cuerpo { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 10px 10px; mask-image: none; scrollbar-width: none; }
  .tx-rl-k { display: none; }
  .tx-rl-lista { display: flex; gap: 8px; }
  .tx-rl-it { width: 240px; flex: none; height: 52px; padding: 0 10px; border-radius: var(--r-control); background: var(--tx-sw-alto); }
}

/* ---------- F1 (PLANUI §0.8) · el tablero del Swiss (components/swiss.js): las rondas por récord, vos, los que se definieron ---------- */
/* en el escritorio, la gráfica de Worlds sobre el video mientras elegís; con el Bo1 en juego se va y vuelven las caras */
.tx-sw-tablero { position: absolute; left: 3%; right: 3%; top: 108px; bottom: 10px; z-index: 1; display: grid; min-height: 0; transition: opacity 0.35s ease, visibility 0s linear 0s; }
.tx-sw-graf[data-tablero] .tx-sw-cara { opacity: 0; transition: opacity 0.35s ease; }
.tx-swiss[data-jugando] .tx-sw-tablero { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.tx-swiss[data-jugando] .tx-sw-graf[data-tablero] .tx-sw-cara { opacity: 1; }
.sw { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; overflow: hidden; padding: 10px 12px; background: var(--velo-medio); box-shadow: inset 0 0 0 1px var(--ln-tv-raya), inset 0 2px 0 var(--luz); backdrop-filter: blur(6px); }
.sw-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font: 700 10.5px / 1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.sw-cab b { font-size: 13px; letter-spacing: 0.04em; color: var(--ink); }
.sw-grilla { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; min-height: 0; }
.sw-ronda, .sw-defs { display: grid; align-content: start; gap: 6px; min-width: 0; }
.sw-ronda[data-encurso] { padding: 4px 4px 0; margin: -4px -4px 0; background: var(--tx-sw-panel); box-shadow: inset 0 2px 0 var(--luz); }
.sw-ronda-k { display: flex; justify-content: space-between; gap: 6px; margin: 0; font: 700 9.5px / 1.1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.sw-ronda-k b { color: var(--ink); }
.sw-pool { display: grid; gap: 2px; }
.sw-pool-k { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.sw-pool-k b { font-size: 11px; color: var(--ink); }
.sw-pool-k small { font: 700 8.5px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--luz); }
.sw-cruces, .sw-def-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sw-cruce { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px; padding: 1px 4px; background: var(--ln-tv-placa); font: 700 10.5px / 1.2 var(--f-mono); }
.sw-cruce[data-tuyo] { box-shadow: inset 0 0 0 1px var(--luz-fuerte); }
.sw-cruce[data-vivo] { box-shadow: inset 0 0 0 1px var(--luz), 0 0 12px var(--luz-fuerte); }
.sw-vs { font: 600 8px / 1 var(--f-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.sw-cruce[data-vivo] .sw-vs { color: var(--luz); }
.sw-eq { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink); }
.sw-cruce .sw-eq:last-child { flex-direction: row-reverse; }
.sw-eq[data-res='perdio'] { opacity: 0.4; }
.sw-eq[data-vos] .sw-sigla { color: var(--luz); }
.sw-logo { width: 14px; height: 14px; flex: none; }
.sw-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sw-sigla { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-def-lista li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 4px; background: var(--ln-tv-placa); font: 700 10.5px / 1.2 var(--f-mono); }
.sw-def--pasaron li { box-shadow: inset 2px 0 0 var(--up); }
.sw-def--afuera li { box-shadow: inset 2px 0 0 var(--down); }
.sw-def-lista li[data-vos] { box-shadow: inset 2px 0 0 var(--luz), inset 0 0 0 1px var(--luz-fuerte); }
.sw-def-lista small { color: var(--ink-dim); }
.sw-def-nadie { margin: 0; font-size: 11px; color: var(--ink-dim); }
/* el celular: la ronda en curso y, al lado, los que ya se definieron; sin scroll horizontal */
.sw--compacto { padding: 10px; border-radius: var(--r-panel); background: var(--tx-sw-panel); backdrop-filter: none; }
.sw--compacto .sw-grilla { grid-auto-flow: row; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sw--compacto .sw-ronda[data-encurso] { margin: 0; padding: 4px; }

/* ---------- F1 · el cuadro de 8 del Mundial en el cara a cara (components/mundial.js:crearCuadroMundial) ---------- */
/* ancho: la gráfica arriba a la izquierda, al lado del marcador; en el celular, debajo del duelo; en el medio no entra */
.tx-arriba > .mundial-cuadro, .tx-cuerpo > .mundial-cuadro { display: grid; gap: 6px; width: 100%; padding: 8px 10px; background: var(--velo-medio); box-shadow: inset 0 0 0 1px var(--ln-tv-raya), inset 0 2px 0 var(--luz); backdrop-filter: blur(6px); font: 700 11px / 1.2 var(--f-mono); color: var(--ink); text-align: left; }
.mundial-cuadro .mundial-rotulo { font: 700 9.5px / 1.1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); opacity: 1; }
.mundial-cuadro .mundial-bracket { gap: 8px; align-items: center; }
.mundial-cuadro .mundial-etapa { gap: 3px; }
.mundial-cuadro .mundial-etapa--ahora .mundial-rotulo { color: var(--luz); }
.mundial-cuadro .mundial-serie { gap: 1px; padding: 2px 5px; border-radius: 0; font-size: 10.5px; background: var(--ln-tv-placa); }
.mundial-cuadro .mundial-serie--tuya { outline: 0; background: var(--ln-tv-placa); box-shadow: inset 2px 0 0 var(--luz); }
.mundial-cuadro .mundial-serie--ahora { box-shadow: inset 0 0 0 1px var(--luz), 0 0 12px var(--luz-fuerte); }
.mundial-cuadro .mundial-equipo { opacity: 0.75; }
.mundial-cuadro .mundial-equipo--gano { opacity: 1; }
.mundial-cuadro .mundial-equipo--perdio { opacity: 0.4; }
.mundial-cuadro .mundial-equipo--vos { opacity: 1; color: var(--luz); }
@media (min-width: 1200px) { .tx-arriba > .mundial-cuadro { position: absolute; top: 0; left: 2%; width: min(330px, calc(48% - 310px)); } }
@media (min-width: 641px) and (max-width: 1199.98px) { .tx-arriba > .mundial-cuadro { display: none; } }
.mundial-cuadro .mundial-equipo-nombre { display: inline-flex; align-items: center; gap: 4px; }
.mundial-cuadro .mundial-equipo-logo { width: 13px; height: 13px; flex: none; }
.mundial-cuadro .mundial-equipo-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mundial-cuadro .mundial-serie { min-height: 34px; justify-content: center; }
/* las rondas jugadas sin escudo (entra la sigla entera con cinco o seis columnas); la de ahora y los definidos, con escudo */
.sw:not(.sw--compacto) .sw-ronda:not([data-encurso]) .sw-logo { display: none; }
/* la ronda de ahora, más ancha que las jugadas: lleva escudos y tu cruce */
.sw:not(.sw--compacto) .sw-grilla { display: flex; align-items: start; }
.sw:not(.sw--compacto) .sw-grilla > * { flex: 1 1 0; }
.sw:not(.sw--compacto) .sw-ronda[data-encurso] { flex-grow: 1.4; }
/* revisión de F1: el escudo que no tiene imagen es texto (`ln-tv-mono`): al lado de la sigla se leía "WG WG" */
.sw-logo:has(.ln-tv-mono), .mundial-equipo-logo:has(.ln-tv-mono) { display: none; }

/* D157 (PLANUI §0.11): el tablero del Swiss entre las rondas de la tanda (paradas/minijuego.js), en la columna de la parada */
.mj-swiss { margin-top: 10px; max-width: 100%; overflow-x: auto; }
.mj-swiss .sw { overflow: visible; }