.mapa-sp-panel {
    width: 100%;
    grid-column: 1 / -1;
}

.mapa-sp-container {
    position: relative;

    width: 100%;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 14px;

    background:linear-gradient(145deg,rgba(8,31,53,.98),rgba(8,27,47,.98))

}


#mapaSpSvg {
    display: block;

    width: 100%;
    height: auto;

    max-height: 540px;
}


/* =====================================================
   MARCADOR
   ===================================================== */

.mapa-city {
    cursor: pointer;
}

.mapa-city-circle {
    stroke: rgba(255,255,255,.90);
    stroke-width: 2;

    transition:
        r .18s ease,
        opacity .18s ease;
}

.mapa-city-halo {
    opacity: .20;

    transition:
        opacity .18s ease,
        r .18s ease;
}


.mapa-city:hover .mapa-city-circle {
    r: 10;
}

.mapa-city:hover .mapa-city-halo {
    r: 18;
    opacity: .32;
}


/* =====================================================
   NOME DA CIDADE
   ===================================================== */

.mapa-city-label {
    fill: #ffffff;

    font-size: 14px;
    font-weight: 600;

    dominant-baseline: middle;

    pointer-events: none;

    paint-order: stroke;

    stroke: #061d31;
    stroke-width: 4px;
    stroke-linejoin: round;
}


/* =====================================================
   TOOLTIP
   ===================================================== */

.mapa-tooltip {
    position: absolute;

    display: none;

    min-width: 220px;

    padding: 14px 16px;

    border-radius: 12px;

    z-index: 20;

    pointer-events: none;

    background: rgba(4, 25, 43, .97);

    border: 1px solid rgba(71, 143, 198, .40);

    box-shadow:
        0 14px 35px rgba(0,0,0,.40);

    color: #fff;
}


.mapa-tooltip-title {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-bottom: 9px;
    margin-bottom: 7px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    font-size: 14px;
    font-weight: 700;
}


.mapa-tooltip-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}


.mapa-tooltip-row {
    display: flex;

    justify-content: space-between;

    gap: 25px;

    padding: 4px 0;

    color: #9fb3c6;

    font-size: 12px;
}


.mapa-tooltip-row strong {
    color: #fff;
    font-weight: 600;
}