/* Efímera — "Ultra-Minimalist Stealth/Dark" (Refero.design / Linear /
   Vercel): negro azulado profundo, superficies de pizarra casi invisibles,
   blanco y negro puros reservados para la accion principal. Diseño
   deliberadamente oscuro (no reacciona a prefers-color-scheme: es una
   identidad de marca, no un tema utilitario). */

:root {
  --fondo: #090d16;
  --superficie: rgba(148, 163, 184, 0.04);    /* tarjetas: casi invisible */
  --superficie-fuerte: #161b26;               /* botones/inputs: pizarra solida */
  --superficie-elevada: #0f172a;              /* slate-900: modal, popover, picker de emojis */
  --borde: rgba(51, 65, 85, 0.6);             /* slate-700 semitransparente */
  --texto: #e7ebf1;
  --texto-suave: #64748b;                     /* slate-500 */
  /* Acento = la accion principal: blanco puro radiante, texto negro — nada
     de un violeta generico de plantilla. El azul queda como segundo tono
     solo para el halo de foco/hover, nunca como relleno de boton. */
  --acento: #ffffff;
  --acento-fuerte: #f1f5f9;
  --acento-texto: #000000;
  --halo-azul: rgba(91, 155, 242, .35);
  --peligro: #ff6b60;
  --peligro-suave: rgba(255, 107, 96, 0.12);
  --peligro-solido: #e5473d;
  --peligro-solido-texto: #ffffff;
  --conexion-ok: #22c55e;
  --conexion-alerta: #e0ad3f;
  --conexion-ausente: #f97316;
  --burbuja-propia: rgba(91, 155, 242, 0.28);
  --burbuja-propia-texto: #eaf3ff;
  --burbuja-otra: rgba(148, 163, 184, 0.06);
  --radio-tarjeta: 16px;
  --radio-boton: 14px;                        /* rounded-xl: nunca mas pastillas 999px */
  /* "Brillo interior" en vez de sombra convencional: un highlight tenue en
     el borde superior, como luz rozando un canto pulido, no una sombra
     proyectada. */
  --brillo: inset 0 1px 0 rgba(226, 232, 240, 0.05);
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Encabezado de dialogo en blanco puro solido — igual que "EFÍMERA" (ver
   .marca__letra) y el titulo de sala cerrada (ver .cerrada__titulo). Este
   era el ultimo texto de la app que seguia con un degradado azul de
   plantilla; la identidad "stealth" no usa degradados decorativos en
   ningun lado. */
.modal__caja h2 { color: #ffffff; }

/* ---------------------------------------------------------------- */
/* Pantalla de inicio                                                */
/* ---------------------------------------------------------------- */

.pantalla {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  /* Espaciado ENTRE secciones distintas (marca / botones / legal / apoyo) —
     se achica en pantallas angostas para que TODO el flujo (marca, CTAs,
     apoyo, legal) entre sin scroll en un telefono estandar de 375x667, y
     respira mas en las demas. Medido: a 375px de ancho el flujo completo
     ocupaba 714px antes de este ajuste — sobraba scroll de mas. */
  gap: clamp(10px, 4vw, 44px);
  padding-block: 12px 14px;
}

/* Barra superior: el boton de contacto Enterprise, alineado con el MISMO
   margen de contenido que el resto de .pantalla (nunca la esquina real del
   viewport — en desktop .pantalla ya esta centrada con max-width, y en
   movil comparte el padding-inline de todo lo demas). Un pelin de aire
   extra a la derecha para que se lea como cabecera, no como una insignia
   pegada al borde. */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-right: 4px;
}

/* Selector de idioma ES | EN — discreto y sobrio a proposito: dos botones
   de texto separados por un caracter, sin fondo ni borde propio, el mismo
   tono apagado que el resto de la barra superior. El idioma activo se
   distingue solo por contraste (blanco vs. gris), nunca con una pastilla
   ni un fondo de color. */
.selector-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.selector-idioma__opcion {
  background: transparent;
  border: none;
  padding: 4px 2px;
  color: var(--texto-suave);
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .15s ease;
}

.selector-idioma__opcion:hover { color: var(--texto); }

.selector-idioma__opcion[aria-pressed="true"] {
  color: #ffffff;
  cursor: default;
}

.selector-idioma__separador { color: var(--borde); }

.selector-idioma__opcion:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Variante "pie de pagina" (pantalla de sala cerrada, sin barra superior):
   mismo selector, con aire extra arriba para separarlo del CTA principal. */
.selector-idioma--pie { margin-top: 18px; }

.topbar__contacto {
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}

.topbar__contacto:hover,
.topbar__contacto[aria-expanded="true"] {
  background: var(--superficie-fuerte);
  color: var(--texto);
}

.topbar__contacto:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(280px, 78vw);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-elevada);
  box-shadow: var(--brillo), 0 20px 60px rgba(0, 0, 0, .5);
}

.popover__texto {
  margin: 0;
  color: var(--texto-suave);
  font-size: .82rem;
  line-height: 1.5;
}

.popover__correo {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  color: var(--texto);
  word-break: break-all;
}

.marca { text-align: center; }

.marca__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/*
 * Isotipo (el cuadro con la "E"): imagen estatica, sin animacion — la marca
 * tiene que verse siempre solida y completa, sin parpadeos ni ciclos de
 * desvanecimiento. (Hubo una version con particulas en <canvas> que se
 * desintegraba cada 7s; se revirtio a pedido explicito.)
 */
.marca__icono {
  /* Sigue el mismo clamp que .marca h1, un toque mas grande, para que el
     icono siempre iguale o supere el alto del texto al lado. Calculado
     contra 16px (el font-size real del elemento raiz — nunca se fijo un
     valor propio en <html>, asi que rem toma el default del navegador). */
  width: clamp(2.85rem, 8.2vw, 3.1rem);
  height: clamp(2.85rem, 8.2vw, 3.1rem);
  border-radius: 22%;
  flex-shrink: 0;
}

.marca h1 {
  margin: 0;
  /* 44-48px reales (2.75rem/3rem contra los 16px base del navegador), fijo
     en casi todos los anchos de telefono y creciendo apenas en pantallas
     mas anchas — no un tamaño que se achique en movil. Estable a proposito:
     la animacion vive en el isotipo (.marca__icono), no aca — el texto se
     queda quieto, blanco puro (#fff, ver .marca__letra). Tracking amplio
     (mas que el resto de la app) para leerse confidencial, no informal. */
  font-size: clamp(2.75rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 500;
}

/*
 * Cada letra de "EFÍMERA" se revela UNA sola vez al cargar la pagina —
 * opacidad y blur, de tenue/desenfocada a nitida, en cascada de izquierda a
 * derecha. Nada de loop: es una entrada tecnica y discreta, no un efecto
 * ambiental que se repite para siempre. El aria-label del <h1> es lo que
 * anuncian los lectores de pantalla; estos spans llevan aria-hidden porque
 * son solo el efecto visual. Blanco puro, sin degradado — la identidad
 * "stealth" reserva el color solo para acentos puntuales.
 */
.marca__letra {
  display: inline-block;
  color: #ffffff;
  opacity: .2;
  filter: blur(4px);
  animation: marca-revelar .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

.marca__letra:nth-child(1) { animation-delay: 0s; }
.marca__letra:nth-child(2) { animation-delay: .06s; }
.marca__letra:nth-child(3) { animation-delay: .12s; }
.marca__letra:nth-child(4) { animation-delay: .18s; }
.marca__letra:nth-child(5) { animation-delay: .24s; }
.marca__letra:nth-child(6) { animation-delay: .3s; }
.marca__letra:nth-child(7) { animation-delay: .36s; }

@keyframes marca-revelar {
  0% { opacity: .2; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marca__letra { animation: none; opacity: 1; filter: none; }
}

.lema {
  margin: 14px 0 0;
  color: var(--texto-suave);
  font-size: 1rem;
}

.duracion {
  margin: 6px 0 0;
  color: var(--texto-suave);
  font-size: .88rem;
}

.duracion strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boton {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 18px 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie-fuerte);
  color: var(--texto);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, background-color .15s ease,
    box-shadow .3s ease;
}

/* Halo suave al pasar el cursor sobre cualquier boton base (p. ej. "Unirme
   con código") — mas discreto que el de .boton--primario:hover, que gana
   la cascada por declararse despues con la misma especificidad. Subido +2
   puntos de alfa (antes .08/.12) para equilibrar la jerarquia tactil frente
   al primario, que ahora brilla un poco menos (ver mas abajo). */
.boton:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 15px rgba(255, 255, 255, .1), 0 0 20px rgba(59, 130, 246, .14);
}
.boton:active { transform: translateY(1px); }

.boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.boton[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.boton--primario {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
  font-weight: 700;
}

/* Halo blanco bien visible y tactil para los 4 botones primarios de la app
   (Crear sala, Aceptar del modal de terminos, Enviar del chat, Crear una
   sala nueva) — las vueltas anteriores (12px/.08, luego 15px/.14) seguian
   leyendose demasiado tenues. Con !important a proposito: nada en este
   archivo debajo de esta regla debe poder apagar el halo o el levantamiento
   en hover de un boton primario. Nota: como :hover y :active tienen la
   misma especificidad, el !important en "transform" tambien gana sobre
   .boton:active mientras el cursor sigue encima al hacer clic — el boton
   se ve "levantado" en vez de "hundido" ese instante, un matiz minimo
   frente a tener el halo garantizado. */
.boton--primario:hover {
  background: var(--acento-fuerte);
  box-shadow: 0 0 20px rgba(255, 255, 255, .35), 0 0 6px rgba(255, 255, 255, .5) !important;
  transition: box-shadow .25s ease-in-out, transform .2s ease !important;
  transform: translateY(-1px) !important;
}

.boton--peligro {
  background: var(--peligro-suave);
  color: var(--peligro);
  border-color: transparent;
}

.boton--peligro:hover { box-shadow: 0 0 15px rgba(255, 107, 96, .18); }

/* Para acciones secundarias de contenido breve ("Copiar código", "Copiar
   enlace"): nunca deben verse tan grandes como el CTA principal de la
   pantalla. width:auto en vez de estirarse al 100%, centrada en su propio
   bloque (que sigue en columna con align-items:stretch por defecto). */
.boton--pequeno {
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  width: auto;
  align-self: center;
  flex-shrink: 0;
}

.enlace {
  background: none;
  border: 0;
  color: var(--texto-suave);
  font: inherit;
  font-size: .95rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.etiqueta {
  margin: 0;
  color: var(--texto-suave);
  font-size: .95rem;
  text-align: center;
}

.codigo {
  margin: 0;
  padding: 20px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--brillo);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  word-break: break-all;
}

.codigo--pequeno {
  display: block;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enlace-caja {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--brillo);
}

.enlace-texto {
  margin: 0;
  padding: 10px 12px;
  background: rgba(3, 5, 9, .5);
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--texto-suave);
  text-align: center;
  word-break: break-all;
}

.entrada {
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-fuerte);
  color: var(--texto);
  font: inherit;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: .04em;
}

.entrada::placeholder { color: var(--texto-suave); }

.entrada:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.nota,
.error {
  margin: 0;
  text-align: center;
  font-size: .92rem;
}

.nota { color: var(--texto-suave); }

.error {
  color: var(--peligro);
  background: var(--peligro-suave);
  padding: 12px 14px;
  border-radius: var(--radio-tarjeta);
  font-weight: 600;
}

/*
 * Aviso legal minimo: una linea discreta al pie, debajo de "Apoya este
 * proyecto" — el parrafo largo de antes ya no vive en medio de la pantalla,
 * solo aparece si alguien toca "Ver términos" (modal, ver .modal__cuerpo-legal).
 */
.aviso-legal {
  padding-top: 4px;
}

.aviso-legal__linea {
  margin: 0;
  font-size: .72rem;
  line-height: 1.65;
  color: var(--texto-suave);
}

.aviso-legal__enlace {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: inherit;
  color: var(--texto);
  text-decoration: underline;
  cursor: pointer;
}

.aviso-legal__enlace:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Cuerpo del modal "Términos de uso": mismo parrafo largo de siempre, ahora
   con scroll propio si la pantalla es baja, para no reventar el modal. */
.modal__cuerpo-legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
}

.modal__cuerpo-legal p {
  margin: 0;
  text-align: justify;
  text-align-last: left;
  /* Sin guiones automaticos ("única-mente", "cual-quier"): con el modal mas
     ancho de abajo, el texto fluye solo sin necesitar cortar palabras. */
  hyphens: none;
  word-break: normal;
}

/* Texto explicativo en gris secundario suave (slate-400) — mas claro que el
   --texto-suave (slate-500) que usa .modal__caja p para el resto de
   parrafos del sitio, para que contraste mejor contra el titulo en blanco
   de cada viñeta. Calificado con .modal__caja para ganarle en especificidad
   a esa regla general (misma cantidad de clases+tipo, pero .modal__caja p
   se declara despues en el archivo). */
.modal__caja .modal__cuerpo-legal p {
  color: #94a3b8;
}

/* Titulo de cada viñeta ("Servicio Anónimo:", "Uso Prohibido:", "Canal
   Informativo:"): blanco puro y semibold para que se lea primero, con el
   texto explicativo en segundo plano detras. */
.modal__cuerpo-legal p strong {
  color: #ffffff;
  font-weight: 600;
}

/*
 * "Apoya este proyecto": a proposito chica y discreta, con tarjetas de
 * vidrio en vez de los botones grandes de arriba — no debe competir con
 * Crear sala / Unirme con codigo, que son la accion real de la pantalla.
 * Dos tarjetas simetricas (cafe / cripto) lado a lado, y el contacto abajo
 * del mismo ancho que las dos juntas — nada suelto en cascada.
 */
.apoyo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.apoyo__titulo {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.apoyo__tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.apoyo__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Las dos tarjetas de arriba SIEMPRE alinean su contenido arriba, aunque
     el grid las estire a la misma altura — antes el cafe quedaba centrado
     y la cripto pegada arriba, y esa asimetria entre "gemelas" era buena
     parte de lo que se veia desordenado. */
  justify-content: flex-start;
  gap: 6px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  box-shadow: var(--brillo);
  color: var(--texto-suave);
  text-decoration: none;
  transition: filter .15s ease, background-color .15s ease;
}

a.apoyo__tarjeta:hover { filter: brightness(1.3); background: var(--superficie-fuerte); }
a.apoyo__tarjeta:active { transform: translateY(1px); }
.apoyo__tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/*
 * Chip/insignia detras de CADA icono (cafe y bitcoin por igual) — antes el
 * emoji de cafe flotaba suelto mientras el logo de bitcoin tenia su propio
 * fondo blanco, y esa falta de un tratamiento comun entre "tarjetas
 * gemelas" era la otra mitad del desorden. Ahora las dos usan el mismo
 * marco: mismo tamaño, mismo radio, solo cambia el color de fondo.
 */
.apoyo__icono-envoltorio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--superficie-fuerte);
}

/* La imagen de Bitcoin trae su propio fondo blanco solido (no es
   transparente): en vez de pegarla directo sobre el vidrio oscuro —
   quedaria un rectangulo blanco crudo — usa la misma insignia de arriba,
   solo que en blanco, como corresponde a su propia marca. */
.apoyo__icono-envoltorio--claro {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.apoyo__icono-envoltorio--claro img {
  display: block;
  width: 26px;
  height: auto;
}

.apoyo__icono {
  font-size: 1.1rem;
  line-height: 1;
}

.apoyo__tarjeta-texto {
  font-size: .78rem;
  font-weight: 600;
  color: var(--texto);
}

.apoyo__direccion {
  margin: 2px 0 0;
  width: 100%;
  padding: 8px 9px;
  background: rgba(3, 5, 9, .55);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .62rem;
  line-height: 1.4;
  color: var(--texto-suave);
  word-break: break-all;
}

/*
 * Botones de copiar: acento en vez del mismo gris de todo — asi se leen
 * como una accion clara ("esto se puede tocar"), no como una caja mas
 * apilada sobre otra caja.
 */
/* Boton de accion secundario integrado: misma pizarra/borde que "Unirme
   con código", solo mas chico — antes era un azul suelto que no combinaba
   con el resto de la paleta "stealth". */
.apoyo__boton-tarjeta,
.apoyo__boton-chico {
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie-fuerte);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
}

.apoyo__boton-tarjeta:hover,
.apoyo__boton-chico:hover { filter: brightness(1.3); }
.apoyo__boton-tarjeta:active,
.apoyo__boton-chico:active { transform: translateY(1px); }
.apoyo__boton-tarjeta:focus-visible,
.apoyo__boton-chico:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.apoyo__boton-tarjeta {
  width: 100%;
  margin-top: auto;
  padding: 6px 8px;
  font-size: .7rem;
}

.apoyo__boton-chico {
  flex-shrink: 0;
  padding: 6px 16px;
  font-size: .72rem;
}

/* ---------------------------------------------------------------- */
/* Chat                                                              */
/* ---------------------------------------------------------------- */

.chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--fondo);
  transition: opacity 1.9s ease, filter 1.9s ease, transform 1.9s ease;
}

/* Al cerrarse la sala (tiempo agotado, reporte o eliminar): el chat se
   desvanece durante 2s, a la vez que crearParticulas() en app.js hace que
   salgan motas de polvo de cada mensaje — tiene que notarse con claridad
   antes de llegar a "Sesión Finalizada". La duracion total la controla
   DURACION_DESVANECIMIENTO_MS en app.js, coordinada con esto. */
.chat--desvaneciendo {
  opacity: 0;
  filter: blur(9px) saturate(30%);
  transform: scale(.97) translateY(-12px);
  pointer-events: none;
}

/* Motas de polvo: un span por particula, posicionado con variables CSS que
   pone crearParticulas() en app.js. Monocromas (var(--texto)) para no
   salirse de la paleta — es polvo, no confeti. */
.particulas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

.particula {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  background: var(--texto);
  opacity: 0;
  animation: particula-flota var(--duracion) var(--retraso) ease-out forwards;
}

@keyframes particula-flota {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); }
}

@media (prefers-reduced-motion: reduce) {
  .particula { animation: none; opacity: 0; }
}

.chat__cabecera {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

.chat__fila-superior {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.chat__acciones .boton {
  flex: 1;
}

/*
 * "Reportar" ya no es un bloque rojo compitiendo con "Eliminar sala": es un
 * enlace discreto, tipo texto, tono slate — sigue haciendo lo mismo
 * (confirmar y guardar la conversacion), pero visualmente cede el paso a la
 * accion destructiva principal.
 */
.chat__accion-discreta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 8px 6px;
  color: var(--texto-suave);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.chat__accion-discreta:hover { color: var(--texto); }
.chat__accion-discreta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.chat__accion-discreta[disabled] { opacity: .5; cursor: not-allowed; }

/*
 * "Eliminar sala": la accion destructiva SIN dialogo de confirmacion, asi
 * que es la que mas necesita destacar — forma de pill/badge, relleno solido
 * en rojo y un icono, para que sea imposible tocarla sin darse cuenta de
 * que es distinta. "Reportar" se queda con su vidrio de siempre porque esa
 * SI pide confirmacion antes de ejecutar.
 */
.chat__acciones .boton--eliminar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radio-boton);
  background: var(--peligro-solido);
  color: var(--peligro-solido-texto);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 3px 10px -2px rgba(229, 71, 61, .5);
}

.boton--eliminar:hover { filter: brightness(1.08); }
.boton--eliminar:active { transform: translateY(1px); }

.boton__icono {
  font-size: 1.05em;
  line-height: 1;
}

.temporizador {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.2;
}

.temporizador__texto {
  font-size: .72rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.temporizador__reloj {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.temporizador--urgente .temporizador__reloj { color: var(--peligro); }

.chat__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

.chat__codigo-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Boton discreto de copiar el enlace de la sala, al lado del codigo. */
.chat__copiar-enlace {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 2px 4px;
  color: var(--texto-suave);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
}

.chat__copiar-enlace:hover { color: var(--texto); }
.chat__copiar-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.estado {
  font-size: .78rem;
  color: var(--texto-suave);
}

.chat__estados {
  display: flex;
  align-items: center;
  gap: 6px;
}

/*
 * Punto de estado en la cabecera. Combina dos cosas distintas en un solo
 * indicador chico: la conexion de ESTE navegador con el servidor (verde ->
 * ambar parpadeando si se cae) y si la OTRA persona lleva 5 min sin tocar
 * nada (verde -> naranja quieto, sin parpadeo — no es una alarma, es solo
 * informativo). La presencia en si ("esperando a la otra persona...") la
 * sigue diciendo #estado-sala aparte; este punto es sobre la calidad de la
 * conversacion en curso, no sobre si hay alguien.
 */
.estado-conexion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.estado-conexion__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--conexion-ok);
  flex-shrink: 0;
}

.estado-conexion__texto {
  font-size: .72rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.estado-conexion--reconectando .estado-conexion__punto {
  background: var(--conexion-alerta);
  animation: parpadeo-conexion 1.1s ease-in-out infinite;
}

.estado-conexion--reconectando .estado-conexion__texto { color: var(--conexion-alerta); }

.estado-conexion--ausente .estado-conexion__punto {
  background: var(--conexion-ausente);
}

.estado-conexion--ausente .estado-conexion__texto { color: var(--conexion-ausente); }

@keyframes parpadeo-conexion {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .estado-conexion--reconectando .estado-conexion__punto {
    animation: none;
    opacity: .6;
  }
}

.mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Scrollbar discreto ("stealth"): una linea fina en vez de la barra
   ancha por defecto del navegador, y transparente cuando no hace falta. */
.mensajes,
.modal__cuerpo-legal,
.emoji-picker__grid {
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}

.mensajes::-webkit-scrollbar,
.modal__cuerpo-legal::-webkit-scrollbar,
.emoji-picker__grid::-webkit-scrollbar {
  width: 4px;
}

.mensajes::-webkit-scrollbar-track,
.modal__cuerpo-legal::-webkit-scrollbar-track,
.emoji-picker__grid::-webkit-scrollbar-track {
  background: transparent;
}

.mensajes::-webkit-scrollbar-thumb,
.modal__cuerpo-legal::-webkit-scrollbar-thumb,
.emoji-picker__grid::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}

.mensajes::-webkit-scrollbar-thumb:hover,
.modal__cuerpo-legal::-webkit-scrollbar-thumb:hover,
.emoji-picker__grid::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.burbuja {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid var(--borde);
  background: var(--burbuja-otra);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.burbuja--propia {
  align-self: flex-end;
  background: var(--burbuja-propia);
  color: var(--burbuja-propia-texto);
  border-color: rgba(91, 155, 242, .35);
  border-bottom-right-radius: 6px;
}

.burbuja--otra {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

.burbuja__hora {
  display: block;
  margin-top: 6px;
  font-size: .68rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.sistema {
  align-self: center;
  max-width: 90%;
  text-align: center;
  color: var(--texto-suave);
  font-size: .85rem;
  padding: 6px 12px;
}

.sistema--aviso {
  color: var(--peligro);
  background: var(--peligro-suave);
  border-radius: var(--radio-tarjeta);
  font-weight: 600;
}

/*
 * Insignia de "sesion cifrada en RAM": reemplaza el parrafo de bienvenida
 * largo por un indicador tipo pill, mas corporativo — un punto verde que
 * respira (nunca una alarma, es una confirmacion de que todo esta bien).
 */
.insignia-sesion {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie-fuerte);
  color: var(--texto-suave);
  font-size: .8rem;
  font-weight: 600;
}

.insignia-sesion__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--conexion-ok);
  flex-shrink: 0;
  animation: insignia-pulso 2s ease-in-out infinite;
}

@keyframes insignia-pulso {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .insignia-sesion__punto { animation: none; }
}

/* Ancla el picker de emojis justo encima de la barra de escritura, sin
   sacarlo del flujo del layout (position:relative de referencia). */
.composer-envoltorio {
  position: relative;
}

.composer {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

.boton-emoji {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--superficie-fuerte);
  /* El icono es un SVG de linea (stroke: currentColor) en vez del emoji de
     colores de antes — asi si se puede pintar en un tono monocromo. */
  color: var(--texto-suave);
  cursor: pointer;
  transition: filter .15s ease, color .15s ease;
}

.boton-emoji:hover { filter: brightness(1.15); color: var(--texto); }
.boton-emoji:active { transform: translateY(1px); }
.boton-emoji:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton-emoji[aria-expanded="true"] {
  border-color: var(--acento);
  background: var(--superficie);
  color: var(--texto);
}

/* ---------------------------------------------------------------- */
/* Selector de emojis                                                */
/* ---------------------------------------------------------------- */

.emoji-picker {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 8px);
  margin: 0 auto;
  max-width: 360px;
  max-height: min(320px, 45vh);
  display: flex;
  flex-direction: column;
  background: var(--superficie-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--brillo), 0 12px 32px rgba(0, 0, 0, .45);
  overflow: hidden;
  z-index: 25;
}

.emoji-picker__categorias {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  flex-shrink: 0;
}

.emoji-picker__categoria {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.emoji-picker__categoria:hover { background: var(--superficie-fuerte); }
.emoji-picker__categoria[aria-selected="true"] { background: var(--superficie-fuerte); }
.emoji-picker__categoria:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}

.emoji-picker__emoji {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.emoji-picker__emoji:hover { background: var(--superficie-fuerte); }
.emoji-picker__emoji:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.composer__texto {
  flex: 1;
  min-height: 56px;
  max-height: 140px;
  padding: 16px;
  border: 1px solid #1e293b;
  border-radius: var(--radio-tarjeta);
  background: var(--superficie-fuerte);
  color: var(--texto);
  font: inherit;
  resize: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.composer__texto::placeholder { color: var(--texto-suave); }

.composer__texto:focus-visible {
  border-color: var(--acento);
  outline: none;
  /* Resalte suave blanco (el foco en si) + un halo azul por fuera —
     "azul/blanco" en vez de un contorno duro de un solo color. */
  box-shadow: 0 0 0 1px var(--acento), 0 0 0 5px var(--halo-azul);
}

.boton--enviar {
  width: auto;
  min-width: 108px;
  min-height: 56px;
  font-size: 1rem;
}

/* ---------------------------------------------------------------- */
/* Modales                                                           */
/* ---------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 3, 8, .7);
  backdrop-filter: blur(4px);
  z-index: 10;
}

.modal__caja {
  width: 100%;
  /* De 420px a 480px (~max-w-md): frases como "únicamente" o "cualquier"
     entran completas en una linea sin necesitar el corte por guiones. */
  max-width: 480px;
  padding: 24px;
  border-radius: 18px;
  background: var(--superficie-elevada);
  border: 1px solid var(--borde);
  box-shadow: var(--brillo), 0 20px 60px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal__caja h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.modal__caja p {
  margin: 0;
  color: var(--texto-suave);
  font-size: .95rem;
}

.modal__caja .entrada {
  min-height: 0;
  font-size: 1rem;
  text-align: left;
  letter-spacing: normal;
}

.modal__acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Boton "Aceptar": compacto (nunca el 100% del ancho del modal, como el
   resto de .boton), alineado a la derecha — un dialogo de un solo boton no
   necesita el mismo peso visual que un CTA de pantalla completa. */
.modal__acciones .boton {
  width: auto;
  min-height: 44px;
  padding: 10px 24px;
  font-size: .95rem;
}

@media (max-width: 420px) {
  .chat__fila-superior { flex-wrap: wrap; }
  .boton--enviar { min-width: 84px; }
}

/* ---------------------------------------------------------------- */
/* Pantalla "esta sala ya no existe"                                 */
/* ---------------------------------------------------------------- */

.pantalla--centrada {
  justify-content: center;
  min-height: 100dvh;
}

.cerrada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 32px 8px;
}

/* Isotipo estatico (ver .marca__icono) con un halo blanco apagado detras —
   sin animacion, la marca se queda solida y quieta tambien en esta pantalla. */
.cerrada__icono {
  margin: 0 0 6px;
  width: 64px;
  height: 64px;
  display: block;
  border-radius: 22%;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .22));
}

.cerrada__titulo {
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  letter-spacing: .02em;
}

.cerrada__texto {
  margin: 0;
  max-width: 42ch;
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.55;
}

.cerrada .boton {
  width: auto;
  min-width: 220px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}