/* ============================================================
   Vías Verdes Murcia V5 — POI Icon gradient containers
   Cada clase .poi-<tipo> aplica el gradiente del tipo de POI
   sobre el círculo glass que envuelve al SVG Lucide.
   Migrado desde inline <style> de V3 + 4 tipos nuevos V5.
   ============================================================ */

/* === Tipos V3 existentes === */
.poi-estacion             { background: linear-gradient(135deg, #4A8C3F, #1A4A18); }
.poi-tunel                { background: linear-gradient(135deg, #6B7280, #4B5563); }
.poi-pueblo               { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.poi-area_descanso        { background: linear-gradient(135deg, #84CC16, #65A30D); }
.poi-puente               { background: linear-gradient(135deg, #D97706, #B45309); }
.poi-patrimonio           { background: linear-gradient(135deg, #92400E, #78350F); }
.poi-panel_interpretativo { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.poi-punto_conflictivo    { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.poi-mirador              { background: linear-gradient(135deg, #F59E0B, #D97706); }
.poi-servicio             { background: linear-gradient(135deg, #0EA5E9, #0284C7); }
.poi-albergue             { background: linear-gradient(135deg, #059669, #047857); }
.poi-alojamiento          { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.poi-restaurante          { background: linear-gradient(135deg, #E11D48, #BE123C); }
.poi-aparcamiento         { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.poi-centro_salud         { background: linear-gradient(135deg, #E11D48, #BE123C); }
.poi-comisaria            { background: linear-gradient(135deg, #1E40AF, #1E3A8A); }
.poi-farmacia             { background: linear-gradient(135deg, #16A34A, #15803D); }
.poi-supermercado         { background: linear-gradient(135deg, #EA580C, #C2410C); }
.poi-oficina_turismo      { background: linear-gradient(135deg, #0891B2, #0E7490); }

/* === Tipos retirados (mantener por compatibilidad legacy en datos antiguos) === */
.poi-playa                { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.poi-fuente_agua          { background: linear-gradient(135deg, #0891B2, #0E7490); }
.poi-camping              { background: linear-gradient(135deg, #15803D, #166534); }

/* === NUEVOS tipos V5 === */
.poi-gastronomia          { background: linear-gradient(135deg, #DB2777, #BE185D); }
.poi-alquiler_bici        { background: linear-gradient(135deg, #0D9488, #0F766E); }
.poi-naturaleza           { background: linear-gradient(135deg, #15803D, #14532D); }
.poi-foto_spot            { background: linear-gradient(135deg, #7C3AED, #5B21B6); }

/* ============================================================
   V5 refinement: marker .poi-marker (heredado de index.html)
   Pequeñas mejoras de animación al hover sin tocar layout.
   ============================================================ */
.poi-marker {
  transition: box-shadow var(--dur-base, 250ms) var(--ease-snappy, ease),
              border-color var(--dur-base, 250ms) var(--ease-snappy, ease);
}

.poi-marker.is-active {
  z-index: 25 !important;
  filter: drop-shadow(0 0 10px var(--color-brand-glow, #A9CBA0));
}

.poi-marker.is-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-brand, #4A8C3F);
  animation: poi-active-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes poi-active-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 0.3; }
}

/* Reduced motion: deshabilitar pulse */
@media (prefers-reduced-motion: reduce) {
  .poi-marker.is-active::before {
    animation: none;
    opacity: 0.5;
  }
}