/* Camada de celular. Se este arquivo falhar, o desktop segue funcionando. */
.barra-inferior, .gaveta-fundo { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(84vw, var(--sidebar-w)); padding-top: calc(20px + env(safe-area-inset-top)); transform: translateX(-102%); transition: transform 0.2s ease; }
  .app.menu-aberto .sidebar { transform: none; }
  .gaveta-fundo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .app.menu-aberto .gaveta-fundo { opacity: 1; pointer-events: auto; }
  .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .barra-inferior a { flex: 1; padding: 10px 4px; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; text-decoration: none; }
  .barra-inferior a.ativo { background: var(--primary-soft); color: var(--primary); }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .topbar > div:first-child { min-width: 0; flex: 1; }
  .topbar h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .content { padding: 16px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog.dialogo { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  .kpi-valor { font-size: 28px; }
  .quadro-abas { display: flex; gap: 4px; margin-bottom: 10px; }
  .quadro-abas button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; }
  .quadro-abas button b { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .quadro-abas button[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
  .quadro { grid-template-columns: minmax(0, 1fr); }
  .quadro .quadro-col:not(.ativa) { display: none; }
  table.tabela:not(.m-sem-cartao) thead { display: none; }
  table.tabela:not(.m-sem-cartao), table.tabela:not(.m-sem-cartao) tbody, table.tabela:not(.m-sem-cartao) tr { display: block; width: 100%; }
  table.tabela:not(.m-sem-cartao) tr { margin-bottom: 10px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
  table.tabela:not(.m-sem-cartao) td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  table.tabela:not(.m-sem-cartao) td::before { content: attr(data-rotulo); flex: 0 0 auto; color: var(--muted-2); font-size: 12px; text-align: left; }
}

@media (max-width: 900px) {
  dialog.dialogo .dialogo-acoes { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: 8px -22px calc(-22px - env(safe-area-inset-bottom)); padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line-soft); }
}

/* Delivery: cardápio, cupons e relatório no celular */
@media (max-width: 700px) {
  .cd-contagens { gap: 6px; }
  .cd-contagens > div { padding: 10px; }
  .cd-contagens b { font-size: 22px; }
  .cd-contagens span { font-size: 10px; letter-spacing: 0.04em; }
  .cd-grade, .cd-grade2 { grid-template-columns: minmax(0, 1fr); }
  .cd-cat { padding: 0 10px; }
  .cd-cat-acoes { width: 100%; }
  .cd-cat-acoes .botao { min-height: 40px; }
  .cd-item { flex-wrap: wrap; }
  .cd-item-info { flex: 1 1 calc(100% - 80px); }
  .cd-item-acoes { flex: 1 1 100%; justify-content: flex-start; }
  .cd-item-acoes .botao { min-height: 40px; }
  .cd-form { padding: 12px; }
  .cd-form-acoes .botao, .cd-foto-acoes .botao { min-height: 44px; }
  .cd-remover { margin-left: 0; min-height: 44px; }
  .cd-foto-mini { width: 48px; height: 48px; }
  table.tabela.rel-tabela tr.rel-hist td::before { content: none; }
  table.tabela.rel-tabela tr.rel-hist td { display: block; text-align: left; }
  table.tabela.rel-tabela tr.rel-hist { padding: 0; background: none; border: 0; }
  .rel-barra .botao { flex: 1 1 auto; }
}