/* ---------- Celular e tablet (até 860 px): só muda o que a tela estreita precisa; o computador fica como está ---------- */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  /* topo em duas linhas: marca + ações; menu abaixo, com quebra de linha (sem rolagem, para o menu suspenso não ser cortado) */
  .topo-in { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .topo-in .marca { font-size: 17px; }
  .topo-acoes { margin-left: auto; gap: 6px; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 2px; }
  .nav > a, .nav > details > summary { padding: 7px 10px; font-size: 14px; }
  .nav details { position: static; }
  .nav .menu-drop, .topo-acoes .menu-drop { position: fixed; left: 8px; right: 8px; top: auto; margin-top: 6px; max-height: 70vh; overflow: auto; z-index: 60; }
  .topo-acoes .menu-drop { left: 8px; right: 8px; }
  .menu-drop a { padding: 12px 12px; font-size: 15px; }
  /* páginas */
  .pagina { padding: 10px 10px 56px; }
  .cabecalho { padding: 10px 12px; gap: 8px; }
  .cabecalho h1 { font-size: 17px; }
  .cabecalho .sub { border-left: 0; padding-left: 0; flex-basis: 100%; font-size: 13px; }
  .cabecalho .esp { display: none; }
  .filtro { width: 100%; justify-content: space-between; }
  .filtro select, .filtro input { max-width: 100%; min-width: 0; }
  .toggle { flex-wrap: wrap; }
  .grade-5, .grade-4, .grade-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grade-2 { grid-template-columns: 1fr; }
  .kpi .valor { font-size: 18px; }
  .kpi .ico { width: 24px; height: 24px; font-size: 12px; }
  .card { padding: 12px; }
  .card-cab { flex-wrap: wrap; gap: 8px; }
  .ferramentas { flex-wrap: wrap; gap: 6px; }
  .ferramentas input, .ferramentas select { width: 100%; }
  .ferramentas .esp { display: none; }
  .linha2, .linha3 { grid-template-columns: 1fr; }
  /* tabelas: rolam de lado dentro do card, sem esticar a página */
  .card:has(> table.tabela), .card:has(> .rolagem), .gaveta-corpo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tabela { min-width: 720px; }
  .tabela .prod { min-width: 240px; }
  .tabela .prod .prod-nome, .tabela .prod b { white-space: normal; }
  .tabela th, .tabela td { padding: 7px 8px; font-size: 12.5px; }
  .rodape-tabela { flex-wrap: wrap; gap: 8px; font-size: 12px; }
  /* gavetas e janelas ocupam a tela toda */
  .gaveta { width: 100%; border-left: 0; }
  .gaveta-cab, .gaveta-corpo, .gaveta-pe { padding-left: 14px; padding-right: 14px; }
  .modal-centro { padding: 8px; }
  .modal { width: 100%; }
  /* login em uma coluna */
  .login { grid-template-columns: 1fr; min-height: auto; }
  .login-lado { padding: 28px 22px; }
  .login-lado h1 { font-size: 24px; }
  .login-form { padding: 28px 18px; min-height: 60vh; }
  .rodape { padding: 5px 10px; font-size: 11px; }
  .rodape span:last-child { display: none; }
  /* filtros do DRE e período */
  .filtros-dre { gap: 8px; }
  details.multi .multi-lista { left: 0; right: 0; min-width: 0; }
  .config-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grade-5, .grade-4, .grade-3 { grid-template-columns: 1fr; }
  .nav > a, .nav > details > summary { padding: 6px 8px; font-size: 13px; }
}