/* ───────────────────────────────────────────────────────────────────────────
   leaflet.markercluster 1.5.3 — vendorado local (sem CDN/CSP).
   Bloco 1: estrutural (upstream dist/MarkerCluster.css — só transições).
   Bloco 2: tema Roda de Memórias (substitui o MarkerCluster.Default.css azul).
   Tokens vêm do @theme do Tailwind (app/assets/tailwind/application.css).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Estrutural (upstream) ────────────────────────────────────────────────── */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
  -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
  -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
  -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* ── Tema: bolha de cluster (contagem) ────────────────────────────────────── */
/* Wrapper é o .leaflet-div-icon padrão — zera o box branco do Leaflet. */
.mv-cluster-wrap {
  background: transparent;
  border: 0;
}
.mv-cluster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-laranja);
  color: #2A1605;
  border: 2px solid var(--color-areia);
  box-shadow: 0 2px 6px rgb(36 26 19 / 0.35), 0 0 0 1px var(--color-laranja-700);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mv-cluster-m { font-size: 14px; }
/* Aglomerado grande vira vermelho — densidade vira ênfase (disciplina de paleta:
   laranja + vermelho + petróleo, nada fora). */
.mv-cluster-l {
  background: var(--color-vermelho);
  color: var(--color-areia);
  box-shadow: 0 2px 8px rgb(36 26 19 / 0.4), 0 0 0 1px var(--color-vermelho-700);
  font-size: 15px;
}

/* ── Tema: pin individual (centroid da casa) ──────────────────────────────── */
.mv-pin {
  background: transparent;
  border: 0;
}
.mv-pin-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--color-petroleo);
  box-shadow: 0 0 0 3px rgb(250 241 227 / 0.9), 0 2px 6px rgb(36 26 19 / 0.4);
}