/* CubanFaces · «Noche habanera».
   Fondo nocturno con aurora en movimiento (buganvilla, mango y turquesa), paneles de cristal
   y tipografías auto-alojadas: Bricolage Grotesque (titulares) y Plus Jakarta Sans (texto). */

@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fuentes/bricolage/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fuentes/bricolage/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fuentes/jakarta/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/vendor/fuentes/jakarta/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --noche: #07060f;
  --noche-2: #0e0c1d;
  --noche-3: #16132b;
  --cristal: rgb(255 255 255 / .055);
  --cristal-2: rgb(255 255 255 / .085);
  --cristal-3: rgb(255 255 255 / .13);
  --cristal-solido: rgb(17 14 34 / .78);
  --borde: rgb(255 255 255 / .085);
  --borde-2: rgb(255 255 255 / .16);
  --texto: #f5f2ff;
  --texto-suave: #b0a9cf;
  --texto-tenue: #77709b;
  --buganvilla: #ff3d8b;
  --coral: #ff6f61;
  --mango: #ffa63d;
  --sol: #ffd65a;
  --turquesa: #2ee6c5;
  --cielo: #5b8cff;
  --violeta: #9b6bff;
  --grad: linear-gradient(135deg, #ff3d8b 0%, #ff6f61 50%, #ffa63d 100%);
  --grad-frio: linear-gradient(135deg, #2ee6c5 0%, #5b8cff 100%);
  --grad-texto: linear-gradient(100deg, #ff3d8b, #ffa63d 35%, #ffd65a 55%, #2ee6c5 80%, #ff3d8b);
  --peligro: #ff5c74;
  --ok: #34e7a6;
  --aviso: #ffc24d;
  --radio: 20px;
  --radio-s: 12px;
  --sombra: 0 24px 60px -20px rgb(0 0 0 / .65);
  --display: "Bricolage", "Jakarta", system-ui, sans-serif;
  --fuente: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --muelle: cubic-bezier(.2, .9, .3, 1.25);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --sala-fondo: #07060f;
  --sala-tile: #15122a;
  --sala-texto: #f5f2ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.5 var(--fuente);
  background: var(--noche);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; font-family: var(--display); letter-spacing: -.02em; }
h1 { font-size: 1.9rem; font-weight: 750; }
h2 { font-size: 1.25rem; font-weight: 700; }
a { color: var(--turquesa); }
button { font: inherit; color: inherit; }
::selection { background: rgb(255 61 139 / .45); }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .14) transparent; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Fondo vivo ---------- */
.aurora { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; filter: blur(80px) saturate(1.3); opacity: .9; transition: opacity 1.2s var(--suave); }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.aurora i:nth-child(1) { width: 55vmax; height: 55vmax; left: 0; top: 5vmax; background: radial-gradient(circle, rgb(255 61 139 / .55), transparent 65%); animation: deriva1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 50vmax; height: 50vmax; right: 0; top: 0; background: radial-gradient(circle, rgb(46 230 197 / .42), transparent 65%); animation: deriva2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 45vmax; height: 45vmax; left: 30vmax; bottom: 0; background: radial-gradient(circle, rgb(255 166 61 / .38), transparent 65%); animation: deriva3 31s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 40vmax; height: 40vmax; right: 15vmax; bottom: 10vmax; background: radial-gradient(circle, rgb(91 140 255 / .4), transparent 65%); animation: deriva1 38s ease-in-out infinite alternate-reverse; }
@keyframes deriva1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(-16vmax, 14vmax) scale(.9); } }
@keyframes deriva3 { to { transform: translate(-12vmax, -16vmax) scale(1.2); } }
body.en-app .aurora { opacity: .38; }
body.en-sala .aurora { opacity: 0; }
.grano {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vista, .shell { position: relative; z-index: 2; }

/* ---------- Piezas comunes ---------- */
.cristal {
  background: var(--cristal-solido);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra), inset 0 1px 0 rgb(255 255 255 / .06);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.sub { color: var(--texto-suave); margin-top: 0; }
.nota { color: var(--texto-tenue); font-size: .84rem; display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.nota .ico { width: 16px; height: 16px; margin-top: 2px; }
.mensaje { min-height: 1.4em; margin: .4em 0 0; font-size: .92rem; }
.mensaje.error { color: var(--peligro); }
.mensaje.ok { color: var(--ok); }
.centrada { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.tarjeta-sola { width: min(440px, 100%); padding: 32px; }

.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: .86rem; color: var(--texto-suave); border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > span:first-child, .campo legend { font-weight: 600; letter-spacing: .01em; padding: 0; }
.ayuda { color: var(--texto-tenue); font-size: .8rem; }
input, select, textarea {
  font: inherit; color: var(--texto); background: rgb(255 255 255 / .045);
  border: 1px solid var(--borde-2); border-radius: 14px; padding: 12px 14px; width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; }
select option { background: var(--noche-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(255 61 139 / .7); box-shadow: 0 0 0 4px rgb(255 61 139 / .18); background: rgb(255 255 255 / .07); }
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }

.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; padding: 11px 18px; border: 1px solid var(--borde-2); background: var(--cristal-2);
  color: var(--texto); cursor: pointer; font-weight: 600; overflow: hidden; isolation: isolate;
  transition: transform .18s var(--muelle), background .2s, box-shadow .25s, opacity .2s;
}
.boton:hover { background: var(--cristal-3); }
.boton:active { transform: scale(.97); }
.boton.primario { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 30px -10px rgb(255 61 139 / .7); }
.boton.primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--suave);
}
.boton.primario:hover::after { transform: translateX(120%); }
.boton.primario:hover { box-shadow: 0 14px 40px -10px rgb(255 61 139 / .9); }
.boton.frio { background: var(--grad-frio); border-color: transparent; color: #04121a; }
.boton.peligro { background: rgb(255 92 116 / .14); border-color: rgb(255 92 116 / .45); color: #ffb3c0; }
.boton.peligro:hover { background: rgb(255 92 116 / .25); }
.boton.enlace { background: none; border: 0; color: var(--turquesa); padding: 6px 8px; }
.boton.grande { padding: 15px 20px; font-size: 1.02rem; border-radius: 16px; }
.boton.mini { padding: 5px 11px; font-size: .82rem; border-radius: 10px; }
.boton:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.icono-boton {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--texto-suave); cursor: pointer;
  transition: background .2s, color .2s, transform .18s var(--muelle);
}
.icono-boton:hover { background: var(--cristal-2); color: var(--texto); }
.icono-boton:active { transform: scale(.9); }
.icono-boton.acento { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgb(255 61 139 / .8); }
.icono-boton[aria-pressed="true"] { background: var(--cristal-3); color: var(--texto); }

.globo {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--grad); color: #fff; font: 700 .72rem/1 var(--fuente); box-shadow: 0 4px 12px -2px rgb(255 61 139 / .6);
  animation: botar .5s var(--muelle);
}
@keyframes botar { from { transform: scale(.4); } }

kbd { font: 600 .72rem var(--fuente); color: var(--texto-tenue); border: 1px solid var(--borde-2); border-radius: 6px; padding: 2px 6px; }

.avatar {
  --h: 330;
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--h) 92% 66%), hsl(calc(var(--h) + 48) 88% 54%));
  color: #fff; font: 750 .8rem/1 var(--display); letter-spacing: .02em; text-shadow: 0 1px 2px rgb(0 0 0 / .3);
  position: relative; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
}
.avatar.grande { width: 52px; height: 52px; font-size: 1.05rem; }
.avatar.peque { width: 28px; height: 28px; font-size: .66rem; }
.avatar.conectado::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 2.5px var(--noche-2), 0 0 10px var(--ok);
}
.etiqueta-rol { flex: none; align-self: center; font: 700 .62rem/1 var(--fuente); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 6px; background: var(--grad-frio); color: #04121a; }
.etiqueta-rol.admin { background: var(--grad); color: #fff; }

/* ---------- Portada ---------- */
.portada {
  min-height: 100dvh; display: grid; grid-template-columns: minmax(340px, 450px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(20px, 4vw, 56px) clamp(20px, 5vw, 72px);
  max-width: 1680px; margin: 0 auto;
}
.portada-izq { display: flex; flex-direction: column; min-width: 0; }
.portada-der { display: grid; gap: 20px; justify-items: start; min-width: 0; }
/* La Habana de noche y Viñales al amanecer, entera y visible. */
.portada-escena { margin: 0 -2vw 0 -1vw; justify-self: stretch; }
.portada-escena img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / .65)) saturate(1.05);
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 1.4s var(--suave);
  animation: amanecer 1.6s var(--suave) both;
}
@keyframes amanecer { from { opacity: 0; filter: saturate(.5) brightness(.4) blur(8px); } }
body.en-portada .aurora { opacity: .4; }
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-emblema { width: 64px; height: 64px; filter: drop-shadow(0 6px 22px rgb(29 79 209 / .55)) drop-shadow(0 4px 18px rgb(224 16 42 / .35)); }
.logo-texto { height: 34px; width: auto; }
.titular {
  font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: .92; font-weight: 800; letter-spacing: -.055em;
  margin: clamp(24px, 4.5vh, 44px) 0 clamp(20px, 3.5vh, 32px);
}
.titular em {
  font-style: normal; background: var(--grad-texto); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 9s linear infinite;
}
@keyframes brillo { to { background-position: -250% 0; } }
.entradilla { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--texto-suave); max-width: 38em; margin: 0; padding-left: 6px; }
.entradilla b { color: var(--texto); }
.en-vivo { margin-left: 6px !important; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 99px; background: rgb(17 14 34 / .6); backdrop-filter: blur(10px); border: 1px solid var(--borde-2); font-weight: 600; font-size: .9rem; margin: 0; }
.latido { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(52 231 166 / .7); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 12px rgb(52 231 166 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 231 166 / 0); } }
@keyframes aparecer { from { opacity: 0; translate: 0 30px; scale: .9; filter: blur(8px); } }

.portada-form { padding: 28px; animation: aparecer .8s var(--suave) both; }
.portada-form h2 { font-size: 1.6rem; margin-bottom: 4px; }
.segmentado { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid var(--borde); margin-bottom: 22px; }
.segmentado button { position: relative; z-index: 1; border: 0; background: none; padding: 10px; border-radius: 10px; font-weight: 650; color: var(--texto-suave); cursor: pointer; transition: color .25s; }
.segmentado button[aria-selected="true"] { color: #fff; }
.segmentado-pastilla { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--grad); box-shadow: 0 6px 18px -6px rgb(255 61 139 / .8); transition: transform .45s var(--muelle); }
.segmentado[data-activa="registro"] .segmentado-pastilla { transform: translateX(100%); }
.formulario[data-panel] { animation: aparecer .45s var(--suave); }
.con-estado { position: relative; display: block; }
.con-estado input { padding-right: 44px; }
.estado-nombre { position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem/1 var(--fuente); font-style: normal; transition: transform .35s var(--muelle); transform: scale(0); }
.estado-nombre.libre { transform: scale(1); background: var(--ok); color: #04121a; }
.estado-nombre.libre::before { content: "✓"; }
.estado-nombre.cogido { transform: scale(1); background: var(--peligro); color: #fff; }
.estado-nombre.cogido::before { content: "✕"; }
.estado-nombre.mirando { transform: scale(1); border: 2px solid var(--texto-tenue); border-top-color: var(--turquesa); animation: girar .7s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.ayuda.mal { color: var(--peligro); }
.ayuda.bien { color: var(--ok); }
.fuerza { display: block; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .08); overflow: hidden; margin-top: 2px; }
.fuerza i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width .4s var(--suave); }

/* ---------- Carcasa de la aplicación ---------- */
.shell { height: 100dvh; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.carril {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 14px;
  background: rgb(10 8 22 / .7); border-right: 1px solid var(--borde); backdrop-filter: blur(20px);
  position: relative; z-index: 5;
}
.carril-logo { margin-bottom: 14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; transition: transform .3s var(--muelle); }
.carril-logo img { filter: drop-shadow(0 4px 14px rgb(29 79 209 / .5)); }
.carril-logo:hover { transform: rotate(-8deg) scale(1.06); }
.carril-boton {
  position: relative; display: grid; justify-items: center; gap: 4px; width: 68px; padding: 10px 0 8px; border: 0; border-radius: 16px;
  background: none; color: var(--texto-tenue); cursor: pointer; font-size: .7rem; font-weight: 650; transition: color .2s, background .2s;
}
.carril-boton .ico { width: 22px; height: 22px; transition: transform .3s var(--muelle); }
.carril-boton:hover { color: var(--texto); background: var(--cristal); }
.carril-boton:hover .ico { transform: translateY(-2px) scale(1.08); }
.carril-boton[aria-current="page"] { color: #fff; }
.carril-boton[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); box-shadow: 0 0 16px var(--buganvilla); }
.carril-boton[aria-current="page"] .ico { color: var(--buganvilla); filter: drop-shadow(0 0 10px rgb(255 61 139 / .7)); }
.carril-boton .globo { position: absolute; top: 4px; right: 8px; }
.carril-hueco { flex: 1; }
.carril-yo { border: 0; background: none; padding: 4px; border-radius: 50%; cursor: pointer; transition: transform .25s var(--muelle); }
.carril-yo:hover { transform: scale(1.08); }
.carril-yo .avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--noche), 0 0 0 4px rgb(255 61 139 / .6); }

.menu-yo { position: fixed; left: 92px; bottom: 16px; z-index: 30; width: 270px; padding: 10px; animation: aparecerMenu .3s var(--muelle); }
.menu-yo-cabeza { display: flex; gap: 12px; align-items: center; padding: 8px 8px 14px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.menu-yo-cabeza small { display: block; color: var(--texto-suave); }
@keyframes aparecerMenu { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; color: var(--texto); font-weight: 550; }
.menu-item:hover { background: var(--cristal-2); }
.menu-item span { flex: 1; }
.menu-item.peligro { color: #ff9aac; }
.interruptor { width: 36px; height: 20px; border-radius: 10px; background: rgb(255 255 255 / .14); position: relative; transition: background .25s; }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--muelle); }
.interruptor.on { background: var(--grad-frio); }
.interruptor.on::after { transform: translateX(16px); }

.zona { min-width: 0; min-height: 0; height: 100dvh; overflow: hidden; }

/* ---------- Chat ---------- */
.chat-app { display: grid; grid-template-columns: 330px minmax(0, 1fr) 0; transition: grid-template-columns .45s var(--suave); }
.chat-app.con-gente { grid-template-columns: 330px minmax(0, 1fr) 290px; }
.lista-salas { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); background: rgb(10 8 22 / .45); backdrop-filter: blur(16px); }
.lista-cabeza { display: flex; align-items: center; gap: 4px; padding: 18px 16px 10px 20px; }
.lista-cabeza h2 { flex: 1; margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.buscador {
  display: flex; align-items: center; gap: 10px; margin: 4px 16px 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--cristal); border: 1px solid var(--borde); color: var(--texto-tenue); cursor: pointer; text-align: left; transition: background .2s, border-color .2s;
}
.buscador:hover { background: var(--cristal-2); border-color: var(--borde-2); }
.buscador span { flex: 1; font-size: .9rem; }
.salas-scroll { flex: 1; overflow-y: auto; padding: 0 10px 16px; }
.seccion { display: flex; justify-content: space-between; margin: 18px 10px 6px; font: 700 .72rem var(--fuente); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); }
.seccion small { font-weight: 600; letter-spacing: 0; }
.salas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sala-item {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 16px; background: none; cursor: pointer; text-align: left;
  transition: background .2s, border-color .2s, transform .2s var(--muelle);
}
.animar .sala-item, .animar .persona { animation: entrarLista .4s var(--suave) both; }
@keyframes entrarLista { from { opacity: 0; transform: translateX(-10px); } }
.sala-item:hover { background: var(--cristal); }
.sala-item[aria-current="true"] { background: var(--cristal-2); border-color: var(--borde-2); }
.sala-item[aria-current="true"]::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--grad); }
.sala-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-size: 1.35rem; background: linear-gradient(135deg, hsl(var(--h, 260) 70% 30% / .9), hsl(calc(var(--h, 260) + 40) 70% 22% / .9)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); position: relative; }
.sala-icono .candado { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--noche-3); border: 1px solid var(--borde-2); }
.sala-icono .candado .ico { width: 11px; height: 11px; }
.sala-item .avatar { width: 46px; height: 46px; font-size: .95rem; }
.sala-texto { min-width: 0; }
.sala-texto b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-texto small { display: block; color: var(--texto-tenue); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-item.con-nuevos .sala-texto b { color: #fff; }
.sala-item.con-nuevos .sala-texto small { color: var(--texto-suave); }
.sala-meta { display: grid; justify-items: end; gap: 6px; font-size: .72rem; color: var(--texto-tenue); }
.vacio-lista { color: var(--texto-tenue); font-size: .85rem; padding: 6px 12px; margin: 0; }

.plaza {
  position: relative; display: flex; gap: 14px; align-items: center; width: calc(100% - 4px); margin: 4px 2px 0; padding: 16px; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
  background: linear-gradient(var(--noche-2), var(--noche-2)) padding-box, conic-gradient(from var(--giro, 0deg), #ff3d8b, #ffa63d, #2ee6c5, #5b8cff, #ff3d8b) border-box;
  border: 1.5px solid transparent; animation: girarBorde 8s linear infinite; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--muelle);
}
.plaza::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 0%, rgb(255 61 139 / .28), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgb(46 230 197 / .22), transparent 55%); }
.plaza:hover { transform: translateY(-2px); }
.plaza[aria-current="true"] { box-shadow: 0 16px 40px -18px rgb(255 61 139 / .9); }
.plaza .sala-icono { width: 52px; height: 52px; font-size: 1.7rem; background: var(--grad); }
.plaza b { display: block; font: 800 1.12rem var(--display); letter-spacing: -.02em; }
.plaza small { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: .82rem; }
.plaza small .latido { width: 7px; height: 7px; }
.plaza .globo { margin-left: auto; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes girarBorde { to { --giro: 360deg; } }

.invitaciones { padding: 0 16px; display: grid; gap: 8px; }
.invitacion { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgb(46 230 197 / .16), rgb(91 140 255 / .16)); border: 1px solid rgb(46 230 197 / .35); animation: aparecer .5s var(--muelle); }
.invitacion p { margin: 0 0 8px; font-size: .88rem; }
.invitacion .botones { display: flex; gap: 6px; }
.estado-conexion { margin: 0; padding: 10px 16px; font-size: .82rem; color: var(--aviso); border-top: 1px solid var(--borde); display: flex; gap: 8px; align-items: center; }
.estado-conexion::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); animation: latido 1.4s infinite; }

.conversacion { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; min-width: 0; }
.conv-cabeza { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--borde); background: rgb(10 8 22 / .35); backdrop-filter: blur(16px); }
.conv-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-size: 1.4rem; flex: none; }
.conv-icono.es-plaza { background: var(--grad); box-shadow: 0 10px 28px -10px rgb(255 61 139 / .9); }
.conv-titulo { flex: 1; min-width: 0; }
.conv-titulo h2 { margin: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-titulo p { margin: 0; color: var(--texto-suave); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-acciones { display: flex; gap: 2px; }
.solo-movil { display: none; }

.mensajes { overflow-y: auto; overflow-x: hidden; padding: 20px clamp(12px, 3vw, 36px) 10px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: auto; overscroll-behavior: contain; }
.aviso-retencion {
  align-self: center; display: flex; gap: 12px; align-items: center; max-width: 520px; margin: 10px auto 22px; padding: 14px 18px;
  border-radius: 18px; background: var(--cristal); border: 1px dashed var(--borde-2); color: var(--texto-suave); font-size: .86rem; text-align: left;
}
.aviso-retencion .ico { width: 26px; height: 26px; color: var(--sol); flex: none; }
.aviso-retencion b { color: var(--texto); display: block; }
.bienvenida-sala { text-align: center; margin: 24px auto 8px; max-width: 460px; }
.bienvenida-sala .emoji-bienvenida { font-size: 3.4rem; display: block; margin-bottom: 8px; animation: aparecer .7s var(--muelle); }
.bienvenida-sala .avatar { width: 76px; height: 76px; font-size: 1.5rem; margin-bottom: 12px; animation: aparecer .7s var(--muelle); }
.bienvenida-sala h3 { font-size: 1.5rem; margin-bottom: 4px; }
.bienvenida-sala p { color: var(--texto-suave); margin: 0; }
.cargar-mas { align-self: center; margin: 6px 0 14px; }
.separador-dia { align-self: center; margin: 16px 0 10px; padding: 4px 12px; border-radius: 99px; background: var(--cristal-2); border: 1px solid var(--borde); font: 650 .72rem var(--fuente); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }
.msg-sistema { align-self: center; margin: 6px 0; font-size: .8rem; color: var(--texto-tenue); animation: entrarMsg .5s var(--suave) both; }
.msg-sistema b { color: var(--texto-suave); }

.msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 1px 0; animation: entrarMsg .5s var(--muelle) both; }
.msg.nuevo-grupo { margin-top: 12px; }
.msg .avatar { grid-row: span 2; align-self: end; width: 36px; height: 36px; font-size: .74rem; cursor: pointer; }
.msg:not(.ultimo-del-grupo) .avatar { visibility: hidden; }
.msg-autor { grid-column: 2; font-size: .78rem; font-weight: 700; color: hsl(var(--h) 90% 72%); margin: 0 0 3px 12px; cursor: pointer; }
.msg-autor time { font-weight: 500; color: var(--texto-tenue); margin-left: 6px; }
.msg-cuerpo { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.burbuja {
  position: relative; max-width: min(640px, 82%); padding: 9px 14px; border-radius: 6px 20px 20px 6px;
  background: var(--cristal-2); border: 1px solid var(--borde); font-size: .96rem; line-height: 1.45;
  overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 6px 20px -12px rgb(0 0 0 / .5);
}
.msg.nuevo-grupo .burbuja { border-top-left-radius: 20px; }
.msg.ultimo-del-grupo .burbuja { border-bottom-left-radius: 20px; }
.burbuja a { color: var(--turquesa); text-decoration: underline; text-underline-offset: 2px; }
.burbuja .mencion { padding: 0 4px; border-radius: 6px; background: rgb(255 214 90 / .16); color: var(--sol); font-weight: 650; }
.burbuja .hora-burbuja { float: right; margin: 6px 0 -4px 10px; font-size: .68rem; color: var(--texto-tenue); }
.msg.me-mencionan .burbuja { box-shadow: 0 0 0 1.5px var(--sol), 0 10px 30px -12px rgb(255 214 90 / .6); }
.burbuja.jumbo { background: none; border: 0; box-shadow: none; font-size: 2.8rem; line-height: 1.15; padding: 2px 4px; animation: saltoEmoji .7s var(--muelle); }
@keyframes saltoEmoji { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } }
.msg.mio { grid-template-columns: minmax(0, 1fr); }
.msg.mio .msg-cuerpo { grid-column: 1; align-items: flex-end; }
.msg.mio .burbuja { background: var(--grad); border-color: transparent; color: #fff; border-radius: 20px 6px 6px 20px; box-shadow: 0 10px 28px -12px rgb(255 61 139 / .75); }
.msg.mio.nuevo-grupo .burbuja { border-top-right-radius: 20px; }
.msg.mio.ultimo-del-grupo .burbuja { border-bottom-right-radius: 20px; }
.msg.mio .burbuja a, .msg.mio .burbuja .mencion { color: #fff; }
.msg.mio .burbuja .mencion { background: rgb(0 0 0 / .18); }
.msg.mio .burbuja .hora-burbuja { color: rgb(255 255 255 / .75); }
.msg.mio .burbuja.jumbo { background: none; box-shadow: none; }
.msg.enviando .burbuja { opacity: .6; }
.msg.borrandose { animation: salirMsg .35s var(--suave) forwards; }
@keyframes entrarMsg { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); } }
@keyframes salirMsg { to { opacity: 0; transform: scale(.9); height: 0; margin: 0; padding: 0; } }

.msg-herramientas {
  position: absolute; top: -18px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 14px; background: var(--cristal-solido); border: 1px solid var(--borde-2); box-shadow: var(--sombra); backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(6px) scale(.95); pointer-events: none; transition: opacity .18s, transform .25s var(--muelle);
}
.msg.mio .msg-herramientas { right: auto; left: 8px; }
.msg:hover .msg-herramientas, .msg:focus-within .msg-herramientas, .msg.herramientas-abiertas .msg-herramientas { opacity: 1; transform: none; pointer-events: auto; }
.msg-herramientas button { border: 0; background: none; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 1.05rem; display: grid; place-items: center; color: var(--texto-suave); transition: transform .2s var(--muelle), background .15s; }
.msg-herramientas button:hover { background: var(--cristal-3); transform: scale(1.25); }
.msg-herramientas .ico { width: 17px; height: 17px; }

.reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaccion {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px; cursor: pointer;
  background: var(--cristal-2); border: 1px solid var(--borde); font-size: .82rem; font-weight: 700; color: var(--texto-suave);
  animation: botar .45s var(--muelle); transition: transform .2s var(--muelle), background .2s;
}
.reaccion:hover { transform: scale(1.08); }
.reaccion.mia { background: rgb(255 61 139 / .18); border-color: rgb(255 61 139 / .55); color: #fff; }
.reaccion .em { font-size: 1rem; }

.nuevos-abajo {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 99px; border: 0; cursor: pointer; background: var(--grad); color: #fff; font-weight: 700; font-size: .85rem;
  box-shadow: 0 12px 30px -10px rgb(255 61 139 / .9); animation: aparecer .4s var(--muelle);
}
.nuevos-abajo .ico { width: 16px; height: 16px; }
.escribiendo { min-height: 22px; padding: 0 clamp(16px, 3vw, 40px); font-size: .8rem; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.puntos { display: inline-flex; gap: 3px; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--turquesa); animation: puntito 1.2s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes puntito { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.compositor { position: relative; padding: 0 clamp(12px, 3vw, 36px) calc(16px + env(safe-area-inset-bottom)); }
.compositor-caja {
  display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 8px; border-radius: 22px;
  background: var(--cristal-solido); border: 1px solid var(--borde-2); box-shadow: var(--sombra); backdrop-filter: blur(20px);
  transition: border-color .25s, box-shadow .25s;
}
.compositor-caja:focus-within { border-color: rgb(255 61 139 / .55); box-shadow: var(--sombra), 0 0 0 4px rgb(255 61 139 / .12); }
.compositor textarea { flex: 1; resize: none; border: 0; background: none; box-shadow: none; padding: 10px 4px; max-height: 180px; line-height: 1.45; font-size: .98rem; }
.compositor textarea:focus { box-shadow: none; background: none; }
.contador-texto { align-self: center; font-size: .72rem; color: var(--texto-tenue); }
.contador-texto.cerca { color: var(--aviso); }
.enviar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--cristal-3); color: var(--texto-tenue); transition: transform .35s var(--muelle), background .3s, box-shadow .3s;
}
.enviar:not(:disabled) { background: var(--grad); color: #fff; box-shadow: 0 8px 22px -8px rgb(255 61 139 / .9); transform: rotate(0deg) scale(1); }
.enviar:disabled { transform: rotate(-30deg) scale(.9); cursor: default; }
.enviar:not(:disabled):hover { transform: scale(1.08); }
.enviar:not(:disabled):active { transform: scale(.9) translateX(3px); }
.silenciado { margin-bottom: 8px; padding: 10px 14px; border-radius: 14px; background: rgb(255 92 116 / .12); border: 1px solid rgb(255 92 116 / .35); color: #ffb3c0; font-size: .86rem; }
.selector-emojis { position: absolute; bottom: calc(100% + 6px); left: clamp(12px, 3vw, 36px); z-index: 10; display: grid; grid-template-columns: repeat(8, 38px); gap: 2px; padding: 10px; animation: aparecerMenu .25s var(--muelle); }
.selector-emojis button, .rejilla-emojis button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 1.3rem; transition: transform .2s var(--muelle), background .15s; }
.selector-emojis button:hover, .rejilla-emojis button:hover { background: var(--cristal-3); transform: scale(1.2); }

.gente { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border-left: 1px solid var(--borde); background: rgb(10 8 22 / .45); backdrop-filter: blur(16px); }
.gente .lista-cabeza h2 { font-size: 1.1rem; }
.personas { list-style: none; margin: 0; padding: 4px 10px 16px; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.persona { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; transition: background .2s; }
.persona:hover { background: var(--cristal); }
.persona b { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona small { color: var(--texto-tenue); font-size: .75rem; }
.persona.desconectada { opacity: .55; }

/* Menús flotantes, diálogos, paleta y tostadas */
.menu-flotante { position: fixed; z-index: 40; min-width: 220px; padding: 6px; animation: aparecerMenu .22s var(--muelle); }
.menu-flotante .menu-cabeza { display: flex; gap: 10px; align-items: center; padding: 8px 10px 10px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.menu-flotante .menu-cabeza small { display: block; color: var(--texto-tenue); font-size: .75rem; }

dialog { color: var(--texto); padding: 0; border: 0; max-height: calc(100dvh - 32px); }
dialog::backdrop { background: rgb(4 3 10 / .6); backdrop-filter: blur(6px); }
dialog[open] { animation: abrirDialogo .38s var(--muelle); }
@keyframes abrirDialogo { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.dialogo { width: min(480px, calc(100% - 24px)); padding: 22px; }
.dialogo.ancho { width: min(860px, calc(100% - 24px)); }
.dialogo-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dialogo-cabeza h2 { margin: 0; font-size: 1.4rem; }
.crear-vista { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgb(255 61 139 / .14), rgb(46 230 197 / .1)); border: 1px solid var(--borde-2); }
.crear-vista small { display: block; color: var(--texto-suave); font-size: .8rem; }
.crear-icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--grad); font-size: 1.8rem; transition: transform .4s var(--muelle); }
.crear-icono.cambio { animation: saltoEmoji .6s var(--muelle); }
.rejilla-emojis { display: flex; flex-wrap: wrap; gap: 2px; }
.rejilla-emojis button[aria-pressed="true"] { background: var(--cristal-3); box-shadow: inset 0 0 0 1.5px var(--buganvilla); }
.opciones-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opciones-tipo label { cursor: pointer; }
.opciones-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-tipo span { display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: 16px; border: 1.5px solid var(--borde-2); background: var(--cristal); transition: border-color .2s, background .2s, transform .2s var(--muelle); }
.opciones-tipo span b { color: var(--texto); }
.opciones-tipo span small { color: var(--texto-tenue); font-size: .78rem; }
.opciones-tipo input:checked + span { border-color: var(--buganvilla); background: rgb(255 61 139 / .1); transform: translateY(-2px); }
.opciones-tipo input:focus-visible + span { outline: 2px solid var(--turquesa); }

.buscador-tabla { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: var(--cristal); border: 1px solid var(--borde-2); margin-bottom: 14px; color: var(--texto-tenue); }
.buscador-tabla input { border: 0; background: none; padding: 12px 0; }
.buscador-tabla input:focus { box-shadow: none; background: none; }
.explorar-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; max-height: 60dvh; overflow-y: auto; padding: 2px; }
.tarjeta-sala { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--cristal); border: 1px solid var(--borde); transition: transform .3s var(--muelle), border-color .2s, background .2s; animation: aparecer .5s var(--muelle) both; }
.tarjeta-sala:hover { transform: translateY(-4px); border-color: var(--borde-2); background: var(--cristal-2); }
.tarjeta-sala .cabeza { display: flex; gap: 12px; align-items: center; }
.tarjeta-sala b { font: 750 1.05rem var(--display); }
.tarjeta-sala p { margin: 0; color: var(--texto-suave); font-size: .86rem; flex: 1; }
.tarjeta-sala .datos { display: flex; gap: 12px; font-size: .78rem; color: var(--texto-tenue); }
.tarjeta-sala .datos .vivos { color: var(--ok); }

.paleta { width: min(620px, calc(100% - 24px)); margin-top: 12vh; padding: 0; overflow: hidden; }
.paleta-busqueda { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-bottom: 1px solid var(--borde); color: var(--texto-tenue); }
.paleta-busqueda input { border: 0; background: none; font-size: 1.1rem; padding: 16px 0; }
.paleta-busqueda input:focus { box-shadow: none; background: none; }
.paleta-resultados { list-style: none; margin: 0; padding: 8px; max-height: 50dvh; overflow-y: auto; }
.paleta-resultados li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.paleta-resultados li[aria-selected="true"] { background: var(--cristal-3); }
.paleta-resultados li .sala-icono { width: 34px; height: 34px; border-radius: 11px; font-size: 1rem; }
.paleta-resultados li .avatar { width: 34px; height: 34px; }
.paleta-resultados li span { flex: 1; }
.paleta-resultados li small { color: var(--texto-tenue); }
.paleta-titulo { padding: 10px 12px 4px; font: 700 .7rem var(--fuente); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); }

.tostadas { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 10px; width: min(380px, calc(100% - 36px)); }
.tostada { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; cursor: pointer; animation: entrarTostada .5s var(--muelle); }
.tostada.saliendo { animation: salirTostada .35s var(--suave) forwards; }
.tostada div { flex: 1; min-width: 0; }
.tostada b { display: block; font-size: .9rem; }
.tostada small { display: block; color: var(--texto-suave); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tostada.error { border-color: rgb(255 92 116 / .5); }
@keyframes entrarTostada { from { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes salirTostada { to { opacity: 0; transform: translateX(40px); } }

/* ---------- Vídeo: solicitud y vestíbulo ---------- */
.video-zona { overflow-y: auto; display: grid; place-items: center; padding: 24px; }
.solicitud { width: min(520px, 100%); padding: 36px 32px; text-align: center; }
.solicitud .formulario { text-align: left; margin-top: 18px; }
.anillo { position: relative; width: 104px; height: 104px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; }
.anillo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from var(--giro, 0deg), #ff3d8b, #ffa63d, #2ee6c5, #5b8cff, #ff3d8b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: girarBorde 4s linear infinite; }
.anillo::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--grad); opacity: .2; filter: blur(14px); }
.anillo .ico { width: 42px; height: 42px; color: #fff; position: relative; z-index: 1; }
.solicitud.pendiente .anillo::before { animation-duration: 1.6s; }
.vestibulo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 22px; width: min(1180px, 100%); align-items: start; }
.previa { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 26px; overflow: hidden; box-shadow: var(--sombra), 0 0 0 1px var(--borde-2); }
.previa video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.previa-vacia { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-suave); background: radial-gradient(circle at 50% 40%, var(--noche-3), #000); }
.previa-controles { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.medidor { position: absolute; left: 16px; bottom: 16px; width: 6px; height: 64px; background: rgb(255 255 255 / .2); border-radius: 3px; overflow: hidden; display: flex; align-items: flex-end; }
.medidor span { display: block; width: 100%; height: 0; background: linear-gradient(to top, var(--turquesa), var(--sol)); transition: height .08s; }
.panel-entrada { display: grid; gap: 14px; padding: 24px; }
.ocupacion { font-size: 1.02rem; margin: 0; color: var(--texto-suave); }
.ocupacion b { color: var(--texto); font: 800 1.4rem var(--display); }

.redondo { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .1); backdrop-filter: blur(12px); color: #fff; font-size: 1.2rem; cursor: pointer; position: relative; transition: transform .2s var(--muelle), background .2s; }
.redondo:hover { transform: scale(1.08); background: rgb(255 255 255 / .18); }
.redondo[aria-pressed="false"] { background: var(--peligro); border-color: transparent; }
.redondo.salir { background: var(--peligro); width: 72px; border-radius: 25px; font-size: .92rem; font-weight: 700; border-color: transparent; }
.redondo .punto { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }

/* ---------- Sala de vídeo (pantalla completa) ---------- */
.sala { height: 100dvh; display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr auto; background: var(--sala-fondo); color: var(--sala-texto); overflow: hidden; }
.escenario { grid-row: 1; grid-column: 1; min-height: 0; padding: 10px; display: grid; gap: 10px; }
.escenario[data-modo="orador"] { grid-template-rows: minmax(0, 1fr) 124px; }
.escenario[data-modo="orador"] .principal { min-height: 0; display: grid; }
.escenario[data-modo="orador"] .tira { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; }
.escenario[data-modo="orador"] .tira .tile { flex: 0 0 auto; width: 200px; height: 100%; }
.escenario[data-modo="galeria"] { grid-template-rows: 1fr; }
.escenario[data-modo="galeria"] .principal { display: none; }
.escenario[data-modo="galeria"] .tira { display: grid; gap: 10px; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.tile { position: relative; background: var(--sala-tile); border-radius: 18px; overflow: hidden; min-width: 0; min-height: 0; outline: 3px solid transparent; transition: outline-color .15s, box-shadow .3s; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.tile.hablando { outline-color: var(--turquesa); box-shadow: 0 0 30px -4px rgb(46 230 197 / .7); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.principal .tile video { object-fit: contain; }
.tile.local video { transform: scaleX(-1); }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: #fff; width: auto; height: auto; border-radius: 0; background: radial-gradient(circle at 50% 40%, var(--noche-3), var(--sala-tile)); box-shadow: none; }
.tile .avatar span { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.tira .tile .avatar { font-size: 1.1rem; }
.tile .pie { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.tile .nombre { background: rgb(0 0 0 / .55); backdrop-filter: blur(8px); padding: 3px 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .micro-off { background: var(--peligro); border-radius: 8px; padding: 2px 6px; }
.tile .senal { margin-left: auto; background: rgb(0 0 0 / .55); border-radius: 8px; padding: 2px 7px; }
.tile .fijado { position: absolute; top: 8px; left: 8px; background: rgb(0 0 0 / .55); border-radius: 8px; padding: 2px 8px; font-size: .75rem; }
.tile .moderar { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; }
.tile:hover .moderar, .tile:focus-within .moderar { display: flex; }
.tile .moderar button { background: rgb(0 0 0 / .7); color: #fff; border: 0; border-radius: 8px; padding: 4px 9px; font-size: .75rem; cursor: pointer; }
.controles { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); }
.controles .grupo { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.contador, .calidad { min-width: 64px; font-size: .9rem; opacity: .85; }
.calidad { text-align: right; }
.avisos { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 10; width: min(560px, calc(100% - 32px)); }
.aviso { background: var(--cristal-solido); backdrop-filter: blur(16px); border: 1px solid var(--borde-2); color: var(--sala-texto); border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; box-shadow: var(--sombra); animation: aparecer .4s var(--muelle); }
.aviso.alerta { border-color: rgb(255 194 77 / .5); }
.aviso.error { border-color: rgb(255 92 116 / .6); }
.chat { grid-row: 1; grid-column: 2; width: 330px; display: grid; grid-template-rows: auto 1fr auto; background: var(--cristal-solido); backdrop-filter: blur(20px); border-left: 1px solid var(--borde); min-height: 0; }
.chat header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.chat ol { list-style: none; margin: 0; padding: 0 14px; overflow-y: auto; display: grid; align-content: start; gap: 8px; }
.chat li { font-size: .9rem; word-wrap: break-word; }
.chat li b { color: var(--turquesa); }
.chat li time { opacity: .55; font-size: .75rem; margin-left: 4px; }
.chat form { display: flex; gap: 6px; padding: 10px 14px; }

/* ---------- Moderación ---------- */
.moderacion { overflow-y: auto; padding: 26px clamp(16px, 3vw, 40px) 40px; }
.admin-cabeza h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; }
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 6px 0 22px; border-radius: 16px; background: var(--cristal); border: 1px solid var(--borde); width: fit-content; max-width: 100%; }
.pestanas button { display: inline-flex; gap: 6px; align-items: center; border: 0; background: none; padding: 9px 14px; border-radius: 12px; font-weight: 650; color: var(--texto-suave); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] { background: var(--cristal-3); color: #fff; box-shadow: inset 0 0 0 1px var(--borde-2); }
.pestanas .globo { min-width: 18px; height: 18px; font-size: .66rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cifra { padding: 18px 20px; border-radius: 20px; background: var(--cristal); border: 1px solid var(--borde); animation: aparecer .5s var(--muelle) both; }
.cifra b { display: block; font: 800 2.3rem/1.1 var(--display); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra.fria b { background: var(--grad-frio); -webkit-background-clip: text; background-clip: text; }
.cifra span { color: var(--texto-suave); font-size: .86rem; }
.titulo-bloque { grid-column: 1 / -1; margin: 10px 0 0; font: 700 .74rem var(--fuente); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tarjeta-mod { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--cristal); border: 1px solid var(--borde); animation: aparecer .45s var(--muelle) both; }
.tarjeta-mod .cabeza { display: flex; gap: 12px; align-items: center; }
.tarjeta-mod .cabeza small { display: block; color: var(--texto-tenue); font-size: .78rem; }
.tarjeta-mod blockquote { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgb(0 0 0 / .25); border-left: 3px solid var(--buganvilla); white-space: pre-wrap; overflow-wrap: anywhere; }
.tarjeta-mod .motivo { color: var(--texto-suave); font-size: .86rem; margin: 0; }
.tarjeta-mod .botones { display: flex; gap: 6px; flex-wrap: wrap; }
.vacio { color: var(--texto-tenue); padding: 30px; text-align: center; border: 1px dashed var(--borde-2); border-radius: 20px; grid-column: 1 / -1; }
.tabla-envoltura { overflow-x: auto; border-radius: 20px; border: 1px solid var(--borde); background: var(--cristal); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); font-size: .88rem; white-space: nowrap; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { color: var(--texto-tenue); font-weight: 650; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.tabla td .boton { margin-right: 4px; }
.tabla .quien { display: flex; align-items: center; gap: 10px; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 650; background: var(--cristal-2); border: 1px solid var(--borde-2); }
.etiqueta.pendiente { color: var(--aviso); border-color: rgb(255 194 77 / .4); }
.etiqueta.aprobado, .etiqueta.activo { color: var(--ok); border-color: rgb(52 231 166 / .35); }
.etiqueta.denegado, .etiqueta.desactivado { color: var(--peligro); border-color: rgb(255 92 116 / .4); }


/* ---------- Planes y precios ---------- */
.enlace-precios { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--texto); background: var(--cristal); border: 1px solid var(--borde); transition: background .2s, transform .25s var(--muelle); }
.enlace-precios:hover { background: var(--cristal-2); transform: translateY(-2px); }
.enlace-precios .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--sol); }
.enlace-precios span { font-weight: 700; }
.enlace-precios small { color: var(--texto-suave); font-size: .82rem; }

.precios-publicos { min-height: 100dvh; max-width: 1180px; margin: 0 auto; padding: clamp(16px, 4vw, 40px) clamp(16px, 4vw, 40px) 60px; }
.precios-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.precios-cabeza nav { display: flex; gap: 8px; align-items: center; }
.precios-cabeza .logo-emblema { width: 48px; height: 48px; }
.precios-cabeza .logo-texto { height: 27px; }
.precios-intro { text-align: center; max-width: 720px; margin: clamp(28px, 6vh, 64px) auto 26px; }
.precios-intro h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.precios-intro h1 em { font-style: normal; background: var(--grad-texto); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 9s linear infinite; }
.precios-intro p { color: var(--texto-suave); font-size: 1.08rem; }

.periodos { display: flex; gap: 4px; width: fit-content; margin: 0 auto 26px; padding: 4px; border-radius: 99px; background: var(--cristal); border: 1px solid var(--borde); }
.periodos button { border: 0; background: none; padding: 9px 18px; border-radius: 99px; font-weight: 650; color: var(--texto-suave); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background .25s, color .25s; }
.periodos button[aria-checked="true"] { background: var(--cristal-3); color: #fff; box-shadow: inset 0 0 0 1px var(--borde-2); }
.periodos b { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--grad-frio); color: #04121a; }

.tarjetas-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; align-items: stretch; }
.tarjeta-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border-radius: 26px; background: var(--cristal-solido); border: 1px solid var(--borde); box-shadow: var(--sombra); backdrop-filter: blur(20px); animation: aparecer .6s var(--muelle) both; }
.tarjeta-plan h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.tarjeta-plan.plan-plus { background: linear-gradient(var(--noche-2), var(--noche-2)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }
.tarjeta-plan.plan-amigos { background: linear-gradient(var(--noche-2), var(--noche-2)) padding-box, var(--grad-frio) border-box; border: 1.5px solid transparent; }
.tarjeta-plan.actual { box-shadow: var(--sombra), 0 0 0 3px rgb(52 231 166 / .35); }
.sello { position: absolute; top: -12px; right: 20px; padding: 4px 12px; border-radius: 99px; font: 700 .72rem var(--fuente); background: var(--grad); color: #fff; box-shadow: 0 6px 18px -6px rgb(255 61 139 / .8); }
.sello.frio { background: var(--grad-frio); color: #04121a; box-shadow: 0 6px 18px -6px rgb(46 230 197 / .7); }
.precio { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.precio b { font: 800 2.6rem/1 var(--display); letter-spacing: -.04em; }
.precio span { color: var(--texto-suave); }
.equivale { margin: -8px 0 0; color: var(--texto-tenue); font-size: .84rem; min-height: 1.2em; }
.tarjeta-plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.tarjeta-plan li { display: flex; gap: 10px; align-items: flex-start; }
.tarjeta-plan li .ico { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
.tarjeta-plan li small { display: block; color: var(--texto-tenue); font-size: .8rem; }
.garantias { list-style: none; margin: 28px auto 0; padding: 0; max-width: 820px; display: grid; gap: 8px; color: var(--texto-suave); font-size: .9rem; }
.garantias li { display: flex; gap: 10px; align-items: flex-start; }
.garantias .ico { width: 18px; height: 18px; color: var(--turquesa); margin-top: 1px; }

.planes-zona { overflow-y: auto; padding: 26px clamp(16px, 3vw, 40px) 50px; }
.planes-zona > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.planes-cabeza h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; }
.titulo-seccion { margin: 34px auto 14px; font-size: 1.3rem; }
.aviso-pruebas { padding: 10px 14px; border-radius: 14px; background: rgb(255 194 77 / .12); border: 1px solid rgb(255 194 77 / .4); color: var(--aviso); font-size: .88rem; }
.plan-actual { padding: 22px 24px; display: grid; gap: 16px; }
.plan-actual-cabeza { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.plan-actual-cabeza p { margin: 0; color: var(--texto-suave); flex: 1; min-width: 240px; }
.plan-actual-cabeza b { color: var(--texto); }
.insignia { display: inline-flex; padding: 6px 14px; border-radius: 99px; font: 800 .95rem var(--display); background: var(--cristal-3); }
.insignia.plan-plus { background: var(--grad); color: #fff; }
.insignia.plan-amigos { background: var(--grad-frio); color: #04121a; }
.aviso-renovacion { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgb(91 140 255 / .12); border: 1px solid rgb(91 140 255 / .4); font-size: .88rem; }
.usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.uso { display: grid; gap: 6px; }
.uso span { color: var(--texto-tenue); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.uso b { font-size: 1.05rem; }
.barra { display: block; height: 8px; border-radius: 8px; background: rgb(255 255 255 / .08); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 8px; background: var(--grad); transition: width .6s var(--suave); }
.plan-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.panel-amigos { margin-top: 18px; padding: 22px 24px; display: grid; gap: 14px; }
.panel-amigos header { display: flex; gap: 14px; align-items: flex-start; }
.panel-amigos header > .ico { width: 34px; height: 34px; color: var(--turquesa); flex: none; }
.panel-amigos h2 { margin: 0 0 4px; }
.panel-amigos .sub { margin: 0; font-size: .88rem; }
#plazas-amigos { display: grid; gap: 10px; }
.plaza { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--cristal); border: 1px solid var(--borde); }
.plaza.asignada { border-color: rgb(46 230 197 / .35); }
.plaza-numero { font-weight: 700; color: var(--texto-suave); font-size: .9rem; }
.plaza-alias { display: flex; gap: 10px; align-items: center; color: var(--texto); font-size: .95rem; }
.plaza-alias b { white-space: nowrap; color: var(--turquesa); }
.plaza-alias input { padding: 9px 12px; }
.plaza-botones { display: flex; gap: 6px; }
.plaza-nota { grid-column: 2 / -1; color: var(--texto-tenue); font-size: .8rem; }
.resumen-pago { display: grid; gap: 8px; margin-bottom: 12px; justify-items: start; }
.resumen-pago p { margin: 0; }
.uso-video { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.uso-video b { color: var(--texto); }
@media (max-width: 860px) {
  .plaza { grid-template-columns: 1fr; }
  .plaza-nota { grid-column: 1; }
  .planes-cabeza h1 { font-size: 1.8rem; }
  .precios-cabeza .logo-texto { display: none; }
}

/* ---------- Pantallas medianas y móviles ---------- */
@media (max-width: 1180px) {
  .chat-app, .chat-app.con-gente { grid-template-columns: 300px minmax(0, 1fr) 0; }
  .gente { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 88vw); z-index: 20; transform: translateX(100%); transition: transform .45s var(--suave); box-shadow: var(--sombra); background: var(--cristal-solido); }
  .chat-app.con-gente .gente { transform: none; }
}
@media (max-width: 860px) {
  .portada { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .portada-escena { margin: 0 -12px; }
  .titular { margin-top: 18px; }
  .logo-emblema { width: 52px; height: 52px; }
  .logo-texto { height: 28px; }

  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .zona { height: auto; min-height: 0; }
  .carril { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--borde); gap: 0; }
  .carril-logo, .carril-hueco { display: none; }
  .carril-boton { width: auto; flex: 1; padding: 8px 0 6px; }
  .carril-boton[aria-current="page"]::before { left: 30%; right: 30%; top: -7px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .carril-yo .avatar { width: 36px; height: 36px; }
  .menu-yo { left: auto; right: 10px; bottom: 76px; }

  .chat-app, .chat-app.con-gente { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; }
  .carril-boton .globo { right: calc(50% - 26px); }
  .lista-salas, .conversacion { grid-area: 1 / 1; }
  .conversacion { background: var(--noche); transform: translateX(100%); transition: transform .45s var(--suave); z-index: 3; }
  .chat-app[data-panel-movil="conversacion"] .conversacion { transform: none; }
  .solo-movil { display: inline-grid; }
  .conv-cabeza { padding: 10px 12px; gap: 10px; }
  .burbuja { max-width: 88%; }
  .tostadas { bottom: 84px; }
  .vestibulo { grid-template-columns: 1fr; }
  .video-zona { place-items: start center; padding: 16px; }
  .moderacion { padding-top: 18px; }
  .admin-cabeza h1 { font-size: 1.7rem; }
  .opciones-tipo { grid-template-columns: 1fr; }
  .selector-emojis { grid-template-columns: repeat(7, 38px); left: 12px; }
  .chat { position: fixed; inset: 0 0 76px 0; width: auto; z-index: 5; }
  .escenario[data-modo="orador"] { grid-template-rows: minmax(0, 1fr) 100px; }
  .escenario[data-modo="orador"] .tira .tile { width: 132px; }
  .redondo { width: 44px; height: 44px; font-size: 1.05rem; }
  .contador, .calidad { display: none; }
}

@media (hover: none) { .buscador kbd { display: none; } }

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