:root{--fondo:#f3f5f2;--panel:#fff;--texto:#1d2420;--suave:#66706a;--linea:#dfe4df;--verde:#1f6f4a;--verde2:#2e8b5e;--rojo:#c62828;--ambar:#e09b10;--azul:#1f5fa8}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:10px 14px;background:var(--verde);color:#fff;font-weight:600}
button.sec{background:#e8ece8;color:var(--texto)}button.rojo{background:var(--rojo)}button.azul{background:var(--azul)}button:disabled{opacity:.5}
input,select{font:inherit;width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--texto)}
label{display:block;font-size:.85rem;color:var(--suave);margin:10px 0 4px}
.oculto{display:none!important}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:16px}
.error{color:var(--rojo);font-size:.9rem;min-height:1.2em;margin-top:8px}
.chip{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:99px;background:#e8ece8;color:var(--suave)}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:#aab3ad;margin-right:6px}.punto.on{background:#28a745}

/* Superposiciones: llamada, alarma, timbre */
.capa{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#fff;text-align:center}
#capaLlamada{background:#111b16}
#videos{display:grid;gap:6px;width:100%;flex:1;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-content:center}
#videos .cuadro{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:3/4;max-height:70vh}
#videos video{width:100%;height:100%;object-fit:cover}
#videos .cuadro span{position:absolute;left:8px;bottom:6px;font-size:.8rem;background:#0008;padding:2px 6px;border-radius:6px}
#videos .cuadro.yo{position:absolute;right:12px;top:12px;width:96px;aspect-ratio:3/4;z-index:2;border:2px solid #fff4}
.botonesLlamada{display:flex;gap:12px;padding:16px;justify-content:center;flex-wrap:wrap}
.botonesLlamada button{min-width:64px;padding:14px}
#capaAlarma{background:var(--rojo);animation:latido 1s infinite}
@keyframes latido{50%{background:#8e0000}}
#capaAlarma h1{font-size:2.2rem;margin:.2em}
#capaAlarma .acciones{display:flex;flex-direction:column;gap:10px;margin-top:20px;width:min(340px,100%)}
#capaAlarma .acciones button{background:#fff;color:var(--rojo);padding:14px}
#capaTimbre{background:#163b2b}
.banner{position:fixed;left:10px;right:10px;top:10px;z-index:1500;background:#3b2a00;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 6px 20px #0004;display:flex;gap:10px;align-items:center}
.banner b{color:#ffcf5c}.banner button{margin-left:auto;padding:6px 10px;background:#fff3;}
.marcaSOS{background:var(--rojo);color:#fff;border-radius:50%;width:34px!important;height:34px!important;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;box-shadow:0 0 0 6px #c6282855;animation:onda 1.2s infinite}
@keyframes onda{50%{box-shadow:0 0 0 14px #c6282811}}
.marcaUsuario{background:var(--verde);color:#fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);width:28px!important;height:28px!important;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px #0005}
.marcaUsuario b{transform:rotate(45deg);font-size:11px}.marcaUsuario.off{background:#8a948e}.marcaUsuario.yo{background:var(--azul)}