/*
 * Painel no celular (pedido do Nelson, out/2026). Incluído em todas as telas,
 * DEPOIS do <style> de cada uma (para poder ajustar as mesmas regras), junto
 * com o celular.js.
 *
 * Tudo aqui vale só para telas estreitas (até 700 px, a mesma medida do
 * celular.js) e só na tela ("screen"): no computador e na impressão as telas
 * ficam exatamente como antes. Ajustes próprios de uma tela ficam no <style>
 * dela; aqui só o que é comum a todas.
 */
@media screen and (max-width: 700px) {
  /* Topo: "Voltar", logotipo e título mais compactos */
  .breadcrumb { padding: 10px 16px 0; }
  .breadcrumb a { font-size: 18px; }
  body > header { padding: 14px 16px 16px; gap: 12px; }
  body > header .logo { height: 38px; }
  body > header h1 { font-size: 18px; line-height: 1.3; }

  main { padding-left: 12px; padding-right: 12px; }

  /* Tabelas largas: rolagem lateral só dentro da área da tabela (celular.js) */
  .rolagem-tabela {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* No iPhone, campos com letra menor que 16 px fazem a tela "dar zoom"
     sozinha ao tocar neles. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }

  /* Janelas sobre a tela (overlay) com menos margem */
  .overlay { padding: 10px; }
  /* ...e rolando por dentro quando forem mais altas que a tela
     (ex.: celular deitado) */
  .overlay > * { max-height: 100%; overflow-y: auto; }

  footer { padding-left: 16px; padding-right: 16px; }
}