/* Planeta Vivo — estação de observação.
   O fundo é noite oceânica; o console é discreto de propósito.
   Toda a cor saturada vem do dado, nunca da decoração. */

:root {
  /* ambiente */
  --espaco: #04131e;
  --casco: #0b2232;
  --casco-alto: #15364b;
  --linha: #23506b;
  --linha-fraca: #16364a;
  --texto: #e8f3f9;
  --texto-fraco: #8fb0c4;
  --texto-tenue: #5f8099;

  /* dados: a paleta real do projeto */
  --propria: #3ad29f;
  --impropria: #ff5f57;
  --fogo: #ff8a1f;
  --fogo-alto: #ffd12e;
  --desmate: #e0683c;
  --especie: #b98cff;
  --ar: #4cc9f0;

  /* faixas do índice de qualidade do ar */
  --ar-1: #4ad991;
  --ar-2: #c9e265;
  --ar-3: #ffd12e;
  --ar-4: #ff8a3d;
  --ar-5: #ff4d4d;
  --ar-6: #b14fd8;

  --console-largura: 20rem;
  --raio: 3px;

  --sombra: 0 1.5rem 3rem rgb(1 8 14 / 0.55);
  --fonte-titulo: Archivo, "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--espaco);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body { overscroll-behavior: none; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

/* números são leitura de instrumento: alinham em coluna */
.numero, .valor-grande, .camada-conta, .leitura-valor, .barra-valor {
  font-variant-numeric: tabular-nums;
}

.pular {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.pular:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--casco-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
}

/* --------------------------------------------------------------- abertura */

/* O vídeo da apresentação cobre a tela enquanto o globo carrega por trás.
   Tudo aqui é pensado para a mão: os botões são grandes, ficam embaixo e o
   vídeo nunca é cortado — ele cabe inteiro, seja o celular em pé ou deitado. */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 1.1rem;
  padding: 1.2rem 0.85rem calc(1.4rem + env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 0%, #0b2232, var(--espaco) 70%);
}
.abertura[hidden] { display: none; }
.abertura-saindo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.abertura-centro {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.9rem;
  width: 100%;
}

.abertura-marca {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--texto);
}

.abertura-quadro {
  position: relative;
  /* A terceira medida é o que faz o vídeo caber com o celular deitado: a
     largura também é limitada pela altura que sobra, na proporção 3:2. */
  width: min(100%, 56rem, calc((100dvh - 11rem) * 1.5));
  border: 1px solid var(--linha-fraca);
  border-radius: var(--raio);
  overflow: hidden;
  background: #000;
  box-shadow: var(--sombra);
}

.abertura-video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #000;
}

/* Um fio no pé do vídeo diz quanto falta, sem roubar a atenção. */
.abertura-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgb(255 255 255 / 0.12);
}
.abertura-progresso span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ar);
  transition: width 220ms linear;
}

.abertura-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.abertura-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;          /* alvo de toque confortável no celular */
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 500;
  color: var(--texto);
  background: rgb(11 34 50 / 0.9);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
}
.abertura-botao:hover { border-color: var(--ar); }
.abertura-botao:focus-visible { outline: 2px solid var(--ar); outline-offset: 2px; }

/* O som é o que o aluno precisa ligar primeiro, então ele se destaca até estar
   ligado — depois volta a ser um botão comum. */
.abertura-som[aria-pressed="false"] {
  border-color: var(--ar);
  background: color-mix(in srgb, var(--ar) 18%, rgb(11 34 50 / 0.9));
}
.abertura-icone { flex: none; }
.abertura-som[aria-pressed="false"] .som-ligado { display: none; }
.abertura-som[aria-pressed="true"] .som-mudo { display: none; }

/* ------------------------------------------------------------------ globo */

#globo {
  position: fixed;
  inset: 0;
  background: var(--espaco);
}

.maplibregl-ctrl-attrib {
  font-size: 10px !important;
  background: rgb(4 19 30 / 0.78) !important;
  color: var(--texto-tenue) !important;
}
.maplibregl-ctrl-attrib a { color: var(--texto-fraco) !important; }
.maplibregl-ctrl-group {
  background: var(--casco) !important;
  border: 1px solid var(--linha-fraca) !important;
  box-shadow: none !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--linha-fraca) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) brightness(1.4); }

/* -------------------------------------------------------------------- topo */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.25rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(4 19 30 / 0.82), rgb(4 19 30 / 0));
}

.marca { display: grid; gap: 0.1rem; }
.marca-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}
.marca-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--texto-fraco);
  max-width: 24ch;
  line-height: 1.35;
}

/* ------------------------------------------------------------------ busca */

.busca { position: relative; pointer-events: auto; width: min(22rem, 42vw); }
.busca-rotulo, .busca-dica {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.busca-campo {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font: inherit;
  color: var(--texto);
  background: rgb(11 34 50 / 0.9);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  backdrop-filter: blur(8px);
}
.busca-campo::placeholder { color: var(--texto-tenue); }
.busca-campo:focus-visible {
  outline: 2px solid var(--ar);
  outline-offset: 1px;
  border-color: var(--ar);
}

.busca-lista {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--casco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.busca-lista[hidden] { display: none; }
.busca-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--texto);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.busca-item:hover, .busca-item:focus-visible {
  background: var(--casco-alto);
  outline: none;
}
.busca-item-uf { color: var(--texto-tenue); font-size: 0.82rem; }

/* ---------------------------------------------------------------- console */

.console {
  position: fixed;
  left: 1.25rem;
  top: 6.2rem;
  z-index: 10;
  width: var(--console-largura);
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
  padding: 0.9rem;
  background: rgb(11 34 50 / 0.9);
  border: 1px solid var(--linha-fraca);
  border-radius: var(--raio);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra);
}

.console-cabecalho { margin: 0; }

/* O cabeçalho é o botão que recolhe o console. */
.console-botao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0 0.6rem;
  font: inherit;
  color: var(--texto-fraco);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.console-botao:focus-visible { outline: 2px solid var(--ar); outline-offset: 2px; }

.console-titulo { font-size: 0.82rem; font-weight: 600; }
.console-resumo { margin-left: auto; font-size: 0.76rem; color: var(--texto-tenue); }
/* No computador o console cresce para baixo: aberto, a seta aponta para cima
   ("recolher"); recolhido, para baixo ("mostrar"). No celular ele cresce para
   cima a partir do rodapé, e a media query mais abaixo inverte os dois. */
.console-seta { flex: none; transform: rotate(180deg); transition: transform 160ms ease; }
.console-botao[aria-expanded="false"] .console-seta { transform: none; }

.console-conteudo { display: block; }

/* Recolhido, o console encolhe até a pastilha do cabeçalho e devolve o globo
   ao aluno — mas continua dizendo quantas camadas ficaram ligadas. */
.console-botao[aria-expanded="false"] { padding-bottom: 0; }
.console:has(.console-botao[aria-expanded="false"]) {
  width: auto;
  max-height: none;
  overflow: visible;
  /* a sombra do painel inteiro, sob uma pastilha, vira um borrão maior que ela */
  box-shadow: 0 0.4rem 1rem rgb(1 8 14 / 0.45);
}
.console:has(.console-botao[aria-expanded="false"]) .console-conteudo { display: none; }

.camadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.camada {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.65rem 0.6rem 0.55rem;
  font: inherit;
  text-align: left;
  color: var(--texto);
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.camada:hover { background: var(--casco-alto); }
.camada:focus-visible { outline: 2px solid var(--ar); outline-offset: -2px; }

/* a camada ligada se marca na própria cor do dado */
.camada[aria-checked="true"] {
  background: var(--casco-alto);
  border-left-color: var(--cor-camada, var(--ar));
}

.camada-marca {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--cor-camada, var(--ar));
  opacity: 0.35;
  transition: opacity 120ms ease;
}
.camada[aria-checked="true"] .camada-marca { opacity: 1; }

.camada-texto { display: grid; gap: 0.05rem; min-width: 0; }
.camada-nome { font-weight: 500; font-size: 0.94rem; }
.camada-resumo {
  font-size: 0.76rem;
  color: var(--texto-fraco);
  line-height: 1.3;
}

/* o que a camada tem agora: "423 points", "loading…", "Off" */
.camada-conta {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--texto-tenue);
}
.camada[aria-checked="true"] .camada-conta { color: var(--cor-camada, var(--texto-fraco)); }

/* o interruptor: a trava de um instrumento, não um botão de aplicativo */
.camada-chave {
  flex: none;
  position: relative;
  width: 2.25rem;
  height: 1.2rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: rgb(4 19 30 / 0.5);
  transition: background 140ms ease, border-color 140ms ease;
}
.camada-chave-botao {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 1px;
  background: var(--texto-tenue);
  transition: transform 140ms ease, background 140ms ease;
}
.camada[aria-checked="true"] .camada-chave {
  border-color: var(--cor-camada, var(--ar));
  background: color-mix(in srgb, var(--cor-camada, var(--ar)) 22%, transparent);
}
.camada[aria-checked="true"] .camada-chave-botao {
  transform: translateX(1.05rem);
  background: var(--cor-camada, var(--ar));
}

.camada-carregando .camada-marca {
  animation: pulsa 1s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* legenda interna de uma camada ligada */
.legenda {
  display: grid;
  gap: 0.3rem;
  margin: 0.1rem 0 0.5rem;
  padding: 0.5rem 0.65rem 0.6rem 1rem;
  font-size: 0.76rem;
  color: var(--texto-fraco);
  border-left: 3px solid var(--linha-fraca);
}
.legenda[hidden] { display: none; }
.legenda-linha { display: flex; align-items: center; gap: 0.5rem; }
.legenda-amostra {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  flex: none;
}
.legenda-glifo { flex: none; color: var(--cor-marca, var(--texto-fraco)); }
.legenda-faixa {
  display: flex;
  height: 0.4rem;
  border-radius: 2px;
  overflow: hidden;
}
.legenda-faixa span { flex: 1; }

.console-pe {
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--texto-tenue);
  border-top: 1px solid var(--linha-fraca);
}

/* ----------------------------------------------------------------- painel */

/* O detalhe é um diálogo nativo: centraliza sozinho, fecha no Esc e no toque
   fora, e tira o resto da página do caminho do leitor de tela. */
.painel {
  width: min(31rem, calc(100vw - 1.75rem));
  max-height: min(82dvh, 42rem);
  padding: 0;
  color: var(--texto);
  background: rgb(11 34 50 / 0.96);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--cor-camada, var(--ar));
  border-radius: var(--raio);
  box-shadow: 0 2rem 4rem rgb(1 8 14 / 0.6);
  overflow: hidden;
}
.painel[open] { display: flex; flex-direction: column; }

/* com o modal aberto o fundo não rola atrás dele no celular */
body:has(.painel[open]) { overflow: hidden; }

.painel::backdrop {
  background: rgb(2 10 17 / 0.55);
  backdrop-filter: blur(3px);
}

/* O cartão tem altura fixa; a rolagem acontece aqui dentro. */
.painel-corpo {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
  padding: 1.15rem 1.2rem calc(1.25rem + env(safe-area-inset-bottom));
}
.painel-corpo:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .painel[open] { animation: entra 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  .painel[open]::backdrop { animation: revela 180ms ease; }
  @keyframes entra {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
  @keyframes revela {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

.painel-fechar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--texto-fraco);
  background: rgb(11 34 50 / 0.8);
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
}
.painel-fechar:hover { color: var(--texto); background: var(--casco-alto); }
.painel-fechar:focus-visible { outline: 2px solid var(--ar); outline-offset: 1px; }

/* o espaçamento é do grid, não das margens que o navegador dá ao <p> */
.painel-corpo p { margin: 0; }

.p-origem {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-camada, var(--texto-fraco));
}

.p-titulo {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.15;
  padding-right: 2.4rem;
}
.p-local { font-size: 0.86rem; color: var(--texto-fraco); }

/* veredito: a resposta que o aluno veio buscar */
.vereditor {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.2rem 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda-veredito, var(--linha));
  border-left: 3px solid var(--cor-veredito, var(--linha));
  background: var(--fundo-veredito, var(--casco-alto));
}
.vereditor-glifo {
  margin-top: 0.1rem;
  color: var(--cor-veredito, var(--texto-fraco));
}
.vereditor-texto { display: grid; gap: 0.3rem; }
.vereditor-rotulo {
  font-family: var(--fonte-titulo);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cor-veredito, var(--texto));
}
.vereditor-motivo { font-size: 0.82rem; line-height: 1.5; color: var(--texto); }

.leitura {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linha-fraca);
  font-size: 0.86rem;
}
.leitura:last-of-type { border-bottom: 0; }
.leitura-nome { color: var(--texto-fraco); }
.leitura-valor { font-weight: 500; text-align: right; }

.p-bloco { display: grid; gap: 0.45rem; }
.p-bloco-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-fraco);
}
.p-nota { font-size: 0.8rem; line-height: 1.45; color: var(--texto-fraco); }

/* barras: usadas no ar e nas coletas */
.barras { display: grid; gap: 0.4rem; }
.barra { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.55rem; align-items: center; font-size: 0.8rem; }
.barra-nome { color: var(--texto-fraco); }
.barra-trilha { height: 0.42rem; background: var(--linha-fraca); border-radius: 2px; overflow: hidden; }
.barra-preenche { height: 100%; border-radius: 2px; background: var(--ar); }
.barra-valor { white-space: nowrap; font-weight: 500; }

/* série temporal das coletas */
.serie { display: grid; gap: 0.3rem; margin-top: 0.4rem; }
.serie-linha {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.8rem;
}
.serie-data { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.serie-trilha {
  position: relative;
  height: 0.42rem;
  background: var(--linha-fraca);
  border-radius: 2px;
}
.serie-preenche, .serie-norma { position: absolute; top: 0; }
.serie-preenche { left: 0; }

/* onde a norma corta: tudo à direita deste traço reprova */
.serie-norma {
  width: 0;
  height: 0.9rem;
  margin-top: -0.24rem;
  border-left: 1px dashed var(--texto-fraco);
  opacity: 0.75;
}
.serie-preenche { height: 100%; border-radius: 2px; }
.serie-linha:first-child .serie-norma::after {
  content: "limit";
  position: absolute;
  top: -0.95rem;
  left: 0.2rem;
  font-size: 0.62rem;
  color: var(--texto-tenue);
}
.serie-valor { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }

.fonte {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linha-fraca);
  font-size: 0.74rem;
  color: var(--texto-tenue);
  line-height: 1.4;
}
.fonte a { color: var(--texto-fraco); }
.fonte a:hover { color: var(--texto); }

.p-imagem {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--casco-alto);
}

/* resumo do lugar: um cartão por camada, cada um com a sua fonte */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.cartao {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  background: rgb(4 19 30 / 0.45);
  border: 1px solid var(--linha-fraca);
  border-left: 2px solid var(--cor-cartao, var(--texto-fraco));
  border-radius: var(--raio);
}
.cartao-topo { display: flex; align-items: center; gap: 0.35rem; }
.cartao-glifo { flex: none; color: var(--cor-cartao, var(--texto-fraco)); }
.cartao-rotulo {
  font-family: var(--fonte-texto);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--texto-fraco);
}
.cartao-valor {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cor-cartao, var(--texto));
}
.cartao-detalhe {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--texto-tenue);
}

/* o relatório inteiro de um ponto, para quem quiser ir fundo */
.p-acoes { display: grid; gap: 0.4rem; }
.p-acao {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  color: var(--texto);
  background: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
}
.p-acao:hover { background: var(--casco-alto); }
.p-acao:focus-visible { outline: 2px solid var(--ar); outline-offset: 1px; }

/* a dobra que guarda o texto de apoio e a procedência */
.p-mais {
  padding-top: 0.7rem;
  border-top: 1px solid var(--linha-fraca);
}
.p-mais-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--texto-fraco);
  cursor: pointer;
  list-style: none;
}
.p-mais-titulo::-webkit-details-marker { display: none; }
.p-mais-titulo::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 140ms ease;
}
.p-mais[open] .p-mais-titulo::before { transform: rotate(45deg); }
.p-mais-titulo:hover { color: var(--texto); }
.p-mais-titulo:focus-visible { outline: 2px solid var(--ar); outline-offset: 2px; }
.p-mais-corpo { display: grid; gap: 0.7rem; padding-top: 0.7rem; }
.p-mais-corpo .fonte { padding-top: 0; border-top: 0; }

.p-carregando { font-size: 0.86rem; color: var(--texto-fraco); }

/* ----------------------------------------------------------- aviso e rodapé */

.aviso {
  position: fixed;
  left: 50%;
  bottom: 3.2rem;
  z-index: 20;
  transform: translateX(-50%);
  max-width: min(32rem, 90vw);
  padding: 0.6rem 0.95rem;
  font-size: 0.84rem;
  background: var(--casco-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.aviso[hidden] { display: none; }

/* Fica acima da faixa de créditos do mapa, que ocupa a borda de baixo. */
.rodape {
  position: fixed;
  left: 1.25rem;
  bottom: 1.9rem;
  z-index: 9;
  pointer-events: none;
}
.creditos {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--texto-tenue);
  max-width: min(32rem, 46vw);
  text-shadow: 0 1px 3px rgb(4 19 30 / 0.9);
}

/* ------------------------------------------------------------- responsivo */

@media (max-width: 960px) {
  :root { --console-largura: 17rem; }
  .marca-sub { display: none; }
}

@media (max-width: 760px) {
  html, body { overflow: auto; }

  .topo {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
  }
  .busca { width: 100%; }

  /* no celular o console vira uma folha no rodapé; o detalhe segue no meio */
  .console {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 52vh;
    border-radius: var(--raio) var(--raio) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
  }

  /* Aqui o console é uma folha no rodapé, então as setas trocam de lado:
     aberto fecha para baixo, recolhido abre para cima. */
  .console-botao { padding-bottom: 0.5rem; }
  .console-seta { transform: none; }
  .console-botao[aria-expanded="false"] { padding-bottom: 0; }
  .console-botao[aria-expanded="false"] .console-seta { transform: rotate(180deg); }
  .rodape { display: none; }
  .aviso { bottom: 54vh; }

  .painel { max-height: 86dvh; }
  .painel-corpo { padding: 1.05rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .painel-fechar { width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}