:root{
  --vz-yellow:#ffcc00; --vz-blue:#00247d; --vz-red:#cf142b;
  --bg:#eef1f6; --panel:#ffffff; --panel-2:#f8fafc; --line:#e3e8ef;
  --text:#1b2430; --muted:#667085; --accent:#1d4ed8;
  --ok:#16a34a; --warn:#d97706; --crit:#dc2626;
  --radius:14px; --shadow:0 2px 10px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.45; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
a{color:var(--accent)}

/* Header */
.app-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px; background:linear-gradient(90deg,var(--vz-yellow) 0%,var(--vz-blue) 48%,var(--vz-red) 100%);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .flag{font-size:30px}
.app-header h1{margin:0; font-size:21px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35)}
.tagline{margin:0; font-size:12.5px; color:rgba(255,255,255,.95)}
.header-status{
  background:rgba(255,255,255,.92); color:#1b2430; padding:6px 12px; border-radius:999px;
  font-size:12.5px; display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.header-status .dot{width:9px;height:9px;border-radius:50%;background:var(--warn)}
.header-status.live .dot{background:var(--ok)}
.header-status.err .dot{background:var(--crit)}

/* Tabs — scroll horizontal en móvil, fijas arriba para navegar fácil */
.tabs{display:flex; gap:5px; padding:10px 14px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; position:sticky; top:0; z-index:1000; background:var(--bg)}
.tabs::-webkit-scrollbar{height:5px}
.tab{
  flex:0 0 auto; white-space:nowrap;
  background:var(--panel-2); color:var(--muted); border:1px solid var(--line);
  border-bottom:none; padding:11px 15px; border-radius:12px 12px 0 0; cursor:pointer;
  font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; transition:.15s;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--panel); color:var(--accent); border-color:var(--line); box-shadow:0 -2px 0 var(--accent) inset}
.tab-ico{font-size:16px}
.tab-short{display:none}

/* Menú "Más" (hamburguesa) — solo visible en móvil */
.more-wrap{display:none}
.more-menu{position:absolute; right:0; top:100%; z-index:1100; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:6px; min-width:210px; flex-direction:column; gap:2px}
.more-menu[hidden]{display:none}
.more-menu:not([hidden]){display:flex}
.more-item{display:flex; align-items:center; gap:9px; background:none; border:none; text-align:left;
  padding:12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; width:100%}
.more-item:hover{background:var(--panel-2)}

/* Panels */
main{padding:0 14px 16px}
.panel{display:none; background:var(--panel); border:1px solid var(--line);
  border-radius:0 var(--radius) var(--radius) var(--radius); padding:18px; box-shadow:var(--shadow)}
.panel.active{display:block}
.panel-grid{display:grid; grid-template-columns:360px 1fr; gap:20px}
@media(max-width:860px){
  .panel-grid{grid-template-columns:1fr}
  /* En móvil: primero los resultados (mapa/lista), luego el formulario para agregar */
  .col-map{order:1}
  .col-form{order:2}
  main{padding:0 8px 14px}
  .panel{padding:12px}
  .app-header{padding:10px 14px}
  .app-header h1{font-size:18px}
  .tagline{font-size:11px}
  .header-status{display:none}
  /* Móvil: 2 pestañas visibles + botón "☰ Más" para el resto */
  .tab-extra{display:none}
  .more-wrap{display:block; position:relative; flex:1 1 0; min-width:0}
  .tabs{gap:4px; padding:8px 8px 0; overflow:visible}
  .tab, .more-btn{flex:1 1 0; min-width:0; flex-direction:column; gap:2px; padding:8px 4px;
    font-size:11px; white-space:normal; text-align:center; line-height:1.12; border-radius:11px 11px 0 0}
  .more-btn{width:100%; background:var(--panel-2); color:var(--muted);
    border:1px solid var(--line); border-bottom:none; cursor:pointer; font-weight:600; display:flex; align-items:center}
  .more-btn.active{background:var(--panel); color:var(--accent); box-shadow:0 -2px 0 var(--accent) inset}
  .tab-ico{font-size:19px}
  .tab-full{display:none}
  .tab-short{display:block}
  /* Listas crecen con la página (sin scroll interno atrapado en táctil) */
  .list,.list-tall{max-height:none; overflow:visible}
  .col-form{margin-top:6px}
}

h2{margin:0 0 4px; font-size:17px}
.muted{color:var(--muted); font-size:13px; margin:0 0 14px}

/* Barra de conteo (números arriba) */
.stats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.stats:empty{display:none}
.stat{flex:1 1 0; min-width:88px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:1px}
.stat b{font-size:24px; line-height:1.05; color:var(--text)}
.stat span{font-size:11px; color:var(--muted); font-weight:600}
.stat-total{border-left:4px solid var(--accent)} .stat-total b{color:var(--accent)}
.stat-red{border-left:4px solid var(--crit)} .stat-red b{color:var(--crit)}
.stat-yellow{border-left:4px solid var(--warn)} .stat-yellow b{color:var(--warn)}
.stat-green{border-left:4px solid var(--ok)} .stat-green b{color:var(--ok)}
.stat-dark{border-left:4px solid #475467} .stat-dark b{color:#475467}

/* Encabezado de panel + botón verde "Agregar" */
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.panel-top h2{margin:0}
.btn-add{background:var(--ok); color:#fff; border:none; padding:11px 18px; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s}
.btn-add:hover{filter:brightness(1.07)}
.btn-add:active{transform:translateY(1px)}
.form-box{margin-bottom:16px}
.form-box[hidden]{display:none}
@media(max-width:860px){
  .btn-add{width:100%; justify-content:center; padding:13px}
  .panel-top h2{font-size:16px}
}

/* Forms */
.card-form{display:flex; flex-direction:column; gap:11px;
  background:var(--panel-2); padding:15px; border-radius:var(--radius); border:1px solid var(--line)}
.card-form label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:#475467}
.card-form .row{display:grid; grid-template-columns:1fr 1fr; gap:11px}
input,select,textarea{
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:11px; font-size:16px; font-family:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,78,216,.12)}
input[type=file]{padding:9px; font-size:13px; background:#fff}
.hint{font-size:12px; color:var(--muted); margin:2px 0 0}
.picked{font-size:12px; padding:9px 11px; border-radius:8px; background:#fff;
  border:1px dashed var(--line); color:var(--muted)}
.picked.set{border-style:solid; border-color:var(--ok); color:#0f7a37; background:#f0fdf4}
.btn-primary{
  background:var(--accent); color:#fff; border:none; padding:13px; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer; transition:.15s;
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff; color:var(--muted); border:1px solid var(--line);
  padding:9px 14px; border-radius:8px; cursor:pointer; font-size:13px}
.btn-ghost:hover{color:var(--text); border-color:var(--accent)}

/* Map */
.map{height:330px; border-radius:var(--radius); border:1px solid var(--line); z-index:1}
@media(max-width:860px){.map{height:280px}}
.map-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.map-toolbar input[type=search],.map-toolbar select{max-width:260px}
.count{font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap}
.legend{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px}
.legend i{width:12px;height:12px;border-radius:50%; display:inline-block; margin-left:6px}
.sev-alta{background:var(--crit)} .sev-media{background:var(--warn)} .sev-baja{background:var(--ok)}

/* Lists */
.list{margin-top:12px; display:flex; flex-direction:column; gap:8px; max-height:330px; overflow:auto}
.list-tall{max-height:560px}
@media(max-width:860px){.list,.list-tall{max-height:420px}}
.item{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  font-size:13px; display:flex; gap:11px; align-items:flex-start}
.item .thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0;border:1px solid var(--line)}
.item .body{flex:1; min-width:0}
.item h4{margin:0 0 3px; font-size:14px; color:var(--text)}
.item .meta{color:var(--muted); font-size:12.5px; word-break:break-word}
.item .meta a{color:var(--accent)}
.item .tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:700; margin:0 6px 4px 0}
.tag.alta{background:#fde7e7; color:#b42318}
.tag.media{background:#fdf0d9; color:#b25a00}
.tag.baja{background:#e6f6ec; color:#0f7a37}
.tag.destruido{background:#dc2626; color:#fff}
.tag.encontrado{background:#e6f6ec; color:#0f7a37}
.tag.desaparecido{background:#fde7e7; color:#b42318}
.tag.fallecido{background:#475467; color:#fff}
.tag.menor{background:#16a34a; color:#fff}
.tag.estado{background:#e7effd; color:#1d4ed8}
.tag.svc{background:#f0e9fd; color:#6d28d9}
.item .del{background:none;border:none;color:#98a2b3;cursor:pointer;font-size:17px;padding:2px 6px;line-height:1}
.item .del:hover{color:var(--crit)}

/* Emergency */
.emergency-bar{background:linear-gradient(135deg,#fff5f5,#eef3ff);
  border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; margin-bottom:18px}
.emerg-group{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:15px 0 0}
.emergency-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin-top:9px}
.emerg{display:flex; flex-direction:column; gap:2px; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:.15s}
.emerg:hover{border-color:var(--vz-red); transform:translateY(-2px); box-shadow:var(--shadow)}
.emerg strong{font-size:17px; color:var(--vz-red)} .emerg span{font-size:12px; color:var(--muted)}

/* Footer */
.app-footer{padding:18px; text-align:center; color:var(--muted); font-size:12px;
  display:flex; flex-direction:column; gap:10px; align-items:center}
.app-footer p{margin:0; max-width:760px}
.app-footer .contact{font-size:13.5px; font-weight:600; color:var(--text)}

/* Leaflet popups (tema claro por defecto) */
.leaflet-popup-content{font-size:13px}
.leaflet-popup-content b{color:var(--text)}