:root{
  --az-900:#0C2743; --az-800:#123456; --az-700:#17456E; --az-600:#1D5A8C;
  --az-100:#DCE7F1; --az-050:#EDF2F7;
  --tinta:#171A1E; --tinta-2:#4E5964; --tinta-3:#78838F;
  --linea:#D3DAE1; --linea-2:#AEB8C2;
  --fondo:#F2F4F6; --papel:#FFFFFF;
  --rojo:#9E1B14; --rojo-050:#FBEDEB; --rojo-linea:#E0B9B3;
  --ambar:#8A5A00; --ambar-050:#FDF4E3; --ambar-linea:#E5D2A5;
  --verde:#186B4C; --verde-050:#E9F4EF; --verde-linea:#BEDBCE;
  --r1:4px; --r2:8px; --r3:12px;
  --sombra:0 1px 2px rgba(12,39,67,.10);
  --sombra-2:0 4px 16px rgba(12,39,67,.14);
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --barra:52px;
  --escudo:url("assets/img/logo_estrategica_icono.svg");
  /* compatibilidad con estilos en línea heredados */
  --azul:#17456E; --azul-claro:#1D5A8C; --naranja:#8A5A00; --verde-c:#186B4C;
  --gris:#F2F4F6; --gris-borde:#D3DAE1; --texto:#171A1E; --texto-suave:#4E5964; --negro:#0C2743; --amarillo:#8A5A00;
}
html[data-contraste="1"]{
  --fondo:#FFFFFF; --papel:#FFFFFF; --tinta:#000000; --tinta-2:#20262C; --tinta-3:#20262C;
  --linea:#3A444E; --linea-2:#000000; --az-050:#FFFFFF; --az-100:#C9DAEA;
  --rojo-050:#FFFFFF; --ambar-050:#FFFFFF; --verde-050:#FFFFFF; --sombra:none; --sombra-2:none;
}
html[data-contraste="1"] .card,
html[data-contraste="1"] .record,
html[data-contraste="1"] .list-item,
html[data-contraste="1"] .vereda-card,
html[data-contraste="1"] .emerg-item,
html[data-contraste="1"] .stat{border-width:2px;}

*{box-sizing:border-box;}
body{margin:0;background:var(--fondo);font-family:var(--f);color:var(--tinta);-webkit-text-size-adjust:100%;}
a{color:var(--az-600);}
a:hover{color:var(--az-800);}
#sprite{position:absolute;width:0;height:0;overflow:hidden;}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px;}
.ic-lg{width:26px;height:26px;}
.ic-sm{width:16px;height:16px;stroke-width:1.9;vertical-align:-3px;}

/* ---------------- Barra institucional global ---------------- */
#barraGlobal{
  position:sticky; top:0; z-index:250; background:var(--az-900); color:#fff;
  height:var(--barra); padding:0 12px; display:flex; align-items:center; gap:10px;
  border-bottom:3px solid var(--az-600);
}
#barraGlobal .marca{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:auto;}
#barraGlobal .marca .sigla{
  width:30px;height:34px;flex:none;background:var(--escudo) center/contain no-repeat;text-indent:-999em;overflow:hidden;
}
#barraGlobal .marca h1.nombre{margin:0;font-size:inherit;font-weight:inherit;display:inline;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#barraGlobal button{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);padding:9px 12px;border-radius:var(--r1);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;
}
#barraGlobal button:hover{background:rgba(255,255,255,.10);}
#barraGlobal #btnEntrarHeader{background:var(--az-600);border-color:var(--az-600);}
#barraSesion{display:none;align-items:center;gap:8px;}
#nombreSesion{font-size:12.5px;font-weight:600;opacity:.9;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------------- Membrete (franja de contexto) ---------------- */
.membrete{background:var(--az-900);color:#fff;padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.12);}
.membrete-slim{padding:10px 16px;}
.membrete .sub{margin:0;font-size:13.5px;color:#B9C7D6;line-height:1.35;}
.status-bar{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:7px 11px;border-radius:var(--r1);font-size:12.5px;font-weight:600;color:#E4EBF2;}
.dot{width:9px;height:9px;border-radius:50%;background:#3FA97B;flex:none;}
.dot.off{background:#E0645A;} .dot.warn{background:#E3A93C;}

/* ---------------- Aviso de privacidad (descartable) ---------------- */
.aviso-privacidad{
  display:flex;align-items:center;gap:8px;background:var(--az-050);border-bottom:1px solid var(--linea);
  color:var(--tinta-2);padding-left:14px;font-size:12.5px;line-height:1.3;
}
.aviso-privacidad .ic{color:var(--az-600);flex:none;}
.aviso-privacidad span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 0;}
.aviso-privacidad button{
  flex:none;background:none;border:none;color:var(--tinta-2);width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
}
.aviso-privacidad button:hover{background:rgba(12,39,67,.08);color:var(--tinta);}

/* ---------------- Filtro de categoría (mapa público) ---------------- */
.filtro-mapa{padding:8px 14px;background:var(--az-800);}
.filtro-inner{position:relative;}
.filtro-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--az-900);color:#fff;border:1.5px solid rgba(255,255,255,.35);
  border-radius:var(--r1);padding:11px 14px;font-size:14px;font-weight:700;font-family:inherit;
  min-height:44px;cursor:pointer;
}
.filtro-btn:hover{border-color:#fff;}
.filtro-btn:focus{outline:3px solid rgba(255,255,255,.35);outline-offset:1px;}
.filtro-btn .ic{flex:none;transition:transform .15s;}
.filtro-btn[aria-expanded="true"] .ic{transform:rotate(180deg);}
.filtro-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.filtro-menu{
  position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:100;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);
  box-shadow:var(--sombra-2);overflow:hidden;
}
.filtro-opcion{
  display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:44px;cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--tinta);border-bottom:1px solid var(--linea);user-select:none;
}
.filtro-opcion:last-child{border-bottom:none;}
.filtro-opcion:hover{background:var(--az-050);}
.filtro-opcion-todas{font-weight:800;color:var(--az-800);}
.filtro-opcion input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;
  border:1.5px solid var(--linea-2);border-radius:5px;position:relative;cursor:pointer;margin:0;
}
.filtro-opcion input[type=checkbox]:checked{background:var(--az-600);border-color:var(--az-600);}
.filtro-opcion input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.filtro-opcion input[type=checkbox]:focus-visible{outline:2px solid var(--az-600);outline-offset:2px;}

/* Pantallas grandes: la lista desplegable desperdicia espacio horizontal —
   se reemplaza por una barra de chips (una por categoría) siempre visible. */
.filtro-toolbar{display:none;}
@media(min-width:1024px){
  .filtro-btn,.filtro-menu{display:none;}
  .filtro-toolbar{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;padding:2px 0;
  }
  .filtro-chip{
    display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;min-height:44px;
    background:var(--az-900);color:#fff;border:1.5px solid rgba(255,255,255,.3);
    font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;
    transition:background .12s,border-color .12s,opacity .12s;
  }
  .filtro-chip .ic{flex:none;}
  .filtro-chip:hover{border-color:#fff;}
  .filtro-chip:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .filtro-chip:not(.active){opacity:.55;}
  .filtro-chip.active{background:var(--az-600);border-color:var(--az-600);opacity:1;}
  .filtro-chip-todas{background:transparent;border-style:dashed;}
  .filtro-chip-todas.active{background:var(--az-600);border-style:solid;border-color:var(--az-600);}
}

/* ---------------- Botón flotante "Ver lista" sobre el mapa ---------------- */
.mapa-wrap{position:relative;}
.fab-lista{
  position:absolute;right:16px;bottom:26px;z-index:100;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--az-900);color:#fff;border:none;border-radius:24px;
  padding:12px 18px;font-size:13.5px;font-weight:700;min-height:44px;
  box-shadow:var(--sombra-2);cursor:pointer;
}
.fab-lista:hover{background:var(--az-700);}
@media(min-width:700px){
  .fab-lista{display:none;}
}

/* ---------------- Botón flotante "Donar" (todas las pestañas públicas) ---------------- */
/* Fijo al viewport (no solo al mapa) porque debe verse sin importar la pestaña.
   Va del lado IZQUIERDO, a diferencia de "Ver lista" (derecho), para que nunca
   compitan por el mismo espacio incluso si algún día ambos quedan visibles a la
   vez en la pestaña Mapa — posición y z-index verificados con medidas reales. */
.fab-donar{
  position:fixed;left:16px;bottom:106px;z-index:100;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--verde);color:#fff;border:none;border-radius:24px;
  padding:12px 18px;font-size:13.5px;font-weight:700;min-height:44px;
  box-shadow:var(--sombra-2);cursor:pointer;
}
.fab-donar:hover{background:#145c3f;}

/* ---------------- Pestañas ---------------- */
.tabs{display:flex;background:var(--papel);border-bottom:1px solid var(--linea);overflow-x:auto;position:sticky;top:var(--barra);z-index:19;
  scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:1 0 auto;min-width:96px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--tinta-2);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;
}
.tab:hover{background:var(--az-050);}
.tab.active{color:var(--az-700);border-bottom-color:var(--az-600);background:var(--az-050);}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--rojo);color:#fff;font-size:10.5px;font-weight:800;margin-left:4px;vertical-align:2px;}

/* Menú de administración: antes era un grid de pestañas con ícono que se
   envolvía en varias filas (ocupaba toda la pantalla en celular). Ahora es un
   solo control de una línea que despliega un panel con las 4 categorías como
   encabezados de texto y una lista compacta debajo de cada una — campo sigue
   usando .tabs/.tab tal cual (scroll horizontal, sin este problema). */
.admin-nav{position:sticky;top:var(--barra);z-index:19;background:var(--papel);border-bottom:1px solid var(--linea);}
.admin-nav-toggle{
  display:flex;align-items:center;gap:9px;width:100%;padding:13px 16px;
  background:none;border:none;font:inherit;font-size:14px;font-weight:700;color:var(--tinta-1);
  cursor:pointer;text-align:left;
}
.admin-nav-toggle .ic{flex:none;}
.admin-nav-actual{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-nav-chevron{flex:none;transition:transform .15s ease;}
.admin-nav-toggle[aria-expanded="true"] .admin-nav-chevron{transform:rotate(180deg);}
.admin-nav-panel{
  position:absolute;left:0;right:0;background:var(--papel);border-bottom:1px solid var(--linea);
  box-shadow:0 10px 24px rgba(0,0,0,.14);max-height:min(70vh,560px);overflow-y:auto;z-index:20;
}
.admin-nav-group{padding:6px 0;}
.admin-nav-group + .admin-nav-group{border-top:1px solid var(--linea);}
.admin-nav-group-label{
  display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;font:inherit;text-align:left;
  padding:9px 16px 4px;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--tinta-3);cursor:default;
}
.admin-nav-group-label .ic,.admin-nav-pillar-chevron{display:none;}
.admin-nav-item{display:flex;align-items:center;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;}
.admin-nav-item:hover{background:var(--az-050);}
.admin-nav-item.active{color:var(--az-700);background:var(--az-050);font-weight:800;}
.admin-nav-item-label{flex:1;}

/* Escritorio grande: barra horizontal con 4 pilares + mega-menú desplegable
   por categoría, en vez del control de una línea (que en pantallas anchas
   desperdicia espacio horizontal). Reusa exactamente el mismo DOM que la
   vista de lista simple (celular/tablet) — solo cambia cómo se presenta. */
@media(min-width:1024px){
  .admin-nav-toggle{display:none;}
  .admin-nav-panel{
    position:static;display:flex;align-items:stretch;flex-wrap:wrap;
    max-height:none;overflow:visible;box-shadow:none;border-bottom:none;justify-content:center;
  }
  .admin-nav-group{padding:0;position:relative;}
  .admin-nav-group + .admin-nav-group{border-top:none;}
  .admin-nav-group-label{
    width:auto;padding:14px 16px;font-size:13px;font-weight:800;letter-spacing:.02em;
    color:var(--tinta-2);cursor:pointer;border-radius:var(--r1);
  }
  .admin-nav-group-label .ic{display:inline-flex;color:var(--az-700);}
  .admin-nav-pillar-chevron{display:inline-flex;width:14px;height:14px;transition:transform .15s ease;}
  .admin-nav-group-label:hover,
  .admin-nav-group.open>.admin-nav-group-label,
  .admin-nav-group:focus-within>.admin-nav-group-label{background:var(--az-050);color:var(--az-800);}
  .admin-nav-group:hover>.admin-nav-group-label .admin-nav-pillar-chevron,
  .admin-nav-group.open>.admin-nav-group-label .admin-nav-pillar-chevron,
  .admin-nav-group:focus-within>.admin-nav-group-label .admin-nav-pillar-chevron{transform:rotate(180deg);}
  .admin-nav-group-items{
    display:none;position:absolute;top:100%;left:0;min-width:250px;margin-top:2px;
    background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);
    box-shadow:var(--sombra-2);padding:6px 0;z-index:30;
  }
  .admin-nav-group:hover>.admin-nav-group-items,
  .admin-nav-group.open>.admin-nav-group-items,
  .admin-nav-group:focus-within>.admin-nav-group-items{display:block;}
  .admin-nav-item{padding:10px 16px;}
}

main{padding:16px;}
#vista-admin main{max-width:1180px;margin:0 auto;padding:24px 20px 48px;}
#vista-publica main{padding:0;}
section{display:none;}
section.active{display:block;}
#vista-publica,#vista-campo,#vista-admin{min-height:100vh;}
#vista-campo{padding-bottom:32px;}
#vista-publica{padding-bottom:96px;}

/* ---------------- Tarjetas y tipografía ---------------- */
.card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);padding:18px;margin-bottom:16px;box-shadow:var(--sombra);}
.card h2{
  margin:0 0 14px;font-size:16px;font-weight:800;color:var(--az-800);letter-spacing:.01em;
  display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--linea);
}
.card h2 .ic{color:var(--az-600);}
.hint{font-size:13.5px;line-height:1.5;color:var(--tinta-2);margin:8px 0 0;}
.empty{padding:34px 20px;text-align:center;color:var(--tinta-2);font-size:14.5px;line-height:1.5;background:var(--papel);
  border:1px dashed var(--linea-2);border-radius:var(--r2);}
.etiqueta{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);}

/* ---------------- Formularios ---------------- */
label{display:block;font-size:13px;font-weight:700;color:var(--tinta-2);margin:16px 0 6px;letter-spacing:.01em;}
label:first-child{margin-top:0;}
.req::after{content:" *";color:var(--rojo);}
input[type=text],input[type=number],input[type=date],input[type=url],input[type=password],select,textarea{
  width:100%;padding:13px 12px;border:1.5px solid var(--linea-2);border-radius:var(--r1);font-size:16px;font-family:inherit;
  background:var(--papel);color:var(--tinta);min-height:52px;
}
textarea{min-height:88px;resize:vertical;line-height:1.45;}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(29,90,140,.35);outline-offset:1px;border-color:var(--az-600);}
.campo-error{border-color:var(--rojo)!important;background:var(--rojo-050);}
.campo-error-msg{color:var(--rojo);font-size:12.5px;font-weight:700;margin:-10px 0 12px;}
.chip-group.campo-error{border:1.5px solid var(--rojo);border-radius:var(--r1);padding:8px;background:var(--rojo-050);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
button{font-family:inherit;cursor:pointer;border:none;}
/* auditoría responsive: muchos botones de acción chicos (Confirmar, Asignar,
   Marcar como recibida, etc.) quedaban en ~27px de alto vía padding inline —
   por debajo del tamaño de toque de 44px. Una sola regla en vez de tocar cada
   botón: min-height gana sobre el padding inline sin cambiar su tamaño de
   fuente ni layout, solo agrega el aire vertical que falta. */
#vista-admin button, #vista-campo button{min-height:44px;}

.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip,.chip2{
  display:inline-flex;align-items:center;gap:7px;padding:12px 14px;min-height:52px;
  border:1.5px solid var(--linea-2);border-radius:var(--r1);background:var(--papel);color:var(--tinta-2);
  font-size:14.5px;font-weight:700;cursor:pointer;user-select:none;
}
.chip:hover,.chip2:hover{border-color:var(--az-600);color:var(--az-700);}
.chip.sel,.chip2.sel{background:var(--az-700);border-color:var(--az-700);color:#fff;}
.chip.sel.recibida{background:var(--verde);border-color:var(--verde);}

.btn-primary{
  width:100%;background:var(--az-600);color:#fff;padding:18px;border-radius:var(--r2);font-size:17px;font-weight:800;
  margin-top:18px;min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--sombra);
}
.btn-primary:hover{background:var(--az-700);}
.btn-secondary{
  width:100%;background:var(--papel);color:var(--az-700);border:1.5px solid var(--az-600);padding:16px;border-radius:var(--r2);
  font-size:15.5px;font-weight:800;margin-top:10px;min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn-secondary:hover{background:var(--az-050);}
.btn{
  background:var(--az-600);color:#fff;padding:13px 18px;border-radius:var(--r1);font-size:15px;font-weight:700;margin-top:14px;
  min-height:48px;display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{background:var(--az-700);}
.btn-danger{background:var(--rojo);}
.btn-gps{
  background:var(--papel);border:1.5px solid var(--az-600);color:var(--az-700);padding:12px 14px;border-radius:var(--r1);
  font-size:14px;font-weight:700;white-space:nowrap;min-height:52px;display:inline-flex;align-items:center;gap:8px;
}
.btn-gps:hover{background:var(--az-050);}
.btn-sync,.btn-export{
  width:100%;background:var(--az-600);color:#fff;padding:16px;border-radius:var(--r2);font-size:15.5px;font-weight:800;
  margin-bottom:10px;min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn-sync:hover{background:var(--az-700);}
.btn-export{background:var(--papel);color:var(--az-700);border:1.5px solid var(--az-600);}
.btn-export:hover{background:var(--az-050);}
.btn-mini{
  background:var(--papel);border:1.5px solid var(--linea-2);color:var(--tinta-2);padding:8px 11px;border-radius:var(--r1);
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:40px;
}
.btn-mini:hover{border-color:var(--az-600);color:var(--az-700);}
.btn-mini.peligro{color:var(--rojo);border-color:var(--rojo-linea);}

.gps-box{display:flex;align-items:center;gap:12px;background:var(--az-050);border:1px solid var(--az-100);border-radius:var(--r1);padding:12px;margin-top:8px;}
.gps-box .txt{flex:1;font-size:14px;color:var(--tinta-2);line-height:1.4;}
.warn-dup{
  display:none;gap:9px;align-items:flex-start;background:var(--ambar-050);border:1px solid var(--ambar-linea);border-left:5px solid var(--ambar);
  border-radius:var(--r1);padding:12px;font-size:14px;color:#6B4600;margin-top:14px;line-height:1.45;
}
.warn-dup .ic{color:var(--ambar);flex:none;}
.search{margin-bottom:14px;}

/* ---------------- Estadísticas ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.stat{background:var(--papel);border:1px solid var(--linea);border-top:3px solid var(--az-600);border-radius:var(--r2);padding:14px 12px;text-align:left;box-shadow:var(--sombra);}
.stat .n{font-size:30px;font-weight:800;color:var(--az-800);line-height:1;font-variant-numeric:tabular-nums;}
.stat .l{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);margin-top:7px;line-height:1.3;}
.stat-grid .stat{text-align:center;padding:12px 6px;}
.stat-grid .stat .n{font-size:22px;}
.stat-grid .stat .l{font-size:9.5px;}
.stat.alerta{border-top-color:var(--rojo);background:var(--rojo-050);}
.stat.alerta .n{color:var(--rojo);}
.stat.bien{border-top-color:var(--verde);}
.stat.bien .n{color:var(--verde);}

/* ---------------- Escala de atención (4 niveles) ---------------- */
.nivel{position:relative;background:var(--papel);border:1px solid var(--linea);border-left:6px solid var(--linea-2);border-radius:var(--r2);padding:14px 16px;box-shadow:var(--sombra);}
.nivel .n-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.nivel-0{border-color:var(--rojo-linea);border-left-color:var(--rojo);background:var(--rojo-050);}
.nivel-1{border-color:var(--ambar-linea);border-left-color:var(--ambar);background:var(--ambar-050);}
.nivel-2{border-left-color:var(--az-600);}
.nivel-3{border-left-color:var(--verde);}
.marca-nivel{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r1);border:1px solid var(--linea-2);color:var(--tinta-2);background:var(--papel);white-space:nowrap;
}
.marca-nivel.m0{color:#7C140E;border-color:var(--rojo-linea);background:#F7DEDA;}
.marca-nivel.m1{color:#6B4600;border-color:var(--ambar-linea);background:#F9EACB;}
.marca-nivel.m2{color:var(--az-700);border-color:var(--az-100);background:var(--az-050);}
.marca-nivel.m3{color:var(--verde);border-color:var(--verde-linea);background:var(--verde-050);}
.nivel-0 .li-title{color:#7C140E;font-size:17px;}
.barra-cob{height:6px;border-radius:3px;background:#E3E8ED;overflow:hidden;margin-top:11px;}
.barra-cob i{display:block;height:100%;background:var(--verde);}
.nivel-0 .barra-cob i{background:var(--rojo);}
.nivel-1 .barra-cob i{background:var(--ambar);}

/* ---------------- Registros (app de campo) ---------------- */
.record{background:var(--papel);border:1px solid var(--linea);border-left:6px solid var(--ambar);border-radius:var(--r2);padding:15px;margin-bottom:10px;box-shadow:var(--sombra);}
.record.atendido{border-left-color:var(--verde);}
.record.parcial{border-left-color:var(--az-600);}
.rec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.rec-name{font-weight:800;font-size:16.5px;}
.rec-loc{font-size:14px;color:var(--tinta-2);margin-top:3px;}
.rec-meta{font-size:13px;color:var(--tinta-2);margin-top:10px;display:flex;flex-wrap:wrap;gap:7px;}
.rec-meta span{display:inline-flex;align-items:center;gap:5px;background:var(--fondo);border:1px solid var(--linea);padding:4px 8px;border-radius:var(--r1);}

/* tarjeta de "Solicitud pendiente" — solo nombre/vereda/hace-cuánto visibles
   por defecto; el resto (datos + formulario de atender) aparece al tocar. */
.solicitud-card .solicitud-detalle{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);}
.solicitud-card.expandida .solicitud-detalle{display:block;}
.solicitud-card .rec-top::after{content:"Ver más ▾";font-size:11.5px;font-weight:700;color:var(--az-700);flex:none;align-self:center;}
.solicitud-card.expandida .rec-top::after{content:"Ocultar ▴";}

/* filas de tabla con detalle colapsable — mismo criterio de "ver más" que las
   tarjetas, aplicado a <tr> en vez de <div class="record">. */
.fila-toggle-icono{font-size:11.5px;font-weight:700;color:var(--az-700);white-space:nowrap;}
.fila-detalle{display:none;}
.fila-detalle.mostrar{display:table-row;}
/* el patrón responsive de tablas (#vista-admin tbody tr{display:block}) tiene
   más especificidad que la regla de arriba y la gana en móvil — hay que
   igualar la especificidad acá para que la fila de detalle sí quede oculta
   quieta hasta que se abra. Encontrado con prueba real en 375px: la segunda
   fila de detalle aparecía visible sin haberla tocado. */
@media(max-width:640px){
  #vista-admin .fila-detalle, #vista-campo .fila-detalle{display:none;}
  #vista-admin .fila-detalle.mostrar, #vista-campo .fila-detalle.mostrar{display:block;}
}
.rec-actions{display:flex;gap:9px;margin-top:12px;}
.rec-actions button{flex:1;padding:13px 8px;border-radius:var(--r1);font-size:13.5px;font-weight:700;background:var(--papel);
  border:1.5px solid var(--linea-2);color:var(--tinta-2);min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.rec-actions button:hover{border-color:var(--az-600);color:var(--az-700);}
.rec-actions button.del{color:var(--rojo);border-color:var(--rojo-linea);}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r1);border:1px solid var(--linea-2);color:var(--tinta-2);background:var(--papel);white-space:nowrap;}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.badge.pendiente,.badge.warn{color:#6B4600;border-color:var(--ambar-linea);background:var(--ambar-050);}
.badge.parcial{color:var(--az-700);border-color:var(--az-100);background:var(--az-050);}
.badge.atendido,.badge.ok{color:var(--verde);border-color:var(--verde-linea);background:var(--verde-050);}
.badge.alert{color:var(--rojo);border-color:var(--rojo-linea);background:var(--rojo-050);}
.sync-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 9px;border-radius:var(--r1);margin-top:10px;border:1px solid var(--linea);}
.sync-tag.ok{background:var(--verde-050);color:var(--verde);border-color:var(--verde-linea);}
.sync-tag.pend{background:var(--ambar-050);color:#6B4600;border-color:var(--ambar-linea);}

/* ---------------- Listado compacto (para ESCANEAR/COMPARAR muchos
   registros a la vez — inventario, usuarios y roles, centros, veredas,
   líneas de emergencia: una fila = un vistazo, nunca una tarjeta de campos
   apilados. Objetivo: 60-70px por fila. Los listados de registro con muchos
   campos secundarios y poca necesidad de comparar (Registros de campo,
   Donaciones) NO usan esto — siguen con .record + Ver más. ---------------- */
.lista-compacta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);overflow:hidden;}
.lista-compacta-header{
  padding:9px 14px 5px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);background:var(--fondo);border-top:1px solid var(--linea);
}
.lista-compacta-header:first-child{border-top:none;}
.fila-compacta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-top:1px solid var(--linea);min-height:44px;cursor:pointer;
}
.lista-compacta-header + .fila-compacta{border-top:none;}
.fila-compacta:hover{background:var(--az-050);}
.fila-compacta-info{min-width:0;flex:1;}
.fila-compacta-nombre{font-weight:700;font-size:14px;color:var(--tinta);overflow-wrap:anywhere;}
.fila-compacta-sub{font-size:12px;color:var(--tinta-3);margin-top:2px;overflow-wrap:anywhere;}
.fila-compacta-derecha{flex:none;display:flex;align-items:center;gap:8px;}
.fila-compacta-etiqueta{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:2px 7px;border-radius:20px;
  border:1px solid var(--linea-2);color:var(--tinta-2);white-space:nowrap;vertical-align:2px;margin-left:2px;
}
.fila-compacta-etiqueta.az{color:var(--az-700);border-color:var(--az-100);background:var(--az-050);}
.fila-compacta-etiqueta.verde{color:var(--verde);border-color:var(--verde-linea);background:var(--verde-050);}
.fila-compacta-etiqueta.ambar{color:#6B4600;border-color:var(--ambar-linea);background:var(--ambar-050);}
.fila-compacta-etiqueta.rojo{color:var(--rojo);border-color:var(--rojo-linea);background:var(--rojo-050);}
.punto-estado{width:9px;height:9px;border-radius:50%;flex:none;background:var(--linea-2);}
.punto-estado.ok{background:var(--verde);}
.punto-estado.warn{background:#C9891A;}
.punto-estado.alert{background:var(--rojo);}
.fila-compacta-chevron{flex:none;color:var(--tinta-3);transition:transform .15s ease;}
.fila-compacta.abierta .fila-compacta-chevron{transform:rotate(180deg);}
.fila-compacta-panel{display:none;padding:0 14px 14px;border-top:1px solid var(--linea);background:var(--fondo);}
.fila-compacta-panel.abierta{display:block;}
.fila-compacta-vacio{padding:26px 16px;text-align:center;color:var(--tinta-3);font-size:13.5px;}

/* ---------------- Gráfico de cobertura (Chart.js) ---------------- */
.grafico-cobertura-wrap{position:relative;width:100%;max-height:480px;overflow-y:auto;overflow-x:hidden;}

/* ---------------- Tablas (coordinación) ---------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r2);}
table{width:100%;border-collapse:collapse;background:var(--papel);font-size:14.5px;}
th{background:var(--az-900);color:#fff;text-align:left;padding:12px 14px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;}
td{padding:13px 14px;border-bottom:1px solid var(--linea);vertical-align:middle;}
tbody tr:nth-child(even){background:#FAFBFC;}
tbody tr:hover{background:var(--az-050);}
tr:last-child td{border-bottom:none;}
tr.fila-n0 td{background:var(--rojo-050);}
tr.fila-n0 td:first-child{box-shadow:inset 5px 0 0 var(--rojo);font-weight:800;color:#7C140E;}
tr.fila-n1 td:first-child{box-shadow:inset 5px 0 0 var(--ambar);}
tr.fila-n2 td:first-child{box-shadow:inset 5px 0 0 var(--az-600);}
tr.fila-n3 td:first-child{box-shadow:inset 5px 0 0 var(--verde);}
tr.fila-sinverificar td{background:var(--ambar-050);}
tr.fila-sinverificar td:first-child{box-shadow:inset 5px 0 0 var(--ambar);font-weight:800;color:#6B4600;}
td select{min-height:44px;font-size:14px;padding:8px 10px;width:auto;}

/* ---------------- Vista pública ---------------- */
#map{height:320px;width:100%;background:#E6E9EC;}
.legend{background:var(--papel);padding:11px 14px;font-size:13px;color:var(--tinta-2);display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--linea);scroll-margin-top:calc(var(--barra) + 12px);}
.legend span{display:flex;align-items:center;gap:6px;}
.dotleg{width:10px;height:10px;border-radius:50%;flex:none;}
.list-item{background:var(--papel);padding:16px;border-bottom:1px solid var(--linea);}
.tags-row{display:flex;gap:7px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r1);background:var(--fondo);border:1px solid var(--linea-2);color:var(--tinta-2);}
.tag.tipo{background:var(--az-050);border-color:var(--az-100);color:var(--az-700);}
.tag.ver,.tag.estado-abierto{background:var(--verde-050);border-color:var(--verde-linea);color:var(--verde);}
.tag.sinver{background:var(--ambar-050);border-color:var(--ambar-linea);color:#6B4600;}
.tag.estado-cerrado{background:var(--fondo);color:var(--tinta-2);}
.tag.estado-saturado{background:var(--rojo-050);border-color:var(--rojo-linea);color:var(--rojo);}
.li-title{font-weight:800;font-size:16.5px;line-height:1.25;margin-bottom:3px;}
.li-sub{font-size:14px;color:var(--tinta-2);line-height:1.45;}
.li-right{float:right;text-align:right;font-size:12.5px;color:var(--tinta-2);margin-left:10px;}
#vista-publica .card{margin:16px;}
.emerg-item{background:var(--papel);margin:12px 16px;border:1px solid var(--linea);border-radius:var(--r2);padding:16px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--sombra);}
.emerg-item a{background:var(--az-600);color:#fff;text-decoration:none;font-weight:800;font-size:15px;padding:14px 18px;border-radius:var(--r1);
  display:inline-flex;align-items:center;gap:8px;min-height:52px;white-space:nowrap;}
.emerg-item a:hover{background:var(--az-700);color:#fff;}
.vereda-card{background:var(--papel);margin:12px 16px;border:1px solid var(--linea);border-left:6px solid var(--linea-2);border-radius:var(--r2);
  padding:15px 16px;box-shadow:var(--sombra);}
.vereda-card.critica{border-color:var(--rojo-linea);border-left-color:var(--rojo);background:var(--rojo-050);}
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:var(--az-900);display:flex;z-index:30;border-top:3px solid var(--az-600);}
.navbtn{flex:1;text-align:center;padding:9px 4px 10px;color:#9FB2C4;font-size:11.5px;font-weight:700;cursor:pointer;min-height:62px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-top:3px solid transparent;margin-top:-3px;
  overflow-wrap:anywhere;line-height:1.2;}
.navbtn:hover{color:#fff;}
.navbtn.active{color:#fff;border-top-color:#fff;background:rgba(255,255,255,.07);}
.navbtn .ic{width:23px;height:23px;}
.pie-legal{text-align:center;padding:20px 22px 28px;font-size:12.5px;line-height:1.55;color:var(--tinta-2);}
#btnPrivacidad{text-decoration:underline;cursor:pointer;display:inline-block;margin-top:6px;font-weight:700;color:var(--az-600);}
#btnPrivacidad:hover{color:var(--az-800);}

/* ---------------- Selector táctil de voluntario ---------------- */
#personaOverlay{display:none;position:fixed;inset:0;background:var(--fondo);z-index:260;padding:26px 18px 40px;overflow-y:auto;}
#personaOverlay .caja{max-width:460px;margin:16px auto 0;}
#personaOverlay h1{font-size:22px;color:var(--az-800);margin:0 0 6px;text-align:center;font-weight:800;}
#listaVoluntarios{display:flex;flex-direction:column;gap:12px;}
#listaVoluntarios button{
  width:100%;background:var(--papel);border:2px solid var(--linea-2);color:var(--tinta);padding:20px 18px;border-radius:var(--r2);
  font-size:18px;font-weight:800;text-align:left;min-height:68px;box-shadow:var(--sombra);display:flex;align-items:center;gap:12px;
}
#listaVoluntarios button:hover{border-color:var(--az-600);background:var(--az-050);}

/* ---------------- Modal de información de marcador (mapa) ---------------- */
.marcador-overlay{
  display:none;position:fixed;inset:0;z-index:265;background:rgba(12,39,67,.55);
  align-items:flex-end;justify-content:center;
}
.marcador-overlay.show{display:flex;}
.marcador-tarjeta{
  position:relative;background:var(--papel);width:100%;max-width:480px;
  border-radius:var(--r3) var(--r3) 0 0;padding:24px 22px 28px;
  max-height:80vh;overflow-y:auto;box-shadow:var(--sombra-2);
  animation:marcadorSubir .18s ease-out;
}
@keyframes marcadorSubir{from{transform:translateY(24px);opacity:0;} to{transform:translateY(0);opacity:1;}}
.marcador-cerrar{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:var(--fondo);color:var(--tinta-2);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);
}
.marcador-cerrar:hover{background:var(--linea);color:var(--tinta);}
.marcador-tipo{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;
}
.marcador-tipo-punto{background:var(--az-050);color:var(--az-700);}
.marcador-tipo-centro{background:var(--az-900);color:#fff;}
.marcador-tipo-necesidad{background:#F7DEDA;color:#7C140E;}
#marcadorContenido .li-title{font-size:18px;margin:10px 0 8px;}
#marcadorContenido .tags-row{margin-bottom:10px;}
@media(min-width:700px){
  .marcador-overlay{align-items:center;padding:20px;}
  .marcador-tarjeta{border-radius:var(--r3);max-height:85vh;}
}

/* ---------------- Acceso ---------------- */
#loginOverlayGlobal{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:rgba(12,39,67,.88);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#loginOverlayGlobal .caja{position:relative;z-index:1;background:var(--papel);background-color:#FFFFFF;opacity:1;border-radius:var(--r3);padding:26px 24px 24px;max-width:400px;width:100%;margin:auto;box-shadow:var(--sombra-2);border-top:5px solid var(--az-600);}
html[data-contraste="1"] #loginOverlayGlobal .caja{border:2px solid #000;border-top:5px solid var(--az-600);}
/* el mapa y sus controles nunca deben pintarse sobre el modal:
   isolation:isolate ya basta (crea un contexto de apilamiento propio para #map,
   así que ningún z-index interno de Leaflet —tiles/marcadores/popups— puede escapar
   por encima de hermanos de #map como los modales). Forzar z-index:auto en los panes
   de Leaflet además rompía su jerarquía interna (tile < marker < popup) y hacía que
   los tiles nuevos, cargados durante la animación de zoom, taparan momentáneamente
   los marcadores — por eso NO se debe repetir ese override. */
#map{position:relative;z-index:0;isolation:isolate;}
body.modal-abierto{overflow:hidden;}
#loginOverlayGlobal h2{margin:14px 0 4px;font-size:21px;color:var(--az-800);font-weight:800;}
#loginOverlayGlobal p.sub{margin:0 0 14px;font-size:14px;color:var(--tinta-2);line-height:1.45;}
#loginOverlayGlobal .btn-login{width:100%;background:var(--az-600);color:#fff;padding:16px;border-radius:var(--r2);font-size:16px;font-weight:800;margin-top:18px;min-height:56px;}
#loginOverlayGlobal .btn-login:hover{background:var(--az-700);}
#loginOverlayGlobal .btn-cancelar{width:100%;background:none;color:var(--tinta-2);padding:12px;font-size:14px;font-weight:700;margin-top:6px;min-height:44px;}
#loginOverlayGlobal .btn-cancelar:hover{color:var(--tinta);}
#loginMsgGlobal{font-size:13.5px;color:var(--rojo);margin:12px 0 0;text-align:center;line-height:1.4;}

/* ---------------- Avisos flotantes ---------------- */
.toast{
  position:fixed;bottom:20px;left:16px;right:16px;max-width:440px;margin:0 auto;background:var(--az-900);color:#fff;
  padding:15px 16px;border-radius:var(--r2);font-size:14.5px;line-height:1.4;z-index:400;box-shadow:var(--sombra-2);
  transform:translateY(120px);opacity:0;transition:.22s;display:flex;align-items:center;gap:10px;text-align:left;border-left:5px solid var(--az-600);
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok{border-left-color:#3FA97B;} .toast.warn{border-left-color:#E3A93C;} .toast.error{border-left-color:#E0645A;}
.toast .ic{flex:none;}
#vista-publica .toast{bottom:84px;}

.code-box{background:#0C2743;color:#D7E2ED;font-family:ui-monospace,monospace;font-size:12.5px;padding:12px;border-radius:var(--r1);overflow-x:auto;white-space:pre;margin-top:10px;}

/* ---------------- Responsive ---------------- */
/* presupuesto móvil: barra(52) + membrete-slim(~38) + filtro-mapa(~60) + bottomnav(~65) */
#map{height:calc(100dvh - 215px);min-height:280px;}
.table-wrap{-webkit-overflow-scrolling:touch;}
.card h2,.li-title,.rec-name{overflow-wrap:anywhere;}
img,svg,video{max-width:100%;}

@media(max-width:420px){
  main{padding:12px;}
  #vista-publica .card,.emerg-item,.vereda-card{margin-left:12px;margin-right:12px;}
  .card{padding:15px 14px;}
  .row2{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid .stat .n{font-size:24px;}
  .stat-grid .stat .l{font-size:10px;}
  .emerg-item{flex-direction:column;align-items:stretch;}
  .emerg-item a{justify-content:center;}
  .gps-box{flex-direction:column;align-items:stretch;}
  .btn-gps{white-space:normal;justify-content:center;text-align:center;}
  .rec-actions{flex-wrap:wrap;}
  .rec-actions button{flex:1 1 45%;}
  .chip,.chip2{font-size:14px;padding:11px 12px;}
  .btn-primary{font-size:16px;padding:16px;}
  .navbtn{font-size:10.5px;}
  #barraGlobal .marca{font-size:12.5px;letter-spacing:.03em;}
  .aviso-privacidad{font-size:12px;}
  .legend{gap:10px;font-size:12px;}
  th,td{padding:11px 10px;}
}
@media(max-width:340px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  #barraGlobal .marca h1.nombre{display:none;}
  .chip-group{gap:6px;}
}

/* ---------------- Tablas del panel admin (y del panel campo) -> tarjetas apiladas en celular ---------------- */
/* Cada <td> necesita data-label="Nombre de columna" (vacío para columnas de solo
   acción); el <thead> se oculta visualmente pero sigue accesible para lectores
   de pantalla, en vez de desaparecer del todo. */
@media(max-width:640px){
  #vista-admin table, #vista-campo table{border:none;background:transparent;display:block;width:100%;}
  #vista-admin tbody, #vista-campo tbody{display:block;}
  #vista-admin .table-wrap, #vista-campo .table-wrap{border:none;overflow-x:visible;}
  #vista-admin thead, #vista-campo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  #vista-admin tbody tr, #vista-campo tbody tr{
    display:block;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);
    padding:4px 14px;margin-bottom:12px;box-shadow:var(--sombra);
  }
  #vista-admin tbody tr:last-child, #vista-campo tbody tr:last-child{margin-bottom:0;}
  #vista-admin td, #vista-campo td{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;
    padding:11px 0;border-bottom:1px solid var(--linea);text-align:right;white-space:normal;
  }
  #vista-admin td:last-child, #vista-campo td:last-child{border-bottom:none;}
  #vista-admin td::before, #vista-campo td::before{
    content:attr(data-label);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--tinta-3);text-align:left;flex:none;
  }
}

@media(min-width:700px){
  #map{height:min(56vh,460px);}
  .stat-grid{grid-template-columns:repeat(4,1fr);}
}
@media(min-width:860px){
  .membrete{padding:22px 26px;}
  #vista-campo main,#vista-publica main{max-width:760px;margin:0 auto;}
  .stat-grid .stat .n{font-size:26px;}
  .filtro-inner{max-width:760px;margin:0 auto;}
  .bottomnav{padding:0 max(0px,calc((100% - 760px)/2));}
  #vista-publica .card,.emerg-item,.vereda-card{margin-left:auto;margin-right:auto;max-width:760px;}
  #map{border-bottom:1px solid var(--linea);}
}
@media(min-width:1100px){
  #vista-publica main,#vista-campo main{max-width:820px;}
}