/* ─────────────────────────────────────────────────────────────
   Cluster bubbles — compartilhado entre infomapa e cidades.
   Substitui o visual padrão (bolinhas amarelas/laranja) por
   bubbles translúcidos com blur de fundo e anel colorido por
   tamanho. Combina bem com tiles vetoriais e tema topo.
   ───────────────────────────────────────────────────────────── */
/* Cluster: visual leve sem backdrop-filter (caro p/ muitos bubbles).
   Halo simulado por outline pintado, não por blur de fundo. */
.marker-cluster {
    background: transparent !important;
    border-radius: 50%;
}

.marker-cluster div {
    background: #fff !important;
    color: #1e293b !important;
    font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    width: 34px;
    height: 34px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    /* halo simples por outline duplo (sem blur) */
    box-shadow: 0 0 0 4px var(--cluster-halo, rgba(255, 255, 255, .55));
}

.marker-cluster-small  div { border-color: #22c55e; }
.marker-cluster-medium div { border-color: #eab308; }
.marker-cluster-large  div { border-color: #ef4444; }

.marker-cluster-small  { --cluster-halo: rgba( 34, 197,  94, .35); }
.marker-cluster-medium { --cluster-halo: rgba(234, 179,   8, .35); }
.marker-cluster-large  { --cluster-halo: rgba(239,  68,  68, .35); }

/* ─────────────────────────────────────────────────────────────
   Popup do Leaflet — visual mais leve e moderno.
   ───────────────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .05);
}
.leaflet-popup-content {
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: .75rem .85rem;
}
.leaflet-popup-tip {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}