/* layout/responsivo.css — Celular e tablet (até 960px): lateral compacta, barra inferior, tabela em cartões; e prefers-reduced-motion. */
.barra-inferior { display: none; }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; /* a sobra de altura vai para o conteúdo, não para a barra do topo */ }
  .topo { padding: 0 16px; height: 56px; --topo: 56px; }
  .topo .sub { display: none; }
  .conteudo { padding: 16px 16px 96px; }
  .painel-grade, .detalhe-grade, .foto-editor { grid-template-columns: 1fr; }
  .tabela-wrap { display: none; } .cartoes { display: grid; }
  .busca { margin-left: 0; min-width: 0; width: 100%; }
  .stepper .etapas { grid-template-columns: 1fr; gap: 18px; }
  .stepper svg.linha { display: none; }
  .etapa { text-align: left; padding: 0 0 0 52px; }
  .etapa .no { left: 0; transform: none; top: 0; }
  .hist { padding-left: 28px; } .hist li { grid-template-columns: 1fr; gap: 4px; } .hist .quem { white-space: normal; }
  .login { padding: 24px 16px 48px; }
  .login-topo h1 { font-size: 24px; } .login-card { padding: 20px 18px; }
  .rota-etapas { grid-template-columns: 1fr; }
  .situacao-corpo { grid-template-columns: 1fr; }
  .barra-inferior { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--borda); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  .barra-inferior a { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 10px; text-decoration: none; color: var(--cinza); font-size: 11px; font-weight: 600; position: relative; }
  .barra-inferior a .ico { width: 22px; height: 22px; }
  .barra-inferior a.ativo { color: var(--vermelho); }
  .barra-inferior a.ativo::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--vermelho); }
  .toasts { left: 16px; right: 16px; bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .etapa.atual .no, .pill.rota::before, .pill.transito::before, .caminhao, .skeleton::after { animation: none !important; }
  dialog[open] { animation: none; }
  .hist::after { animation: none; transform: scaleY(1); }
  .desenha-svg * , .sucesso-anim * { animation-duration: 0s !important; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}