/* ============================================================
   Vías Verdes Murcia v7 — Primitivas v8 compartidas (Pase 3)
   Franja de estado + tokens (mismo dibujo que .lc-strip/.lc-stoken
   del hub, desacoplado de layers.css). Usuarios: franja AQI del
   modal de clima y #rdToday de la ficha de ruta.
   Consume SOLO tokens centrales (tokens.css).
   ============================================================ */
.v8-strip { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 12px; border-radius: 14px; background: var(--surface-sunken, #F6F8F4); border: 1px solid var(--line, #E1E6DC); }
.v8-strip-label { font-size: var(--fs-xs, 12px); font-weight: 800; color: var(--text-secondary); }
.v8-strip-note { font-size: 11.5px; color: var(--text-secondary); }
.v8-token { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--line, #E1E6DC); font-size: var(--fs-xs, 12px); font-weight: 700; color: var(--text-primary); }
.v8-token-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--color-brand, #4A8C3F)); flex: 0 0 auto; }
.v8-token--brandy { background: var(--color-brand-soft, #EAF1E7); border-color: transparent; color: var(--color-brand-dark, #1A4A18); font-weight: 800; padding: 5px 11px; }
/* Esqueleto shimmer mientras llegan datos en vivo */
.v8-token--loading { color: transparent; min-width: 72px; position: relative; overflow: hidden; }
.v8-token--loading::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--surface-sunken, #F6F8F4) 25%, var(--line, #E1E6DC) 50%, var(--surface-sunken, #F6F8F4) 75%); background-size: 200% 100%; animation: v8shimmer 1.2s linear infinite; }
@keyframes v8shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .v8-token--loading::after { animation: none; } }
/* Dark: tinta pensada para fondo claro (lección Pase 2) */
[data-theme="dark"] .v8-token--brandy { color: var(--color-brand-light, #8DBA8A); }

/* ============================================================
   Pase 5A: auto-revelado por zoom (.vv-zoom-reveal).
   La pone SOLO zoom-reveal.js sobre markers ocultos POR TOGGLE
   de grupo cuando zoom >= 15. Tercera visibilidad ortogonal:
   ni VVLayers ni el clustering la escriben. :not(.vv-in-cluster)
   garantiza que un marker agrupado jamás se revele.
   ============================================================ */
.vv-zoom-reveal:not(.vv-in-cluster) { display: flex !important; }

/* ============================================================
   Pase 4: clustering de POIs — cluster glass v8 + velo ortogonal
   .vv-in-cluster la pone SOLO poi-clusters.js (nunca style.display:
   la visibilidad lógica sigue siendo del código existente).
   Regla de oro MapLibre: el raíz (.vv-cluster) sin transform;
   el spring scale va en .vv-cluster-inner.
   ============================================================ */
.vv-in-cluster { display: none !important; }

.vv-cluster { width: 36px; height: 36px; cursor: pointer; z-index: 6; }
.vv-cluster:hover { z-index: 20; }
.vv-cluster-inner {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  backdrop-filter: var(--glass-blur, blur(20px));
  border: 1px solid var(--line, #E1E6DC);
  box-shadow: 0 6px 18px rgba(20, 40, 15, 0.16);
  color: var(--text-primary, #1C2418);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800; font-size: 13px;
  transition: transform var(--dur-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow var(--dur-fast, 150ms) ease;
}
.vv-cluster--md { width: 44px; height: 44px; }
.vv-cluster--md .vv-cluster-inner { font-size: 14px; }
.vv-cluster--lg { width: 52px; height: 52px; }
.vv-cluster--lg .vv-cluster-inner { font-size: 15px; }
.vv-cluster:hover .vv-cluster-inner,
.vv-cluster:focus-visible .vv-cluster-inner {
  transform: scale(1.08);
  border-color: var(--color-brand, #4A8C3F);
  box-shadow: 0 0 0 3px var(--color-brand-soft, #EAF1E7), 0 6px 18px rgba(20, 40, 15, 0.16);
}
.vv-cluster:focus-visible { outline: 2px solid var(--color-brand, #4A8C3F); outline-offset: 2px; border-radius: 50%; }
/* Senior: target táctil mínimo (data-senior vive en <body> → descendiente) */
[data-senior="on"] .vv-cluster { min-width: var(--touch, 56px); min-height: var(--touch, 56px); }
@media (prefers-reduced-motion: reduce) {
  .vv-cluster-inner { transition: none; }
  .vv-cluster:hover .vv-cluster-inner, .vv-cluster:focus-visible .vv-cluster-inner { transform: none; }
}

/* =============================================================
   Pase 6: galería de paradas del vuelo (overlay sobre el escenario del cine)
   ============================================================= */
.fly-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(10, 22, 14, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; animation: flyFadeIn .35s ease; }
@keyframes flyFadeIn { from { opacity: 0 } to { opacity: 1 } }
.fly-card { width: min(720px, 92%); max-height: 92%; display: flex; flex-direction: column; }
.fly-media { height: 52vh; border-radius: var(--r-card, 16px); overflow: hidden;
  background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.fly-media img { width: 100%; height: 100%; object-fit: cover; }
@keyframes kenburns { from { transform: scale(1) translateY(0) } to { transform: scale(1.09) translateY(-1.5%) } }
.kenburns { animation: kenburns 9s ease-in-out infinite alternate; }
.fly-caption { color: #fff; text-align: center; margin: 12px 0 0; font-weight: 700; font-size: 14px; }
.fly-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fly-controls button { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer; }
.fly-controls button:disabled { opacity: 0.4; cursor: default; }
.fly-controls button:focus-visible { outline: 2px solid var(--color-brand, #4A8C3F); outline-offset: 2px; }
@keyframes galleryAuto { from { width: 0% } to { width: 100% } }
.gallery-autobar { height: 3px; border-radius: 999px; background: var(--color-brand, #4A8C3F);
  animation: galleryAuto 8s linear forwards; margin-bottom: 8px; }
[data-senior="on"] .fly-controls button { min-height: var(--touch, 56px); }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } .fly-overlay { animation: none; } }