/* SEGGUI — 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 — o logotipo continua
      alinhado com o título do resultado e com o texto do rodapé em qualquer
      tela, porque todos leem a mesma variável.
   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: 900px) {
  .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); }

  /* O cabeçalho passa a duas linhas: logotipo em cima, campo embaixo, ambos
     rentes à mesma margem. O logotipo nunca divide a linha com o campo em
     largura que não comporte os dois. */
  .topo-conteudo { flex-wrap: wrap; gap: .65rem 1rem; padding-top: .55rem; padding-bottom: .65rem; }
  .pesquisa-topo { max-width: none; margin-left: 0; flex-basis: 100%; }

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

/* ------------------------------------------------------------------ */
/* Exploração por abas em tela estreita                                */
/* ------------------------------------------------------------------ */

/* A barra de abas já rola sozinha (ver `.abas` na folha base). Estas regras
   cuidam do resto do painel: filtros e resumo passam a blocos verticais, de
   modo que nada dependa de arrastar a página para o lado. */
@media (max-width: 760px) {
  .aba { padding: .55rem .7rem; font-size: .88rem; }

  /* A rolagem da barra precisa começar e terminar rente à margem do conteúdo,
     senão a primeira aba parece cortada. */
  .abas { padding-left: 0; padding-right: 0; }

  .filtros { padding: .8rem; }
  .filtros-topo { flex-direction: column; align-items: stretch; }
  /* Em coluna, `flex-basis` passa a valer como ALTURA: sem isto o texto do topo
     reserva 18rem e abre um vão em branco dentro da caixa de filtros. Mesmo
     modo de falha do bloco de identificação, logo acima. */
  .filtros-topo .nota,
  .filtros-topo .filtros-ativos { flex: 0 0 auto; }
  .filtros-topo .botao { width: 100%; }

  /* Rótulo, número e unidade um sob o outro: o número deixa de disputar a
     linha com um rótulo longo. */
  .resumo-linha { grid-template-columns: 1fr; gap: .1rem; }
  .resumo-valor { font-size: 1.3rem; }
}

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

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

  body { font-size: 15.5px; }

  .inicio { padding: 3rem var(--margem) 2.5rem; }
  .resultado { padding: 1.25rem var(--margem) 2.5rem; }
  .secao { margin-top: 2rem; }
  .secao-titulo { font-size: 1.1rem; }

  /* No celular a ordem é logotipo, contexto, conteúdo. O cabeçalho deixa de
     ser fixo aqui: com logotipo, campo e botão empilhados ele ocupa 143 px —
     quase um quinto de uma tela de 812 px — e roubaria essa faixa do conteúdo
     durante a leitura inteira. Ele continua na mesma posição do documento, um
     gesto de rolagem acima, e a troca de consulta também segue disponível no
     botão "Nova pesquisa", dentro do resultado. */
  .topo { position: static; }
  .topo-conteudo { min-height: 0; }
  .marca-logo { height: 1.5rem; }

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

  .resultado-cabecalho { padding: 1rem 1.1rem; }

  .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%); }

  .tabela caption {
    padding: 0 0 .7rem;
    border-bottom: 0;
  }

  .tabela tbody tr {
    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 { background: var(--superficie); }

  .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; }

  .detalhe { padding: .95rem; border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno); }

  /* Registro em bloco: partes e dados empilham, e nada precisa de rolagem. */
  .registro { padding: .8rem .9rem; }
  .registro-cabecalho { flex-direction: column; gap: .75rem; }
  .registro-partes { grid-template-columns: 1fr; gap: .75rem; flex-basis: auto; }
  .registro-selo { text-align: left; }
  .registro-dados { gap: .3rem 1.1rem; }
  .registro-acoes { flex-direction: column; align-items: stretch; gap: .5rem; }
  .registro-acoes .botao { width: 100%; }
  .registro-detalhe { margin: .75rem -.9rem -.8rem; }
  .detalhe-rodape { align-items: stretch; }

  /* Botão de rótulo longo precisa quebrar linha: `.botao` é nowrap por padrão,
     e em 375 px o texto da identificação ultrapassava a largura da tela. */
  .carregar-mais .botao,
  .identificacao-progresso .botao,
  .resultado-acao .botao,
  .acoes-entrada .botao { white-space: normal; }
  .carregar-mais > .botao { width: 100%; }

  /* O resultado vira bloco: o botão passa para baixo, com largura inteira. */
  .resultado-item { flex-direction: column; gap: .7rem; }
  .resultado-acao { width: 100%; }
  .resultado-acao .botao { width: 100%; }
  .identificacao-progresso { flex-direction: column; align-items: stretch; }
  .identificacao-progresso .botao { width: 100%; }

  .paginacao { flex-direction: column; align-items: stretch; gap: .7rem; }
  .paginacao-controles { justify-content: space-between; }
  .paginacao-numeros { flex-wrap: wrap; justify-content: center; }

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

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

@media (max-width: 480px) {
  .registro-dados { flex-direction: column; gap: .25rem; }
  .inicio { padding: 2.5rem var(--margem) 2rem; }
  .inicio-marca { margin-bottom: 1.1rem; }
  .inicio-subtitulo { font-size: 1.05rem; margin-bottom: 1.75rem; }
  .inicio-informacoes { margin-top: 2.25rem; }

  /* Empilhar campo e botão vale para a barra do topo do resultado. Na página
     inicial a seta vive DENTRO do campo, então ali a linha não empilha. */
  .pesquisa-topo .pesquisa-linha { flex-direction: column; align-items: stretch; }
  .pesquisa-topo .pesquisa-linha .botao { width: 100%; }

  .resultado { padding: 1.1rem var(--margem) 2rem; }

  .cabecalho-acoes { width: 100%; }
  .cabecalho-acoes .botao { flex: 1 1 auto; }

  .ident-meta { gap: .4rem .7rem; font-size: .88rem; }

  .paginacao-controles { flex-wrap: wrap; gap: .5rem; }
  .paginacao-controles .botao { flex: 1 1 auto; }

  /* Cada opção de filtro ocupa a largura toda quando o rótulo é longo
     (nome de órgão), mas continua em linha quando é curto (sigla de UF). */
  .filtro-opcoes .busca-filtro { max-width: 100%; text-align: left; }
  .navegavel-item { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ */
/* A tabela única em tela estreita                                     */
/* ------------------------------------------------------------------ */

/* Cada linha já vira bloco vertical pela regra geral de `.tabela`. Aqui o
   detalhe acompanha: ele não pode herdar o `data-rotulo` das células, nem
   ficar recuado a ponto de espremer o texto. */
@media (max-width: 760px) {
  .tabela-linha-detalhe > td::before { content: none; }
  .tabela-linha-detalhe > td { padding: 0; }
  .linha-detalhe { padding: .85rem; }
  .linha-detalhe .registro-acoes { flex-direction: column; align-items: stretch; }
  .linha-detalhe .registro-acoes .botao,
  .linha-detalhe .registro-acoes .link { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------ */
/* Celular estreito: marcador do campo                                 */
/* ------------------------------------------------------------------ */

/* Abaixo de ~368 px o marcador do campo não cabia inteiro e era cortado no
   meio de uma palavra ("...produto ou s"). 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. O termo em `vw` acompanha a largura útil
   do campo, o teto devolve o tamanho normal assim que ele cabe, e o piso
   impede que o marcador fique ilegível. Todo o bloco é restrito à página
   inicial. */
@media (max-width: 400px) {
  .pagina-inicial .pesquisa-campo {
    padding-left: .9rem;
    padding-right: 3.3rem;
  }

  .pagina-inicial .pesquisa-campo::placeholder {
    font-size: clamp(.8rem, calc(6.1vw - 6.3px), 1.05rem);
  }

  .pagina-inicial .pesquisa-enviar { right: .35rem; }
}

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

@media print {
  .topo, .rodape, .cabecalho-acoes, .paginacao-controles, .carregar-mais, .pular,
  .faixa-marca { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .resultado { 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; }
}

/* ------------------------------------------------------------------ */
/* Privacidade em tela estreita                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* A caixa encosta no rodapé da tela e ocupa a largura disponível: num
     celular, uma caixa centralizada com margens grandes deixa pouco espaço
     para o texto do aceite. */
  .privacidade-fundo { align-items: flex-end; padding: 0; }

  .privacidade-caixa {
    max-width: none;
    max-height: 88vh;
    border-radius: var(--raio) var(--raio) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }

  /* Botões em coluna e largura cheia: lado a lado eles quebrariam o texto.
     A inversão põe "Aceitar e continuar" acima de "Não aceito": aceitar é a
     ação que libera o uso, e é ela que fica sob o polegar. */
  .privacidade-acoes { flex-direction: column-reverse; }
  .privacidade-acoes .botao { width: 100%; justify-content: center; }

  .documento { padding-top: 1.25rem; }
  .documento h1 { font-size: 1.35rem; }
}