:root{--fondo:#08060f;--panel:#120d21;--borde:#ff2bd6;--borde2:#2a1b47;--texto:#f0e9ff;
--apagado:#8a7fb0;--boton:#00e5ff;--fav:#ffe600;--glow:.95;--a1:#ff2bd6;--a2:#00e5ff;--a3:#7cff00;--a4:#ff6a00}
body[data-skin=gamer]{--fondo:#0d1117;--panel:#161b22;--borde:#2ea043;--borde2:#21262d;--texto:#e6edf3;
--apagado:#6e7681;--boton:#39ff14;--fav:#f0b72f;--glow:.55;--a1:#39ff14;--a2:#00d4ff;--a3:#ff3860;--a4:#ffb400}
body[data-skin=girl]{--fondo:#fff5fa;--panel:#fff;--borde:#ff9ec7;--borde2:#f6dbe8;--texto:#4a2b40;
--apagado:#b491a8;--boton:#ff5fa2;--fav:#e8820a;--glow:.35;--a1:#ff5fa2;--a2:#a06cff;--a3:#2fa8bb;--a4:#ff8c42}
body[data-skin=pro]{--fondo:#fff;--panel:#f7f9fc;--borde:#c7d2e0;--borde2:#e4e9f0;--texto:#1f2933;
--apagado:#7b8794;--boton:#2563eb;--fav:#b3730a;--glow:0;--a1:#2563eb;--a2:#0f766e;--a3:#b45309;--a4:#6d28d9}
body[data-skin=emo]{--fondo:#0b0a0d;--panel:#141118;--borde:#6d28d9;--borde2:#241d2b;--texto:#cfc8d6;
--apagado:#5a5262;--boton:#8b5cf6;--fav:#a86bd6;--glow:.5;--a1:#8b5cf6;--a2:#ef476f;--a3:#9aa0ab;--a4:#d94f4f}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:16px}
/* En un monitor grande, estirar las tarjetas a 2000px deja todo desperdigado. */
.pantalla{max-width:1100px;margin:0 auto}
.oculto{display:none}
h1{font-size:19px;margin:0;letter-spacing:1px}
h1 span{color:var(--boton)}
.sub,.nota{color:var(--apagado);font-size:13px}
header{display:flex;align-items:center;gap:14px;margin-bottom:12px}
header .sep{flex:1}
header select{width:auto;min-width:150px}
#quien{font-size:12px}
.tarjeta{background:var(--panel);border:1px solid var(--borde2);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.tarjeta.fuerte{border:1.5px solid var(--borde);box-shadow:0 0 calc(18px*var(--glow)) color-mix(in srgb,var(--borde) 60%,transparent)}
.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sep{flex:1}
button{background:transparent;border:1.2px solid var(--boton);color:var(--boton);border-radius:8px;
padding:8px 14px;font-size:13px;cursor:pointer;box-shadow:0 0 calc(7px*var(--glow)) color-mix(in srgb,var(--boton) 55%,transparent)}
button:hover{background:color-mix(in srgb,var(--boton) 12%,transparent)}
button.primario{width:100%;margin-top:14px;padding:12px;font-size:15px;font-weight:600}
input:not([type=range]):not([type=checkbox]),select{background:var(--fondo);border:1px solid var(--borde2);color:var(--texto);
border-radius:8px;padding:9px 11px;font-size:14px;width:100%}
label{color:var(--apagado);font-size:12px;display:block;margin:10px 0 4px}
.fila label{margin:0}
.val{color:var(--apagado);font-size:12px;min-width:44px}
.check{display:flex;align-items:center;gap:6px;color:var(--texto);font-size:13px}
.estado{font-size:13px;margin-bottom:6px}
.fuentes{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.fuentes b{font-weight:700}
.chat{height:auto;min-height:0;overflow-y:auto;font-size:13px}
.chat:empty::before{content:attr(data-vacio);color:var(--apagado);opacity:.7}
#enlace-voz{flex:1;min-width:240px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.linea{padding:1px 0}
.linea .hora{color:var(--apagado);opacity:.7;font-family:ui-monospace,Menlo,monospace;font-size:11px;margin-right:6px}
.linea .quien{font-weight:700;cursor:pointer}
.linea.no{opacity:.45}
.linea.no .motivo{font-size:11px;opacity:.8}
.linea.fav .quien,.linea.fav .msg{color:var(--fav)}
.linea.voz .quien{color:var(--boton)}
.linea.hablando{background:color-mix(in srgb,var(--boton) 16%,transparent);border-radius:4px}

#moderacion button{padding:7px 11px;font-size:12px}
#listas h4{margin:10px 0 4px;font-size:12px;color:var(--apagado);font-weight:600}
#listas .chip{display:inline-flex;align-items:center;gap:6px;background:var(--fondo);
border:1px solid var(--borde2);border-radius:20px;padding:3px 10px;margin:2px;font-size:12px}
#listas .chip button{padding:0 4px;border:0;background:none;color:var(--apagado);
box-shadow:none;font-size:14px;line-height:1;cursor:pointer}
#listas .chip button:hover{color:#ff3b5c;background:none}
summary::marker{color:var(--boton)}

#modal{position:fixed;inset:0;background:rgba(0,0,0,.66);display:flex;
align-items:center;justify-content:center;z-index:50;padding:20px}
#modal.oculto{display:none}
#modal .tarjeta{width:100%;margin:0}
.canal{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.canal select{width:118px;flex:none}
.canal input{flex:1}
.canal .quitar{border-color:var(--borde2);color:var(--apagado);padding:8px 11px}
.fuentes .cfg{margin-left:6px;padding:1px 7px;font-size:11px;border-radius:6px;
border:1px solid currentColor;background:none;color:inherit;cursor:pointer;box-shadow:none}

/* El chat manda; los anuncios ocupan la columna sobrante y desaparecen si no hay */
.zona-chat{display:flex;gap:12px;align-items:stretch}
.zona-chat .tarjeta{margin-bottom:12px}
.zona-chat .chat{flex:1;margin-bottom:12px}
#idioma{padding:6px 12px;font-weight:700;font-size:12px}
.fuentes .cfg{margin-left:8px;padding:2px 8px;font-size:11px;border-radius:6px;
border:1px solid currentColor;background:none;color:inherit;cursor:pointer;box-shadow:none}
.fuentes .cfg:hover{background:color-mix(in srgb,currentColor 15%,transparent)}


/* Un solo espacio de anuncio, dentro de la fila del chat: nunca se va abajo
   ni desaparece por mucho zoom que haga el usuario. */
/* Sin relleno en la tarjeta: la imagen llega a los bordes y queda a la misma
   altura que el chat, sin margen alrededor. */
#lateral{padding:0;overflow:hidden;display:flex}
.marco{flex:1;width:100%;display:flex;align-items:center;justify-content:center}
.marco img{width:100%;height:100%;object-fit:cover;display:block}
.marco.hueco{background:#e9e9ee;color:#111;
flex-direction:column;gap:6px;text-align:center;padding:18px;font-size:13px}
.marco.hueco b{font-size:14px}
.marco.hueco span{opacity:.75;font-size:12px}
.marco.hueco .contacto{margin-top:10px;padding:7px 12px;background:#25d366;color:#062b12;
border-radius:16px;font-size:11px;font-weight:700;opacity:1}
a.marco.hueco{text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s}
a.marco.hueco:hover{transform:scale(1.02);box-shadow:0 0 18px rgba(37,211,102,.4)}
/* El 9:16 del anuncio es intocable: es lo que el anunciante entrega y lo que
   le prometes. Si fijáramos la altura al chat, el ancho quedaría fijo y la
   proporción cambiaría con el zoom, recortándole el logo de forma distinta a
   cada usuario. Por eso manda el anuncio y el chat se adapta a él. */
#lateral{width:clamp(190px,20vw,260px);aspect-ratio:9/16;height:auto;
flex:none;margin-bottom:12px}
@media (max-width:900px){
  .zona-chat{flex-direction:column}
  .chat{height:46vh}
  #lateral{width:min(260px,70vw);margin:0 auto 12px}
}