/* ============================================================
   Bloco 2: Customização do Leaflet.markercluster
   
   Sobrescreve as cores padrão (azul) para combinar com o
   tema verde do catálogo.
   
   Adicione este arquivo ao style.css existente (copiar o conteúdo
   para o final do style.css), ou importe separadamente no index.html.
   ============================================================ */

/* Cluster pequeno (poucos marcadores) */
.marker-cluster-small {
    background-color: rgba(76, 175, 80, 0.5);
}
.marker-cluster-small div {
    background-color: rgba(27, 94, 32, 0.7);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

/* Cluster médio */
.marker-cluster-medium {
    background-color: rgba(255, 152, 0, 0.5);
}
.marker-cluster-medium div {
    background-color: rgba(230, 126, 0, 0.7);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

/* Cluster grande (muitos marcadores) */
.marker-cluster-large {
    background-color: rgba(211, 47, 47, 0.5);
}
.marker-cluster-large div {
    background-color: rgba(183, 28, 28, 0.7);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* Todos os clusters: borda e tamanho do texto interno */
.marker-cluster div {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    margin-top: 4px;
    text-align: center;
    border-radius: 50%;
    line-height: 32px;
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
}