/* ═══════════════════════════════════════════════════════════════════════════════
   GUARDA RESPONSIVA — fonte ÚNICA, carregada por TODAS as bases de template.
   ───────────────────────────────────────────────────────────────────────────────
   Existe porque a plataforma tem quatro bases independentes (base.html,
   cannabis/base_cannabis.html, justicabr/base_justicabr.html,
   sentinel/base_sentinel.html) e as três últimas NÃO carregam o app.css — cada uma
   tem o seu <style> inline. Uma regra escrita só no app.css simplesmente não
   alcançava três quartos do produto, e repeti-la em quatro arquivos é como nasce a
   divergência que esta base já pagou caro para corrigir.

   Medido com Chromium a 390px (iPhone) em 2026-10-06: 25 páginas empurravam o
   documento para o lado, até 295px. A causa era sempre uma destas duas:

   1. TABELA larga sem container de rolagem. Uma <table> não encolhe abaixo do
      próprio conteúdo, então empurra o documento inteiro — o usuário rola a PÁGINA
      de lado e o cabeçalho sai da tela. Virando bloco com overflow-x, a rolagem
      passa a ser da tabela, que é onde ela faz sentido.
   2. FILHO DE GRID/FLEX sem `min-width:0`. O padrão é `min-width:auto`, que impede
      o item de ficar menor que o conteúdo: um card de 478px não cabe em 390 e vaza.

   O seletor é genérico (`table`), não uma lista de classes: a plataforma tem ~400
   telas e dezenas de prefixos de tabela (jf-, jm-, ct-, mk-, pf-…). Enumerá-los
   deixaria de fora a próxima tela que alguém criar — que é precisamente o modo de
   falha que se quer evitar numa guarda.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* O atributo `hidden` do HTML é apenas `display:none` do user-agent — QUALQUER regra
   de `display` no elemento o anula em silêncio. Observado no painel de detalhe de
   /oportunidades: tinha `hidden` E `.opp-panel{display:flex}`, então seguia no
   layout (480×900), fora da tela só por `transform`, com o conteúdo focável por
   teclado. Isto faz o atributo voltar a significar o que diz. */
[hidden] { display: none !important; }

@media (max-width: 860px) {
  /* a tabela vira o próprio container de rolagem */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* rolagem com inércia no iOS */
  }
  /* deixa os itens de grid/flex encolherem (min-width:auto é o padrão e trava) */
  .card, .panel, .tile, main article, main section { min-width: 0; }
  /* ninguém pode empurrar o documento para o lado */
  html, body { overflow-x: hidden; }
  /* blocos que também não encolhem sozinhos */
  pre, code { max-width: 100%; overflow-x: auto; }
  main img, main svg { max-width: 100%; height: auto; }
}