/* ══════════════════════════════════════════════════════════════════
   mobile.css — ajustes do ERP para telefone (fase 1)

   Arquivo NOVO: nenhuma regra existente foi alterada. Tudo vive dentro de
   @media (max-width: 820px), então o computador continua idêntico.

   Base: auditoria em navegador real (Chrome headless) em 20/09/2026, nas
   telas iPhone 390x844 e Android 360x800. O que foi medido e corrigido:
     • campos com 12px faziam o Safari dar zoom ao focar        → 16px
     • 177 alvos de toque abaixo de 36px na lista de Vendas     → 40px
     • a tabela de Vendas estourava 1.033px além da tela        → menos colunas
     • tabelas do Painel e de Pagamentos também estouravam      → rolagem própria
     • o botão flutuante de pagamentos cobria a última linha    → recuo no rodapé

   NÃO TOCA no login nem na biometria de acesso (cdc-capacitor-app.js).
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── 1. Campos: 16px é o mínimo que impede o zoom automático do Safari ── */
  #main input,
  #main select,
  #main textarea,
  #page-nova-venda .form-input,
  #page-nova-venda .form-select,
  #page-vendas-api .form-input,
  #page-vendas-api .form-select {
    font-size: 16px;
    min-height: 44px;
  }
  #page-nova-venda #f-pgto,
  #page-nova-venda #f-data-pgto {
    min-height: 44px;
    font-size: 16px;
  }
  #main textarea { min-height: 88px; }

  /* ── 2. Alvo de toque: 40px de altura mínima nos controles ── */
  #main .btn,
  #main button:not(.modal-close):not(.pix-aviso-x) {
    min-height: 40px;
  }
  #main .btn-sm { padding-inline: 12px; }

  /* Ícones de ação da lista de vendas: viram alvos redondos maiores */
  #page-vendas .vendas-col-acoes button,
  #page-vendas .vendas-btn-marcar-cancelado,
  #page-vendas .vendas-btn-solicitar-cancelamento {
    min-width: 40px;
    min-height: 40px;
  }

  /* ── 3. Vendas: no telefone, só o que se procura de relance ──
     Some o que dá para ver abrindo a venda. A tabela cabe na tela e
     deixa de exigir rolagem lateral de mais de mil pixels. */
  /* A coluna «Status» (classe antiga `vendas-col-agendamento`) FICA no telefone:
     desde 23/09/2026 é ela que mostra a situação do certificado, no lugar da
     coluna de estado de pagamento, que deixou de existir. */
  #page-vendas .vendas-col-emissora,
  #page-vendas .vendas-col-produto,
  #page-vendas .vendas-col-gss-sync,
  #page-vendas .vendas-col-data {
    display: none;
  }
  #page-vendas .vendas-list-table { min-width: 0; width: 100%; }
  #page-vendas .vendas-col-cliente { max-width: 46vw; }
  #page-vendas .vendas-col-cliente > * { overflow-wrap: anywhere; }

  /* ── 4. Qualquer tabela rola dentro da própria caixa, nunca a página ── */
  #main .table-wrap,
  #main .tabela-wrap,
  #page-dashboard .table-wrap,
  #page-pagamentos .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 5. Abas de Pagamentos: rolam em vez de estourar a linha ── */
  #page-pagamentos .pag-abas,
  #page-vendas .ag-tabs-row,
  #page-agendamentos .ag-tabs-row {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  #page-pagamentos .pag-aba { flex: none; }

  /* ── 6. Botão flutuante de pagamentos: sai de cima da última linha ──
     Respeita a barra de gestos do Android e o risco do iPhone. */
  .pix-aviso-wrap {
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: scale(.92);
    transform-origin: bottom right;
  }
  /* Espaço no fim da página para o botão não cobrir conteúdo */
  #main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ── 7. Cabeçalho e filtros ── */
  #main .section-head { gap: 8px; }
  #main .topbar { gap: 6px; flex-wrap: wrap; }
  #main .toolbar-actions,
  #page-vendas .vendas-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #main .form-select,
  #main .form-input { max-width: 100%; }

  /* ── 8. Filtros da lista de Vendas (fase 2) ──
     vendas.css trava esses campos em 12px/34px com !important para que o
     zoom do Windows não os deforme no computador. No telefone isso obriga
     o Safari a dar zoom ao focar e deixa o alvo pequeno para o dedo, então
     aqui — e só abaixo de 820px — a trava é refeita em tamanho de dedo. */
  #page-vendas .section-head .form-input,
  #page-vendas .section-head .form-select,
  #page-vendas .section-head .vendas-busca-wrap #busca-v {
    font-size: 16px !important;
    min-height: 44px !important;
    max-height: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #page-vendas .section-head .vendas-busca-wrap #busca-v {
    padding-left: 2.75rem !important;   /* mantém o espaço da lupa */
  }
  #page-vendas .section-head .btn {
    font-size: 13px !important;
    min-height: 40px !important;
    max-height: none !important;
    padding: 8px 14px !important;
  }

  /* ── 9. Fechar modal: o "X" tinha 27px, menos que a ponta do dedo ── */
  .modal-close {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 10. Tabelas largas: quem rola é a caixa, e isso fica visível ──
     A página não rola de lado (medido: 0px nos dois aparelhos); quem rola é
     a tabela. A sombra na borda avisa que ainda há coluna depois dela. */
  #page-vendas .card > .table-wrap,
  #page-dashboard .card > .table-wrap,
  #page-pagamentos .card > .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, var(--card, #fff) 30%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--card, #fff) 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0)),
      linear-gradient(to left,  rgba(15,23,42,.10), rgba(15,23,42,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* ── 11. Cabeçalho de Vendas em grade (fase 3) ──
     No computador a barra alinha tudo à direita; no telefone isso deixava
     um vão à esquerda e cortava o campo de busca na borda. Estas regras
     repetem, para o navegador do celular, a grade que o modo aplicativo
     (body.modo-app, em vendas.css) já usava — mesmo desenho, mesma lógica. */
  #page-vendas .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    justify-content: stretch;
  }
  /* busca, botões grandes e o aviso de pendências ocupam a linha inteira */
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar > div:first-child,
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar > .btn,
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar > .vendas-pend-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar > .btn,
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar > .vendas-pend-btn {
    justify-content: center;
  }
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar .form-select,
  #page-vendas .section-head > .toolbar-actions.vendas-head-toolbar .form-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #page-vendas #busca-v {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  /* ── 12. Vendas via API (fase 4) ──
     vendas_api.css é injetado pelo próprio módulo, depois deste arquivo, e
     por isso vencia o empate de especificidade: os campos ficavam em 12px e
     o Safari dava zoom ao tocar. No telefone eles voltam a 16px/44px. */
  #page-vendas-api .form-input,
  #page-vendas-api .form-select,
  #page-vendas-api textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  #page-vendas-api .form-label { font-size: 12px; }
  #page-vendas-api .card-nova-venda-title { font-size: 13px; }
}

/* Telas bem estreitas (iPhone SE, Android pequeno) */
@media (max-width: 380px) {
  #page-vendas .vendas-col-pgto { display: none; }
  #page-vendas .vendas-col-cliente { max-width: 40vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   Auditoria do app no Galaxy S25 (360 × 780, 09/10/2026)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Atalhos do topo (AgilizaID, Pendências ERP, CNPJ, RFB, GSS) estavam
        escondidos no celular e no app — a barra ficava só com «Sair». Voltam
        numa fileira que desliza para o lado; «Sair» fica sempre à vista. */
  #main .topbar { flex-wrap: nowrap; }
  #main .topbar-right {
    flex: 1 1 auto; min-width: 0; margin-left: 0;
    flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 2px 0;
  }
  #main .topbar-right::-webkit-scrollbar { display: none; }
  #main .topbar-right .ql {
    display: inline-flex !important; flex: 0 0 auto; white-space: nowrap;
    min-height: 36px; max-height: none; padding: 6px 11px !important; font-size: 12px !important;
  }
  #main .topbar-right > .btn[data-cdc-click="doLogout()"] {
    position: sticky; right: 0; flex: 0 0 auto; margin-left: auto !important;
    min-height: 36px; background: #fff; box-shadow: -10px 0 12px rgba(255, 255, 255, .95);
  }

  /* 3. Campo com opção de texto longo esticava a coluna para fora do cartão
        (Auditoria: «Até», «Ação» e a busca cortados). */
  .form-grid-2 > *, .form-grid-3 > *, .form-grid-4 > *, .rep-form-grid > * { min-width: 0; }
  .form-grid-2 .form-select, .form-grid-3 .form-select, .form-grid-4 .form-select,
  .form-grid-2 .form-input, .form-grid-3 .form-input, .form-grid-4 .form-input {
    min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box;
  }

  /* 4. Botões principais com altura de dedo (Repasse: 28 px). */
  #page-repasse .section-head .btn.btn-sm, #page-repasse .rep-filtros-card .btn.btn-sm.rep-btn-gerar { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* 2. App: a barra de navegação fica embaixo; o botão verde dos pagamentos
      subia por cima dela e tapava o 5.º item. Agora fica acima da barra. */
@media (max-width: 768px) {
  body.modo-app .pix-aviso-wrap,
  body.plataforma-android .pix-aviso-wrap {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.modo-app #main,
  body.plataforma-android #main {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Auditoria visual do app no S25 — 2.ª rodada (10/10/2026)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Tabelas → cartões (rótulos postos por assets/js/mobile_tabelas.js). */
  #main .table-wrap:has(> table.tbl-cartao),
  #main .table-wrap:has(> table.tbl-cartao) { overflow-x: visible !important; }
  #main table.tbl-cartao {
    display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    table-layout: auto !important; border: 0 !important; background: transparent !important;
  }
  #main table.tbl-cartao thead { display: none !important; }
  #main table.tbl-cartao tbody, #main table.tbl-cartao tfoot { display: block; width: 100%; }
  #main table.tbl-cartao tr {
    display: block; position: relative; margin: 0 0 10px; padding: 4px 14px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  #main table.tbl-cartao tbody tr:not([class*="pend"]):not([class*="revok"]):not([class*="row--"]):not([style*="background"]) { background: #fff; }
  #main table.tbl-cartao td {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 12px;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid #f1f5f9 !important;
    text-align: right !important; white-space: normal !important; font-size: 14px; line-height: 1.35;
    overflow: visible !important;
  }
  #main table.tbl-cartao td:last-child { border-bottom: 0 !important; }
  #main table.tbl-cartao td::before {
    content: attr(data-rot); flex: 0 0 34%; max-width: 34%; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted, #64748b); padding-top: 2px;
  }
  #main table.tbl-cartao td[data-rot=""]::before { display: none; }
  #main table.tbl-cartao td[data-rot=""] { justify-content: flex-start; text-align: left !important; }
  #main table.tbl-cartao td > * { max-width: 100%; min-width: 0; }
  #main table.tbl-cartao td > div, #main table.tbl-cartao td > span { text-align: right; }
  /* célula vazia não ocupa linha */
  #main table.tbl-cartao td:empty { display: none; }
  /* coluna de ações: botões numa fileira, com altura de dedo */
  #main table.tbl-cartao td .btn, #main table.tbl-cartao td button { min-height: 38px; }
  #main table.tbl-cartao tr.tc-unica td { display: block; text-align: left !important; border-bottom: 0 !important; }
  #main table.tbl-cartao tr.tc-unica td::before { display: none; }
  #main table.tbl-cartao tfoot tr { background: #f8fafc; font-weight: 700; }

  /* Vencimentos: 4 contadores em 2×2 (o «Total» saía cortado) e cartão em pé. */
  .venc-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .venc-row { flex-wrap: wrap !important; align-items: flex-start !important; gap: 8px 12px !important; }
  .venc-row-dias { min-width: 0 !important; flex: 1 1 100%; display: flex; align-items: baseline; gap: 6px; text-align: left !important; }
  .venc-row-dias > div:last-child { font-size: 11px !important; margin-top: 0 !important; }
  .venc-row-info { flex: 1 1 100% !important; }
  .venc-row-nome { white-space: normal !important; font-size: 15px !important; line-height: 1.3; }
  .venc-row-info > div { font-size: 12.5px !important; }
  .venc-row-acoes { flex: 1 1 100% !important; flex-direction: row !important; gap: 8px !important; }
  .venc-row-acoes .btn { flex: 1; min-height: 44px; font-size: 13px !important; justify-content: center; }

  /* Financeiro: cartões de valores cabiam 1,5 por linha (cortados à direita). */
  .fin-kpis-3 { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .fin-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  /* Cartão genérico, 2.º ajuste: a cor da linha (td) contínua, sem faixas
     brancas; margem interna nos campos (a barra lateral cobria o rótulo). */
  #main table.tbl-cartao tr { padding: 0 !important; overflow: hidden; }
  #main table.tbl-cartao td { padding: 8px 14px !important; border-bottom: 1px solid rgba(15, 23, 42, .06) !important; }
  #main table.tbl-cartao td > div:only-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

  /* Vendas: cartão próprio e compacto (a tela mais usada).
     ┌ cliente (nome inteiro, documento, selos)              ┐
     │ situação / agendamento                                │
     │ produto · emissora                         R$ valor   │
     │ data · nº GSS · envio                       pagamento │
     └ ações ───────────────────────────────────────────────┘ */
  #main table.vendas-list-table.tbl-cartao tr {
    display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 4px; padding: 12px 14px !important; background: #fff;
    border-left: 4px solid var(--border, #e2e8f0);
  }
  #main table.vendas-list-table.tbl-cartao td {
    display: block; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: transparent !important; text-align: left !important; font-size: 13px;
  }
  #main table.vendas-list-table.tbl-cartao td::before { display: none !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-cliente { grid-column: 1 / -1; grid-row: 1; max-width: none !important; }
  #main .vendas-list-table.tbl-cartao .vendas-cell-rs {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    max-width: none !important; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--navy, #0f172a);
  }
  #main .vendas-list-table.tbl-cartao .vendas-col-cliente > div:nth-child(2) { font-size: 12px !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-agendamento { grid-column: 1 / -1; grid-row: 2; max-width: none !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-agendamento:empty { display: none; }
  #main .vendas-list-table.tbl-cartao .vendas-col-produto { grid-column: 1 / 3; grid-row: 3; align-self: center; font-size: 13px !important; margin-top: 6px; }
  #main .vendas-list-table.tbl-cartao .vendas-col-emissora { grid-column: 3; grid-row: 3; align-self: center; margin-top: 6px; }
  #main .vendas-list-table.tbl-cartao .vendas-col-valor { grid-column: 4; grid-row: 3; align-self: center; text-align: right !important; font-size: 16px; margin-top: 6px; }
  #main .vendas-list-table.tbl-cartao .vendas-col-data { grid-column: 1; grid-row: 4; align-self: center; font-size: 12px; color: var(--muted, #64748b); }
  #main .vendas-list-table.tbl-cartao .vendas-col-gss-num { grid-column: 2; grid-row: 4; align-self: center; font-size: 12px; }
  #main .vendas-list-table.tbl-cartao .vendas-col-gss-sync { grid-column: 3; grid-row: 4; align-self: center; }
  #main .vendas-list-table.tbl-cartao .vendas-col-pgto { grid-column: 4; grid-row: 4; align-self: center; text-align: right !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-acoes {
    grid-column: 1 / -1; grid-row: 5; white-space: normal !important;
    margin-top: 10px; padding-top: 10px !important; border-top: 1px solid #eef2f7 !important;
  }
  #main .vendas-list-table.tbl-cartao .vendas-col-acoes > div { flex-wrap: wrap !important; gap: 8px !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-acoes button { min-height: 40px; min-width: 40px; }
  #main .vendas-list-table.tbl-cartao .vendas-col-del { position: absolute; top: 12px; right: 12px; }
  /* cor da linha → faixa lateral / fundo do cartão inteiro */
  #main .vendas-list-table.tbl-cartao tr.venda-row-agilizaid { border-left-color: #4338ca; }
  #main .vendas-list-table.tbl-cartao tr.venda-row-mercadolivre { border-left-color: #eab308; }
  #main .vendas-list-table.tbl-cartao tr.venda-row-agenda-site { border-left-color: #16a34a; }
  #main .vendas-list-table.tbl-cartao tr.pending-payment { background: #fff5f5; border-color: #fecaca; }
  #main .vendas-list-table.tbl-cartao tr.revoked { background: #f8fafc; opacity: .8; }
  #main .vendas-list-table.tbl-cartao tr.bonified { background: #fffbeb; }
}

@media (max-width: 600px) {
  /* Vendas: as regras que pintam as linhas (vendas.css, AgilizaID/pendente com
     !important e especificidade 1-4-3) venciam o cartão; #main#main ganha. */
  #main#main table.vendas-list-table.tbl-cartao td {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  #main#main table.vendas-list-table.tbl-cartao td > div,
  #main#main table.vendas-list-table.tbl-cartao td > span { text-align: left; }
  #main#main table.vendas-list-table.tbl-cartao tr.venda-row-agilizaid { background: #f5f7ff; }
  #main#main table.vendas-list-table.tbl-cartao tr.venda-row-mercadolivre { background: #fffdf0; }
  #main#main table.vendas-list-table.tbl-cartao tr.pending-payment { background: #fff5f5; }

  /* Coluna «Ações» de qualquer tabela: rótulo em cima, botões em 2 colunas. */
  #main table.tbl-cartao td[data-rot="Ações"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    text-align: left !important;
  }
  #main table.tbl-cartao td[data-rot="Ações"]::before { grid-column: 1 / -1; max-width: none; }
  #main table.tbl-cartao td[data-rot="Ações"] > div { display: contents; }
  #main table.tbl-cartao td[data-rot="Ações"] .btn,
  #main table.tbl-cartao td[data-rot="Ações"] button {
    width: 100%; min-height: 42px; margin: 0 !important; justify-content: center; white-space: normal;
  }
}

@media (max-width: 600px) {
  /* Ações: grupos internos (ex.: botões do AgilizaID na Agenda) também entram na grade */
  #main table.tbl-cartao td[data-rot="Ações"] div { display: contents; }
  /* Vendas: botões de ícone numa fileira só (não na grade de 2 colunas) */
  #main#main table.vendas-list-table.tbl-cartao td.vendas-col-acoes { display: block !important; }
  #main#main table.vendas-list-table.tbl-cartao td.vendas-col-acoes > div {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start;
  }
  #main#main table.vendas-list-table.tbl-cartao td.vendas-col-acoes button {
    width: auto !important; min-width: 42px; min-height: 42px;
  }
}

@media (max-width: 600px) {
  #main table.tbl-cartao td[data-rot="Ações"] div { display: contents !important; }
  /* Cliente: rótulo em cima, nome embaixo à esquerda (à direita ele quebrava torto) */
  #main table.tbl-cartao td[data-rot="Cliente"] { display: block !important; text-align: left !important; }
  #main table.tbl-cartao td[data-rot="Cliente"]::before { display: block; max-width: none; margin-bottom: 2px; }
  #main table.tbl-cartao td[data-rot="Cliente"] > * { text-align: left !important; }
}

@media (max-width: 600px) {
  /* Auditoria/Repasse: a grade de filtros usava colunas «auto»; com min-width:0
     a 1.ª coluna encolhia a zero e os campos se sobrepunham (De/Até, Usuário/Ação). */
  .rep-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  /* Grades montadas com style="grid-template-columns:…" no próprio HTML: os
     itens exigiam a largura do conteúdo e empurravam a borda (Configurações:
     2 colunas de 358 + 418 px numa tela de 328). */
  #main [style*="grid-template-columns"] > * { min-width: 0; }
  #page-configuracoes > div[style*="grid"],
  #page-configuracoes-integracoes > div[style*="grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  #page-configuracoes .card, #page-configuracoes-integracoes .card { max-width: 100%; }

  /* Relatórios: filtros com largura fixa cortavam o texto («Todas emiss…»). */
  #page-relatorios .card .form-select,
  #page-relatorios .card select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 600px) {
  /* Repasse: filtros com nomes longos ficam melhor em uma coluna (a regra de 2
     colunas é da Auditoria, com datas curtas). */
  #page-repasse .rep-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* Comandos e códigos (Configurações › Backup) quebram linha em vez de vazar. */
  #main code, #main pre, #main kbd { white-space: pre-wrap !important; word-break: break-all; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  /* Campos de texto longo: rótulo em cima, valor embaixo à esquerda
     (lado a lado o texto quebrava em pedaços: «05/10/2026 / a / 11/10/2026»). */
  #main table.tbl-cartao td:is([data-rot="Semana"], [data-rot="Nome"], [data-rot="E-mail"], [data-rot="Usuário"],
    [data-rot="Venda / Cliente"], [data-rot="Detalhes"], [data-rot="Emissor"], [data-rot="Descrição"], [data-rot="Observação"]) {
    display: block !important; text-align: left !important;
  }
  #main table.tbl-cartao td:is([data-rot="Semana"], [data-rot="Nome"], [data-rot="E-mail"], [data-rot="Usuário"],
    [data-rot="Venda / Cliente"], [data-rot="Detalhes"], [data-rot="Emissor"], [data-rot="Descrição"], [data-rot="Observação"])::before {
    display: block; max-width: none; margin-bottom: 2px;
  }
  /* Conferência da Rede: resumo do mês — os 3 valores numa linha própria, sem quebrar «R$». */
  #page-rede-conferencia div:has(> div > div > .rc-lb) { flex-wrap: wrap; row-gap: 10px; }
  #page-rede-conferencia div:has(> div > .rc-lb) {
    flex: 1 1 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; text-align: left !important;
  }
  #page-rede-conferencia .rc-vl { white-space: nowrap; font-size: 15px; }
}

@media (max-width: 600px) {
  /* 1.ª célula de cada cartão vira o título dele: rótulo pequeno em cima,
     valor em destaque embaixo (o rótulo longo quebrava em 2 linhas ao lado). */
  #main table.tbl-cartao:not(.vendas-list-table) tr:not(.tc-unica) > td:first-child {
    display: block !important; text-align: left !important; font-weight: 700; font-size: 15px;
  }
  #main table.tbl-cartao:not(.vendas-list-table) tr:not(.tc-unica) > td:first-child::before {
    display: block; max-width: none; margin-bottom: 2px; font-weight: 700;
  }
  /* Conferência da Rede: valores do mês sem encostar um no outro. */
  #page-rede-conferencia .rc-vl { font-size: 13px !important; }
  #page-rede-conferencia .rc-lb { font-size: 10px; }
}

/* Letra mínima no celular (10/10/2026): legendas e selos de 9–10,5 px eram
   legíveis só de perto no S25. No computador nada muda. */
@media (max-width: 600px) {
  #main [style*="font-size:9px"], #main [style*="font-size: 9px"],
  #main [style*="font-size:9.5px"], #main [style*="font-size:10px"],
  #main [style*="font-size: 10px"], #main [style*="font-size:10.5px"],
  #main [style*="font-size:8px"], #main [style*="font-size:8.5px"] { font-size: 11.5px !important; }
  #main .badge, #main .sb-badge { font-size: 11px !important; }
  #main .section-sub, #main .card-sub, #main .pag-sub, #main .stat-lbl,
  #main .form-label, #main .rc-lb, #main .fc-cell-doc { font-size: max(12px, 1em) !important; }
  #main small { font-size: 12px !important; }
}

/* Revisão no ar (10/10/2026) */
@media (max-width: 600px) {
  #main .stat-card .stat-lbl { font-size: 12.5px !important; line-height: 1.3; }
}
/* Relatórios/Financeiro (computador): valor e data numa linha só («R$» não desce). */
@media (min-width: 601px) {
  #page-relatorios .table-wrap td, #page-financeiro .table-wrap td { white-space: nowrap; }
  #page-relatorios .table-wrap td:nth-child(4), #page-financeiro .table-wrap td:nth-child(4) { white-space: normal; }
}

/* Cartão de venda no celular (11/10/2026): o selo SERPRO ficava por baixo do
   valor. A emissora padrão (SERPRO) some do cartão; Syngular, a exceção, aparece. */
@media (max-width: 600px) {
  #main .vendas-list-table.tbl-cartao .vendas-col-emissora:has(.b-navy) { display: none !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-produto { grid-column: 1 / 4 !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-gss-sync { padding-left: 8px !important; }
}

/* Cartão de venda Syngular no celular (21/10/2026): o selo SYNGULAR dividia a
   coluna com o produto e invadia o valor. Só quando o selo aparece, o produto
   ocupa as duas primeiras colunas e o selo fica à direita, antes do valor. */
@media (max-width: 600px) {
  #main .vendas-list-table.tbl-cartao tr:has(.vendas-col-emissora:not(:has(.b-navy))) .vendas-col-produto { grid-column: 1 / 3 !important; }
  #main .vendas-list-table.tbl-cartao .vendas-col-emissora:not(:has(.b-navy)) { justify-self: end; min-width: 0; }
  #main .vendas-list-table.tbl-cartao .vendas-col-emissora:not(:has(.b-navy)) .badge { white-space: nowrap; }
}