/* ============================================================
   Vías Verdes Murcia V5 — Microinteractions + Accesibilidad
   Focus rings WCAG-AA, hover refinado, transiciones spring,
   prefers-reduced-motion friendly. Carga después de styles.css.
   ============================================================ */

/* ===== FOCUS RINGS ACCESIBLES — global :focus-visible ===== */
*:focus { outline: none; }

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
  z-index: 5;
  position: relative;
}

/* Focus visible específico en markers del mapa */
.poi-marker:focus-visible,
.route-number-marker:focus-visible {
  outline: 3px solid var(--ring-color);
  outline-offset: 3px;
}

/* Focus en cards de ruta — usa el borde + sombra de marca */
.route-card:focus-visible {
  outline: none;
  border-color: var(--color-brand) !important;
  box-shadow: var(--ring), 0 8px 24px var(--card-hover-shadow) !important;
}

/* ===== HOVER REFINADO V5 — feedback SIN transform en el raíz =====
   IMPORTANTE: .poi-marker es el nodo que MapLibre posiciona escribiendo
   `transform: translate(...)` inline. Cualquier `transform` o
   `transition: transform` sobre este elemento hace que el icono se
   desplace/resbale al mover el mapa o salte de sitio al hacer hover
   (sobrescribe el translate de MapLibre). Por eso el feedback de hover va
   por box-shadow en el raíz y por escala del <svg> interno (esta última ya
   está definida en el <style> de index.html: `.poi-marker:hover svg`). */
.poi-marker {
  transition: box-shadow var(--dur-base) var(--ease-snappy),
              border-color var(--dur-base) var(--ease-snappy);
}

.poi-marker:hover {
  box-shadow: 0 6px 18px rgba(26, 74, 24, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===== RENDIMIENTO EN MOVIMIENTO — markers sin backdrop-filter al mover/zoom =====
   El backdrop-filter (blur de cristal) de los markers es de lo más caro de
   recomponer por frame; con cientos de markers visibles impide que el marker sea
   una capa de compositor "solo-transform" y hace que "patinen" respecto al mapa
   durante zoom/pan/carga. El JS (index.html, tras crear el mapa) añade
   body.vv-map-moving mientras el mapa se mueve y lo quita en reposo → el cristal
   solo se paga cuando el usuario mira fijo, no mientras navega. Durante el
   movimiento usamos fondo casi opaco para que no se vean translúcidos sin blur. */
body.vv-map-moving .poi-marker,
body.vv-map-moving .town-marker-icon,
body.vv-map-moving .vv-cluster-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.vv-map-moving .poi-marker { background: rgba(255, 255, 255, 0.96) !important; }
body.vv-map-moving .town-marker-icon { background: rgba(255, 255, 255, 0.96) !important; }
body.vv-map-moving .vv-cluster-inner { background: rgba(255, 255, 255, 0.96) !important; }

/* ===== BOTONES (V5 popup buttons) — feedback táctil ===== */
button[onclick*="goToPrevPoi"],
button[onclick*="goToNextPoi"],
button[onclick*="goToPoi"],
button[onclick*="open360Tour"] {
  transition: background var(--dur-fast) var(--ease-snappy),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-snappy);
}

button[onclick*="goToPrevPoi"]:hover,
button[onclick*="goToNextPoi"]:hover,
button[onclick*="goToPoi"]:hover {
  background: var(--btn-secondary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(26, 74, 24, 0.08);
}

button[onclick*="goToPrevPoi"]:active,
button[onclick*="goToNextPoi"]:active,
button[onclick*="goToPoi"]:active {
  transform: translateY(0) scale(0.98);
}

button[onclick*="open360Tour"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 140, 63, 0.35);
}

/* ===== POPUP MapLibre con animación de entrada ===== */
.maplibregl-popup-content {
  animation: vv-popup-in var(--dur-base) var(--ease-spring) both;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-glass-lg) !important;
}

@keyframes vv-popup-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== TIP / TOOLTIP — fade-in suave ===== */
.poi-marker .poi-tip {
  transition: opacity var(--dur-base) var(--ease-snappy),
              transform var(--dur-base) var(--ease-spring);
  transform: translateX(-50%) translateY(4px);
}

.poi-marker:hover .poi-tip {
  transform: translateX(-50%) translateY(0);
}

/* ===== ROUTE CARD — hover/focus enriquecido ===== */
.route-card {
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-snappy),
              border-color var(--dur-base) var(--ease-snappy);
}

/* ===== Aria-live region (oculta visualmente, anuncia a lectores) ===== */
.vv-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* ===== Estado :hover y :focus visualmente unificados para botones de filtros ===== */
.filter-btn:focus-visible,
.tab-btn:focus-visible,
.lang-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ===== Indicador de carga / activo en route-card ===== */
.route-card[aria-pressed="true"],
.route-card.is-active {
  border-color: var(--color-brand) !important;
  background: linear-gradient(135deg, rgba(74, 140, 63, 0.08), rgba(141, 186, 138, 0.04)) !important;
}

/* ===== Reduced motion: deshabilita animaciones complejas ===== */
@media (prefers-reduced-motion: reduce) {
  .poi-marker,
  .route-card,
  button {
    transition: none !important;
    animation: none !important;
  }

  .poi-marker:hover {
    transform: none;
  }

  .maplibregl-popup-content {
    animation: none !important;
  }
}

/* ===== Texto invisible reservado solo para lectores de pantalla ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MODO CINEMÁTICO — tour guiado 360 (mapa + foto)
   Panel acoplado: abajo en móvil, a la derecha en escritorio.
   El mapa queda visible y la cámara vuela por la traza mientras
   se muestra la panorámica del punto actual (thumbnail con auto-pan).
   z-index 45: sobre los controles del mapa (z-10) y bajo los
   modales/visores (z-50/60), que se abren por encima al "Explorar 360°".
   ============================================================ */
.vv-cine {
  position: fixed;
  z-index: 45;
  left: 0; right: 0; bottom: 0;
  height: 46vh; max-height: 520px;
  display: flex; flex-direction: column;
  background: var(--glass-bg, rgba(244, 243, 238, 0.9));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 -20px 50px rgba(26, 74, 24, 0.18);
  border-radius: 22px 22px 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-base, 0.3s) var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
  overflow: hidden;
}
.vv-cine.open { transform: translateY(0); }
.vv-cine.hidden { display: none; }

@media (min-width: 1024px) {
  .vv-cine {
    left: auto; top: 0; bottom: 0; right: 0;
    width: 440px; height: 100vh; max-height: none;
    border-radius: 22px 0 0 22px;
    transform: translateX(100%);
    border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: -20px 0 50px rgba(26, 74, 24, 0.18);
  }
  .vv-cine.open { transform: translateX(0); }
}

.vv-cine-photo {
  flex: 1; min-height: 0;
  background-color: #0b1f1c;
  background-position: 0% center;
  background-size: auto 130%;   /* equirectangular 2:1 más ancha que el panel → paneo horizontal */
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.vv-cine-photo.panning { animation: vv-cine-pan 14s linear infinite alternate; }
@keyframes vv-cine-pan {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}
.vv-cine-photo-empty { font-size: 40px; opacity: 0.5; }

.vv-cine-bar { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.vv-cine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vv-cine-titles { display: flex; flex-direction: column; min-width: 0; }
.vv-cine-title { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-cine-counter { font-size: 12px; color: var(--text-muted); }
.vv-cine-x {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.06); border: none; cursor: pointer;
  font-size: 16px; color: var(--text-secondary); line-height: 1;
}
.vv-cine-x:hover { background: rgba(0, 0, 0, 0.12); }

.vv-cine-progress { height: 4px; border-radius: 4px; background: rgba(74, 140, 63, 0.15); overflow: hidden; margin-bottom: 14px; }
.vv-cine-progress-fill { height: 100%; width: 0; background: var(--color-brand, #4A8C3F); border-radius: 4px; transition: width var(--dur-base, 0.3s) var(--ease-snappy, ease); }

.vv-cine-controls { display: flex; align-items: center; gap: 10px; }
.vv-cine-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer; font-size: 16px; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast, 0.15s) var(--ease-spring, ease), background var(--dur-fast, 0.15s) ease;
}
.vv-cine-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.92); }
.vv-cine-btn:active { transform: scale(0.95); }
.vv-cine-btn-play { background: var(--color-brand, #4A8C3F); color: #fff; border-color: transparent; }
.vv-cine-btn-play:hover { filter: brightness(1.08); }
.vv-cine-explore {
  flex: 1; height: 46px; border-radius: 23px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #4285F4, #1A4A18); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vv-cine-explore:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .vv-cine { transition: none; }
  .vv-cine-photo.panning { animation: none; }
  .vv-cine-progress-fill { transition: none; }
}