html, body {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--cor-neutra-900, #2c1d17);
}

[slot="subtitulo"] a,
[slot="descricao"] a { 
  color: inherit; 
}

qmd-secao {
  display: flex;
}

qmd-card {
  display: flex;
  flex-direction: column;
}

qmd-card::part(cartao) {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}


#cardDescricaoIA::part(cartao) {
  position: relative;
}

#cardDescricaoIA qmd-frase-icone[variante="ia"] {
  position: absolute;
  top: 14px;
  right: 30px;
}


.cards-stats,
.cartoes-informativos,
#cartoes-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacamento-4, 16px);
  justify-content: center;
  align-items: center;
}

.card-com-seletor qmd-seletor {
  display: block;
  width: 100%;
  max-width: 100%;
  --qmd-seletor-espaco-branco: normal;
  --qmd-seletor-largura-minima: 0;

  --qmd-seletor-fonte-tamanho: var(--tipografia-semantica-paragrafos-paragrafo-3-fonte-tamanho);
  --qmd-seletor-fonte-peso: var(--tipografia-semantica-paragrafos-paragrafo-3-fonte-peso);
}

.cards-stats .card-com-seletor::part(texto) {
  display: none;
}

.card-com-seletor::part(slot) {
  min-height: 2.8rem;
  display: flex;
  align-items: first baseline;
  width: 100%;
  max-width: 100%;
}

qmd-card-pequeno {
  --qmd-card-pequeno-tamanho: 130px;
}

.cards-stats qmd-card-pequeno::part(texto) {
  min-height: 2.8em; /* reserva espaço para 2 linhas, alinhando os números */
  display: flex;
  align-items: first baseline;
}


[slot="cabecalho"].linha .esquerda,
[slot="cabecalho"].linha .direita {
  display: flex;
  align-items: center;
  gap: var(--espacamento-2, 8px);
}

.saida-visualizacao {
  width: 100%;
  min-height: var(--altura-visualizacao, 600px);
  position: relative;
}

.saida-visualizacao > qmd-tabela,
.saida-visualizacao > qmd-grafico-barra,
.saida-visualizacao > qmd-grafico-pie,
.saida-visualizacao > qmd-mapa {
  width: 100%;
  height: var(--altura-visualizacao, 600px);
  margin-top: 8px;
}

.saida-visualizacao > qmd-tabela {
  display: block;
  overflow: hidden;
}

#saidaVisualizacaoAtual1 { --altura-visualizacao: 450px; }
#saidaVisualizacaoAtual1 > qmd-tabela,
#saidaVisualizacaoAtual1 > qmd-grafico-barra {
  margin-top: 0;
}


.painel-evento-mapa {
  position: absolute;
  top: 68px;
  bottom: 12px;
  right: 12px;
  width: fit-content;
  max-width: calc(50% - 12px);
  height: fit-content;
  max-height: calc(100% - 68px - 12px);
  min-width: min(260px, 100%);
  overflow-y: auto;
  background: var(--cor-neutra-0, #fff);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  padding: var(--espacamento-4);
  font-size: var(--tipografia-fonte-tamanho-2);
  line-height: var(--tipografia-linha-altura-120);
  border-radius: var(--borda-raio-2, 4px);
  border: 2px solid rgba(0, 0, 0, 0.5);
  /* Oculto por padrão — só existe visualmente quando .aberto */
  display: none;
  z-index: 1001;
}

.painel-evento-mapa.aberto {
  display: block;
}

.painel-evento-mapa__fechar {
  position: absolute;
  top: 0;
  right: var(--espacamento-2, 8px);
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--cor-neutra-500);
}


.bloco-busca-ranking {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento-1, 4px);
  margin-top: 8px;
}

/* Indicador de carregamento dos eventos/centroides */
.saida-visualizacao > .status {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
}

.saida-visualizacao > .status.is-visible {
  display: flex;
}

.saida-visualizacao > .status--loading::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid var(--cor-neutra-300, #d1d5db);
  border-top-color: var(--cor-neutra-800, #1f2937);
  animation: qmd-status-carregamento-girar 0.8s linear infinite;
}

@keyframes qmd-status-carregamento-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .saida-visualizacao > .status--loading::before {
    animation: none;
  }
}


/* ≤ 1024px — corresponde a --tela-lg.
   Colunas de tabela e categorias do gráfico de barras ficam com uma largura 
   mínima e rola horizontalmente. qmd-tabela já rola sozinha (só declarar a 
   largura mínima); qmd-grafico-barra não tem rolagem própria, então quem rola
   é o container .saida-visualizacao. */
@media screen and (max-width: 1024px) {
  .saida-visualizacao {
    overflow-x: auto;
  }

  .saida-visualizacao > qmd-tabela {
    --qmd-tabela-min-width: 700px;
  }

  .saida-visualizacao > qmd-grafico-barra {
    min-width: 700px;
  }
}

/* ≤ 768px — corresponde a --tela-md.
   Reduz altura do mapa e das visualizações em tablets e mobile. */
@media screen and (max-width: 768px) {
  .saida-visualizacao {
    min-height: 420px;
  }

  .saida-visualizacao > qmd-tabela,
  .saida-visualizacao > qmd-grafico-barra,
  .saida-visualizacao > qmd-grafico-pie,
  .saida-visualizacao > qmd-mapa {
    height: 420px;
  }
}

/* ≤ 480px — corresponde a --tela-sm.
   Reduz ainda mais em telas muito estreitas, consistente com o padrão
   das demais pages do projeto (situacao-atual, aq1km). */
@media screen and (max-width: 480px) {
  .saida-visualizacao {
    min-height: 300px;
  }

  .saida-visualizacao > qmd-tabela,
  .saida-visualizacao > qmd-grafico-barra,
  .saida-visualizacao > qmd-grafico-pie,
  .saida-visualizacao > qmd-mapa {
    height: 300px;
  }
}