/* Mapa das unidades de atendimento (mapa.js): imagens, marcadores, balão, controles, atribuição e dica */
.ps-mapa { position: relative; overflow: hidden; height: 380px; border-radius: var(--cs-raio, 14px); background: #e6ebe4;
    touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; isolation: isolate; }
.ps-mapa:focus-visible { box-shadow: 0 0 0 3px var(--cs-primaria, #26547C); }
.ps-mapa.arrastando { cursor: grabbing; }
.ps-mapa-tiles, .ps-mapa-marcadores { position: absolute; inset: 0; }
.ps-mapa-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ps-mapa-tile.carregada { opacity: 1; }

/* Marcador: o pino na cor do tipo, com o ícone do tipo dentro; a ponta fica no ponto exato */
.ps-mapa-marcador { position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 34px; height: 44px; margin: -44px 0 0 -17px; padding: 0;
    border: 0; background: none; color: var(--cor, #26547C); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); cursor: pointer; }
span.ps-mapa-marcador { cursor: inherit; }
/* width: o Font Awesome 7 dá 1,25em a todo ícone (55 px aqui), o que tiraria o pino do centro do marcador e a ponta
   do ponto exato */
.ps-mapa-pino { display: block; width: 100%; font-size: 44px; line-height: 44px; text-align: center; }
.ps-mapa-pino-icone { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); color: #fff; font-size: 13px; }
.ps-mapa-marcador:hover, .ps-mapa-marcador:focus-visible { z-index: 2; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) brightness(1.08); }

.ps-mapa-balao { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: .3rem; width: max-content; max-width: min(290px, calc(100vw - 48px));
    padding: .75rem 2.1rem .8rem .9rem; border-radius: 10px; background: #fff; color: #23303d; box-shadow: 0 10px 28px rgba(15, 35, 60, .28);
    font-size: .84rem; line-height: 1.35; cursor: auto; user-select: text; -webkit-user-select: text; }
.ps-mapa-balao::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ps-mapa-balao-titulo { font-size: .95rem; color: var(--c1-dkk, #1d3f5e); }
.ps-mapa-balao-tipo { justify-self: start; padding: .1rem .55rem; border-radius: 999px; background: var(--cor, #26547C); color: #fff; font-size: .72rem; font-weight: 700; }
.ps-mapa-balao-linha { display: flex; gap: .45rem; }
.ps-mapa-balao-linha i { flex: none; width: 1rem; margin-top: .15rem; color: #8a97a6; text-align: center; }
.ps-mapa-balao-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .15rem; font-weight: 700; }
.ps-mapa-balao-fechar { position: absolute; top: .35rem; right: .35rem; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5b6878; }
.ps-mapa-balao-fechar:hover { background: #eef2f6; }

.ps-mapa-controles { position: absolute; top: .65rem; right: .65rem; z-index: 4; display: grid; gap: 1px; overflow: hidden; border-radius: 8px;
    background: #d5dce4; box-shadow: 0 2px 8px rgba(15, 35, 60, .22); }
.ps-mapa-botao { width: 36px; height: 36px; padding: 0; border: 0; background: #fff; color: #23303d; }
.ps-mapa-botao:hover { background: #f1f5f9; color: var(--cs-primaria, #26547C); }
.ps-mapa-botao:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--cs-primaria, #26547C); outline-offset: -3px; }
.ps-mapa-atribuicao { position: absolute; right: 0; bottom: 0; z-index: 4; padding: 1px 7px; border-top-left-radius: 6px; background: rgba(255, 255, 255, .88); font-size: .68rem; }
.ps-mapa-atribuicao a { color: #23303d; }
.ps-mapa-dica { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 35, 60, .5);
    color: #fff; font-weight: 700; text-align: center; pointer-events: none; }

@media (max-width: 767.98px) { .ps-mapa { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .ps-mapa-tile { transition: none; } }
html.a11y-contraste .ps-mapa-balao, html.a11y-contraste .ps-mapa-botao, html.a11y-contraste .ps-mapa-atribuicao { background: #000 !important; color: #fff !important; }
html.a11y-contraste .ps-mapa-balao::after { border-top-color: #000; }
html.a11y-contraste .ps-mapa-balao-titulo, html.a11y-contraste .ps-mapa-atribuicao a, html.a11y-contraste .ps-mapa-balao a { color: #ff0 !important; }