/* ============================================================
   QRdescubre · Visor de mapa — vanguardia mode
   Mobile-first, dark mode automático + toggle, animaciones,
   skeletons, audio bar persistente, cluster por densidad, AR-lite.
   ============================================================ */

:root {
  /* Paleta corporativa Sierra de Gata (COMARCAS.COLOR_PRIMARIO / SECUNDARIO) */
  --sg-verde:    #7cb156;   /* corporativo primario */
  --sg-verde-d:  #4f8030;   /* derivado oscuro */
  --sg-verde-l:  #9bc678;   /* derivado claro */
  --sg-lima:     #c9e04e;   /* corporativo secundario */
  --sg-lima-d:   #a8c12e;
  --sg-piedra:   #5a4d3a;
  --sg-crema:    #f4ede1;
  --sg-rojo:     #b03a2e;   /* solo errores destructivos */
  --sg-ocre:     var(--sg-lima-d);   /* alias retro, ya no se usa */
  --sg-ocre-d:   var(--sg-lima-d);

  /* Tema light por defecto */
  --bg:           #f7f7f5;
  --bg-elev:      #ffffff;
  --bg-soft:      #eee9dd;
  --text:         #1c1c1c;
  --text-soft:    #6a6a6a;
  --line:         #e1ddd3;
  --shadow:       0 8px 30px rgba(0,0,0,0.18);
  --shadow-soft:  0 4px 14px rgba(0,0,0,0.10);
  --radius:       14px;
  --radius-sm:    10px;
  --radius-xs:    6px;

  --accent:       var(--sg-verde);
  --accent-d:     var(--sg-verde-d);
  --accent-2:     var(--sg-ocre);

  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --anim-fast: .18s cubic-bezier(.2,.7,.3,1);
  --anim-med:  .28s cubic-bezier(.2,.7,.3,1);
}

/* Dark mode automático */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14171a;
    --bg-elev:     #1d2125;
    --bg-soft:     #262b30;
    --text:        #f0ece4;
    --text-soft:   #a09b91;
    --line:        #2e343a;
    --shadow:      0 8px 30px rgba(0,0,0,0.55);
    --shadow-soft: 0 4px 14px rgba(0,0,0,0.35);
    --accent:      var(--sg-verde-l);
    --accent-d:    var(--sg-verde);
  }
}
:root[data-theme="dark"] {
  --bg:          #14171a;
  --bg-elev:     #1d2125;
  --bg-soft:     #262b30;
  --text:        #f0ece4;
  --text-soft:   #a09b91;
  --line:        #2e343a;
  --shadow:      0 8px 30px rgba(0,0,0,0.55);
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.35);
  --accent:      var(--sg-verde-l);
  --accent-d:    var(--sg-verde);
}

* { box-sizing: border-box; }
html, body { height:100%; margin:0; padding:0; overscroll-behavior:none; }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--anim-med), color var(--anim-med);
}

#map {
  position: fixed; inset: 0; z-index: 1;
  background: var(--bg-soft);
  transition: filter var(--anim-med);
}
:root[data-theme="dark"] #map .leaflet-tile-pane,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .leaflet-tile-pane {
    filter: brightness(.78) saturate(.92) contrast(1.05);
  }
}

/* ───── Topbar ───── */
#topbar {
  position: fixed; z-index: 10;
  top: calc(8px + var(--safe-top));
  left: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(14px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: background var(--anim-med);
}
#title { flex: 1; min-width: 0; line-height: 1.05; padding: 0 4px; }
#title strong { display:block; font-size:15px; color: var(--accent-d); letter-spacing:.01em; }
#title small  { display:block; font-size:11.5px; color: var(--text-soft); }

/* Search inline */
#search-wrap { position: relative; flex: 0 0 auto; }
#search-input {
  width: 0; opacity: 0; padding: 0;
  height: 36px; border: none;
  background: transparent; color: var(--text);
  font: inherit; outline: none;
  transition: width var(--anim-med), opacity var(--anim-med), padding var(--anim-med);
}
#search-wrap.open #search-input {
  width: min(50vw, 240px);
  opacity: 1;
  padding: 0 10px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
#search-results {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: min(86vw, 360px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 60vh; overflow-y: auto;
  z-index: 20;
  padding: 6px 0;
}
#search-results.hidden { display: none; }
.search-group-title {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-soft);
  padding: 6px 12px 4px;
}
.search-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border: none; background: transparent; width: 100%;
  text-align: left; color: var(--text); font: inherit;
}
.search-item:hover, .search-item:focus { background: var(--bg-soft); }
.search-item .ico { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft) center/cover no-repeat; flex: 0 0 28px; }
.search-item .lbl b { display:block; font-size: 14px; }
.search-item .lbl small { display:block; font-size: 11.5px; color: var(--text-soft); }
.search-empty { padding: 14px; text-align: center; color: var(--text-soft); font-size: 13px; }

/* ───── Botones genéricos ───── */
.ui-btn {
  appearance:none; border:1px solid var(--line); background: var(--bg-elev);
  padding: 8px 12px; border-radius: var(--radius-sm);
  font: inherit; color: var(--text); cursor: pointer;
  transition: background var(--anim-fast), transform var(--anim-fast), border-color var(--anim-fast);
  display: inline-flex; align-items: center; gap: 6px;
}
.ui-btn:hover { background: var(--bg-soft); border-color: var(--accent); }
.ui-btn:active { transform: scale(.97); }
.ui-btn.icon { padding: 7px 10px; font-size: 17px; line-height: 1; }
.ui-btn.full { width: 100%; justify-content: center; }
.ui-btn.ghost { background: transparent; }
.ui-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ui-btn.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
.ui-btn.danger { color: var(--sg-rojo); border-color: var(--sg-rojo); }

/* ───── FABs ───── */
#fabs {
  position: fixed; z-index: 10;
  right: 10px; bottom: calc(90px + var(--safe-bot));
  display: flex; flex-direction: column; gap: 9px;
}
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--bg-elev); color: var(--accent-d);
  font-size: 21px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--anim-fast), transform .08s, color var(--anim-fast);
  border: 1px solid var(--line);
}
.fab:active { transform: scale(.92); }
.fab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Modo BÁSICO (formato del visor anterior) ───────────────────────
   Oculta el sheet avanzado (predicción del tiempo, rutas, retos…) y
   los botones flotantes avanzados. Se conservan #fab-cats (panel de
   filtros) y #fab-res (panel de Resultados), como en el antiguo.
   Las funciones avanzadas se reactivarán quitando este bloque. */
#sheet { display: none !important; }
#search-wrap { display: none !important; }
#fabs .fab:not(#fab-cats):not(#fab-res) { display: none !important; }

/* Banner notificaciones push (suave, no agresivo, parte inferior) */
.qrd-push-banner {
  position: fixed;
  left: 50%; bottom: calc(72px + var(--safe-bot));
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: 92vw; min-width: 280px;
  padding: 12px 14px;
  background: rgba(20, 30, 50, .96);
  color: #fff;
  border: 1px solid rgba(201, 224, 78, .35);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  animation: pushSlideUp .3s ease;
}
@keyframes pushSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.qrd-push-banner.cerrando { animation: pushSlideDown .3s ease forwards; }
@keyframes pushSlideDown {
  to { opacity: 0; transform: translate(-50%, 20px); }
}
.qrd-push-icon { font-size: 26px; flex-shrink: 0; }
.qrd-push-text { flex: 1; line-height: 1.3; }
.qrd-push-text strong { display: block; font-size: 14px; }
.qrd-push-text small  { display: block; opacity: .75; font-size: 11.5px; margin-top: 2px; }
.qrd-push-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qrd-push-btn-no { background: rgba(255,255,255,.12); color: #fff; }
.qrd-push-btn-si { background: #c9e04e; color: #142; }

/* Hillshade Leaflet: el PNG es NEGRO con alpha variable (solo dibuja sombras).
   Lit areas = transparente, mapa base intacto. Sin blend mode, solo composite
   normal. La opacity del L.imageOverlay controla la intensidad global. */
.leaflet-hillshade {
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}
.fab.pulse {
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,177,86,.7), var(--shadow); }
  70%  { box-shadow: 0 0 0 16px rgba(124,177,86,0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(124,177,86,0), var(--shadow); }
}

/* Posición controles Leaflet */
.leaflet-top.leaflet-left  { top: 76px; }
.leaflet-bottom.leaflet-right { bottom: 22px; right: 70px; }

/* ───── Sheet inferior con 3 estados ───── */
.sheet {
  position: fixed; z-index: 9;
  left: 0; right: 0; bottom: 0;
  height: 72vh;
  background: var(--bg-elev);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  box-shadow: 0 -10px 32px rgba(0,0,0,0.18);
  transform: translateY(0);
  transition: transform var(--anim-med);
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-bot);
  border-top: 1px solid var(--line);
  touch-action: none;
}
/* Estados: collapsed (solo handle+tabs visibles), mid (~45vh), full (~72vh) */
.sheet[data-state="collapsed"] { transform: translateY(calc(100% - 88px)); }
.sheet[data-state="mid"]       { transform: translateY(calc(72vh - 45vh)); }
.sheet[data-state="full"]      { transform: translateY(0); }
.sheet.hidden { transform: translateY(calc(100% - 44px)); }
.sheet-handle:active { cursor: grabbing; }
.sheet-handle {
  margin: 8px auto 4px; width: 40px; height: 4px;
  background: var(--line); border-radius: 2px; cursor: grab;
}
.sheet-tabs {
  display: flex; gap: 2px; padding: 6px 10px 0;
  border-bottom: 1px solid var(--line);
}
.sheet-tab {
  appearance: none; border: none; background: transparent;
  padding: 9px 14px; font: inherit; cursor: pointer;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  position: relative; font-size: 13.5px;
  transition: color var(--anim-fast), border-color var(--anim-fast);
}
.sheet-tab.active { color: var(--accent-d); border-bottom-color: var(--accent); }
.badge {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  margin-left: 4px;
  font-size: 11px; line-height: 16px; text-align: center;
  background: var(--accent-2); color: #fff;
  border-radius: 9px;
}
.sheet-body { overflow-y: auto; padding: 12px 12px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-panel { display: none; animation: fadeIn .25s ease; }
.sheet-panel.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }

.hint { color: var(--text-soft); font-size: 13px; margin: 4px 0 12px; }

/* ───── Cards ───── */
.cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px; }
.card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  align-items: center;
  cursor: pointer;
  transition: background var(--anim-fast), transform .06s, border-color var(--anim-fast);
}
.card:hover { background: var(--bg-soft); border-color: var(--accent); }
.card:active { transform: scale(.99); }
.card img.thumb {
  width: 56px; height: 56px; border-radius: var(--radius-xs);
  object-fit: cover; background: var(--bg-soft);
}
.card .meta { min-width: 0; }
.card .meta b {
  display: block; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .meta small { display:block; font-size:12px; color: var(--text-soft); }
.card .dist {
  font-size: 12px; color: var(--accent-d);
  white-space: nowrap; font-weight: 600;
  background: var(--bg-soft); padding: 4px 7px; border-radius: 8px;
}
.card.in-ruta { outline: 2px solid var(--accent-2); }
.card.visited::after {
  content: '✓'; color: var(--accent); margin-left: 4px;
  font-weight: bold;
}

/* Skeleton loader */
.skel { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--line) 50%, var(--bg-soft) 75%);
        background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-xs); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.skel-thumb { width: 56px; height: 56px; }
.skel-line  { height: 12px; margin: 4px 0; }
.skel-line.short { width: 60%; }

/* ───── Drawer ───── */
.drawer {
  position: fixed; z-index: 11;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 360px);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform var(--anim-med);
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  border-right: 1px solid var(--line);
}
.drawer.hidden { transform: translateX(-105%); }
.drawer header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.drawer header h2 { margin: 0; font-size: 18px; color: var(--accent-d); flex: 1; }
.drawer section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.drawer section h3 {
  margin: 0 0 8px; font-size: 12px; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.drawer footer {
  margin-top: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  padding-bottom: calc(14px + var(--safe-bot));
}
select {
  width: 100%; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text);
  font: inherit;
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; border: 1px solid var(--line); background: var(--bg-elev);
  padding: 6px 10px; font: 13px/1 inherit; border-radius: 999px;
  cursor: pointer; color: var(--text);
  transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .count { color: var(--text-soft); margin-left: 4px; font-size: 11px; }
.chip.active .count { color: rgba(255,255,255,.85); }

/* ───── Toast ───── */
.toast {
  position: fixed; z-index: 30;
  left: 50%; bottom: calc(100px + var(--safe-bot));
  transform: translateX(-50%);
  background: var(--accent-d); color: #fff;
  padding: 11px 18px; border-radius: 22px;
  font-size: 14px; box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
  opacity: 1;
  transition: opacity var(--anim-med), transform var(--anim-med);
  display: flex; align-items: center; gap: 8px;
}
.toast.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.toast.success { background: var(--sg-verde-d); }
.toast.warn    { background: var(--sg-ocre-d); }

/* ───── Info de punto ───── */
.info-hero {
  position: relative; height: 200px; border-radius: var(--radius);
  background: var(--bg-soft) center/cover no-repeat;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
}
.info-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.65) 100%);
  border-radius: var(--radius);
}
.info-hero h3 {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  margin: 0; font-size: 22px; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  z-index: 1;
}
.info-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag {
  display:inline-block; padding: 3px 9px; border-radius: 12px;
  background: var(--bg-soft); font-size: 12px; color: var(--text-soft);
  border: 1px solid var(--line);
}
.tag.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.info-desc { font-size: 14px; line-height: 1.55; }
.info-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }

.info-audio {
  margin: 10px 0; padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.info-audio audio { width: 100%; margin-top: 6px; }
.info-tts {
  margin: 10px 0; padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  font-size: 13px; color: var(--text-soft);
}
.info-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px,1fr));
  gap: 4px; margin-top: 14px;
}
.info-galeria img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-xs);
  transition: transform var(--anim-fast);
}
.info-galeria img:hover { transform: scale(1.04); }

/* ───── Marker yo-estoy-aquí con cono de orientación ───── */
.me-marker-wrap {
  width: 44px; height: 44px;
  position: relative;
  transform-origin: center;
  pointer-events: none;
}
.me-marker {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #2196f3; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(33,150,243,.22), 0 2px 6px rgba(0,0,0,.3);
}
.me-cone {
  position: absolute; top: 0; left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid rgba(33,150,243,.55);
  filter: blur(.3px);
  display: none;
}
.me-marker-wrap.has-heading .me-cone { display: block; }

/* Marker pulsante de proximidad activa */
.proximity-mk { animation: prox 1.5s infinite; transform-origin: center bottom; }
@keyframes prox {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(124,177,86,0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(124,177,86,.85)); }
}

/* ───── Audio player persistente ───── */
#audio-bar {
  position: fixed; z-index: 12;
  left: 8px; right: 8px;
  bottom: calc(8px + var(--safe-bot));
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  display: grid; grid-template-columns: 36px 1fr auto auto auto; gap: 8px;
  align-items: center;
  transform: translateY(0);
  transition: transform var(--anim-med), opacity var(--anim-med);
}
#audio-bar.hidden { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
#audio-bar .play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#audio-bar .play-btn:hover { background: var(--accent-d); }
#audio-bar .title { min-width: 0; }
#audio-bar .title b { display: block; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#audio-bar .title small { display: block; font-size: 11px; color: var(--text-soft); }
#audio-bar progress {
  grid-column: 1 / -1; width: 100%; height: 4px; margin-top: 2px;
  -webkit-appearance: none; appearance: none; border: none;
}
#audio-bar progress::-webkit-progressbar-bar { background: var(--bg-soft); }
#audio-bar progress::-webkit-progress-value { background: var(--accent); }
#audio-bar progress::-moz-progress-bar { background: var(--accent); }
#audio-bar .icon-btn {
  width: 32px; height: 32px; border: none;
  background: transparent; cursor: pointer;
  color: var(--text-soft); font-size: 16px;
}
#audio-bar .icon-btn:hover { color: var(--text); }

/* Sheet sube cuando bar visible */
body.has-audio .sheet { bottom: 64px; }

/* ───── Banner offline ───── */
#offline-banner {
  position: fixed; z-index: 25;
  top: calc(var(--safe-top) + 60px);
  left: 50%; transform: translateX(-50%);
  background: var(--sg-rojo); color: #fff;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 12px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px;
}
#offline-banner.hidden { display: none; }

/* ───── Ruta stats ───── */
.ruta-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line); margin-top: 4px;
}
.ruta-stats .st {
  text-align: center;
}
.ruta-stats .st b {
  display: block; font-size: 17px; color: var(--accent-d);
  font-feature-settings: "tnum";
}
.ruta-stats .st small { display: block; font-size: 11px; color: var(--text-soft); }
.ruta-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cards.sortable .card { cursor: grab; }
.card .ord { font-size: 12px; color: var(--text-soft); margin-right: 4px; font-weight: 600; }

/* ───── Stats / Tus retos ───── */
.mi-sierra {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin: 10px 0;
}
.mi-sierra .st {
  text-align: center; padding: 12px 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.mi-sierra .st b { display: block; font-size: 22px; color: var(--accent-d); }
.mi-sierra .st small { display: block; font-size: 11px; color: var(--text-soft); }

.logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px,1fr)); gap: 8px; margin-top: 12px; }
.logro {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 6px;
  text-align: center; opacity: .35;
  transition: opacity var(--anim-fast), transform var(--anim-fast);
}
.logro.unlocked { opacity: 1; border-color: var(--accent-2); }
.logro.unlocked:hover { transform: translateY(-2px); }
.logro .em { font-size: 28px; line-height: 1; }
.logro b { display: block; font-size: 12px; margin-top: 4px; }
.logro small { display: block; font-size: 10px; color: var(--text-soft); }

/* ───── AR mini-compass ───── */
#ar-arrow {
  position: fixed; z-index: 13;
  top: calc(var(--safe-top) + 80px);
  right: 12px;
  width: 88px; height: 88px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-size: 11px; color: var(--text-soft);
  transition: opacity var(--anim-med);
}
#ar-arrow.hidden { opacity: 0; pointer-events: none; }
#ar-arrow .arrow {
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 22px solid var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transition: transform var(--anim-fast);
}
#ar-arrow .dist { margin-top: 4px; font-weight: 600; color: var(--text); font-size: 13px; }

/* ───── Cluster en paleta corporativa (3 tonos del mismo verde, no semáforo) ───── */
.marker-cluster-small  { background: rgba(155,198,120,.55); }
.marker-cluster-small div { background: var(--sg-verde-l); color: #fff; }
.marker-cluster-medium { background: rgba(124,177,86,.55); }
.marker-cluster-medium div { background: var(--sg-verde); color: #fff; }
.marker-cluster-large  { background: rgba(79,128,48,.55); }
.marker-cluster-large div { background: var(--sg-verde-d); color: #fff; }
.marker-cluster div { font-weight: 700; }

/* Pop-ups Leaflet */
.leaflet-popup-content-wrapper {
  background: var(--bg-elev); color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.leaflet-popup-tip { background: var(--bg-elev); }
/* Ancho fijo de las emergentes: 280 px para TODAS (antes flotaba 200–280
   según contenido). !important para ganar al width inline que Leaflet
   calcula midiendo el contenido. */
.leaflet-popup-content { margin: 10px 12px; width: 280px !important; }
.pop-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
}
.pop-titulo {
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  font-size: 16px;
}
.pop-desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-soft);
}
/* Botones del popup apilados a ancho completo, como el visor antiguo */
.pop-acciones { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pop-acciones .ui-btn { width: 100%; justify-content: center; padding: 9px 12px; font-size: 14px; }

/* Marker in-ruta destacado: glow verde lima corporativo */
.mk-in-ruta { filter: drop-shadow(0 0 6px var(--sg-lima)) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* Indicador "calculando ruta…" en stats */
.ruta-stats .st b.loading {
  position: relative; color: transparent;
}
.ruta-stats .st b.loading::after {
  content: '...'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-d);
  animation: dots 1.2s infinite steps(4, end);
}
@keyframes dots { 0% { content:'.'; } 25%{content:'..';} 50%{content:'...';} 75%{content:'....';} 100% { content:'.'; } }

/* Polyline pulsando mientras OSRM responde */
@keyframes routePulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.routing-pulse { animation: routePulse 1.2s infinite; }

/* Cluster: pequeño "pop" al hacer click (markercluster usa transition) */
.marker-cluster { transition: transform .14s ease; }
.marker-cluster:hover { transform: scale(1.06); }
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .28s;
}

/* ───── Meteo strip en panel-info ───── */
.meteo-strip {
  margin: 10px 0;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.meteo-now {
  display: grid; grid-template-columns: 44px auto 1fr auto; gap: 10px;
  align-items: center; padding-bottom: 8px;
}
.meteo-em { font-size: 32px; line-height: 1; }
.meteo-temp { font-size: 26px; font-weight: 700; color: var(--accent-d); }
.meteo-meta div { font-size: 13px; }
.meteo-meta small { color: var(--text-soft); font-size: 11.5px; }
.meteo-sun small { font-size: 11px; color: var(--text-soft); }
.meteo-hours, .meteo-days {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.meteo-days { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.meteo-hours > div, .meteo-days > div {
  text-align: center; padding: 4px 2px;
  border-radius: var(--radius-xs);
}
.meteo-hours small, .meteo-days small { font-size: 10.5px; color: var(--text-soft); display: block; }
.meteo-hours .em, .meteo-days .em { font-size: 18px; }
.meteo-hours b, .meteo-days b { font-size: 14px; color: var(--text); }
.meteo-days .min { color: var(--text-soft); margin-left: 4px; font-size: 11.5px; }
.meteo-hours .prob { color: #2196f3; font-size: 10px; }
.meteo-days .rain { color: #2196f3; }

/* ───── Pasaporte digital ───── */
.pp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; margin-top: 10px;
}
.pp-stamp {
  cursor: pointer; text-align: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  transition: transform var(--anim-fast), border-color var(--anim-fast);
}
.pp-stamp:hover { transform: translateY(-2px); border-color: var(--accent); }
.pp-sello {
  width: 90px; height: 90px; margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  position: relative;
  border: 3px dashed var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.pp-sello-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--sg-lima);
  background: rgba(79,128,48,.35);
  border-radius: 50%;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
  font-weight: 900;
}
.pp-stamp b { display: block; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-stamp small { display: block; font-size: 10.5px; color: var(--text-soft); }

/* ───── Vista AR (cámara + overlay) ───── */
.ar-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #000;
  overflow: hidden;
  animation: arIn .25s ease;
}
.ar-overlay.hidden { display: none; }
@keyframes arIn { from { opacity:0; } to { opacity:1; } }
.ar-overlay video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.ar-hud {
  /* Zona segura: deja libres barra superior (que con status ocupa 2 líneas)
     y panel de controles inferior. Más margen arriba para que las labels
     de estrellas no caigan tras los botones. */
  position: absolute;
  top: calc(120px + var(--safe-top));
  bottom: calc(140px + var(--safe-bot));
  left: 0; right: 0;
  pointer-events: none;
  z-index: 5;          /* SIEMPRE por encima del canvas 3D y de las SVG overlays */
}
.ar-tag {
  position: absolute;
  transform: translate(-50%, -100%) scale(var(--scale, 1));
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition:
    left .55s cubic-bezier(.25,.46,.45,.94),
    top  .55s cubic-bezier(.25,.46,.45,.94),
    opacity .5s ease;
  will-change: left, top, opacity;
}

/* Thumbnail circular con foto / icono del punto.
   background-size: contain + background-repeat:no-repeat → el marker PNG
   se ve entero y centrado, sin recortes a un lado. */
.ar-chip-img {
  width: 56px; height: 56px;
  border-radius: 50%;
  background-size: 78%;
  background-position: center center;
  background-repeat: no-repeat;
  border: 3px solid rgba(255,255,255,.95);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 4px rgba(0,0,0,.3);
  flex-shrink: 0;
  background-color: rgba(124,177,86,.92);
}
.ar-chip-img.ar-chip-icon {
  background: linear-gradient(135deg, #264, #142);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.ar-chip-icon > span { line-height: 1; }

/* Pildora pequeña con nombre + distancia */
.ar-chip-text {
  background: rgba(0, 0, 0, .82);
  color: #fff;
  padding: 2px 8px 3px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  max-width: 130px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
}
.ar-chip-text b {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}
.ar-chip-text small {
  display: block;
  font-size: 10px;
  color: #c9e04e;
  font-feature-settings: "tnum";
}

/* Variaciones por capa de distancia: cambia el color del borde del thumb */
.ar-tag.ar-cerca .ar-chip-img { border-color: #c9e04e; box-shadow: 0 0 0 4px rgba(201,224,78,.4), 0 4px 14px rgba(0,0,0,.5); }
.ar-tag.ar-medio .ar-chip-img { border-color: rgba(255,255,255,.95); }
.ar-tag.ar-lejos .ar-chip-img { width: 42px; height: 42px; border-width: 2px; opacity: .85; }
.ar-tag.ar-lejos .ar-chip-text { font-size: 10.5px; opacity: .9; }

.ar-tag.ar-cumbre .ar-chip-img { border-color: #c9e04e; }
/* Estilos legacy mantenidos por compatibilidad celeste */
.ar-tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c9e04e; margin: 0 auto 4px;
  box-shadow: 0 0 0 4px rgba(201,224,78,.35);
}
.ar-tag-name { font-weight: 700; font-size: 11px; color: #fff; }
.ar-tag-dist { font-size: 10px; opacity: .85; color: #c9e04e; }

/* Tags celestes legacy (estrellas/planetas, mantienen su look puntito) */

/* ───── Objetos celestes (modo nocturno Atalaya) ─────
   Diseño MINIMALISTA: solo punto luminoso + nombre pequeño debajo.
   Sin transición CSS en left/top: las etiquetas del cielo deben quedar
   CLAVADAS en su posición; cualquier animación hace que el ruido del sensor
   se vea como deslizamiento. Solo se anima la opacidad para fade-in. */
.ar-tag.ar-celeste,
.ar-tag.ar-constel {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  color: #f0f8ff;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transition: opacity .35s ease;
}
.ar-celeste-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #e8f0ff;
  text-shadow: 0 0 6px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,1);
  letter-spacing: .02em;
  white-space: nowrap;
  margin-top: 2px;
}
/* Constelaciones: rótulo en cursiva azul claro, ligero glow */
.ar-tag.ar-constel {
  background: transparent;
  border: none;
  padding: 0;
}
.ar-constel-label {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: #9ec4ff;
  text-shadow: 0 0 8px rgba(20,40,90,.95), 0 1px 2px rgba(0,0,0,1);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(15, 25, 60, .35);
  border: 1px solid rgba(158, 196, 255, .35);
  backdrop-filter: blur(3px);
}

/* Canvas terreno 3D voxel (capa entre vídeo y HUD/silueta) */
.ar-terreno {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  /* No blend mode — pintamos píxeles opacos donde hay terreno, alpha 0 donde no */
}

/* SVG overlay del cielo (líneas + puntos estelares) */
.ar-sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* ───────── Vista 3D del terreno (Three.js flyover) ───────── */
.m3d-overlay {
  position: fixed; inset: 0; z-index: 78;
  background: #0c1224;
  color: #e8f0ff;
  display: flex; flex-direction: column;
  animation: arIn .25s ease;
}
.m3d-overlay.hidden { display: none; }
.m3d-bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: 2;
}
.m3d-bar strong { font-size: 14px; flex-shrink: 0; }
.m3d-info {
  flex: 1;
  font-size: 11px;
  opacity: .65;
  font-family: ui-monospace, "Courier New", monospace;
}
.m3d-bar .ui-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.m3d-canvas-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.m3d-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.m3d-cargando {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background: rgba(12, 18, 36, .9);
  z-index: 3;
}
.m3d-spinner {
  width: 42px; height: 42px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: #c9e04e;
  border-radius: 50%;
  animation: m3dSpin .8s linear infinite;
}
@keyframes m3dSpin {
  to { transform: rotate(360deg); }
}
.m3d-cargando p {
  margin: 0;
  font-size: 13px;
  opacity: .8;
}
.m3d-pie {
  padding: 8px 14px calc(8px + var(--safe-bot));
  background: rgba(0,0,0,.45);
  font-size: 11px;
  text-align: center;
  opacity: .7;
}

/* ───────── Panorámica 360° del horizonte (vista independiente, sin brújula) ───────── */
.horizonte-overlay {
  position: fixed; inset: 0; z-index: 75;
  background: linear-gradient(180deg, #04081a 0%, #0c1230 35%, #1a2640 100%);
  color: #e8f0ff;
  display: flex; flex-direction: column;
  animation: arIn .25s ease;
}
.horizonte-overlay.hidden { display: none; }
.horizonte-bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.horizonte-bar strong { font-size: 14px; flex-shrink: 0; }
.horizonte-info {
  flex: 1;
  font-size: 11px;
  opacity: .65;
  font-family: ui-monospace, "Courier New", monospace;
}
.horizonte-bar .ui-btn { background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.2); }

.horizonte-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex; align-items: center;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.horizonte-scroll svg {
  height: 320px;
  flex-shrink: 0;          /* no encoger en el flex container, mantener su 2880px */
  display: block;
  min-width: 2880px;       /* 360° × 8px/grado */
}

/* Cielo (encima de la línea de horizonte) */
.hz-cielo { fill: url(#hz-gradiente-cielo); }
/* Sin gradiente definido en SVG → fondo del overlay sirve; dejamos transparente */
.hz-cielo { fill: transparent; }
/* Tierra */
.hz-tierra { fill: rgba(20, 50, 30, 0.55); }
/* Cresta de horizonte */
.hz-cresta {
  fill: none;
  stroke: #c9e04e;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
}
/* Guías cardinales verticales */
.hz-guia {
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.hz-guia-mayor {
  stroke: rgba(158, 196, 255, .35);
  stroke-width: 1.5;
  stroke-dasharray: none;
}
.hz-cardinal {
  fill: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 600;
  font-family: system-ui, sans-serif;
}
.hz-cardinal-mayor {
  fill: #c9e04e;
  font-size: 18px;
  font-weight: 800;
}
.hz-tick {
  stroke: rgba(255,255,255,.3);
  stroke-width: 1;
}
/* Picos */
.hz-pico-dot {
  fill: #c9e04e;
  stroke: rgba(0,0,0,.7);
  stroke-width: 1;
}
.hz-pico-linea {
  stroke: rgba(201, 224, 78, .6);
  stroke-width: 1;
}
.hz-pico-label {
  fill: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(0,0,0,.8);
  stroke-width: 3;
  stroke-linejoin: round;
}
.hz-pico-alt {
  fill: #c9e04e;
  font-size: 9.5px;
  font-family: ui-monospace, monospace;
  paint-order: stroke;
  stroke: rgba(0,0,0,.7);
  stroke-width: 2;
}

.horizonte-pie {
  padding: 8px 14px calc(8px + var(--safe-bot));
  background: rgba(0,0,0,.4);
  font-size: 11px;
  text-align: center;
  opacity: .7;
}

/* SVG overlay de la silueta de horizonte (cutre street view) */
.ar-horizonte {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;        /* mismo nivel que ar-sky, debajo del HUD */
}
.ar-horizonte-tierra {
  fill: rgba(0, 20, 8, 0.20);   /* tinte verdoso muy sutil para "tierra" */
}
.ar-horizonte-linea {
  fill: none;
  stroke: rgba(201, 224, 78, 0.55);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}
.ar-svg-linea {
  stroke: rgba(158, 196, 255, .45);
  stroke-width: 1.1;
  stroke-linecap: round;
  fill: none;
}
.ar-svg-estrella {
  fill: #fff;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85));
}

/* Modo MINIMAL: oculta los globos de POI y cumbres, deja sólo el thumbnail */
.ar-overlay.minimal .ar-chip-text { display: none; }
.ar-overlay.minimal .ar-chip-img { width: 38px; height: 38px; border-width: 2px; }
.ar-overlay.minimal .ar-tag.ar-lejos .ar-chip-img { width: 30px; height: 30px; }

/* Popup informativo de constelación / objeto celeste */
.ar-info-popup {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: arIn .2s ease;
}
.ar-info-popup.hidden { display: none; }
.ar-info-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: linear-gradient(160deg, rgba(20,30,60,.97), rgba(10,18,40,.97));
  border: 1px solid rgba(158, 196, 255, .35);
  border-radius: 14px;
  padding: 22px 22px 18px;
  color: #f0f8ff;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  max-height: 80vh;
  overflow-y: auto;
}
.ar-info-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #c9e04e;
  letter-spacing: .02em;
}
.ar-info-card h3 small {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #9ec4ff;
  font-style: italic;
  margin-top: 2px;
}
.ar-info-card p { margin: 6px 0; }
.ar-info-card p.ar-info-meta {
  font-size: 11px;
  color: #9ec4ff;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.ar-info-card p.ar-info-curiosidad {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(201, 224, 78, .10);
  border-left: 3px solid #c9e04e;
  border-radius: 4px;
  font-size: 12.5px;
}
.ar-info-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  border: none; background: rgba(255,255,255,.08);
  color: #fff; border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}

/* Tags celestes legacy (compatibilidad) */
.ar-tag.ar-celeste-legacy {
  background: rgba(10, 20, 40, .85);
  border-color: rgba(255, 255, 255, .35);
  color: #f0f8ff;
  padding: 4px 8px 5px;
}
.ar-celeste-dot {
  margin: 0 auto 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 30%, rgba(255,255,255,.4) 70%, transparent);
  box-shadow: 0 0 10px rgba(255,255,255,.7), 0 0 4px #fff;
}
/* Sol */
.ar-celeste-sol .ar-celeste-dot {
  background: radial-gradient(circle, #fff8a0 20%, #ffb000 60%, transparent);
  box-shadow: 0 0 20px #ffb000, 0 0 8px #fff5c0;
}
/* Luna */
.ar-celeste-luna .ar-celeste-dot {
  background: radial-gradient(circle, #f0f0f0 40%, #b8b8c8 80%, transparent);
  box-shadow: 0 0 14px rgba(220,220,255,.6);
}
/* Planetas */
.ar-celeste-planeta .ar-celeste-dot {
  background: radial-gradient(circle, #ffd080 30%, #d09040 80%, transparent);
  box-shadow: 0 0 10px rgba(255, 180, 100, .7);
}
.ar-celeste-planeta { border-color: rgba(255, 200, 100, .5); }
/* Estrellas anónimas: solo puntito sin fondo ni borde */
.ar-tag.ar-celeste-only-dot {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Banner Starlight (zona certificada) */
.ar-starlight-badge {
  position: absolute;
  top: calc(96px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(38,53,80,.9), rgba(20,30,60,.9));
  color: #c9e04e;
  border: 1px solid #c9e04e;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  z-index: 2;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(201,224,78,.4);
}

/* Z-index por capa (cercanos por delante) */
.ar-tag.ar-cerca  { z-index: 3; }
.ar-tag.ar-medio  { z-index: 2; }
.ar-tag.ar-lejos  { z-index: 1; }

.ar-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--safe-top)) 12px 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
  color: #fff; z-index: 2;
}
.ar-bar { flex-wrap: wrap; }
.ar-bar strong { font-size: 13px; flex-shrink: 0; }
.ar-bar .ui-btn { flex-shrink: 0; }
.ar-status {
  display: none;              /* barra de debug oculta — sólo visible en dev */
  order: 99;
  flex-basis: 100%;
  font-size: 10.5px;
  color: #fff;
  font-family: ui-monospace, "Courier New", monospace;
  background: rgba(0,0,0,.7);
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1.3;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-bar .ui-btn {
  background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25);
}
.ar-bar .ui-btn:hover { background: rgba(255,255,255,.32); }
/* Toggle off (POIs/cumbres desactivados) */
.ar-bar .ui-btn.off {
  opacity: .35;
  background: rgba(0,0,0,.5);
}

/* Controles inferiores (radio + zoom) — fuera del área de etiquetas */
.ar-controls {
  position: absolute;
  bottom: calc(16px + var(--safe-bot));
  left: 12px; right: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
  z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
}
.ar-slider-row {
  display: flex; align-items: center; gap: 10px;
  color: #fff;
}
.ar-slider-row input[type="range"] {
  flex: 1; accent-color: #c9e04e;
  margin: 0;
}
.ar-slider-icon { font-size: 16px; flex-shrink: 0; width: 22px; }
.ar-slider-val {
  min-width: 60px; text-align: right;
  font-size: 13px; font-feature-settings: "tnum";
  font-weight: 600;
}

.ar-crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ar-crosshair::before, .ar-crosshair::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: rgba(255,255,255,.55);
}
.ar-crosshair::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.ar-crosshair::after  { width: 1px; height: 12px; transform: translate(-50%, -50%); }

/* ───── Modal 360 panorámico ───── */
.pano-modal {
  position: fixed; inset: 0; z-index: 60;
  background: #000;
  display: flex; flex-direction: column;
  animation: panoIn .3s ease;
}
.pano-modal.hidden { display: none; }
@keyframes panoIn { from { opacity:0; transform: scale(.96); } to { opacity:1; transform: scale(1); } }
.pano-bar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  color: #fff;
}
.pano-bar strong { flex: 1; font-size: 16px; }
.pano-bar .ui-btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.pano-bar .ui-btn:hover { background: rgba(255,255,255,.28); }
.pano-modal iframe {
  flex: 1; width: 100%; border: 0; background: #000;
}

/* ───── Splash / loader inicial ───── */
#splash {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: opacity .4s ease;
}
#splash.fade { opacity: 0; pointer-events: none; }
#splash .qrd-logo {
  display: flex; align-items: baseline; gap: .28em;
  color: #fff;
  font-family: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(34px, 11vw, 64px);
  line-height: 1;
  animation: splashIn .8s cubic-bezier(.2,.7,.3,1);
}
#splash .qrd-mark { font-weight: 800; letter-spacing: -.02em; }
#splash .qrd-d    { font-weight: 600; }
#splash .qrd-word { font-weight: 300; letter-spacing: .12em; }
@keyframes splashIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
#splash .lbl {
  margin-top: 18px; font-size: 14px;
  letter-spacing: .04em; color: rgba(255,255,255,.58);
}

/* ───── Utilidades ───── */
.hidden { display: none !important; }
.ui-pane { user-select: none; }

/* Pantallas grandes: split */
@media (min-width: 900px) {
  .sheet {
    left: auto; right: 12px; bottom: 12px; top: 88px;
    width: 400px; max-height: none; border-radius: var(--radius);
    transform: translateX(0) !important;
  }
  .sheet.hidden { transform: translateX(120%) !important; }
  #fabs { right: 432px; bottom: 22px; }
  .leaflet-bottom.leaflet-right { right: 432px; }
  #audio-bar { left: auto; right: 12px; width: 400px; bottom: 12px; }
  body.has-audio .sheet { bottom: 12px; }
}

/* ─────────────────────────────────────────────────────────────────
   Paneles laterales (categorías izquierda · resultados derecha)
───────────────────────────────────────────────────────────────── */
.sidepanel {
  position: fixed;
  top: 88px;
  bottom: 12px;
  width: 280px;
  z-index: 540;
  display: flex;
  pointer-events: none;
}
.sidepanel--left  { left:  12px; }
.sidepanel--right { right: 12px; }
.sidepanel__inner {
  pointer-events: auto;
  flex: 1;
  background: var(--bg-elev, rgba(255,255,255,.97));
  color: var(--text);
  border-radius: var(--radius, 14px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}
.sidepanel--left  .sidepanel__inner { transform: translateX(0); }
.sidepanel--right .sidepanel__inner { transform: translateX(0); }
.sidepanel.collapsed .sidepanel__inner {
  opacity: 0; pointer-events: none;
}
.sidepanel--left.collapsed  .sidepanel__inner { transform: translateX(-110%); }
.sidepanel--right.collapsed .sidepanel__inner { transform: translateX(110%); }

.sidepanel__inner > header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.sidepanel__inner > header h2 {
  margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}

/* El toggle de los paneles laterales vive ahora en los FABs (#fab-cats, #fab-res).
   El botón ✕ interno cierra desde dentro. */
.sidepanel__inner > header { justify-content: space-between; }
.sidepanel__close { font-size: 14px; line-height: 1; padding: 4px 8px; }

/* Botones de categoría */
.cats-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; overflow-y: auto; flex: 1;
}
.cat-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-soft, #f2f4f0);
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; text-align: left;
  font-size: 15px; color: inherit;
  transition: background .12s, border-color .12s;
}
.cat-btn:hover  { background: var(--line); }
.cat-btn.active { background: var(--accent, #7cb156); color: #fff; border-color: var(--accent-d, #5a8a3a); }
.cat-btn img    { width: 22px; height: 22px; object-fit: contain; }
.cat-btn .ct    { margin-left: auto; opacity: .7; font-size: 13px; }

/* Listado de resultados */
.res-list {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; flex: 1;
}
.res-item {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  margin-bottom: 4px;
  transition: background .12s;
}
.res-item:hover { background: var(--line); }
.res-item img {
  width: 42px; height: 42px; object-fit: cover; border-radius: 6px;
  background: var(--bg-soft, #ddd); flex: 0 0 42px;
}
.res-item .meta { flex: 1; min-width: 0; }
.res-item .nm   { font-size: 15px; font-weight: 600; line-height: 1.25; white-space: normal; word-break: break-word; }
.res-item .tp   { font-size: 13px; color: var(--text-soft); }

#res-count.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--accent, #7cb156); color: #fff; }

/* Mobile: ocultar paneles laterales por defecto (toggle los muestra) */
@media (max-width: 899px) {
  .sidepanel { width: 88vw; max-width: 320px; top: 72px; bottom: auto; max-height: 60vh; }
  .sidepanel.collapsed .sidepanel__toggle { /* el toggle se queda en pantalla */ }
}