:root {
  color-scheme: dark;
  --fundo: #0B2023;
  --superficie: #0F2A2E;
  --elevada: #1A3D42;
  --linha: #2C5157;
  --texto: #F2F8F5;
  --suave: #B9CCC7;
  --fraco: #8CA5A0;
  --verde: #32D6A8;
  --sem-dado: #2A474C;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --serie-7: #9085e9;
  --serie-8: #e66767;
  --outros: #6F8A8A;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.4 Archivo, system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

button, select, input { color: inherit; font: inherit; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.barra {
  display: flex;
  align-items: center;
  flex: none;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}

.marca { display: flex; align-items: center; gap: 8px; }
.marca svg { width: 30px; height: 30px; }
.marca b { display: block; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.marca small { display: block; color: var(--suave); font-size: 12px; }

.tela { display: flex; flex: 1; min-height: 0; }

.mapa { position: relative; flex: 1; min-width: 0; overflow: hidden; }

#svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#svg.arrastando { cursor: grabbing; }

.mun {
  fill: var(--sem-dado);
  stroke: var(--suave);
  stroke-width: 1.500;
  vector-effect: non-scaling-stroke;
}

.ponto {
  stroke: var(--fundo);
  stroke-width: 1.500;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.ponto:hover, .ponto.ativo { stroke: var(--texto); stroke-width: 2.500; }

.zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--linha);
}

.zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--superficie);
  font-size: 19px;
  cursor: pointer;
}

.zoom button:hover { background: var(--elevada); }

.dica {
  position: absolute;
  z-index: 2;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font-size: 13px;
  pointer-events: none;
}

.dica b { display: block; }
.dica span { color: var(--suave); }

.fonte {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--fraco);
  font-size: 11px;
}

.painel {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 400px;
  min-height: 0;
  border-left: 1px solid var(--linha);
  background: var(--superficie);
}

.filtros {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 8px;
  padding: 12px 16px 0;
}

.filtros .inteiro { grid-column: 1 / -1; }

.filtros .inteiro[hidden] { display: none; }

.filtros label {
  color: var(--suave);
  font: 500 11px/1.4 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

select, input {
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--fundo);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

select option { background: var(--superficie); }

.busca { position: relative; padding: 4px 16px 12px; }

.sugestoes {
  position: absolute;
  right: 16px;
  left: 16px;
  z-index: 5;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--elevada);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.sugestoes button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.sugestoes button:hover, .sugestoes button:focus-visible { background: var(--linha); }
.sugestoes small { display: block; color: var(--suave); }
.sugestoes p { padding: 12px; color: var(--suave); }

.conteudo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 24px;
  border-top: 1px solid var(--linha);
}

.voltar {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--verde);
  font-weight: 500;
  cursor: pointer;
}

.voltar:hover { text-decoration: underline; }

h2 {
  font-size: 22px;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
}

h3 {
  margin: 20px 0 8px;
  color: var(--suave);
  font: 700 11px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sub { margin-top: 3px; color: var(--suave); font-size: 13px; }

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.numeros.quatro { grid-template-columns: repeat(2, 1fr); }

.numeros div { padding: 10px; border-radius: 10px; background: var(--elevada); }

.numeros b {
  display: block;
  font: 700 16px/1.2 "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.numeros small { color: var(--suave); font-size: 12px; }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; }

.legenda li { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.cor {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.escala { height: 12px; border-radius: 3px; }
.escala-rotulos { display: flex; justify-content: space-between; margin-top: 4px; color: var(--suave); font-size: 12px; }

.lista { display: grid; gap: 10px; padding: 0; list-style: none; }

.barra-cand .linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.barra-cand .nome { min-width: 0; overflow-wrap: anywhere; }
.barra-cand .nome small { color: var(--suave); }
.barra-cand .valor { flex: none; font-variant-numeric: tabular-nums; }
.barra-cand .valor small { color: var(--suave); }

.trilho { height: 6px; margin-top: 4px; border-radius: 3px; background: var(--elevada); }
.trilho i { display: block; height: 100%; min-width: 2px; border-radius: 3px; }

.botao-cand {
  display: block;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.botao-cand:hover .nome { text-decoration: underline; }

.item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.item:hover { background: var(--elevada); }
.item .cor { margin-top: 4px; }
.item b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.item small { display: block; color: var(--suave); font-size: 12px; }

.mais {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.mais:hover { background: var(--elevada); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td { padding: 7px 4px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }

th { color: var(--suave); font-weight: 500; }

td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.aviso { margin-top: 14px; color: var(--suave); font-size: 13px; }

.carregando { color: var(--suave); }

.erro { color: #F2A7A7; }

@media (max-width: 800px) {
  .tela { flex-direction: column; }
  .mapa { flex: none; height: 44vh; }
  .painel { flex: 1; width: 100%; border-top: 1px solid var(--linha); border-left: 0; }
  .filtros { padding-top: 10px; }
  .conteudo { -webkit-overflow-scrolling: touch; }
}