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

   Papel y oro, con una sola excepcion deliberada.

   El sitio —landing, registro, inicio y sala de espera— va sobre papel
   calido: es donde se lee, se escribe y se decide, y ahi el blanco roto
   cansa menos y hace que el oro se vea oro. La videollamada, y solo ella,
   va sobre tinta oscura: el video se ve mejor rodeado de oscuro y ahi las
   caras tienen que ser lo unico que brilla.

   Por eso el oro tiene dos tonos y no uno. Sobre papel, un oro claro no se
   lee: hace falta bajarlo hasta que contraste. Sobre la sala oscura pasa lo
   contrario. Son --oro-texto y --oro-luz, y confundirlos es la unica forma
   de romper este archivo sin que salte ninguna prueba.

   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:
     · una sola familia, Poppins. Geometrica y redonda, que es lo que le da
       el tono amable al producto. Sin contraste de familia que ayude, la
       jerarquia la hacen el tamano y el PESO: 700 en titulos y cifras,
       400 y 500 en el cuerpo
     · 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 papel. No es blanco de oficina: tiene algo de calor, que es lo que
     evita que el oro se vea mostaza al lado. */
  --papel:        #faf8f3;
  --papel-hondo:  #f2eee4;
  --superficie:   #ffffff;
  --tinta:        #1b1a17;
  --tinta-suave:  #4a4740;
  --mudo:         #706b62;

  /* 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(140, 105, 25, .18);
  --linea-fuerte: rgba(140, 105, 25, .34);

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

  /* El oro, en cinco piezas con oficios distintos.

     --oro       rellenos y filos: botones, bordes, subrayados
     --oro-hover el mismo, un paso mas hondo, para el paso del raton
     --oro-texto el unico que se puede leer COMO TEXTO sobre papel
     --oro-luz   el unico que se puede leer sobre la sala oscura
     --oro-tinta la tinta que va ENCIMA de un fondo de oro

     Poner --oro-luz sobre papel da un texto ilegible que ninguna prueba
     detecta, porque no hay prueba automatica de contraste aqui. */
  --oro:          #b5851a;
  /* El paso del raton ACLARA el oro en vez de oscurecerlo. Oscurecerlo
     parecia lo natural, pero la tinta que va encima del boton se queda sin
     contraste: el boton se enciende, no se apaga. */
  --oro-hover:    #cb9a24;
  --oro-texto:    #8a6414;
  --oro-luz:      #eccb7d;
  --oro-tenue:    rgba(181, 133, 26, .13);
  --oro-tinta:    #1b1710;

  /* 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-luz);
  --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:       #b3352a;
  --alarma-tenue: rgba(179, 53, 42, .12);
  --atencion:     #8a6414;

  /* 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. Las dos primeras se posan sobre papel y por eso son
     suaves; la tercera es la de los modales, que flotan sobre la sala
     oscura y necesitan ser casi negras para verse. */
  --s1: 0 1px 2px rgba(28, 26, 20, .07);
  --s2: 0 2px 10px rgba(28, 26, 20, .09);
  --s3: 0 24px 48px rgba(0, 0, 0, .5);

  --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: Poppins, -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-texto);
  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-texto);
}
.ico-grande { width: 30px; height: 30px; }

/* Los mismos iconos, cuando caen sobre una superficie oscura. */
.payment-feat-icon .ico, .eng-tool-title .ico, .buscando-caja .ico,
.cooldown-icon, .salida-icono, .welcome-emoji { color: var(--oro-luz); }

/* 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-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--papel-hondo); 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); }
/* La accion secundaria que va DEBAJO de la principal no lleva recuadro. Con
   borde y ancho completo quedaban dos bloques pegados, y el que solo dice
   "olvide mi contrasena" pesaba lo mismo que el de entrar. Es texto. */
.btn-ghost-pequeno {
  width: auto;
  align-self: center;
  margin-top: calc(var(--e2) * -1);
  padding: var(--e2) var(--e3);
  border: none;
  font-size: var(--t-menudo);
  color: var(--mudo);
}
.btn-ghost-pequeno:hover {
  color: var(--oro-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Volver y continuar no son dos opciones equivalentes, asi que no se pintan
   igual. Con los dos a flex:1 quedaban dos bloques del mismo tamano
   compitiendo, y el recuadro alrededor de "Back" le daba el peso de una
   decision cuando es solo deshacer. El retroceso pasa a texto y la accion se
   queda con el ancho. */
.btn-row {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e2);
}
.btn-row .btn-primary { flex: 1; }
.btn-row .btn-ghost {
  flex: 0 0 auto;
  width: auto;
  padding: var(--e3) 0;
  border: none;
  color: var(--mudo);
  font-weight: 500;
}
.btn-row .btn-ghost:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.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-texto);
  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, .join-input, .report-select, .report-textarea {
  width: 100%;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  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, .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-texto); font-weight: 600; }
/* El mismo acento, cuando el texto que lo lleva vive en una capa oscura. */
.notice-caja .acento-oro, .payment-card .acento-oro, .salida-card .acento-oro,
.cooldown-card .acento-oro, .reconnect-card .acento-oro { color: var(--oro-luz); }
.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);
  isolation: isolate;
}

/* Fondo: dos frentes de onda, uno por voz (--voz-a oro, --voz-b petroleo),
   cruzandose sobre la costura entre el hero y el formulario.

   Van en pseudo-elementos con position:fixed y no en el flujo: asi no se
   mueven con el scroll del contenedor y no cuestan un nodo de DOM. */

#sub-screen::before,
#sub-screen::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* El corte diagonal: papel contra papel-hondo. El salto de color es minimo
   a proposito; lo que se tiene que ver es el filo, no el relleno. */
#sub-screen::before {
  background:
    linear-gradient(
      104deg,
      transparent 0 38%,
      var(--papel-hondo) 38% 100%
    );
  opacity: .85;
}

/* Los radios crecen en saltos desiguales: equidistantes se leen como una
   diana, y el moire que sale de un repeating-radial-gradient se nota mas
   todavia. Las alfas bajan con el radio para que la onda se apague. */
#sub-screen::after {
  background:
    /* voz A — oro, desde el hero */
    radial-gradient(circle at 18% 88%,
      transparent 0 15vmin,
      rgba(181, 133, 26, .16) 15vmin calc(15vmin + 1.5px),
      transparent calc(15vmin + 1.5px) 27vmin,
      rgba(181, 133, 26, .13) 27vmin calc(27vmin + 1.5px),
      transparent calc(27vmin + 1.5px) 43vmin,
      rgba(181, 133, 26, .10) 43vmin calc(43vmin + 1.5px),
      transparent calc(43vmin + 1.5px) 64vmin,
      rgba(181, 133, 26, .07) 64vmin calc(64vmin + 1.5px),
      transparent calc(64vmin + 1.5px) 100%),
    /* voz B — petroleo, desde el formulario */
    radial-gradient(circle at 88% 8%,
      transparent 0 12vmin,
      rgba(42, 160, 141, .15) 12vmin calc(12vmin + 1.5px),
      transparent calc(12vmin + 1.5px) 23vmin,
      rgba(42, 160, 141, .12) 23vmin calc(23vmin + 1.5px),
      transparent calc(23vmin + 1.5px) 38vmin,
      rgba(42, 160, 141, .09) 38vmin calc(38vmin + 1.5px),
      transparent calc(38vmin + 1.5px) 58vmin,
      rgba(42, 160, 141, .06) 58vmin calc(58vmin + 1.5px),
      transparent calc(58vmin + 1.5px) 100%),
    /* el halo tibio donde las dos se encuentran */
    radial-gradient(ellipse 70vmin 55vmin at 62% 45%,
      var(--oro-tenue) 0%,
      transparent 70%);
  /* 34s: lo bastante lento para que no compita con el formulario. */
  animation: respirar-voces 34s ease-in-out infinite;
}

@keyframes respirar-voces {
  0%, 100% { transform: scale(1);     opacity: 1;   }
  50%      { transform: scale(1.045); opacity: .82; }
}

/* El grano va colgado de .sub-layout porque #sub-screen ya gasto sus dos
   pseudo-elementos. feTurbulence en un data-URI: no pide una peticion. */
.sub-layout::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

/* Se apaga el vaiven, no las capas: son fondo, no movimiento. */
@media (prefers-reduced-motion: reduce) {
  #sub-screen::after { animation: none; }
}

/* Sin tope, en pantallas anchas el titular se desparrama y el ojo tiene que
   viajar de mas hasta el formulario. */
.sub-layout {
  display: grid;
  grid-template-columns: 1fr minmax(400px, 460px);
  min-height: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Solo con sitio de sobra: pegada al borde de la ventana, la regla parece
   un recorte. */
@media (min-width: 1320px) {
  .sub-layout {
    border-left: 1px solid var(--linea);
    border-right: 1px solid var(--linea);
  }
}

/* ── 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 {
  /* Una sola familia en todo el producto, asi que el titular no se apoya en
     un contraste de familia: lo sostienen el tamano y el peso. Poppins es
     ancha, y sin apretar el interletrado un titular grande se desparrama. */
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0 0 var(--e5);
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  color: var(--oro-texto);
}

.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-size: var(--t-titulo);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}
.form-brand span { color: var(--oro-texto); }
.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); }
.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-texto); }
.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; }

.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-texto); font-weight: 600; }

.form-footer {
  font-size: var(--t-menudo);
  color: var(--mudo);
  line-height: 1.7;
}
.form-footer a { color: var(--oro-texto); 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-texto); }
.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-texto); }
.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-texto); 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-texto);
  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-texto); font-weight: 600; }

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

/* Los tres pasos del acceso: entrar, pedir el codigo, elegir contrasena
   nueva. Solo uno visible a la vez. El primero arranca puesto —es el camino
   normal— y los otros dos se encienden con .visible. */
#login-password-step { display: flex; flex-direction: column; gap: var(--e4); }
#login-email-step { display: none; flex-direction: column; gap: var(--e4); }
#login-email-step.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-size: var(--t-titulo); font-weight: 700; letter-spacing: -.01em; }
.success-sub { font-size: var(--t-apoyo); color: var(--mudo); max-width: 38ch; line-height: 1.6; }

/* ═══════════════════════ INICIO ═══════════════════════ */

#home-screen {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--papel);
  overflow-y: auto;
}
#home-screen.hidden { display: none; }

/* ── La barra ── */

.navbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) clamp(var(--e4), 4vw, var(--e7));
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.nav-marca {
  font-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: -.02em;
}
.nav-marca span { color: var(--oro-texto); }
.nav-derecha { display: flex; align-items: center; gap: var(--e4); }
.nav-dato { font-size: var(--t-menudo); color: var(--mudo); }
.nav-dato strong { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-nivel {
  padding: 2px var(--e2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-total);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--oro-texto);
}
.nav-cuenta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-menudo);
  font-weight: 600;
  color: var(--tinta);
}
.nav-cuenta:hover { color: var(--oro-texto); }
.nav-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-total);
  background: var(--oro-tenue);
  color: var(--oro-texto);
  font-size: var(--t-menudo);
  font-weight: 700;
}

/* ── El panel ── */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(var(--e5), 4vw, var(--e7));
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--e7) clamp(var(--e4), 4vw, var(--e7)) var(--e8);
}
.panel-principal, .panel-lado { display: flex; flex-direction: column; gap: var(--e5); }

.join-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

/* ── Como va una sesion, y el boton ── */

.empezar {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  padding: var(--e5);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-medio);
  background: var(--superficie);
}
.empezar-titulo { font-size: var(--t-apoyo); font-weight: 700; margin-bottom: var(--e3); }
.empezar-pasos {
  margin: 0;
  padding-left: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: var(--t-menudo);
  color: var(--tinta-suave);
  line-height: 1.6;
}
.empezar-pasos li::marker { color: var(--oro-texto); font-weight: 700; }
.empezar .join-btn { margin: 0; }

/* ── Bloques del panel ── */

.bloque { display: flex; flex-direction: column; gap: var(--e3); }
.bloque-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.bloque-titulo {
  font-size: var(--t-apoyo);
  font-weight: 700;
  margin: 0;
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
  flex: 1;
}
.bloque-nota { font-size: var(--t-menudo); color: var(--mudo); }

/* ── Historial ── */

.llamada {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-menudo);
}
.llamada-cuando { color: var(--tinta); font-weight: 600; }
.llamada-detalle { color: var(--mudo); }
.llamada-minutos {
  font-size: var(--t-sub);
  font-weight: 700;
  color: var(--oro-texto);
  font-variant-numeric: tabular-nums;
}

.vacio {
  padding: var(--e5) 0;
  font-size: var(--t-menudo);
  color: var(--mudo);
  line-height: 1.7;
}
.vacio strong { color: var(--tinta); font-weight: 600; }

/* ── Los minutos de la semana ──
   Siete barras con los minutos reales de cada dia. Si no hay ni un minuto
   todavia no se dibuja nada: una grafica vacia no informa, solo decora. */
.semana { display: flex; align-items: flex-end; gap: var(--e2); height: 84px; }
.semana-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--e1); height: 100%; justify-content: flex-end; }
.semana-barra { width: 100%; border-radius: var(--r-chico); background: var(--oro); min-height: 3px; }
.semana-barra.cero { background: var(--linea-fuerte); }
.semana-etiqueta { font-size: var(--t-micro); color: var(--mudo); }
.semana-total { font-size: var(--t-menudo); color: var(--mudo); }
.semana-total strong { color: var(--tinta); font-weight: 700; }

/* ── Columna lateral ── */

.lado-frase {
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}
.lado-traduccion { font-size: var(--t-menudo); color: var(--mudo); font-style: italic; margin: 0; }
.lado-texto { font-size: var(--t-menudo); color: var(--mudo); line-height: 1.6; margin: 0; }
.lado-nivel { font-size: var(--t-apoyo); font-weight: 600; margin: 0; }

.home-saludo {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0;
}
.home-saludo span { color: var(--oro-texto); }
.home-sub {
  font-size: var(--t-apoyo);
  color: var(--mudo);
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

/* Las cifras van sobre una regla fina y alineadas por la linea de base, no
   cada una dentro de su tarjeta: cuatro rectangulos identicos con un numero
   dentro es el patron que hace que todo parezca plantilla. */
.home-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e6);
  padding: var(--e4) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
/* Numero y etiqueta centrados uno con otro. Alineados a la izquierda, un
   "0" al lado de "minutes spoken" dejaba la tira desigual y se leia como un
   fallo de maquetacion mas que como una decision. */
.home-cifra-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.home-cifra {
  font-size: var(--t-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--oro-texto);
  font-variant-numeric: tabular-nums;
}
.home-etiqueta { font-size: var(--t-menudo); color: var(--mudo); }

.home-pie { display: flex; gap: var(--e5); }
.home-enlace-solo { align-self: flex-start; }
.home-enlace {
  padding: 0;
  font-size: var(--t-menudo);
  font-weight: 600;
  color: var(--mudo);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transicion);
}
.home-enlace:hover { color: var(--oro-texto); }

/* ═══════════════════════ 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-size: var(--t-titulo); font-weight: 700; letter-spacing: -.01em; }
.join-logo span { color: var(--oro-texto); }

.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-texto);
  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-texto); }

.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-hover); }
.join-btn:active { transform: translateY(1px); }
.join-btn:disabled { background: var(--papel-hondo); 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-texto); 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-size: var(--t-cuerpo); font-weight: 700; letter-spacing: -.02em; 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;
}
/* El emparejador prefiere el mismo nivel, pero cuando no hay nadie de tu
   nivel esperando te junta con quien haya. Esto lo dice sin ambiguedad. */
.tile-level.distinto {
  background: rgba(244, 161, 0, .22);
  color: #f4b942;
}
.tile-level:empty { display: none; }
#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-level.distinto { color: #f4b942; }
.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-luz);
  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-size: var(--t-cifra); font-weight: 700; 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); }

/* ── A la espera de pareja ── */

#buscando {
  grid-area: video;
  display: none;
  place-items: center;
  padding: var(--e5);
  pointer-events: none;
  z-index: 4;
}
#buscando.show { display: grid; }

.buscando-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  max-width: 34ch;
  padding: var(--e6);
  border-radius: var(--r-medio);
  background: rgba(11, 13, 19, .82);
  backdrop-filter: blur(8px);
  text-align: center;
}

/* Un anillo que gira despacio alrededor del icono. No es un adorno: es la
   unica senal de que el sistema sigue trabajando y no se colgo. Con
   prefers-reduced-motion la regla global lo deja quieto. */
.buscando-anillo {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
}
.buscando-anillo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-total);
  border: 2px solid var(--sala-linea);
  border-top-color: var(--oro);
  animation: girar 1.6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.buscando-titulo {
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--sala-tinta);
}
.buscando-texto { font-size: var(--t-menudo); color: var(--sala-mudo); line-height: 1.6; }
.buscando-reloj {
  font-size: var(--t-menudo);
  font-weight: 600;
  color: var(--oro-luz);
  font-variant-numeric: tabular-nums;
}

/* ── Alguien comparte pantalla ──
   Una pantalla compartida dentro de un recuadro a media pantalla y recortada
   por object-fit: cover no se lee: se pierden justo los bordes, que es donde
   viven las barras de herramientas. En cuanto alguien comparte, lo compartido
   pasa a ocupar el area y las caras se van a una columna estrecha. */

#video-area.presentando { grid-template-columns: 1fr 200px; grid-template-rows: 1fr; }
#video-area.presentando .compartiendo { grid-column: 1; grid-row: 1; }
#video-area.presentando .compartiendo video { object-fit: contain; background: #000; }
#video-area.presentando .video-tile:not(.compartiendo) {
  grid-column: 2;
  grid-row: auto;
  align-self: start;
  aspect-ratio: 4 / 3;
}
#video-area.presentando { grid-auto-rows: min-content; }

/* Dentro de una miniatura de 200 px no cabe el bloque entero del avatar:
   el nombre y el "camera is off" se montan encima de la etiqueta. Se queda
   la inicial, que es lo unico que hace falta para saber quien es. */
#video-area.presentando .video-tile:not(.compartiendo) .avatar-name,
#video-area.presentando .video-tile:not(.compartiendo) .avatar-hint,
#video-area.presentando .video-tile:not(.compartiendo) .tile-level { display: none; }
#video-area.presentando .video-tile:not(.compartiendo) .avatar-circle {
  width: 36px;
  height: 36px;
  font-size: var(--t-apoyo);
}

/* Marca de quien esta presentando, para que no haya que adivinarlo. */
.tile-presentando {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-total);
  background: var(--oro);
  color: var(--oro-tinta);
  font-size: var(--t-micro);
  font-weight: 700;
}
.video-tile:not(.compartiendo) .tile-presentando { display: none; }

/* ═══════════════════════ 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-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: -.01em;
  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-luz); }
.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-size: var(--t-cifra-xl); font-weight: 700; color: var(--oro); }
.round-next { font-size: var(--t-menudo); color: var(--sala-mudo); }

/* ── Espera entre sesiones ── */

.cooldown-timer { font-size: var(--t-cifra); font-weight: 700; color: var(--oro-luz); 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-luz);
}

/* ── 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-luz); 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-size: var(--t-sub); font-weight: 700; color: var(--oro-luz); font-variant-numeric: tabular-nums; }
.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-luz); }
.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-size: var(--t-cifra-xl); font-weight: 700; 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-luz); }
.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; }

  /* El panel a una columna, y la barra sin el nombre: en 390 px el nombre y
     los puntos no caben juntos, y de los dos el que informa es el punto. */
  .panel { grid-template-columns: 1fr; padding-top: var(--e5); }
  .navbar { gap: var(--e3); }
  .nav-derecha { gap: var(--e3); }
  #nav-nombre { display: none; }
  .home-saludo { font-size: var(--t-titulo); }
  .home-cifras { gap: var(--e5); }

  /* 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; }

  /* En vertical la columna de caras no cabe al lado: se va abajo, en una
     franja. La sala es de dos personas, asi que ahi hay exactamente un
     recuadro. Las reglas llevan #local-tile explicito porque las de arriba,
     las que lo vuelven flotante en movil, pesan mas en la cascada. */
  #video-area.presentando { grid-template-columns: 1fr; grid-template-rows: 1fr 92px; }
  #video-area.presentando .compartiendo { grid-column: 1; grid-row: 1; }
  #video-area.presentando .video-tile:not(.compartiendo) {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: auto;
  }
  #video-area.presentando #local-tile:not(.compartiendo) {
    position: static;
    width: auto;
    height: auto;
    grid-column: 1;
    grid-row: 2;
  }
}

@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; }