/* ═══════════════════════════════════════════════════════════════════════
   SpeakEnglish1

   Tinta y oro. Todo el producto ocurre sobre un fondo oscuro —la landing,
   el registro, la sala de espera y la videollamada— porque el video se ve
   mejor rodeado de oscuro y porque asi el sitio y la sala dejan de ser dos
   productos distintos pegados con cinta.

   El oro es la voz de la marca: aparece en los filos, en el acento del
   titular, en el boton que hace avanzar y en las cifras que importan. Se
   usa poco y en sitios elegidos; si tine todo deja de significar nada.

   Junto al oro viven dos cosas mas:

     El petroleo — la segunda voz. Cada participante de la sala tiene su
                   color, oro o petroleo, y el borde del recuadro dice quien
                   es quien sin necesidad de una etiqueta.
     Las banderas — acentos reales, dibujadas en SVG y no con emoji, que en
                   Windows se degradan a dos letras.

   Reglas que se sostienen a lo largo del archivo:
     · dos familias: Fraunces para lo que se lee de lejos, Montserrat para
       lo que se lee de cerca. La jerarquia la hacen escala y peso
     · tres radios, tres sombras, escala de espaciado de 4 px
     · dos puntos de corte (720 y 420), no siete solapados
     · cero !important — si hace falta uno, la cascada esta mal
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── tokens ─────────────────────────────── */

:root {
  /* El fondo. No es negro: es un azul de tinta con algo de calor, que es lo
     unico sobre lo que el oro se ve como oro y no como mostaza. */
  --papel:        #0e1017;
  --papel-hondo:  #090b10;
  --superficie:   #141824;
  --tinta:        #f4f1e8;
  --tinta-suave:  #c2beb0;
  --mudo:         #8b8878;

  /* Los filos son oro rebajado, no gris. Es el detalle que hace que el
     dorado se lea como material y no como un color de acento suelto. */
  --linea:        rgba(212, 168, 67, .16);
  --linea-fuerte: rgba(212, 168, 67, .34);

  /* La sala */
  --sala-fondo:   #0b0d13;
  --sala-sup:     #161a24;
  --sala-alta:    #212533;
  --sala-tinta:   #ece9df;
  --sala-mudo:    #8b8878;
  --sala-linea:   #272b38;

  /* El oro. Cuatro pasos: el de trabajo, el que brilla al pasar por encima,
     el de los fondos apenas tenidos y el hondo para texto sobre oro. */
  --oro:          #d4a843;
  --oro-claro:    #eccb7d;
  --oro-tenue:    rgba(212, 168, 67, .12);
  --oro-tinta:    #17130a;

  /* Las dos voces. Oro y petroleo: calido y frio, distinguibles tambien con
     daltonismo, a diferencia de un par rojo/verde. */
  --voz-a:        var(--oro);
  --voz-a-claro:  var(--oro-claro);
  --voz-a-tenue:  var(--oro-tenue);
  --voz-b:        #2aa08d;
  --voz-b-claro:  #4fc9b4;
  --voz-b-tenue:  rgba(42, 160, 141, .14);

  /* Estado. Separados del acento a proposito: el color semantico no compite
     con la identidad. */
  --alarma:       #e2685c;
  --alarma-tenue: rgba(226, 104, 92, .14);
  --atencion:     #d4a843;

  /* Escala tipografica: seis escalones, no cuarenta y dos tamanos sueltos */
  --t-display: clamp(2.5rem, 6.5vw, 4.25rem);
  --t-titulo:  1.75rem;
  --t-sub:     1.125rem;
  --t-cuerpo:  1rem;
  --t-apoyo:   .875rem;
  --t-menudo:  .75rem;
  --t-micro:   .625rem;
  /* Cifras que son el contenido, no texto: cronometro, ronda, precio. */
  --t-cifra:   2.25rem;
  --t-cifra-xl: 3.25rem;

  /* Espaciado en pasos de 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* Tres radios */
  --r-chico: 4px;
  --r-medio: 10px;
  --r-total: 999px;

  /* Tres sombras, calibradas para fondo oscuro: sobre tinta una sombra gris
     no se ve, hay que bajarla casi a negro. */
  --s1: 0 1px 2px rgba(0, 0, 0, .5);
  --s2: 0 2px 10px rgba(0, 0, 0, .45);
  --s3: 0 24px 48px rgba(0, 0, 0, .6);

  --transicion: 160ms cubic-bezier(.2, 0, .2, 1);
}


/* ──────────────────────────── base y reset ──────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: Montserrat, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }

/* Foco visible en todo lo que se puede alcanzar con el teclado. */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

.hidden { display: none; }

/* Cifras que se actualizan cada segundo no deben bailar de ancho. */
.pill, .cooldown-timer, .round-num, .stat-value, .otp-countdown,
.countdown-text, #time-label, #peer-count {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

/* ──────────────────────── iconos y banderas ────────────────────────

   Un unico <svg> con symbols al principio del documento y <use> donde haga
   falta: el dibujo viaja una sola vez y hereda el color del texto.

   No son emoji a proposito. Las banderas emoji no existen en Windows —el
   navegador las degrada a dos letras, "US", "GB"— y los pictogramas cambian
   de dibujo con cada sistema operativo, asi que la misma pantalla se ve
   distinta en cada maquina y en ninguna se ve como uno la diseno. */

.sprite { display: none; }

.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--oro);
}
.ico-grande { width: 30px; height: 30px; }

/* Las banderas llevan un filo interior oscuro: sin el, la franja blanca de
   varias de ellas se derrama sobre el fondo y la bandera pierde el borde. */
.bandera {
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
}

/* ─────────────────────────── primitivas ─────────────────────────── */

.btn-primary {
  display: block;
  width: 100%;
  padding: var(--e3) var(--e5);
  background: var(--oro);
  color: var(--oro-tinta);
  border-radius: var(--r-medio);
  font-size: var(--t-apoyo);
  font-weight: 700;
  letter-spacing: .01em;
  transition: background var(--transicion), transform var(--transicion);
}
.btn-primary:hover { background: var(--oro-claro); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--sala-alta); color: var(--mudo); cursor: default; }

.btn-ghost {
  display: block;
  width: 100%;
  padding: var(--e3) var(--e5);
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  color: var(--tinta-suave);
  font-size: var(--t-apoyo);
  font-weight: 500;
  transition: border-color var(--transicion), color var(--transicion);
}
.btn-ghost:hover { border-color: var(--oro); color: var(--tinta); }
.btn-ghost-pequeno { font-size: var(--t-menudo); padding: var(--e2) var(--e4); }

.btn-row { display: flex; gap: var(--e3); }
.btn-row .btn-primary, .btn-row .btn-ghost { flex: 1; }
.btn-row-separada { margin-top: var(--e2); }
.btn-separado { margin-top: var(--e3); }
.btn-exito { max-width: 280px; margin: 0 auto; }
.ancho-total { width: 100%; }

.enlace {
  padding: 0;
  font: inherit;
  color: var(--oro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace-teal { color: var(--voz-b); }

.field-group { display: flex; flex-direction: column; gap: var(--e2); }
.campo-separado { margin-bottom: var(--e2); }
.bloque-separado { margin-bottom: var(--e4); }

/* Etiquetas en caja normal y en la misma familia. Antes iban en
   monoespaciada y mayusculas, que es la firma visual mas delatora de todo
   el archivo anterior. */
.field-label {
  font-size: var(--t-menudo);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta-suave);
}
.field-label-nota { color: var(--mudo); font-weight: 400; }
.field-label-separada { margin-bottom: var(--e2); }

.field-input, .flag-select, .join-input, .report-select, .report-textarea {
  width: 100%;
  padding: var(--e3) var(--e4);
  background: var(--papel-hondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  font-size: var(--t-apoyo);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.field-input::placeholder, .join-input::placeholder { color: var(--mudo); }
.field-input:focus, .flag-select:focus, .join-input:focus,
.report-select:focus, .report-textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px var(--oro-tenue);
}
.field-input.error { border-color: var(--alarma); box-shadow: 0 0 0 3px var(--alarma-tenue); }

.field-hint { font-size: var(--t-menudo); color: var(--mudo); line-height: 1.5; }
.field-hint.err { color: var(--alarma); }

.acento-oro  { color: var(--oro-claro); font-weight: 600; }
.acento-teal { color: var(--voz-b); font-weight: 600; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-total);
  font-size: var(--t-menudo);
  font-weight: 600;
}

/* ═══════════════════════ EL SITIO ═══════════════════════ */

#sub-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: var(--papel);
}

.sub-layout {
  display: grid;
  grid-template-columns: 1fr minmax(400px, 460px);
  min-height: 100%;
}

/* ── El lado izquierdo: la tesis ── */

.sub-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e8) clamp(var(--e5), 5vw, 72px);
  border-right: 1px solid var(--linea);
}

.hero-title {
  /* La unica pieza en la familia de display. El contraste entre una serif
     de contraste alto y la geometrica del resto es lo que hace la jerarquia;
     sin el, un titular grande es solo texto grande. */
  font-family: Fraunces, Georgia, serif;
  font-size: var(--t-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 var(--e5);
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  color: var(--oro);
}

.hero-desc {
  font-size: var(--t-sub);
  color: var(--tinta-suave);
  max-width: 46ch;
  margin: 0 0 var(--e7);
  line-height: 1.6;
}

/* Las cuatro promesas, en linea de texto con una regla fina. Antes eran
   cuatro tarjetas identicas con un emoji dentro de un cuadrado, que es
   exactamente el patron de rejilla que hace que todo parezca plantilla. */
.hero-features {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linea);
  margin-bottom: var(--e6);
}
.feat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-apoyo);
  color: var(--tinta-suave);
  line-height: 1.55;
}
.feat-row strong {
  color: var(--tinta);
  font-weight: 600;
  flex: 0 0 auto;
}
/* El icono va en su propia columna, alineado con la primera linea de texto,
   sin cuadro ni circulo detras: cuatro iconos identicos dentro de cuatro
   cuadrados de color son la firma de una plantilla. */
.feat-icon {
  flex: 0 0 24px;
  display: flex;
  padding-top: 1px;
}

.hero-lang-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.hero-lang-titulo {
  font-size: var(--t-menudo);
  color: var(--mudo);
  margin-right: var(--e1);
}
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-menudo);
  font-weight: 500;
  color: var(--tinta-suave);
}

/* ── El lado derecho: el formulario ── */

.sub-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e5);
  padding: var(--e7) var(--e7);
  background: var(--superficie);
  border-left: 1px solid var(--linea);
}
/* En pantallas muy altas, centrar deja el formulario flotando en medio de
   la nada. Se limita el alto util y se ancla arriba. */
@media (min-height: 900px) {
  .sub-form-panel, .sub-hero { justify-content: flex-start; padding-top: 12vh; }
}

.form-brand {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--t-titulo);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}
.form-brand span { color: var(--oro); }
.form-brand-sub {
  font-size: var(--t-menudo);
  color: var(--mudo);
  margin-top: var(--e1);
}

.entry-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.entry-tab {
  padding: 0 0 var(--e3);
  font-size: var(--t-apoyo);
  font-weight: 600;
  color: var(--mudo);
  text-align: center;
  border-bottom: 2px solid var(--linea);
  transition: color var(--transicion), border-color var(--transicion);
}
.entry-tab:hover { color: var(--tinta); }
.entry-tab.active { color: var(--tinta); border-bottom-color: var(--oro); }

#login-panel { display: none; flex-direction: column; gap: var(--e4); }
#login-panel.visible { display: flex; }
#register-panel { display: flex; flex-direction: column; gap: var(--e5); }
#register-panel.hidden-panel { display: none; }

.login-intro { display: flex; flex-direction: column; gap: var(--e1); }
.login-intro-titulo { font-size: var(--t-sub); font-weight: 600; }
.login-intro-texto { font-size: var(--t-apoyo); color: var(--mudo); }

/* ── Pasos del registro ── */

.form-steps { display: flex; gap: var(--e2); }
.step-dot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--linea);
  transition: border-color var(--transicion);
}
.step-dot.active { border-bottom-color: var(--oro); }
.step-dot.done { border-bottom-color: var(--oro-claro); }
.step-circle {
  font-size: var(--t-menudo);
  font-weight: 700;
  color: var(--mudo);
}
.step-dot.active .step-circle { color: var(--oro); }
.step-dot.done .step-circle { color: var(--oro-claro); }
.step-label {
  font-size: var(--t-menudo);
  font-weight: 500;
  color: var(--mudo);
  text-transform: lowercase;
  white-space: nowrap;
}
.step-dot.active .step-label { color: var(--tinta); }

.form-page { display: none; flex-direction: column; gap: var(--e4); }
.form-page.active { display: flex; }

/* El pais va en un <select> nativo —se abre bien en movil y se recorre con
   el teclado— con la bandera dibujada al lado, porque dentro de un <option>
   no cabe un SVG y el emoji no se ve en Windows. */
.phone-row { display: grid; grid-template-columns: auto 1fr; gap: var(--e2); }
.pais-wrap {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 0 var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  background: var(--papel-hondo);
}
.pais-wrap:focus-within { border-color: var(--oro); }
.flag-select {
  width: auto;
  padding: var(--e3) 0;
  border: none;
  background: none;
}
.flag-select:focus { box-shadow: none; }

.passwordless-note {
  padding: var(--e3) var(--e4);
  background: var(--oro-tenue);
  border-left: 2px solid var(--oro);
  border-radius: var(--r-medio);
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.passwordless-note strong { color: var(--oro-claro); font-weight: 600; }

.form-footer {
  font-size: var(--t-menudo);
  color: var(--mudo);
  line-height: 1.7;
}
.form-footer a { color: var(--oro); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ── Nivel de ingles ── */

.level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.level-card {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.level-card:hover { border-color: var(--oro); }
.level-card.selected { border-color: var(--oro); background: var(--oro-tenue); }
.level-code { font-size: var(--t-menudo); font-weight: 700; color: var(--oro-claro); }
.level-name { font-size: var(--t-apoyo); font-weight: 600; margin-top: var(--e1); }
.level-desc { font-size: var(--t-menudo); color: var(--mudo); line-height: 1.5; margin-top: var(--e1); }

.interest-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.chip {
  padding: var(--e1) var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-total);
  font-size: var(--t-menudo);
  font-weight: 500;
  color: var(--mudo);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.chip { display: inline-flex; align-items: center; gap: var(--e2); }
.chip:hover { border-color: var(--oro); color: var(--tinta-suave); }
.chip.on { background: var(--oro-tenue); border-color: var(--oro); color: var(--oro-claro); }
.chip .ico { width: 15px; height: 15px; color: currentColor; }

/* ── Verificacion ── */

.verify-intro { font-size: var(--t-apoyo); color: var(--mudo); line-height: 1.6; }
.verify-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.verify-choice.single { grid-template-columns: 1fr; }
.verify-option {
  padding: var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  text-align: center;
}
.verify-option.chosen { border-color: var(--oro); background: var(--oro-tenue); }
.verify-option .ico { margin: 0 auto var(--e2); }
.verify-name { font-size: var(--t-apoyo); font-weight: 600; }
.verify-sub { font-size: var(--t-menudo); color: var(--mudo); margin-top: var(--e1); }

.otp-display, .otp-cabecera { display: flex; flex-direction: column; gap: var(--e3); }
/* El sobre delante del "revisa tu correo": es el unico sitio del registro
   donde el usuario tiene que cambiar de aplicacion, y conviene que se note. */
.otp-icon, .otp-cabecera-icono { align-self: flex-start; }
.otp-title, .otp-cabecera-titulo { font-size: var(--t-sub); font-weight: 600; }
.otp-desc, .otp-cabecera-destino { font-size: var(--t-apoyo); color: var(--mudo); line-height: 1.6; }
.otp-dest { color: var(--oro-claro); font-weight: 600; }

.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e2); }
.otp-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  text-align: center;
  font-size: var(--t-titulo);
  font-weight: 700;
  background: var(--papel-hondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  color: var(--oro-claro);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.otp-box:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px var(--oro-tenue);
}

.otp-resend { font-size: var(--t-menudo); color: var(--mudo); }
.otp-countdown { color: var(--oro-claro); font-weight: 600; }

#login-otp-wrap { display: none; flex-direction: column; gap: var(--e4); }
#login-otp-wrap.visible { display: flex; }

/* ── Alta terminada ── */

.success-screen { display: none; flex-direction: column; align-items: center; gap: var(--e4); text-align: center; }
.success-screen.show { display: flex; }
.success-ring {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  background: var(--oro);
  color: var(--oro-tinta);
  font-size: var(--t-titulo);
  font-weight: 700;
}
.success-title { font-family: Fraunces, Georgia, serif; font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; }
.success-sub { font-size: var(--t-apoyo); color: var(--mudo); max-width: 38ch; line-height: 1.6; }

/* ═══════════════════════ SALA DE ESPERA ═══════════════════════ */

#join-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--e5);
  background: var(--papel);
  overflow-y: auto;
}
#join-screen.hidden { display: none; }

.join-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.join-logo { font-family: Fraunces, Georgia, serif; font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; }
.join-logo span { color: var(--oro); }

.join-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-total);
  background: var(--oro-tenue);
  color: var(--oro-claro);
  font-size: var(--t-menudo);
  font-weight: 600;
}
.join-badge .ico { width: 14px; height: 14px; color: currentColor; }

.preview-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-medio);
  overflow: hidden;
  background: var(--sala-fondo);
}
#preview-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preview-label {
  position: absolute;
  left: var(--e3);
  bottom: var(--e3);
  font-size: var(--t-menudo);
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
}

.status-bar { font-size: var(--t-menudo); color: var(--mudo); line-height: 1.5; }
.join-input-atenuado { opacity: .6; }

.room-type-row { display: flex; gap: var(--e2); }
.room-type-btn {
  flex: 1;
  padding: var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  font-size: var(--t-apoyo);
  font-weight: 500;
  color: var(--mudo);
}
.room-type-btn.active { border-color: var(--oro); background: var(--oro-tenue); color: var(--oro-claro); }

.join-btn {
  padding: var(--e4);
  background: var(--oro);
  color: var(--oro-tinta);
  border-radius: var(--r-medio);
  font-size: var(--t-cuerpo);
  font-weight: 700;
  transition: background var(--transicion), transform var(--transicion);
}
.join-btn:hover { background: var(--oro-claro); }
.join-btn:active { transform: translateY(1px); }
.join-btn:disabled { background: var(--sala-alta); color: var(--mudo); cursor: default; }

.gate-note {
  padding: var(--e3) var(--e4);
  background: var(--voz-a-tenue);
  border-radius: var(--r-medio);
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.gate-note strong { color: var(--oro-claro); font-weight: 600; }

#camera-warning {
  padding: var(--e3) var(--e4);
  background: var(--voz-a-tenue);
  border-radius: var(--r-medio);
  font-size: var(--t-menudo);
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* ═══════════════════════ LA SALA ═══════════════════════ */

#app {
  display: grid;
  grid-template-rows: 56px 1fr 84px;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "cabecera cabecera"
    "video    lateral"
    "controles controles";
  height: 100dvh;
  background: var(--sala-fondo);
  color: var(--sala-tinta);
}

#app header {
  grid-area: cabecera;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: 0 var(--e5);
  background: var(--sala-sup);
  border-bottom: 1px solid var(--sala-linea);
}

/* El defecto que se veia en produccion: la cabecera tenia fondo casi negro
   y el texto usaba el color de tinta del tema claro. El "1" de English1 y
   el nombre de la sala eran invisibles. */
.logo { display: flex; align-items: center; gap: var(--e2); font-family: Fraunces, Georgia, serif; font-size: var(--t-cuerpo); font-weight: 600; color: var(--sala-tinta); }
.logo span { color: var(--oro); }
.logo-level {
  padding: 2px var(--e2);
  border-radius: var(--r-chico);
  background: var(--sala-alta);
  color: var(--sala-mudo);
  font-size: var(--t-menudo);
  font-weight: 600;
}

.room-info { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-menudo); color: var(--sala-mudo); }
#room-label { color: var(--sala-tinta); font-weight: 600; }
/* Sin punto verde parpadeante: la sala ya se ve, no hace falta un adorno
   que anuncie que esta en vivo. */

.header-right { display: flex; align-items: center; gap: var(--e2); }
#app .pill { background: var(--sala-alta); color: var(--sala-mudo); }
#app .pill.gold { color: var(--voz-a-claro); }

.points-badge {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-total);
  background: var(--voz-a-tenue);
  color: var(--voz-a-claro);
  font-size: var(--t-menudo);
  font-weight: 600;
  cursor: pointer;
}
.oculto-al-inicio { display: none; }

/* ── Rejilla de video ── */

#video-area {
  grid-area: video;
  display: grid;
  gap: var(--e1);
  padding: var(--e1);
  min-height: 0;
}
#video-area.n1 { grid-template-columns: 1fr; }
#video-area.n2 { grid-template-columns: 1fr 1fr; }
#video-area.n3, #video-area.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.video-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-medio);
  background: var(--sala-sup);
  min-height: 0;
}
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
#local-tile video { transform: scaleX(-1); }

/* Cada participante lleva su color. Es lo que hace innecesaria la etiqueta
   de "2 speakers": el borde ya dice quien es quien. */
.video-tile { box-shadow: inset 0 0 0 2px var(--voz-b); }
#local-tile { box-shadow: inset 0 0 0 2px var(--voz-a); }

.tile-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(10, 12, 18, .7), transparent);
  pointer-events: none;
}

.tile-label {
  position: absolute;
  left: var(--e3);
  bottom: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-menudo);
  font-weight: 600;
  color: #fff;
}
.sdot { width: 6px; height: 6px; border-radius: var(--r-total); background: var(--voz-b-claro); }
#local-dot { background: var(--voz-a-claro); }
.sdot.muted { background: var(--alarma); }

.tile-level {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  padding: 2px var(--e2);
  border-radius: var(--r-chico);
  background: rgba(10, 12, 18, .6);
  color: rgba(255, 255, 255, .8);
  font-size: var(--t-menudo);
  font-weight: 600;
}
#local-tile::after {
  content: 'You';
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  padding: 2px var(--e2);
  border-radius: var(--r-chico);
  background: var(--voz-a);
  color: #fff;
  font-size: var(--t-menudo);
  font-weight: 600;
}

.tile-report-btn {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  padding: var(--e1) var(--e2);
  border-radius: var(--r-chico);
  background: rgba(10, 12, 18, .6);
  color: rgba(255, 255, 255, .75);
  font-size: var(--t-menudo);
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transicion);
}
.video-tile:hover .tile-report-btn,
.tile-report-btn:focus-visible { opacity: 1; }

.avatar-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  background: var(--sala-sup);
}
.avatar-circle {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  font-size: var(--t-titulo);
  font-weight: 700;
  color: #fff;
}
.avatar-name { font-size: var(--t-apoyo); font-weight: 600; color: var(--sala-tinta); }
.avatar-hint { font-size: var(--t-menudo); color: var(--sala-mudo); max-width: 24ch; text-align: center; line-height: 1.5; }

/* ── Barra lateral ── */

#sidebar {
  grid-area: lateral;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sala-sup);
  border-left: 1px solid var(--sala-linea);
}

.sidebar-tabs { display: flex; border-bottom: 1px solid var(--sala-linea); }
.tab-btn {
  flex: 1;
  padding: var(--e3);
  font-size: var(--t-menudo);
  font-weight: 600;
  color: var(--sala-mudo);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transicion), border-color var(--transicion);
}
.tab-btn:hover { color: var(--sala-tinta); }
.tab-btn.active { color: var(--sala-tinta); border-bottom-color: var(--oro); }

.tab-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.tab-pane.active { display: flex; flex-direction: column; }

#participants-list { padding: var(--e3); display: flex; flex-direction: column; gap: var(--e1); }
.participant-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2);
  border-radius: var(--r-medio);
}
.p-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  border: 1px solid transparent;
  font-size: var(--t-menudo);
  font-weight: 700;
}
.p-name { font-size: var(--t-apoyo); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-level { font-size: var(--t-menudo); color: var(--sala-mudo); font-weight: 600; }
.p-icons svg { width: 15px; height: 15px; color: var(--sala-mudo); }
.p-icons svg.off { color: var(--alarma); }

.tools-scroll { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); }

.eng-tool {
  padding: var(--e4);
  border-radius: var(--r-medio);
  background: var(--sala-alta);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.eng-tool-title {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-menudo);
  font-weight: 700;
  color: var(--sala-tinta);
}
.eng-tool-title .ico { width: 15px; height: 15px; }
.eng-phrase { font-size: var(--t-apoyo); font-weight: 600; line-height: 1.5; color: var(--sala-tinta); }
.eng-phrase-corta { font-size: var(--t-menudo); font-weight: 500; line-height: 1.6; }
.eng-translation { font-size: var(--t-menudo); color: var(--sala-mudo); font-style: italic; }
.eng-btn {
  align-self: flex-start;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-chico);
  background: var(--oro-tenue);
  color: var(--oro-claro);
  font-size: var(--t-menudo);
  font-weight: 600;
  transition: background var(--transicion);
}
.eng-btn:hover { background: rgba(212, 168, 67, .22); }
.eng-btn-fila { display: flex; gap: var(--e2); }
.eng-btn-mitad { flex: 1; text-align: center; align-self: stretch; }
.eng-nota { font-size: var(--t-menudo); color: var(--sala-mudo); line-height: 1.5; }

.vocab-palabra { font-size: var(--t-sub); font-weight: 700; color: var(--voz-a-claro); }
.vocab-tipo { font-size: var(--t-menudo); color: var(--sala-mudo); font-style: italic; }
.vocab-definicion { font-size: var(--t-menudo); line-height: 1.6; color: var(--sala-tinta); }
.vocab-ejemplo { font-size: var(--t-menudo); color: var(--sala-mudo); font-style: italic; line-height: 1.6; }
.speak-timer-cifra { font-family: Fraunces, Georgia, serif; font-size: var(--t-cifra); font-weight: 600; color: var(--sala-tinta); text-align: center; font-variant-numeric: tabular-nums; }

/* ── Controles ── */

#controls {
  grid-area: controles;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e5);
  background: var(--sala-sup);
  border-top: 1px solid var(--sala-linea);
}

.ctrl-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.ctrl-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  background: var(--sala-alta);
  color: var(--sala-tinta);
  transition: background var(--transicion), color var(--transicion);
}
.ctrl-btn svg { width: 19px; height: 19px; }
.ctrl-btn:hover { background: #303541; }
.ctrl-btn.off { background: var(--alarma-tenue); color: var(--alarma); }
.ctrl-btn.active { background: var(--voz-b); color: #fff; }
.ctrl-btn-salir { background: var(--alarma); color: #fff; }
.ctrl-btn-salir:hover { background: #c2392e; }
.ctrl-label { font-size: var(--t-micro); font-weight: 600; color: var(--sala-mudo); letter-spacing: .04em; }

#leave-btn-float { display: none; }

/* ── Cuenta atras de la ronda ── */

#session-countdown {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: var(--e1);
  min-width: 220px;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-total);
  background: rgba(27, 30, 38, .92);
  backdrop-filter: blur(8px);
}
#session-countdown.show { display: flex; }
#countdown-text { font-size: var(--t-menudo); font-weight: 600; color: var(--sala-tinta); text-align: center; }
.countdown-bar-wrap { height: 2px; border-radius: var(--r-total); background: rgba(255, 255, 255, .12); overflow: hidden; }
.countdown-bar { height: 100%; background: var(--voz-b-claro); transition: width 1s linear; }
#session-countdown.warn .countdown-bar { background: var(--voz-a-claro); }
#session-countdown.critical .countdown-bar { background: var(--alarma); }

/* ═══════════════════════ CAPAS SOBRE TODO ═══════════════════════ */

/* Los modales usan siempre la paleta de la sala: son una capa por encima de
   un fondo atenuado, y eso se lee igual venga de la landing o de la
   videollamada. */

.modal-backdrop, .profile-modal-backdrop,
#reconnect-modal, #cooldown-modal, #payment-modal,
#early-leave-modal, #round-overlay, #room-entry-notice {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
  background: rgba(10, 12, 18, .78);
  backdrop-filter: blur(6px);
}
.modal-backdrop.show, .profile-modal-backdrop.show,
#reconnect-modal.show, #cooldown-modal.show, #payment-modal.show,
#early-leave-modal.show, #round-overlay.show, #room-entry-notice.show { display: flex; }

.modal-backdrop { z-index: 620; }
.profile-modal-backdrop { z-index: 600; }
#room-entry-notice { z-index: 560; }
#reconnect-modal { z-index: 640; }
#round-overlay { z-index: 660; }
#early-leave-modal { z-index: 680; }
#payment-modal { z-index: 700; }
#cooldown-modal { z-index: 720; }

.profile-modal, .reconnect-card, .cooldown-card, .report-card,
.payment-card, .salida-card {
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - var(--e8));
  overflow-y: auto;
  padding: var(--e6);
  border-radius: var(--r-medio);
  background: var(--sala-sup);
  color: var(--sala-tinta);
  box-shadow: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.profile-modal { max-width: 440px; }

.reconnect-title, .cooldown-title, .report-title, .profile-title,
.round-title, .salida-titulo-fuerte, .notice-title {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--sala-tinta);
}
.reconnect-sub, .cooldown-sub, .salida-texto, .notice-body,
.round-sub, .payment-period, .reconnect-auto, .cooldown-label,
.reconnect-points-note, .payment-secure, .profile-pie, .otp-resend {
  font-size: var(--t-menudo);
  color: var(--sala-mudo);
  line-height: 1.65;
}

/* El icono de cada capa, centrado y solo: no hay cuatro capas iguales en
   pantalla a la vez, asi que aqui si sostiene el mensaje. */
.cooldown-icon, .salida-icono { align-self: center; color: var(--oro); }
.welcome-emoji { color: var(--oro); }

/* ── Cambio de pareja ── */

.reconnect-avatar {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  font-size: var(--t-sub);
  font-weight: 700;
  color: #fff;
  align-self: center;
}
.reconnect-avatar-fondo { background: var(--voz-b); }
.reconnect-card .ico { align-self: center; }
.reconnect-name { color: var(--sala-tinta); font-weight: 600; }
.reconnect-btns { display: flex; flex-direction: column; gap: var(--e2); }
.reconnect-yes {
  padding: var(--e3);
  border-radius: var(--r-medio);
  background: var(--oro);
  color: var(--oro-tinta);
  font-size: var(--t-apoyo);
  font-weight: 700;
}
.reconnect-yes:hover { background: var(--oro-claro); }
.reconnect-no {
  padding: var(--e3);
  border-radius: var(--r-medio);
  border: 1px solid var(--sala-linea);
  color: var(--sala-tinta);
  font-size: var(--t-apoyo);
  font-weight: 500;
}
.reconnect-no:hover { border-color: var(--sala-mudo); }

/* ── Transicion de ronda ── */

#round-overlay { flex-direction: column; gap: var(--e3); }
.round-num { font-family: Fraunces, Georgia, serif; font-size: var(--t-cifra-xl); font-weight: 600; color: var(--oro); }
.round-next { font-size: var(--t-menudo); color: var(--sala-mudo); }

/* ── Espera entre sesiones ── */

.cooldown-timer { font-family: Fraunces, Georgia, serif; font-size: var(--t-cifra); font-weight: 600; color: var(--oro-claro); text-align: center; }
.cooldown-progress { height: 3px; border-radius: var(--r-total); background: rgba(255, 255, 255, .1); overflow: hidden; }
.cooldown-bar { height: 100%; background: var(--voz-a-claro); transition: width 1s linear; }

/* ── Aviso de entrada a la sala ── */

#room-entry-notice { align-items: flex-start; padding-top: 96px; background: none; backdrop-filter: none; pointer-events: none; }
.notice-caja {
  pointer-events: auto;
  max-width: 380px;
  padding: var(--e4) var(--e5);
  border-radius: var(--r-medio);
  background: var(--sala-alta);
  box-shadow: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.notice-close, .welcome-close {
  align-self: flex-start;
  font-size: var(--t-menudo);
  font-weight: 600;
  color: var(--oro-claro);
}

/* ── Bienvenida ── */

#welcome-banner {
  position: fixed;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 380;
  max-width: min(400px, calc(100vw - var(--e6)));
  padding: var(--e4) var(--e5);
  border-radius: var(--r-medio);
  background: var(--sala-alta);
  box-shadow: var(--s3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
#welcome-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#welcome-banner { flex-direction: row; align-items: flex-start; }
#welcome-banner .welcome-close { margin-top: var(--e2); }
.welcome-text { font-size: var(--t-menudo); color: var(--sala-mudo); line-height: 1.65; }
.welcome-text strong { color: var(--sala-tinta); font-weight: 600; }

/* ── Perfil ── */

.profile-cabecera { display: flex; align-items: center; justify-content: space-between; }
.boton-cerrar { color: var(--sala-mudo); font-size: var(--t-sub); line-height: 1; padding: var(--e1); }
.boton-cerrar:hover { color: var(--sala-tinta); }
.profile-avatar-wrap { display: flex; align-items: center; gap: var(--e4); }
.profile-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-total);
  background: var(--voz-a);
  color: #fff;
  font-size: var(--t-sub);
  font-weight: 700;
}
.profile-nombre { font-size: var(--t-cuerpo); font-weight: 600; }
.profile-correo { font-size: var(--t-menudo); color: var(--sala-mudo); }
.profile-nivel { font-size: var(--t-menudo); color: var(--oro-claro); font-weight: 600; margin-top: var(--e1); }

.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.stat-card {
  padding: var(--e3);
  border-radius: var(--r-medio);
  background: var(--sala-alta);
  text-align: center;
}
.stat-value { font-family: Fraunces, Georgia, serif; font-size: var(--t-sub); font-weight: 600; color: var(--oro); }
.stat-label { font-size: var(--t-menudo); color: var(--sala-mudo); font-weight: 500; margin-top: 2px; }

.profile-modal .level-grid { grid-template-columns: repeat(4, 1fr); }
.profile-modal .level-card { border-color: var(--sala-linea); text-align: center; padding: var(--e2); }
.profile-modal .level-card:hover { border-color: var(--sala-mudo); }
.profile-modal .level-card.selected { border-color: var(--oro); background: var(--oro-tenue); }
.profile-modal .level-code { color: var(--oro-claro); }
.profile-modal .level-name { font-size: var(--t-menudo); color: var(--sala-tinta); }
.profile-modal .field-label { color: var(--sala-mudo); }
.profile-modal .btn-ghost { border-color: var(--sala-linea); color: var(--sala-mudo); }
.profile-modal .btn-ghost:hover { border-color: var(--sala-mudo); color: var(--sala-tinta); }

/* ── Pago ── */

.payment-badge {
  align-self: flex-start;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-total);
  background: var(--voz-a-tenue);
  color: var(--voz-a-claro);
  font-size: var(--t-menudo);
  font-weight: 600;
}
.payment-price { font-family: Fraunces, Georgia, serif; font-size: var(--t-cifra-xl); font-weight: 600; color: var(--oro); line-height: 1; }
.payment-price sup { font-size: var(--t-sub); font-weight: 600; vertical-align: super; color: var(--sala-mudo); }
.payment-trial-notice {
  padding: var(--e3) var(--e4);
  border-radius: var(--r-medio);
  background: var(--voz-a-tenue);
  font-size: var(--t-menudo);
  line-height: 1.6;
  color: var(--sala-tinta);
}
.payment-features { display: flex; flex-direction: column; gap: var(--e3); }
.payment-feat { display: flex; align-items: flex-start; gap: var(--e3); font-size: var(--t-menudo); color: var(--sala-mudo); line-height: 1.55; }
.payment-feat strong { color: var(--sala-tinta); font-weight: 600; }
.payment-feat-icon { flex: 0 0 20px; display: flex; padding-top: 1px; }
.payment-feat-icon .ico { width: 17px; height: 17px; }
.paypal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e4);
  border-radius: var(--r-medio);
  background: #ffc439;
  color: #003087;
  font-size: var(--t-apoyo);
  font-weight: 700;
}
.paypal-btn:hover { background: #f0b429; }
.paypal-btn:disabled { background: var(--sala-alta); color: var(--sala-mudo); cursor: default; }

/* ── Salida anticipada ── */

.salida-botones { display: flex; flex-direction: column; gap: var(--e2); }
.salida-btn-principal {
  padding: var(--e3);
  border-radius: var(--r-medio);
  background: var(--oro);
  color: var(--oro-tinta);
  font-size: var(--t-apoyo);
  font-weight: 700;
}
.salida-btn-principal:hover { background: var(--oro-claro); }
.salida-btn-secundario {
  padding: var(--e3);
  border-radius: var(--r-medio);
  border: 1px solid var(--sala-linea);
  color: var(--sala-tinta);
  font-size: var(--t-apoyo);
  font-weight: 500;
}
.salida-btn-secundario:hover { border-color: var(--sala-mudo); }
.salida-btn-terciario { padding: var(--e2); color: var(--sala-mudo); font-size: var(--t-menudo); font-weight: 500; }
.salida-btn-terciario:hover { color: var(--sala-tinta); }

/* ── Reporte ── */

.report-label { font-size: var(--t-menudo); font-weight: 600; color: var(--sala-mudo); }
.report-select, .report-textarea {
  background: var(--papel-hondo);
  border-color: var(--sala-linea);
  color: var(--sala-tinta);
}
.report-textarea { min-height: 88px; resize: vertical; }
.report-actions { display: flex; gap: var(--e2); }
.report-cancel {
  flex: 1;
  padding: var(--e3);
  border-radius: var(--r-medio);
  border: 1px solid var(--sala-linea);
  color: var(--sala-mudo);
  font-size: var(--t-apoyo);
  font-weight: 500;
}
.report-cancel:hover { color: var(--sala-tinta); border-color: var(--sala-mudo); }
.report-submit {
  flex: 1;
  padding: var(--e3);
  border-radius: var(--r-medio);
  background: var(--alarma);
  color: #fff;
  font-size: var(--t-apoyo);
  font-weight: 600;
}
.report-submit:hover { background: #ee8378; }

/* ── Fallo de video ── */

#video-error {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 460;
  max-width: min(420px, calc(100vw - var(--e6)));
  padding: var(--e3) var(--e5);
  border-radius: var(--r-medio);
  background: var(--alarma);
  color: #fff;
  font-size: var(--t-menudo);
  text-align: center;
  box-shadow: var(--s3);
}

/* ── Avisos flotantes ──
   Se apilan en vez de pisarse: con el panel del chat fuera, aqui llega todo
   aviso del sistema, y dos pueden llegar casi a la vez. Es ademas el unico
   canal que se ve en movil, donde la barra lateral es un panel deslizante. */

#avisos {
  position: fixed;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--e2);
  pointer-events: none;
  width: max-content;
  max-width: min(360px, calc(100vw - var(--e6)));
}
.aviso {
  padding: var(--e2) var(--e4);
  border-radius: var(--r-medio);
  background: var(--sala-alta);
  color: var(--sala-tinta);
  font-size: var(--t-menudo);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--s3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.aviso.visible { opacity: 1; transform: translateY(0); }
.aviso-success { color: var(--voz-b-claro); }
.aviso-warn { color: var(--voz-a-claro); }

/* ═══════════════════════ ADAPTACION ═══════════════════════
   Dos puntos de corte, no siete solapados. Ninguna regla necesita
   !important porque ninguna se pelea con otra. */

@media (max-width: 720px) {
  .sub-layout { grid-template-columns: 1fr; }

  /* En el telefono el formulario manda, pero la tesis no desaparece del
     todo: quedan el titular y las banderas, que son lo que dice de que va
     esto. Lo que se va es el parrafo y las cuatro promesas, que en vertical
     solo empujan el formulario fuera de la pantalla. */
  .sub-hero {
    padding: var(--e6) var(--e5) var(--e5);
    border-right: none;
    border-bottom: 1px solid var(--linea);
  }
  .hero-desc, .hero-features { display: none; }
  .hero-title { margin-bottom: var(--e4); }

  .sub-form-panel { padding: var(--e6) var(--e5); min-height: auto; border-left: none; }

  #join-screen { padding: var(--e4); align-items: start; }
  .join-card { padding-top: var(--e5); }

  /* La sala a una columna. La barra lateral pasa a panel deslizante en vez
     de desaparecer: antes se ocultaba con display:none y quien practicaba
     desde el celular perdia el acceso a las herramientas. */
  #app {
    grid-template-columns: 1fr;
    grid-template-areas: "cabecera" "video" "controles";
  }

  #sidebar {
    position: fixed;
    inset: 56px 0 84px auto;
    width: min(320px, 86vw);
    z-index: 500;
    transform: translateX(100%);
    transition: transform var(--transicion);
    box-shadow: var(--s3);
  }
  #sidebar.abierto { transform: translateX(0); }

  /* En movil el video ocupa toda el area y quien habla va detras, con el
     recuadro propio en pequeno encima, como en cualquier videollamada. */
  #video-area.n2, #video-area.n3, #video-area.n4 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  #video-area.n2 .video-tile, #video-area.n3 .video-tile, #video-area.n4 .video-tile {
    grid-area: 1 / 1;
  }
  #video-area.n2 #local-tile, #video-area.n3 #local-tile, #video-area.n4 #local-tile {
    position: absolute;
    right: var(--e3);
    top: var(--e3);
    width: 96px;
    height: 136px;
    z-index: 10;
    box-shadow: inset 0 0 0 2px var(--voz-a), var(--s3);
  }
  #video-area { position: relative; }

  #controls { gap: var(--e4); }
  #app header { padding: 0 var(--e4); }
  .room-info { display: none; }
}

@media (max-width: 420px) {
  :root { --t-sub: 1.0625rem; }
  .sub-form-panel { padding: var(--e5) var(--e4); }
  .level-grid { grid-template-columns: 1fr; }
  .otp-boxes { gap: var(--e1); }
  .ctrl-btn { width: 40px; height: 40px; }
  .ctrl-label { display: none; }
  #controls { gap: var(--e3); }
  .profile-stats { grid-template-columns: 1fr; }
  .profile-modal, .reconnect-card, .cooldown-card, .report-card,
  .payment-card, .salida-card { padding: var(--e5); }
}

/* El cierre del panel lateral solo tiene sentido cuando el panel se desliza,
   o sea en movil: en escritorio la barra es parte del layout. */
.tab-cerrar { display: none; }
@media (max-width: 720px) {
  .tab-cerrar {
    display: block;
    padding: var(--e3) var(--e4);
    color: var(--sala-mudo);
    font-size: var(--t-apoyo);
  }
  .tab-cerrar:hover { color: var(--sala-tinta); }
}

/* Los elementos con role="button" tienen que verse pulsables. */
[role="button"] { cursor: pointer; }