/* ==========================================================================
   DFPet — mobile cards (direção 1a)
   Primeira passada: só CSS. Nenhum template, rota ou lógica muda.
   Acima de 900px NADA aqui é aplicado — o desktop continua exatamente igual.
   Como instalar e como voltar atrás: ver entrega/README-mobile.md
   ========================================================================== */

/* Esses elementos só devem existir visualmente abaixo de 900px. <nav>,
   <button> e <div> têm display block/inline-block por padrão do próprio
   navegador — sem esconder aqui fora do media query, eles vazavam pro
   desktop (apareciam soltos, sem os estilos de posição fixa/sheet que só
   existem lá dentro). O @media abaixo reabre cada um com o display certo. */
.navbar-mobile, .barra-carrinho-mobile, .btn-mais-acoes, .acoes-sheet-backdrop,
.cartoes-clientes, .cartoes-pedidos, .cartoes-atencao, .cartoes-reservas, .cartoes-encomendas,
.painel-mobile, .cartoes-pagar, .rota-mobile, .objetivos-mobile, .cliente-fin-mobile,
.cliente-pedidos-mobile, .cliente-pontos-mobile {
  display: none;
}

@media (max-width: 900px) {

  /* --- 1. a barra lateral sai da tela; a navegação vira barra inferior ---- */

  .sidebar { display: none !important; }
  .sidebar-toggle, .sidebar-backdrop { display: none !important; }
  .app-shell.has-sidebar { display: block; }
  .main-area { margin-left: 0 !important; width: 100% !important; }

  /* espaço pra barra inferior + safe area do iPhone */
  .main-area { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .navbar-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; align-items: stretch;
    background: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .navbar-mobile a {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 9px 2px 11px; text-decoration: none;
    color: var(--ink-soft); font-size: 0.69rem; font-weight: 600;
  }
  .navbar-mobile a.active { color: var(--gold); font-weight: 700; }
  .navbar-mobile-mais {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 9px 2px 11px; background: none; border: none; box-shadow: none;
    color: var(--ink-soft); font-family: inherit; font-size: 0.69rem; font-weight: 600;
  }
  .navbar-mobile-mais:hover { background: none; }
  .navbar-mobile .icon { width: 22px; height: 22px; display: block; }
  .navbar-mobile .icon svg { width: 100%; height: 100%; display: block; }
  .navbar-mobile .nav-badge {
    position: absolute; transform: translate(14px, -6px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* o status de sincronização vira uma linha no topo, legível */
  .sync-status-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--ink); color: var(--ink-soft);
    padding: 8px 16px; font-size: 0.72rem;
    font-family: var(--font-mono, monospace);
  }
  .sync-status-mobile button,
  .sync-status-mobile .btn-link {
    background: none; border: none; box-shadow: none; padding: 0;
    color: var(--gold); font-family: inherit; font-size: inherit; font-weight: 600;
  }

  /* --- 2. contraste: nome do cliente nunca em dourado sobre creme --------- */

  .tabela-carrinho a, .tabela-pedidos a, .tabela-atencao a,
  .tabela-objetivos a, .cartao-lista a {
    color: var(--ink); font-weight: 700; text-decoration: none;
  }
  .texto-alerta { color: #8A2F1E; }

  /* --- 3. piso de tipografia --------------------------------------------- */

  body { font-size: 1rem; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  .status-chip, .filtros-contador, .hint { font-size: 0.8rem; }

  /* --- 4. tabelas viram cards (o coração da mudança) --------------------- */

  .tabela-scroll { overflow: visible !important; max-height: none !important; padding-top: 0 !important; }
  .tabela-scroll::before { display: none !important; }   /* "arraste pro lado" */

  .tabela-carrinho, .tabela-pedidos, .tabela-atencao,
  .tabela-carrinho tbody, .tabela-pedidos tbody, .tabela-atencao tbody,
  .tabela-carrinho tr, .tabela-pedidos tr, .tabela-atencao tr,
  .tabela-carrinho td, .tabela-pedidos td, .tabela-atencao td {
    display: block; width: auto;
  }
  .tabela-carrinho thead, .tabela-pedidos thead, .tabela-atencao thead { display: none; }

  .tabela-carrinho tr, .tabela-pedidos tr, .tabela-atencao tr {
    position: relative;
    background: var(--surface, #FFFDF8);
    border: 1.5px solid rgba(11, 11, 11, 0.14);
    border-radius: var(--radius-md, 14px);
    padding: 14px;
    margin-bottom: 10px;
  }
  .tabela-carrinho td, .tabela-pedidos td, .tabela-atencao td {
    border: none; padding: 0; line-height: 1.35;
  }
  .tabela-carrinho td:empty, .tabela-pedidos td:empty, .tabela-atencao td:empty { display: none; }

  /* checkbox de seleção vai pro canto do card — a área de toque real é
     bem maior que o quadradinho visual (44x44, igual o resto do app),
     senão um toque um pouco fora do quadrado cai no card e abre o
     pedido/cliente em vez de selecionar */
  .tabela-carrinho td.col-check, .tabela-pedidos td.col-check, .tabela-atencao td.col-check {
    position: absolute; top: 0; right: 0; margin: 0;
    width: 44px; height: 44px;
  }
  .tabela-carrinho .col-check-label, .tabela-pedidos .col-check-label, .tabela-atencao .col-check-label {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  }

  /* 4a. clientes: fantasia é título; razão/cidade viram subtítulo ---------- */

  .tabela-carrinho td[data-col="fantasia"] {
    font-size: 1.06rem; font-weight: 700; color: var(--ink); padding-right: 34px;
  }
  .tabela-carrinho td[data-col="razao"],
  .tabela-carrinho td[data-col="cidade"] {
    display: inline; font-size: 0.82rem; color: var(--text-muted);
  }
  .tabela-carrinho td[data-col="razao"]::after { content: " · "; }
  .tabela-carrinho td[data-col="cidade"]::after { content: ""; }

  /* o que não decide a visita sai da lista e fica no detalhe do cliente */
  .tabela-carrinho td[data-col="cnpj"],
  .tabela-carrinho td[data-col="endereco"],
  .tabela-carrinho td[data-col="contato"],
  .tabela-carrinho td[data-col="ultima_compra"] { display: none; }

  .tabela-carrinho td[data-col="dias_sem_comprar"] {
    margin-top: 10px; margin-right: 6px; display: inline-block;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; font-weight: 500;
    background: #F2ECDD; color: var(--text-muted);
    padding: 4px 9px; border-radius: 6px;
  }
  .tabela-carrinho td[data-col="pontuacao"] {
    margin-top: 10px; display: inline-block;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; font-weight: 600;
    background: var(--primary-light); color: var(--ink);
    padding: 4px 9px; border-radius: 6px;
  }
  .tabela-carrinho td[data-col="pontuacao"]::before { content: "★ "; }
  .tabela-carrinho td[data-col="acesso"] {
    margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .tabela-carrinho td[data-col="acesso"] .btn-convite { margin-top: 0; min-height: 40px; }

  /* ações: primário de largura cheia, 48px; a rota deixa de ser um select
     gigante colado no botão principal */
  .tabela-carrinho td.celula-acoes,
  .tabela-pedidos td.celula-acoes,
  .tabela-atencao td.celula-acoes {
    margin-top: 12px; display: flex; gap: 8px; align-items: stretch;
  }
  .tabela-carrinho td.celula-acoes form:first-child { flex: 1; display: flex; }
  .tabela-carrinho td.celula-acoes form:first-child button {
    flex: 1; min-height: 48px; font-size: 1rem; border-radius: var(--radius-sm, 10px);
  }
  .tabela-carrinho td.celula-acoes .select-rota {
    min-height: 48px; width: 96px; border-radius: var(--radius-sm, 10px);
    -webkit-appearance: none; appearance: none;
    background: var(--surface, #FFFDF8); color: var(--ink);
    border: 1.5px solid rgba(11, 11, 11, 0.22);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    text-align: center; padding: 0 8px;
  }

  /* 4b. pedidos ----------------------------------------------------------- */

  .tabela-pedidos td[data-col="cliente"] {
    font-size: 1rem; font-weight: 700; padding-right: 34px;
  }
  .tabela-pedidos td:first-child { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-muted); }
  .tabela-pedidos td:first-child a { color: var(--text-muted); font-weight: 500; }
  .tabela-pedidos td[data-col="data"],
  .tabela-pedidos td[data-col="situacao"] { display: inline; font-size: 0.82rem; color: var(--text-muted); }
  .tabela-pedidos td[data-col="data"]::after { content: " · "; }
  .tabela-pedidos td.col-dot-situacao { position: absolute; top: 16px; right: 44px; }
  .tabela-pedidos td[data-col="valor"] {
    margin-top: 8px; font-family: var(--font-mono, monospace);
    font-size: 1.05rem; font-weight: 500;
  }

  /* 4c. atenção — ordem das colunas: atraso, cliente, cidade, venc, valor, ação */

  .tabela-atencao tr { border-left: 5px solid var(--gold); }
  .tabela-atencao tr.atraso-grave { border-left-color: #8A2F1E; }
  .tabela-atencao tr.atraso-medio { border-left-color: #B4562F; }
  .tabela-atencao tr.atraso-hoje  { border-left-color: var(--gold); }
  /* o fundo colorido na linha inteira sai: piorava a leitura do nome */
  .tabela-atencao tr.atraso-grave, .tabela-atencao tr.atraso-medio,
  .tabela-atencao tr.atraso-hoje { background: var(--surface, #FFFDF8); }

  .tabela-atencao td:nth-child(1) {   /* atraso */
    order: 3; margin-top: 10px; display: inline-block;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; font-weight: 500;
    background: #F7E4E0; color: #8A2F1E; padding: 4px 9px; border-radius: 6px;
  }
  .tabela-atencao td:nth-child(2) { font-size: 1rem; font-weight: 700; padding-right: 34px; }
  .tabela-atencao td:nth-child(3),
  .tabela-atencao td:nth-child(4) { display: inline; font-size: 0.82rem; color: var(--text-muted); }
  .tabela-atencao td:nth-child(3)::after { content: " · vence "; }
  .tabela-atencao td:nth-child(5) {
    margin-top: 6px; font-family: var(--font-mono, monospace);
    font-size: 1.1rem; font-weight: 500;
  }
  .tabela-atencao td:nth-child(6) { margin-top: 12px; }
  .tabela-atencao td:nth-child(6) .btn-outline {
    width: 100%; min-height: 48px; font-size: 0.95rem;
    background: var(--acao); color: var(--acao-texto); border-color: var(--acao);
  }

  /* --- 4d. telas novas em grade (Clientes e Pedidos da carteira) — no
     celular a grade desktop (.tabela-cartao) some e entra a versão em
     cartão de vendedor/clientes.html e vendedor/pedidos.html
     (.cartoes-clientes/.cartoes-pedidos, replicando o protótipo Mobile
     DFPet.dc.html pixel a pixel) ------------------------------------- */

  .tabela-cartao { display: none; }
  .cartoes-clientes, .cartoes-pedidos { display: flex !important; flex-direction: column; gap: 12px; }
  /* utilitário: esconde algo só no celular quando a versão em cartão já
     cobre a mesma informação (ex: resumo-barra/filtros antigos de
     Pedidos, substituídos por .kpis-pedidos-mob/.chips-filtro-mob) */
  .so-desktop { display: none !important; }

  /* .btn-acao/.btn-compartilhar (produto do catálogo, ações de linha) só
     têm estilo em style-desktop.css (min-width:901px) — sem isso, abaixo
     de 901px o botão vira o retângulo dourado cru do <button> padrão */
  .btn-acao {
    width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink); border-radius: 8px; padding: 0;
  }
  .btn-acao svg { width: 16px; height: 16px; display: block; }
  .btn-compartilhar { border-color: #1B8A4B; background: #1FA855; color: #fff; }
  /* tabela-selecao.js injeta a ".barra-somatorio" logo depois da tabela
     (fora dela, então "so-desktop" na tabela não a esconde sozinho) — só
     faz sentido quando a tabela/checkboxes estão à vista */
  .so-desktop + .barra-somatorio { display: none !important; }

  /* .busca-wrap (caixa da busca) só tem estilo em style-desktop.css
     (min-width:901px) — sem isso, abaixo de 901px o <input> ficava com a
     borda crua padrão do navegador. Réplica exata do protótipo Mobile
     DFPet.dc.html: caixa flex com o ícone e o microfone no fluxo normal
     (nada de position:absolute). */
  .busca-wrap {
    display: flex !important; align-items: center; gap: 9px;
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 13px;
    padding: 0 13px; height: 46px; position: static; flex: none; max-width: none; min-width: 0;
  }
  .busca-wrap input[type="search"], .busca-wrap input[type="text"] {
    border: none; outline: none; background: transparent; font-family: var(--font-sans);
    font-size: 15px; width: 100%; min-width: 0; height: auto; padding: 0 !important;
  }
  .busca-icone { position: static; flex: none; width: 17px; height: 17px; color: #6B6B6B; transform: none; }
  .busca-wrap .btn-microfone {
    position: static; flex: none; width: 28px; height: 28px; transform: none;
  }

  /* Atenção — a tabela vira cartão dedicado (.cartoes-atencao), igual ao
     protótipo, em vez do tratamento genérico de tabela->card */
  .tabela-scroll:has(.tabela-atencao) { display: none; }
  .cartoes-atencao { display: flex !important; flex-direction: column; gap: 12px; }
  .resumo-atraso-mob {
    background: #F7E7E3; border: 1px solid rgba(156,74,60,.25); border-radius: 16px; padding: 15px 16px;
  }
  .resumo-atraso-mob .rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9C4A3C; }
  .resumo-atraso-mob .valor { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: #9C4A3C; }
  .resumo-atraso-mob .sub { font-size: 12px; color: #9C4A3C; }
  .cartao-atencao-mob { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px; }
  .cartao-atencao-mob .topo { display: flex; align-items: flex-start; gap: 10px; }
  .cartao-atencao-mob .info { min-width: 0; flex: 1; }
  .cartao-atencao-mob .nome { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; color: var(--ink); text-decoration: none; display: block; }
  .cartao-atencao-mob .sub { font-size: 12px; color: #6B6B6B; }
  .cartao-atencao-mob .lado { flex: none; text-align: right; }
  .cartao-atencao-mob .lado .valor { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
  .cartao-atencao-mob .lado .atraso { font-size: 11px; font-weight: 600; color: #9C4A3C; }
  .cartao-atencao-mob .acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cartao-atencao-mob .btn-receber {
    flex: 1; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; background: #1FA855; color: #fff; border-radius: 12px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-decoration: none;
  }
  .cartao-atencao-mob .btn-cobrar-mob {
    width: 52px; height: 46px; flex: none; border: 1px solid rgba(11,11,11,.11); background: #fff;
    color: var(--ink); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }

  /* Reservas/Encomendas — tabela vira cartão */
  .cartoes-reservas, .cartoes-encomendas { display: flex !important; flex-direction: column; gap: 12px; }
  .cartao-reserva-mob { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px; }
  .cartao-reserva-mob .nome { font-family: var(--font-serif); font-size: 19px; color: #7D5A0B; line-height: 1.2; }
  .cartao-reserva-mob .produto { font-size: 13.5px; margin-top: 6px; color: var(--ink); }
  .cartao-reserva-mob .meta { font-size: 11.5px; color: #6B6B6B; margin-top: 2px; }
  .cartao-reserva-mob .acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cartao-reserva-mob form { flex: 1; margin: 0; }
  .cartao-reserva-mob .btn-separar-mob {
    width: 100%; height: 46px; border: none; background: var(--acao); color: var(--acao-texto); border-radius: 12px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .cartao-reserva-mob .btn-rejeitar-mob {
    width: 100%; height: 46px; border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink);
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }

  .cartao-encomenda-mob {
    display: block; background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px;
    padding: 14px 15px; text-decoration: none; color: inherit;
  }
  .cartao-encomenda-mob .topo { display: flex; align-items: flex-start; gap: 10px; }
  .cartao-encomenda-mob .info { min-width: 0; flex: 1; }
  .cartao-encomenda-mob .nome { font-family: var(--font-serif); font-size: 19px; color: #7D5A0B; line-height: 1.2; }
  .cartao-encomenda-mob .meta { font-size: 11.5px; color: #6B6B6B; margin-top: 2px; }
  .cartao-encomenda-mob .situacao { flex: none; font-size: 11.5px; color: #6B6B6B; }
  .cartao-encomenda-mob .rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
  .cartao-encomenda-mob .valor { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }

  /* --- Reposição: campo de bipagem no formato do protótipo (isReposicao)
     — o resto da tela (depósito de origem/destino, câmera) não existe no
     protótipo e fica como está, porque é funcionalidade real -------- */
  .scan-input-row input {
    height: 52px; border: 1px solid var(--gold); border-radius: 14px;
    background: #fff; color: var(--ink);
    font-family: var(--font-mono); font-size: 14px; padding: 0 13px;
  }
  .scan-input-row input:focus { outline: none; border-color: var(--gold); }
  .scan-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; }

  /* --- Menu "Mais": itens no formato do protótipo (isMais) ------------ */
  #menu-mobile-corpo .acoes-sheet-item {
    min-height: 60px; gap: 13px; padding: 0 15px; border-radius: 16px;
    border: 1px solid rgba(11,11,11,.11); font-size: 15px; font-weight: 400;
  }
  #menu-mobile-corpo .acoes-sheet-item .btn-icon {
    width: 34px; height: 34px; flex: none; border-radius: 11px;
    background: #FBF0D6; color: #7D5A0B;
    display: flex; align-items: center; justify-content: center;
  }
  #menu-mobile-corpo .acoes-sheet-item .btn-icon svg { width: 17px; height: 17px; }
  #menu-mobile-corpo .acoes-sheet-item::after {
    content: ""; flex: none; width: 17px; height: 17px; margin-left: auto;
    background: currentColor; opacity: .45;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
  }
  /* o item de sincronizar mostra o status no lugar do chevron */
  #menu-mobile-corpo .acoes-sheet-item:has(.nota)::after { display: none; }

  /* --- Pontuação do cliente: protótipo (isCliPontos) ------------------ */
  .cliente-pontos-mobile { display: flex !important; flex-direction: column; gap: 12px; }
  .cpt-hero { background: #0B0B0B; color: #FFFFFF; border-radius: 18px; padding: 18px; }
  .cpt-rotulo { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .cpt-linha-saldo { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
  .cpt-saldo { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: #C9A227; }
  .cpt-de { font-size: 12.5px; color: rgba(255,255,255,.6); }
  .cpt-trilho { height: 8px; border-radius: 20px; background: rgba(255,255,255,.16); overflow: hidden; }
  .cpt-trilho > div { height: 100%; border-radius: 20px; background: linear-gradient(90deg,#C8922A,#C9A227); }
  .cpt-nota { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 8px; }
  .cpt-premio {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px;
    display: flex; align-items: center; gap: 12px;
  }
  .cpt-premio-info { min-width: 0; flex: 1; }
  .cpt-premio-nome { font-size: 14px; }
  .cpt-premio-custo { font-family: var(--font-mono); font-size: 12px; color: #7D5A0B; margin-top: 2px; }
  .cpt-premio form { margin: 0; flex: none; }
  .cpt-btn-resgatar {
    height: 44px; padding: 0 16px; border: none; background: var(--acao); color: var(--acao-texto);
    border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .cpt-faltam { flex: none; font-size: 11.5px; color: #6B6B6B; }

  /* --- Meus pedidos (cliente): protótipo (isCliPedidos) --------------- */
  .cliente-pedidos-mobile { display: flex !important; flex-direction: column; gap: 12px; }
  .cp-cartao { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 15px; }
  .cp-topo { display: flex; align-items: baseline; gap: 10px; }
  .cp-numero { font-family: var(--font-mono); font-size: 14px; color: #7D5A0B; }
  .cp-data { font-size: 12px; color: #6B6B6B; }
  .cp-valor { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
  .cp-trilho { height: 7px; border-radius: 20px; background: #F1EEE4; overflow: hidden; margin-top: 12px; }
  .cp-trilho > div { height: 100%; border-radius: 20px; }
  .cp-etapa { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; font-weight: 600; }
  .cp-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cp-btn-ver {
    flex: 1; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink); border-radius: 12px;
    font-family: var(--font-sans); font-size: 13.5px; text-decoration: none;
  }

  /* --- Financeiro do cliente: protótipo (isCliFin) -------------------- */
  .cliente-fin-mobile { display: flex !important; flex-direction: column; gap: 12px; }
  .cf-vencido { background: #F7E7E3; border: 1px solid rgba(156,74,60,.25); border-radius: 16px; padding: 15px 16px; }
  .cf-vencido-rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9C4A3C; }
  .cf-vencido-valor { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: #9C4A3C; }
  .cf-vencido-nota { font-size: 12px; color: #9C4A3C; }
  .cf-cartao { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px; }
  .cf-topo { display: flex; align-items: center; gap: 10px; }
  .cf-info { min-width: 0; flex: 1; }
  .cf-doc { font-size: 14px; }
  .cf-venc { font-size: 11.5px; color: #6B6B6B; }
  .cf-selo {
    flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
    background: #F1EEE4; color: #6B6B6B;
  }
  .cf-selo-perigo { background: #F7E7E3; color: #9C4A3C; }
  .cf-selo-aviso { background: #FBF0D6; color: #7D5A0B; }
  .cf-valor { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-top: 8px; }
  .cf-juros { font-size: 11.5px; color: #9C4A3C; margin-top: 2px; }
  .cf-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cf-btn-boleto {
    flex: 1; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; background: #1FA855; color: #fff; border-radius: 12px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none;
  }

  /* --- Objetivos: valores exatos do protótipo (isObjetivos) ----------- */
  .objetivos-mobile { display: flex !important; flex-direction: column; gap: 12px; }
  .om-cartao {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 15px;
    display: flex; gap: 14px; align-items: center;
  }
  .om-anel {
    width: 66px; height: 66px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .om-anel-centro {
    width: 50px; height: 50px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 13.5px; font-weight: 600;
  }
  .om-info { min-width: 0; flex: 1; }
  .om-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; }
  .om-valor { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; }
  .om-alvo {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7D5A0B; margin-top: 3px;
  }
  .om-alvo svg { flex: none; }
  .om-alvo span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* --- Rotas: valores exatos do protótipo (isRota) -------------------- */
  .rota-mobile { display: flex !important; flex-direction: column; gap: 13px; }
  .rm-mapa {
    border-radius: 18px; overflow: hidden; background: #0E1A14; padding: 12px;
    position: relative; height: 190px;
    background-image: linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
                      linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
    background-size: 64px 64px;
  }
  .rm-mapa-linha { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .rm-pin {
    position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%;
    border: 2.5px solid #E8733C; background: #0E1A14; color: #8C8C8C;
    font-family: var(--font-mono); font-size: 13px; display: flex; align-items: center; justify-content: center;
  }
  .rm-pin.visitado { background: #1FA855; color: #fff; }
  .rm-pin.pulado { background: #8C8C8C; color: #fff; }
  .rm-cartao { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 18px; padding: 16px; }
  .rm-rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; }
  .rm-titulo { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; margin: 3px 0 2px; color: var(--ink); }
  .rm-sub { font-size: 12.5px; color: #6B6B6B; }
  .rm-acoes { display: flex; gap: 8px; margin-top: 14px; }
  .rm-acoes form { margin: 0; flex: 1; }
  .rm-acoes form:has(.rm-btn-pular) { flex: none; }
  .rm-btn-cheguei {
    width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; background: #1FA855; color: #fff; border-radius: 13px;
    font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .rm-btn-pular {
    width: 92px; height: 50px; border: 1px solid var(--gold); background: transparent; color: #7D5A0B;
    border-radius: 13px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .rm-btn-comecar {
    width: 100%; height: 50px; border: none; background: var(--acao); color: var(--acao-texto); border-radius: 13px;
    font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .rm-btn-mapa {
    width: 52px; height: 50px; flex: none; border: 1px solid rgba(11,11,11,.11); background: #fff;
    color: var(--ink); border-radius: 13px; display: flex; align-items: center; justify-content: center;
  }
  .rm-fim { text-align: center; }
  .rm-vendido { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: #1B8A4B; margin-top: 8px; }
  .rm-btn-encerrar {
    width: 100%; height: 46px; margin-top: 12px; border: none; background: var(--ink); color: #fff;
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .rm-itinerario-cab { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; }
  .rm-itinerario-cab > span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B6B; }
  .rm-btn-extra {
    margin-left: auto; height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 6px;
    border: 1px dashed var(--gold); background: transparent; color: #7D5A0B; border-radius: 10px;
    font-size: 12.5px; text-decoration: none;
  }
  .rm-parada {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 14px; padding: 12px 14px;
    display: flex; align-items: center; gap: 11px;
  }
  .rm-parada-num {
    width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid #E8733C;
    font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; justify-content: center;
  }
  .rm-parada-num.visitado { background: #1FA855; color: #fff; border-color: #1FA855; }
  .rm-parada-num.pulado { background: #8C8C8C; color: #fff; border-color: #8C8C8C; }
  .rm-parada-info { min-width: 0; flex: 1; }
  .rm-parada-nome { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-parada-end { font-size: 11.5px; color: #6B6B6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-res-ok {
    flex: none; display: flex; align-items: center; gap: 5px; font-family: var(--font-mono);
    font-size: 12px; font-weight: 600; color: #1B8A4B;
  }
  .rm-res-erro { flex: none; }
  .rm-selo { flex: none; font-size: 11px; color: #6B6B6B; }
  .rm-link-gerenciar {
    display: block; text-align: center; padding: 12px; font-size: 12.5px; color: #7D5A0B;
    border: 1px dashed var(--gold); border-radius: 12px; text-decoration: none;
  }

  /* --- Catálogo: valores exatos do protótipo (isCatalogo) ------------- */
  .chip {
    height: 38px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 400;
    border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .chip-ativo, .chip-ativo:hover {
    background: #FBF0D6 !important; border-color: var(--gold) !important;
    color: #7D5A0B !important; font-weight: 500;
  }
  .chip .btn-icon svg, .chip svg { width: 16px; height: 16px; }

  /* minmax(0,…) — com "1fr" puro a coluna cresce até o min-content do
     card (stepper + botão lado a lado) e a grade vaza pra fora da tela */
  .grade-produtos, .produto-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 10px !important;
  }
  .produto-card { min-width: 0; }
  .produto-card { border-radius: 16px; border: 1px solid rgba(11,11,11,.11); overflow: hidden; }
  .produto-foto-wrap { aspect-ratio: 1/1; border-bottom: 1px solid rgba(11,11,11,.07); }
  .produto-corpo { padding: 10px 11px 11px; gap: 7px; }
  .produto-nome { font-size: 12px; line-height: 1.3; min-height: 31px; font-weight: 400; }
  .produto-preco { display: flex; align-items: baseline; gap: 5px; }
  .preco-atual { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .preco-riscado { font-size: 10.5px; margin-right: 0; }
  .disponibilidade { font-size: 10.5px; gap: 5px; }
  .disponibilidade .ponto { width: 6px; height: 6px; }
  /* stepper compacto + "adicionar" ocupando o resto, na mesma linha */
  .produto-form { display: flex; gap: 7px; flex-wrap: nowrap; align-items: center; margin-top: auto; }
  .qtd-stepper { height: 40px; border-radius: 10px; flex: none; }
  .qtd-stepper button { width: 26px; font-size: 17px; padding: 0; }
  .qtd-stepper .qtd-input { width: 22px; padding: 0; text-align: center; font-family: var(--font-mono); font-size: 13px; }
  .btn-adicionar { height: 40px; border-radius: 10px; flex: 1; min-width: 0; }
  .btn-adicionar svg { width: 17px; height: 17px; }
  .btn-encomendar { height: 40px; border-radius: 10px; font-size: 12.5px; }
  /* compartilhar no canto superior direito, informação no esquerdo, na
     mesma altura — cada um no seu cantinho, sem disputar espaço */
  .produto-foto-wrap .btn-info { display: flex; top: 7px; left: 7px; right: auto; width: 26px; height: 26px; }
  .btn-compartilhar-produto {
    top: 7px; right: 7px; left: auto; width: 26px; height: 26px; border-radius: 50%;
    background: #1FA855; border: 1px solid #1B8A4B;
  }
  .btn-compartilhar-produto svg { width: 13px; height: 13px; }

  /* Pedido/Orçamento — vira o par de botões de largura total do protótipo */
  .grupo-destino-mob { flex: 1 1 100%; display: flex; gap: 8px; order: 2; }
  .grupo-destino-mob .chip {
    flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 12px; font-weight: 500;
  }

  /* categorias do catálogo — uma linha só, rolando pro lado (protótipo),
     em vez de quebrar em várias linhas e empurrar os produtos pra baixo */
  .chips-categorias {
    flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  }
  .chips-categorias::-webkit-scrollbar { height: 0; }
  .chips-categorias .chip { flex: none; }

  /* Painel do admin — tema escuro dedicado, réplica do protótipo
     Dashboard Mobile.dc.html */
  .painel-mobile {
    display: flex !important; flex-direction: column; gap: 12px;
    background: #070C20; color: #F2F2F2; margin: -20px -16px -76px; padding: 16px 16px 96px;
    --pm-surface: #101736; --pm-sunken: #0C1229; --pm-muted: #99A1C2; --pm-line: rgba(255,255,255,.12);
    --pm-hair: rgba(255,255,255,.07); --pm-gold: #C9A227; --pm-danger: #E0897A; --pm-ok: #6FC79C;
  }
  .painel-mobile-abas { display: flex; gap: 7px; }
  .pm-aba {
    flex: 1; height: 38px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--pm-line); background: transparent; color: #F2F2F2; border-radius: 11px;
    font-family: var(--font-sans); font-size: 13px; text-decoration: none;
  }
  .pm-aba.ativa { background: rgba(201,162,39,.16); border-color: var(--pm-gold); color: var(--pm-gold); font-weight: 500; }
  .pm-cartao { background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: 16px; padding: 16px; }
  .pm-cartao.pm-sem-padding { padding: 0; overflow: hidden; }
  .pm-rotulo { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pm-muted); }
  .pm-valor-grande { font-family: var(--font-serif); font-size: 32px; color: var(--pm-gold); margin: 5px 0 10px; }
  .pm-linha-legenda { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pm-muted); }
  .pm-grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pm-kpi { background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: 14px; padding: 13px; }
  .pm-kpi-rotulo { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pm-muted); }
  .pm-kpi-valor { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
  .pm-kpi-nota { font-size: 10.5px; color: var(--pm-muted); margin-top: 2px; }
  .pm-ok { color: var(--pm-ok) !important; }
  .pm-danger { color: var(--pm-danger) !important; }
  .pm-titulo { font-family: var(--font-serif); font-size: 19px; margin-bottom: 12px; color: #F2F2F2; }
  .pm-titulo-com-borda { padding: 14px 16px; border-bottom: 1px solid var(--pm-hair); margin-bottom: 0; }
  .pm-linha-kv { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
  .pm-hr { height: 1px; background: var(--pm-hair); margin: 9px 0; }
  .pm-alerta {
    display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px;
  }
  .pm-alerta-erro { background: rgba(224,137,122,.16); }
  .pm-alerta-aviso { background: rgba(201,162,39,.16); }
  .pm-alerta-ok { background: rgba(111,199,156,.16); }
  .pm-alerta-n { font-family: var(--font-mono); font-size: 17px; font-weight: 600; flex: none; }
  .pm-alerta-erro .pm-alerta-n { color: var(--pm-danger); }
  .pm-alerta-aviso .pm-alerta-n { color: var(--pm-gold); }
  .pm-alerta-ok .pm-alerta-n { color: var(--pm-ok); }
  .pm-linha-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
  .pm-linha-barra:last-child { margin-bottom: 0; }
  .pm-linha-barra-rotulo { width: 62px; flex: none; font-size: 11px; color: var(--pm-muted); }
  .pm-trilho { flex: 1; height: 18px; border-radius: 6px; background: var(--pm-sunken); overflow: hidden; }
  .pm-trilho > div { height: 100%; }
  .pm-linha-barra-valor { width: 74px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
  .pm-linha-lista { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--pm-hair); }
  .pm-linha-lista-info { min-width: 0; flex: 1; }
  .pm-linha-lista-nome { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-linha-lista-sub { font-size: 10.5px; }
  .pm-linha-lista-valor { flex: none; font-family: var(--font-mono); font-size: 13px; }
  .pm-linha-custo { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
  .pm-linha-custo:last-child { margin-bottom: 0; }
  .pm-linha-custo-nome { min-width: 0; flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-trilho-fino { width: 64px; flex: none; height: 7px; border-radius: 20px; background: var(--pm-sunken); overflow: hidden; }
  .pm-trilho-fino > div { height: 100%; background: var(--pm-gold); }
  .pm-linha-custo-valor { flex: none; font-family: var(--font-mono); font-size: 12px; width: 62px; text-align: right; }
  .pm-mono-muted { font-family: var(--font-mono); color: var(--pm-muted); }
  .pm-vendedor-linha { margin-bottom: 11px; }
  .pm-vendedor-linha:last-child { margin-bottom: 0; }
  .pm-hint { font-size: 12.5px; color: var(--pm-muted); }
  .pm-barras-cresc { display: flex; align-items: flex-end; gap: 7px; height: 120px; }
  .pm-barra-cresc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
  .pm-barra-cresc-col span { font-size: 9.5px; color: var(--pm-muted); }
  .pm-barra-cresc { width: 100%; background: var(--pm-gold); border-radius: 6px 6px 0 0; min-height: 3px; }
  .pm-barras-entsaida { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
  .pm-barras-entsaida-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
  .pm-barras-entsaida-col span { font-size: 10px; color: var(--pm-muted); }
  .pm-barras-entsaida-par { width: 100%; display: flex; gap: 4px; align-items: flex-end; height: 100%; }
  .pm-barra-entrada, .pm-barra-saida { flex: 1; border-radius: 5px 5px 0 0; min-height: 2px; }
  .pm-barra-entrada { background: var(--pm-ok); }
  .pm-barra-saida { background: var(--pm-danger); }
  .pm-legenda-entsaida { display: flex; gap: 16px; font-size: 10.5px; color: var(--pm-muted); margin-top: 8px; }
  .pm-legenda-entsaida span { display: flex; align-items: center; gap: 6px; }
  .pm-legenda-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
  .pm-legenda-dot-ok { background: var(--pm-ok); }
  .pm-legenda-dot-danger { background: var(--pm-danger); }

  /* Contas a pagar — cartões claros, réplica do protótipo (tela isPagar) */
  .cartoes-pagar { display: flex !important; flex-direction: column; gap: 12px; }
  .pm-grade-2-clara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cartao-kpi-claro { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 14px; padding: 12px 13px; }
  .cartao-kpi-claro.cartao-kpi-perigo { background: #F7E7E3; border-color: rgba(156,74,60,.25); }
  .cartao-kpi-claro .valor { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
  .cartao-kpi-claro.cartao-kpi-perigo .valor { color: #9C4A3C; }
  .cartao-kpi-claro .rotulo { font-size: 11px; color: #6B6B6B; }
  .cartao-kpi-claro.cartao-kpi-perigo .rotulo { color: #9C4A3C; }
  .cartao-pagar-mob { background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px; }
  .cartao-pagar-mob .topo { display: flex; align-items: flex-start; gap: 10px; }
  .cartao-pagar-mob .info { min-width: 0; flex: 1; }
  .cartao-pagar-mob .nome { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
  .cartao-pagar-mob .sub { font-size: 11.5px; color: #6B6B6B; }
  .cartao-pagar-mob .situacao { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #F2ECDD; color: #7D5A0B; }
  .cartao-pagar-mob .situacao.situacao-perigo { background: #F7E7E3; color: #9C4A3C; }
  .cartao-pagar-mob .valor-linha { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-top: 10px; }
  .cartao-pagar-mob .acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cartao-pagar-mob .select-conta-mob {
    flex: 1; height: 46px; border: 1px solid rgba(11,11,11,.14); border-radius: 12px; background: #fff;
    color: var(--ink); font-family: var(--font-sans); font-size: 13px; padding: 0 10px;
  }
  .cartao-pagar-mob .btn-pagar-mob {
    flex: none; width: 90px; height: 46px; border: none; background: var(--ink); color: #fff;
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  }

  .chips-filtro-mob {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  }
  .chips-filtro-mob::-webkit-scrollbar { height: 0; }
  .chip-mob {
    flex: none; height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 7px;
    border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink);
    border-radius: 20px; font-family: var(--font-sans); font-size: 13px; text-decoration: none;
    white-space: nowrap;
  }
  .chip-mob.ativo { background: #FBF0D6 !important; border-color: var(--gold) !important; color: #7D5A0B !important; font-weight: 500; }

  /* cartão de cliente — réplica do protótipo Mobile DFPet.dc.html */
  .cartao-cliente-mob {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 14px 15px;
    text-decoration: none; color: inherit; display: block;
  }
  .cartao-cliente-mob .topo { display: flex; align-items: flex-start; gap: 10px; }
  .cartao-cliente-mob .info { min-width: 0; flex: 1; }
  .cartao-cliente-mob .nome {
    font-family: var(--font-serif); font-size: 21px; color: #7D5A0B; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    text-decoration: none;
  }
  .cartao-cliente-mob .sub { font-size: 12px; color: #6B6B6B; margin-top: 1px; }
  .cartao-cliente-mob .badge-conf {
    flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  }
  .cartao-cliente-mob .metricas { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .cartao-cliente-mob .metricas .pts { font-family: var(--font-mono); font-size: 12.5px; color: #7D5A0B; }
  .cartao-cliente-mob .metricas .media { font-size: 12px; color: #6B6B6B; }
  .cartao-cliente-mob .acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cartao-cliente-mob .btn-pedido {
    flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: none; background: var(--ink); color: #fff; border-radius: 12px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; cursor: pointer;
    text-decoration: none;
  }
  .cartao-cliente-mob .btn-compartilhar-mob, .cartao-cliente-mob .btn-abrir-mob {
    width: 52px; height: 44px; flex: none; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
  }
  .cartao-cliente-mob .btn-compartilhar-mob { border: 1px solid #1B8A4B; background: #1FA855; color: #fff; }
  .cartao-cliente-mob .btn-abrir-mob { border: 1px solid rgba(11,11,11,.11); background: #fff; color: var(--ink); }

  /* KPIs + lista de pedidos — réplica do protótipo */
  .kpis-pedidos-mob { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis-pedidos-mob .kpi-mob {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 14px; padding: 12px 13px;
  }
  .kpis-pedidos-mob .kpi-mob .valor { font-family: var(--font-mono); font-size: 19px; font-weight: 600; }
  .kpis-pedidos-mob .kpi-mob .valor small { font-size: 11px; color: #6B6B6B; font-weight: 500; }
  .kpis-pedidos-mob .kpi-mob .rotulo { font-size: 11px; color: #6B6B6B; }

  .cartao-pedido-mob {
    background: #fff; border: 1px solid rgba(11,11,11,.11); border-radius: 16px; padding: 13px 15px;
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  }
  .cartao-pedido-mob .dot { width: 11px; height: 11px; flex: none; border-radius: 50%; }
  .cartao-pedido-mob .info { min-width: 0; flex: 1; }
  .cartao-pedido-mob .cliente { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
  .cartao-pedido-mob .meta { font-family: var(--font-mono); font-size: 11.5px; color: #6B6B6B; }
  .cartao-pedido-mob .valor { flex: none; font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: right; }

  /* --- 5. filtros e busca ------------------------------------------------- */

  .catalogo-filtros { gap: 10px; }
  .catalogo-filtros input[type="search"],
  .catalogo-filtros input[type="text"] { min-height: 48px; font-size: 1rem; }
  /* o botão "Buscar" de largura cheia era o elemento mais forte da tela */
  .catalogo-filtros > button[type="submit"] { display: none; }
  .busca-wrap .btn-icone-busca, .busca-wrap .btn-microfone { min-width: 44px; min-height: 44px; }

  /* rolagem horizontal quebrava qualquer dropdown de dentro (o eixo
     vertical vira "auto" automaticamente junto com o horizontal, e
     corta o painel que abre pra baixo) — quebra linha em vez de rolar */
  .filtros-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
  .filtros-toolbar > * { flex: 0 0 auto; }
  /* período + situação juntos num só .grupo-botoes (telas novas) podem
     ficar mais largos que a tela sozinhos — deixa quebrar linha por
     dentro em vez de vazar pra fora (nas telas antigas cada filtro é um
     item solto direto no .filtros-toolbar, que já quebra linha sozinho) */
  .filtros-toolbar .grupo-filtros-largos { flex: 1 1 100%; flex-wrap: wrap; }
  .chip, .btn-outline { min-height: 40px; display: inline-flex; align-items: center; }

  /* busca por nome fica sozinha na linha; categoria + chips viram uma
     fileira de botões roláveis embaixo, tipo os chips de filtro */
  .catalogo-filtros > .busca-wrap:first-child { flex: 1 1 100%; }

  /* lista de clientes: o "+ novo" e o "Filtros" ficam na MESMA linha da
     busca (não embaixo), encolhendo a caixa de busca — diferente do
     catálogo de produtos acima, por isso uma classe à parte */
  .catalogo-filtros-compacta { flex-wrap: nowrap; }
  .catalogo-filtros-compacta > .busca-wrap:first-child { flex: 1 1 auto; min-width: 0; }
  .catalogo-filtros-compacta > .btn-novo-cliente,
  .catalogo-filtros-compacta > .col-filter-wrap { flex: 0 0 auto; margin-bottom: 0; }
  .catalogo-filtros-compacta .filtros-btn .label { display: none; }
  .catalogo-filtros-compacta .filtros-btn .btn-icon { margin-right: 0; }
  /* o botão de filtro fica perto da borda direita — o painel abre pra
     esquerda, senão vaza pra fora da tela */
  .catalogo-filtros-compacta .filtros-painel { left: auto; right: 0; }

  /* Colunas só faz sentido numa tabela de verdade — no card mobile some,
     e some junto o resto da barra secundária que sobrava só com ele */
  .filtros-toolbar-colunas-only, .clientes-acoes-topo { display: none; }

  .catalogo-filtros-chips {
    display: flex; flex-wrap: nowrap; gap: 8px;
    flex: 1 1 100%;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .catalogo-filtros-chips::-webkit-scrollbar { height: 0; }
  .catalogo-filtros-chips > * { flex: 0 0 auto; }

  /* categoria vira um botão igual aos outros, não uma caixa de busca */
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) {
    flex: 0 0 auto !important; min-width: 0 !important; width: auto !important;
  }
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) input[type="text"] {
    min-height: 40px; height: 40px; width: 118px;
    padding: 0 14px; border-radius: 999px; font-size: 0.85rem;
  }
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) .btn-microfone { display: none; }

  /* --- 5b. barrinha de resumo (Pedidos/Atenção/Contas a receber) rola
            pro lado em vez de quebrar linha ----------------------------- */

  .resumo-barra {
    flex-wrap: nowrap; overflow-x: auto; gap: 1.4rem; padding: 0.8rem 1.1rem;
    scrollbar-width: none;
  }
  .resumo-barra::-webkit-scrollbar { height: 0; }
  .resumo-barra-item { flex: 0 0 auto; }

  /* --- 6. catálogo: a linha por categoria continua rolando pro lado,
           mas o card para inteiro e não fica cortado ao meio -------------- */

  .linha-scroll {
    scroll-snap-type: x mandatory;
    padding-left: 16px; padding-right: 16px;
    scroll-padding-left: 16px;
    margin-left: -16px; margin-right: -16px;
  }
  .linha-scroll > .produto-card { flex: 0 0 168px; scroll-snap-align: start; }
  .seta-scroll { display: none; }             /* o snap já entrega a affordance */
  .categoria-cabecalho { padding-right: 4px; }

  /* tamanhos do cartão de produto: valores exatos do protótipo
     (isCatalogo) — stepper compacto e "adicionar" ocupando o resto na
     mesma linha, em vez dos alvos de 44px da versão anterior da tela */
  .produto-card .produto-nome { font-size: 12px; line-height: 1.3; min-height: 31px; font-weight: 400; }
  .produto-card .produto-preco .preco-atual { font-size: 14.5px; }
  .produto-card .produto-form { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; align-items: center; }
  .produto-card .qtd-stepper { min-height: 0; height: 40px; flex: none; }
  .produto-card .qtd-menos, .produto-card .qtd-mais { min-width: 0; min-height: 0; width: 26px; height: 100%; font-size: 17px; padding: 0; }
  .produto-card .qtd-input { width: 22px; padding: 0; text-align: center; }
  .produto-card .produto-form > button[type="submit"] { min-height: 0; height: 40px; flex: 1; min-width: 0; font-size: 0.95rem; }

  /* --- 7. nada flutuando sobre o conteúdo -------------------------------- */

  .cart-fab { display: none; }                 /* substituído pela barra de total */
  .chat-widget { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .chat-fab { width: 44px; height: 44px; }
  .chat-panel { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }

  .barra-carrinho-mobile {
    position: fixed; left: 0; right: 0;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    /* abaixo das folhas/gavetas (70+), acima da barra inferior (60) */
    z-index: 61;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--acao); color: var(--acao-texto);
    padding: 11px 16px;
  }
  .barra-carrinho-mobile[hidden] { display: none; }
  .barra-carrinho-mobile .rotulo { font-size: 0.72rem; font-weight: 700; color: #6B4E12; }
  .barra-carrinho-mobile .total { font-family: var(--font-mono, monospace); font-size: 1.12rem; font-weight: 500; }
  .barra-carrinho-mobile a {
    min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm, 10px);
    background: var(--ink); color: var(--gold);
    display: flex; align-items: center;
    font-size: 0.95rem; font-weight: 700; text-decoration: none;
  }

  /* --- 8. barra de totais das listas fica acima da navegação ------------- */

  .barra-acoes-clientes {
    position: sticky; bottom: 0; z-index: 90;
    background: var(--surface, #FFFDF8);
    border-top: 1.5px solid rgba(11, 11, 11, 0.12);
    margin: 0 -16px; padding: 12px 16px;
  }

  /* --- 9. vazio com saída ------------------------------------------------ */

  .empty-state { padding: 26px 18px; text-align: center; font-size: 0.95rem; }
  .empty-state .btn-primario { margin-top: 14px; min-height: 48px; }
}