/* 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 34px */
  .btn, .item-clicavel { min-height: 34px; min-width: 34px; }
}

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