/* ==========================================================================
   Mapa do Brasil (SVG) — componente compartilhado (assets/js/mapa-brasil.js)
   Cores vêm dos tokens do tema da unidade: --accent (intensidade), --brand (selecionado),
   --paper-3 (sem dados), --accent-2 (anel da unidade do site).
   Traçados: @svg-maps/brazil, de Victor Cazanave (CC BY 4.0).
   ========================================================================== */
.br-map { --br-here: var(--accent-2); position: relative; width: 100%; }
[data-unidade="sp"] .br-map, [data-unidade="pb"] .br-map { --br-here: var(--ink); }
.br-svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }

/* estados */
.br-uf { fill: var(--paper-3); stroke: var(--card); stroke-width: 1.4; stroke-linejoin: round; outline: none; transition: fill .35s var(--ease), opacity .35s var(--ease); }
.br-uf.has { fill: color-mix(in oklab, var(--accent) var(--pct, 50%), var(--card)); cursor: pointer; }
.br-uf.has:hover { fill: color-mix(in oklab, var(--accent) 92%, var(--card)); }
.br-uf.sel { fill: var(--brand); }
.br-uf.dim { opacity: .28; }
.br-uf:not(.has):hover { fill: color-mix(in oklab, var(--ink) 12%, var(--paper-3)); }

/* camadas por cima: o estado selecionado e o estado sob o cursor/foco "saltam" do mapa */
.br-lift { pointer-events: none; opacity: 0; stroke: var(--card); stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.br-lift-sel { fill: var(--brand); }
.br-lift-sel.on { opacity: 1; transform: scale(1.04); filter: drop-shadow(0 6px 10px color-mix(in oklab, var(--brand) 45%, transparent)); transition: opacity .3s var(--ease), transform .45s var(--ease-bounce, var(--ease)); }
.br-lift-hov { fill: var(--accent); }
.br-lift-hov.is-sel { fill: var(--brand); }
.br-lift-hov.on { opacity: 1; transform: translateY(-3px) scale(1.07); filter: drop-shadow(0 10px 14px rgba(20, 16, 40, .28)); animation: br-pop .45s var(--ease) both; }
.br-lift-hov.foco.on { stroke: var(--ink); stroke-width: 2.4; }
@keyframes br-pop { from { opacity: 0; transform: scale(1); } 60% { transform: translateY(-4px) scale(1.09); } to { opacity: 1; transform: translateY(-3px) scale(1.07); } }

/* unidade do site: anel pulsante no centro do estado */
.br-here { pointer-events: none; opacity: 0; transition: opacity .4s; }
.br-here.on { opacity: 1; }
.br-here .br-dot { fill: var(--br-here); stroke: var(--card); stroke-width: 2.5; }
.br-here .br-ring { fill: none; stroke: var(--br-here); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: br-pulse 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.br-here .br-ring.r2 { animation-delay: 1.2s; }
@keyframes br-pulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }

/* onda única ao selecionar */
.br-ripple { pointer-events: none; }
.br-ripple circle { fill: none; stroke: var(--brand); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.br-ripple.on circle { animation: br-ripple .9s var(--ease) both; }
@keyframes br-ripple { from { transform: scale(.4); opacity: .8; } to { transform: scale(5); opacity: 0; } }

/* entrada em sequência */
.br-map.pre:not(.in) .br-uf { opacity: 0; }
.br-map.in .br-uf { transform-box: fill-box; transform-origin: center; animation: br-in .7s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
.br-map.in .br-uf.dim { animation-name: br-in-dim; }
@keyframes br-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes br-in-dim { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: .28; } }

/* tooltip */
.br-tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; display: grid; gap: 1px; min-width: 120px; max-width: 220px; padding: 9px 14px 10px; border-radius: 14px; text-align: center; white-space: nowrap;
    background: color-mix(in oklab, var(--ink) 94%, transparent); color: #fff; box-shadow: 0 14px 34px -10px rgba(20, 16, 40, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - 16px)) scale(.92); opacity: 0;
    transition: opacity .2s, transform .12s linear; }
.br-tip.on { opacity: 1; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - 16px)); }
.br-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.br-tip strong { font-weight: 600; font-size: .9rem; letter-spacing: -.01em; }
.br-tip span { display: inline-flex; gap: 6px; align-items: center; justify-content: center; font-size: .78rem; color: rgba(255, 255, 255, .78); }
.br-tip span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.br-tip.sel span::before { background: var(--accent-2); }
.br-tip.vazio span::before { background: rgba(255, 255, 255, .35); box-shadow: none; }

/* crédito do mapa (CC BY 4.0) */
.br-credit { display: block; margin-top: 10px; font-size: .66rem; line-height: 1.4; color: var(--ink-3); opacity: .75; text-align: right; }
.br-credit a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .br-here .br-ring, .br-ripple.on circle, .br-lift-hov.on, .br-map.in .br-uf { animation: none; }
    .br-map.pre:not(.in) .br-uf { opacity: 1; }
}
html[data-movimento] .br-here .br-ring { animation: none; opacity: .5; transform: scale(1.6); }
html[data-movimento] .br-map.pre:not(.in) .br-uf { opacity: 1; }