:root{--pri:#0f172a;--acc:#dc2626;--bg:#f8fafc;--bd:#e2e8f0;--mut:#64748b;--ok:#166534;--warn:#92400e}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#0f172a;background:var(--bg);display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--pri);color:#fff;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand span{font-size:12px;opacity:.65}
.seg{display:flex;margin-left:auto;border:1px solid #475569;border-radius:10px;overflow:hidden}
.seg button{background:transparent;color:#cbd5e1;border:0;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer}
.seg button.on{background:#fff;color:var(--pri);font-weight:600}
button{font:inherit;cursor:pointer}
.primario{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-weight:600}
.primario:disabled{background:#cbd5e1;cursor:not-allowed}
.primario.ancho{width:100%;margin-top:6px;padding:12px}
.mini{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:6px 10px;font-size:12px}
main{flex:1;position:relative;min-height:0}
#map{position:absolute;inset:0}
.leyenda{position:absolute;left:12px;bottom:22px;z-index:500;background:#fff;border-radius:12px;padding:10px 12px;max-width:310px;box-shadow:0 4px 14px rgba(0,0,0,.2);font-size:12px;line-height:1.35}
.leyenda small{display:block;color:var(--mut);margin-top:6px}
.escala{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:11px;color:var(--mut)}
.escala i{display:inline-block;width:26px;height:10px;border-radius:2px}
.vacio{margin-top:8px;padding:6px 8px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;color:var(--warn)}
.panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);z-index:700;background:#fff;box-shadow:-4px 0 18px rgba(0,0,0,.25);overflow:auto;padding:14px}
.panel[hidden]{display:none}
.panel-cab{display:flex;justify-content:space-between;align-items:center;font-size:17px;margin-bottom:6px}
.icono{border:0;background:transparent;font-size:26px;line-height:1;color:var(--mut)}
form label{display:block;font-size:13px;margin:10px 0;color:#334155}
form select,form input[type=date],form textarea{width:100%;margin-top:4px;padding:9px;border:1px solid var(--bd);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
fieldset{border:1px solid var(--bd);border-radius:8px;margin:10px 0;padding:6px 10px}
legend{font-size:12px;color:var(--mut);padding:0 4px}
label.chk{display:flex;align-items:center;gap:8px;margin:6px 0}
.paso{font-size:13px;color:#334155;margin:6px 0}
.zona{padding:9px 10px;border-radius:8px;background:#f1f5f9;font-size:13px;border:1px dashed #cbd5e1}
.zona.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--ok)}
.zona.mal{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.aviso{font-size:12px;color:var(--mut);margin:8px 0}
.resp{padding:10px;border-radius:8px;font-size:13px;margin:8px 0}
.resp.ok{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0}
.resp.mal{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.dev{position:absolute;left:12px;top:92px;z-index:600;background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:5px;max-width:230px}
.dev[hidden]{display:none}
.dev small{color:var(--warn)}
.pin-reporte{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--acc);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
@media (max-width:640px){
  .seg{margin-left:0;order:3;width:100%}.seg button{flex:1}
  .leyenda{max-width:calc(100% - 24px);bottom:12px}
  .dev{top:auto;bottom:140px}
  .panel{width:100%}
}
.escala[hidden]{display:none}.escala .grad{width:150px;height:10px;border-radius:5px;background:linear-gradient(90deg,rgba(253,230,138,.35),#fde68a,#fb923c,#ef4444,#991b1b)}

.nota-pines{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:6px 8px;color:#1e3a8a!important}
.nota-pines[hidden]{display:none}
.pin-caso{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#1d4ed8;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}
ul.fuentes{margin:4px 0 6px;padding-left:18px}
.aprox{display:block;color:#92400e;background:#fffbeb;border-radius:6px;padding:4px 6px}

.mes{display:flex;align-items:center;gap:6px;font-size:12px;color:#cbd5e1}
.mes[hidden]{display:none}
.mes select{background:#1e293b;color:#fff;border:1px solid #475569;border-radius:8px;padding:6px 8px;font:inherit;font-size:13px}
@media (max-width:640px){.mes{order:4;width:100%}.mes select{flex:1}}

div.nota-pines{margin-top:6px;font-size:12px}
div.nota-pines small{display:block;margin:4px 0;color:#1e3a8a}
.capa{display:flex;align-items:center;gap:6px;margin:2px 0;cursor:pointer}
.pin-mini{display:inline-block;width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 0 0 1px #94a3b8}
.pin-mini.azul{background:#1d4ed8}.pin-mini.granate{background:#7f1d1d}
.sin-calor{font-size:10px;color:#64748b}
.pin-violencia{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#7f1d1d;border:3px solid #fecaca;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.etq-violencia{display:inline-block;background:#7f1d1d;color:#fff;font-size:11px;border-radius:4px;padding:1px 6px;margin-bottom:3px}

.pin-policia{width:22px;height:22px;border-radius:50%;background:#14532d;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
.pin-mini-policia{display:inline-flex;width:14px;height:14px;border-radius:50%;background:#14532d;font-size:8px;align-items:center;justify-content:center}
.etq-policia{display:inline-block;background:#14532d;color:#fff;font-size:11px;border-radius:4px;padding:1px 6px;margin-bottom:3px}
.meta-fuente{color:#64748b}

.aviso-adv{background:#fefce8;border:1px solid #fde047;border-radius:8px;padding:8px 10px;font-size:12px;color:#713f12;margin:8px 0;line-height:1.45}
.aviso-adv[hidden],#bloque-rol[hidden],#bloque-policia[hidden],#bloque-desc[hidden],#aviso-desc[hidden]{display:none}

.login[hidden],#paso-tel[hidden],#paso-codigo[hidden],.sesion-barra[hidden],.codigo-dev[hidden],#form[hidden]{display:none}
.login-intro{font-size:13px;color:#334155;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:8px 10px;line-height:1.45}
.tel-fila{display:flex;align-items:stretch;margin-top:4px}
.tel-fila .prefijo{display:flex;align-items:center;padding:0 10px;background:#f1f5f9;border:1px solid var(--bd);border-right:0;border-radius:8px 0 0 8px;font-size:14px;color:#475569}
.tel-fila input{flex:1;padding:9px;border:1px solid var(--bd);border-radius:0 8px 8px 0;font:inherit;font-size:15px;letter-spacing:.5px}
#codigo{width:100%;margin-top:4px;padding:9px;border:1px solid var(--bd);border-radius:8px;font:inherit;font-size:20px;letter-spacing:6px;text-align:center}
.meta-login{font-size:13px;color:#334155}
.codigo-dev{background:#fffbeb;border:1px dashed #f59e0b;border-radius:8px;padding:6px 8px;font-size:12px;color:#92400e;margin:6px 0}
.enlace-boton{background:none;border:0;color:#2563eb;font-size:12px;margin-top:6px;text-decoration:underline;padding:0}
.sesion-barra{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:6px 10px;font-size:12px;color:#166534;margin-bottom:6px}

.btn-alertas{background:#1e293b;color:#fff;border:1px solid #475569;border-radius:10px;padding:8px 12px;font-weight:600;position:relative}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#dc2626;color:#fff;font-size:11px;line-height:18px;margin-left:4px}
.badge[hidden],#panel-alertas[hidden],#alertas-sin-sesion[hidden],#alertas-con-sesion[hidden],.nueva-zona[hidden],#activar-notif[hidden]{display:none}
.bloque-alertas{border:1px solid var(--bd);border-radius:10px;padding:8px 10px;margin:8px 0}
.titulo-bloque{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px;margin-bottom:6px}
.lista-alertas{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;margin-bottom:6px}
.alerta{display:flex;gap:8px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--bd);border-radius:8px;padding:7px 8px;font-size:13px}
.alerta.nueva{background:#fef2f2;border-color:#fecaca}
.alerta i{margin-top:3px}
.etq-prensa{background:#1d4ed8;color:#fff;border-radius:4px;font-size:10px;padding:0 4px}
.zona-item{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 0;border-bottom:1px dashed var(--bd);font-size:13px}
.zona-item small{display:block;color:var(--mut)}
.nueva-zona{margin-top:8px}
.cats{display:flex;flex-direction:column;margin:4px 0}
#zona-nombre{width:100%;margin-top:4px;padding:9px;border:1px solid var(--bd);border-radius:8px;font:inherit;font-size:14px}

.btn-falso{display:block;width:100%;margin-top:6px;background:#fff;border:1px solid #fecaca;color:#991b1b;border-radius:6px;padding:5px 6px;font-size:12px}
.btn-falso:hover{background:#fef2f2}
.dlg-fondo{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg-fondo[hidden]{display:none}
.dlg{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
label.declaro{align-items:flex-start;font-size:12px;color:#334155;background:#f8fafc;border:1px solid var(--bd);border-radius:8px;padding:8px}
label.declaro input{margin-top:2px}

/* ====================== rediseño 17-oct: encabezado, capas, guía, registro ====================== */
:root{--pri:#0b1f3a;--pri2:#13315c;--acc:#dc2626;--tinta:#0f172a;--suave:#f1f5f9;--sombra:0 6px 22px rgba(15,23,42,.18)}
body{color:var(--tinta)}
.top{background:linear-gradient(90deg,var(--pri),var(--pri2));gap:10px;padding:8px 14px;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:900;position:relative}
.brand{flex-direction:row;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:#fff;color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:18px}
.brand div{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-size:15px;letter-spacing:.2px}
.seg{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.seg button{padding:7px 11px}
.mes select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
.btn-guia{background:transparent;color:#e2e8f0;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 11px;font-size:13px}
.btn-guia:hover,.btn-alertas:hover{background:rgba(255,255,255,.12)}
.btn-alertas{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25)}
#btn-reportar{box-shadow:0 3px 10px rgba(220,38,38,.45)}
.primario{transition:filter .15s}
.primario:hover:not(:disabled){filter:brightness(1.08)}

/* capas del mapa */
.leyenda{padding:0;max-width:320px;box-shadow:var(--sombra);border:1px solid #e2e8f0;overflow:hidden}
.leyenda>summary{list-style:none;cursor:pointer;padding:9px 12px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.leyenda>summary::-webkit-details-marker{display:none}
.leyenda>summary::after{content:"▾";margin-left:auto;color:var(--mut);transition:transform .15s}
.leyenda:not([open])>summary::after{transform:rotate(-90deg)}
.leyenda:not([open])>summary{border-bottom:0}
.leyenda .per{font-weight:400;color:var(--mut);font-size:12px}
.leyenda>*:not(summary){margin-left:12px;margin-right:12px}
.ley-titulo{margin-top:8px;font-weight:600;font-size:12px;color:#334155}
div.nota-pines{background:none!important;border:0!important;padding:0!important;margin-top:6px}
.capa{padding:4px 0;border-top:1px dashed #e2e8f0}
#ir-casos{margin:6px 0 2px}
.como-leer{margin:6px 12px 10px!important;font-size:12px;color:#475569}
.como-leer summary{cursor:pointer;color:#1d4ed8;font-weight:600}
.como-leer ul{margin:6px 0;padding-left:16px}
.como-leer li{margin:3px 0}

/* panel de desarrollo plegado */
details.dev{padding:0;max-width:240px}
details.dev summary{cursor:pointer;padding:6px 10px;font-weight:600;color:#92400e;list-style:none}
details.dev summary::-webkit-details-marker{display:none}
details.dev[open]{padding-bottom:8px}
details.dev>*:not(summary){margin:0 10px}
details.dev[hidden]{display:none}

/* paneles laterales */
.panel{box-shadow:-8px 0 30px rgba(15,23,42,.25);padding:16px}
.panel-cab{font-size:16px}

/* registro */
.pasos-registro{display:flex;gap:6px;list-style:none;padding:0;margin:4px 0 10px}
.pasos-registro li{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);background:var(--suave);border-radius:8px;padding:6px 8px}
.pasos-registro li span{width:20px;height:20px;border-radius:50%;background:#cbd5e1;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.pasos-registro li.activo{background:#eff6ff;color:#1e3a8a;font-weight:600}
.pasos-registro li.activo span{background:#1d4ed8}
.pasos-registro li.hecho span{background:#16a34a}
.porque{background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#134e4a;margin-bottom:10px}
.porque>b{display:block;font-size:13.5px;margin-bottom:4px;color:#0f766e}
.porque p{margin:4px 0 6px;line-height:1.45}
.porque ul{list-style:none;padding:0;margin:0}
.porque li{display:flex;gap:7px;margin:5px 0;line-height:1.4}
.porque li i{color:#0f766e;margin-top:2px;width:14px}

/* guía de bienvenida */
.guia{position:relative;text-align:center;padding:22px 20px 16px;max-width:440px}
.cerrar-guia{position:absolute;right:10px;top:6px}
.guia-icono{width:64px;height:64px;border-radius:18px;color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:4px auto 10px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.guia h2{font-size:19px;margin:6px 0 8px}
.guia p{font-size:14px;line-height:1.5;color:#334155;margin:6px 0}
.guia .nota{font-size:12.5px;background:var(--suave);border-radius:8px;padding:8px 10px;color:#475569}
.guia-paso[hidden]{display:none}
.guia-pie{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.puntos{display:flex;gap:6px}
.puntos i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer}
.puntos i.on{background:#1d4ed8;width:20px;border-radius:4px}
.guia-botones{display:flex;gap:8px}

@media (max-width:640px){
  .top{padding:8px 10px}
  .btn-guia span,.btn-alertas>span:not(.badge){display:none}
  .brand b{font-size:14px}
  .leyenda{left:8px;right:8px;max-width:none;bottom:10px}
  #btn-reportar{flex:1}
}

.escala-calor{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11.5px;color:#334155}
.escala-calor[hidden]{display:none}
.escala-calor span{display:inline-flex;align-items:center;gap:4px}
.escala-calor i{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.nota-escala{display:block;color:var(--mut);font-size:11px;margin:2px 0 4px}

.cifra-distrito{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #0b1f3a;color:#0b1f3a;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pista-zoom{margin:6px 0;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:6px 8px;font-size:12px;color:#1e3a8a}
.pista-zoom[hidden],.nota-escala[hidden]{display:none}
.acercar-distrito{margin-top:6px}

/* distrito «levantado» en 3D al pasar el cursor o tocarlo */
.leaflet-interactive{transition:transform .18s ease,filter .18s ease}
.distrito-alzado{transform:translate(-3px,-7px);filter:drop-shadow(0 12px 10px rgba(11,31,58,.45)) drop-shadow(0 2px 2px rgba(11,31,58,.35))}
.tooltip-distrito{background:#0b1f3a;color:#fff;border:0;border-radius:10px;padding:7px 10px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tooltip-distrito::before{border-top-color:#0b1f3a!important}
.etq-distrito{display:flex;flex-direction:column;gap:3px;min-width:140px}
.etq-distrito b{font-size:13px}
.etq-distrito .tot{font-size:12px;color:#fde68a;font-weight:700}
.etq-distrito .chips{display:flex;gap:5px;flex-wrap:wrap}
.etq-distrito .chip{display:inline-flex;align-items:center;gap:4px;background:#fff;color:#0f172a;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700}
.etq-distrito .pista{color:#cbd5e1;font-size:10.5px}

/* ---- pines según la FUENTE: prensa = cuadrado con periódico · vecinos = redondo con personas ---- */
.pin-prensa{position:relative;width:28px;height:28px;border-radius:7px;background:#1d4ed8;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pin-prensa::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1d4ed8;border-bottom:0}
.pin-prensa.pin-violencia{background:#7f1d1d}
.pin-prensa.pin-violencia::after{border-top-color:#7f1d1d}
.pin-vecinos{position:relative;width:30px;height:30px;border-radius:50%;background:#ca8a04;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pin-vecinos .mini-adv{position:absolute;right:-6px;top:-6px;width:15px;height:15px;border-radius:50%;background:#fff;color:#ca8a04;font-size:8px;display:flex;align-items:center;justify-content:center}
.fuente-prensa,.fuente-vecinos{display:inline-block;color:#fff;font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;margin-bottom:4px}
.fuente-prensa{background:#1d4ed8}.fuente-prensa.viol{background:#7f1d1d}
.fuente-vecinos{background:#ca8a04}
.mini-prensa,.mini-vecinos,.mini-oficial{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#fff;font-size:8px;flex:0 0 auto}
.mini-prensa{border-radius:4px;background:#1d4ed8}.mini-prensa.viol{background:#7f1d1d}
.mini-vecinos{border-radius:50%;background:#ca8a04}
.mini-oficial{border-radius:50%;background:#1d4408}
.grupo-fuente{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:12px;color:#0f172a}
.grupo-fuente small{color:var(--mut)}
.nota-tipo{font-size:11.5px;background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;border-radius:8px;padding:6px 8px;margin:-4px 0 8px}
/* el levantado 3D más suave: menos salto, menos parpadeo al pasar rápido */
.distrito-alzado{transform:translate(-2px,-5px)}

.bloque-fuentes{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:9px 10px;margin:4px 0 10px;font-size:12px;color:#7f1d1d}
.bloque-fuentes[hidden]{display:none}
.bloque-fuentes b{display:block;font-size:13px;margin-bottom:3px}
.bloque-fuentes p{margin:3px 0 7px;line-height:1.45}
.campo-url{width:100%;margin:3px 0;padding:8px 9px;border:1px solid #fca5a5;border-radius:8px;font:inherit;font-size:13px;background:#fff}
.campo-url#fuente-1{border-width:2px}

.login-google{background:#f8fafc;border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:10px;text-align:center}
.login-google[hidden],.pasos-registro[hidden]{display:none}
.google-intro{font-size:13px;color:#334155;margin:0 0 10px}
.btn-google{display:flex;justify-content:center;min-height:44px}

.login-dev{margin-top:10px;border:1px dashed #f59e0b;border-radius:8px;padding:6px 8px;font-size:12px;background:#fffbeb}
.login-dev[hidden]{display:none}
.login-dev summary{cursor:pointer;color:#92400e;font-weight:600}
.login-dev input{width:100%;margin:5px 0;padding:7px;border:1px solid var(--bd);border-radius:6px;font:inherit;font-size:13px}