/* ============================================================
   EL OTRO LADO · la doble perspectiva (otro-lado.js)
   La consola de la marca sobre la escena del protagonista, desenfocada y
   enfriada: no ves a la persona, ves lo que dice. Paleta por defecto: la de
   la plataforma de Closensia (azul noche, cian de señal, teal de acción,
   rojo/ámbar/verde de estado). Para otra marca, nuevo_proyecto.py reescribe
   la zona @@OL_PALETA desde proyecto.json › otro_lado.paleta, a partir de
   las pantallas reales de su producto (references/12-doble-perspectiva.md).
   Prefijo tl- («tu lado») en clases y variables.
   ============================================================ */
:root {
  /* Paleta de la consola. Cada color con su versión RGB para las transparencias. */
  /*@@OL_PALETA*/
  --tl-fondo: #0F1629;
  --tl-fondo-rgb: 15, 22, 41;
  --tl-fondo-2: #171E30;
  --tl-fondo-2-rgb: 23, 30, 48;
  --tl-linea: #94B2D6;
  --tl-linea-rgb: 148, 178, 214;
  --tl-texto: #E3E8EF;
  --tl-texto-2: #B4BFCD;
  --tl-texto-3: #7F8B9D;
  --tl-texto-fuerte: #F2F5F9;
  --tl-acento: #14B3A0;
  --tl-acento-rgb: 20, 179, 160;
  --tl-acento-claro: #6DD0C4;
  --tl-acento-claro-rgb: 109, 208, 196;
  --tl-acento-tinta: #021513;
  --tl-accion: #059669;
  --tl-accion-rgb: 5, 150, 105;
  --tl-accion-claro: #64BEA2;
  --tl-accion-oscuro: #047552;
  --tl-accion-tinta: #01150F;
  --tl-alerta: #DC2626;
  --tl-alerta-rgb: 220, 38, 38;
  --tl-alerta-claro: #E97878;
  --tl-naranja: #E8913A;
  --tl-naranja-rgb: 232, 145, 58;
  --tl-naranja-claro: #F2B274;
  --tl-ok: #2FB57B;
  --tl-ok-rgb: 47, 181, 123;
  --tl-ok-claro: #74D6A8;
  --tl-aviso: #EA580C;
  --tl-aviso-rgb: 234, 88, 12;
  --tl-aviso-claro: #F29768;
  --tl-burbuja: #22293A;
  --tl-burbuja-rgb: 34, 41, 58;
  --tl-burbuja-sale: #0C3A3B;
  --tl-burbuja-sale-rgb: 12, 58, 59;
  --tl-tarjeta: #141B2D;
  --tl-tarjeta-borde: #272D3E;
  --tl-tarjeta-lomo: #353B4B;
  --tl-tarjeta-nueva: #0F2131;
  --tl-tarjeta-alerta: #1D1729;
  --tl-panel: #1D2436;
  --tl-tv-fondo-1: #2B2019;
  --tl-tv-fondo-2: #17120E;
  --tl-tv-fondo-3: #100C09;
  --tl-tv-texto: #F1E7DA;
  --tl-tv-texto-rgb: 241, 231, 218;
  --tl-tv-titulo: #F7EFE3;
  --tl-tv-suave: #E9DCCB;
  --tl-tv-apagado: #BFAF9C;
  --tl-tv-acento: #D98B67;
  --tl-tv-boton: #C9704A;
  --tl-tv-brillo: #D68C5A;
  --tl-tv-brillo-rgb: 214, 140, 90;
  --tl-tv-cita: #F2E3C4;
  --tl-tv-resp: #CDBBA6;
  /*@@FIN*/
  /* Tipografías de la pantalla (si no se indican, la de la marca). */
  /*@@OL_FUENTES*/--tl-tv-fuente: 'Inter', var(--fuente); --tl-tv-fuente-titulo: Georgia, 'Times New Roman', serif;/*@@FIN*/

  /* Nombres cortos que usan las reglas. */
  --tl-pn: rgba(var(--tl-fondo-rgb), .86);
  --tl-pn-2: var(--tl-tarjeta);
  --tl-ln: rgba(var(--tl-linea-rgb), .13);
  --tl-ln-2: rgba(var(--tl-linea-rgb), .22);
  --tl-tx: var(--tl-texto);
  --tl-tx-2: var(--tl-texto-2);
  --tl-mu: var(--tl-texto-3);
  --tl-cy: var(--tl-acento);
  --tl-cy-2: var(--tl-acento-claro);
  --tl-teal: var(--tl-accion);
  --tl-red: var(--tl-alerta);
  --tl-org: var(--tl-naranja);
  --tl-grn: var(--tl-ok);
  --tl-amb: var(--tl-aviso);

  /* En el otro lado las cajas son un poco más estrechas: el centro es de lo
     que dice el protagonista (su voz, su pantalla) y necesita aire. */
  --tl-caja-ancho: min(452px, 30.5vw);
  --tl-hueco-x: clamp(16px, 1.5vw, 26px);
}

/* ---------- Conmutador · Su lado / Tu lado ---------- */
.tl-conmutador {
  position: fixed; z-index: 31;
  top: calc(var(--cw-top) + (var(--cw-titulo-alto) - 46px) / 2);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  height: 46px; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.tl-conmutador.cw-activo { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.tl-conmutador button {
  position: relative; z-index: 1;
  min-width: 118px; padding: 0 20px;
  border: 0; background: none; border-radius: 999px;
  font: 800 12.5px/1 var(--fuente);
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: color .45s ease;
}
.tl-conmutador button:hover { color: #fff; }
.tl-conmutador button[aria-pressed="true"] { color: var(--tinta); }
html.tl-tu .tl-conmutador button[aria-pressed="true"] { color: var(--tl-acento-tinta); }
.tl-conmutador button:focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; }
.tl-pulgar {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #F6F2EA;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), background-color .6s ease;
}
html.tl-tu .tl-pulgar { transform: translateX(100%); background: var(--tl-cy); }

/* Invitación: mientras nadie ha cambiado de lado, el botón del otro lado
   late y una pista dice qué hacer. */
.tl-pista {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: rgba(var(--tl-fondo-rgb),.92);
  border: 1px solid rgba(var(--tl-acento-rgb),.45);
  border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.tl-pista i {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-left: 8px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
  font-style: normal; font-size: 10.5px;
}
.tl-invita .tl-pista { opacity: 1; transform: translate(-50%, 0); }
.tl-invita button[data-lado="tu"] { animation: tl-late 2s ease-out infinite; }
@keyframes tl-late {
  0%   { box-shadow: 0 0 0 0 rgba(var(--tl-acento-rgb),.7); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--tl-acento-rgb),0); }
  100% { box-shadow: 0 0 0 12px rgba(var(--tl-acento-rgb),0); }
}

/* ---------- La escena del protagonista, desenfocada y enfriada ---------- */
.cw-lienzo { transition: filter .9s ease, transform .9s ease; }
html.tl-tu .cw-lienzo {
  filter: blur(16px) saturate(.6) brightness(.86);
  transform: scale(1.06);
}
/* Frío por los bordes, donde está la consola; en el centro se intuye la persona. */
.tl-velo {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
  background:
    radial-gradient(42% 52% at 50% 50%, rgba(var(--tl-fondo-2-rgb),.06), rgba(var(--tl-fondo-rgb),.56) 100%),
    linear-gradient(180deg, rgba(var(--tl-fondo-2-rgb),.30), rgba(var(--tl-fondo-rgb),.40));
}
html.tl-tu .tl-velo { opacity: 1; }

/* ---------- Caras que se dan la vuelta ---------- */
.cw-carril > .glass, .cw-indicador-panel, .tl-cara, .tl-sismo-panel {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
/* Mientras gira, el panel de su lado sigue en su sitio; al acabar, cada lado
   esconde la curva que no es suya. */
html.tl-lado-tu .cw-indicador-panel { visibility: hidden; }
html:not(.tl-lado-tu) .tl-sismo { visibility: hidden; }

/* ---------- Columna y cajas de tu lado ---------- */
.tl-columna { width: var(--tl-caja-ancho); }
.tl-hueco-titulo { flex: 0 0 var(--cw-titulo-alto); }
.tl-carril--A { flex: 1 1 0; min-height: 0; flex-direction: column; }
.tl-carril--B { flex: 1.14 1 0; min-height: 0; flex-direction: column; }
.tl-carril--C {
  position: fixed; z-index: 5;
  right: var(--margen);
  top: var(--cw-cajas-top); bottom: var(--cw-cajas-bottom);
  width: var(--tl-caja-ancho);
  flex-direction: column;
  pointer-events: none;
}

.tl-cara {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(14px, 1.25vw, 20px) clamp(14px, 1.3vw, 20px) clamp(12px, 1.1vw, 18px);
  color: var(--tl-tx);
  background: linear-gradient(180deg, rgba(var(--tl-fondo-2-rgb),.86), rgba(var(--tl-fondo-rgb),.9));
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(var(--tl-acento-rgb),.24);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}
/* Al terminar de girar, un reflejo cruza el cristal: es el mismo vidrio,
   visto desde el otro lado. */
.tl-cara::after {
  content: ''; position: absolute; inset: -10% -40%; z-index: 4;
  background: linear-gradient(105deg, transparent 38%, rgba(160,220,232,.16) 48%, rgba(255,255,255,.07) 51%, transparent 60%);
  transform: translateX(-70%);
  opacity: 0;
  pointer-events: none;
}
html.tl-entrando.tl-lado-tu .tl-cara::after { animation: tl-reflejo .72s cubic-bezier(.3,.6,.3,1) .3s; }
@keyframes tl-reflejo {
  0%   { transform: translateX(-70%); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(70%); opacity: 0; }
}

.tl-cab {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  column-gap: 12px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--tl-ln);
}
.tl-sobre {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tl-cy);
  margin-bottom: 3px;
}
.tl-tit {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
  color: #fff;
}
.tl-cab-meta {
  font-size: 11px; font-weight: 600;
  color: var(--tl-mu);
  white-space: nowrap;
  padding-bottom: 3px;
}
.tl-ico { display: inline-flex; width: 14px; height: 14px; flex: 0 0 auto; }
.tl-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- A · Lo que llega ---------- */
.tl-hilo {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px);
  mask-image: linear-gradient(180deg, transparent 0, #000 42px);
}
.tl-hilo-vacio {
  position: absolute; left: 0; right: 0; top: 50%;
  margin: 0; text-align: center;
  font-size: 13px; color: var(--tl-mu);
  opacity: 0; transition: opacity .4s ease;
}
.tl-hilo-vacio.tl-on { opacity: 1; }
/* Cada mensaje nace con altura cero y se abre (grid 0fr → 1fr): los de
   arriba suben, como en cualquier bandeja en directo. */
.tl-msg {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; margin-top: 0;
  transition: grid-template-rows .55s cubic-bezier(.2,.75,.25,1), opacity .45s ease, margin-top .55s ease;
}
.tl-msg > div { min-height: 0; overflow: hidden; }
.tl-msg.tl-on { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; transition-delay: var(--tl-retraso, 0ms); }
.tl-msg--sep > div > span {
  display: flex; align-items: center; gap: 10px;
  padding-top: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tl-mu);
}
.tl-msg--sep > div > span::after { content: ''; flex: 1; height: 1px; background: var(--tl-ln); }
.tl-bur {
  max-width: 92%;
  padding: 9px 12px 10px;
  border-radius: 12px;
  background: var(--tl-burbuja);
  border: 1px solid rgba(255,255,255,.05);
  border-bottom-left-radius: 4px;
}
.tl-msg--out .tl-bur {
  margin-left: auto;
  background: var(--tl-burbuja-sale);
  border-color: rgba(var(--tl-accion-rgb),.22);
  border-bottom-left-radius: 12px; border-bottom-right-radius: 4px;
}
.tl-msg.tl-on:last-child .tl-bur { animation: tl-destello 1.6s ease-out; }
@keyframes tl-destello {
  0%   { box-shadow: 0 0 0 0 rgba(var(--tl-acento-rgb),.55); }
  100% { box-shadow: 0 0 0 10px rgba(var(--tl-acento-rgb),0); }
}
.tl-bur-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--tl-mu);
  margin-bottom: 4px;
}
.tl-msg--in .tl-bur-meta .tl-ico { color: var(--tl-cy-2); }
.tl-msg--out .tl-bur-meta .tl-ico { color: var(--tl-accion-claro); }
.tl-bur-orig { margin: 0; font-size: clamp(13px, .98vw, 14.5px); line-height: 1.38; color: var(--tl-texto-fuerte); font-weight: 600; }
.tl-bur-trad { margin: 3px 0 0; font-size: clamp(12px, .88vw, 13px); line-height: 1.38; color: var(--tl-tx-2); }
.tl-msg--out .tl-bur-trad { color: var(--tl-accion-claro); font-style: italic; }
.tl-sis {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--tl-accion-rgb),.5);
  background: rgba(var(--tl-accion-rgb),.08);
  font-size: 12.5px; line-height: 1.35; color: var(--tl-tx);
}
.tl-sis .tl-ico { color: var(--tl-accion-claro); }
.tl-sis b { color: #fff; }
.tl-sis time { margin-left: auto; font-size: 10.5px; color: var(--tl-mu); font-weight: 700; }

/* ---------- B · Lo que entiende Closensia ---------- */
.tl-sentido { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; }
.tl-estado {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}
.tl-estado.tl-on { opacity: 1; transform: none; transition-delay: .12s; }
.tl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.35;
  white-space: nowrap;
}
.tl-pill--red  { background: rgba(var(--tl-alerta-rgb),.17);  color: var(--tl-alerta-claro); }
.tl-pill--org  { background: rgba(var(--tl-naranja-rgb),.17); color: var(--tl-naranja-claro); }
.tl-pill--grn  { background: rgba(var(--tl-ok-rgb),.17); color: var(--tl-ok-claro); }
.tl-pill--teal { background: rgba(var(--tl-accion-rgb),.17); color: var(--tl-accion-claro); }
.tl-pill--amb  { background: rgba(var(--tl-aviso-rgb),.17); color: var(--tl-aviso-claro); }
.tl-pill--mu   { background: rgba(255,255,255,.07); color: var(--tl-tx-2); }
.tl-bloque {
  padding: 9px 11px 10px;
  border-radius: 7px;
  border: 1px solid var(--tl-ln);
  background: rgba(255,255,255,.025);
}
.tl-bloque b {
  display: block; margin-bottom: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tl-mu);
}
.tl-bloque p { margin: 0; font-size: clamp(12.5px, .96vw, 14px); line-height: 1.42; color: var(--tl-tx); }
.tl-bloque--cy  { border-color: rgba(var(--tl-accion-rgb),.38); background: rgba(var(--tl-accion-rgb),.07); }
.tl-bloque--cy b  { color: var(--tl-accion-claro); }
.tl-bloque--red { border-color: rgba(var(--tl-alerta-rgb),.45); background: rgba(var(--tl-alerta-rgb),.08); }
.tl-bloque--red b { color: var(--tl-alerta-claro); }
.tl-bloque--amb { border-color: rgba(var(--tl-aviso-rgb),.42); background: rgba(var(--tl-aviso-rgb),.07); }
.tl-bloque--amb b { color: var(--tl-aviso-claro); }
.tl-bloque--grn { border-color: rgba(var(--tl-ok-rgb),.42); background: rgba(var(--tl-ok-rgb),.07); }
.tl-bloque--grn b { color: var(--tl-ok-claro); }
.tl-valor {
  margin: 0; margin-top: auto;
  padding: 8px 11px;
  border-radius: 7px;
  border: 1px solid rgba(var(--tl-alerta-rgb),.55);
  background: linear-gradient(90deg, rgba(var(--tl-alerta-rgb),.18), rgba(var(--tl-alerta-rgb),.06));
  font-size: 12.5px; color: var(--tl-alerta-claro);
}
.tl-valor b { font-size: 15px; color: #fff; }
.tl-reposo { margin: auto 0; text-align: center; font-size: 13px; color: var(--tl-mu); }
.tl-analiza {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 6px;
  font-size: 13px; font-weight: 700; color: var(--tl-cy-2);
}
.tl-analiza .tl-ico { animation: tl-gira 1.4s linear infinite; }
@keyframes tl-gira { to { transform: rotate(360deg); } }
.tl-hueso {
  display: block; height: 34px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(var(--tl-acento-rgb),.16) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: tl-barrido 1.2s linear infinite;
}
.tl-hueso--corto { width: 62%; }
@keyframes tl-barrido { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- C · Lo que haces tú: Action Board ---------- */
.tl-tablero { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; overflow: hidden; }
/* Las columnas siguen hacia abajo, como en el tablero real: se funden con el
   panel (por debajo del aviso del móvil, que va encima). */
.tl-tablero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 2;
  background: linear-gradient(180deg, rgba(var(--tl-fondo-rgb),0), rgba(var(--tl-fondo-rgb),.96));
  pointer-events: none;
}
.tl-tab-entrada {
  position: relative;
  height: 100px;
  border-radius: 7px;
  border: 1px dashed rgba(var(--tl-acento-rgb),.3);
  background: rgba(var(--tl-acento-rgb),.04);
}
.tl-tab-entrada::after {
  content: attr(data-vacia);
  position: absolute; left: 0; right: 0; top: 52%;
  text-align: center;
  font-size: 11.5px; color: var(--tl-mu);
  opacity: 0; transition: opacity .4s ease;
}
.tl-tab-entrada.tl-vacia::after { opacity: .75; }
.tl-tab-rot {
  position: absolute; left: 9px; top: 6px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tl-cy-2);
}
.tl-tab-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 10px;
}
.tl-tab-col {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--tl-tx-2);
  white-space: nowrap;
}
.tl-tab-col b {
  min-width: 18px; padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 10px; text-align: center; color: #fff;
}
.tl-tab-col--red  { box-shadow: inset 0 -2px 0 rgba(var(--tl-alerta-rgb),.7); }
.tl-tab-col--teal { box-shadow: inset 0 -2px 0 rgba(var(--tl-accion-rgb),.7); }
.tl-tab-col--grn  { box-shadow: inset 0 -2px 0 rgba(var(--tl-ok-rgb),.5); }
.tl-tab-col--amb  { box-shadow: inset 0 -2px 0 rgba(var(--tl-aviso-rgb),.6); }
.tl-tab-col--org  { box-shadow: inset 0 -2px 0 rgba(var(--tl-naranja-rgb),.6); }
.tl-tab-col--cy   { box-shadow: inset 0 -2px 0 rgba(var(--tl-acento-rgb),.6); }
.tl-tab-col--mu   { box-shadow: inset 0 -2px 0 rgba(255,255,255,.18); }
.tl-tab-vacia {
  position: absolute; left: 0; top: 0;
  margin: 0; padding: 12px 6px;
  text-align: center;
  font-size: 11.5px; color: var(--tl-mu);
  border: 1px dashed var(--tl-ln-2); border-radius: 6px;
  opacity: 0; transition: opacity .4s ease;
}
.tl-tab-vacia.tl-on { opacity: 1; }

.tl-tarjeta {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 8px 8px;
  border-radius: 6px;
  background: var(--tl-pn-2);
  border: 1px solid var(--tl-tarjeta-borde);
  border-left: 3px solid var(--tl-tarjeta-lomo);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .45s ease, border-color .45s ease, background-color .45s ease;
}
.tl-tarjeta--oculta { opacity: 0; }
.tl-tarjeta--entrada { border-color: rgba(var(--tl-acento-rgb),.6); border-left-color: var(--tl-cy); background: var(--tl-tarjeta-nueva); animation: tl-llega 1.2s ease-out; }
/* La tarjeta toma el tono de su columna: tl-tarjeta--c-<tono>. */
.tl-tarjeta--c-red  { border-color: rgba(var(--tl-alerta-rgb),.55); border-left-color: var(--tl-red); background: var(--tl-tarjeta-alerta); }
.tl-tarjeta--c-teal { border-left-color: var(--tl-teal); }
.tl-tarjeta--c-grn  { border-left-color: rgba(var(--tl-ok-rgb),.7); }
.tl-tarjeta--c-amb  { border-left-color: var(--tl-amb); }
.tl-tarjeta--c-org  { border-left-color: var(--tl-org); }
.tl-tarjeta--c-cy   { border-left-color: var(--tl-cy); }
@keyframes tl-llega {
  0%   { box-shadow: 0 0 0 0 rgba(var(--tl-acento-rgb),.6), 0 6px 16px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 0 12px rgba(var(--tl-acento-rgb),0), 0 6px 16px rgba(0,0,0,.25); }
}
.tl-tj-tit { font-size: 12px; font-weight: 700; line-height: 1.25; color: #fff; }
.tl-tj-meta { font-size: 10px; color: var(--tl-mu); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Recién llegada: solo qué es y cómo la lee Closensia. */
.tl-tarjeta--entrada .tl-tj-meta { display: none; }
.tl-tj-estado { align-self: flex-start; margin-top: 2px; font-size: 10px; padding: 2px 7px; white-space: normal; }
.tl-tj-valor {
  display: none;
  font-size: 10.5px; font-weight: 800; color: var(--tl-alerta-claro);
}
.tl-tj-valor.tl-on { display: block; }

/* El aviso en el móvil de alguien del equipo */
.tl-movil {
  position: absolute; left: 7%; right: 7%; bottom: 8px; z-index: 3;
  display: grid; gap: 3px;
  padding: 10px 13px 11px;
  border-radius: 14px;
  background: rgba(244,246,249,.97);
  color: #0B1220;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.tl-movil.tl-on { opacity: 1; transform: none; }
.tl-movil-app {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #4B5565;
}
.tl-movil-app .tl-ico { color: #1FA855; }
.tl-movil-app time { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.tl-movil b { font-size: 13.5px; }
.tl-movil p { margin: 0; font-size: 12.5px; line-height: 1.35; color: #2B3444; }
.tl-movil-boton {
  justify-self: start; margin-top: 5px;
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--tl-teal); color: var(--tl-accion-tinta);
  font-size: 11.5px; font-weight: 800;
  transition: transform .15s ease, box-shadow .3s ease, background-color .3s ease;
}
.tl-movil-boton.tl-on { transform: scale(.94); background: var(--tl-accion-oscuro); color: #fff; box-shadow: 0 0 0 5px rgba(var(--tl-accion-rgb),.25); }

.tl-tu-linea {
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(var(--tl-acento-rgb),.08);
  border: 1px solid rgba(var(--tl-acento-rgb),.32);
  font-size: clamp(13px, 1vw, 14.5px); line-height: 1.4;
  color: var(--tl-tx);
  min-height: 3.9em;
}
.tl-tu-linea > b {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tl-cy);
}
.tl-tu-texto b { color: #fff; }
.tl-tu-texto.tl-entra { animation: tl-texto .6s cubic-bezier(.2,.75,.25,1); }
@keyframes tl-texto { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Centro: reloj y lo que dice el protagonista ---------- */
.tl-escena {
  position: fixed; z-index: 5;
  left: calc(var(--margen) + var(--tl-caja-ancho) + var(--tl-hueco-x));
  right: calc(var(--margen) + var(--tl-caja-ancho) + var(--tl-hueco-x));
  top: calc(var(--cw-top) + var(--cw-titulo-alto) + 16px);
  bottom: calc(var(--cw-prog-bottom) + var(--cw-prog-alto) + 8px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
html.tl-escena-activa .tl-escena { opacity: 1; visibility: visible; transition: opacity .7s ease .25s, visibility 0s; }

.tl-reloj { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 24px rgba(0,0,0,.45); opacity: 0; transition: opacity .45s ease; }
.tl-reloj.tl-on { opacity: 1; }
.tl-reloj-hora {
  font-size: clamp(36px, 3.4vw, 56px); font-weight: 800; line-height: 1;
  letter-spacing: -.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tl-reloj-franja {
  margin-top: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tl-cy-2);
}

/* Avance de la fase: se llena a la vez y en la misma proporción que la pluma
   del sismógrafo. Lo que queda por llenar es lo que queda de historia. */
.tl-reloj-pausa {
  position: relative;
  width: clamp(150px, 13vw, 210px); height: 3px; margin-top: 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.tl-reloj-pausa i {
  position: absolute; inset: 0;
  background: var(--tl-cy);
  border-radius: 3px;
  transform-origin: 0 50%; transform: scaleX(0);
}

.tl-escenarios { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; }
.tl-escenario { position: absolute; inset: 0; }
.tl-escenario > * {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-46%);
  opacity: 0; filter: blur(10px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.75,.25,1), filter .55s ease;
}
.tl-escenario > .tl-on { opacity: 1; filter: none; transform: translateY(-50%); }

.tl-texto { text-align: center; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.tl-texto h2 {
  margin: 0 0 .6rem;
  font-size: clamp(26px, 2.5vw, 42px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.035em; color: #fff;
  text-wrap: balance;
}
.tl-texto h2 em { color: var(--tl-cy-2); font-weight: 300; }
.tl-texto p { margin: 0 auto; max-width: 30ch; font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.45; color: rgba(255,255,255,.75); }

/* La voz: lo que escribe el protagonista, en grande, donde antes estaba él. */
.tl-voz { text-align: center; }
.tl-voz-caja { display: inline-block; max-width: 100%; padding: 0 2%; }
.tl-voz-canal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(var(--tl-burbuja-sale-rgb),.75);
  border: 1px solid rgba(var(--tl-accion-rgb),.4);
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tl-accion-claro);
}
.tl-voz-texto {
  margin: 16px 0 10px;
  font-size: clamp(22px, 2.05vw, 34px); font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em; color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.tl-voz-trad { margin: 0; font-size: clamp(14px, 1.02vw, 16px); color: rgba(255,255,255,.66); }
.tl-voz-pie {
  margin: 22px auto 0; padding-top: 16px;
  max-width: 26ch;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; line-height: 1.4;
  color: rgba(255,255,255,.8);
}
.tl-voz-pie b { color: var(--tl-cy-2); font-weight: 800; }

/* La pantalla de cara al protagonista (en Hospitality, la tele de la 214 con
   el Escaparate). Colores y letras: variables --tl-tv-*. */
.tl-tvbloque { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tl-tv { width: min(100%, 620px); }
.tl-tv-marco {
  aspect-ratio: 16 / 9;
  padding: 1.3%;
  border-radius: 10px;
  background: #040506;
  box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07), 0 0 70px rgba(var(--tl-tv-brillo-rgb),.12);
  container-type: inline-size;
}
.tl-tv-pantalla {
  position: relative; height: 100%;
  border-radius: 4px; overflow: hidden;
  background: radial-gradient(110% 90% at 72% 0%, var(--tl-tv-fondo-1) 0%, var(--tl-tv-fondo-2) 55%, var(--tl-tv-fondo-3) 100%);
  color: var(--tl-tv-texto);
  font-family: var(--tl-tv-fuente);
}
.tl-tv-cab {
  position: absolute; left: 4cqw; right: 4cqw; top: 3.2cqw;
  display: flex; justify-content: space-between; align-items: center;
}
.tl-tv-logo {
  position: relative;
  font-size: 3.3cqw; font-weight: 300; letter-spacing: .32em;
  color: var(--tl-tv-texto);
}
.tl-tv-logo i {
  position: absolute; left: -.6cqw; right: .3cqw; top: -2.2cqw; height: 2.6cqw;
  border: 1px solid rgba(var(--tl-tv-texto-rgb),.6); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.tl-tv-reloj { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.4cqw; }
.tl-tv-reloj b { font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-tv-reloj i {
  font-style: normal; font-size: 1.7cqw;
  padding: .4cqw 1.3cqw; border-radius: 999px;
  border: 1px solid rgba(var(--tl-tv-brillo-rgb),.7); color: var(--tl-tv-acento);
}
.tl-tv-p {
  position: absolute; left: 4cqw; right: 4cqw; top: 11cqw; bottom: 11cqw;
  opacity: 0; transform: translateX(3%);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.75,.25,1);
}
.tl-tv-p.tl-on { opacity: 1; transform: none; }
.tl-tv-rot {
  display: block; margin-bottom: 2cqw;
  font-size: 1.75cqw; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tl-tv-acento);
}
.tl-tv-ficha { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.4cqw; align-items: center; }
.tl-tv-ficha img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 1.6cqw;
  box-shadow: 0 1cqw 3cqw rgba(0,0,0,.5);
}
.tl-tv-ficha > div { display: flex; flex-direction: column; gap: 1cqw; }
.tl-tv-ev { font-size: 5.2cqw; font-weight: 300; line-height: 1.02; color: var(--tl-tv-titulo); }
.tl-tv-ev--serif {
  font-family: var(--tl-tv-fuente-titulo);
  font-weight: 600; letter-spacing: .08em;
}
.tl-tv-sub { font-size: 2.15cqw; color: var(--tl-tv-acento); }
.tl-tv-hora2 { font-size: 2.05cqw; color: var(--tl-tv-suave); }
.tl-tv-lugar { font-size: 1.9cqw; color: var(--tl-tv-apagado); }
.tl-tv-qr {
  display: inline-flex; align-items: center; gap: 1.6cqw;
  margin-top: 1cqw;
  font-size: 1.9cqw; color: var(--tl-tv-suave);
}
.tl-tv-qr svg { width: 7cqw; height: 7cqw; padding: .7cqw; border-radius: .8cqw; background: #fff; fill: #111; }
.tl-tv-p--nota { display: flex; flex-direction: column; justify-content: center; }
.tl-tv-sinfoto {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 1.6cqw;
  background: linear-gradient(135deg, rgba(var(--tl-tv-brillo-rgb), .35), rgba(var(--tl-tv-brillo-rgb), .08));
}
.tl-tv-cita { margin: 0 0 2cqw; font-size: 3.6cqw; line-height: 1.2; color: var(--tl-tv-cita); }
.tl-tv-resp { margin: 0; max-width: 64%; font-size: 2.3cqw; line-height: 1.45; color: var(--tl-tv-resp); }
.tl-tv-barra {
  position: absolute; left: 3cqw; right: 3cqw; bottom: 2.6cqw;
  height: 6cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.2cqw 0 2.4cqw;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  font-size: 2cqw;
}
.tl-tv-barra > span { display: flex; align-items: center; gap: 1.3cqw; }
.tl-tv-barra > span i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--tl-tv-boton); }
.tl-tv-barra em {
  position: absolute; right: 1cqw; top: 50%;
  transform: translateY(-50%) scale(.92);
  padding: 1cqw 2.2cqw;
  border-radius: 999px;
  background: var(--tl-tv-boton); color: #fff;
  font-style: normal; font-size: 1.9cqw;
  opacity: 0;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.tl-tv-barra em.tl-on { opacity: 1; transform: translateY(-50%) scale(1); }
.tl-tv-pie {
  height: 14px; margin: 0 auto;
  width: 18%;
  background: linear-gradient(180deg, #0B0C0F, #050607);
  border-radius: 0 0 6px 6px;
}
.tl-pie {
  margin: 0; max-width: 34ch;
  text-align: center;
  font-size: clamp(15px, 1.12vw, 18px); line-height: 1.4;
  color: rgba(255,255,255,.8);
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease .2s, transform .6s ease .2s;
}
.tl-pie.tl-on { opacity: 1; transform: none; }
.tl-pie b { color: var(--tl-cy-2); font-weight: 800; }

.tl-aviso {
  flex: 0 0 auto;
  margin: 8px 0 0;
  font-size: 11px; letter-spacing: .03em;
  color: rgba(255,255,255,.5);
  text-align: center;
}

/* ---------- Cables: la señal viaja por Closensia ---------- */
.tl-cables {
  position: fixed; inset: 0; z-index: 4;
  width: 100vw; height: 100vh;
  pointer-events: none; overflow: visible;
}
.tl-cable {
  fill: none;
  stroke: var(--tl-cy);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--tl-acento-rgb),.8));
  opacity: 0;
}
.tl-chispa {
  fill: #E9FBFF;
  filter: drop-shadow(0 0 6px rgba(var(--tl-acento-rgb),1)) drop-shadow(0 0 14px rgba(var(--tl-acento-rgb),.8));
  opacity: 0;
}

/* ---------- Instrumento (en el sitio de la curva de su lado) ---------- */
.tl-sismo {
  position: fixed; z-index: 6;
  right: var(--margen); bottom: var(--cw-ind-bottom);
  width: var(--tl-caja-ancho);
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.tl-sismo.cw-activo { opacity: 1; }
.tl-sismo.cw-activo .tl-sismo-panel { pointer-events: auto; }
.tl-sismo-panel {
  height: var(--cw-ind-alto);
  display: flex; flex-direction: column;
  padding: 12px 18px 9px;
  background: rgba(var(--tl-fondo-rgb),.84);
  border-color: rgba(var(--tl-acento-rgb),.26);
}
.tl-sismo-lectura { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; line-height: 1; }
.tl-sismo-lectura small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.tl-sismo-lectura b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tl-ok-claro); transition: color .4s ease; }
.tl-sismo-lectura[data-tono="red"] b { color: var(--tl-alerta-claro); }
.tl-sismo-lectura[data-tono="amb"] b { color: var(--tl-aviso-claro); }
.tl-sismo-capas { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tl-sismo-capa { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tl-sismo-lienzo { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 6px; }
.tl-sismo-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.tl-sismo-guia { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tl-sismo-traza { fill: none; stroke: var(--tl-cy); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tl-sismo-pluma, .tl-sismo-ev {
  position: absolute;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
}
.tl-sismo-pluma { background: #fff; box-shadow: 0 0 0 3px rgba(var(--tl-acento-rgb),.35), 0 0 12px rgba(var(--tl-acento-rgb),.9); }
.tl-sismo-ev { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 3px rgba(var(--tl-fondo-rgb),.9); }
.tl-sismo-ev.tl-on { opacity: 1; transform: none; }
.tl-sismo-ev--red { background: var(--tl-red); width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.tl-sismo-ev--amb { background: var(--tl-amb); }
.tl-sismo-ev--grn { background: var(--tl-grn); }
.tl-sismo-horas .tl-sismo-hora { font-size: 10px; }

/* ---------- Más piezas ---------- */

/* Textos del centro: rótulo pequeño y cursor que parpadea (la intriga) */
.tl-texto-sobre {
  display: block; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tl-cy-2);
}
.tl-cursor {
  display: inline-block; width: .09em; height: .9em; margin-left: .12em;
  vertical-align: -.08em;
  background: var(--tl-cy);
  animation: tl-parpadeo 1.1s steps(1) infinite;
}
@keyframes tl-parpadeo { 50% { opacity: 0; } }

/* A · otras conversaciones del negocio (apagadas), idioma y el hueco de quien aún no ha escrito */
.tl-msg--otro .tl-bur { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.04); }
.tl-msg--otro .tl-bur-orig { color: var(--tl-tx-2); font-weight: 500; }
.tl-msg--otro .tl-bur-trad { color: var(--tl-mu); }
.tl-idioma {
  margin-left: auto;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--tl-ln-2);
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--tl-tx-2);
}
.tl-fantasma {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(var(--tl-acento-claro-rgb),.45);
  font-size: 13px; color: var(--tl-mu);
}
.tl-fantasma b { color: #fff; font-weight: 700; }
.tl-fantasma i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tl-cy);
  animation: tl-espera 1.8s ease-in-out infinite;
}
@keyframes tl-espera { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* B · listas de comprobación (✓ / ✕) */
.tl-ok, .tl-no { display: inline-block; width: 1.2em; font-weight: 800; }
.tl-ok { color: var(--tl-accion-claro); }
.tl-no { color: var(--tl-alerta-claro); }

/* C · paneles sobre el tablero: enviar una respuesta, elegir el tono de una respuesta */
.tl-panel {
  position: absolute; left: 4%; right: 4%; bottom: 8px; z-index: 3;
  display: grid; gap: 7px;
  padding: 11px 12px 12px;
  border-radius: 10px;
  background: var(--tl-panel);
  border: 1px solid rgba(var(--tl-acento-rgb),.45);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.tl-panel.tl-on { opacity: 1; transform: none; }
.tl-panel-tit {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tl-cy-2);
}
.tl-panel-texto { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--tl-burbuja-sale); font-size: 12.5px; line-height: 1.38; color: var(--tl-texto-fuerte); }
.tl-panel-nota { font-size: 10.5px; color: var(--tl-mu); }
.tl-panel-boton {
  justify-self: start;
  padding: 6px 11px; border-radius: 7px;
  background: var(--tl-teal); color: var(--tl-accion-tinta);
  font-size: 11.5px; font-weight: 800;
  transition: transform .15s ease, box-shadow .3s ease, background-color .3s ease;
}
.tl-panel-boton.tl-on { transform: scale(.94); background: var(--tl-accion-oscuro); color: #fff; box-shadow: 0 0 0 5px rgba(var(--tl-accion-rgb),.25); }
.tl-opcion {
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--tl-ln-2);
  background: rgba(255,255,255,.025);
  transition: border-color .3s ease, background-color .3s ease;
}
.tl-opcion b { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-mu); }
.tl-opcion p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--tl-tx-2); }
.tl-opcion.tl-on { border-color: var(--tl-teal); background: rgba(var(--tl-accion-rgb),.12); }
.tl-opcion.tl-on b { color: var(--tl-accion-claro); }
.tl-opcion.tl-on p { color: #fff; }

/* Centro · el coro: muchas voces a la vez */
.tl-coro { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tl-coro-nube { position: relative; width: min(100%, 460px); height: clamp(200px, 27vh, 250px); }
.tl-coro-voz {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 12px; border-bottom-left-radius: 4px;
  background: rgba(var(--tl-burbuja-rgb),.92);
  border: 1px solid rgba(var(--tl-acento-claro-rgb),.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font-size: clamp(13px, 1vw, 15px); font-weight: 600; color: var(--tl-texto-fuerte);
  white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.9);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--tl-i) * 130ms);
}
.tl-coro-voz b {
  padding: 1px 6px; border-radius: 4px;
  background: rgba(var(--tl-acento-rgb),.18);
  font-size: 10px; letter-spacing: .08em; color: var(--tl-cy-2);
}
.tl-coro.tl-on .tl-coro-voz { opacity: 1; transform: none; }

/* Centro · el punto de captura (QR y estrellas) */
.tl-qrbloque { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tl-qr-caja {
  display: grid; justify-items: center; gap: 10px;
  width: min(100%, 300px);
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: #F6F2EA; color: #1A1A1A;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  text-align: center;
}
.tl-qr-lugar { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6A645E; }
.tl-qr-caja svg { width: 84px; height: 84px; fill: #1A1A1A; }
.tl-qr-caja > b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.tl-estrellas { display: flex; gap: 6px; }
.tl-estrellas i {
  width: 22px; height: 22px;
  background: #D8D2C6;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: background-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(.35s + var(--tl-i) * .14s);
}
.tl-qrbloque.tl-on .tl-estrellas i.tl-llena { background: #E0A43A; transform: scale(1.12); }
.tl-qr-com {
  margin: 0; padding: 8px 11px;
  border-radius: 9px; background: #EDE6D9;
  font-size: 13px; line-height: 1.35; color: #433E39;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .5s ease;
}
.tl-qr-com.tl-on { opacity: 1; transform: none; }

/* ---------- Portátiles de poca altura ---------- */
@media (min-width: 761px) and (max-height: 820px) {
  .tl-conmutador { height: 40px; top: calc(var(--cw-top) + (var(--cw-titulo-alto) - 40px) / 2); }
  .tl-conmutador button { min-width: 104px; font-size: 11.5px; }
  .tl-cara { padding: 11px 13px 10px; }
  .tl-cab { padding-bottom: 7px; }
  .tl-tit { font-size: 16px; }
  .tl-bur { padding: 7px 10px 8px; }
  .tl-bur-orig { font-size: 12.5px; }
  .tl-bur-trad { font-size: 11.5px; }
  .tl-bloque { padding: 6px 9px 7px; }
  .tl-bloque b { font-size: 9.5px; margin-bottom: 2px; }
  .tl-bloque p { font-size: 12px; line-height: 1.36; }
  .tl-estado { gap: 6px; }
  .tl-pill { font-size: 10.5px; padding: 2px 8px; }
  .tl-valor { padding: 5px 9px; font-size: 11.5px; }
  .tl-valor b { font-size: 13px; }
  .tl-tab-entrada { height: 92px; }
  .tl-tj-tit { font-size: 11px; }
  .tl-tu-linea { font-size: 12.5px; padding: 8px 10px; }
  .tl-reloj-hora { font-size: clamp(30px, 2.8vw, 44px); }
  .tl-voz-texto { font-size: clamp(19px, 1.75vw, 28px); margin: 12px 0 8px; }
  .tl-voz-pie { margin-top: 14px; padding-top: 12px; }
  .tl-sismo-panel { padding: 9px 16px 7px; }
  .tl-sismo-lectura b { font-size: 20px; }
  .tl-panel { gap: 5px; padding: 8px 10px 9px; }
  .tl-opcion { padding: 5px 8px; }
  .tl-opcion p { font-size: 10.5px; }
  .tl-panel-texto { font-size: 11.5px; padding: 6px 8px; }
  .tl-coro-voz { padding: 6px 10px; font-size: 12.5px; }
  .tl-qr-caja { gap: 7px; padding: 12px 16px 14px; }
  .tl-qr-caja svg { width: 64px; height: 64px; }
  .tl-texto h2 { font-size: clamp(22px, 2.2vw, 34px); }
}

/* ---------- Móvil: el otro lado solo existe en escritorio ---------- */
@media (max-width: 760px) {
  .tl-conmutador, .tl-escena, .tl-sismo, .tl-cables, .tl-velo, .tl-columna, .tl-carril--C { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-lienzo, .tl-velo, .tl-tarjeta, .tl-msg, .tl-estado, .tl-escenario > * { transition: none !important; }
  .tl-invita button[data-lado="tu"], .tl-analiza .tl-ico, .tl-hueso { animation: none !important; }
}