/* ═══════════════════════════════════════════════════════════════
   MAPA INTERACTIVO · Patagonia nocturna
   Capa Leaflet: pines, racimos, etiquetas y cromo del mapa.

   Requiere los tokens de patagonia.css (--fondo-2, --panel, --borde,
   --texto-*, --hielo, --aviso, --r-m, --tr, --sombra).
   Cárgalo DESPUÉS de leaflet.css y MarkerCluster.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Contenedor y cromo de Leaflet ─────────── */
.mapa{ position:absolute; inset:0; }

.leaflet-container{
  background:var(--fondo-2);          /* si no, destella blanco al panear */
  font-family:var(--tipo, system-ui, sans-serif);
}
.leaflet-control-attribution{
  background:rgba(8,17,27,.82) !important;
  color:var(--texto-3) !important;
  font-size:.62rem !important;
  border-radius:6px 0 0 0;
  padding:2px 7px !important;
  backdrop-filter:blur(8px);
}
.leaflet-control-attribution a{ color:var(--texto-2) !important; }

/* ─────────── Pines ───────────
   .pin es el divIcon: hay que matar la caja blanca de Leaflet.
   .pin-in lleva el color de la serie en --c-b.                     */
.pin{ background:none !important; border:none !important; }
.pin-in{
  position:relative; width:34px; height:44px;
  transform-origin:50% 100%;
  transition:transform 200ms cubic-bezier(.34,1.56,.64,1), filter 200ms;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
  cursor:pointer;
}
.pin-in svg{ width:34px; height:44px; overflow:visible; stroke:none; display:block; }
.pin-in:hover{ transform:scale(1.22) translateY(-3px); z-index:900; }
.pin-in:hover .halo{ opacity:.5; transform:scale(1.5); }

.halo{
  position:absolute; left:50%; top:14px; width:34px; height:34px; margin-left:-17px;
  border-radius:50%; background:var(--c-b); opacity:0; transform:scale(.6);
  transition:opacity 250ms, transform 250ms; filter:blur(9px); pointer-events:none;
}
.pin-in.activo{ transform:scale(1.3) translateY(-4px); z-index:950; }
.pin-in.activo .halo{ opacity:.62; transform:scale(1.7); animation:latir 2.1s ease-in-out infinite; }
@keyframes latir{
  0%,100%{ opacity:.42; transform:scale(1.5); }
  50%    { opacity:.72; transform:scale(1.95); }
}

/* Coordenada de baja confianza: contorno punteado + insignia */
.pin-in.aprox .cuerpo{ stroke:var(--aviso, #f0b23f); stroke-width:1.6; stroke-dasharray:3.5 2.6; }
.marca-aprox{
  position:absolute; right:-1px; top:-1px; width:13px; height:13px; border-radius:50%;
  background:var(--aviso, #f0b23f); color:#3a2600; font-size:9px; font-weight:700;
  display:grid; place-items:center; border:1.5px solid #0b1623; line-height:1;
}

/* ─────────── Racimos (clusters) ───────────
   El anillo es un conic-gradient con un tramo por serie.       */
.racimo{ background:none !important; border:none !important; }
.racimo-in{
  position:relative; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--anillo));
  box-shadow:0 4px 16px -3px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
  transition:transform 200ms cubic-bezier(.34,1.56,.64,1);
}
.racimo-in:hover{ transform:scale(1.11); }
.racimo-in::after{        /* disco interior que deja ver sólo el anillo */
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #16283b, #0a1420);
  border:1px solid rgba(255,255,255,.07);
}
.racimo-n{
  position:relative; z-index:2; font-size:.84rem; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.racimo-in.g{ width:56px; height:56px; }          /* > 24 puntos */
.racimo-in.g .racimo-n{ font-size:.95rem; }

/* ─────────── Etiqueta al pasar el cursor ─────────── */
.leaflet-tooltip.eti{
  background:rgba(8,17,27,.94); border:1px solid var(--borde-fuerte); color:var(--texto);
  border-radius:9px; padding:5px 10px; font-size:.74rem; font-weight:500;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.8); backdrop-filter:blur(8px);
}
.leaflet-tooltip.eti::before{ display:none; }     /* sin pico */
.eti small{ display:block; color:var(--texto-3); font-size:.65rem; font-weight:400; margin-top:1px; }

/* ─────────── Ventanas emergentes (si usas L.popup) ─────────── */
.leaflet-popup-content-wrapper{
  background:var(--panel-solido); color:var(--texto);
  border:1px solid var(--borde); border-radius:var(--r-m);
  box-shadow:var(--sombra);
}
.leaflet-popup-content{ margin:12px 14px; font-size:.78rem; line-height:1.5; }
.leaflet-popup-tip{ background:var(--panel-solido); border:1px solid var(--borde); }
.leaflet-container a.leaflet-popup-close-button{ color:var(--texto-3); }
.leaflet-container a.leaflet-popup-close-button:hover{ color:var(--texto); }