/* ─── Mapas Leaflet: tema oscuro + pin de marca del selector (ADR-030, ADR-039) ─── */
/* Sin @layer a propósito: Leaflet inyecta su CSS fuera de nuestras cascade layers
   y cualquier regla dentro de una capa le pierde. Lo carga `stylesheet_link_tag :app`
   (todo app/assets/**), DESPUÉS del leaflet.css vendoreado que va en `yield :head`.
   Los estilos de contenedor/controles/pins de /buscar siguen en application.css. */

/* Teselas oscuras: las de OSM son claras, así que se invierten SOLO ellas (no pins,
   popups ni controles). /buscar usa la base; el selector (`qe-map--picker`) la
   aclara un poco para que las calles se lean a zoom 17.
   Ojo: la DIRECCIÓN que muestra el selector no depende del mapa sino del
   reverse-geocode (Geocoding::ReverseLookup). En development la key de Google está
   restringida a la IP del VPS → cae a Nominatim, que en Colombia casi nunca trae
   placa ("Calle 31BB" en vez de "Carrera 87d #31B-25"). No es el tema del mapa. */
.qe-map--dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.9) saturate(0.35);
}
.qe-map--dark.qe-map--picker .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.95) saturate(0.4);
}

/* Pin FIJO central (shared/_map_pin_overlay). El wrapper es un PUNTO de 0×0 en el
   centro exacto del contenedor del mapa = getCenter() de Leaflet; las piezas se
   posicionan alrededor de ese punto. El ancla es la punta de la gota. */
.qe-map-pin {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 500;
  pointer-events: none;
}
.qe-map-pin *,
.qe-map-pin *::before { box-sizing: border-box; }

/* Suelo: elipse 10×4 centrada en el ancla, con el punto exacto en coral-300. */
.qe-map-pin__ground {
  position: absolute; left: -5px; top: -2px;
  width: 10px; height: 4px; border-radius: 9999px;
  background: rgb(0 0 0 / 0.5);
  transition: transform 180ms cubic-bezier(0.3, 1.4, 0.6, 1), opacity 180ms ease;
}
.qe-map-pin__ground::before {
  content: ""; position: absolute; left: 3px; top: 0;
  width: 4px; height: 4px; border-radius: 9999px;
  background: var(--color-coral-300);
}

/* Gota (SVG 28×40, punta en (14, 39)): se desplaza para que la punta toque el ancla.
   Halo coral como `.discovery-pin__dot`, vía drop-shadow (sigue la silueta). */
.qe-map-pin__body {
  position: absolute; left: -14px; top: -39px;
  width: 28px; height: 40px; overflow: visible;
  filter: drop-shadow(0 4px 6px rgb(233 69 96 / 0.55));
  transition: transform 180ms cubic-bezier(0.3, 1.4, 0.6, 1);
}

/* Levantado mientras el mapa se mueve (en el wrapper o en un ancestro). */
.is-lifted .qe-map-pin__body   { transform: translateY(-8px); }
.is-lifted .qe-map-pin__ground { transform: scale(1.5); opacity: 0.25; }

@media (prefers-reduced-motion: reduce) {
  .qe-map-pin__body   { transition: none; }
  .qe-map-pin__ground { transition: opacity 180ms ease; }
  .is-lifted .qe-map-pin__body   { transform: none; }
  .is-lifted .qe-map-pin__ground { transform: none; }
}