/* Propuesta B · «Escenario»
   El video vive sobre un escenario azul noche con luz suave que se desplaza.
   Todo lo demás (chat, agenda, controles) va en superficies claras. */

:root {
  /* Escenario */
  --noche: #0c1631;
  --noche-2: #14214a;
  --noche-3: #1d2d5e;
  --noche-texto: #eef2fb;
  --noche-gris: #a3afc9;
  --noche-linea: rgba(255, 255, 255, .10);

  /* Superficies claras */
  --fondo: #eceff4;
  --panel: #ffffff;
  --suave: #f5f6f9;
  --linea: #dfe3ea;
  --linea-2: #c6cdd8;
  --tinta: #141b2d;
  --gris: #586378;
  --gris-2: #697286;
  --icono: #6b7588;

  /* Botones secundarios */
  --boton: #e6e9ef;
  --boton-hover: #dadfe7;
  --boton-borde: #c8cfda;

  /* Acento cálido (uno solo) */
  --ambar: #f2a13a;
  --ambar-hover: #e8922a;
  --ambar-borde: #d98a24;
  --ambar-texto: #1f1405;
  --ambar-tinta: #8a5208;
  --ambar-suave: #fdf0dc;
  --ambar-claro: #f5b862;

  /* Solo para «En vivo» / «Al aire» */
  --rojo: #d3271d;
  --rojo-hondo: #ad1d14;

  --radio: 5px;
  --f-titulo: 'Sora', system-ui, sans-serif;
  --f-texto: 'Onest', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 var(--f-texto);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.cifra { font-variant-numeric: tabular-nums; }
.oculto-lectura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

svg.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Botones (siempre con fondo sólido) ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--radio);
  border: 1px solid var(--boton-borde); background: var(--boton); color: var(--tinta);
  font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
  touch-action: manipulation; user-select: none;
}
.btn:hover { background: var(--boton-hover); }
.btn svg.ico { color: var(--icono); }
.btn:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-principal { background: var(--ambar); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.btn-principal:hover { background: var(--ambar-hover); }
.btn-principal svg.ico { color: currentColor; }
.btn-noche { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .24); color: var(--noche-texto); }
.btn-noche:hover { background: rgba(255, 255, 255, .2); }
.btn-noche svg.ico { color: #c6cee2; }
.btn-icono { width: 38px; padding: 0; }
.btn-chico { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn-chico svg.ico { width: 15px; height: 15px; }

/* ---------------- Escenario: luz que se desplaza lento ---------------- */
.escenario, .trastienda {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--noche); color: var(--noche-texto);
}
.escenario::before, .escenario::after,
.trastienda::before, .trastienda::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; will-change: transform;
}
.escenario::before, .trastienda::before {
  inset: -35% -25%;
  background: radial-gradient(38% 48% at 32% 38%, var(--luz-fria, rgba(70, 104, 196, .42)), transparent 70%);
  animation: luz-fria 14s ease-in-out infinite;
}
.escenario::after, .trastienda::after {
  inset: -30% -20%;
  background: radial-gradient(30% 40% at 70% 64%, var(--luz-calida, rgba(242, 161, 58, .11)), transparent 70%);
  animation: luz-calida 16s ease-in-out infinite;
}
@keyframes luz-fria {
  0%, 100% { transform: translate3d(-7%, -3%, 0); }
  50% { transform: translate3d(9%, 5%, 0); }
}
@keyframes luz-calida {
  0%, 100% { transform: translate3d(6%, 4%, 0); }
  50% { transform: translate3d(-8%, -4%, 0); }
}

/* ---------------- Rótulo «En vivo» (punto fijo, sin pulso) ---------------- */
.vivo {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--rojo); color: #fff; border-radius: 3px;
  font: 700 11px/1 var(--f-titulo); letter-spacing: .09em; text-transform: uppercase;
  padding: .5em .7em .48em;
}
.vivo i { width: .62em; height: .62em; border-radius: 50%; background: #fff; flex: none; }

/* ======================================================================
   PÁGINA DEL PÚBLICO
   ====================================================================== */
.publico .app {
  --ancho-chat: 420px;
  --reserva: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-chat);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
.publico .escenario { grid-column: 1; grid-row: 1; padding: 0 24px 20px; }
.publico .programa { grid-column: 1; grid-row: 2; }
.publico .conversa { grid-column: 2; grid-row: 1 / 3; }

/* Cabecera dentro del escenario */
.cabecera { display: flex; align-items: center; gap: 16px; height: 60px; min-width: 0; }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca-signo { width: 30px; height: 30px; flex: none; }
.marca-textos { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.marca-nombre { font: 600 16px/1.2 var(--f-titulo); letter-spacing: -.01em; white-space: nowrap; }
.marca-lema { color: var(--noche-gris); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Marco del video */
.marco-wrap { display: flex; justify-content: center; }
.marco {
  position: relative; container-type: inline-size;
  width: min(100%, calc((100vh - var(--reserva)) * 16 / 9));
  width: min(100%, calc((100dvh - var(--reserva)) * 16 / 9));
  aspect-ratio: 16 / 9; background: var(--noche-hondo, #081129); border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 70px -34px rgba(0, 0, 0, .75);
}
.marco:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.marco .esquina {
  inset: auto 2cqw 2cqw auto; width: 22cqw; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 24px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
}
.marco.con-pantalla[data-estado="en-vivo"] .esquina { opacity: 1; visibility: visible; }

/* Capas del marco: se muestran según data-estado */
.capa { position: absolute; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.marco[data-estado="en-vivo"] .capa-vivo,
.marco[data-estado="sin-senal"] .capa-espera,
.marco[data-estado="conectando"] .capa-aviso,
.marco[data-estado="problema"] .capa-aviso { opacity: 1; visibility: visible; }

.marco .vivo-grupo { top: 2.3cqw; left: 2.6cqw; display: flex; align-items: center; gap: .5em; font-size: clamp(10px, 1.05cqw, 16px); }
.marco .vivo-grupo .vivo, .marco .vivo-grupo .viendo { font-size: 1em; }

/* Cuántos están viendo: cifra fija junto a «En vivo» (sin animación) */
.viendo {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--rotulo-fondo, rgba(9, 17, 40, .93)); color: #fff; border-radius: 3px;
  font: 600 11px/1 var(--f-titulo); letter-spacing: .02em; white-space: nowrap;
  padding: .5em .75em .48em .6em; font-variant-numeric: tabular-nums;
}
.viendo svg.ico { width: 1.3em; height: 1.3em; margin: -.15em 0; stroke-width: 2; color: var(--noche-gris); } /* misma altura que «En vivo» */
.viendo b { font-weight: 700; }

/* Lower third */
.rotulo {
  left: 2.6cqw; bottom: 2.8cqw; max-width: 60cqw;
  display: flex; flex-direction: column; align-items: flex-start;
  --tam-n: clamp(13px, 1.75cqw, 30px); --tam-t: clamp(12px, 1.3cqw, 22px);
}
.marco.con-pantalla .rotulo { --tam-n: clamp(12.5px, 1.3cqw, 23px); --tam-t: clamp(11.5px, 1.02cqw, 18px); max-width: 52cqw; }
.rotulo-nombre {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .65em; row-gap: .1em;
  background: var(--rotulo-fondo, rgba(9, 17, 40, .93)); color: #fff; border-radius: 4px 4px 0 0;
  font: 600 var(--tam-n)/1.2 var(--f-titulo); letter-spacing: -.01em;
  padding: .55em .85em .5em;
}
.rotulo-cargo { font: 500 max(11px, .62em)/1.2 var(--f-texto); color: var(--ambar-claro); letter-spacing: 0; }
.rotulo-tema {
  background: #fff; color: var(--tinta); border-radius: 0 4px 4px 4px;
  font: 500 var(--tam-t)/1.3 var(--f-texto);
  padding: .5em 1em .55em .95em; max-width: 100%;
}

/* Controles sobre el video */
.controles-video { top: 1.8cqw; right: 1.8cqw; display: flex; gap: 8px; }
.btn-sonido {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: auto; padding: .85em 1.35em; gap: .6em; z-index: 3;
  font: 600 clamp(14px, 1.45cqw, 21px)/1 var(--f-titulo);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .6);
}
.btn-sonido svg.ico { width: 1.25em; height: 1.25em; }

/* Pantalla de espera */
.capa-espera { inset: 0; display: flex; align-items: center; overflow: hidden; background: radial-gradient(70% 80% at 24% 42%, var(--noche-luz, #15265a) 0%, var(--noche-medio, #0c1838) 55%, var(--noche-hondo, #081129) 100%); }
.foco { position: absolute; inset: 0; width: 100%; height: 100%; }
.foco-g { animation: foco 16s ease-in-out infinite; }
@keyframes foco { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(46px); } }
.espera-txt { position: relative; padding: 0 7cqw; max-width: 68cqw; }
.espera-titulo { margin: 0; font: 700 clamp(26px, 5.2cqw, 84px)/1.02 var(--f-titulo); letter-spacing: -.03em; color: #fff; }
.espera-sigue { margin-top: 3.2cqw; padding-top: 2.4cqw; border-top: 1px solid rgba(255, 255, 255, .16); }
.espera-etq { display: flex; align-items: baseline; gap: .7em; font: 600 clamp(11px, 1.15cqw, 18px)/1.2 var(--f-titulo); color: var(--ambar-claro); letter-spacing: .02em; }
.espera-etq b { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.espera-nombre { margin-top: .6cqw; font: 600 clamp(15px, 2.2cqw, 36px)/1.2 var(--f-titulo); color: #fff; letter-spacing: -.01em; }
.espera-tema { margin-top: .4cqw; font: 400 clamp(13px, 1.5cqw, 24px)/1.35 var(--f-texto); color: #c3cbe0; }

/* Conectando / problema */
.capa-aviso { inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.aviso-txt { font: 600 clamp(15px, 1.7cqw, 26px)/1.3 var(--f-titulo); color: #fff; }
.aviso-sub { margin-top: .5em; font-size: clamp(13px, 1.15cqw, 18px); color: var(--noche-gris); }
.barra-lenta { width: min(240px, 40cqw); height: 3px; margin: 18px auto 0; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; position: relative; }
.barra-lenta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--ambar); border-radius: 2px; animation: barra 2.6s ease-in-out infinite; }
@keyframes barra { from { left: -40%; } to { left: 100%; } }

/* Rótulo móvil (debajo del video) */
.rotulo-movil { display: none; }

/* ---------------- Zona clara: «Sigue» + agenda ---------------- */
.programa { overflow: auto; background: var(--fondo); container-type: inline-size; }
.programa-in {
  display: grid; padding: 18px 24px 20px; column-gap: 28px; row-gap: 10px;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "sigue cab" "sigue dias";
  align-items: start;
}
.agenda-cab { grid-area: cab; display: flex; align-items: baseline; gap: 12px; }
.agenda-cab h2 { margin: 0; font: 600 15px/1.2 var(--f-titulo); letter-spacing: -.01em; }
.agenda-cab span { color: var(--gris); font-size: 13px; }

.sigue { grid-area: sigue; background: var(--ambar-suave); border-radius: 6px; padding: 14px 16px 16px; min-width: 0; }
.sigue-etq { font: 700 11px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-tinta); }
.sigue-hora { margin-top: 10px; font: 600 19px/1.15 var(--f-titulo); letter-spacing: -.01em; }
.sigue-hora small { font: 500 13px var(--f-texto); color: var(--gris); letter-spacing: 0; margin-left: 6px; }
.sigue-nombre { margin-top: 8px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sigue-cargo { color: var(--gris); font-size: 13px; }
.sigue-tema { margin-top: 6px; font-size: 14px; line-height: 1.35; }
.sigue-fin { margin-top: 10px; font-size: 14px; color: var(--gris); }

.dias { grid-area: dias; list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.dia { min-width: 0; }
.dia-nombre { padding: 0 12px 6px; font: 600 11.5px/1.2 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.dia.hoy .dia-nombre { color: var(--tinta); }
.sesiones { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sesion { position: relative; padding-top: 16px; min-width: 0; }
.sesion::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--linea-2); }
.dia:first-child .sesion:first-child::before { left: 14px; }
.sesion.pasada::before { background: var(--tinta); }
.sesion.actual::before { background: linear-gradient(90deg, var(--tinta) 18px, var(--linea-2) 18px); }
.nodo { position: absolute; top: 2px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--fondo); box-shadow: 0 0 0 2px var(--linea-2); }
.sesion.pasada .nodo { background: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); }
.sesion.actual .nodo { top: 0; left: 10px; width: 14px; height: 14px; background: var(--noche); box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--noche); }
.sesion.prox .nodo { background: var(--ambar); box-shadow: 0 0 0 2px var(--ambar-borde); }
.cuerpo { margin: 0 3px; padding: 8px 9px 10px; border-radius: 5px; height: 100%; }
.sesion.actual .cuerpo { background: var(--noche); color: var(--noche-texto); }
.s-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 20px; }
.s-hora { font: 600 13px/1.2 var(--f-titulo); white-space: nowrap; }
.s-etq { font: 700 10px/1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; }
.s-etq.sigue-etq-mini { color: var(--ambar-tinta); }
.sesion .vivo { font-size: 9.5px; white-space: nowrap; flex: none; }
.s-nombre { margin-top: 4px; font-weight: 600; font-size: 14px; line-height: 1.3; }
.s-tema { margin-top: 3px; color: var(--gris); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sesion.pasada .s-hora, .sesion.pasada .s-nombre { color: var(--gris); }
.sesion.pasada .s-tema { color: var(--gris-2); }
.sesion.actual .s-tema { color: #c3cbe0; }

/* Ancho medio (≈1366): «Sigue» va en una franja junto al título */
@container (max-width: 1240px) {
  .programa-in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cab sigue" "dias dias"; padding: 14px 20px 16px; row-gap: 8px; }
  .sigue { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; justify-self: end; max-width: 100%; white-space: nowrap; overflow: hidden; }
  .sigue-hora { margin: 0; font-size: 14px; }
  .sigue-hora small { display: none; }
  .sigue-nombre { margin: 0; font-size: 14px; }
  .sigue-cargo { display: none; }
  .sigue-tema { margin: 0; font-size: 13.5px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sigue-fin { margin: 0; }
}

/* Angosto (celular, tableta vertical): lista por días, sin línea */
@container (max-width: 880px) {
  .programa-in { grid-template-columns: 1fr; grid-template-areas: "sigue" "cab" "dias"; padding: 14px 16px 24px; row-gap: 12px; }
  .sigue { display: block; padding: 12px 14px 14px; white-space: normal; justify-self: stretch; }
  .sigue-hora { margin-top: 8px; font-size: 16px; }
  .sigue-hora small { display: inline; }
  .sigue-nombre { margin-top: 6px; font-size: 15px; }
  .sigue-cargo { display: block; }
  .sigue-tema { margin-top: 4px; font-size: 14px; color: var(--tinta); white-space: normal; }
  .agenda-cab { margin-top: 4px; }
  .dias { display: block; }
  .dia + .dia { margin-top: 14px; }
  .dia-nombre { padding: 0 0 6px; }
  .sesiones { display: block; background: var(--panel); border-radius: 6px; padding: 4px; }
  .sesion { padding: 0; }
  .sesion + .sesion { margin-top: 2px; }
  .sesion::before, .nodo { display: none; }
  .cuerpo { margin: 0; display: grid; grid-template-columns: 86px minmax(0, 1fr); column-gap: 10px; padding: 10px 10px 11px; }
  .s-top { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 6px; }
  .s-nombre { grid-column: 2; margin-top: 0; }
  .s-tema { grid-column: 2; -webkit-line-clamp: 3; }
}

/* ---------------- Conversación (chat claro, toda la altura) ---------------- */
.conversa { display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.pestanas { display: flex; gap: 6px; padding: 12px 14px 10px; flex: none; }
.pestana {
  flex: 1; position: relative; height: 36px; border-radius: var(--radio);
  border: 1px solid var(--boton-borde); background: var(--boton); color: var(--tinta);
  font-weight: 600; font-size: 14px; cursor: pointer; touch-action: manipulation;
}
.pestana:hover { background: var(--boton-hover); }
.pestana[aria-selected="true"] { background: var(--noche); border-color: var(--noche); color: #fff; }
.pestana:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.pestana .punto { position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); display: none; }
.pestana.nuevo .punto { display: block; }
.pestana-agenda { display: none; }

.listas { flex: 1; min-height: 0; position: relative; }
.lista { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 14px; scrollbar-width: thin; scrollbar-color: #c9cfd9 transparent; }
.vacio { margin: 18px 4px; color: var(--gris); font-size: 14px; line-height: 1.45; }

.msg { padding: 6px 4px 7px; }
.msg-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-nombre { font-weight: 600; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.msg-hora { font-size: 12px; color: var(--gris-2); }
.msg-texto { font-size: 14.5px; line-height: 1.42; overflow-wrap: anywhere; margin-top: 1px; }
.msg.mio .msg-nombre { color: var(--ambar-tinta); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.35; align-self: center; }
.tag-pregunta { background: var(--ambar-suave); color: var(--ambar-tinta); }
.tag-respondida { background: #e4e9f3; color: #263562; }
.tag-respondida svg.ico { width: 13px; height: 13px; stroke-width: 2.2; }

.preg { padding: 11px 4px 12px; border-top: 1px solid var(--linea); }
.preg:first-of-type { border-top: 0; }
.preg .msg-texto { font-size: 15px; margin-top: 3px; }
.preg.respondida .msg-texto { color: var(--gris); }

.nuevos {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
  background: var(--noche); border-color: var(--noche); color: #fff; height: 32px; font-size: 13px;
  box-shadow: 0 8px 20px -8px rgba(12, 22, 49, .5);
}
.nuevos:hover { background: var(--noche-3); }
.nuevos svg.ico { color: #c6cee2; width: 16px; height: 16px; }

/* Caja de escribir */
.composer { flex: none; border-top: 1px solid var(--linea); background: var(--suave); padding: 12px 14px 14px; }
.paso-nombre label { display: block; font: 600 14px/1.3 var(--f-titulo); margin-bottom: 8px; }
.fila-caja { display: flex; gap: 8px; align-items: flex-end; }
.campo {
  flex: 1; min-width: 0; border: 1px solid var(--boton-borde); border-radius: var(--radio); background: #fff;
  padding: 10px 12px; font-size: 15px; line-height: 1.35; color: var(--tinta);
}
.campo::placeholder { color: #7d8698; }
.campo:focus { outline: 2px solid var(--ambar); outline-offset: -1px; border-color: var(--ambar-borde); }
.campo:disabled { background: #eef0f4; color: var(--gris); }
textarea.campo { resize: none; height: 44px; max-height: 128px; display: block; }
.fila-caja .btn { height: 44px; }
.nota { margin-top: 7px; font-size: 12.5px; color: var(--gris); line-height: 1.4; min-height: 17px; }
.nota.error { color: #9b2c1f; }

.modo { display: flex; gap: 4px; margin-bottom: 9px; }
.modo button { height: 30px; padding: 0 11px; border-radius: 4px; border: 1px solid var(--boton-borde); background: var(--boton); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.modo button:hover { background: var(--boton-hover); }
.modo button[aria-pressed="true"] { background: var(--noche); border-color: var(--noche); color: #fff; }
.modo button svg.ico { width: 15px; height: 15px; color: var(--icono); }
.modo button[aria-pressed="true"] svg.ico { color: #c6cee2; }
.pie-caja { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; min-height: 17px; }
.pie-caja .nota { margin: 0 0 0 auto; min-height: 0; text-align: right; }
.quien { display: flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.quien b { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.quien .sep { color: #9aa3b3; }
.paso-nombre .pie-caja { margin-top: 7px; }
.paso-nombre .pie-caja .nota { margin: 0; text-align: left; flex: 1; }
.enlace { border: 0; background: none; padding: 0; color: var(--ambar-tinta); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.composer.cerrado .modo, .composer.cerrado .quien { display: none; }
.composer.modo-pregunta textarea.campo { background: #fffdf8; }

/* Aviso de conexión */
.aviso-conexion {
  position: fixed; top: 12px; left: 50%; z-index: 50; transform: translate(-50%, -8px);
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radio);
  background: #fff; border: 1px solid var(--linea-2); color: var(--tinta); font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 30px -12px rgba(12, 22, 49, .35);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.aviso-conexion.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.aviso-conexion svg.ico { color: var(--ambar-tinta); }

/* ---------------- Escritorio angosto (1024–1599) ---------------- */
@media (max-width: 1599px) {
  .publico .app { --ancho-chat: 360px; }
  .cabecera { height: 50px; }
  .publico .escenario { padding: 0 20px 16px; }
  .marca-signo { width: 26px; height: 26px; }
  .marca-nombre { font-size: 15px; }
  .marca-lema { font-size: 13px; }
  .pestanas { padding: 10px 12px 8px; }
  .lista { padding: 2px 12px 12px; }
  .composer { padding: 10px 12px 12px; }
  .modo button { padding: 0 9px; }
}

/* ---------------- Celular y tableta: como una app ---------------- */
@media (max-width: 1023px) {
  .publico .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "escenario" "pestanas" "contenido" "composer";
  }
  .publico .conversa { display: contents; }
  .publico .escenario { grid-area: escenario; padding: 0; padding-top: env(safe-area-inset-top); }
  .cabecera { display: none; }
  .marco { width: min(100%, calc(62dvh * 16 / 9)); border-radius: 0; box-shadow: none; }
  .marco .rotulo { display: none; }
  .marco .vivo-grupo { font-size: 10px; top: 10px; left: 10px; gap: 6px; }
  .controles-video { top: 8px; right: 8px; gap: 6px; }
  .controles-video .btn-icono { width: 34px; height: 34px; }
  .btn-sonido { font-size: 15px; padding: 12px 16px; }
  .espera-txt { padding: 0 6cqw; max-width: 88cqw; }
  .espera-titulo { font-size: clamp(22px, 7cqw, 44px); }
  .espera-sigue { margin-top: 3cqw; padding-top: 2.6cqw; }
  .espera-etq { font-size: clamp(11px, 3cqw, 15px); }
  .espera-nombre { font-size: clamp(14px, 4.2cqw, 22px); margin-top: 1cqw; }
  .espera-tema { font-size: clamp(12.5px, 3.5cqw, 17px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .rotulo-movil { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px 12px; min-height: 58px; }
  .rotulo-movil[data-vacio="1"] { display: none; }
  .rm-textos { min-width: 0; flex: 1; }
  .rm-nombre { font: 600 15px/1.25 var(--f-titulo); color: #fff; }
  .rm-cargo { font: 500 12.5px var(--f-texto); color: var(--ambar-claro); margin-left: 6px; }
  .rm-tema { margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: #c3cbe0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rotulo-movil .vivo { display: none; }

  .pestanas { grid-area: pestanas; background: var(--panel); border-bottom: 1px solid var(--linea); padding: 8px 12px; gap: 6px; }
  .pestana { height: 36px; font-size: 14px; }
  .pestana-agenda { display: block; }
  .listas { grid-area: contenido; background: var(--panel); }
  .publico .programa { grid-area: contenido; display: none; }
  .publico .app.ver-agenda .programa { display: block; }
  .app.ver-agenda .listas, .app.ver-agenda .composer { display: none; }
  .composer { grid-area: composer; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .campo { font-size: 16px; }
  .nota:empty { display: none; }
  .aviso-conexion { top: auto; bottom: 90px; }
}
/* Celular con el teclado abierto (Android achica la pantalla) o acostado: sin la franja del rótulo, el chat conserva espacio */
@media (max-width: 1023px) and (max-height: 560px) {
  .publico .rotulo-movil { display: none; }
}

/* ======================================================================
   CAMERINO DEL PROFESOR
   ====================================================================== */
.camerino .cam-app {
  display: grid; grid-template-columns: minmax(0, 1fr) 500px;
  grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh;
}

/* Banda de estado: clara en el camerino, roja al aire (fija, sin parpadeo) */
.banda {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 10px 24px;
  background: var(--panel); border-bottom: 1px solid var(--linea); position: relative; z-index: 5;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.banda-estado { display: flex; align-items: center; gap: 12px; flex: none; }
.estado-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: var(--radio);
  background: var(--noche); color: #fff; font: 700 14px/1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase;
}
.estado-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--noche-gris); }
.reloj { display: none; font: 600 26px/1 var(--f-titulo); letter-spacing: -.01em; }
.banda-msg { min-width: 0; font-size: 15px; line-height: 1.35; color: var(--gris); }
.banda-msg b { color: var(--tinta); font-weight: 600; }
.banda-quien { margin-left: auto; text-align: right; min-width: 0; padding-left: 12px; }
.bq-nombre { font: 600 15px/1.25 var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-sub { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }

.banda.al-aire { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.banda.al-aire .estado-chip { background: #fff; color: var(--rojo); font-size: 17px; height: 44px; padding: 0 16px; }
.banda.al-aire .estado-chip i { background: var(--rojo); width: 11px; height: 11px; }
.banda.al-aire .reloj { display: block; }
.banda.al-aire .banda-msg, .banda.al-aire .banda-msg b, .banda.al-aire .bq-sub { color: #fff; }
.banda.al-aire .bq-sub { opacity: .88; }

/* Trastienda: vista previa sobre fondo noche */
.trastienda { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 18px 24px 20px; min-height: 0; }
.previa-cab { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 13.5px; color: var(--noche-gris); }
.previa-cab b { color: var(--noche-texto); font: 600 14px var(--f-titulo); }
.previa-wrap { flex: none; min-height: 0; display: flex; justify-content: center; }
.previa {
  position: relative; container-type: inline-size; aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 68px - 160px) * 16 / 9));
  width: min(100%, calc((100dvh - 68px - 160px) * 16 / 9));
  background: #050a1a; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 28px 70px -34px rgba(0, 0, 0, .75);
}
.previa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.previa video.espejo { transform: scaleX(-1); }
.previa .p-esquina { inset: auto 2cqw 2cqw auto; width: 24cqw; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.etq-previa {
  position: absolute; top: 2cqw; left: 2cqw; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(9, 17, 40, .82); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 13px; font-weight: 600;
}
.etq-previa.publico-ve { background: #fff; color: var(--tinta); }
.chip-mic { position: absolute; right: 2cqw; top: 2cqw; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: var(--ambar); color: var(--ambar-texto); padding: 7px 11px; border-radius: 4px; font-size: 13.5px; font-weight: 600; }
.cam-apagada { position: absolute; inset: 0; display: grid; place-items: center; background: #0a1330; color: var(--noche-gris); text-align: center; font-size: 15px; z-index: 1; }
.cam-apagada .ini { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: var(--noche-3); color: #fff; font: 600 30px var(--f-titulo); }
.cam-apagada.en-esquina { inset: auto 2cqw 2cqw auto; width: 24cqw; aspect-ratio: 16 / 9; border-radius: 4px; font-size: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.cam-apagada.en-esquina .ini { display: none; }

/* Paso inicial / permiso / formulario (dentro de la vista previa) */
.paso { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 5cqw; background: radial-gradient(70% 90% at 50% 100%, var(--luz-calida, rgba(242, 161, 58, .08)), transparent 70%), var(--noche-hondo, #081129); overflow: auto; }
.paso-in { width: min(640px, 100%); }
.paso h2 { margin: 0; font: 700 clamp(20px, 2.6cqw, 32px)/1.15 var(--f-titulo); letter-spacing: -.02em; color: #fff; }
.paso p { margin: 10px 0 0; color: #c3cbe0; font-size: 15px; line-height: 1.5; }
.paso .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.paso .btn { height: 44px; padding: 0 18px; font-size: 15px; }
svg.paso-ico { width: 40px; height: 40px; color: var(--ambar-claro); margin-bottom: 14px; stroke-width: 1.5; }
.pasos-lista { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos-lista li { counter-increment: paso; display: flex; gap: 12px; align-items: baseline; color: #dfe5f2; font-size: 15px; line-height: 1.45; padding: 5px 0; }
.pasos-lista li::before { content: counter(paso); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font: 600 12.5px/1 var(--f-titulo); color: #fff; transform: translateY(-1px); }
.pasos-lista svg.ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--ambar-claro); }
.barra-dir { margin-top: 16px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 20px; background: #f1f3f7; color: #3a4357; font-size: 14px; max-width: 420px; }
.barra-dir .candado { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ambar-suave); box-shadow: 0 0 0 2px var(--ambar); color: var(--ambar-tinta); flex: none; }
.barra-dir .candado svg.ico { width: 15px; height: 15px; stroke-width: 2; }
.barra-dir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-paso { margin-top: 18px; display: grid; gap: 12px; }
.form-paso label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: #dfe5f2; }
.form-paso .campo { border-color: transparent; }
.form-paso .nota { color: #f5b862; }
.form-paso .nota:empty { display: none; }

/* Controles bajo la vista previa */
.controles { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; flex: none; }
.controles .btn { height: 44px; padding: 0 16px; font-size: 14.5px; }
.controles .btn.activo-aviso { background: var(--ambar); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.controles .btn.activo-aviso svg.ico { color: currentColor; }

/* Lateral claro */
.lateral { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.lat-titulo { margin: 0; font: 600 14px/1.2 var(--f-titulo); letter-spacing: -.005em; }
.equipo { padding: 16px 18px 14px; border-bottom: 1px solid var(--linea); flex: none; }
.equipo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.equipo-cab span { font-size: 12.5px; color: var(--gris); }
.chequeo { list-style: none; margin: 0; padding: 0; }
.chq { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 210px); align-items: center; column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); }
.chq:first-child { border-top: 0; }
.chq-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--linea-2); color: transparent; }
.chq-ico svg.ico { width: 13px; height: 13px; stroke-width: 2.6; }
.chq-ico .i-aviso, .chq[data-ok="aviso"] .i-ok { display: none; }
.chq[data-ok="aviso"] .i-aviso { display: block; stroke-width: 3; }
.chq[data-ok="si"] .chq-ico { background: var(--noche); border-color: var(--noche); color: #fff; }
.chq[data-ok="aviso"] .chq-ico { background: var(--ambar); border-color: var(--ambar); color: var(--ambar-texto); }
.chq-txt { min-width: 0; }
.chq-txt:last-child { grid-column: 2 / -1; }
.chq-nombre { font-weight: 600; font-size: 14px; line-height: 1.25; }
.chq-estado { font-size: 12.5px; color: var(--gris); line-height: 1.3; }
.chq[data-ok="aviso"] .chq-estado { color: var(--ambar-tinta); font-weight: 600; }
.chq select {
  width: 100%; height: 34px; border-radius: var(--radio); border: 1px solid var(--boton-borde); background-color: var(--boton);
  padding: 0 30px 0 10px; font-size: 13px; font-weight: 500; color: var(--tinta); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7588' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
  text-overflow: ellipsis;
}
.chq select:disabled { opacity: .55; cursor: default; }
.chq select:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }
.medidor { grid-column: 2 / -1; margin-top: 8px; height: 8px; border-radius: 2px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, #e3e7ee 0 calc(5% - 2px), transparent calc(5% - 2px) 5%); }
.medidor-mascara { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--nivel, 0%)) 0 0); }
.medidor-relleno { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--ambar) 0 calc(5% - 2px), transparent calc(5% - 2px) 5%); }

.mensajes-cam { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mensajes-cam .pestanas { padding: 12px 18px 8px; }
.mensajes-cam .lista { padding: 2px 18px 16px; }
.cpreg { padding: 12px 0 13px; border-top: 1px solid var(--linea); }
.cpreg:first-of-type { border-top: 0; }
.cpreg .msg-texto { font-size: 15.5px; line-height: 1.42; margin-top: 4px; }
.cpreg-acc { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cpreg.respondida .msg-texto { color: var(--gris); }
.cpreg.respondida .msg-nombre { color: var(--gris); }

/* Camerino: anchos menores */
@media (max-width: 1599px) {
  .camerino .cam-app { grid-template-columns: minmax(0, 1fr) 420px; }
  .banda { padding: 8px 20px; min-height: 62px; }
  .trastienda { padding: 14px 20px 16px; gap: 12px; }
  .previa { width: min(100%, calc((100dvh - 62px - 146px) * 16 / 9)); }
  .equipo { padding: 14px 16px 12px; }
  .chq { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 180px); }
  .mensajes-cam .pestanas { padding: 10px 16px 8px; }
  .mensajes-cam .lista { padding: 2px 16px 14px; }
  .controles .btn { padding: 0 13px; font-size: 14px; }
  .bq-sub { max-width: 380px; }
}
@media (max-width: 1023px) {
  .camerino .cam-app { display: block; height: auto; }
  .banda { position: sticky; top: 0; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; min-height: 0; padding-top: calc(10px + env(safe-area-inset-top)); }
  .estado-chip { height: 34px; font-size: 12.5px; padding: 0 11px; }
  .banda.al-aire .estado-chip { height: 36px; font-size: 14px; padding: 0 12px; }
  .reloj { font-size: 22px; }
  .banda-msg { flex-basis: 100%; font-size: 14px; }
  .banda-quien { display: none; }
  .trastienda { padding: 14px 16px 16px; }
  .previa { width: 100%; }
  .paso { position: relative; inset: auto; min-height: 100%; padding: 22px 18px; }
  .previa.con-paso { aspect-ratio: auto; min-height: 56.25vw; }
  .paso p { font-size: 14.5px; }
  .pasos-lista li { font-size: 14.5px; }
  .controles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .controles .btn { height: auto; min-height: 52px; padding: 8px 6px; flex-direction: column; gap: 4px; font-size: 12.5px; white-space: normal; text-align: center; line-height: 1.15; }
  .lateral { display: block; }
  .equipo { padding: 16px; }
  .chq { grid-template-columns: 26px minmax(0, 1fr); row-gap: 8px; }
  .chq select { grid-column: 2; }
  .medidor { grid-column: 2; }
  .mensajes-cam { display: block; }
  .mensajes-cam .pestanas { padding: 12px 16px 8px; position: sticky; top: 0; }
  .mensajes-cam .listas { height: 62vh; min-height: 340px; }
  .mensajes-cam .lista { padding: 2px 16px 16px; }
  .trastienda .bq-movil { display: block; }
}
.bq-movil { display: none; padding: 0 0 2px; }
.bq-movil .bqm-nombre { font: 600 15px/1.3 var(--f-titulo); color: #fff; }
.bq-movil .bqm-tema { font-size: 13.5px; color: #c3cbe0; line-height: 1.35; margin-top: 2px; }

/* Movimiento reducido: sin desplazamientos de luz */
@media (prefers-reduced-motion: reduce) {
  .escenario::before, .escenario::after, .trastienda::before, .trastienda::after, .foco-g { animation: none; }
  .barra-lenta::after { animation: none; left: 30%; }
  * { transition-duration: .01ms !important; }
}

/* Camerino: ruta de tres pasos y rótulo en «así te ve el público» */
.ruta { list-style: none; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; gap: 10px 24px; flex-wrap: wrap; counter-reset: r; }
.ruta li { counter-increment: r; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--noche-gris); }
.ruta li::before { content: counter(r); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; font: 600 12px/1 var(--f-titulo); }
.ruta li:first-child { color: #fff; }
.ruta li:first-child::before { background: var(--ambar); color: var(--ambar-texto); }
.previa .p-rotulo { position: absolute; z-index: 2; --tam-n: clamp(12px, 1.3cqw, 23px); --tam-t: clamp(11px, 1.02cqw, 18px); max-width: 52cqw; }

/* ---------------- Logo del evento (ancho, cuadrado o transparente) ---------------- */
.marca-logo { display: block; height: 30px; width: auto; max-width: 220px; object-fit: contain; flex: none; }
.marca-logo.logo-alto { height: 40px; max-width: 72px; }
.marca-logo.logo-opaco { border-radius: 3px; }
/* Logo oscuro con fondo transparente sobre el escenario: placa clara para que no se pierda (y al revés en fondos claros) */
.marca-logo.logo-placa, .marca-logo.logo-placa-oscura { height: 36px; padding: 4px 9px; border-radius: 4px; background: #fff; }
.marca-logo.logo-placa-oscura { background: var(--noche); }
.marca-logo.logo-alto.logo-placa, .marca-logo.logo-alto.logo-placa-oscura { height: 42px; padding: 4px; }
@media (max-width: 1599px) {
  .marca-logo { height: 26px; }
  .marca-logo.logo-alto { height: 36px; }
  .marca-logo.logo-placa, .marca-logo.logo-placa-oscura { height: 32px; padding: 4px 8px; }
  .marca-logo.logo-alto.logo-placa, .marca-logo.logo-alto.logo-placa-oscura { height: 38px; padding: 3px; }
}

/* ---------------- Entrada del público: nombre y clave del evento ----------------
   Va en el flujo normal de la página (no fija): con el teclado del celular abierto, el navegador
   desplaza la página hasta el campo como en cualquier formulario. */
body.entrando { background: var(--noche); }
body.entrando .app, body.entrando .aviso-conexion { display: none; }
.clave-pantalla { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.publico .clave-pantalla.escenario { position: relative; padding: 0 24px; }
.clave-foco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.clave-centro { flex: 1; display: flex; align-items: center; padding: 6vh 0 8vh; }
.clave-caja { width: min(1180px, 100%); margin: 0 auto; padding: 0 3vw; }
.clave-marca { display: flex; align-items: center; margin-bottom: clamp(22px, 3vw, 38px); }
.clave-marca .marca-signo { width: 46px; height: 46px; }
.clave-marca .marca-logo { height: 56px; max-width: min(360px, 100%); }
.clave-marca .marca-logo.logo-alto { height: 84px; max-width: 140px; }
.clave-marca .marca-logo.logo-placa, .clave-marca .marca-logo.logo-placa-oscura { height: 66px; padding: 8px 14px; border-radius: 6px; }
.clave-marca .marca-logo.logo-alto.logo-placa, .clave-marca .marca-logo.logo-alto.logo-placa-oscura { height: 92px; padding: 8px; }
.clave-titulo { margin: 0; max-width: 18ch; font: 700 clamp(32px, 4.6vw, 72px)/1.04 var(--f-titulo); letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; }
.clave-lema { margin: 14px 0 0; max-width: 46ch; font-size: clamp(15px, 1.35vw, 21px); line-height: 1.4; color: #c3cbe0; }
.clave-lema:empty { display: none; }
.clave-form { margin-top: clamp(26px, 3.4vw, 46px); padding-top: clamp(18px, 2.2vw, 28px); border-top: 1px solid rgba(255, 255, 255, .16); max-width: 520px; }
.clave-form label { display: block; margin-bottom: 10px; font: 600 15px/1.3 var(--f-titulo); color: var(--noche-texto); }
.clave-form .campo { height: 50px; border-color: transparent; font-size: 16px; }
.clave-form .btn { height: 50px; padding: 0 24px; font-size: 15.5px; }
.clave-form .nota { margin-top: 10px; min-height: 20px; font-size: 13.5px; color: var(--noche-gris); }
.clave-form .nota.error { color: #ffb4a8; font-weight: 500; }
.entrada-grupo + .entrada-grupo { margin-top: 18px; }

/* Quién está al aire o quién sigue (en la entrada) */
.entrada-ahora { margin-top: clamp(24px, 2.8vw, 40px); max-width: 640px; }
.ea-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 24px; }
.ea-top .vivo, .ea-top .viendo { font-size: 11.5px; }
.ea-top .viendo { background: rgba(255, 255, 255, .1); }
.ea-etq { font: 700 12px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-claro); }
.ea-hora { font: 600 14px/1.2 var(--f-titulo); color: var(--noche-texto); }
.ea-nombre { margin-top: 12px; font: 600 clamp(17px, 1.45vw, 22px)/1.25 var(--f-titulo); letter-spacing: -.01em; color: #fff; }
.ea-cargo { margin-left: .65em; font: 500 .68em/1.2 var(--f-texto); letter-spacing: 0; color: var(--ambar-claro); }
.ea-tema { margin-top: 4px; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; color: #c3cbe0; }

@media (max-width: 1023px) {
  .publico .clave-pantalla.escenario { padding: env(safe-area-inset-top) 20px 0; }
  .clave-centro { align-items: flex-start; padding: 6vh 0 32px; padding: 6dvh 0 32px; }
  .clave-caja { padding: 0; }
  .clave-marca { margin-bottom: 18px; }
  .clave-marca .marca-signo { width: 38px; height: 38px; }
  .clave-titulo { font-size: clamp(27px, 7.6vw, 40px); }
  .clave-lema { margin-top: 8px; font-size: 15px; }
  .entrada-ahora { margin-top: 20px; }
  .ea-nombre { margin-top: 9px; font-size: 16.5px; }
  .ea-cargo { display: block; margin: 2px 0 0; font-size: 13px; }
  .ea-tema { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .clave-form { margin-top: 22px; padding-top: 18px; }
  .clave-form label { margin-bottom: 8px; }
  .clave-form .btn { padding: 0 18px; }
  .clave-form .nota { margin-top: 8px; }
  .entrada-grupo + .entrada-grupo { margin-top: 14px; }
  .clave-marca .marca-logo { height: 44px; }
  .clave-marca .marca-logo.logo-alto { height: 64px; }
  .clave-marca .marca-logo.logo-placa, .clave-marca .marca-logo.logo-placa-oscura { height: 52px; padding: 6px 11px; }
  .clave-marca .marca-logo.logo-alto.logo-placa, .clave-marca .marca-logo.logo-alto.logo-placa-oscura { height: 70px; padding: 6px; }
}