/* VAZOU — adaptação a telas estreitas.

   Duas regras governam tudo o que vem abaixo:

   1. A margem lateral é sempre `--margem`. Ela encolhe por faixa de largura, e
      cabeçalho, conteúdo e rodapé encolhem junto — a marca continua alinhada
      com o título do resultado e com o texto do rodapé em qualquer tela.
   2. Nada rola para o lado. Em vez de rolagem horizontal, cada linha da tabela
      vira um bloco legível, usando o rótulo da coluna gravado em
      `data-rotulo`. */

/* ------------------------------------------------------------------ */
/* Notebook e telas médias                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  :root { --margem: 1.25rem; }
}

@media (max-width: 980px) {
  /* Quatro indicadores em duas colunas: 2 + 2, sem sobra. */
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .indicador:nth-child(3) { border-left: 0; }
  .indicador:nth-child(n+3) { border-top: 1px solid var(--borda); }
}

@media (max-width: 900px) {
  .resultado-cabecalho { flex-direction: column; gap: 1rem; }
  /* Em coluna, `flex-basis` passa a valer como ALTURA: sem isto o bloco de
     identificação reserva 20rem e abre um vão vazio. */
  .consulta-linha { flex: 0 0 auto; }
  .campos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .1rem 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* Tablet e celular                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  :root { --margem: 1rem; }

  body { font-size: 15.5px; }

  .conteudo { padding: 1.5rem var(--margem) 2.5rem; }
  .secao { margin-top: 1.9rem; }
  .secao-titulo { font-size: 1.08rem; }

  /* Sem cabeçalho fixo em nenhuma largura, a âncora de seção não reserva altura
     de cabeçalho: 5,5rem abririam um vão em branco acima do título alvo. */
  .secao { scroll-margin-top: 1rem; }

  .resultado-cabecalho { padding: 1rem 1.05rem; }
  .campos { grid-template-columns: 1fr; gap: 0; }

  /* Os indicadores empilham; o divisor passa de vertical para horizontal. */
  .indicadores { grid-template-columns: 1fr; }
  .indicador { border-left: 0; border-top: 1px solid var(--borda); padding: .95rem 1rem; }
  .indicador:first-child { border-top: 0; }

  /* Tabela vira lista de blocos. */
  .tabela-envolve { overflow-x: visible; border: 0; background: transparent; box-shadow: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  /* A legenda precisa virar bloco JUNTO com a tabela. Mantida como
     `table-caption` dentro de um `display: block`, ela passa a pertencer a uma
     tabela anônima cuja largura é a do conteúdo mínimo: medido em 375 px, o
     texto saía quebrado palavra a palavra numa coluna de ~110 px. */
  .tabela caption { display: block; padding: 0 0 .7rem; border-bottom: 0; }

  /* A linha de detalhe é excluída aqui, e não desfeita depois com `!important`:
     ela não é um bloco da lista, é a continuação do bloco anterior. */
  .tabela tbody tr:not(.tabela-linha-detalhe) {
    margin-bottom: .7rem;
    padding: .3rem .95rem .6rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
  }
  .tabela tbody tr:hover > td { background: transparent; }
  .tabela tr.linha-aberta:not(.tabela-linha-detalhe) { border-color: var(--acento); }
  .tabela tr.linha-aberta > td,
  .tabela tr.linha-aberta:hover > td { background: transparent; }

  .tabela td { padding: .45rem 0; border-bottom: 1px solid var(--borda); text-align: left; }
  .tabela tbody tr td:last-child { border-bottom: 0; }

  /* O rótulo da coluna passa a preceder o valor dentro do bloco. */
  .tabela td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: .1rem;
  }
  .tabela td:not([data-rotulo])::before { content: none; }
  .tabela .numerica { text-align: left; white-space: normal; }

  /* A linha de detalhe não herda o rótulo das células. */
  .tabela-linha-detalhe > td::before { content: none; }
  .tabela-linha-detalhe > td { padding: 0; border-bottom: 0; }
  .linha-detalhe { padding: .85rem; border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno); }

  /* Botão de rótulo longo precisa quebrar linha: `.botao` é nowrap por padrão,
     e em 375 px alguns rótulos ultrapassavam a largura da tela. */
  .acoes-pesquisa .botao,
  .progresso .botao,
  .campo-linha .botao,
  .cabecalho-acoes .botao { white-space: normal; }

  .acoes-pesquisa { flex-direction: column; align-items: stretch; }
  .acoes-pesquisa .botao { width: 100%; }
  .progresso { flex-direction: column; align-items: stretch; }
  .progresso .botao { width: 100%; }
  .campo-linha { flex-direction: column; align-items: stretch; }
  .campo-linha .botao { width: 100%; }

  .recolhivel > *:not(summary) { margin: .7rem .7rem; }
  .recolhivel .tabela tbody tr { margin-bottom: .6rem; }

  .painel { padding: 1rem 1.05rem 1.15rem; }
}

/* ------------------------------------------------------------------ */
/* Celular estreito                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .conteudo { padding: 1.25rem var(--margem) 2rem; }
  .abertura-subtitulo { font-size: 1.04rem; margin-bottom: 1.6rem; }
  .abertura-informacoes { margin-top: 2rem; }
  .consulta-meta { gap: .4rem .7rem; font-size: .88rem; }
  .cabecalho-acoes { width: 100%; }
  .cabecalho-acoes .botao { flex: 1 1 auto; }
}

/* Abaixo de ~370 px o marcador do campo não cabe inteiro e era cortado no meio
   de uma palavra. Quem encolhe é só o texto do marcador: o campo mantém
   1.05rem, porque um input abaixo de 16px faz o Safari do iOS dar zoom na página
   ao receber foco — o remédio seria pior que o artefato. A escala é contínua, e
   não um degrau: um degrau fixo deixava a largura logo acima dele ainda
   cortando. */
@media (max-width: 400px) {
  .pesquisa-campo { padding-left: .9rem; padding-right: 3.3rem; }
  .pesquisa-campo::placeholder { font-size: clamp(.8rem, calc(6.1vw - 6.3px), 1.05rem); }
  .pesquisa-enviar { right: .35rem; }
}

/* ------------------------------------------------------------------ */
/* Impressão                                                           */
/* ------------------------------------------------------------------ */

@media print {
  .rodape, .cabecalho-acoes, .pular, .faixa-marca, .progresso,
  .acoes-pesquisa { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .conteudo { max-width: none; padding: 0; }
  .resultado-cabecalho { border: 0; box-shadow: none; padding: 0 0 1rem; }
  .recolhivel[open] > summary { display: none; }
  .tabela-envolve { overflow: visible; box-shadow: none; }
  .secao { break-inside: avoid; }
  .tabela tr { break-inside: avoid; }
}