/* FLUXXI · celular. SÓ media query de até 720 px: o computador não muda um pixel.
   Regras da casa para o celular:
   - a página nunca rola de lado (medir contra 390 px de largura, elemento por elemento);
   - tabela larga rola DENTRO do próprio cartão;
   - a coluna vira barra embaixo (Início, até três módulos e "Mais"), como no FLUXXI;
   - alvo de toque com pelo menos 44 px. */
@media (max-width: 720px) {
  .casa { display: block; }
  .caixa { display: none; }
  .caixa.aberta {
    display: flex; position: fixed; inset: 0 0 64px 0; height: auto; width: 100%; z-index: 40;
    padding-top: 18px; border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
  .topo-celular {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 30; padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    background: rgba(12,17,20,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .topo-celular .wordmark { font-size: 13px; }
  .topo-celular .av { width: 32px; height: 32px; font-size: 11px; }
  .campo-principal { padding: 14px 12px calc(92px + env(safe-area-inset-bottom)); }
  .topo-pagina { margin-bottom: 14px; padding-bottom: 12px; }
  .topo-pagina h1 { font-size: 27px; }
  .topo-pagina .acoes { width: 100%; }
  .topo-pagina .acoes .bt { flex: 1 1 auto; min-height: 44px; }
  .kpis { grid-template-columns: 1fr; gap: 12px; }
  .kpi { min-height: 0; }
  .kpi .v { font-size: 38px; }
  .barra-lista, .filtros { padding: 12px 14px; }
  .busca { max-width: none; }
  .filtros select, .filtros input:not([type="checkbox"]) { flex: 1 1 140px; min-width: 0; }

  /* tabela vira cartões: cada linha um bloco, o nome no topo, os campos em duas colunas com o rótulo em cima */
  .lista-cartoes thead { display: none; }
  .lista-cartoes, .lista-cartoes tbody { display: block; }
  .lista-cartoes tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px; border-bottom: 1px solid var(--linha-papel2); }
  .lista-cartoes td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .lista-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; margin-bottom: 2px;
    font: 700 9px/1.3 var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--aco2);
  }
  .lista-cartoes td.principal, .lista-cartoes td.acao { grid-column: 1 / -1; }
  .lista-cartoes td.acao { text-align: left; width: auto; }
  .lista-cartoes td.acao .bt { width: 100%; min-height: 44px; }
  thead th, tbody td { padding: 11px 14px; }
  .grade-form, .ficha-dados { grid-template-columns: 1fr; }
  .gaveta-corpo { width: 100%; border-radius: 0; }
  .gaveta-topo, .gaveta-miolo, .gaveta-pe { padding-left: 16px; padding-right: 16px; }
  .gaveta-pe .bt { flex: 1 1 auto; min-height: 44px; }
  .quadro { padding: 14px 16px; }
  .quadro .bt { width: 100%; min-height: 44px; }

  .barra-celular {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(20,29,34,.97); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.08);
  }
  .barra-celular a, .barra-celular button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px;
    background: none; border: 0; color: var(--tinta-txt2); font: 600 10.5px/1 var(--corpo); text-decoration: none; cursor: pointer;
  }
  .barra-celular svg { width: 20px; height: 20px; }
  .barra-celular [aria-current="page"], .barra-celular [aria-expanded="true"] { color: var(--creme); box-shadow: inset 0 2px 0 var(--carmim); }
  .previa-campanha { position: static; }
}