/* Zoom, seleção e modo "regiões" do mapa (public/mapa.js). Tudo sob .mz, classe que o módulo põe em .mapa-wrap. */

/* ---------- interação ---------- */
.mz #mapa { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mz.mz-livre #mapa { touch-action: none; cursor: grab; }
.mz.mz-arrastando #mapa { cursor: grabbing; }
.mz #mapa:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }
.mz #mapa:focus:not(:focus-visible) { outline: none; }

/* Traços de espessura constante na tela (non-scaling-stroke) nos poucos elementos: 27 estados, guias, seleção. */
.mz #mapa .uf, .mz #mapa .guia, .mz #mapa .mz-bordas path, .mz #mapa .mz-sel path { vector-effect: non-scaling-stroke; }
/* Municípios (5.570 paths): SEM transição de cor (cada quadro da transição repintava o mapa todo). Na visão do
   Brasil (zoom 1x) o traço escala com o mapa, barato; o non-scaling-stroke (que custa layout a cada quadro) só
   entra com zoom (.mz-livre). */
.mz #mapa .mun { transition: none; stroke-width: 0.75; stroke-linejoin: round; }
.mz #mapa .mun:hover { stroke: var(--mapa-sel); stroke-width: 2; }
.mz.mz-livre #mapa .mun { vector-effect: non-scaling-stroke; stroke-width: 0.25px; }
.mz.mz-livre #mapa .mz-camada-sel .mun { stroke-width: 0.6px; } /* estado selecionado (malha detalhada): bordas das cidades mais nítidas. Sem seletor por data-nivel: mudar o atributo reestilizaria os 5.570 */
.mz.mz-livre #mapa .mun:hover { stroke-width: 1.2px; }
.mz #mapa .uf { stroke-width: 0.6px; stroke-linejoin: round; transition: fill 0.6s var(--ease); } /* sem filter: o brightness() no hover repintava um path enorme */
.mz #mapa .uf:hover, .mz #mapa .uf:focus-visible { stroke-width: 1.5px; filter: none; }

/* ---------- camada base: nada fica sem pintura ---------- */
/* 27 contornos de estado em "sem dados" por baixo dos municípios: frestas entre malhas, municípios sem cor e água
   mostram o neutro do tema, não o fundo da página. Fora do Brasil continua o fundo. */
.mz #mapa .mz-base-uf { fill: var(--mapa-vazio); stroke: none; pointer-events: none; }
/* Lagoa dos Patos e Mirim: o neutro do tema com um fio de azul, discreto nos dois temas */
.mz #mapa .mz-agua path { --mz-agua: color-mix(in srgb, var(--mapa-vazio) 76%, #4a82b8); fill: var(--mz-agua); pointer-events: none;
  stroke: var(--mz-agua); stroke-width: 1.6; stroke-linejoin: round; } /* fio de 0,8 u de cada lado, por baixo dos municípios e escalando com o zoom: fecha ilhotas e frestas entre a lagoa e a margem */
.mz #mapa .mz-agua.mz-fora { opacity: 0.3; }
.mz #mapa[data-modo='municipios'] .uf { stroke-width: 1px; }
.mz #mapa .guia { stroke-width: 0.8px; }

/* etiquetas laterais somem com zoom (> 1,5×) e fora do modo estados/municípios */
.mz #mapa .laterais { transition: opacity 0.2s; }
.mz #mapa .laterais.mz-oculto { opacity: 0; visibility: hidden; }
.mz #mapa .mz-oculto { visibility: hidden; }

/* ---------- seleção: foco, véu e contorno ---------- */
.mz #mapa .camada-mun.mz-visivel { display: inline; }
.mz #mapa .uf.mz-foco { fill-opacity: 0; pointer-events: none; }
.mz #mapa .uf.mz-fora { fill-opacity: 0.32; pointer-events: auto; }
/* com municípios por baixo, o véu é escuro para apagá-los */
.mz #mapa[data-modo='municipios'] .uf.mz-fora,
.mz #mapa[data-nivel='uf'] .uf.mz-fora,
.mz #mapa[data-nivel='mun'] .uf.mz-fora { fill: var(--mapa-veu) !important; fill-opacity: 0.7; }
.mz #mapa .mz-sel path { fill: none; stroke: var(--mapa-sel); stroke-width: 2px; stroke-linejoin: round; pointer-events: none; }
.mz #mapa .mz-sel .mz-mun { stroke-width: 2.5px; fill: color-mix(in srgb, var(--mapa-sel) 14%, transparent); }

/* ---------- modo regiões ---------- */
.mz #mapa[data-modo='regioes'] .camada-mun:not(.mz-visivel),
.mz #mapa[data-modo='regioes'] .rotulos,
.mz #mapa[data-modo='regioes'] .laterais { display: none; }
.mz #mapa[data-modo='regioes'] .uf:not(:hover):not(:focus-visible) { stroke: var(--mapa-borda); stroke-width: 0.5px; }
.mz #mapa .mz-bordas, .mz #mapa .mz-rotreg { display: none; }
.mz #mapa[data-modo='regioes'] .mz-bordas, .mz #mapa[data-modo='regioes'] .mz-rotreg { display: inline; }
.mz #mapa[data-nivel='uf'] .mz-rotreg, .mz #mapa[data-nivel='mun'] .mz-rotreg { display: none; }
.mz #mapa .mz-bordas path { fill: none; stroke: var(--bg); stroke-width: 3px; stroke-linecap: round; pointer-events: none; }

/* ---------- controles ---------- */
.mz-ctrl { position: absolute; top: 16px; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.mz-b {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--linha-forte); border-radius: 9px;
  background: var(--vidro); color: var(--texto);
  font: 600 18px/1 var(--sans); cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.mz-b.mz-brasil { font-size: 12px; letter-spacing: 0.02em; }
.mz-b:hover { background: var(--card-3); }
.mz-b:active { transform: scale(0.94); }
.mz-b:focus-visible, .mz-trilha button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.mz-trilha { position: absolute; top: 16px; left: 0; z-index: 3; max-width: calc(100% - 64px); }
.mz-trilha ol {
  display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0;
  padding: 5px 11px; border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--vidro); font-size: 13px;
}
.mz-trilha li + li::before { content: '›'; margin: 0 6px; color: var(--fraco); }
.mz-trilha li[aria-current] { color: var(--texto); font-weight: 600; }
.mz-trilha button { padding: 0; border: 0; background: none; color: var(--suave); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mapa-guia); }
.mz-trilha button:hover { color: var(--texto); }

.mz-cartao {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: min(230px, 40%);
  padding: 10px 12px; border: 1px solid var(--tooltip-borda); border-left: 3px solid var(--c, var(--mapa-guia)); border-radius: 10px;
  background: color-mix(in srgb, var(--tooltip) 94%, transparent); box-shadow: 0 10px 30px var(--sombra); font-size: 13px;
}
.mz-cartao .mz-nome { display: block; font-size: 15px; line-height: 1.2; }
.mz-cartao > small { display: block; margin-bottom: 6px; }
.mz-linha { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding-top: 4px; }
.mz-linha span { color: var(--c); font-weight: 600; }
.mz-linha b { font-variant-numeric: tabular-nums; }
.mz-linha small { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }

.mz-dica {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%);
  margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.78);
  color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.mz-dica.mz-visivel { opacity: 1; }

/* desempenho: 5.570 municípios. Durante arrasto/zoom, raster sem antialias */
.mz.mz-arrastando #mapa .mun, .mz.mz-movendo #mapa .mun { shape-rendering: optimizeSpeed; }

/* modo leve: <html data-leve="1"> (tema-inicial.js). Aparelho fraco, Save-Data ou movimento reduzido:
   sem transições nem desfoque, traços simples, menos rótulos. */
[data-leve='1'] .mz #mapa .uf, [data-leve='1'] .mz #mapa .chip, [data-leve='1'] .mz #mapa .laterais, [data-leve='1'] .mz #mapa.mz-replay .uf { transition: none; }
[data-leve='1'] .mz:not(.mz-livre) #mapa .mun { stroke: none; } /* Brasil inteiro: sem traço nos municípios (dobra o custo de pintura) */
[data-leve='1'] .mz #mapa .rotulos .valor, [data-leve='1'] .mz #mapa .mz-rotreg .valor { display: none; } /* só as siglas; chips laterais ficam */
[data-leve='1'] .mz-cartao { box-shadow: none; }
[data-leve='1'] .mz-dica { transition: none; }

@media (max-width: 760px) {
  .mz-cartao { position: static; width: auto; margin-top: 8px; }
  .mz-trilha ol { font-size: 12px; padding: 4px 9px; }
  .mz-ctrl { top: 10px; flex-direction: row; } /* em linha: em coluna cobriria as etiquetas laterais */
  .mz-trilha { top: 10px; max-width: calc(100% - 132px); }
  .mz-b { min-width: 32px; height: 32px; }
  .mz-dica { white-space: normal; text-align: center; width: max-content; max-width: 80%; }
}
@media (pointer: coarse) {
  .mz-b { min-width: var(--toque); height: var(--toque); }
  .mz-trilha { max-width: calc(100% - 170px); }
}

/* replay da linha do tempo: só estados (27 paths por quadro), malha de municípios fora */
.mz #mapa.mz-replay .camada-mun { display: none !important; }
.mz #mapa.mz-replay .uf { fill-opacity: 1; pointer-events: auto; transition: fill 0.25s linear; }

/* Exterior (public/mundo.js): com o mapa-múndi na tela o do Brasil só fica oculto, nada é desmontado (modo, zoom e seleção voltam como estavam) */
.mapa-wrap.mundo-ativo > :is(#mapa, .tooltip, .mapa-pill, .mapa-legenda, .mz-ctrl, .mz-trilha, .mz-cartao, .mz-dica) { display: none !important; }
.mapa-col:has(.mundo-ativo) { position: static; } /* o mapa-múndi + tabelas passam da altura da tela: sem grudar no topo */
.modo.exterior-btn { margin-left: 2px; }
.modo.exterior-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.modo.exterior-btn[aria-busy='true'] { cursor: progress; }