:root{
  --bg:#f4f6f8; --card:#fff; --ink:#16202a; --muted:#5b6672; --line:#dfe4ea;
  --brand:#0b5394; --brand-ink:#fff;
  --normal:#1f9d55; --atencion:#d69e00; --alerta:#e8590c; --emergencia:#c92a2a; --info:#1c7ed6;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f141a; --card:#18212b; --ink:#e8edf2; --muted:#9aa6b2; --line:#2a3542; --brand:#4a90d9; color-scheme:dark}
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); line-height:1.45; font-size:16px}
a{color:var(--brand)}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
h2{font-size:1.15rem}
.wrap{max-width:1100px; margin:0 auto; padding:0 16px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.hidden{display:none!important}

/* Encabezado */
.top{background:#0b5394; color:#fff}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; color:inherit; text-decoration:none; min-width:0; line-height:1.2}
.logo > span{white-space:nowrap}
.logo svg{flex:none}
.top .sub{font-size:.8rem; opacity:.85; font-weight:400}
@media (max-width:600px){
  .top .wrap{padding-top:10px; padding-bottom:10px}
  .logo{font-size:1.05rem; gap:8px}
  .logo svg{width:30px; height:30px}
  .top .sub{display:none}
  .usuario-top{font-size:.8rem; gap:6px; white-space:nowrap}
}

/* Banner de nivel */
.nivel{color:#fff; padding:18px 0}
.nivel .wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nivel .etq{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9}
.nivel .val{font-size:1.9rem; font-weight:800}
.nivel .det{flex:1 1 260px}
.n-normal{background:var(--normal)} .n-atencion{background:var(--atencion)} .n-alerta{background:var(--alerta)} .n-emergencia{background:var(--emergencia)}
.c-normal{color:var(--normal)} .c-atencion{color:var(--atencion)} .c-alerta{color:var(--alerta)} .c-emergencia{color:var(--emergencia)} .c-info{color:var(--info)}

/* Botones principales */
.acciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:16px 0}
.btn-gran{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:16px; border-radius:var(--radius); border:0; cursor:pointer; text-align:left; font:inherit; color:#fff; box-shadow:var(--shadow)}
.btn-gran b{font-size:1.1rem}
.btn-gran span{font-size:.85rem; opacity:.92}
.btn-reportar{background:var(--emergencia)}
.btn-wa{background:#128c4a}
.btn-push{background:var(--brand)}

/* Tarjetas y grilla */
.grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; margin-bottom:16px}
.grid > *{min-width:0}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); min-width:0}
.card + .card{margin-top:16px}
.grid > .card + .card, .grid > div > .card:first-child{margin-top:0}

/* Comunicados */
.com{border-left:4px solid var(--info); padding:8px 0 8px 12px; margin-bottom:12px}
.com:last-child{margin-bottom:0}
.com h3{font-size:1rem; margin:2px 0 4px}
.com p{margin:0; white-space:pre-line}
.com .meta{font-size:.8rem; color:var(--muted)}
.pill{display:inline-block; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:99px; color:#fff; text-transform:uppercase; letter-spacing:.03em}

/* Zonas */
.zonas{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px}
.zona{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:.92rem}
.dot{width:12px; height:12px; border-radius:50%; flex:none}

/* Clima */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-bottom:12px}
.kpi{background:var(--bg); border-radius:10px; padding:10px}
.kpi .v{font-size:1.4rem; font-weight:800}
.kpi .l{font-size:.75rem; color:var(--muted)}
.dias{display:grid; grid-template-columns:repeat(7,minmax(64px,1fr)); gap:6px; overflow-x:auto}
.dia{text-align:center; padding:8px 4px; border:1px solid var(--line); border-radius:10px; font-size:.82rem}
.dia .ico{font-size:1.4rem}
.dia .mm{font-weight:700; color:var(--info)}
.tabla{width:100%; border-collapse:collapse; font-size:.9rem}
.tabla th,.tabla td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tabla th{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}

/* Mapa */
#mapa{height:420px; border-radius:10px; z-index:0}
.leyenda{display:flex; flex-wrap:wrap; gap:12px; font-size:.8rem; margin-top:8px; color:var(--muted)}
.leyenda span{display:inline-flex; align-items:center; gap:6px}

/* Teléfonos */
.tels{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.tel{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:inherit}
.tel b{font-size:1.15rem; color:var(--emergencia)}

footer{padding:24px 0 40px; font-size:.82rem; color:var(--muted)}

/* Formularios y modales */
dialog{border:0; border-radius:var(--radius); padding:0; width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); background:var(--card); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,15,20,.55)}
.dlg-h{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card)}
.dlg-b{padding:16px}
.x{background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted)}
label{display:block; font-weight:600; font-size:.9rem; margin:12px 0 4px}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=datetime-local],input[type=date],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--card); color:var(--ink)}
textarea{min-height:84px; resize:vertical}
.fila{display:flex; gap:8px}
.fila > *{flex:1}
.chk{display:flex; gap:8px; align-items:flex-start; font-weight:400}
.chk input{margin-top:4px}
.tipos{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tipos label{margin:0; font-weight:500; font-size:.85rem; display:flex; gap:6px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.tipos input:checked + span{font-weight:700}
.tipos label:has(input:checked){border-color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent)}
.zchk{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.zchk label{font-weight:400; margin:0; display:flex; gap:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:10px; border:1px solid transparent; background:var(--brand); color:#fff; font:inherit; font-weight:600; cursor:pointer; text-decoration:none}
.btn:disabled{opacity:.6; cursor:wait}
.btn.sec{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.rojo{background:var(--emergencia)}
.btn.verde{background:#128c4a}
.btn.chico{padding:6px 10px; font-size:.85rem}
.btn.full{width:100%; margin-top:16px}
.aviso{padding:10px 12px; border-radius:10px; margin-top:12px; font-size:.9rem}
.aviso.ok{background:color-mix(in srgb,var(--normal) 15%,transparent)}
.aviso.err{background:color-mix(in srgb,var(--emergencia) 15%,transparent)}
.gps{display:flex; gap:8px; align-items:center; font-size:.85rem}
.hp{position:absolute; left:-9999px}
.link{background:none; border:0; color:var(--brand); cursor:pointer; font:inherit; padding:0; text-decoration:underline}

/* Cuentas de vecinos */
.caja{max-width:460px; margin:0 auto}
.sociales{display:grid; gap:8px; margin:12px 0}
.btn-social{display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 14px; border-radius:10px; font-weight:600; text-decoration:none; border:1px solid var(--line)}
.s-google{background:#fff; color:#1f1f1f; border-color:#dadce0}
.s-facebook{background:#1877f2; color:#fff; border-color:#1877f2}
.s-apple{background:#000; color:#fff; border-color:#000}
@media (prefers-color-scheme:dark){.s-apple{background:#fff; color:#000; border-color:#fff}}
.separador{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.85rem; margin:14px 0 4px}
.separador::before,.separador::after{content:""; flex:1; height:1px; background:var(--line)}
.usuario-top{display:flex; gap:10px; align-items:center; font-size:.85rem}
.usuario-top a{color:#fff}

/* Satélite y región */
#mapa-sat{height:460px; border-radius:10px; z-index:0}
.sat-ctrl{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px}
.seg{display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{background:var(--card); color:var(--ink); border:0; border-right:1px solid var(--line); padding:7px 10px; font:inherit; font-size:.85rem; cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.act{background:var(--brand); color:#fff}
.sat-tiempo{display:flex; align-items:center; gap:8px}
.mm-label{background:transparent; border:0; box-shadow:none; font-weight:700; font-size:11px; color:#111; text-shadow:0 0 3px #fff,0 0 3px #fff}
.nivel-agua{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px}
.nivel-agua:last-child{margin-bottom:0}
.nivel-agua .v{font-size:1.5rem; font-weight:800}
.nivel-agua svg{width:100%; height:60px; display:block; margin-top:6px}

/* Asistente virtual */
.asis-btn{position:fixed; right:16px; bottom:16px; z-index:1100; display:flex; align-items:center; gap:8px; padding:12px 18px; border:0; border-radius:99px; background:var(--brand); color:#fff; font:inherit; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.25); cursor:pointer}
.asis{position:fixed; right:16px; bottom:16px; z-index:1100; width:min(400px,calc(100vw - 32px)); height:min(600px,calc(100dvh - 32px)); display:flex; flex-direction:column; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden}
.asis[hidden],.asis-btn[hidden]{display:none}
@media (max-width:560px){.asis{right:0; bottom:0; width:100vw; height:100dvh; border-radius:0}}
.asis-h{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; background:var(--brand); color:#fff}
.asis-h small{display:block; font-size:.75rem; opacity:.85}
.asis-x{background:none; border:0; color:#fff; font-size:1.7rem; line-height:1; cursor:pointer}
.asis-em{padding:7px 14px; font-size:.82rem; background:color-mix(in srgb,var(--emergencia) 14%,transparent); border-bottom:1px solid var(--line)}
.asis-em a{font-weight:800; color:var(--emergencia)}
.asis-b{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.asis-m{max-width:88%; padding:9px 12px; border-radius:14px; font-size:.93rem; line-height:1.4; overflow-wrap:anywhere}
.asis-m.a{background:var(--bg); align-self:flex-start; border-bottom-left-radius:4px}
.asis-m.u{background:var(--brand); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.asis-m ul{margin:4px 0; padding-left:18px}
.asis-m a{color:inherit; font-weight:700}
.asis-sug{display:flex; flex-wrap:wrap; gap:6px}
.asis-sug button{border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:99px; padding:6px 11px; font:inherit; font-size:.83rem; cursor:pointer}
.asis-sug button:hover{border-color:var(--brand)}
.asis-card{border:2px solid var(--emergencia); border-radius:12px; padding:10px 12px; font-size:.9rem}
.asis-card dl{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:8px 0}
.asis-card dt{color:var(--muted)}
.asis-card dd{margin:0; font-weight:600; overflow-wrap:anywhere}
.asis-acc{display:flex; gap:8px}
.asis-ok{color:var(--normal); font-weight:600; margin:6px 0}
.asis-err{color:var(--emergencia); font-weight:600; margin:6px 0}
.asis-esc{display:flex; gap:4px; padding:12px}
.asis-esc span{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:asis-p 1s infinite}
.asis-esc span:nth-child(2){animation-delay:.15s} .asis-esc span:nth-child(3){animation-delay:.3s}
@keyframes asis-p{0%,80%,100%{opacity:.25}40%{opacity:1}}
.asis-f{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line)}
.asis-f textarea{flex:1; resize:none; min-height:40px; max-height:120px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; font:inherit; background:var(--card); color:var(--ink)}
.asis-pie{padding:0 12px 8px; font-size:.7rem; color:var(--muted); text-align:center}

/* Teléfonos */
@media (max-width:600px){
  .card{padding:14px}
  .nivel{padding:14px 0}
  .nivel .val{font-size:1.6rem}
  #mapa{height:320px}
  #mapa-sat{height:380px}
  .dias{grid-template-columns:repeat(7,minmax(58px,1fr))}
  .kpi .v{font-size:1.2rem}
  .tabla th,.tabla td{padding:7px 4px}
  .dia .mm{white-space:nowrap; font-size:.78rem}
}
@media (max-width:420px){.solo-ancho{display:none}}