:root {
  --bg: rgba(13, 17, 25, 0.92);
  --bg-solid: #0d1119;
  --fg: #e9edf3;
  --fg-dim: #9aa7b8;
  --line: #2c3648;
  --accent: #4ea1ff;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg-solid); color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
#map { position: fixed; inset: 0; }

/* ── Cabecera ─────────────────────────────────────────────── */
#hdr {
  position: fixed; top: calc(8px + var(--sat)); left: 8px; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 10px; backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  max-width: min(78vw, 340px);
}
#hdr-back {
  color: var(--fg); text-decoration: none; font-size: 19px; line-height: 1;
  padding: 6px 8px; border-radius: 8px; flex: none;
}
#hdr-back:active, #btn-about:active { background: #2b3648; }
#hdr-txt h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: 0.2px; }
#hdr-txt p { margin: 1px 0 0; font-size: 11px; color: var(--fg-dim); }
#btn-about {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: #1b2331; color: var(--fg-dim);
  font-size: 13px; font-style: italic; font-family: Georgia, serif; cursor: pointer;
}
#btn-ig {
  flex: none; height: 32px; min-width: 32px; padding: 0 8px; border-radius: 999px;
  border: 0; color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 28% 110%, #feda75 0%, #fa7e1e 28%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 2px 8px rgba(214, 41, 118, 0.45);
}
#btn-ig:hover { filter: brightness(1.12); }
#btn-ig .ig-txt { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; }
@media (max-width: 767px) {
  #btn-ig { padding: 0; width: 32px; }
  #btn-ig .ig-txt { display: none; }
}

/* ── Buscador superior ────────────────────────────────────── */
#search {
  position: fixed; z-index: 22;
  top: calc(64px + var(--sat)); left: 8px; right: 8px;
}
@media (min-width: 768px) {
  #search {
    top: calc(10px + var(--sat)); left: 50%; right: auto;
    transform: translateX(-50%); width: min(46vw, 420px);
  }
}
#q {
  /* 16px mínimo: con menos, iOS/Android hacen zoom de página al enfocar el
     campo y dejan la interfaz recortada (se pierde el botón de capas). */
  width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 16px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  outline: none;
}
#q:focus { border-color: var(--accent); }
#q-res {
  list-style: none; margin: 6px 0 0; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(10px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  max-height: 46vh; overflow: auto;
}
#q-res li {
  padding: 9px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer;
  display: flex; gap: 8px; align-items: baseline;
}
#q-res li:hover, #q-res li:active { background: #223047; }
#q-res .sub { display: block; font-size: 11px; color: var(--fg-dim); }
#q-res .grp {
  padding: 6px 8px 2px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--fg-dim); cursor: default;
}
#q-res .grp:hover { background: none; }

/* ── FAB capas + panel ────────────────────────────────────── */
#btn-layers {
  position: fixed; top: calc(8px + var(--sat)); right: 8px; z-index: 20;
  width: 44px; height: 44px; border-radius: 12px; font-size: 20px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
#layers {
  position: fixed; top: calc(58px + var(--sat)); right: 8px; z-index: 25;
  width: min(86vw, 300px); max-height: 62vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px 14px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
#layers h2 { margin: 8px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--fg-dim); }
#layers h2:first-child { margin-top: 0; }
.sw { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14px; cursor: pointer; }
.sw small { color: var(--fg-dim); }
.sw input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
#q {
  width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--line); background: #161d2a; color: var(--fg);
}
#q-res { list-style: none; margin: 6px 0 0; padding: 0; }
#q-res li {
  padding: 8px 6px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid #1d2534;
}
#q-res li:hover, #q-res li:active { background: #223047; }
#q-res .sub { display: block; font-size: 11px; color: var(--fg-dim); }
#load-state { font-size: 11px; color: var(--fg-dim); margin: 10px 0 0; }

/* ── Chips de zonas ───────────────────────────────────────── */
#zonas {
  position: fixed; left: 0; right: 0; bottom: calc(10px + var(--sab)); z-index: 15;
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  justify-content: safe center;
}
#zonas::-webkit-scrollbar { display: none; }
#zonas button {
  flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
#zonas button:active { background: #2b3648; }
#zonas .zonas-div {
  flex: none; align-self: center; padding: 0 4px 0 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: #cfe0f2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ── Etiquetas de parroquia ───────────────────────────────── */
.pq-label {
  background: rgba(13, 17, 25, 0.72); color: #cfe0f2;
  border: 1px solid rgba(120, 150, 190, 0.4); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  white-space: nowrap; pointer-events: none; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ── Tabla de daños por parroquia (Acerca de) ─────────────── */
#about-pq table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#about-pq th, #about-pq td { padding: 5px 6px; text-align: right; border-bottom: 1px solid #1d2534; }
#about-pq th:first-child, #about-pq td:first-child { text-align: left; }
#about-pq th { color: var(--fg-dim); font-weight: 600; font-size: 11px; }
#about-pq .pc { color: var(--fg-dim); font-size: 10px; }

/* ── Pin de ubicación buscada (caída estilo Google Maps) ──── */
.pin-drop svg {
  animation: pin-drop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
@keyframes pin-drop {
  from { transform: translateY(-46px); opacity: 0; }
  60% { opacity: 1; }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pin-drop svg { animation: none; }
}

/* ── Aviso pasajero (toast) ───────────────────────────────── */
#hint {
  position: fixed; z-index: 18; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + var(--sab));
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; color: var(--fg);
  backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  max-width: 88vw; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  animation: hint-in 0.45s ease-out;
  pointer-events: none;
}
#hint.out { opacity: 0; transition: opacity 0.6s; }
@keyframes hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #hint { animation: none; }
}

/* ── Leyenda ──────────────────────────────────────────────── */
#legend {
  position: fixed; left: 8px; bottom: calc(56px + var(--sab)); z-index: 15;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  font-size: 12px; max-width: 240px;
}
#legend-min {
  width: 100%; text-align: left; padding: 7px 12px; background: none; border: 0;
  color: var(--fg); font-size: 12px; font-weight: 600; cursor: pointer;
}
#legend-body { padding: 0 12px 9px; }
#legend .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#legend .sw2 { width: 13px; height: 13px; border-radius: 3px; flex: none; }
#legend .ct { margin-left: auto; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
#legend.min #legend-body { display: none; }

/* ── Ficha de edificio ────────────────────────────────────── */
#ficha {
  position: fixed; z-index: 30; background: var(--bg-solid);
  border: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
  left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + var(--sab)); max-height: 55vh; overflow: auto;
}
@media (min-width: 768px) {
  #ficha {
    left: auto; right: 12px; bottom: 12px; width: 360px;
    border-radius: 14px; max-height: 70vh;
  }
}
#ficha-close {
  position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
  border-radius: 50%; border: 0; background: #222c3d; color: var(--fg);
  font-size: 18px; cursor: pointer;
}
#ficha h3 { margin: 2px 40px 2px 0; font-size: 16px; }
#ficha .dir { color: var(--fg-dim); font-size: 12.5px; margin: 0 0 8px; }
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #10141c;
}
.ficha-foto { margin-top: 10px; }
.ficha-foto img {
  width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); display: block;
}
.ficha-foto small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--fg-dim); }

.datos { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.datos li {
  padding: 7px 0; border-bottom: 1px solid #1d2534;
  display: flex; gap: 8px; align-items: baseline;
}
.datos li:last-child { border-bottom: 0; }
.datos .ico { flex: none; }
.datos small { color: var(--fg-dim); display: block; }
#ficha a { color: var(--accent); }

/* ── Acerca de ────────────────────────────────────────────── */
#about {
  background: var(--bg-solid); color: var(--fg); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px; max-width: min(92vw, 560px);
  max-height: 84vh;
}
#about::backdrop { background: rgba(0, 0, 0, 0.6); }
#about h2 { margin: 0 34px 10px 0; font-size: 17px; }
#about p, #about li { font-size: 13.5px; line-height: 1.55; }
#about a { color: var(--accent); }
#about .fine { font-size: 11.5px; color: var(--fg-dim); }
#about-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border-radius: 50%; border: 0; background: #222c3d; color: var(--fg);
  font-size: 18px; cursor: pointer;
}
#about-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px; margin: 12px 0;
}
#about-stats .st {
  background: #161d2a; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; text-align: center;
}
#about-stats b { display: block; font-size: 17px; }
#about-stats span { font-size: 10.5px; color: var(--fg-dim); }

/* Controles MapLibre bajo la cabecera en móvil */
.maplibregl-ctrl-bottom-right { bottom: calc(96px + var(--sab)) !important; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Barra de progreso de carga del contexto */
#load-state .bar {
  height: 4px; background: #1d2534; border-radius: 2px; overflow: hidden; margin-top: 5px;
}
#load-state .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.3s; }