/* PEÇA: tela que não quebra no celular  —  nasceu no Editor em 23/08/2026
   ------------------------------------------------------------------------
   O erro que ela conserta: um filho comprido (linha do tempo, tabela larga,
   lista horizontal) estica o grid/flex inteiro e EMPURRA o resto para fora
   da janela. Some painel, some botão, e no celular parece que "quebrou".

   Copiar, não reescrever. Trocar só os nomes de classe.                     */

/* 1. Prender as colunas na largura da janela.
      Sem isso o grid usa a largura do MAIOR filho. */
.tela            { overflow: hidden; grid-template-columns: minmax(0, 1fr); }
.tela .coluna    { min-width: 0; }          /* vale para todo filho de flex/grid */
.tela .rolagem   { min-width: 0; overflow: auto; }   /* quem rola é ESTE, não a página */

/* 2. No celular: uma coluna só, e as barras laterais viram gavetas. */
@media (max-width: 900px) {
  .tela        { grid-template-columns: minmax(0, 1fr); }
  .so-celular  { display: inline-flex; }     /* botões que só existem no celular */

  .gaveta-esq,
  .gaveta-dir {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(84vw, 320px);
    z-index: 30;
    transition: transform 0.18s ease-out;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  }
  .gaveta-esq { left: 0;  transform: translateX(-102%); }
  .gaveta-dir { right: 0; transform: translateX(102%); }
  .gaveta-esq.aberta,
  .gaveta-dir.aberta { transform: none; }

  /* fundo escuro que fecha a gaveta ao tocar fora */
  .fundo-gaveta { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 20; }

  /* dedo não é seta: alvo mínimo de 44px (era 34: a regra 59 do conferir pegou, 07/10/2026) */
  .btn, .item-clicavel { min-height: 44px; min-width: 44px; }
}

/* 3. Tela cheia de app (trazido do balbuu-caa e caa-adulto em 21/10/2026).
      - 100dvh, não 100vh: no celular a barra do navegador entra e sai e o 100vh fica maior
        que a tela (o botão de baixo some). O 100vh fica antes como reserva pra navegador velho.
      - Altura TRAVADA (height), não mínima: com min-height o corpo cresce junto com a lista
        e a barra de baixo vai embora (caa-adulto).
      - safe-area: com viewport-fit=cover a barra encosta no entalhe e na barra de gesto do iPhone. */
.app-cheio       { height: 100vh; height: 100dvh; overflow: hidden; }
.barra-topo      { padding-top: max(12px, env(safe-area-inset-top)); }
.barra-baixo     { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.caixa-flutuante { max-height: calc(100dvh - 32px); overflow: auto; }   /* aviso/consentimento nunca maior que a tela */

@media (min-width: 901px) {
  .so-celular { display: none; }
  .fundo-gaveta { display: none; }
}