/* ============================================================================
   Ayuda Pereira — sistema visual
   Paleta: negro, blanco y verde. El rojo se reserva EXCLUSIVAMENTE para
   riesgo de vida (linea 123, urgencia critica); si todo fuera verde, lo
   urgente dejaria de distinguirse de un vistazo.
   Claro por defecto (se lee bajo el sol, que es donde esta la gente),
   oscuro automatico de noche para ahorrar bateria.
   ========================================================================== */

:root {
  /* verde-600 es el primario. Se oscurecio a proposito hasta 5.4:1 sobre blanco:
     con #0a8a53 el texto blanco encima daba 4.39:1 y no pasaba AA. */
  --verde-900:#053021; --verde-700:#05603b; --verde-600:#087a49;
  --verde-500:#0f9a5f; --verde-100:#dff3e8; --verde-050:#f1faf5;
  --btn-txt:#ffffff;

  --tinta:#0b0f0e; --tinta-70:#3d4744; --tinta-50:#6b7671;
  --papel:#ffffff; --papel-2:#f6f8f7; --papel-3:#eef2f0;
  --linea:#e2e8e5; --linea-fuerte:#cfd8d3;

  --peligro:#c62828; --peligro-bg:#fdecec; --peligro-txt:#8e1c1c;
  --ambar:#b26a00;  --ambar-bg:#fff4e5;  --ambar-txt:#7a4a00;
  --info-bg:#eef4fb; --info-linea:#c7dbf2; --info-txt:#1c4b7d;

  --r-s:10px; --r-m:14px; --r-l:20px;
  --sombra:0 1px 2px rgba(11,15,14,.05), 0 4px 14px rgba(11,15,14,.06);
  --sombra-alta:0 8px 30px rgba(11,15,14,.14);
  --nav-alto:64px;
  --trans:.18s cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:#eaf2ee; --tinta-70:#b3c2bc; --tinta-50:#8a9a94;
    --papel:#0b0f0e; --papel-2:#131a18; --papel-3:#1b2422;
    --linea:#26302c; --linea-fuerte:#39443f;
    /* En oscuro el verde se aclara para leerse sobre negro, asi que el texto
       que va ENCIMA del verde tiene que volverse oscuro (blanco daria 2.6:1). */
    --verde-700:#3ecb87; --verde-600:#2bb673; --verde-500:#3ecb87;
    --btn-txt:#042315;
    --verde-100:#123526; --verde-050:#0f231b;
    --peligro:#ff6b6b; --peligro-bg:#2a1414; --peligro-txt:#ffb3b3;
    --ambar:#f0a93b;  --ambar-bg:#2a2010;  --ambar-txt:#ffd28a;
    --info-bg:#101c28; --info-linea:#1e3a52; --info-txt:#9ec9f0;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --sombra-alta:0 8px 30px rgba(0,0,0,.5);
  }
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body {
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px) + 16px);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--verde-600); text-decoration:none }
img { max-width:100% }
.contenedor { max-width:880px; margin:0 auto; padding:20px 16px }

/* ---------------------------------------------------------------- cabecera */
.franja-emergencia {
  background:var(--peligro); color:#fff; text-align:center;
  padding:9px 14px; font-size:13.5px; font-weight:600; letter-spacing:.15px;
}
.franja-emergencia a { color:#fff; text-decoration:underline; font-weight:800 }

header.top {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
}
header.top .fila { max-width:880px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px }
header.top .marca { font-weight:800; font-size:17px; letter-spacing:-.2px; display:flex; align-items:center; gap:9px }
header.top .marca .punto {
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--verde-500),var(--verde-700));
  display:grid; place-items:center; color:#fff; font-size:15px; font-weight:900;
}
header.top .marca span { color:var(--verde-600) }
header.top .volver {
  color:var(--tinta); font-size:14px; font-weight:600; padding:8px 13px;
  border:1px solid var(--linea); border-radius:999px; background:var(--papel-2);
  transition:var(--trans);
}
header.top .volver:active { background:var(--papel-3) }

/* ------------------------------------------------------------- tipografia */
h1 { font-size:clamp(24px,6vw,31px); line-height:1.15; letter-spacing:-.6px; margin:20px 0 8px; font-weight:800 }
h2 { font-size:19px; line-height:1.25; letter-spacing:-.3px; margin:30px 0 12px; font-weight:750 }
h3 { font-size:16.5px; margin:0 0 8px; font-weight:700 }
.sub { color:var(--tinta-50); margin:0 0 20px; font-size:15px }
.meta { color:var(--tinta-50); font-size:13.5px; line-height:1.5; margin-top:4px }

/* ------------------------------------------------------------ menu inicio */
.menu { display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:640px) { .menu { grid-template-columns:1fr 1fr } }

.opcion {
  display:flex; gap:14px; align-items:center; color:var(--tinta);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-m);
  padding:17px 16px; min-height:86px; box-shadow:var(--sombra);
  transition:var(--trans); position:relative; overflow:hidden;
}
.opcion::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--verde-500); transform:scaleY(0); transform-origin:center; transition:var(--trans);
}
.opcion:active { transform:scale(.985); background:var(--papel-2) }
.opcion:active::after { transform:scaleY(1) }
.opcion .ico {
  width:46px; height:46px; flex:0 0 auto; border-radius:13px;
  background:var(--verde-050); color:var(--verde-600);
  display:grid; place-items:center;
}
.opcion .ico svg { width:24px; height:24px }
.opcion b { display:block; font-size:16px; font-weight:700; margin-bottom:2px; letter-spacing:-.2px }
.opcion small { color:var(--tinta-50); font-size:13px; line-height:1.4; display:block }
.opcion.destacada { border-color:var(--peligro); background:var(--peligro-bg) }
.opcion.destacada .ico { background:var(--peligro); color:#fff }
.opcion.destacada b { color:var(--peligro-txt) }
.opcion.destacada small { color:var(--peligro-txt); opacity:.85 }

/* --------------------------------------------------------------- tarjetas */
.tarjeta {
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-m);
  padding:18px 16px; margin-bottom:14px; box-shadow:var(--sombra);
}

/* ------------------------------------------------------------ formularios */
label { display:block; font-weight:650; margin:18px 0 7px; font-size:14.5px; letter-spacing:-.1px }
label .op { font-weight:400; color:var(--tinta-50); font-size:13px }

input,select,textarea {
  width:100%; padding:14px; font-size:16px; font-family:inherit;
  color:var(--tinta); background:var(--papel-2);
  border:1.5px solid var(--linea); border-radius:var(--r-s);
  transition:var(--trans); appearance:none;
}
input:hover,select:hover,textarea:hover { border-color:var(--linea-fuerte) }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--verde-600); background:var(--papel);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--verde-500) 18%, transparent);
}
textarea { min-height:96px; resize:vertical; line-height:1.55 }
select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7671' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:19px; padding-right:42px;
}
.fila2 { display:grid; gap:12px; grid-template-columns:1fr 1fr }
.fila3 { display:grid; gap:10px; grid-template-columns:repeat(3,1fr) }

fieldset {
  border:1px solid var(--linea); border-radius:var(--r-m);
  padding:4px 16px 18px; margin:20px 0; background:var(--papel);
}
legend { font-weight:750; padding:0 8px; font-size:14px; color:var(--verde-700); letter-spacing:.2px; text-transform:uppercase }
@media (prefers-color-scheme: dark) { legend { color:var(--verde-500) } }

/* ------------------------------------------------------------------ chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chip { position:relative }
.chip input { position:absolute; opacity:0; width:1px; height:1px }
.chip span {
  display:block; padding:11px 15px; border:1.5px solid var(--linea);
  border-radius:999px; background:var(--papel-2); font-size:14.5px;
  font-weight:550; cursor:pointer; user-select:none; transition:var(--trans);
}
.chip span:active { transform:scale(.96) }
.chip input:checked + span {
  background:var(--verde-600); border-color:var(--verde-600); color:var(--btn-txt); font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--verde-600) 35%, transparent);
}
.chip input:focus-visible + span { outline:2px solid var(--verde-600); outline-offset:2px }

/* ---------------------------------------------------------------- botones */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; font-size:16px; font-weight:700; font-family:inherit;
  background:var(--verde-600); color:var(--btn-txt); border:1.5px solid transparent;
  border-radius:var(--r-s); cursor:pointer; margin-top:20px; letter-spacing:-.1px;
  transition:var(--trans); text-align:center;
}
.btn:hover { background:var(--verde-700) }
.btn:active { transform:scale(.985) }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none }
.btn.sec { background:var(--papel-2); color:var(--tinta); border-color:var(--linea) }
.btn.sec:hover { background:var(--papel-3); border-color:var(--linea-fuerte) }
.btn.peligro { background:var(--peligro); color:#fff }
.btn.peligro:hover { filter:brightness(.92) }
.btn.ok { background:var(--verde-500); color:var(--btn-txt) }
.btn.chico { padding:11px 14px; font-size:14.5px; margin-top:9px }
.btn-fila { display:grid; gap:8px; grid-template-columns:1fr 1fr; margin-top:9px }

/* ---------------------------------------------------------------- avisos */
.aviso {
  padding:13px 15px; border-radius:var(--r-s); margin:16px 0;
  font-size:14.5px; line-height:1.55; border:1px solid; border-left-width:4px;
}
.aviso.info   { background:var(--info-bg);    border-color:var(--info-linea); color:var(--info-txt) }
.aviso.exito  { background:var(--verde-050);  border-color:var(--verde-500);  color:var(--verde-700) }
.aviso.error  { background:var(--peligro-bg); border-color:var(--peligro);    color:var(--peligro-txt) }
.aviso.alerta { background:var(--ambar-bg);   border-color:var(--ambar);      color:var(--ambar-txt) }
@media (prefers-color-scheme: dark) { .aviso.exito { color:var(--verde-500) } }
.oculto { display:none !important }

.folio {
  font-size:clamp(28px,9vw,40px); font-weight:900; letter-spacing:4px; text-align:center;
  background:var(--verde-050); border:2px dashed var(--verde-500); color:var(--verde-700);
  border-radius:var(--r-m); padding:22px 12px; margin:16px 0; font-variant-numeric:tabular-nums;
}
@media (prefers-color-scheme: dark) { .folio { color:var(--verde-500) } }

/* --------------------------------------------------------------- listados */
.registro {
  background:var(--papel); border:1px solid var(--linea); border-left:4px solid var(--linea-fuerte);
  border-radius:var(--r-s); padding:14px; margin-bottom:10px; box-shadow:var(--sombra);
  transition:var(--trans);
}
.registro.critica { border-left-color:var(--peligro) }
.registro.alta    { border-left-color:var(--ambar) }
.registro.media   { border-left-color:var(--verde-500) }
.registro.baja    { border-left-color:var(--linea-fuerte) }
.registro .cab { display:flex; justify-content:space-between; gap:10px; align-items:flex-start }
.registro .cab b { font-size:15.5px; font-weight:700; letter-spacing:-.2px }

.etq {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px;
  font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  background:var(--papel-3); border:1px solid var(--linea); color:var(--tinta-70);
  margin:4px 4px 0 0; white-space:nowrap;
}
.etq.critica { background:var(--peligro); color:#fff; border-color:var(--peligro) }
.etq.alta    { background:var(--ambar);   color:#fff; border-color:var(--ambar) }
.etq.entregada,.etq.publicado,.etq.activo { background:var(--verde-600); color:var(--btn-txt); border-color:var(--verde-600) }
.etq.pendiente { background:var(--ambar-bg); border-color:var(--ambar); color:var(--ambar-txt) }

.tarjeta-persona { display:flex; gap:13px }
.tarjeta-persona img {
  width:84px; height:84px; object-fit:cover; border-radius:var(--r-s);
  background:var(--papel-3); flex:0 0 auto; border:1px solid var(--linea);
}

/* ---------------------------------------------------------- estadisticas */
.stats { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin:18px 0 }
@media (min-width:640px) { .stats { grid-template-columns:repeat(4,1fr) } }
.stat {
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-m);
  padding:15px 12px; text-align:center; box-shadow:var(--sombra);
}
.stat b {
  display:block; font-size:27px; line-height:1.1; font-weight:800;
  letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--verde-600);
}
.stat small { color:var(--tinta-50); font-size:12px; line-height:1.35; display:block; margin-top:4px }
.stat.rojo b  { color:var(--peligro) }
.stat.verde b { color:var(--verde-600) }
.stat.ambar b { color:var(--ambar) }

/* -------------------------------------------------------------- pestanas */
.tabs {
  display:flex; gap:7px; overflow-x:auto; padding:4px 0 8px; margin:16px 0;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none }
.tab {
  white-space:nowrap; padding:10px 16px; border-radius:999px;
  background:var(--papel-2); border:1.5px solid var(--linea); cursor:pointer;
  font-size:14px; font-weight:600; color:var(--tinta-70); font-family:inherit;
  transition:var(--trans);
}
.tab:active { transform:scale(.96) }
.tab.activa { background:var(--tinta); border-color:var(--tinta); color:var(--papel); font-weight:700 }

/* ------------------------------------------------------------------ mapa */
#mapa {
  height:min(56vh,440px); border-radius:var(--r-m);
  border:1px solid var(--linea); background:var(--papel-2); box-shadow:var(--sombra);
}
.leaflet-popup-content { font-size:14px; line-height:1.5 }

.leyenda { display:flex; flex-wrap:wrap; gap:7px 12px; margin:12px 0 4px }
.leyenda .ley { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta-70) }
.leyenda .ley i {
  width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--papel); box-shadow:0 0 0 1px var(--linea-fuerte);
}
.leyenda .ley i.ley-aprox {
  background:var(--papel); border:2px dashed var(--tinta-50); box-shadow:none;
}

/* ------------------------------------------------- barra de red / navegacion */
#barra-red {
  position:fixed; left:0; right:0;
  bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px));
  z-index:70; display:none; padding:10px 14px; text-align:center;
  font-weight:650; font-size:13.5px; background:var(--ambar); color:#241800;
}
#barra-red.activa { display:block }

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--nav-alto); color:var(--tinta-50); font-size:10.5px; font-weight:650;
  letter-spacing:.1px; transition:var(--trans); position:relative; text-align:center;
}
.tabbar a svg { width:22px; height:22px; stroke-width:1.9 }
.tabbar a.activa { color:var(--verde-600) }
.tabbar a.activa::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--verde-600);
}
.tabbar a:active { background:var(--papel-2) }

/* -------------------------------------------------------------- utilidades */
footer { color:var(--tinta-50); font-size:12.5px; text-align:center; padding:28px 16px 10px; line-height:1.6 }
.cargando { text-align:center; color:var(--tinta-50); padding:28px 16px; font-size:14.5px }

.esqueleto { display:grid; gap:10px }
.esqueleto i {
  display:block; height:74px; border-radius:var(--r-s);
  background:linear-gradient(90deg,var(--papel-2) 25%,var(--papel-3) 37%,var(--papel-2) 63%);
  background-size:400% 100%; animation:brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { from { background-position:100% 0 } to { background-position:0 0 } }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
  html { scroll-behavior:auto }
}