:root{--bg:#ece5dd;--panel:#fff;--txt:#1b2230;--suave:#5b6578;--azul:#1f5fd6;--ok:#1a7f46;--aviso:#a86a00;--mal:#c62828;--borde:#dde1e8}
@media (prefers-color-scheme:dark){:root{--bg:#0f131a;--panel:#171d27;--txt:#e6eaf2;--suave:#98a2b5;--borde:#2a3342}}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:15px/1.45 system-ui,sans-serif}[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--borde);background:var(--panel);border-radius:8px;padding:.5rem .8rem;min-height:40px}
.primario{background:var(--azul);color:#fff;border-color:var(--azul);font-weight:600}.fantasma{background:transparent}input,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--borde);border-radius:8px;background:var(--panel)}
.tarjeta{max-width:360px;margin:12vh auto;background:var(--panel);padding:24px;border-radius:12px;border:1px solid var(--borde)}.suave{color:var(--suave)}.error{color:var(--mal);min-height:1.2em}
#app{display:flex;height:100%}#izq{width:320px;background:var(--panel);display:flex;flex-direction:column;gap:8px;padding:10px;border-right:1px solid var(--borde)}#salas{flex:1;overflow:auto}
.sala{padding:10px;border-radius:8px;cursor:pointer}.sala.sel{background:#e1ecfc}.sala b{display:block}.sala small{color:var(--suave)}
#der{flex:1;display:flex;flex-direction:column;min-width:0}header{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--borde)}header h2{flex:1;margin:0;font-size:1.1rem}
#conexion{font-size:.85rem}.on{color:var(--ok)}.off{color:var(--aviso)}#banner{background:var(--mal);color:#fff;padding:6px 14px}
#partic,#para{display:flex;gap:6px;flex-wrap:wrap;padding:4px 10px;background:var(--panel)}.chip{display:inline-flex;align-items:center;gap:4px;background:#eef2f8;border-radius:16px;padding:2px 8px;color:#1b2230}.chip small{font-size:.75rem}
.pto{width:10px;height:10px;border-radius:50%;display:inline-block;background:#8c8c8c}.disponible{background:var(--ok)}.ocupado{background:#e09600}.sel-para{background:var(--azul);color:#fff}
#mensajes{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px}.b{max-width:75%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;background:var(--panel)}
.b.yo{align-self:flex-end;background:#d9fdd3;color:#1b2230}.b .n{font-weight:700;font-size:.85rem}.b .pie{font-size:.75rem;color:var(--suave)}.sis{align-self:center;background:#e1f5fe;color:#455;border-radius:8px;padding:2px 10px;font-size:.8rem}
#indicador{padding:2px 14px;color:var(--suave);font-size:.85rem;min-height:1.3em}#adjuntos{padding:0 10px}#f-msg{display:flex;gap:8px;padding:8px;background:var(--panel);align-items:flex-end}#texto{resize:none}
dialog{border:1px solid var(--borde);border-radius:12px;background:var(--panel);color:var(--txt);max-width:420px}menu{display:flex;gap:8px;justify-content:flex-end;padding:0}label.op{display:block;margin:.4rem 0}
@media(max-width:800px){#izq{width:100%;position:absolute;z-index:3;height:100%}#izq.oculta{display:none}}

#voz-barra,#grab{display:flex;gap:8px;align-items:center;padding:6px 14px;background:#e8f0fe;color:#1b2230}#voz-barra[hidden],#grab[hidden],#vivo[hidden]{display:none}
#vivo{background:#fff3f3;border-top:2px solid var(--mal);padding:8px 14px;color:#1b2230}.vivo-fila{display:flex;gap:10px;align-items:center;margin:3px 0}.mic{color:var(--mal);font-weight:700}.mic.mute{color:var(--aviso)}
.peligro{color:var(--mal);border-color:var(--mal)}#grab-audio{height:34px}.adj{display:inline-flex;align-items:center;gap:6px;background:#eef2f8;color:#1b2230;border-radius:10px;padding:4px 8px;margin:2px;font-size:.85rem;max-width:340px}
.adj img{width:34px;height:34px;object-fit:cover;border-radius:4px}.adj .nota{color:#555;font-size:.75rem}.adj.err{background:#fdeaea}.b .adjm{margin-top:6px;font-size:.85rem}.b .adjm video,.b .adjm img{max-width:280px;border-radius:6px;display:block}.b .adjm a{color:var(--azul)}
.b .esc{margin-top:4px;font-size:.8rem;padding:2px 8px;min-height:30px}