:root{
  --vino:#7a0f1a; --rojo:#e11d2e; --ambar:#f59e0b; --azul:#2563eb; --verde:#15803d;
  --fondo:#f6f2ee; --tinta:#1f1a17; --tarjeta:#fff; --borde:#d9d0c7;
}
@media (prefers-color-scheme:dark){
  :root{--fondo:#14110f;--tinta:#f3ece6;--tarjeta:#201b18;--borde:#3a322d}
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--tinta);
  padding-bottom:env(safe-area-inset-bottom);-webkit-tap-highlight-color:transparent}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;
  background:var(--vino);color:#fff;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem}
.yo{font-size:.85rem;display:flex;align-items:center;gap:6px}
select{font:inherit;padding:6px 8px;border-radius:8px;border:0;background:#fff;color:#111}
.demo{background:#fff3cd;color:#5c4400;font-size:.72rem;padding:6px 16px;text-align:center}
.sonido{display:block;width:calc(100% - 32px);margin:10px 16px 0;padding:12px;border:0;border-radius:10px;
  background:var(--ambar);color:#1f1300;font:inherit;font-weight:600}
.sonido[hidden]{display:none}
main{max-width:720px;margin:0 auto;padding:12px 16px 40px}
.mapa-wrap{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:8px}
.mapa{position:relative;width:100%;aspect-ratio:360/300;overflow:hidden;border-radius:10px;touch-action:manipulation;background:#222}
.lienzo{position:absolute;aspect-ratio:801/712}
.lienzo img{width:100%;height:100%;display:block;user-select:none;pointer-events:none}
.leyenda{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;padding:8px 4px 2px}
.d{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.d.rojo{background:var(--rojo)}.d.ambar{background:var(--ambar)}.d.azul{background:var(--azul)}.d.yo-d{background:#fff;border:2px solid #111}

.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  background:rgba(20,20,20,.72);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:1.5px solid #fff}
.pin.mia{background:#fff;color:#111;border:3px solid #111}
.pin.emerg,.pin.prec,.pin.aviso{z-index:5;width:30px;height:30px;color:#fff}
.pin.emerg{background:var(--rojo);animation:latido .7s infinite}
.pin.prec{background:var(--ambar);color:#111;animation:latido 1.4s infinite}
.pin.aviso{background:var(--azul)}
.pin.editando{cursor:grab;outline:2px dashed #fff;touch-action:none}
.pin .onda{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--rojo);animation:onda 1.2s infinite;pointer-events:none}
.pin .onda.b{animation-delay:.6s}
.pin.prec .onda{border-color:var(--ambar);animation-duration:2s}
@keyframes latido{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(225,29,46,.9)}50%{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 18px 8px rgba(225,29,46,.6)}}
@keyframes onda{0%{transform:scale(1);opacity:.95}100%{transform:scale(4.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.pin.emerg,.pin .onda{animation-duration:2.5s}}

.activas{display:grid;gap:10px;margin:12px 0}
.tarjeta{border-radius:12px;padding:12px 14px;background:var(--tarjeta);border:1px solid var(--borde);border-left:8px solid var(--azul)}
.tarjeta.emerg{border-left-color:var(--rojo)}.tarjeta.prec{border-left-color:var(--ambar)}
.tarjeta h3{margin:0 0 2px;font-size:1rem}
.tarjeta .m{font-size:.8rem;opacity:.75}
.tarjeta p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.tarjeta img,.al-media img{max-width:100%;border-radius:8px;margin-top:8px}
.tarjeta audio,.al-media audio{width:100%;margin-top:8px}
.tarjeta .resp{font-size:.8rem;margin-top:6px;opacity:.85}
.tarjeta .fila{margin-top:8px}

.acciones{display:grid;gap:10px;margin-top:12px}
.btn{display:flex;align-items:center;gap:14px;padding:16px;border:0;border-radius:14px;font:inherit;font-weight:800;
  font-size:1.1rem;color:#fff;text-align:left;text-decoration:none;cursor:pointer;min-height:64px}
.btn small{font-weight:500;font-size:.78rem;opacity:.92}
.btn .g{font-size:1.8rem}
.btn.emerg{background:var(--rojo);min-height:96px;font-size:1.35rem;box-shadow:0 6px 0 #8f0f1a}
.btn.prec{background:var(--ambar);color:#1f1300}
.btn.aviso{background:var(--azul)}
.btn.n911{background:#111;color:#fff;justify-content:center}
.btn.mini{min-height:44px;padding:10px;font-size:.95rem}
.btn:active{transform:translateY(2px)}
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #111}

button.sec,label.sec{background:var(--tarjeta);color:var(--tinta);border:1px solid var(--borde);border-radius:10px;padding:10px 14px;font:inherit;cursor:pointer}
button.rojo{background:var(--rojo);color:#fff;border:0;border-radius:10px;padding:12px 16px;font:inherit;font-weight:700}
button.verde{background:var(--verde);color:#fff;border:0;border-radius:10px;padding:12px 16px;font:inherit;font-weight:700}
.fila{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.nota{font-size:.8rem;opacity:.8}
.admin{margin-top:22px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:10px 14px}
.admin summary{font-weight:700;cursor:pointer}
.reglas{font-size:.82rem;padding-left:18px}

dialog{border:0;border-radius:16px;padding:18px;width:min(92vw,420px);background:var(--tarjeta);color:var(--tinta)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:0 0 8px}
dialog label{display:block;font-size:.9rem;margin:8px 0}
textarea{width:100%;font:inherit;padding:8px;border-radius:8px;border:1px solid var(--borde);background:var(--fondo);color:var(--tinta)}
.cuenta{font-size:4rem;font-weight:900;text-align:center;color:var(--rojo)}

.alarma{position:fixed;inset:0;z-index:100;background:#b00014;color:#fff;overflow:auto;animation:parpadeo .9s infinite}
.alarma[hidden]{display:none}
@keyframes parpadeo{0%,100%{background:#b00014}50%{background:#3a0008}}
@media (prefers-reduced-motion:reduce){.alarma{animation-duration:3s}}
.al-box{max-width:520px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 20px 30px}
.al-tit{font-size:2.2rem;font-weight:900;line-height:1.05;text-transform:uppercase}
.al-sub{font-size:1.2rem;margin:6px 0 14px}
.al-msg{font-size:1.15rem;background:rgba(0,0,0,.35);border-radius:10px;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.al-msg:empty{display:none}
.al-btns{display:grid;gap:10px;margin-top:16px}
.al-btns button{font-size:1.05rem;padding:14px}
.centro{max-width:460px;margin:0 auto;padding:28px 20px}
.centro h1{margin:0 0 8px}
.caja{display:grid;gap:12px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px;margin:12px 0}
.caja label,.admin label{display:grid;gap:4px;font-size:.9rem}
input[type=email],input:not([type]),input[inputmode=numeric]{font:inherit;padding:12px;border-radius:10px;border:1px solid var(--borde);background:var(--fondo);color:var(--tinta);width:100%}
.caja .acepto{display:flex;gap:10px;align-items:flex-start;font-size:.82rem}
.msg{min-height:1.4em;font-size:.9rem}
.salir{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:8px;padding:4px 10px;font:inherit;font-size:.8rem;cursor:pointer}
.yo{font-size:.85rem;display:flex;align-items:center;gap:8px}
.admin h3{margin:14px 0 6px;font-size:1rem}
.codigo{background:var(--fondo);border:1px dashed var(--borde);border-radius:10px;padding:10px 12px;margin:8px 0}
.codigo strong{font-size:1.3rem;letter-spacing:.08em}
a.enlace{text-decoration:none;display:inline-block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:999px;z-index:200;font-size:.9rem;max-width:90vw}