/* =============================================================================
   responsivo.css — camada de adaptação a telas pequenas (V86)

   Primeira folha compartilhada do sistema. Ela existe porque cada template
   carrega o próprio <style> inline e nenhum dos 22 que usam o cabeçalho tinha
   uma @media sequer — no celular, os botões do topo eram cortados pelo
   `overflow: hidden` do .topo e a navegação inteira ficava inalcançável.
   Consertar isso tela a tela seria repetir a mesma @media 22 vezes.

   REGRA DE OURO: quase tudo aqui vive dentro de @media. Fora delas o arquivo é
   inerte, então o desktop continua exatamente como está hoje. O <link> entra
   DEPOIS do <style> de cada página, então em empate de especificidade esta
   folha vence — sem precisar de !important, salvo onde a página usa style
   inline no elemento (marcado caso a caso abaixo).

   Nomes-alvo vêm do design system já usado nos templates:
     .topo / .topo-inner / .topo-label / .topo-titulo / .topo-sub
     .nav-topo / .btn-nav / .btn-consulta
     .container-main / .layout-container / .wrap / .card
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Base — vale em qualquer largura, mas só impede estouro. Nada de estética.
   -------------------------------------------------------------------------- */

/* Mídia nunca empurra a página para além da viewport. */
img,
canvas,
svg,
video {
  max-width: 100%;
}

/* O seletor de arquivo mede pelo texto do botão do sistema operacional e não
   obedece ao `width: 100%` que os templates dão aos demais campos — no celular
   ele sozinho jogava o formulário 40px para fora da tela. */
input[type="file"] {
  max-width: 100%;
}

/* Os três nomes de invólucro de tabela usados no projeto. Reforço: garante a
   rolagem lateral mesmo onde a página esqueceu o overflow. */
.table-responsive,
.tabela-wrap,
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* -----------------------------------------------------------------------------
   2. Até 820px — tablet em pé e todo celular.
      O cabeçalho deixa de ser "título à esquerda / botões à direita" e passa a
      ser duas faixas empilhadas.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* ---- cabeçalho azul ---- */
  .topo {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topo-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .topo-titulo {
    font-size: 22px;
    line-height: 1.2;
  }

  .topo-label {
    font-size: 10px;
    letter-spacing: 1.4px;
  }

  .topo-sub {
    font-size: 11px;
  }

  /* ---- navegação do topo ----
     O `gap` leva !important porque parte dos templates traz
     style="display:flex;gap:10px" direto no elemento, e estilo inline vence
     folha externa. `flex-wrap` não aparece em nenhum inline, então dispensa. */
  .nav-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px !important;
  }

  /* Alguns cabeçalhos penduram um único "← Voltar" direto no .topo-inner, sem
     invólucro. Empilhado, ele esticaria de ponta a ponta como se fosse uma
     barra; encostar à esquerda mantém a aparência de botão. */
  .topo-inner > .btn-nav,
  .topo-inner > .btn-consulta {
    align-self: flex-start;
  }

  /* Quebrar em várias linhas só resolve se o botão encolher junto: com o
     tamanho de desktop, oito botões viram sete linhas. */
  .nav-topo .btn-nav,
  .nav-topo .btn-consulta {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
  }

  /* ---- invólucros de página ---- */
  .container-main,
  .layout-container,
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---- formulários ----
     Abaixo de 16px o Safari do iPhone dá zoom sozinho ao focar o campo e a
     página fica torta. Alguns templates usam 13/14px nos filtros. */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  /* ---- linhas de ação que hoje são flex sem wrap ---- */
  .form-acoes,
  .modal-btns,
  .resultados-header,
  .selecao-bar,
  .busca-manual,
  .card-header-custom,
  .escolha-escopo,
  .linha-assunto,
  .num-pair {
    flex-wrap: wrap;
  }

  /* ---- abas da tela de pautas (V101) ----
     Escopo estreito de propósito: `.abas-pautas`, `.aba-pauta`, `.cfg-abas` e
     `.cfg-aba` só existem em pautas.html, então não vazam para as outras 21
     telas que incluem esta folha.

     Três abas não cabem lado a lado num celular. Rolar na horizontal é melhor
     do que quebrar em duas linhas: a de baixo fica órfã da borda que marca
     qual está ativa. O overflow-x já vem do template; aqui só o toque. */
  .abas-pautas,
  .cfg-abas {
    -webkit-overflow-scrolling: touch;
  }

  .aba-pauta,
  .cfg-aba {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 12.5px;
  }

  /* O cartão de resumo é flex com número e rótulo lado a lado; em coluna
     estreita o rótulo em caixa-alta espremeria o número contra a borda. */
  .card-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .card-stat-num {
    font-size: 22px;
  }
}


/* -----------------------------------------------------------------------------
   3. Até 560px — celular de fato. Aperta o cabeçalho e os cartões.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {

  .topo {
    padding-top: 16px;
    padding-bottom: 26px;
    margin-bottom: 18px;
  }

  .topo-titulo {
    font-size: 19px;
  }

  .nav-topo .btn-nav,
  .nav-topo .btn-consulta {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  /* Cartões: 28px de respiro de cada lado comem 56 dos ~330px úteis.
     A exceção `body:not(.cards-sem-padding)` protege documentos_internos,
     pauta_montar e roteiro, onde o .card é deliberadamente sem padding e quem
     respira é o conteúdo interno — dar padding ali dobraria a margem. */
  body:not(.cards-sem-padding) .card {
    padding: 16px;
  }

  /* Uma trilha `1fr` tem mínimo `auto` — o min-content do item mais largo. Um
     <select> mede pela opção mais comprida, então a grade inteira estourava a
     tela mesmo com o campo em width:100%. `minmax(0, 1fr)` deixa encolher. */
  .form-grid,
  .grid-dois,
  .edicao {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Botão que ocupa a linha inteira é mais fácil de acertar com o polegar. */
  .form-acoes .btn,
  .form-acoes button[type="submit"] {
    flex: 1 1 100%;
  }
}


/* -----------------------------------------------------------------------------
   4. Até 380px — celular pequeno / fonte grande do sistema.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {

  .topo-titulo {
    font-size: 17px;
  }

  .nav-topo .btn-nav,
  .nav-topo .btn-consulta {
    padding: 6px 8px;
    font-size: 11px;
  }
}