/* ═══════════════════════════════════════════════════════════════════════
   Z-INDEX SCALE — documentação da hierarquia de camadas (S27)
   ───────────────────────────────────────────────────────────────────────
   Antes da S27 o projeto tinha 36 valores distintos de z-index espalhados
   entre CSS, HTML inline e JS, sem escala documentada. Esta seção mapeia
   a hierarquia REAL observada no código e expõe variáveis para uso futuro.

   NOTA: Os valores LITERAIS continuam no código existente — este bloco
   documenta o mapa. Quando adicionar UI nova, usar a variável apropriada
   em vez de inventar um número.

   Camadas (de baixo pra cima):
   ┌──────────────────────────┬────────┬──────────────────────────────┐
   │ Camada                   │ Valor  │ Uso                          │
   ├──────────────────────────┼────────┼──────────────────────────────┤
   │ --z-below                │ -1     │ Decorativos atrás do fluxo   │
   │ --z-base                 │ 1      │ Conteúdo relativo normal     │
   │ --z-raised               │ 10     │ Sticky bars pequenos         │
   │ --z-sticky               │ 50     │ Dropdowns locais (calcBusca) │
   │ --z-header               │ 100    │ Sidebar, topbar mobile       │
   │ --z-nav                  │ 200    │ Bottom nav mobile            │
   │ --z-floatbar             │ 290    │ Barras flutuantes sobre nav  │
   │ --z-drawer-backdrop      │ 399    │ Backdrop de drawers PDV      │
   │ --z-drawer               │ 400    │ Drawers PDV (cart/pay)       │
   │ --z-dropdown             │ 500    │ Dropdowns dinâmicos          │
   │ --z-panel                │ 8000   │ Painéis laterais (notif)     │
   │ --z-overlay              │ 9000   │ Overlays modais padrão       │
   │ --z-overlay-high         │ 9500   │ Overlays sobre overlays      │
   │ --z-modal                │ 9999   │ Modais dinâmicos (JS)        │
   │ --z-modal-top            │ 10000  │ Modais sobre modais          │
   │ --z-login                │ 99000  │ Tela de login                │
   │ --z-login-pass           │ 99100  │ Modal de senha do login      │
   │ --z-sheet-backdrop       │ 99200  │ Backdrop de sheet mobile     │
   │ --z-sheet                │ 99300  │ Sheet mobile (m-mais)        │
   │ --z-fullscreen           │ 99500  │ Telas cheias (termos, print) │
   │ --z-success              │ 99700  │ Overlay de sucesso           │
   │ --z-onboarding           │ 99800  │ Onboarding, instalação       │
   │ --z-critical             │ 99900  │ Modais críticos bloqueantes  │
   │ --z-toast                │ 99999  │ Toasts (sempre no topo)      │
   └──────────────────────────┴────────┴──────────────────────────────┘

   REGRA PARA UI NOVA:
   - Sheet/drawer mobile → --z-sheet / --z-sheet-backdrop
   - Modal normal → --z-overlay
   - Modal crítico/bloqueante → --z-critical
   - Feedback flutuante (toast/snackbar) → --z-toast
   - Dropdown de input → --z-dropdown
   Se não souber qual usar, pedir revisão antes de inventar valor novo.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-nav: 200;
  --z-floatbar: 290;
  --z-drawer-backdrop: 399;
  --z-drawer: 400;
  --z-dropdown: 500;
  --z-panel: 8000;
  --z-overlay: 9000;
  --z-overlay-high: 9500;
  --z-modal: 9999;
  --z-modal-top: 10000;
  --z-login: 99000;
  --z-login-pass: 99100;
  --z-sheet-backdrop: 99200;
  --z-sheet: 99300;
  --z-fullscreen: 99500;
  --z-success: 99700;
  --z-onboarding: 99800;
  --z-critical: 99900;
  --z-toast: 99999;
}

:root{
  /* ── Semantic button tokens ────────────────────────────── */
  --btn-primary-bg:      var(--a3);
  --btn-primary-color:   #000;
  --btn-primary-hover:   var(--a4);
  --btn-danger-bg:       var(--err);
  --btn-danger-hover:    #ff6670;
  --btn-ghost-border:    var(--rim);
  --btn-ghost-color:     var(--dim);
  --btn-ghost-hover-bg:  var(--raised);
  --btn-ghost-hover-color: var(--body);
  --btn-disabled-opacity: 0.45;
  /* ── Focus ring ─────────────────────────────────────────── */
  --focus-ring:          0 0 0 3px var(--aGlow);
  /* ── Shadow tokens ─────────────────────────────────────── */
  --shadow-sm:           0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:           0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:           0 24px 64px rgba(0,0,0,0.5);
  /* ── Input tokens ───────────────────────────────────────── */
  --input-bg:            var(--ink);
  --input-border:        var(--rim);
  --input-border-focus:  var(--a3);
  --input-color:         var(--bright);
  /* ── Table tokens ───────────────────────────────────────── */
  --tbl-head-bg:         var(--surface);
  --tbl-head-color:      var(--ghost);
  --tbl-row-hover:       var(--raised);
  --tbl-border:          var(--edge);
--cols-cel:56px minmax(0,1fr) 90px 110px 90px 64px 80px 110px;--cols-peca:56px minmax(0,1fr) 120px 90px 110px 70px 80px 110px;--cols-atk:90px 1fr 130px 130px 110px 130px 100px;--cols-contas:110px 1fr 130px 110px 100px 70px;--cols-hcaixa:100px 100px 1fr 110px 110px 110px 90px;--cols-cont-pay:1fr 120px 110px 110px 100px 130px;--cols-lanc:36px 36px 1fr 70px 70px 70px 120px;--cols-atk-row:80px 1fr 60px 90px 90px 70px;--ink:#090907;--void:#0f0e0c;--deep:#151310;--panel:#1a1916;--surface:#20201c;--raised:#282620;--edge:#333028;--rim:#3e3b32;--muted:#6a6860;--dim:#747068;--ghost:#969080;--soft:#b0aa98;--body:#d4cec0;--bright:#e8e4d8;--white:#f2eed8;--a0:#3d1800;--a1:#6b2d00;--a2:#b84f00;--a3:#ff8c42;--a4:#ffaa72;--a5:#ffd0b0;--aGlow:var(--aGlow);--aGlow2:var(--aGlow2);--ok:#4ddb8f;--okBg:var(--okBg);--warn:#ffb300;--warnBg:var(--warnBg);--err:#ff4757;--errBg:var(--errBg);--info:#60a0f0;--infoBg:var(--infoBg);--purp:#b388ff;--purpBg:var(--purpBg);--ff-head:system-ui,-apple-system,'Segoe UI',sans-serif;--ff-body:system-ui,-apple-system,'Segoe UI',sans-serif;--ff-mono:'JetBrains Mono','Geist Mono','Courier New',monospace;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;--sidebar-w:64px;--topbar-h:48px;--fs-base:13px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ═══════════════════════════════════════════════════════════════════════
   RELATÓRIOS & FECHAMENTO — tokens de tema
   ───────────────────────────────────────────────────────────────────────
   Tokens usados pelo HTML gerado por gerarFechamento() e pelos relatórios
   renderizados em #relatorio-content / #fechamento-content.
   Default (:root) = tema grafite. Cada tema abaixo sobrescreve o necessário.
═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Default = tom grafite (terroso). Usado em: grafite, dark (herdado),
     midnight (herdado). Light e ERP sobrescrevem mais abaixo. */
  --rel-card-bg:     var(--panel);
  --rel-row-bg:      var(--panel);
  --rel-row-alt:     var(--surface);
  --rel-bdr:         var(--edge);
  --rel-bdr-row:     var(--edge);
  --rel-txt-cell:    var(--body);
  --rel-txt-dim:     var(--ghost);
  --rel-txt-ghost:   var(--muted);
  --rel-txt-strong:  var(--bright);
}
body.mode-dark{
  /* Dark Slate — paleta azulada escura, tons de "noite profissional" */
  --rel-card-bg:#1a2638;
  --rel-row-bg:#141e2e;
  --rel-row-alt:#101827;
  --rel-bdr:#1f2f44;
  --rel-bdr-row:#1a2638;
  --rel-txt-cell:#c4d4e8;
  --rel-txt-dim:#7a9ab8;
  --rel-txt-ghost:#607896;
  --rel-txt-strong:#e2eaf6;
}
body.mode-light{
  /* Paleta clara — fundos brancos, bordas cinza muito claras */
  --rel-card-bg:#fff;
  --rel-row-bg:#fff;
  --rel-row-alt:#f9fafb;
  --rel-bdr:#e5e7eb;
  --rel-bdr-row:#f3f4f6;
  --rel-txt-cell:#374151;
  --rel-txt-dim:#6b7280;
  --rel-txt-ghost:#9ca3af;
  --rel-txt-strong:#111827;
}
body.mode-erp{
  /* ERP — clean profissional com azul institucional, fundos claros */
  --rel-card-bg:#fff;
  --rel-row-bg:#fff;
  --rel-row-alt:#f5f7fa;
  --rel-bdr:#dfe3e8;
  --rel-bdr-row:#eef1f5;
  --rel-txt-cell:#2b3a4a;
  --rel-txt-dim:#5f7186;
  --rel-txt-ghost:#8b9aad;
  --rel-txt-strong:#17212e;
}
/* body.mode-grafite herda do :root (já é a paleta correta terrosa) */
/* body.mode-midnight herda do :root (também escuro; bordas podem ficar mais frias se necessário no futuro) */

input,select,textarea{background:var(--deep);color:var(--bright);border-color:var(--edge);accent-color:var(--a3);}
input::placeholder,textarea::placeholder{color:var(--ghost);}
.search-bar input,.search-bar textarea{background:none !important;color:var(--bright);}
input[type="search"]::-webkit-search-cancel-button{filter:invert(0.5);}
html{font-size:var(--fs-base);}
body{font-family:var(--ff-body);background:var(--void);color:var(--body);display:flex;height:100vh;overflow:hidden;line-height:1.6;}
/* ═══════════════════════════════════════════
   SIDEBAR — Base (Proposta 2: Dark Slate)
   Aplicado em: Grafite, Dark, Ocean
═══════════════════════════════════════════ */
.sb{width:var(--sidebar-w);background:var(--ink);border-right:0.5px solid var(--edge);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;height:100vh;transition:width 0.22s cubic-bezier(.4,0,.2,1);z-index:100;}
.sb:hover{width:224px;}

/* Brand */
.sb-brand{padding:0 0 0 14px;border-bottom:0.5px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:0;cursor:pointer;height:52px;flex-shrink:0;overflow:hidden;transition:padding 0.22s,gap 0.22s;}
.sb:hover .sb-brand{padding:0 14px;gap:11px;}
.sb-brand-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-brand-text{flex:0 0 0;overflow:hidden;width:0;visibility:hidden;transition:width 0.22s cubic-bezier(.4,0,.2,1),visibility 0s linear 0.22s;white-space:nowrap;}
.sb:hover .sb-brand-text{width:160px;flex:1;visibility:visible;transition:width 0.22s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;}
.sb-brand-name{font-size:14px;font-weight:700;color:#FFFFFF;white-space:nowrap;line-height:1.1;}
.sb-brand-tag{font-family:var(--ff-mono);font-size:8px;color:var(--a3);letter-spacing:2px;opacity:0.45;text-transform:uppercase;margin-top:1px;}

/* Scroll + grupos */
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding:6px 0;}.sb-scroll::-webkit-scrollbar{width:0;}
.sb-group{margin-bottom:2px;}
.sb-group-label{font-size:8px;font-weight:700;color:var(--muted);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;opacity:0;height:0;padding:0;margin:0;transition:opacity 0.18s,height 0.22s,padding 0.22s,margin 0.22s;}
.sb:hover .sb-group-label{opacity:1;height:auto;padding:10px 14px 3px;margin-top:2px;}

/* Itens — Proposta 2 */
.sb-item{display:flex;align-items:center;gap:0;padding:0 0 0 13px;border-radius:0;cursor:pointer;transition:background 0.12s,gap 0.22s,padding 0.22s,color 0.12s;font-size:11px;font-weight:500;color:var(--ghost);position:relative;user-select:none;overflow:hidden;height:34px;white-space:nowrap;margin:1px 7px;}
.sb:hover .sb-item{gap:9px;padding:0 9px;border-radius:7px;}
.sb-item:hover{background:rgba(255,255,255,0.05);color:var(--bright);}
.sb-item.active{background:var(--aGlow2);color:var(--a3);border-left:2px solid var(--a3);}
.sb-item.active::before{content:'';position:absolute;left:0;top:22%;height:56%;width:2px;background:var(--a3);border-radius:0 2px 2px 0;}
.sb:hover .sb-item.active::before{border-radius:2px;left:0;}

/* Ícone — micro-box no ativo (Proposta 2) */
.sb-icon-wrap{width:28px;height:28px;min-width:28px;border-radius:7px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.12s,color 0.12s;font-size:15px;color:var(--ghost);}
.sb-item:hover .sb-icon-wrap{color:var(--soft);}
.sb-item.active .sb-icon-wrap{background:var(--aGlow);color:var(--a3);}
.sb-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0;}

/* Badge */
.sb-badge{margin-left:auto;font-family:var(--ff-mono);font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px;background:rgba(255,71,87,0.2);color:var(--err);flex-shrink:0;opacity:0;max-width:0;overflow:hidden;transition:opacity 0.18s,max-width 0.22s;}
.sb:hover .sb-badge{opacity:1;max-width:40px;}
.sb-badge.ok-b{background:rgba(77,219,143,0.15);color:var(--ok);}
.sb-badge.warn-b{background:rgba(255,179,0,0.15);color:var(--warn);}
.sb-badge.dim-b{background:var(--raised);color:var(--ghost);}

/* Footer */
.sb-footer{border-top:0.5px solid rgba(255,255,255,0.06);padding:8px 7px 10px;flex-shrink:0;}
.sb-status-bar{display:flex;align-items:center;gap:5px;padding:2px 4px 6px;opacity:0;transition:opacity 0.18s;overflow:hidden;}
.sb:hover .sb-status-bar{opacity:1;}
.sb-status-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.sb-status-dot.err{background:var(--err);}
.sb-status-dot.warn{background:var(--warn);}
.sb-status-txt{font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-switcher{position:relative;}
.user-pill{display:flex;align-items:center;gap:0;padding:5px 0 5px 10px;border-radius:8px;cursor:pointer;transition:background 0.12s,gap 0.22s,padding 0.22s;border:none;}
.sb:hover .user-pill{gap:8px;padding:5px 8px;}
.user-pill:hover{background:rgba(255,255,255,0.05);}
.user-av{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700;font-family:var(--ff-mono);}
.user-info{flex:1;overflow:hidden;opacity:0;max-width:0;transition:opacity 0.18s,max-width 0.22s;white-space:nowrap;}
.sb:hover .user-info{opacity:1;max-width:140px;}
.user-name{font-size:11px;font-weight:600;color:var(--body);line-height:1.2;}
.user-role{font-size:9px;color:var(--muted);}
.user-chevron{font-size:9px;color:var(--dim);flex-shrink:0;opacity:0;transition:opacity 0.18s;}
.sb:hover .user-chevron{opacity:1;}
.user-dropdown{display:none;position:fixed;background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 -8px 32px rgba(0,0,0,0.4);min-width:220px;max-height:70vh;overflow-y:auto;}
.user-dropdown.open{display:block;animation:fadeUp 0.15s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.dropdown-user{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;transition:background 0.15s;font-size:12px;color:var(--body);border-bottom:0.5px solid var(--edge);}
.dropdown-user:last-child{border-bottom:none;}
.dropdown-user:hover{background:rgba(255,140,66,0.08);}

/* ═══════════════════════════════════════════
   PROPOSTA 1 — Clean Pro
   Aplicado em: Light e ERP
═══════════════════════════════════════════ */

body.mode-light{background:var(--void);color:var(--body);}
body.mode-light .sb,body.mode-erp .sb{background:var(--void);border-right-color:var(--edge);}
body.mode-light .sb-brand,body.mode-erp .sb-brand{background:var(--ink);border-bottom-color:var(--edge);}
body.mode-light .sb-brand-name{color:var(--bright) !important;}
body.mode-erp .sb-brand-name{color:#1a1a1a !important;}
body.mode-light .sb-brand-tag{color:var(--a3);opacity:.6;}
body.mode-erp .sb-brand-tag{color:var(--a3);opacity:.7;}
body.mode-light .sb-group-label,body.mode-erp .sb-group-label{color:var(--rim);}
body.mode-light .sb-item{color:var(--ghost);}
body.mode-erp .sb-item{color:var(--ghost);}
body.mode-light .sb-item:hover{background:var(--raised);color:var(--bright);}
body.mode-erp .sb-item:hover{background:var(--raised);color:var(--bright);}
body.mode-light .sb-item.active{background:var(--a0);color:var(--a2);}
body.mode-erp .sb-item.active{background:var(--a0);color:var(--a4);}
body.mode-light .sb-item.active::before{background:#ff8c42;}
body.mode-erp .sb-item.active::before{background:var(--a3);}
body.mode-light .sb-icon-wrap{color:var(--muted);}
body.mode-erp .sb-icon-wrap{color:var(--ghost);}
body.mode-light .sb-item:hover .sb-icon-wrap{color:var(--ghost);}
body.mode-erp .sb-item:hover .sb-icon-wrap{color:var(--ghost);}
body.mode-light .sb-item.active .sb-icon-wrap{background:rgba(255,140,66,0.12);color:var(--a2);}
body.mode-erp .sb-item.active .sb-icon-wrap{background:rgba(59,111,232,0.12);color:var(--a3);}
body.mode-light .sb-badge{background:rgba(220,38,38,0.1);color:var(--err);}
body.mode-erp .sb-badge{background:rgba(220,38,38,0.1);color:var(--err);}
body.mode-light .sb-badge.warn-b{background:rgba(217,119,6,0.12);color:var(--a2);}
body.mode-erp .sb-badge.warn-b{background:rgba(59,111,232,0.12);color:var(--a4);}
body.mode-light .sb-badge.ok-b{background:rgba(22,163,74,0.12);color:var(--ok);}
body.mode-erp .sb-badge.ok-b{background:rgba(22,163,74,0.12);color:var(--ok);}
body.mode-light .sb-footer{background:var(--ink);border-top-color:var(--edge);}
body.mode-erp .sb-footer{background:var(--ink);border-top-color:var(--edge);}
body.mode-light .sb-status-bar,body.mode-erp .sb-status-bar{opacity:0;}
body.mode-light .sb:hover .sb-status-bar,body.mode-erp .sb:hover .sb-status-bar{opacity:1;}
body.mode-light .sb-status-txt{color:var(--rim);}
body.mode-erp .sb-status-txt{color:var(--ghost);}
body.mode-light .user-pill:hover{background:var(--raised);}
body.mode-erp .user-pill:hover{background:var(--raised);}
body.mode-light .user-name{color:var(--bright);}
body.mode-erp .user-name{color:var(--bright);}
body.mode-light .user-role{color:var(--muted);}
body.mode-erp .user-role{color:var(--ghost);}
body.mode-light .user-av{background:var(--a0);color:var(--a2);}
body.mode-erp .user-av{background:var(--a0);color:var(--a3);}
body.mode-light .user-chevron{color:var(--muted);}
body.mode-erp .user-chevron{color:var(--ghost);}
body.mode-light .sb-group-label{color:var(--rim);}

/* Grafite overrides (Proposta 2 fine-tuning) */
body.mode-grafite .sb-brand{border-bottom-color:rgba(255,140,66,0.08);}
body.mode-grafite .sb-icon-wrap{color:var(--dim);}
body.mode-grafite .sb-item.active .sb-icon-wrap{background:rgba(255,140,66,0.14);color:var(--a3);}
body.mode-grafite .sb-item:hover{color:var(--bright);}
body.mode-grafite .sb-item:hover .sb-icon-wrap{color:var(--soft);}
body.mode-grafite .sb-footer{border-top-color:rgba(255,140,66,0.08);}
body.mode-grafite .sb-item{color:var(--ghost);}

/* Dark overrides */
body.mode-dark .sb-brand{border-bottom-color:rgba(255,255,255,0.06);}
body.mode-dark .sb-item.active{background:rgba(96,160,240,0.08);}
body.mode-dark .sb-item.active::before{background:var(--a3);}
body.mode-dark .sb-item{color:var(--ghost);}
body.mode-dark .sb-item:hover{color:var(--bright);}
body.mode-dark .sb-item.active .sb-icon-wrap{background:rgba(96,160,240,0.15);color:var(--a3);}
body.mode-dark .sb-icon-wrap{color:var(--dim);}

/* Midnight overrides */
body.mode-midnight .sb-brand{border-bottom-color:rgba(255,140,66,0.08);}
body.mode-midnight .sb-icon-wrap{color:var(--dim);}
body.mode-midnight .sb-item{color:var(--ghost);}
body.mode-midnight .sb-item:hover{color:var(--bright);}
body.mode-midnight .sb-item.active .sb-icon-wrap{background:rgba(255,140,66,0.14);color:var(--a3);}
body.mode-midnight .sb-footer{border-top-color:rgba(255,140,66,0.08);}
.dropdown-user .user-av{width:24px;height:24px;font-size:10px;border:none;}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--void);}
.topbar{height:var(--topbar-h);background:var(--panel);border-bottom:0.5px solid var(--edge);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;min-width:0;overflow:hidden;}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;flex:1;}
.topbar-crumb-root{font-size:11px;color:var(--dim);letter-spacing:.5px;font-family:var(--ff-mono);text-transform:uppercase;}
.topbar-crumb-sep{color:var(--rim);font-size:12px;margin:0 4px;}
.search-bar:focus-within{border-color:var(--a2);}
.search-bar input::placeholder{color:var(--dim);}
.search-icon{color:var(--dim);font-size:13px;}
.tb-btn{width:34px;height:34px;background:var(--deep);border:1px solid var(--edge);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all 0.15s;position:relative;flex-shrink:0;}
.tb-btn:hover{border-color:var(--a3);color:var(--a3);}
.notif-pip{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--err);border-radius:50%;border:1.5px solid var(--ink);}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-md);border:none;cursor:pointer;font-family:var(--ff-body);font-size:13px;font-weight:600;transition:all 0.15s;white-space:nowrap;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border:0.5px solid var(--edge);color:var(--dim);}
.btn-sm{padding:3px 9px;font-size:10px;}
.btn-ghost:hover{background:var(--aGlow2);border-color:var(--aGlow);color:var(--body);}
.btn-danger{background:var(--errBg);border:1px solid var(--err);color:var(--err);}
.btn-danger:hover{background:var(--err);color:white;}
.btn-ok{background:var(--okBg);border:1px solid var(--ok);color:var(--ok);}
.btn-warn{background:var(--warnBg);border:1px solid var(--warn);color:var(--warn);}
.content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;;scroll-behavior:smooth;}
.content::-webkit-scrollbar{width:4px;}
.content::-webkit-scrollbar-thumb{background:var(--edge);border-radius:2px;}
.page{display:none;flex-direction:column;gap:16px;animation:fadeIn 0.25s ease;;background:var(--void);}
.page.active{display:flex;}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--edge);position:relative;}

.sec-title{font-family:var(--ff-head);font-size:17px;font-weight:700;color:var(--white);display:flex;align-items:center;gap:10px;letter-spacing:-0.3px;}
.sec-title-icon{font-size:18px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--aGlow2);border:1px solid var(--aGlow);border-radius:var(--r-md);color:var(--a3);flex-shrink:0;}
.sec-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.search-bar{display:flex;align-items:center;gap:8px;background:var(--raised);border:1px solid var(--edge);border-radius:var(--r-md);padding:0 12px;height:36px;transition:border-color 0.15s,box-shadow 0.15s;}
.search-bar:focus-within{border-color:var(--a3);box-shadow:0 0 0 3px rgba(255,140,66,0.07);}
.search-bar input{background:none !important;border:none !important;outline:none;color:var(--bright);font-size:13px;font-family:var(--ff-body);width:100%;height:100%;}
.search-icon{color:var(--dim);font-size:14px;flex-shrink:0;}
.fi-filter{padding:7px 10px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--raised);color:var(--bright);font-size:12px;outline:none;font-family:var(--ff-body);cursor:pointer;transition:border-color 0.15s;height:36px;}
.fi-filter:focus{border-color:var(--a3);}
.tbl thead th{background:var(--tbl-head-bg);}
.tbl-wrap{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);overflow:hidden;overflow-x:auto;}
.os-col{background:var(--deep);border:0.5px solid var(--edge);border-radius:var(--r-xl);overflow:visible;transition:border-color 0.15s,background 0.15s;}
.os-ticket{background:var(--panel);border:1px solid var(--rim);border-radius:var(--r-lg);padding:11px 12px;cursor:pointer;transition:all 0.15s;position:relative;border-left:3px solid var(--ticket-color,var(--rim));}
.os-ticket:hover{border-color:var(--rim);transform:translateY(-1px);}
.os-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.os-kpi{background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:14px 16px 12px;position:relative;overflow:hidden;}
.os-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-accent,var(--a3));border-radius:0;}
.os-kpi-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.os-kpi-val{font-family:var(--ff-mono);font-size:22px;font-weight:700;color:var(--bright);line-height:1;margin-bottom:3px;}
.os-kpi-sub{font-size:11px;color:var(--dim);}
.os-col-head{padding:11px 14px;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;background:var(--panel);}
.os-col-count{font-family:var(--ff-mono);font-size:10px;padding:1px 8px;border-radius:20px;background:var(--raised);color:var(--ghost);}
.os-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:6px;}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-color);font-weight:700;}
.btn-primary:hover{filter:brightness(1.08);}
.rel-card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);padding:22px 20px;cursor:pointer;transition:all 0.18s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;}
.rel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--a2),var(--a3));opacity:0;transition:opacity 0.18s;}
.rel-card:hover{border-color:rgba(255,140,66,0.3);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.25);}
.rel-card:hover::before{opacity:1;}
.rel-card-icon{font-size:30px;margin-bottom:4px;}
.rel-card-title{font-family:var(--ff-head);font-weight:800;font-size:15px;color:var(--white);}
.rel-card-desc{font-size:12px;color:var(--dim);line-height:1.5;}
.rel-card-badge{display:inline-block;margin-top:8px;font-family:var(--ff-mono);font-size:10px;padding:2px 8px;border-radius:20px;background:var(--okBg);color:var(--ok);border:1px solid rgba(77,219,143,0.2);width:fit-content;}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);padding:20px 24px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--edge);}
.card-title{font-size:11px;font-family:var(--ff-mono);font-weight:700;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.kpi{background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:16px 16px 14px;position:relative;overflow:hidden;cursor:default;transition:border-color 0.2s,transform 0.15s;}
.kpi:hover{transform:translateY(-2px);border-color:rgba(255,140,66,0.22);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
body.mode-light .sec-title-icon{background:rgba(0,136,194,0.08);border-color:rgba(0,136,194,0.15);color:var(--a2);}

body.mode-light .fi-filter{background:var(--surface);border-color:var(--rim);color:var(--bright);}
body.mode-light .os-col-head{background:var(--surface);}
body.mode-light .rel-card{background:var(--panel);border-color:var(--edge);}
body.mode-light .rel-card:hover{border-color:var(--a2);}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-accent,var(--a3));border-radius:var(--r-xl) var(--r-xl) 0 0;}
.kpi-delta-line{font-family:var(--ff-mono);font-size:10px;color:var(--dim);margin-top:4px;display:flex;align-items:center;gap:4px;}
.kpi-delta-line.up{color:var(--ok);}
.kpi-delta-line.dn{color:var(--err);}
.kpi-label{font-family:var(--ff-mono);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ghost);margin-bottom:10px;}
.kpi-val{font-family:var(--ff-mono);font-size:2rem;font-weight:700;color:var(--bright);line-height:1;margin-bottom:6px;}
.kpi-meta{display:flex;align-items:center;gap:6px;font-size:11px;}
.kpi-delta{font-family:var(--ff-mono);font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;}
.kpi-delta.up{background:rgba(77,219,143,0.1);color:var(--ok);}
.kpi-delta.dn{background:rgba(255,71,87,0.1);color:var(--err);}
.kpi-sub{font-size:13px;color:var(--dim);}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.g24{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
.g42{display:grid;grid-template-columns:1fr 2fr;gap:14px;}
.col2{grid-column:span 2;}.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}.g2-10{display:grid;grid-template-columns:1fr 1fr;gap:10px;}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}.g3-14{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}.g4a{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px;align-items:end;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;padding:10px 12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--edge);}
.tbl td{padding:10px 12px;font-size:13px;color:var(--soft);border-bottom:1px solid var(--edge);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background 0.1s;cursor:pointer;}
.tbl tbody tr:hover td{background:rgba(255,255,255,0.04);color:var(--bright);}
.tbl-wrap{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);overflow:hidden;}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:3px;font-family:var(--ff-mono);font-size:10px;font-weight:600;letter-spacing:0;text-transform:lowercase;border-left:2px solid var(--ghost);position:relative;line-height:1.4;}
.badge::before{content:"[ ";opacity:0.6;}
.badge::after{content:" ]";opacity:0.6;}
.b-ok{background:rgba(77,219,143,0.10);color:var(--ok);border-left-color:var(--ok);}
.b-warn{background:rgba(255,179,0,0.10);color:var(--warn);border-left-color:var(--warn);}
.b-err{background:rgba(255,71,87,0.10);color:var(--err);border-left-color:var(--err);}
.b-info{background:rgba(96,160,240,0.10);color:var(--info);border-left-color:var(--info);}
.b-purp{background:rgba(179,136,255,0.10);color:var(--purp);border-left-color:var(--purp);}
.b-teal{background:rgba(255,140,66,0.10);color:var(--a3);border-left-color:var(--a3);}
.mono{font-family:var(--ff-mono);}
.c-ok{color:var(--ok);}
.c-err{color:var(--err);}
.c-warn{color:var(--warn);}
.c-teal{color:var(--a3);}
.c-dim{color:var(--dim);}
.c-ghost{color:var(--ghost);}
.c-white{color:var(--white);}
.tabs{display:flex;gap:2px;background:var(--deep);border:1px solid var(--edge);border-radius:var(--r-md);padding:3px;}
.tab{padding:6px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;color:var(--ghost);white-space:nowrap;}
.tab.active{background:rgba(255,140,66,0.1);color:var(--a3);border:0.5px solid rgba(255,140,66,0.3);}
.tab:not(.active):hover{color:var(--soft);}
.prog{height:4px;background:var(--aGlow2);border-radius:2px;overflow:hidden;margin-top:6px;}
.prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--a2),var(--a3));transition:width 1s cubic-bezier(.4,0,.2,1);}
.fi:focus{border:1.5px solid var(--a3);;box-shadow:var(--focus-ring);}
.fi::placeholder{color:var(--ghost);}
select.fi option{background:var(--deep);}
textarea .fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-family:var(--ff-body);font-size:12px;font-weight:600;color:var(--body);letter-spacing:0;text-transform:none;}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.fgrid .full{grid-column:span 2;}
.tog{width:36px;height:20px;background:var(--raised);border:1px solid var(--rim);border-radius:10px;cursor:pointer;position:relative;flex-shrink:0;transition:all 0.2s;}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--dim);transition:all 0.2s;}
.tog.on{background:rgba(255,140,66,0.18);border-color:var(--a3);}
.tog.on::after{left:18px;background:var(--a3);}
.rec-fmt-tab{color:var(--dim);background:transparent;cursor:pointer;}
.rec-fmt-tab:hover{color:var(--soft);background:var(--surface);}
.rec-fmt-tab.active{color:var(--a3);background:var(--panel);border:1px solid rgba(255,140,66,0.2);}
.theme-mode-btn{color:var(--dim);background:var(--raised);cursor:pointer;}
.theme-mode-btn:hover{color:var(--soft);background:var(--surface);}
.theme-mode-btn.active{color:var(--a3);background:var(--a0);border-color:var(--a3) !important;}
.rel-card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);padding:22px 20px;cursor:pointer;transition:all 0.18s;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;}
.rel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--a2),var(--a3));opacity:0;transition:opacity 0.18s;}
.rel-card:hover{border-color:var(--a3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.rel-card:hover::before{opacity:1;}
.rel-card-icon{font-size:28px;margin-bottom:6px;}
.rel-card-title{font-family:var(--ff-body);font-weight:800;font-size:16px;color:var(--white);}
.rel-card-desc{font-size:13px;color:var(--dim);line-height:1.5;margin-top:2px;}
.rel-card-badge{display:inline-block;margin-top:10px;font-family:var(--ff-mono);font-size:11px;padding:2px 8px;border-radius:20px;background:var(--okBg);color:var(--ok);border:1px solid rgba(77,219,143,0.2);width:fit-content;}
.dash-card{cursor:default;transition:box-shadow 0.15s,transform 0.15s,opacity 0.15s;position:relative;}
.dash-card.dragging{opacity:0.4;transform:scale(0.97);}
.dash-card.drag-over{box-shadow:0 0 0 2px var(--a3),0 8px 24px var(--aGlow);}
.dash-card .drag-handle{cursor:grab;color:var(--muted);font-size:13px;padding:2px 6px;border-radius:4px;transition:color 0.15s,background 0.15s;user-select:none;line-height:1;}
.dash-card .drag-handle:hover{color:var(--a3);background:var(--aGlow2);}
.dash-card .drag-handle:active{cursor:grabbing;}
.dash-card.wide{grid-column:span 2;}
.dash-card.full{grid-column:span 3;}
.pdv-mode-btn{color:var(--dim);background:transparent;cursor:pointer;}
.pdv-mode-btn:hover{color:var(--soft);background:var(--surface);}
.pdv-mode-btn.active{color:var(--a3);background:var(--panel);border:1px solid rgba(255,140,66,0.2);}
.dash-period-btn{color:var(--dim);background:transparent;cursor:pointer;padding:4px 10px;border-radius:var(--r-md);font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;border:1px solid transparent;transition:all 0.15s;}
.dash-period-btn:hover{color:var(--soft);background:var(--surface);}
.dash-period-btn.active{color:var(--a3);background:var(--panel);border:1px solid rgba(255,140,66,0.2);}
.fluxo-period-btn{color:var(--dim);background:transparent;cursor:pointer;}
.fluxo-period-btn:hover{color:var(--soft);background:var(--surface);}
.fluxo-period-btn.active{color:var(--a3);background:var(--a0);border:1px solid rgba(255,140,66,0.2);}
.theme-card{padding:10px;border-radius:12px;border:2px solid var(--edge);cursor:pointer;transition:all 0.15s;background:var(--raised);}
.theme-card:hover{border-color:var(--rim);transform:translateY(-1px);}
.theme-card.sel{border-color:var(--a3);background:var(--surface);box-shadow:0 0 0 3px rgba(255,140,66,0.12);}
.theme-card-swatch{height:32px;border-radius:8px;margin-bottom:8px;}
.theme-card-name{font-size:12px;font-weight:700;color:var(--bright);}
.theme-card-sub{font-size:10px;color:var(--dim);margin-top:1px;}
.pdv-wrap{display:flex;flex:1;min-height:0;height:calc(100vh - var(--topbar-h) - 40px);}
.pdv-left{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden;flex:1;min-width:0;}
.pdv-right{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden;}
.pdv-toolbar{padding:10px 14px;border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.cat-tabs{display:flex;gap:4px;}
.cat-tab{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--edge);color:var(--dim);transition:all 0.15s;background:var(--raised);}
.cat-tab.active,.cat-tab:hover{border-color:var(--a3);color:var(--a3);background:var(--aGlow2);}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:12px;overflow-y:auto;flex:1;align-content:start;}
.prod-grid::-webkit-scrollbar{width:3px;}
.prod-grid::-webkit-scrollbar-thumb{background:var(--edge);border-radius:2px;}
.prod-card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;cursor:pointer;transition:all 0.15s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;user-select:none;min-height:160px;}
.prod-card:hover{border-color:rgba(255,140,66,0.35);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.25);}
.prod-card:active{transform:scale(0.97);}
.prod-card.in-cart{border-color:var(--ok);box-shadow:0 0 0 2px rgba(77,219,143,0.15);}
.prod-card.in-cart .prod-card-img-wrap::after{content:'✓';position:absolute;top:6px;right:6px;width:18px;height:18px;background:var(--ok);color:#000;font-size:10px;font-weight:900;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;}
.prod-card.sem-estoque{opacity:0.4;cursor:not-allowed;}
.prod-card-img-wrap{position:relative;width:100%;height:80px;min-height:80px;max-height:80px;background:var(--raised);overflow:hidden;border-radius:13px 13px 0 0;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.prod-img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;display:block;}
.prod-em-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.prod-em{font-size:34px;line-height:1;}
.prod-card-img-wrap .prod-sem-est-overlay{position:absolute;inset:0;background:rgba(6,9,15,0.6);display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--ff-mono);font-weight:700;color:var(--err);letter-spacing:0.5px;}
.prod-card-info{padding:7px 9px 9px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--edge);flex:1;}
.prod-nm{font-size:11px;font-weight:700;color:var(--bright);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.prod-pr{font-family:var(--ff-mono);font-size:12px;font-weight:700;color:var(--a3);line-height:1;margin-top:2px;}
.prod-pr-old{font-family:var(--ff-mono);font-size:10px;color:var(--dim);text-decoration:line-through;}
.prod-pr-badge{display:inline-block;font-size:8px;font-family:var(--ff-mono);background:var(--okBg);color:var(--ok);border:1px solid rgba(77,219,143,0.25);padding:1px 4px;border-radius:4px;margin-left:3px;vertical-align:middle;}
.prod-st{font-size:10px;color:var(--dim);font-family:var(--ff-mono);margin-top:1px;}
.cart-head{padding:12px 14px;border-bottom:1px solid var(--edge);font-size:14px;font-weight:700;color:var(--body);display:flex;align-items:center;justify-content:space-between;}
.cart-client{padding:8px 10px;border-bottom:1px solid var(--edge);}
.cart-items{flex:1;overflow-y:auto;padding:8px;}
.cart-items::-webkit-scrollbar{width:0;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--dim);gap:8px;}
.cart-empty-icon{font-size:36px;opacity:0.5;}
.cart-empty-text{font-size:13px;text-align:center;line-height:1.5;}
.ci{display:flex;flex-direction:column;padding:8px;border-radius:var(--r-md);border-bottom:1px solid var(--edge);transition:background 0.1s;gap:4px;}
.ci:hover{background:var(--raised);}
.ci-row1{display:flex;align-items:center;gap:8px;}
.ci-name{flex:1;font-size:13px;font-weight:600;color:var(--body);line-height:1.2;}
.ci-qty{display:flex;align-items:center;gap:4px;font-family:var(--ff-mono);font-size:13px;color:var(--bright);}
.qty-b{width:20px;height:20px;border:1px solid var(--edge);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;background:var(--raised);color:var(--ghost);transition:all 0.1s;line-height:1;}
.qty-b:hover{border-color:var(--a3);color:var(--a3);}
.ci-price{font-family:var(--ff-mono);font-size:13px;color:var(--a5);min-width:72px;text-align:right;}
.ci-row2{display:flex;align-items:center;gap:6px;padding-left:2px;}
.ci-obs-input{flex:1;background:transparent;border:none;border-bottom:1px dashed var(--edge);color:var(--ghost);font-size:12px;font-family:var(--ff-body);outline:none;padding:1px 2px;}
.ci-obs-input::placeholder{color:var(--muted);}
.ci-obs-input:focus{border-color:var(--a3);color:var(--bright);}
.ci-desc-badge{font-family:var(--ff-mono);font-size:11px;color:var(--err);background:var(--errBg);border-radius:4px;padding:1px 5px;white-space:nowrap;cursor:pointer;}
.ci-desc-input{width:60px;background:var(--deep);border:1px solid var(--edge);border-radius:4px;color:var(--bright);font-size:12px;font-family:var(--ff-mono);outline:none;padding:2px 4px;text-align:right;}
.ci-desc-input:focus{border-color:var(--err);}
.cart-foot{padding:14px 14px 12px;border-top:1px solid var(--edge);background:var(--surface);flex-shrink:0;display:flex;flex-direction:column;max-height:60vh;}
.cart-line{display:flex;justify-content:space-between;font-size:12px;color:var(--ghost);margin-bottom:5px;align-items:center;}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin:10px 0 12px;padding:10px 12px;background:var(--deep);border-radius:var(--r-md);border:1px solid var(--edge);}
.cart-total-label{font-size:13px;font-weight:700;color:var(--ghost);letter-spacing:0.5px;text-transform:uppercase;font-family:var(--ff-mono);}
.cart-total-val{font-family:var(--ff-mono);font-size:1.8rem;font-weight:700;color:var(--a3);letter-spacing:-1px;}
.pay-section-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px;}
.pay-row{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.pay-btn{flex:1;min-width:60px;padding:10px 6px 8px;border-radius:var(--r-md);border:1.5px solid var(--edge);background:var(--raised);color:var(--ghost);font-size:11px;font-weight:700;text-align:center;cursor:pointer;transition:all 0.18s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1;position:relative;overflow:hidden;}
.pay-btn .pay-icon{font-size:18px;line-height:1;}
.pay-btn::after{content:'';position:absolute;inset:0;background:var(--a3);opacity:0;transition:opacity 0.18s;}
.pay-btn:hover{border-color:rgba(255,140,66,0.4);color:var(--body);background:var(--surface);transform:translateY(-1px);}
.pay-btn.sel{border-color:var(--a3);color:var(--a4);background:var(--aGlow);box-shadow:0 0 0 3px rgba(255,140,66,0.12);transform:translateY(-2px);}
.pay-btn.sel::before{content:'✓';position:absolute;top:4px;right:6px;font-size:9px;color:var(--a3);font-weight:900;}
.btn-finalizar{width:100%;margin-top:10px;padding:14px;font-size:15px;font-weight:800;border-radius:var(--r-lg);border:none;cursor:pointer;background:var(--a3);color:#000;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.15s;font-family:var(--ff-body);letter-spacing:0.3px;}

.btn-finalizar:hover{filter:brightness(1.08);}

.btn-finalizar:active{transform:translateY(0);}
.btn-finalizar.has-pay{background:var(--a2);}
.btn-finalizar:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none;}
.troco-box{margin-top:10px;background:var(--deep);border:1.5px solid var(--a3);border-radius:var(--r-lg);overflow:hidden;animation:fadeIn 0.2s ease;}
.troco-box-head{padding:8px 14px;border-bottom:0.5px solid var(--edge);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ghost);font-family:var(--ff-mono);letter-spacing:0.5px;}
.troco-box-input{width:100%;padding:12px 14px;background:transparent;border:none;color:var(--bright);font-family:var(--ff-mono);font-size:22px;font-weight:700;outline:none;text-align:right;letter-spacing:-0.5px;}
.troco-box-result{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface);border-top:0.5px solid var(--edge);}
.troco-label{font-size:11px;color:var(--dim);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:1px;}
.troco-val{font-family:var(--ff-mono);font-size:22px;font-weight:700;}
.cart-head{padding:12px 14px;border-bottom:1px solid var(--edge);font-size:14px;font-weight:700;color:var(--body);display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--deep);}
.cart-head-title{flex:1;display:flex;align-items:center;gap:8px;}
.cart-client-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;background:var(--aGlow2);border:1px solid rgba(255,140,66,0.2);border-radius:20px;font-size:11px;color:var(--a4);font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cart-desc-input{width:96px;padding:5px 9px;font-size:13px;font-family:var(--ff-mono);background:var(--raised);border:1px solid var(--edge);border-radius:8px;color:var(--bright);outline:none;text-align:right;transition:border-color 0.15s;}
.cart-desc-input:focus{border-color:var(--a3);box-shadow:0 0 0 2px rgba(255,140,66,0.08);}
.os-kanban{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:10px;align-items:start;overflow-x:auto;}
.os-col{background:var(--deep);border:0.5px solid var(--edge);border-radius:var(--r-xl);overflow:visible;}
.os-col-head{padding:12px 14px;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--bright);}
.os-col-count{font-family:var(--ff-mono);font-size:10px;padding:1px 8px;border-radius:20px;background:var(--raised);color:var(--ghost);}
.os-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px;}

.os-ticket:hover{border-color:var(--ghost);background:var(--raised);}
.os-ticket[data-status="aguardando"]{border-left-color:var(--warn);}
.os-ticket[data-status="servico"]{border-left-color:var(--info);}
.os-ticket[data-status="pronto"]{border-left-color:var(--ok);}
.os-ticket[data-status="entregue"]{border-left-color:var(--muted);}
.os-ticket[data-status="cancelada"]{border-left-color:var(--err);}
.os-ticket::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--ticket-color,var(--edge));}
.os-num{font-family:var(--ff-mono);font-size:9px;color:var(--a3);margin-bottom:5px;}
.os-client-nm{font-size:12px;font-weight:700;color:var(--bright);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.os-device-nm{font-size:10px;color:var(--ghost);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.os-ticket-foot{display:flex;align-items:center;justify-content:space-between;}
.os-tech{font-size:9px;color:var(--dim);font-family:var(--ff-mono);}
.os-price{font-family:var(--ff-mono);font-size:11px;color:var(--a5);}
.os-advance-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--a1),var(--a0));border:1px solid var(--a2);font-size:10px;font-weight:700;font-family:var(--ff-body);color:var(--a4);cursor:pointer;transition:all 0.15s;flex-shrink:0;white-space:nowrap;letter-spacing:0.2px;box-shadow:0 1px 6px var(--aGlow);}
.os-advance-btn:hover{background:linear-gradient(135deg,var(--a2),var(--a1));border-color:var(--a3);color:var(--white);transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,140,66,0.3);}
.os-advance-btn.final{background:linear-gradient(135deg,rgba(77,219,143,0.18),rgba(77,219,143,0.08));border-color:rgba(77,219,143,0.4);color:var(--ok);}
.os-advance-btn.final:hover{background:linear-gradient(135deg,rgba(77,219,143,0.3),rgba(77,219,143,0.15));border-color:var(--ok);color:var(--ok);box-shadow:0 4px 14px rgba(77,219,143,0.25);}
.os-advance-done{background:var(--okBg) !important;border-color:rgba(77,219,143,0.35) !important;color:var(--ok) !important;cursor:default !important;}
.os-del-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:rgba(255,71,87,0.08);border:1px solid rgba(255,71,87,0.25);font-size:12px;cursor:pointer;transition:all 0.15s;flex-shrink:0;color:var(--err);opacity:0.75;}
.os-del-btn:hover{background:var(--err);border-color:var(--err);color:#fff;opacity:1;transform:translateY(-1px);box-shadow:0 3px 10px rgba(255,71,87,0.35);}
.os-step-wrap{display:flex;margin-bottom:20px;border-radius:10px;overflow:hidden;border:1px solid var(--edge);}
.os-step{flex:1;padding:9px 8px;text-align:center;font-size:11px;font-weight:700;cursor:pointer;border-right:1px solid var(--edge);transition:all 0.2s;background:var(--raised);color:var(--dim);user-select:none;}
.os-step:last-child{border-right:none;}
.os-step.active{background:var(--a0);color:var(--a3);}
.os-step:hover:not(.active){background:var(--surface);color:var(--soft);}
body.mode-light .os-step{background:var(--surface);color:var(--ghost);}
body.mode-light .os-step.active{background:var(--a0);color:var(--a3);}
.os-prog-step{flex:1;padding:9px 6px;text-align:center;font-size:10px;font-weight:700;cursor:pointer;border-right:1px solid var(--edge);transition:all 0.2s;background:var(--raised);color:var(--dim);user-select:none;}.os-lista-desktop{display:block;}.os-lista-mobile{display:none;}.os-card-mob{background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:14px 16px;cursor:pointer;transition:background 0.15s;active:background:var(--raised);}.os-card-mob:active{background:var(--raised);}.os-card-mob+.os-card-mob{margin-top:8px;}.os-card-mob-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}.os-card-mob-num{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--a3);}.os-card-mob-age{font-family:var(--ff-mono);font-size:10px;}.os-card-mob-cli{font-size:15px;font-weight:700;color:var(--white);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.os-card-mob-dev{font-size:12px;color:var(--ghost);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.os-card-mob-mid{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap;}.os-card-mob-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:0.5px solid var(--edge);}.os-card-mob-val{font-family:var(--ff-mono);font-size:14px;font-weight:700;color:var(--ok);}.os-card-mob-tech{font-size:11px;color:var(--dim);}.os-card-mob-btns{display:flex;gap:6px;}.os-card-mob-adv{height:34px;padding:0 12px;font-size:11px;font-weight:700;border-radius:var(--r-md);border:0.5px solid var(--a2);background:var(--a0);color:var(--a3);cursor:pointer;white-space:nowrap;touch-action:manipulation;}.os-card-mob-adv:active{background:var(--a1);}.os-card-mob-adv.final{border-color:rgba(77,219,143,0.3);background:var(--okBg);color:var(--ok);}.os-card-mob-wa{width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;flex-shrink:0;touch-action:manipulation;}.os-card-mob-status{display:flex;align-items:center;gap:6px;}.os-card-mob-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}@media(max-width:768px){.os-lista-desktop{display:none;}.os-lista-mobile{display:flex;flex-direction:column;}}.m-topbar-mob{display:none;height:52px;background:var(--ink);border-bottom:1px solid var(--edge);align-items:center;padding:0 16px;gap:12px;flex-shrink:0;z-index:100;}.m-topbar-mob-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}.m-topbar-mob-logo{font-family:var(--ff-mono);font-size:11px;font-weight:800;color:var(--a3);letter-spacing:1.5px;flex-shrink:0;}.m-topbar-mob-page{font-size:16px;font-weight:800;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.m-topbar-mob-right{display:flex;gap:8px;flex-shrink:0;}.m-bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--ink);border-top:1px solid var(--edge);z-index:200;padding:0 4px calc(env(safe-area-inset-bottom,0px) + 4px);align-items:center;}.m-bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border-radius:12px;cursor:pointer;position:relative;touch-action:manipulation;}.m-bn-item.act{background:var(--aGlow2);}.m-bn-icon{font-size:20px;line-height:1;}.m-bn-label{font-size:9px;font-weight:700;color:var(--ghost);font-family:var(--ff-mono);letter-spacing:.3px;}.m-bn-item.act .m-bn-label{color:var(--a3);}.m-bn-badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;background:var(--warn);border-radius:20px;font-size:8px;font-weight:800;color:#000;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--ff-mono);}.m-mais-group-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;padding:12px 16px 6px;}.m-mais-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;touch-action:manipulation;}.m-mais-item:active{background:var(--raised);}.m-mais-icon{font-size:20px;width:36px;height:36px;background:var(--raised);border:1px solid var(--edge);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.m-mais-label{font-size:14px;font-weight:700;color:var(--bright);}.m-mais-sub{font-size:11px;color:var(--dim);margin-top:1px;}.m-mais-chev{margin-left:auto;color:var(--muted);font-size:18px;}.m-mob-notif,.m-mob-nova-os{touch-action:manipulation;}
.os-prog-step:last-child{border-right:none;}
.os-prog-step:hover{background:var(--surface);color:var(--soft);}
.os-prog-step.prog-current{background:var(--a0);color:var(--a3);}
.os-prog-step.prog-done{background:var(--deep);color:var(--ghost);opacity:0.6;}
.btn-group{display:flex;gap:3px;background:var(--deep);border:1px solid var(--edge);border-radius:var(--r-md);padding:3px;flex-shrink:0;}
.btn-group-item{padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s;color:var(--dim);background:transparent;white-space:nowrap;}
.btn-group-item:hover{color:var(--body);background:var(--surface);}
.btn-group-item.active{background:var(--panel);color:var(--a3);border:0.5px solid rgba(255,140,66,0.25);}
.price-block{background:var(--raised);border:1px solid var(--edge);border-radius:var(--r-lg);padding:12px 14px;}
.price-block-label{font-family:var(--ff-mono);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.price-block-label.varejo{color:var(--a3);}
.price-block-label.atacado{color:var(--ok);}
.margem-display{padding:8px 12px;background:var(--deep);border:1px solid var(--edge);border-radius:var(--r-md);font-family:var(--ff-mono);font-size:12px;color:var(--body);min-height:36px;display:flex;align-items:center;}
.info-block{background:var(--raised);border:1px solid var(--edge);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:12px;}
.info-block-title{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.caixa-banner{border-radius:var(--r-lg);padding:14px 20px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.caixa-banner.aberto{background:var(--okBg);border:1px solid rgba(77,219,143,0.3);}
.caixa-banner.fechado{background:var(--warnBg);border:1px solid rgba(255,179,0,0.35);}
.filtros-panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:12px;animation:fadeIn 0.18s ease;}
.input-date{padding:6px 10px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--panel);color:var(--bright);font-size:12px;font-family:var(--ff-body);outline:none;transition:border-color 0.15s;height:34px;}
.input-date:focus{border-color:var(--a3);}
.tbl-hdr{font-size:11px;font-family:var(--ff-mono);color:var(--soft);text-transform:uppercase;letter-spacing:0.6px;font-weight:700;cursor:default;}
.tbl-hdr.sort-hdr{cursor:pointer;user-select:none;}
.tbl-hdr.sort-hdr:hover{color:var(--a4);}
body.mode-light .price-block{background:var(--surface);border-color:var(--rim);}
body.mode-light .margem-display{background:var(--raised);border-color:var(--edge);color:var(--bright);}
body.mode-light .info-block{background:var(--surface);border-color:var(--rim);}
body.mode-light .caixa-banner.aberto{background:var(--okBg);border-color:rgba(77,219,143,0.3);}
body.mode-light .caixa-banner.fechado{background:var(--warnBg);border-color:rgba(255,179,0,0.35);}
body.mode-light .filtros-panel{background:var(--panel);border-color:var(--edge);}
body.mode-light .input-date{background:var(--panel);border-color:var(--rim);color:var(--bright);}
body.mode-light .btn-group{background:var(--surface);border-color:var(--rim);}
body.mode-light .btn-group-item{color:var(--dim);cursor:pointer;}
body.mode-light .btn-group-item.active{background:var(--raised);color:var(--a2);}
body.mode-light .tbl-hdr{color:var(--body);}
body.mode-midnight .price-block{background:var(--deep);border-color:rgba(255,140,66,0.08);}
body.mode-midnight .info-block{background:var(--deep);border-color:rgba(255,140,66,0.08);}
body.mode-midnight .btn-group{background:var(--deep);border-color:rgba(255,140,66,0.08);}
.stock-row{display:grid;grid-template-columns:44px 1fr auto auto auto auto;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(31,47,68,0.4);transition:background 0.1s;cursor:pointer;}
.stock-row:hover{background:var(--surface);}
.stock-row:last-child{border-bottom:none;}
.stock-thumb{width:40px;height:40px;background:var(--raised);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--edge);}
.stock-name{font-size:12px;font-weight:600;color:var(--body);line-height:1.2;}
.stock-sku{font-family:var(--ff-mono);font-size:9px;color:var(--dim);}
.stock-cost{text-align:right;}
.stock-cost-val{font-family:var(--ff-mono);font-size:11px;color:var(--ghost);}
.stock-sell-val{font-family:var(--ff-mono);font-size:12px;color:var(--a5);}
.stock-qty-val{font-family:var(--ff-mono);font-size:18px;font-weight:700;text-align:center;min-width:40px;}
.fin-entry{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(31,47,68,0.4);cursor:pointer;}
.fin-entry:last-child{border-bottom:none;}
.fin-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fin-desc{flex:1;}
.fin-desc-title{font-size:12px;font-weight:600;color:var(--body);}
.fin-desc-meta{font-size:10px;color:var(--dim);}
.fin-amount{font-family:var(--ff-mono);font-size:13px;font-weight:700;}
.bars{display:flex;align-items:flex-end;gap:5px;height:72px;}
.bar{flex:1;border-radius:3px 3px 0 0;transition:all 0.3s ease;cursor:pointer;position:relative;min-width:0;}
.bar:hover{filter:brightness(1.3);}
.bar-label{font-family:var(--ff-mono);font-size:8px;color:var(--dim);text-align:center;margin-top:4px;}
.overlay{display:none;position:fixed;inset:0;background:rgba(6,9,15,0.88);backdrop-filter:blur(6px);z-index:9000;align-items:center;justify-content:center;padding:20px;cursor:default;}
.overlay.open{display:flex;animation:fadeIn 0.2s ease;}
.modal{background:var(--panel);border:1px solid var(--rim);border-radius:var(--r-2xl);padding:22px 20px 20px;width:560px;max-width:calc(100vw - 24px);max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,0.6),0 0 0 0.5px rgba(255,140,66,0.08);animation:modalIn 0.22s cubic-bezier(.4,0,.2,1);}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal::-webkit-scrollbar{width:3px;}
.modal::-webkit-scrollbar-thumb{background:var(--edge);border-radius:2px;}

.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--edge);}
.modal-title{font-family:var(--ff-head);font-weight:700;font-size:1.2rem;color:var(--white);display:flex;align-items:center;gap:8px;}
.modal-x{width:30px;height:30px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--raised);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ghost);font-size:14px;transition:all 0.15s;flex-shrink:0;padding:0;font-family:inherit;line-height:1;}
.modal-x:hover{border-color:var(--err);color:var(--err);background:var(--errBg);}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--edge);}
.fi{width:100%;padding:9px 12px;background:var(--input-bg);border:1px solid var(--rim);border-radius:var(--r-md);color:var(--input-color);font-size:13px;font-family:var(--ff-body);outline:none;transition:border-color 0.15s,box-shadow 0.15s;}
.fi:focus{border:1.5px solid var(--a3);box-shadow:0 0 0 3px rgba(255,140,66,0.08);}
.fi::placeholder{color:var(--ghost);}
select.fi option{background:var(--deep);}
.fg label{font-size:12px;font-weight:600;color:var(--soft);letter-spacing:0.3px;margin-bottom:6px;display:block;}
.modal-section{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px;}
.modal-section-title{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--a3);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--edge);}
body.mode-light .modal{background:var(--panel);border-color:var(--edge);box-shadow:0 24px 64px rgba(0,0,0,0.18);}
body.mode-light .fi{background:var(--surface);border-color:var(--rim);color:var(--bright);}
body.mode-light .fi:focus{border:1.5px solid var(--a2);box-shadow:0 0 0 3px rgba(234,88,12,0.08);}
body.mode-midnight .modal{background:var(--panel);border-color:rgba(255,140,66,0.12);}
.modal-sm{width:440px;}
.modal-md{width:580px;}
.modal-lg{width:740px;max-height:92vh;}
.modal-xl{width:820px;max-height:92vh;}
.user-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:20px;}
.notif-panel{display:none;position:absolute;top:calc(var(--topbar-h)+6px);right:60px;width:340px;background:var(--panel);border:1px solid var(--rim);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);z-index:8000;overflow:hidden;}
.notif-panel.open{display:block;animation:fadeIn 0.15s ease;}
.notif-head{padding:13px 16px 11px;border-bottom:1px solid var(--edge);font-size:13px;font-weight:700;color:var(--bright);display:flex;align-items:center;justify-content:space-between;}
.notif-clear-btn{font-size:10px;color:var(--ghost);cursor:pointer;padding:2px 8px;border-radius:20px;border:1px solid var(--edge);background:var(--raised);transition:all 0.15s;}
.notif-clear-btn:hover{color:var(--err);border-color:var(--err);}
.notif-list{max-height:380px;overflow-y:auto;}
.notif-item{padding:11px 14px;border-bottom:1px solid var(--edge);cursor:pointer;transition:background 0.1s;display:flex;gap:10px;align-items:flex-start;}
.notif-item:hover{background:var(--raised);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{border-left:3px solid var(--a3);}
.notif-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.notif-content{flex:1;min-width:0;}
.notif-title{font-size:12px;font-weight:600;color:var(--body);line-height:1.35;}
.notif-meta{font-size:10px;color:var(--dim);margin-top:3px;}
.notif-dot-new{width:7px;height:7px;background:var(--a3);border-radius:50%;flex-shrink:0;margin-top:5px;}
.notif-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:12px;}
.notif-footer{padding:10px 16px;border-top:1px solid var(--edge);text-align:center;}
.notif-footer span{font-size:11px;color:var(--a3);cursor:pointer;}
.notif-footer span:hover{text-decoration:underline;}
.notif-detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9500;align-items:flex-start;justify-content:flex-end;padding:calc(var(--topbar-h)+8px) 14px 0 0;cursor:default;}
.notif-detail-overlay.open{display:flex;animation:fadeIn 0.15s ease;}
.notif-detail-box{width:360px;background:var(--panel);border:1px solid var(--rim);border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;animation:slideDown 0.18s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.notif-detail-head{padding:14px 16px;border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:10px;}
.notif-detail-icon{font-size:24px;}
.notif-detail-title{font-size:14px;font-weight:700;color:var(--white);flex:1;line-height:1.3;}
.notif-detail-close{width:26px;height:26px;border-radius:50%;background:var(--raised);border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ghost);font-size:14px;flex-shrink:0;transition:all 0.15s;}
.notif-detail-close:hover{background:var(--errBg);color:var(--err);border-color:var(--err);}
.notif-detail-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.notif-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--raised);border-radius:var(--r-md);border:1px solid var(--edge);}
.notif-detail-label{font-size:11px;color:var(--ghost);}
.notif-detail-val{font-size:13px;font-weight:700;color:var(--bright);font-family:var(--ff-mono);}
.notif-detail-desc{font-size:12px;color:var(--body);line-height:1.5;padding:10px 12px;background:var(--raised);border-radius:var(--r-md);border:1px solid var(--edge);}
.notif-detail-foot{display:flex;gap:8px;padding:0 16px 14px;}
.notif-group-sep{padding:7px 14px 4px;font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;border-top:0.5px solid var(--edge);margin-top:2px;}
.notif-group-sep:first-child{border-top:none;margin-top:0;}
.notif-group-sep .ngbadge{font-size:9px;padding:1px 6px;border-radius:20px;font-weight:700;}
.ngbadge-err{background:var(--errBg);color:var(--err);border:1px solid rgba(255,71,87,0.25);}
.ngbadge-warn{background:var(--warnBg);color:var(--warn);border:1px solid rgba(255,179,0,0.25);}
.ngbadge-ok{background:var(--okBg);color:var(--ok);border:1px solid rgba(77,219,143,0.25);}
.ngbadge-info{background:var(--infoBg);color:var(--info);border:1px solid rgba(96,160,240,0.25);}
.notif-detail-foot .btn{flex:1;justify-content:center;font-size:12px;}
.toast-wrap{position:fixed;top:calc(var(--topbar-h) + 10px);left:50%;transform:translateX(-50%);z-index:99999;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;}
.toast{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:99px;border:1px solid;font-size:12px;font-weight:600;pointer-events:auto;white-space:nowrap;opacity:0;transform:translateY(-8px) scale(0.95);transition:opacity 0.22s ease,transform 0.22s ease;font-family:var(--ff-body);}.toast.in{opacity:1;transform:translateY(0) scale(1);}
.toast.in{transform:translateX(0);opacity:1;}
.toast-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--a3);border-radius:0 0 var(--r-lg) var(--r-lg);animation:shrink 2.8s linear;}
@keyframes shrink{from{width:100%;}to{width:0%;}}
.cfg-section{margin-bottom:16px;}
.cfg-menu-section-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;color:var(--a3);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--edge);}
.cfg-title{font-family:var(--ff-head);font-weight:700;font-size:16px;color:var(--white);margin-bottom:18px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--edge);}
.cfg-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--edge);}
.cfg-row:last-child{border-bottom:none;}
.cfg-row-lbl{font-size:13px;color:var(--body);}
.cfg-row-desc{font-size:10px;color:var(--dim);margin-top:2px;}
.color-dot{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all 0.15s;}
.color-dot.sel{border-color:white;transform:scale(1.2);}
.login-screen{position:fixed;inset:0;background:var(--ink);z-index:99000;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 30%,rgba(255,140,66,0.07) 0%,transparent 70%);pointer-events:none;}
.login-box{display:none;}
.login-logo{text-align:center;z-index:1;margin-bottom:16px;}
.login-title{font-size:34px;font-weight:900;color:#fff;letter-spacing:-0.5px;margin-bottom:6px;text-align:center;position:relative;z-index:1;}
.login-sub{font-size:14px;color:rgba(255,255,255,0.42);margin-bottom:8px;text-align:center;position:relative;z-index:1;}
.login-label{display:none;}
.login-users{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;max-width:760px;position:relative;z-index:1;}
.login-user-opt{display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;transition:transform 0.22s cubic-bezier(.4,0,.2,1);width:128px;background:none;border:none;padding:0;}
.login-user-opt:hover{transform:scale(1.1);}
.login-user-opt:hover .lu-avatar{border-color:#fff;box-shadow:0 12px 40px rgba(255,255,255,0.15);}
.login-user-opt.picked .lu-avatar{border-color:var(--a3);box-shadow:0 0 0 3px rgba(255,140,66,0.35),0 12px 36px rgba(255,140,66,0.3);}
.login-user-opt.picked .lu-name{color:#fff;}
.lu-avatar{width:120px;height:120px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:58px;border:3px solid rgba(255,255,255,0.12);transition:all 0.22s;box-shadow:0 8px 28px rgba(0,0,0,0.5);position:relative;}
.lu-name{font-size:15px;font-weight:700;color:rgba(255,255,255,0.72);text-align:center;line-height:1.2;transition:color 0.2s;}
.lu-role{font-size:11px;color:rgba(255,255,255,0.32);text-align:center;margin-top:2px;}
.login-pass{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(10px);z-index:99100;align-items:center;justify-content:center;}
.login-pass.show{display:flex;animation:fadeIn 0.2s ease;}
.login-pass-inner{background:var(--surface);border:1px solid var(--rim);border-radius:22px;padding:36px 40px 38px;width:340px;text-align:center;box-shadow:var(--shadow-lg);animation:slideDown 0.22s ease;}
.login-pass-avatar{width:84px;height:84px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 14px;box-shadow:0 6px 24px rgba(0,0,0,0.5);}
.login-pass-name{font-size:22px;font-weight:800;color:#fff;margin-bottom:3px;}
.login-pass-role{font-size:12px;color:rgba(255,255,255,0.38);margin-bottom:26px;}
.login-pass input{width:100%;padding:14px 16px;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.12);border-radius:11px;color:#fff;font-size:20px;text-align:center;letter-spacing:8px;outline:none;font-family:var(--ff-mono);transition:border-color 0.2s;margin-bottom:14px;box-sizing:border-box;}
.login-pass input:focus{border-color:var(--a3);}
.login-pass input.err-shake{animation:shake 0.4s ease;border-color:var(--err) !important;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.login-pass-row{display:flex;gap:10px;}
.login-pass-back{padding:12px 18px;border-radius:11px;border:1.5px solid rgba(255,255,255,0.14);background:transparent;color:rgba(255,255,255,0.5);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;flex-shrink:0;}
.login-pass-back:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
.login-pass-enter{flex:1;padding:12px 18px;border-radius:11px;border:none;background:var(--a3);color:#000;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.15s;}
.login-pass-enter:hover{background:var(--a4);transform:translateY(-1px);}
.login-err{color:#ff4757;font-size:12px;text-align:center;margin-bottom:10px;min-height:16px;display:none;}
.login-err.show{display:block;animation:fadeIn 0.2s;}
.divider{height:1px;background:var(--edge);margin:2px 0;}
.text-sm{font-size:11px;}
.text-xs{font-size:10px;}
.mt2{margin-top:8px;}
.gap6{display:flex;gap:6px;align-items:center;}
.ml-auto{margin-left:auto;}
.w100{width:100%;justify-content:center;}
*{scrollbar-width:thin;scrollbar-color:var(--edge) transparent;}
@media (max-width:768px){:root{--cols-cel:36px 1fr auto auto;--cols-peca:36px 1fr auto auto;--cols-atk:70px 1fr 90px;--cols-contas:1fr 80px 100px;--cols-hcaixa:80px 1fr 80px;--cols-cont-pay:1fr 80px 100px;--cols-lanc:80px 1fr 80px 50px;--cols-atk-row:70px 1fr 90px;}html,body{height:100dvh;} body{overflow:auto;height:auto;min-height:100dvh;overflow-x:hidden;} :root{--topbar-h:48px;} .os-ticket,.prod-card,.kpi,.dash-card,.sb-item,.tab,.btn, .pay-btn,.cat-tab,.qty-b,.tog{touch-action:manipulation;} .dash-card{overscroll-behavior:contain;} input.fi,textarea.fi,select.fi,.fi, input[type="text"],input[type="number"], input[type="email"],input[type="tel"], input[type="search"],input[type="date"], textarea,select{font-size:16px !important;} .login-pass input{font-size:20px !important;} .input-date{font-size:16px !important;} .topbar{padding:0 10px;gap:6px;height:var(--topbar-h);} .topbar-breadcrumb{flex:1;min-width:0;overflow:hidden;} .topbar-crumb-root,.topbar-crumb-sep,.topbar-div{display:none;} #topbarCaixaStatus,#topbarSaldoWrap, #dbSaveIndicator,#zoomToggleBtn, .search-bar:not(.pdv-toolbar .search-bar){display:none !important;} .pdv-toolbar .search-bar{display:flex;} .tb-btn[onclick="openDBManager()"], .tb-btn[onclick="doLogout()"]{display:none !important;} .tb-btn{width:38px;height:38px;font-size:16px;} .topbar-title{font-size:15px;font-weight:700;color:var(--bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sb{display:none;} .topbar{display:none;} .m-topbar-mob{display:flex;} .m-bottomnav{display:flex;} .main{padding-bottom:64px;overflow:auto;} .content{padding:10px;gap:10px;overflow-y:auto;overflow-x:hidden;flex:1;} body:has(#page-pdv.active) .content{overflow:hidden !important;padding:0 !important;gap:0 !important;height:100% !important;} body:has(#page-pdv.active) .main{padding-bottom:0 !important;overflow:hidden !important;height:100dvh !important;} .g2,.g2-10,.g3,.g3-14,.g4,.g4a,.g24,.g42{grid-template-columns:1fr;} .col2{grid-column:span 1;} .kpi-row{grid-template-columns:repeat(2,1fr);gap:8px;} .kpi{padding:12px 12px 10px;} .kpi-val{font-size:1.4rem;} .fgrid,.modal .fgrid{grid-template-columns:1fr;} .fgrid .full{grid-column:span 1;} .modal>*,.card>*,.sec-head>*,.kpi>*,.dash-card>*,.cart-head>*{min-width:0;} .sec-head{flex-wrap:wrap;gap:8px;padding-bottom:10px;margin-bottom:10px;} .sec-title{font-size:15px;} .sec-actions{width:100%;flex-wrap:wrap;gap:6px;} .sec-actions .search-bar{flex:1;min-width:0;display:flex;} .sec-actions .btn{font-size:11px;padding:7px 12px;} .topbar-breadcrumb{overflow:hidden;min-width:0;} #dashGrid{grid-template-columns:1fr;gap:8px;} #bkpiRow{grid-template-columns:1fr;} .dash-card,.dash-card.wide,.dash-card.full{grid-column:span 1;} .dash-card .drag-handle,.drag-handle{display:none;} .dash-card.card,.dash-card>.card,.card.dash-card{padding:12px 10px;} .dash-card .card-head{margin-bottom:10px;padding-bottom:8px;} .dash-card .card-title{font-size:9px;} .dash-card .kpi-row{grid-template-columns:1fr 1fr;gap:6px;} .dash-card .kpi{padding:10px 10px 8px;} .dash-card .kpi-val{font-size:1.3rem;} .bkpi-card{border-radius:var(--r-xl);padding:12px 12px 10px;} .bkpi-val{font-size:22px;} .bkpi-sub,.bkpi-name,.bkpi-num{font-size:11px;} .bkpi-num{min-width:36px;} .bkpi-track{width:50px;} .bkpi-rows{gap:7px;} .dash-chart-wrap{flex-direction:column;gap:8px;align-items:stretch;} .dash-chart-canvas{width:100%;height:180px;flex-shrink:0;} .dash-chart-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;} .dash-os-list{max-height:220px;overflow-y:auto;} .dash-critico-list{max-height:180px;} .dash-fin-list{gap:4px;} .dash-equipe-list{gap:6px;} .dash-fin-saldo{padding:8px 10px;margin-top:6px;} .dash-saldo-val{font-size:18px;} #pdvTabBar{display:flex;flex-shrink:0;background:var(--ink);border-bottom:1px solid var(--edge);} #pdvTabBar .pdv-tab{flex:1;padding:10px 8px;text-align:center;font-size:12px;font-weight:700;color:var(--dim);cursor:pointer;transition:color 0.15s,border-bottom 0.15s;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px;} #pdvTabBar .pdv-tab.active{color:var(--a3);border-bottom-color:var(--a3);} #pdvTabBar .pdv-tab-badge{background:var(--a3);color:#000;font-family:var(--ff-mono);font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;min-width:16px;text-align:center;display:none;} #pdvTabBar .pdv-tab-badge.has-items{display:inline-block;} #page-pdv.active{display:flex !important;flex-direction:column !important;flex:1 !important;min-height:0 !important;gap:0 !important;overflow:hidden !important;} .pdv-wrap{display:contents;} .pdv-left{flex-direction:column;flex:1;min-height:0;overflow:hidden;border-radius:0;border-bottom:none;} .pdv-right{flex-direction:column;flex:1;width:100%;min-height:0;overflow-y:auto;border-radius:0;border-top:none;background:var(--panel);} .pdv-hist{display:none;flex-direction:column;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);overflow:hidden;} .pdv-hist-row{display:flex;gap:0;padding:0 0 16px 0;cursor:pointer;position:relative;} .pdv-hist-row:hover .pdv-hist-body{border-color:var(--rim);background:var(--raised);} .pdv-hist-row:not(:last-child) .pdv-hist-line{position:absolute;left:15px;top:32px;bottom:0;width:1px;background:var(--edge);} .pdv-hist-left{display:flex;flex-direction:column;align-items:center;padding:0 12px 0 0;flex-shrink:0;} .pdv-hist-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--ff-mono);font-weight:700;border:1.5px solid var(--edge);flex-shrink:0;letter-spacing:0;z-index:1;position:relative;} .pdv-hist-dot.d-pix{background:var(--a0);color:var(--a3);border-color:var(--a1);} .pdv-hist-dot.d-din{background:var(--okBg);color:var(--ok);border-color:rgba(77,219,143,0.4);} .pdv-hist-dot.d-crd{background:var(--warnBg);color:var(--warn);border-color:rgba(255,179,0,0.4);} .pdv-hist-dot.d-deb{background:var(--purpBg);color:var(--purp);border-color:rgba(179,136,255,0.4);} .pdv-hist-dot.d-atk{background:var(--infoBg);color:var(--info);border-color:rgba(96,160,240,0.4);} .pdv-hist-dot.d-out{background:var(--raised);color:var(--ghost);border-color:var(--rim);} .pdv-hist-body{flex:1;min-width:0;background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-lg);padding:12px 14px;transition:all 0.15s;} .pdv-hist-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:5px;} .pdv-hist-num{font-family:var(--ff-mono);font-size:10px;color:var(--dim);} .pdv-hist-val{font-family:var(--ff-mono);font-size:15px;font-weight:700;color:var(--ok);white-space:nowrap;} .pdv-hist-cli{font-size:13px;font-weight:700;color:var(--bright);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pdv-hist-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px;} .pdv-hist-tag{font-size:11px;color:var(--ghost);} .pdv-hist-items{font-size:11px;color:var(--dim);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pdv-hist-footer{display:flex;gap:6px;align-items:center;flex-wrap:wrap;} .pdv-hist-badge{font-family:var(--ff-mono);font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;} .pdv-hist-recibo{margin-left:auto;font-size:10px;font-weight:600;color:var(--a3);cursor:pointer;padding:3px 10px;border-radius:20px;border:1px solid rgba(255,140,66,0.3);background:var(--a0);white-space:nowrap;transition:all 0.15s;} .pdv-hist-recibo:hover{background:var(--a1);border-color:var(--a3);} .prod-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) !important;gap:8px !important;padding:8px !important;overflow-y:auto !important;flex:1 !important;-webkit-overflow-scrolling:touch;}  .prod-card-info{padding:7px 8px 9px !important;gap:3px !important;} .prod-nm{font-size:11px !important;font-weight:600 !important;color:var(--soft) !important;letter-spacing:0.1px !important;line-height:1.3 !important;-webkit-line-clamp:2 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;overflow:hidden !important;white-space:normal !important;} .prod-pr{font-size:12px !important;margin-top:2px !important;} .prod-st{display:flex !important;} .prod-em{font-size:36px !important;} .cart-items{flex:1 1 0 !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;} .cart-foot{flex:0 0 auto !important;overflow:visible !important;display:flex !important;flex-direction:column !important;padding:8px 12px calc(64px + env(safe-area-inset-bottom,0px) + 10px) !important;max-height:none !important;} #btnFinalizarVenda{flex-shrink:0 !important;width:100% !important;margin-top:8px !important;padding:14px !important;font-size:15px !important;} #parcelasBox{max-height:120px !important;overflow-y:auto !important;} #parcelasGrid{grid-template-columns:repeat(2,1fr) !important;} .troco-box-input,.troco-val{font-size:18px !important;} .cart-total{padding:8px 10px !important;margin:6px 0 !important;} .cart-total-val{font-size:1.5rem !important;} .cart-line{margin-bottom:3px !important;font-size:12px !important;} #cartDesconto{font-size:16px !important;min-height:38px !important;} .pay-btn{min-height:52px !important;padding:8px 4px 6px !important;font-size:11px !important;min-width:0 !important;flex:1 !important;} .pay-btn .pay-icon{font-size:18px !important;} .cart-head{padding:8px 12px !important;flex-shrink:0 !important;} .cart-client{flex-shrink:0 !important;padding:6px 10px !important;} .pdv-toolbar{flex-wrap:nowrap !important;gap:4px !important;padding:5px 8px !important;overflow-x:auto;overflow-y:hidden;}.pdv-toolbar>.btn-group{flex-shrink:0 !important;} .cat-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;flex-shrink:0;} .cat-tabs::-webkit-scrollbar{display:none;} .cart-desc-input{max-width:80px;flex-shrink:1;} .qty-b{width:44px !important;height:44px !important;font-size:18px !important;border-radius:8px !important;}.ci-obs-input{font-size:16px !important;min-height:36px !important;padding:6px 4px !important;}.ci-desc-input{width:80px !important;font-size:16px !important;min-height:36px !important;padding:6px 8px !important;} #parcelasGrid{grid-template-columns:repeat(2,1fr) !important;} #zoomDrawer{display:none;}#pdvKbHint{display:none;} .stock-row{gap:6px;padding:8px 10px;overflow:hidden;} .stock-row>*{min-width:0;overflow:hidden;text-overflow:ellipsis;} .stock-cost{display:none;} .stock-thumb{width:34px;height:34px;font-size:15px;} .stock-name{font-size:11px;} .stock-sku{font-size:8px;} .stock-qty-val{font-size:14px;min-width:32px;} .stock-sell-val{font-size:11px;} #page-celulares .card[style*="overflow:hidden"]{overflow-x:auto;} #page-estoque .card[style*="overflow:hidden"]{overflow-x:auto;} #page-celulares .card>div[style*="56px"]{display:none;} #page-estoque .card>div[style*="56px"]{display:none;} #filtrosAvCelPanel>div:first-child, #filtrosAvCelPanel>div:last-child, #filtrosAvPecPanel>div:first-child{grid-template-columns:1fr !important;} #page-clientes .tbl td{padding:8px 10px;font-size:11px;} #page-clientes .tbl th{padding:6px 10px;} #page-clientes .tbl-wrap{overflow-x:auto;} #page-clientes .tbl{min-width:540px !important;} #finTabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;} #finTabs::-webkit-scrollbar{display:none;} #finTabs .tab,.fin-tab{white-space:nowrap;flex-shrink:0;} #finTabs{-webkit-mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%);} .caixa-banner{padding:10px 14px;} .filtros-panel{padding:10px 12px;} .fin-entry{padding:8px 0;gap:8px;} .fin-amount{font-size:12px;} .fin-desc-title{font-size:11px;} #fluxoCategorias{grid-template-columns:1fr;} #page-financeiro .card>div[style*="1fr 120px"]{display:none;} #page-atacado .atk-row-head{display:none;}  .atk-col:nth-child(4),.atk-col:nth-child(5),.atk-col:nth-child(6){display:none;} #relatorios-menu{grid-template-columns:repeat(2,1fr) !important;} #relatorio-viewer .viewer-actions{flex-direction:column !important;} .rel-card{padding:14px 12px;} .rel-card-title{font-size:13px;} .rel-card-desc{font-size:11px;} .rel-card-icon{font-size:22px;} .cfg-row{padding:9px 0;} .cfg-row-lbl{font-size:12px;} .cfg-row-desc{font-size:9px;} .mod-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;} .mod-card{padding:11px 12px;} .theme-card{padding:8px;} .theme-card-swatch{height:26px;} .color-dot{width:20px;height:20px;} #themeColorGrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr)) !important;} .biz-type-grid{grid-template-columns:repeat(2,1fr) !important;} .biz-type-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cfg-grid{grid-template-columns:1fr !important;} .cfg-menu-grid{grid-template-columns:1fr !important;} .filtros-av-grid{grid-template-columns:1fr !important;} #dmCaixaBody{grid-template-columns:1fr 1fr !important;} .pv-camp-form>div[style*="grid-template-columns"]{grid-template-columns:1fr !important;} #modal-est-cel div[style*="grid-template-columns:1fr 1fr"],#modal-est-cel div[style*="grid-template-columns:1fr 1fr 1fr"],#modal-est-peca div[style*="grid-template-columns:1fr 1fr"],#modal-est-peca div[style*="grid-template-columns:1fr 1fr 1fr"],#modal-est-peca div[style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr !important;} #modal-est-peca div[style*="grid-template-columns:1fr 1fr auto"]{grid-template-columns:1fr 1fr !important;} #modal-est-peca.overlay .modal{padding:0 !important;} #modal-est-peca div[style*="220px minmax"]{grid-template-columns:1fr !important;overflow:visible !important;overflow-y:auto !important;max-height:calc(93dvh - 120px);} #modal-est-peca div[style*="220px minmax"]>div:first-child{border-right:none !important;border-bottom:0.5px solid var(--edge);padding:14px 14px 10px !important;} #modal-est-peca div[style*="220px minmax"]>div:last-child{padding:14px !important;} #modal-est-peca div[style*="padding:18px 24px"]{padding:12px 14px 10px !important;} #modal-est-peca div[style*="padding:14px 24px"]{padding:10px 14px !important;} #modal-est-cel div[style*="padding:16px 18px"]{padding:12px 14px !important;} #modal-est-cel div[style*="gap:14px;align-items:flex-start"]{flex-direction:column !important;align-items:stretch !important;} #modal-est-cel #estCelImgArea{width:100% !important;height:120px !important;aspect-ratio:auto !important;} #modal-est-cel div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr 1fr !important;} .overlay{align-items:flex-end !important;padding:0 !important;} .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl{width:100% !important;max-width:100vw !important;max-height:93dvh !important;border-radius:var(--r-2xl) var(--r-2xl) 0 0 !important;padding:16px 14px 20px !important;margin:0 !important;} .modal::after{content:'';display:block;width:36px;height:4px;background:var(--rim);border-radius:2px;margin:0 auto 14px;order:-1;flex-shrink:0;} .modal-head{margin-bottom:14px;padding-bottom:10px;} .modal-title{font-size:1rem;} .modal-foot{position:sticky;bottom:0;background:var(--panel);z-index:1;padding-top:12px;margin-top:14px;} @keyframes modalIn{from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} } .notif-panel{right:8px;left:8px;width:auto;top:calc(var(--topbar-h) + 4px);} .notif-list{max-height:50dvh;} .notif-detail-overlay{padding:calc(var(--topbar-h)+4px) 0 0 0;align-items:flex-end !important;} .notif-detail-box{width:100%;border-radius:var(--r-2xl) var(--r-2xl) 0 0;} .toast-wrap{top:calc(var(--topbar-h) + 8px);left:50%;transform:translateX(-50%);} .toast{white-space:nowrap;max-width:90vw;} .login-users{gap:16px !important;padding:0 16px;flex-wrap:wrap;} .login-user-opt{flex-shrink:0;} .lu-avatar{width:80px !important;height:80px !important;font-size:36px !important;} .lu-name{font-size:12px !important;} .login-title{font-size:26px !important;} .login-sub{font-size:12px !important;margin-bottom:16px !important;} .login-pass-inner{padding:24px 20px;max-width:420px;width:calc(100vw - 32px);border-radius:20px;} .card{padding:12px;} .btn{padding:8px 14px;font-size:12px;} .fi{padding:8px 10px;font-size:12px;} .fi-filter{height:34px;font-size:11px;padding:6px 8px;} .tabs{gap:1px;} .tab{padding:5px 12px;font-size:12px;} .badge{font-size:9px;padding:2px 7px;} .tbl-wrap{overflow-x:auto !important;} .tbl-wrap>*{min-width:0;} #alertaEstoqueBanner,#alertaContasBanner{padding:6px 12px;font-size:11px;} .user-dropdown{position:fixed;bottom:calc(60px + env(safe-area-inset-bottom,0px) + 6px);left:8px;right:8px;max-height:60dvh;overflow-y:auto;border-radius:var(--r-xl);} @supports not (backdrop-filter:blur(1px)){.overlay{background:rgba(6,9,15,0.96);} .login-pass{background:rgba(0,0,0,0.92);} }
.bkpi-card{min-width:0;}
@keyframes pdv-step-pop{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}
@keyframes pdv-step-done{0%{transform:scale(1)} 30%{transform:scale(1.3)} 100%{transform:scale(1)}}
@keyframes pdv-line-fill{from{width:0} to{width:100%}}
#pdvStepper{display:flex !important;flex-direction:column;flex-shrink:0;}
#pdvSubBar,#pdvSubBarDesktop{display:none !important;}
#pdvStepperBar{display:flex;align-items:center;padding:6px 16px 12px;gap:0;}
.pdv-step{display:flex;align-items:center;gap:6px;cursor:pointer;transition:opacity 0.25s;}
.pdv-step:not(.active):not(.done){opacity:0.4;}
.pdv-step.active{opacity:1;}
.pdv-step.done{opacity:1;}
.pdv-step-num{width:26px;height:26px;border-radius:50%;background:var(--rim);color:var(--ghost);font-family:var(--ff-mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.25s,color 0.25s,box-shadow 0.25s;}
.pdv-step.active .pdv-step-num{background:var(--a3);color:#000;box-shadow:0 0 0 3px var(--a0);animation:pdv-step-pop 0.3s ease;}
.pdv-step.done .pdv-step-num{background:var(--ok);color:#000;animation:pdv-step-done 0.3s ease;}
.pdv-step-lbl{font-size:11px;font-weight:700;color:var(--ghost);white-space:nowrap;transition:color 0.25s;}
.pdv-step.active .pdv-step-lbl{color:var(--a3);}
.pdv-step.done .pdv-step-lbl{color:var(--ok);}
.pdv-step-line{flex:1;height:2px;border-radius:1px;background:var(--rim);margin:0 8px;position:relative;overflow:hidden;transition:background 0.3s;}
.pdv-step-line.done{background:var(--ok);}
.pdv-step-line.done::after{content:'';position:absolute;inset:0;background:var(--ok);animation:pdv-line-fill 0.35s ease;}
#mobPDV{display:flex;flex:1 !important;min-height:0 !important;overflow:hidden !important;}
#mobP1,#mobP2,#mobP3{min-height:0;overflow:hidden;}
#pdvBackBtn{display:none;}
#pdvKbHint{display:none !important;}
#pdvHistFiltros{flex-wrap:wrap;padding:6px 8px;gap:5px;border-radius:0;}
#pdvHistDe,#pdvHistAte{flex:1;min-width:calc(50% - 6px);height:36px;font-size:16px !important;}
#osFiltrosBar{margin-bottom:10px;}
#page-os .tabs{display:none !important;}
#osKanban{display:none !important;}
#osLista{display:block !important;}
#page-celulares .sec-head, #page-estoque .sec-head{flex-direction:column !important;align-items:stretch !important;gap:8px !important;padding-bottom:8px;}
#page-celulares .sec-actions .search-bar, #page-estoque .sec-actions .search-bar{display:none !important;}
#page-celulares .sec-actions, #page-estoque .sec-actions{ display:flex !important;flex-wrap:nowrap !important; overflow-x:auto !important;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch; gap:6px !important;padding-bottom:2px;align-items:center;}
#page-celulares .sec-actions::-webkit-scrollbar, #page-estoque .sec-actions::-webkit-scrollbar{display:none;}
#page-celulares .sec-actions select, #page-estoque .sec-actions select{ flex-shrink:0 !important; width:auto !important; min-width:110px !important; max-width:140px !important; font-size:11px !important;}
#page-celulares .sec-actions .btn, #page-estoque .sec-actions .btn{ flex-shrink:0 !important;white-space:nowrap !important; font-size:11px !important;padding:7px 11px !important;}
.mob-search-bar{display:flex !important;}
#page-celulares .card.card-np>div:first-child, #page-estoque .card.card-np>div:first-child{display:none !important;}
#filtrosAvCelPanel .g4a, #filtrosAvPecPanel .g4a{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important;align-items:end;}
#filtrosAvCelPanel .g4a>.btn, #filtrosAvPecPanel .g4a>.btn{ grid-column:span 2 !important; width:100% !important;justify-content:center !important;}
#kpiEstCel, #kpiEstPecRow{grid-template-columns:repeat(2,1fr) !important;}
#filtrosChipsCel, #filtrosChipsPec{flex-wrap:wrap !important;}
#page-clientes .tbl thead{display:none;}
#page-clientes .tbl,#page-clientes .tbl tbody, #page-clientes .tbl tr{display:block;width:100%;}
#page-clientes .tbl-wrap{overflow-x:visible;}
#page-clientes .tbl tr{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-md);margin-bottom:8px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:4px 12px;position:relative;}
#page-clientes .tbl td{display:inline-flex;align-items:center;font-size:12px;padding:0;border:none;min-width:0;}
#page-clientes .tbl td:first-child{width:100%;font-weight:700;font-size:13px;color:var(--bright);margin-bottom:2px;}
#page-clientes .tbl td:nth-child(3), #page-clientes .tbl td:nth-child(4){display:none;}
#page-clientes .tbl td:last-child{position:absolute;top:8px;right:8px;}
.rel-ctrl-bar{flex-direction:column;align-items:stretch;gap:6px;}
.rel-ctrl-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:6px;}
.rel-ctrl-actions .btn{width:100%;justify-content:center;font-size:11px;}
.rel-periodo-bar{flex-direction:column;gap:6px;padding:8px 10px;}
.rel-periodo-bar .row-c6{flex-wrap:wrap;gap:4px;}
.rel-periodo-bar .row-c6 input{flex:1;min-width:calc(50% - 12px);}
#page-usuarios .tbl thead{display:none;}
#page-usuarios .tbl,#page-usuarios .tbl tbody, #page-usuarios .tbl tr{display:block;}
#page-usuarios .tbl-wrap{overflow-x:visible;}
#page-usuarios .tbl tr{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-md);margin-bottom:8px;padding:10px 12px;position:relative;}
#page-usuarios .tbl td{display:block;font-size:12px;padding:2px 0;border:none;}
#page-usuarios .tbl td:first-child{font-weight:700;font-size:13px;color:var(--bright);}
#page-usuarios .tbl td:nth-child(3){font-size:11px;color:var(--dim);}
#page-usuarios .tbl td:last-child{position:absolute;top:8px;right:8px;}
#page-posvenda .sec-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;}
#page-posvenda .sec-actions::-webkit-scrollbar{display:none;}
#page-posvenda .sec-actions .btn{flex-shrink:0;white-space:nowrap;font-size:10px;padding:6px 10px;}
#page-faq .sec-actions{flex-wrap:wrap;}
#page-config .sec-actions{flex-wrap:wrap;}
#relatorios-menu{grid-template-columns:1fr 1fr !important;gap:10px;}
.rel-card{padding:14px 12px;border-radius:var(--r-xl);}
.rel-card-icon{font-size:24px;margin-bottom:6px;}
.rel-card-title{font-size:13px;}
.rel-card-desc{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rel-ctrl-bar{flex-direction:column;align-items:stretch;gap:6px;}
.rel-ctrl-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:6px;}
.rel-ctrl-actions .btn{width:100%;justify-content:center;font-size:11px;padding:8px 6px;}
.rel-periodo-bar{flex-direction:column;gap:8px;padding:10px 12px;}
.rel-periodo-bar .row-c6{flex-wrap:wrap;gap:6px;}
.rel-periodo-bar .row-c6 input{flex:1;min-width:calc(50% - 20px);}
.rel-periodo-bar .btn{width:100%;justify-content:center;}
#relatorio-content{overflow-x:auto;}
#page-posvenda>.g2{grid-template-columns:1fr;gap:14px;}
#page-posvenda .card>div[style*="minmax(280px"]{grid-template-columns:1fr !important;}
#page-posvenda .sec-actions{width:100%;}
#page-posvenda .sec-actions .btn{width:100%;justify-content:center;}
#page-posvenda .card{overflow-x:hidden;}
#page-posvenda .card>div[style*="align-items:center;gap:12px"]{flex-direction:column;align-items:stretch !important;gap:8px !important;}
.pv-badge-wa{font-size:10px;background:rgba(37,211,102,0.12);color:#25d366;border:1px solid rgba(37,211,102,0.3);border-radius:20px;padding:2px 8px;font-family:var(--ff-mono);}
.pv-badge-em{font-size:10px;background:var(--infoBg);color:var(--info);border:1px solid rgba(96,160,240,0.3);border-radius:20px;padding:2px 8px;font-family:var(--ff-mono);}
.pv-camp-card:hover{border-color:var(--a2) !important;background:var(--raised) !important;}
.pv-camp-card.pv-active{border-color:var(--a3) !important;background:var(--raised) !important;}
.pv-camp-card.pv-active .pv-camp-arrow{transform:rotate(180deg);}
#pvCampGrid{align-items:start;}
@media(max-width:600px){
  #pvCampGrid{grid-template-columns:1fr !important;}
  .pv-camp-form>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
}
#page-faq>.g2{grid-template-columns:1fr;gap:14px;}
#page-faq .faq-cat-btn{font-size:11px;padding:5px 10px;}
#page-faq .card:has(kbd){display:none;}
#page-clientes .tbl{min-width:560px;}
#page-clientes .sec-actions{flex-direction:column;align-items:stretch;gap:6px;}
#page-clientes .sec-actions .search-bar{width:100% !important;flex:none;}
#page-clientes .sec-actions .btn{width:100%;justify-content:center;}
#usuariosResumo{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;}
#page-atacado .sec-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;}
#page-atacado .sec-actions::-webkit-scrollbar{display:none;}
#page-atacado .sec-actions .btn{flex-shrink:0;white-space:nowrap;font-size:11px;padding:6px 10px;}
#page-atacado .sec-actions .btn-group{flex-shrink:0;}
#page-atacado .g2{grid-template-columns:1fr;}
#page-atacado .card:has(#atacadistasRows){overflow-x:auto;}
#kpiAtkRow{grid-template-columns:repeat(2,1fr) !important;gap:8px;}
#page-config .sec-actions{width:100%;}
#page-config .sec-actions .btn{width:100%;justify-content:center;}
#page-config .g2,#page-config .g3,#page-config .g4{grid-template-columns:1fr !important;}
.mod-grid{grid-template-columns:repeat(2,1fr) !important;}
#themeGrid,.theme-cards{grid-template-columns:repeat(2,1fr) !important;}
.biz-type-grid{grid-template-columns:repeat(2,1fr) !important;}
#themeColorGrid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr)) !important;}
.sec-actions .search-bar[style*="width"]{width:auto !important;flex:1 !important;}
.sec-actions select[style*="width"]{width:auto !important;}
#dashMob{display:block !important;}
#bkpiRow,#dashGrid, #page-dashboard .sec-head{display:none !important;}
.dash-mob-kpi{flex:1;padding:12px 6px;text-align:center;cursor:pointer;touch-action:manipulation;}
.dash-mob-kpi:active{background:var(--raised);}
.dash-mob-kpi-val{font-family:var(--ff-mono);font-size:16px;font-weight:700;line-height:1;margin-bottom:3px;}
.dash-mob-kpi-lbl{font-size:8px;font-weight:700;color:var(--ghost);text-transform:uppercase;letter-spacing:0.8px;}
.dash-mob-kpi-sep{width:0.5px;background:var(--edge);flex-shrink:0;margin:10px 0;}
.c-teal{color:var(--a3);}
.c-ok{color:var(--ok);}
.c-warn{color:var(--warn);}
.c-err{color:var(--err);}
.dm-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:0.5px solid var(--edge);cursor:pointer;touch-action:manipulation;}
.dm-row:last-child{border-bottom:none;}
.dm-row:active{background:var(--raised);}
.dm-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.dm-name{font-size:13px;font-weight:600;color:var(--bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-sub{font-size:10px;color:var(--ghost);margin-top:1px;}
.dm-val{font-family:var(--ff-mono);font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;}
#osFiltrosBar{flex-wrap:wrap !important;gap:6px !important;}
#osFiltrosBar .search-bar{width:100% !important;flex:none !important;min-width:0 !important;}
#osFiltrosBar select{width:100% !important;flex:none !important;min-width:0 !important;}
#page-os .sec-actions .search-bar{width:auto !important;flex:1 !important;}
#page-posvenda .card>div[style*="minmax(280px"]{ grid-template-columns:1fr !important;}
#page-posvenda div[style*="minmax(420px"]{ grid-template-columns:1fr !important;}
#page-os div[style*="repeat(4,1fr)"][style*="gap:7px"], .modal div[style*="repeat(4,1fr)"][style*="gap:7px"]{ grid-template-columns:repeat(2,1fr) !important;}
div[style*="220px minmax(0,1fr)"]{ grid-template-columns:1fr !important;overflow:visible !important;}
div[style*="160px 1fr"]{grid-template-columns:1fr !important;}
#imgUploadArea{width:100% !important;height:120px !important;}
div[style*="180px 1fr"]{grid-template-columns:1fr !important;gap:6px !important;}
#fin-fluxo .btn[style*="margin-left:auto"], #fin-contas .btn[style*="margin-left:auto"]{margin-left:0 !important;width:100% !important;justify-content:center !important;}
#osFiltrosBar .fi-filter{width:100% !important;max-width:none !important;}
#sortPec{width:100% !important;}
#page-financeiro .sec-head{flex-direction:column;align-items:stretch;gap:0;padding-bottom:0;margin-bottom:0;}
#page-financeiro .sec-actions{padding:0;gap:0;width:100%;}
#finTabs{width:100% !important;overflow-x:auto !important;flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch;scrollbar-width:none; border-bottom:1px solid var(--edge);margin-bottom:12px;padding-bottom:0;}
#finTabs::-webkit-scrollbar{display:none;}
#finTabs .tab{flex-shrink:0;white-space:nowrap;padding:10px 14px;font-size:12px;}
#finTabs{-webkit-mask-image:linear-gradient(to right,transparent 0,black 16px,black calc(100% - 16px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,black 16px,black calc(100% - 16px),transparent 100%);}
#finKpiRow{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
#caixaAberto>.g2{grid-template-columns:1fr !important;}
#caixaAberto .kpi-row{grid-template-columns:repeat(2,1fr);}
#caixaBanner{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;}
#caixaBanner>div:last-child{width:100%;display:flex;gap:6px;}
#caixaBanner>div:last-child .btn{flex:1;justify-content:center;font-size:11px;}
#fin-lancamentos>div:first-child{flex-direction:column !important;gap:8px !important;align-items:stretch !important;}
#fin-lancamentos>div:first-child .search-bar{width:100% !important;flex:none !important;}
#fin-lancamentos>div:first-child select{width:100% !important;min-width:0 !important;}
#fin-lancamentos>div:first-child .btn{width:100% !important;justify-content:center !important;white-space:nowrap;}
#fin-lancamentos>div:last-child{flex-direction:column !important;align-items:stretch;gap:0; padding:10px 12px;border-radius:0 0 var(--r-xl) var(--r-xl);}
#fin-lancamentos>div:last-child>div{display:flex !important;justify-content:space-between; align-items:center;padding:6px 0;border-bottom:1px solid rgba(31,47,68,0.3) !important;}
#fin-lancamentos>div:last-child>div:last-child{border-bottom:none !important;}
#fin-lancamentos .card.card-np>div:first-child{display:none !important;}
#fin-historico .card.card-np>div:first-child{display:none !important;}
#fin-fluxo>div:first-child{flex-direction:column !important;gap:8px !important;align-items:stretch !important;}
#fin-fluxo>div:first-child .btn-group{display:flex !important;overflow-x:auto;scrollbar-width:none; flex-shrink:0;-webkit-overflow-scrolling:touch;width:100% !important;}
#fin-fluxo>div:first-child .btn-group::-webkit-scrollbar{display:none;}
#fin-fluxo>div:first-child .btn-group .fluxo-period-btn{flex-shrink:0;white-space:nowrap;}
#fluxoCustomDates{display:flex !important;flex-wrap:wrap !important;gap:6px !important;}
#fluxoCustomDates input{width:calc(50% - 20px) !important;min-width:0 !important;flex:1 !important;}
#fin-fluxo>div:first-child select{width:100% !important;min-width:0 !important;}
#fin-fluxo>div:first-child>.btn{width:100% !important;justify-content:center !important;margin-left:0 !important;}
#fluxoTabelas{grid-template-columns:1fr !important;}
#fin-contas>div:first-child{flex-direction:column !important;gap:8px !important;align-items:stretch !important;}
#fin-contas>div:first-child .btn-group{display:flex !important;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;width:100% !important;flex-shrink:0;}
#fin-contas>div:first-child .btn-group::-webkit-scrollbar{display:none;}
#fin-contas>div:first-child .btn-group .dash-period-btn{flex-shrink:0;white-space:nowrap;}
#fin-contas>div:first-child select{width:100% !important;min-width:0 !important;flex:none !important;}
#fin-contas>div:first-child>.btn{width:100% !important;justify-content:center !important;margin-left:0 !important;}
#fin-contas .card.card-np>div:first-child{display:none !important;}
#fin-lancamentos>div:last-child{ display:flex !important;flex-direction:column !important; gap:0 !important;padding:0 !important; justify-content:flex-start !important; border-radius:0 0 var(--r-xl) var(--r-xl);}
#fin-lancamentos>div:last-child>div{ display:flex !important;justify-content:space-between !important; align-items:center;padding:8px 12px !important; border-bottom:1px solid rgba(31,47,68,0.3) !important; text-align:left !important;padding-left:12px !important;border-left:none !important;}
#fin-lancamentos>div:last-child>div:last-child{border-bottom:none !important;}
#fin-lancamentos>div:last-child>div .mono{font-size:14px !important;}
}
@media (max-width:480px){:root{--fs-base:12px;} .topbar{padding:0 8px;gap:6px;} .topbar-title{font-size:13px;} .tb-btn{width:30px;height:30px;font-size:13px;} .sb{height:56px;} .sb-item{min-width:40px;height:52px;padding:4px 2px !important;} .sb-icon-wrap{width:26px;height:26px;min-width:26px;font-size:13px;} .sb-item>span:not(.sb-badge){font-size:8px;} .main{padding-bottom:60px;} .content{padding:8px;gap:8px;} .kpi-row{grid-template-columns:1fr 1fr !important;} .prod-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important;gap:7px !important;padding:7px !important;} .prod-nm{font-size:10px !important;} .prod-pr{font-size:11px !important;} .cart-foot{flex:0 0 auto !important;} .btn-finalizar{padding:10px;font-size:13px;} .os-kanban{grid-template-columns:repeat(4,220px) !important;} .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl{max-height:96dvh !important;} .login-users{gap:10px !important;} .lu-avatar{width:68px !important;height:68px !important;font-size:28px !important;} .login-title{font-size:22px !important;} .login-sub{margin-bottom:12px !important;} .sec-title{font-size:14px;} .sec-actions .btn{font-size:10px;padding:6px 10px;} .conta-row{grid-template-columns:1fr 70px 80px !important;} }
@keyframes cc-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.5);}}.cc-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);animation:cc-pulse 2s ease-in-out infinite;flex-shrink:0;}@keyframes cc-bar-fill{from{width:0;}to{width:var(--bar-w,50%);}}.cc-bar{height:5px;border-radius:3px;background:rgba(255,140,66,0.08);overflow:hidden;margin-bottom:5px;}.cc-bar-fill{height:100%;border-radius:3px;animation:cc-bar-fill 1.2s cubic-bezier(.4,0,.2,1) forwards;}.cc-kpi{flex:1;background:var(--panel);border:0.5px solid var(--edge);border-radius:10px;padding:14px 14px 12px;position:relative;overflow:hidden;transition:border-color 0.2s;}.cc-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-color,var(--a3));border-radius:10px 10px 0 0;}.cc-kpi:hover{border-color:rgba(255,140,66,0.18);}.cc-kpi .kpi-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}.cc-kpi .kpi-val{font-family:var(--ff-mono);font-size:26px;font-weight:700;color:var(--bright);line-height:1;margin-bottom:5px;}.cc-kpi .kpi-sub{font-size:11px;color:var(--kpi-color,var(--a3));}.topbar-saldo{font-family:var(--ff-mono);font-size:13px;font-weight:700;color:var(--a3);}.topbar-saldo-label{font-size:10px;color:var(--dim);font-family:var(--ff-mono);letter-spacing:.5px;}.topbar-div{width:1px;height:18px;background:var(--edge);flex-shrink:0;}.sec-title-icon{color:var(--a3) !important;}.os-ticket{background:var(--panel) !important;border-color:rgba(255,140,66,0.08) !important;}.os-ticket:hover{background:rgba(255,140,66,0.05) !important;border-color:var(--aGlow) !important;}::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--aGlow);border-radius:99px;}::-webkit-scrollbar-thumb:hover{background:rgba(255,140,66,0.3);}
#cartFootScroll{scrollbar-width:thin;scrollbar-color:var(--edge) transparent;}
#cartFootScroll::-webkit-scrollbar{width:3px;}
#cartFootScroll::-webkit-scrollbar-thumb{background:var(--edge);border-radius:2px;}
.tbl thead th{background:var(--ink) !important;color:var(--dim) !important;border-bottom:0.5px solid var(--edge) !important;font-family:var(--ff-mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;}
.tbl tbody tr:hover{background:rgba(255,140,66,0.03) !important;}
.tbl tbody tr{border-bottom:0.5px solid rgba(255,140,66,0.05) !important;}
.modal-head{border-bottom:0.5px solid rgba(255,140,66,0.1) !important;}
.overlay{background:rgba(0,0,0,0.75) !important;}
.fi:focus{border-color:rgba(255,140,66,0.4) !important;}
.btn-primary{background:var(--a3) !important;color:#000 !important;border:none !important;}
.btn-primary:hover{background:var(--a4) !important;}
.search-bar input{background:transparent !important;color:var(--body) !important;}
.search-bar input::placeholder{color:var(--dim) !important;}
.sb-item>span:not(.sb-badge){overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;opacity:0;max-width:0;transition:opacity 0.2s,max-width 0.22s;}
.sb:hover .sb-item>span:not(.sb-badge){opacity:1;max-width:180px;}
.sb:hover .sb-scroll{padding:8px 8px;}
body:not(.mode-erp) .sb{background:var(--ink) !important;}
.topbar-title{font-size:14px !important;font-weight:600 !important;color:var(--body) !important;}
body.mode-light .sb{border-right-color:var(--edge);}
body.mode-light .topbar{border-bottom-color:var(--edge);box-shadow:0 1px 0 var(--edge);}
body.mode-light .topbar-saldo{color:var(--a2);}
body.mode-light .topbar-div{background:var(--edge);}
body.mode-light .kpi{border-color:var(--edge);}
body.mode-light .kpi-label{color:var(--ghost);}
body.mode-light .kpi-val{color:var(--bright);}
body.mode-light .kpi-sub{color:var(--dim);}
body.mode-light .dash-card{border-color:var(--edge) !important;}
body.mode-light .card-head{border-bottom-color:var(--edge);}
body.mode-light .card-title{color:var(--ghost);}
body.mode-light .os-kanban .os-col{border-color:var(--edge);}
body.mode-light .os-ticket{border-color:var(--edge) !important;}
body.mode-light .tbl thead th{background:var(--surface) !important;color:var(--ghost) !important;border-bottom-color:var(--edge) !important;}
body.mode-light .tbl tbody tr:hover{background:var(--raised) !important;}
body.mode-light .tbl tbody tr{border-bottom-color:var(--edge) !important;}
body.mode-light .modal-head{border-bottom-color:var(--edge) !important;}
body.mode-light .overlay{background:rgba(0,0,0,0.5) !important;}
body.mode-light .fi:focus{border-color:var(--a2) !important;}
body.mode-light .search-bar input::placeholder{color:var(--ghost) !important;}
body.mode-light .btn-ghost{border-color:var(--edge);color:var(--dim);}
body.mode-light .btn-ghost:hover{background:var(--raised);color:var(--body);}
body.mode-light .tab{color:var(--dim);background:var(--surface);border-color:var(--edge);}
body.mode-light .tab.active{background:var(--raised);color:var(--a2);border-color:var(--a2);}
body.mode-light .sec-head{border-bottom-color:var(--edge);}
body.mode-light .user-pill:hover{background:var(--raised);border-color:var(--edge);}
body.mode-light .user-dropdown{background:var(--panel);border-color:var(--edge);}
body.mode-light .dropdown-user{color:var(--body);border-bottom-color:var(--edge);}
body.mode-light .dropdown-user:hover{background:var(--raised);}
body.mode-light .cc-bar{background:var(--raised);}
body.mode-light .cc-bar-fill{opacity:0.8;}
body.mode-light .prog{background:var(--raised);}
body.mode-light .login-card{background:var(--panel);border-color:var(--edge);}
body.mode-light .login-title{color:var(--bright);}
body.mode-light .login-user-opt.picked .lu-name{color:var(--bright);}
body.mode-midnight .kpi{border-color:rgba(255,140,66,0.05);}
body.mode-midnight .kpi:hover{border-color:rgba(255,140,66,0.14);}
body.mode-midnight .card{border-color:rgba(255,140,66,0.05);}
body.mode-midnight .os-ticket{border-color:rgba(255,140,66,0.10);}
body.mode-midnight .sb{border-right-color:var(--aGlow2);}
body.mode-midnight .topbar{border-bottom-color:var(--aGlow2);}
body.mode-midnight .kpi-val{color:var(--bright);}
body.mode-midnight .sec-title{color:var(--ghost) !important;}
body.mode-midnight .sb-group-label{color:var(--dim);}
body.mode-midnight .kpi-label{color:var(--ghost);}
body.mode-midnight .card-title{color:var(--dim);}
body.mode-midnight .btn-ghost{border-color:var(--edge);color:var(--dim);}
body.mode-midnight .btn-ghost:hover{background:var(--raised);color:var(--body);}
body.mode-midnight .tab{border-color:var(--edge);}
body.mode-midnight .tab.active{background:rgba(255,140,66,0.08);border-color:rgba(255,140,66,0.2);}
body.mode-midnight .tbl thead th{background:var(--surface) !important;color:var(--ghost) !important;border-bottom-color:var(--edge) !important;}
body.mode-midnight .tbl tbody tr{border-bottom-color:var(--edge) !important;}
body.mode-midnight .fi{background:var(--ink) !important;border-color:var(--rim) !important;}
body.mode-midnight .search-bar{background:var(--deep) !important;border-color:var(--edge) !important;}
body.mode-midnight .modal{background:var(--panel) !important;}
body.mode-dark .kpi-label{color:var(--ghost);}
body.mode-dark .card-title{color:var(--dim);}
body.mode-dark .sb-group-label{color:var(--dim);}
body.mode-midnight .sb-footer{border-top-color:var(--edge);}
body.mode-midnight .card-head{border-bottom-color:var(--edge);}
body.mode-midnight .sec-head{border-bottom-color:var(--edge);}
body.mode-midnight .modal-head{border-bottom-color:var(--edge) !important;}
body.mode-midnight .overlay{background:rgba(0,0,0,0.8) !important;}
body.mode-midnight .topbar-div{background:var(--edge);}
body.mode-midnight .topbar-saldo{color:var(--a3);}
body.mode-midnight .cc-bar{background:var(--raised);}
body.mode-midnight .prog{background:var(--raised);}
body.mode-midnight .login-card{background:var(--panel);border-color:var(--edge);}
body.mode-midnight .dropdown-user{color:var(--body);border-bottom-color:var(--edge);}
body.mode-midnight .dropdown-user:hover{background:var(--raised);}
body.mode-midnight .dash-card{border-color:var(--edge) !important;}
body.mode-midnight .kpi-sub{color:var(--dim);}
body.mode-midnight .os-kanban .os-col{background:var(--deep);border-color:var(--edge);}
body.mode-midnight .user-pill:hover{background:var(--raised);border-color:var(--edge);}
body.mode-midnight .user-dropdown{background:var(--panel);border-color:var(--edge);}
@keyframes bkpi-bar{from{width:0;}to{width:var(--bw,0%);}}
@keyframes bkpi-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.bkpi-card{background:var(--panel);border:0.5px solid var(--edge);border-radius:14px;padding:20px 22px 18px;position:relative;overflow:hidden;transition:border-color .2s,transform .15s;animation:bkpi-in .4s ease both;}
.bkpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--bk-ac,var(--a3));border-radius:14px 14px 0 0;}
.bkpi-card:hover{border-color:rgba(255,140,66,.2);transform:translateY(-1px);}
.bkpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bkpi-label{font-family:var(--ff-mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);}
.bkpi-badge{font-family:var(--ff-mono);font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(255,140,66,.08);color:var(--a3);border:0.5px solid rgba(255,140,66,.15);}
.bkpi-val{font-family:var(--ff-mono);font-size:34px;font-weight:700;color:var(--bright);line-height:1;margin-bottom:5px;letter-spacing:-1px;}
.bkpi-sub{font-size:12px;color:var(--dim);margin-bottom:0;min-height:18px;}
.bkpi-divider{height:0.5px;background:var(--edge);margin:14px 0 12px;}
.bkpi-rows{display:flex;flex-direction:column;gap:9px;}
.bkpi-row{display:flex;align-items:center;gap:10px;}
.bkpi-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.bkpi-name{font-size:13px;color:var(--body);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bkpi-track{width:80px;height:5px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;flex-shrink:0;}
.bkpi-fill{height:100%;border-radius:99px;animation:bkpi-bar 1s cubic-bezier(.4,0,.2,1) forwards;}
.bkpi-num{font-family:var(--ff-mono);font-size:13px;font-weight:700;color:var(--bright);min-width:52px;text-align:right;flex-shrink:0;}
body.mode-light .bkpi-card{background:var(--panel);border-color:var(--edge);}
body.mode-light .bkpi-label{color:var(--ghost);}
body.mode-light .bkpi-name{color:var(--body);}
body.mode-light .bkpi-num{color:var(--bright);}
body.mode-light .bkpi-track{background:rgba(0,0,0,.06);}
body.mode-light .bkpi-badge{background:rgba(2,132,199,.08);color:var(--a2);border-color:rgba(2,132,199,.2);}
body.mode-light .pay-btn{background:var(--surface);border-color:var(--edge);color:var(--dim);}
body.mode-light .pay-btn:hover,body.mode-light .pay-btn.sel{background:rgba(2,132,199,0.10);border-color:var(--a2);color:var(--a2);}
body.mode-light .pdv-mode-btn{color:var(--dim);cursor:pointer;}
body.mode-light .pdv-mode-btn:hover{color:var(--body);background:var(--surface);}
body.mode-light .pdv-mode-btn.active{color:var(--a2);background:var(--panel);border-color:rgba(2,132,199,0.3);}
body.mode-light .cart-total{background:var(--raised);border-color:var(--edge);}
body.mode-light .cart-total-label{color:var(--ghost);}
body.mode-light .cart-total-val{color:var(--a2);}
body.mode-light .cart-line{color:var(--ghost);}
body.mode-light .cart-head{color:var(--body);border-bottom-color:var(--edge);background:var(--surface);}
body.mode-light .cart-foot{background:var(--surface);border-top-color:var(--edge);}
body.mode-light .cart-client{border-bottom-color:var(--edge) !important;}
body.mode-light .btn-finalizar{background:var(--a2);color:#fff;}
body.mode-light .cart-desc-input{background:var(--surface);border-color:var(--rim);color:var(--bright);}
body.mode-light .cart-client-pill{background:rgba(0,136,194,0.08);border-color:rgba(0,136,194,0.2);color:var(--a2);}
body.mode-light .rec-fmt-tab{color:var(--dim);background:transparent;cursor:pointer;}
body.mode-light .rec-fmt-tab:hover{color:var(--body);background:var(--surface);}
body.mode-light .rec-fmt-tab.active{color:var(--a3);background:var(--panel);border-color:rgba(0,136,194,0.3);}
body.mode-light .pdv-mode-btn{color:var(--ghost);cursor:pointer;}
body.mode-light .pdv-mode-btn.active{color:var(--a3);background:var(--surface);border-color:rgba(0,136,194,0.3);}
body.mode-light .dash-period-btn.active{color:var(--a3);background:var(--surface);border-color:rgba(0,136,194,0.3);}
body.mode-light .cat-tab{color:var(--ghost);background:var(--surface);border-color:var(--rim);}
body.mode-light .cat-tab.active,body.mode-light .cat-tab:hover{color:var(--a3);border-color:var(--a3);background:rgba(0,136,194,0.07);}
body.mode-light .os-prog-step{background:var(--surface);color:var(--ghost);}
body.mode-light .os-prog-step:hover{background:var(--raised);color:var(--body);}
body.mode-light .os-prog-step.prog-done{background:var(--raised);color:var(--dim);}
body.mode-light .theme-mode-btn{background:var(--surface);color:var(--ghost);border-color:var(--edge);cursor:pointer;}
body.mode-light .theme-mode-btn:hover{color:var(--body);background:var(--raised);}
body.mode-light .theme-mode-btn.active{color:var(--a3);background:rgba(0,136,194,0.08);border-color:var(--a3);}
body.mode-light .tab{color:var(--ghost);background:var(--surface);}
body.mode-light .tab.active{color:var(--a3);background:var(--raised);border-color:var(--a3);}
body.mode-light .tab:not(.active):hover{color:var(--body);}
body.mode-light .qty-b{background:var(--surface);border-color:var(--edge);color:var(--body);}
body.mode-light .qty-b:hover{border-color:var(--a3);color:var(--a3);}
body.mode-light .modal-x{background:var(--surface);border-color:var(--edge);color:var(--ghost);}
body.mode-light .modal-x:hover{border-color:var(--err);color:var(--err);}
body.mode-light .notif-clear-btn{background:var(--surface);border-color:var(--edge);color:var(--ghost);}
body.mode-light .notif-clear-btn:hover{color:var(--err);border-color:var(--err);}
body.mode-light .notif-detail-close{background:var(--surface);border-color:var(--edge);color:var(--ghost);}
body.mode-light .notif-detail-close:hover{background:var(--errBg);color:var(--err);border-color:var(--err);}
body.mode-light .os-col-count{background:var(--surface);color:var(--ghost);}
body.mode-light .tbl thead th{background:var(--surface) !important;color:var(--body) !important;border-bottom-color:var(--edge) !important;}
body.mode-light .pay-btn{background:var(--surface);border-color:var(--rim);color:var(--body);}
body.mode-light .pay-btn:hover,body.mode-light .pay-btn.sel{background:rgba(0,136,194,0.08);border-color:var(--a3);color:var(--a3);}
body.mode-light .theme-mode-btn.active{background:var(--a0);border-color:var(--a1);color:#c0f0d8;}
body.mode-light .os-advance-btn:hover{background:var(--a0);border-color:var(--a1);color:#c0f0d8;}
body.mode-light .os-prog-step.prog-current{background:var(--a0);color:#c0f0d8;}
body.mode-light .fluxo-period-btn.active{background:var(--a0);border-color:var(--a1);color:#c0f0d8;}
body.mode-midnight .bkpi-card{background:var(--panel);border-color:var(--edge);}
body.mode-grafite .user-pill:hover{background:var(--aGlow2);border-color:rgba(255,140,66,0.1);}
body.mode-grafite .dropdown-user:hover{background:rgba(255,140,66,0.08);}
body.mode-grafite .rel-card:hover{border-color:rgba(255,140,66,0.30);}
body.mode-grafite .kpi:hover{border-color:rgba(255,140,66,0.22);}
body.mode-grafite .kpi{border-color:rgba(255,140,66,0.05);}
body.mode-grafite .card{border-color:rgba(255,140,66,0.05);}
body.mode-grafite .os-ticket{border-color:var(--rim) !important;}
body.mode-grafite .os-ticket:hover{background:rgba(255,140,66,0.04) !important;border-color:rgba(255,140,66,0.12) !important;}
body.mode-grafite .prog{background:var(--aGlow2);}
body.mode-grafite .prod-card:hover{border-color:rgba(255,140,66,0.35);}
body.mode-grafite .login-screen::before{background:radial-gradient(ellipse 90% 60% at 50% 30%,rgba(255,140,66,0.07) 0%,transparent 70%);}
body.mode-grafite .tbl tbody tr:hover{background:rgba(255,140,66,0.03) !important;}
body.mode-grafite .tbl tbody tr{border-bottom-color:rgba(255,140,66,0.05) !important;}
body.mode-grafite .modal-head{border-bottom-color:rgba(255,140,66,0.10) !important;}
body.mode-grafite .fi:focus{border-color:rgba(255,140,66,0.4) !important;box-shadow:0 0 0 3px rgba(255,140,66,0.08) !important;}
body.mode-grafite .sb{border-right-color:var(--aGlow2);}
body.mode-grafite .topbar{border-bottom-color:var(--aGlow2);}
body.mode-grafite .tab.active{background:rgba(255,140,66,0.08);border-color:rgba(255,140,66,0.2);}
body.mode-grafite .sb-group-label{color:var(--dim);}
body.mode-grafite .card-head{border-bottom-color:var(--edge);}
body.mode-grafite .sec-head{border-bottom-color:var(--edge);}
body.mode-grafite .modal-head{border-bottom-color:var(--edge) !important;}
body.mode-grafite .modal{background:var(--panel) !important;border-color:rgba(255,140,66,0.12);}
body.mode-grafite .overlay{background:rgba(0,0,0,0.85) !important;}
body.mode-grafite .topbar-div{background:var(--edge);}
body.mode-grafite .topbar-saldo{color:var(--a3);}
body.mode-grafite .kpi-label{color:var(--ghost);}
body.mode-grafite .kpi-val{color:var(--bright);}
body.mode-grafite .kpi-sub{color:var(--dim);}
body.mode-grafite .card-title{color:var(--dim);}
body.mode-grafite .btn-ghost{border-color:var(--edge);color:var(--dim);}
body.mode-grafite .btn-ghost:hover{background:var(--raised);color:var(--body);}
body.mode-grafite .tab{border-color:var(--edge);}
body.mode-grafite .tbl thead th{background:var(--surface) !important;color:var(--ghost) !important;border-bottom-color:var(--edge) !important;}
body.mode-grafite .tbl tbody tr{border-bottom-color:var(--edge) !important;}
body.mode-grafite .fi{background:var(--ink) !important;border-color:var(--rim) !important;}
body.mode-grafite .search-bar{background:var(--deep) !important;border-color:var(--edge) !important;}
body.mode-grafite .cc-bar{background:var(--raised);}
body.mode-grafite .prog{background:var(--raised);}
body.mode-grafite .login-card{background:var(--panel);border-color:var(--edge);}
body.mode-grafite .dropdown-user{color:var(--body);border-bottom-color:var(--edge);}
body.mode-grafite .dropdown-user:hover{background:var(--raised);}
body.mode-grafite .dash-card{border-color:var(--edge) !important;}
body.mode-grafite .os-kanban .os-col{background:var(--deep);border-color:var(--edge);}
body.mode-grafite .user-pill:hover{background:var(--raised);border-color:var(--edge);}
body.mode-grafite .user-dropdown{background:var(--panel);border-color:var(--edge);}
body.mode-grafite .bkpi-card{background:var(--panel);border-color:var(--edge);}
body.mode-grafite .bkpi-card:hover{border-color:rgba(255,140,66,0.20);}
body.mode-grafite .bkpi-badge{background:rgba(255,140,66,0.08);color:var(--a3);border-color:var(--aGlow);}
body.mode-grafite .mod-card.active{border-color:rgba(255,140,66,0.20);}
body.mode-grafite .mod-card:hover:not(.disabled){border-color:var(--aGlow);}
body.mode-grafite .mod-card.active .mod-tog{background:var(--aGlow);border-color:var(--a3);}
body.mode-grafite .theme-mode-btn.active{color:var(--a3);background:var(--a0);border-color:var(--a3) !important;}
body.mode-grafite .price-block{background:var(--deep);border-color:rgba(255,140,66,0.08);}
body.mode-grafite .info-block{background:var(--deep);border-color:rgba(255,140,66,0.08);}
body.mode-grafite .btn-group{background:var(--deep);border-color:rgba(255,140,66,0.08);}
body.mode-grafite .sec-title{color:var(--ghost) !important;}
body.mode-grafite ::-webkit-scrollbar-thumb{background:var(--aGlow);}
body.mode-grafite ::-webkit-scrollbar-thumb:hover{background:rgba(255,140,66,0.30);}
body.mode-grafite .m-bn-item.act{background:rgba(255,140,66,0.10);}
body.mode-grafite .m-bn-item.act .m-bn-label{color:var(--a3);}
body.mode-grafite .m-bottomnav{border-top-color:var(--aGlow2);}
body.mode-grafite .m-topbar-mob{border-bottom-color:var(--aGlow2);}
/* === FOOTER MODAL OS DETAIL === */
.os-detail-foot{flex-direction:column !important;gap:8px !important;padding-top:14px !important;}
.os-detail-foot-main{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;}
.os-detail-foot-danger{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;}
.os-detail-btn{justify-content:center !important;width:100% !important;font-size:12px !important;padding:9px 6px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* === BUSCA GLOBAL MOBILE === */
.mob-search-mode{display:flex;align-items:center;gap:8px;flex:1;padding:0 4px;}
.mob-search-wrap{display:flex;align-items:center;gap:8px;flex:1;background:var(--raised);border:1px solid var(--a2);border-radius:var(--r-md);padding:0 12px;height:38px;box-shadow:0 0 0 3px var(--aGlow);transition:border-color 0.15s,box-shadow 0.15s;}
.mob-search-input{background:none !important;border:none !important;outline:none;color:var(--bright);font-size:15px;font-family:var(--ff-body);width:100%;height:100%;}
.mob-search-input::placeholder{color:var(--dim);}
.mob-search-result-group{font-family:var(--ff-mono);font-size:9px;font-weight:700;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase;padding:10px 16px 4px;background:var(--deep);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:1;}
.mob-search-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--edge);transition:background 0.1s;touch-action:manipulation;}
.mob-search-item:active{background:var(--raised);}
.mob-search-item-icon{font-size:20px;width:36px;height:36px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mob-search-item-body{flex:1;min-width:0;}
.mob-search-item-label{font-size:13px;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mob-search-item-sub{font-size:11px;color:var(--ghost);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mob-search-item-arrow{font-size:14px;color:var(--a3);flex-shrink:0;}
.mob-search-empty{padding:36px 16px;text-align:center;color:var(--muted);font-size:13px;}
.mob-search-hl{color:var(--a3);font-weight:700;}
@keyframes mobSearchSlideIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
body.mode-grafite .m-mais-item:active{background:var(--aGlow2);}
body.mode-grafite .m-mais-chev{color:var(--muted);}
body.mode-grafite .os-card-mob{border-color:var(--aGlow2);}
body.mode-grafite .os-card-mob:active{background:var(--raised);}
body.mode-grafite .os-card-mob-adv{border-color:var(--a2);background:var(--a0);color:var(--a3);}
body.mode-grafite .os-card-mob-adv:active{background:var(--a1);}
body.mode-grafite .pdv-tab.active{color:var(--a3);border-bottom-color:var(--a3);}
body.mode-grafite #pdvTabBar{border-bottom-color:var(--aGlow2);}
body.mode-grafite .pdv-tab-badge{background:var(--a3);}
body.mode-grafite #pdvCartFloatBar button,body.mode-grafite #mobCartPayBtn{background:var(--a3);color:#000;}
.dash-card .card-title{font-size:11px !important;letter-spacing:1.8px !important;color:var(--dim) !important;}
.dash-card .card-head{padding-bottom:12px;margin-bottom:14px;}
#dashSaldo{font-size:26px !important;}
.dash-card .prog{height:6px;}
#dashOSStatusInfo{gap:0 !important;flex-direction:column !important;margin-top:12px !important;}
#chartOSStatus{height:160px !important;}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:6px;}
.mod-card{background:var(--deep);border:0.5px solid var(--edge);border-radius:11px;padding:14px 15px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .2s,background .2s;position:relative;overflow:hidden;user-select:none;}
.mod-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a3);border-radius:11px 11px 0 0;opacity:0;transition:opacity .2s;}
.mod-card.active{background:var(--surface);border-color:rgba(255,140,66,.2);}
.mod-card.active::before{opacity:1;}
.mod-card:hover:not(.disabled){border-color:rgba(255,140,66,.15);}
.mod-card.disabled{opacity:.45;cursor:not-allowed;}
.mod-card-icon{font-size:20px;flex-shrink:0;line-height:1;}
.mod-card-info{flex:1;min-width:0;}
.mod-card-name{font-size:12px;font-weight:600;color:var(--bright);overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;line-height:1.3;}
.mod-card-desc{font-size:11px;color:var(--dim);line-height:1.3;}
.mod-card.active .mod-tog{width:30px;height:17px;background:var(--raised);border:0.5px solid var(--rim);border-radius:99px;flex-shrink:0;position:relative;transition:all .2s;}
.mod-tog::after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:var(--dim);top:2.5px;left:2.5px;transition:all .2s;}
.mod-card.active .mod-tog{background:rgba(255,140,66,.15);border-color:var(--a3);}
.mod-card.active .mod-tog::after{left:16.5px;background:var(--a3);}
.mod-section-label{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);margin:14px 0 7px;}
.mod-section-label:first-child{margin-top:0;}
.mod-badge-soon{font-family:var(--ff-mono);font-size:8px;padding:1px 6px;border-radius:99px;background:rgba(255,179,0,.1);color:var(--warn);border:0.5px solid rgba(255,179,0,.2);flex-shrink:0;}
@media print{#reciboWrapper{background:#fff !important;color:#000 !important;}#reciboWrapper *{color:inherit !important;}}
.cmr-list{display:flex;flex-direction:column;gap:0;border:0.5px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;}
.cmr-row{display:grid;grid-template-columns:48px 1fr 28px 1fr;align-items:center;gap:0;border-bottom:0.5px solid var(--edge);transition:background 0.12s;}
.cmr-row:last-child{border-bottom:none;}
.cmr-row:hover{background:var(--surface);}
.cmr-icon-wrap{display:flex;align-items:center;justify-content:center;height:48px;background:var(--deep);border-right:0.5px solid var(--edge);flex-shrink:0;}
.cmr-icon{font-size:18px;line-height:1;display:block;}
.cmr-default{padding:0 12px;font-size:13px;color:var(--body);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmr-arrow{text-align:center;font-size:12px;color:var(--a3);opacity:0.6;flex-shrink:0;}
.cmr-input{border:none !important;border-left:0.5px solid var(--edge) !important;border-radius:0 !important;background:var(--raised) !important;height:48px;padding:0 12px;font-size:13px;box-shadow:none !important;}
.cmr-input:focus{background:var(--surface) !important;border-color:var(--a3) !important;box-shadow:none !important;outline:none;}
.cmr-input::placeholder{color:var(--muted);font-style:italic;}
body.mode-light .cmr-icon-wrap{background:var(--deep);border-right-color:var(--edge);}
body.mode-light .cmr-default{color:var(--body);}
body.mode-light .cmr-input{background:var(--raised) !important;color:var(--bright);}
body.mode-light .cmr-input:focus{background:var(--panel) !important;}
.biz-cards{display:flex;flex-direction:column;gap:0;border:0.5px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;}
.biz-card{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;border-bottom:0.5px solid var(--edge);transition:background 0.14s;background:var(--panel);user-select:none;}
.biz-card:last-child{border-bottom:none;}
.biz-card:hover{background:var(--surface);}
.biz-card:hover .biz-card-arrow{color:var(--a3);transform:translateX(3px);}
.biz-card-icon{font-size:22px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r-md);flex-shrink:0;}
.biz-card-info{flex:1;min-width:0;}
.biz-card-title{font-size:14px;font-weight:600;color:var(--bright);margin-bottom:3px;}
.biz-card-sub{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz-card-arrow{font-size:20px;color:var(--muted);transition:color 0.14s,transform 0.14s;flex-shrink:0;line-height:1;}
.biz-panel{border:0.5px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);animation:bizPanelIn 0.18s ease;}
@keyframes bizPanelIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
.biz-panel-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:0.5px solid var(--edge);background:var(--deep);}
.biz-back-btn{background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r-md);color:var(--body);font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;transition:all 0.13s;flex-shrink:0;}
.biz-back-btn:hover{border-color:var(--a3);color:var(--a3);}
.biz-panel-title{flex:1;font-size:14px;font-weight:700;color:var(--white);}
.biz-fields{padding:20px 18px;display:flex;flex-direction:column;gap:16px;}
.biz-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px;}
.biz-type-card{display:flex;flex-direction:column;align-items:center;padding:12px 8px 10px;border-radius:var(--r-md);border:1.5px solid var(--edge);background:var(--raised);cursor:pointer;transition:all 0.14s;text-align:center;gap:4px;}
.biz-type-card:hover{border-color:var(--a3);background:var(--surface);transform:translateY(-1px);}
.biz-type-card.sel{border-color:var(--a3);background:var(--a0);box-shadow:0 0 0 3px rgba(255,140,66,0.10);}
.biz-type-em{font-size:22px;line-height:1;display:block;}
.biz-type-nm{font-size:11px;font-weight:700;color:var(--bright);display:block;}
.biz-type-sub{font-size:10px;color:var(--dim);display:block;line-height:1.2;}
.biz-type-card.sel .biz-type-nm{color:var(--a4);}
.biz-type-card.sel .biz-type-sub{color:var(--a3);opacity:0.7;}
body.mode-light .biz-card{background:var(--panel);}
body.mode-light .biz-card:hover{background:var(--surface);}
body.mode-light .biz-card-icon{background:var(--surface);border-color:var(--edge);}
body.mode-light .biz-type-card{background:var(--surface);border-color:var(--edge);}
body.mode-light .biz-type-card.sel{background:rgba(0,136,194,0.08);border-color:var(--a3);}
body.mode-light .biz-panel-head{background:var(--deep);}
.os-empty-col{text-align:center;padding:20px;color:var(--muted);font-size:11px;}
.os-advance-done{cursor:default;opacity:0.3;}
.os-ticket-foot{display:flex;justify-content:space-between;align-items:center;}
.os-ticket-actions{display:flex;align-items:center;gap:5px;}
.os-ticket-prazo{font-size:9px;color:var(--dim);}
.os-cancel-btn{background:rgba(255,179,0,0.08) !important;border-color:rgba(255,179,0,0.3) !important;color:var(--warn) !important;}.os-cancel-btn:hover{background:var(--warn) !important;border-color:var(--warn) !important;color:#000 !important;box-shadow:0 3px 10px rgba(255,179,0,0.3) !important;}
.os-hist-title{margin-bottom:8px;margin-top:14px;}
.os-hist-list{display:flex;flex-direction:column;gap:4px;}
.os-hist-row{display:flex;align-items:center;gap:8px;font-size:11px;}
.os-hist-icon{font-size:13px;flex-shrink:0;}
.os-hist-badge{font-size:8px;}
.os-hist-date{color:var(--dim);font-family:var(--ff-mono);font-size:10px;}
.os-hist-user{color:var(--ghost);}
.lanc-row{display:grid;grid-template-columns:var(--cols-contas);gap:0;padding:11px 16px;border-bottom:1px solid rgba(31,47,68,0.4);align-items:center;transition:background 0.1s;cursor:pointer;position:relative;}
.lanc-row:hover{background:var(--surface);}
.lanc-data{font-family:var(--ff-mono);font-size:10px;color:var(--dim);}
.lanc-desc{font-size:12px;font-weight:600;color:var(--bright);}
.lanc-obs{font-size:10px;color:var(--dim);}
.lanc-cat{font-size:11px;color:var(--body);}
.lanc-pgto{font-size:11px;color:var(--dim);}
.lanc-val{text-align:right;font-family:var(--ff-mono);font-size:12px;font-weight:700;}
.lanc-val.entrada{color:var(--ok);}
.lanc-val.saida{color:var(--err);}
.lanc-actions{text-align:center;}
.hcaixa-row{display:grid;grid-template-columns:var(--cols-hcaixa);gap:0;padding:12px 16px;border-bottom:1px solid rgba(31,47,68,0.4);align-items:center;transition:background 0.1s;}
.hcaixa-row:hover{background:var(--surface);}
.hcaixa-data{font-family:var(--ff-mono);font-size:10px;color:var(--body);}
.hcaixa-oper{font-size:11px;color:var(--bright);font-weight:600;}
.hcaixa-hora{font-size:10px;color:var(--dim);}
.hcaixa-ent{text-align:right;font-family:var(--ff-mono);font-size:11px;color:var(--ok);}
.hcaixa-sai{text-align:right;font-family:var(--ff-mono);font-size:11px;color:var(--err);}
.hcaixa-saldo{text-align:right;font-family:var(--ff-mono);font-size:12px;font-weight:700;}
.hcaixa-status{text-align:center;}
.atk-row{display:grid;grid-template-columns:var(--cols-atk);gap:0;padding:13px 16px;border-bottom:1px solid rgba(31,47,68,0.4);align-items:center;transition:background 0.1s;}
.atk-row:hover{background:var(--surface);}
/* [S40-V2] Header da grade de pedidos — antes era um <div style="..."> com
   grid duplicado e era escondido em mobile via seletor frágil
   [style*="90px"] que casava qualquer coisa. */
.atk-row-head{display:grid;grid-template-columns:var(--cols-atk);gap:0;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--edge);}
.atk-row-head>.card-title{overflow:hidden;min-width:0;white-space:nowrap;}
.atk-col{overflow:hidden;min-width:0;}
.atk-col-r{overflow:hidden;min-width:0;text-align:right;padding-right:8px;}
.atk-col-l{overflow:hidden;min-width:0;padding-left:8px;}
.atk-col-c{overflow:hidden;min-width:0;text-align:center;}
.atk-col-act{display:flex;gap:4px;justify-content:center;flex-shrink:0;}
.atk-id{font-family:var(--ff-mono);font-size:11px;color:var(--a4);font-weight:700;white-space:nowrap;}
.atk-data{font-size:9px;color:var(--dim);}
.atk-lojista{font-size:12px;font-weight:700;color:var(--bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.atk-itens{font-size:10px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.atk-valor{font-family:var(--ff-mono);font-size:13px;font-weight:700;color:var(--a5);white-space:nowrap;}
.atk-desc{font-size:9px;color:var(--err);}
.atk-pgto-txt{font-size:11px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.forn-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-lg);transition:all 0.15s;cursor:pointer;}
.forn-card:hover{border-color:var(--rim);}
.forn-icon{width:40px;height:40px;background:var(--raised);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.forn-info{flex:1;}
.forn-nome{font-size:13px;font-weight:700;color:var(--bright);}
.forn-sub{font-size:10px;color:var(--dim);margin-top:2px;}
.forn-end{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.dash-chart-wrap{display:flex;gap:20px;align-items:center;}
.dash-chart-canvas{position:relative;height:260px;width:260px;flex-shrink:0;}
.dash-chart-legend{flex:1;display:flex;flex-direction:column;gap:12px;}
.dash-os-list{display:flex;flex-direction:column;gap:8px;}
.dash-os-status-canvas{position:relative;height:180px;}
.dash-os-status-info{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
.dash-critico-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.dash-fin-list{display:flex;flex-direction:column;gap:6px;}
.dash-fin-saldo{background:var(--raised);border-radius:var(--r-md);padding:12px;margin-top:10px;display:flex;justify-content:space-between;align-items:center;}
.dash-fin-saldo-lbl{font-size:13px;color:var(--ghost);}
.dash-equipe-list{display:flex;flex-direction:column;gap:10px;}
.dash-top-list{display:flex;flex-direction:column;gap:8px;}
.dash-saldo-val{font-size:22px;font-weight:700;}
.dash-top-list{display:flex;flex-direction:column;gap:8px;}
.conta-row{display:grid;grid-template-columns:var(--cols-cont-pay);gap:0;padding:12px 16px;border-bottom:1px solid rgba(31,47,68,0.4);align-items:center;transition:background 0.1s;}
.conta-row:hover{background:var(--surface);}
.conta-row.paga{opacity:0.6;}
.conta-desc{font-size:12px;font-weight:700;color:var(--bright);}
.conta-sub{font-size:9px;color:var(--dim);margin-top:2px;}
.conta-cat{font-size:11px;color:var(--ghost);}
.conta-val{text-align:right;font-family:var(--ff-mono);font-size:13px;font-weight:700;color:var(--bright);}
.conta-val.paga{color:var(--dim);}
.conta-venc{text-align:center;}
.conta-venc-data{font-size:11px;color:var(--body);}
.conta-pgto-data{font-size:9px;color:var(--ok);}
.conta-status{text-align:center;}
.conta-actions{display:flex;gap:4px;justify-content:center;align-items:center;}
@media (max-width:1280px){.os-kanban{grid-template-columns:repeat(4,minmax(180px,1fr));} #bkpiRow{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;} }@media (max-width:1024px){.prod-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));} .os-kanban{grid-template-columns:repeat(4,minmax(160px,1fr));overflow-x:auto;} .topbar-saldo,.topbar-saldo-label,.topbar-div{display:none;} #globalSearch{max-width:180px;} .lanc-row{grid-template-columns:90px 1fr 110px 90px 80px 60px;} .hcaixa-row{grid-template-columns:80px 80px 1fr 90px 90px 90px 70px;} .atk-row{grid-template-columns:70px 1fr 110px 110px 90px 110px 80px;} .conta-row{grid-template-columns:1fr 100px 100px 90px 80px 110px;} #bkpiRow{grid-template-columns:repeat(3,1fr) !important;} }@media (max-width:900px){.pdv-wrap{height:auto;min-height:calc(100vh - var(--topbar-h) - 40px);} .prod-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));} .os-kanban{grid-template-columns:repeat(4,minmax(150px,1fr));} .topbar-breadcrumb{display:none;} #bkpiRow{grid-template-columns:repeat(2,1fr) !important;} .g24{grid-template-columns:1fr;} .g42{grid-template-columns:1fr;} .modal-lg{width:calc(100vw - 24px) !important;} .modal-xl{width:calc(100vw - 24px) !important;} }
.txt-muted{font-size:11px;color:var(--dim);}
.txt-tiny{color:var(--dim);font-size:9px;}
.es{display:none;padding:40px;text-align:center;color:var(--muted);font-size:12px;}
.es-sm{display:none;padding:24px;text-align:center;color:var(--muted);font-size:12px;}
.txt-heading{font-size:14px;font-weight:700;color:var(--white);}
.txt-semi{font-size:13px;font-weight:600;color:var(--bright);}
.label-mono{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.row-8{display:flex;align-items:center;gap:8px;}
.row-wrap{display:flex;gap:8px;flex-wrap:wrap;}
.row-6{display:flex;gap:6px;}
.row-4{display:flex;gap:4px;}.row-8b{display:flex;gap:8px;}.row-10{display:flex;gap:10px;}.row-12{display:flex;gap:12px;}
.row-c4{display:flex;align-items:center;gap:4px;}.row-c6{display:flex;align-items:center;gap:6px;}.row-c7{display:flex;align-items:center;gap:7px;}.row-c10{display:flex;align-items:center;gap:10px;}
.row-c8m12{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.row-gap8{gap:8px;}
.col-6{display:flex;flex-direction:column;gap:6px;}.col-8{display:flex;flex-direction:column;gap:8px;}.col-10{display:flex;flex-direction:column;gap:10px;}.col-14{display:flex;flex-direction:column;gap:14px;}
.row-sb{display:flex;align-items:center;justify-content:space-between;}
.row-sb14{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.row-sb10{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px;}
.row-sb5{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.lbl-dim{font-size:10px;color:var(--dim);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:5px;}
.lbl-ghost{font-size:10px;color:var(--ghost);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px;}
.sec-mono{font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--a3);margin:20px 0 8px;}
.card-np{padding:0;overflow:hidden;}
.f1-mn{flex:1;min-width:0;}

/* ── Painel Admin ─────────────────────────────────────────────────── */
.adm-wrap{padding:20px 24px 0}
.adm-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.adm-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adm-filters input{width:200px;font-size:13px;padding:8px 12px}
.adm-filters select{font-size:13px;padding:8px 10px;width:auto}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.adm-kpi{background:var(--surface);border:1px solid var(--rim);border-radius:12px;padding:12px 14px}
.adm-kpi-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.adm-kpi-val{font-size:22px;font-weight:800}
.adm-alert{display:none;margin:0 0 14px;background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.3);border-radius:10px;padding:10px 14px;align-items:center;justify-content:space-between;gap:10px}
.adm-tabs{display:flex;gap:0;border-bottom:1px solid var(--rim);padding:0 24px}
.adm-tab{font-size:12px;font-weight:700;padding:10px 16px;cursor:pointer;color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px;text-transform:uppercase;letter-spacing:.3px}
.adm-tab.active{color:var(--bright);border-bottom-color:var(--a3)}
.adm-bulk-bar{display:none;position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--rim);padding:8px 24px;align-items:center;gap:10px}
.adm-table-wrap{padding:0 24px 8px;overflow-x:auto}
.adm-pagination{display:flex;align-items:center;justify-content:space-between;padding:6px 24px 20px;color:var(--dim);font-size:12px}
.adm-cards{display:none;padding:0 16px 24px;flex-direction:column;gap:10px}
.adm-card{background:var(--surface);border:1px solid var(--rim);border-radius:14px;padding:14px 16px}
.adm-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.adm-card-nome{font-size:14px;font-weight:800;color:var(--bright)}
.adm-card-email{font-size:11px;color:var(--dim);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.adm-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.adm-card-meta span{font-size:11px;color:var(--dim);background:var(--raised);border-radius:6px;padding:3px 8px}
.adm-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.adm-card-actions button{padding:7px 12px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer}
.adm-view{padding:20px 24px 28px}
.adm-view h3{font-size:14px;font-weight:800;color:var(--bright);margin:0 0 14px}
@media(max-width:640px){
  .adm-wrap{padding:14px 14px 0}
  .adm-header{flex-direction:column;align-items:stretch}
  .adm-filters{flex-direction:column;align-items:stretch}
  .adm-filters input,.adm-filters select,.adm-filters button{width:100%;box-sizing:border-box}
  .adm-kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .adm-kpi-val{font-size:18px}
  .adm-table-wrap,.adm-pagination{display:none}
  .adm-cards{display:flex}
}

/* ── OS Stepper (detalhe da OS) ───────────────────────────────────── */
.os-stepper{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;margin-bottom:18px}
.os-step-node{width:36px;height:36px;border-radius:50%;background:var(--raised);border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;z-index:1;transition:all .2s;cursor:pointer}
.os-step-icon{font-size:16px;line-height:1}
.os-step-line{position:absolute;top:18px;left:50%;width:100%;height:2px;background:var(--edge);z-index:0;transition:background .2s}
.os-step-label{margin-top:6px;font-size:11px;color:var(--dim);white-space:nowrap;text-align:center;font-weight:600;transition:color .2s}
.os-step-last .os-step-line{display:none}
.os-step.active .os-step-node{background:var(--a3);border-color:var(--a3)}
.os-step.active .os-step-icon{filter:brightness(0)}
.os-step.active .os-step-label{color:var(--a3)}
.os-step.done .os-step-node{background:var(--ok);border-color:var(--ok)}
.os-step.done .os-step-line{background:var(--ok)}
.os-step.done .os-step-label{color:var(--ok)}

/* ── ONBOARDING CSS — REMOVIDO (Sessão 7 bugfix) ──
   Este bloco (.ob-screen, .ob-topbar, .ob-body, .ob-card, .ob-logo, etc.)
   pertencia a uma versão anterior do wizard de configuração inicial.
   A versão atual usa <style> interno em #obScreen (app.html, linhas ~5941-5974)
   com estrutura flex-column simplificada. As classes colidiam (especialmente
   .ob-logo herdando font-family: var(--ff-mono) para filhos sem override),
   causando texto verde monoespaçado fora do card na primeira configuração.
   Removido em 2026-04-20. */

/* ── BARRA DE ATALHOS (s55) ── */
.dash-shortcuts{display:flex;align-items:center;gap:8px;background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:10px 14px;margin-bottom:14px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;}
.dash-shortcuts::-webkit-scrollbar{display:none;}
.sc-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0;}
.sc-div{width:0.5px;height:24px;background:var(--edge);flex-shrink:0;margin:0 2px;}
.sc-btn{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-lg);border:0.5px solid var(--edge);background:var(--surface);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color .15s,background .15s;}
.sc-btn:hover{border-color:var(--rim);background:var(--raised);}
.sc-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.sc-text{display:flex;flex-direction:column;gap:1px;}
.sc-main{font-size:12px;font-weight:700;color:var(--bright);}
.sc-sub{font-size:10px;color:var(--ghost);}
.sc-kbd{font-size:9px;color:var(--dim);background:var(--raised);border:0.5px solid var(--rim);border-radius:4px;padding:1px 5px;font-family:var(--ff-mono);margin-left:6px;flex-shrink:0;}
.sc-caixa-btn.caixa-open{border-color:rgba(77,219,143,0.2);background:var(--okBg);}
.sc-caixa-btn.caixa-open:hover{border-color:rgba(77,219,143,0.4);}
.sc-caixa-btn.caixa-open .sc-main{color:var(--ok);}
.sc-caixa-btn.caixa-closed{border-color:rgba(255,71,87,0.2);background:var(--errBg);}
.sc-caixa-btn.caixa-closed:hover{border-color:rgba(255,71,87,0.4);}
.sc-caixa-btn.caixa-closed .sc-main{color:var(--err);}
@media(max-width:768px){.dash-shortcuts{padding:8px 12px;gap:6px;} .sc-sub,.sc-kbd{display:none;} .sc-btn{padding:7px 12px;gap:6px;} .sc-label{display:none;} .sc-div{display:none;}}

/* ── SPARKLINES + TREND (s55) ── */
.bkpi-spark{display:block;width:100%;height:40px;margin:10px 0 6px;opacity:.75;}
.bkpi-trend{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;white-space:nowrap;}
.bkpi-trend.up{color:var(--ok);background:var(--okBg);}
.bkpi-trend.dn{color:var(--err);background:var(--errBg);}
.bkpi-trend.eq{color:var(--ghost);background:var(--surface);}
.bkpi-vs{font-size:10px;color:var(--ghost);}

/* ── PÓS VENDA REDESIGN (s55) ── */
.pv-tab-bar{display:flex;gap:3px;background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:4px;margin-bottom:18px;}
.pv-tab-item{flex:1;text-align:center;padding:9px 16px;border-radius:var(--r-lg);font-size:12px;font-weight:700;color:var(--ghost);cursor:pointer;transition:all .15s;}
.pv-tab-item.active{background:var(--surface);color:var(--bright);border:0.5px solid var(--edge);}
/* ═══════════════════════════════════════════════════════════════════════
   [S34] Pós Venda — Shell unificado
   Container único que envolve tabs, KPIs, variáveis e grid de campanhas.
   Visual coeso e premium, sobrescreve estilos legacy via especificidade.
   ═══════════════════════════════════════════════════════════════════════ */

.pv-shell{
  background:var(--panel);
  border:0.5px solid var(--edge);
  border-radius:var(--r-xl);
  padding:6px 6px 18px;
  margin-bottom:16px;
  overflow:hidden;
}

/* Tabs internas (segmented control) */
.pv-shell-tabs{
  display:flex;
  gap:4px;
  background:var(--deep);
  border-radius:var(--r-lg);
  padding:5px;
  margin-bottom:18px;
}
.pv-shell-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--r-md);
  font-size:13px;
  font-weight:600;
  color:var(--dim);
  cursor:pointer;
  transition:background .15s,color .15s;
  user-select:none;
}
.pv-shell-tab:hover{color:var(--body);}
.pv-shell-tab.active{
  background:var(--surface);
  color:var(--bright);
  box-shadow:0 1px 0 0 rgba(0,0,0,0.2);
}
.pv-shell-tab-icon{font-size:14px;line-height:1;}

/* Pane (conteúdo de cada tab) */
.pv-shell-pane{padding:0 14px;}

/* KPIs — agora com fundo deep (contrasta com panel do shell) */
.pv-shell .pv-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.pv-shell .pv-kpi{
  background:var(--deep);
  border:0.5px solid var(--edge);
  border-radius:var(--r-md);
  padding:12px 16px;
}
.pv-shell .pv-kpi-label{
  font-size:10px;
  color:var(--ghost);
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:4px;
}
.pv-shell .pv-kpi-val{
  font-size:22px;
  font-weight:700;
  color:var(--bright);
  font-family:var(--ff-mono);
  line-height:1.1;
}
.pv-shell .pv-kpi-val-sm{
  font-size:13px;
  font-weight:600;
  font-family:var(--ff-body);
  color:var(--body);
  padding-top:4px;
}

/* Variáveis — linha discreta dentro do shell */
.pv-shell .pv-vars-bar{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--deep);
  border:0.5px solid var(--edge);
  border-radius:var(--r-md);
  padding:8px 14px;
  margin-bottom:14px;
}
.pv-shell .pv-vars-label{
  font-size:9px;
  font-weight:700;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:1px;
  white-space:nowrap;
  flex-shrink:0;
}
.pv-shell .pv-vars-chips{display:flex;flex-wrap:wrap;gap:5px;}
.pv-shell .pv-var{
  font-family:var(--ff-mono);
  font-size:10px;
  background:transparent;
  color:var(--ghost);
  border:0.5px solid var(--rim);
  border-radius:4px;
  padding:2px 7px;
}

/* Grid de cards */
.pv-shell .pv-camp-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:0;
}

/* Cards — mais respiro, footer com separação clara */
.pv-shell .pv-card{
  background:var(--surface);
  border:0.5px solid var(--edge);
  border-radius:var(--r-lg);
  padding:18px 20px 16px;
  cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:148px;
}
.pv-shell .pv-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:transparent;
  transition:background .15s;
}
.pv-shell .pv-card:hover{border-color:var(--rim);background:var(--raised);}
.pv-shell .pv-card:hover::before{background:var(--rim);}
.pv-shell .pv-card.pv-open{
  border-color:var(--a3);
  background:var(--raised);
}
.pv-shell .pv-card.pv-open::before{background:var(--a3);height:2px;}
.pv-shell .pv-card-chev{
  position:absolute;
  top:14px;right:14px;
  font-size:11px;
  color:var(--dim);
  transition:transform .2s;
}
.pv-shell .pv-card.pv-open .pv-card-chev{
  transform:rotate(180deg);
  color:var(--a3);
}
.pv-shell .pv-card-emoji{
  font-size:22px;
  display:block;
  line-height:1;
  margin-bottom:10px;
}
.pv-shell .pv-card-name{
  font-size:13px;
  font-weight:700;
  color:var(--bright);
  margin-bottom:4px;
}
.pv-shell .pv-card-desc{
  font-size:11px;
  color:var(--ghost);
  line-height:1.35;
}
.pv-shell .pv-card-badges{
  display:flex;
  gap:5px;
  margin-top:10px;
}
.pv-shell .pv-bwа,
.pv-shell .pv-bem{
  font-size:9px;
  font-weight:600;
  padding:2px 7px;
  border-radius:4px;
  background:transparent;
  color:var(--ghost);
  border:0.5px solid var(--rim);
  letter-spacing:.4px;
}

/* Footer informativo */
.pv-shell .pv-card-foot{
  margin-top:12px;
  padding-top:10px;
  border-top:0.5px dashed var(--edge);
  font-size:11px;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  line-height:1.3;
}
.pv-shell .pv-foot-num{color:var(--bright);font-weight:600;}
.pv-shell .pv-foot-rel{color:var(--ghost);}
.pv-shell .pv-foot-sep{color:var(--rim);}
.pv-shell .pv-foot-pronta{color:var(--ghost);font-style:italic;font-size:10px;}

/* Estado rascunho — só elementos secundários esmaecidos. Título e ícone ficam vivos. */
.pv-shell .pv-card-rascunho .pv-card-emoji,
.pv-shell .pv-card-rascunho .pv-card-name{opacity:1;}
.pv-shell .pv-card-rascunho .pv-card-desc{opacity:.55;}
.pv-shell .pv-card-rascunho .pv-card-badges{opacity:.50;}
.pv-shell .pv-card-rascunho{opacity:1;}
/* Quando o card rascunho está aberto/selecionado, perde o esmaecimento */
.pv-shell .pv-card-rascunho.pv-open .pv-card-desc,
.pv-shell .pv-card-rascunho.pv-open .pv-card-badges{opacity:1;}
.pv-shell .pv-foot-rascunho{
  color:var(--ghost);
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:9px;
  font-weight:700;
}

/* Painel expandido — conectado visualmente ao shell e ao card aberto */
.pv-shell .pv-panel{
  display:none;
  grid-column:1/-1;
  background:var(--surface);
  border:0.5px solid var(--a3);
  border-radius:var(--r-lg);
  padding:20px 22px;
  margin-top:4px;
  position:relative;
  overflow:hidden;
}
.pv-shell .pv-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:var(--a3);
}
.pv-shell .pv-panel.pv-open{display:block;}
.pv-shell .pv-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:0.5px solid var(--edge);
}
.pv-shell .pv-panel-emoji{font-size:20px;}
.pv-shell .pv-panel-title{
  font-size:14px;
  font-weight:700;
  color:var(--bright);
}

/* [S34] Botões de ação do painel — pílulas modernas */
.pv-shell .pv-panel-actions{display:flex;gap:8px;align-items:center;}
.pv-shell .pv-btn-preview{
  padding:9px 18px;
  background:transparent;
  border:0.5px solid var(--rim);
  color:var(--body);
  font-size:12px;
  font-weight:500;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.pv-shell .pv-btn-preview:hover{
  background:var(--raised);
  border-color:var(--soft);
  color:var(--bright);
}
.pv-shell .pv-btn-wa{
  flex:1;
  padding:10px 18px;
  background:rgba(37,211,102,0.10);
  border:0.5px solid rgba(37,211,102,0.40);
  color:#3ddc84;
  font-size:12px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.pv-shell .pv-btn-wa:hover{
  background:rgba(37,211,102,0.18);
  border-color:rgba(37,211,102,0.60);
}
.pv-shell .pv-btn-em{
  flex:1;
  padding:10px 18px;
  background:rgba(96,160,240,0.10);
  border:0.5px solid rgba(96,160,240,0.35);
  color:var(--info);
  font-size:12px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.pv-shell .pv-btn-em:hover{
  background:rgba(96,160,240,0.18);
  border-color:rgba(96,160,240,0.55);
}

/* ── Regras legacy mantidas (usadas pela aba Garantias e fora do shell) ── */
.pv-vars-bar{display:flex;align-items:center;gap:8px;background:var(--surface);border:0.5px solid var(--edge);border-radius:var(--r-md);padding:6px 12px;margin-bottom:14px;}
.pv-vars-label{font-size:9px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;flex-shrink:0;}
.pv-vars-chips{display:flex;flex-wrap:wrap;gap:4px;}
.pv-var{font-family:var(--ff-mono);font-size:10px;background:transparent;color:var(--ghost);border:0.5px solid var(--edge);border-radius:3px;padding:1px 5px;}
.pv-camp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:8px;}
.pv-card{background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r3);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.pv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:transparent;transition:background .15s;}
.pv-card:hover{border-color:var(--rim);}
.pv-card:hover::before{background:var(--rim);}
.pv-card.pv-open{border-color:var(--rim);background:var(--surface);}
.pv-card.pv-open::before{background:var(--rim);height:2px;}
.pv-card-chev{position:absolute;top:10px;right:10px;font-size:11px;color:var(--dim);transition:transform .2s;}
.pv-card.pv-open .pv-card-chev{transform:rotate(180deg);color:var(--body);}
.pv-card-emoji{font-size:22px;display:block;line-height:1;margin-bottom:8px;}
.pv-card-name{font-size:12px;font-weight:700;color:var(--bright);margin-bottom:3px;}
.pv-card-desc{font-size:10px;color:var(--ghost);}
.pv-card-badges{display:flex;gap:4px;margin-top:8px;}
.pv-bwа{font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:transparent;color:var(--ghost);border:0.5px solid var(--rim);letter-spacing:.3px;}
.pv-bem{font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:transparent;color:var(--ghost);border:0.5px solid var(--rim);letter-spacing:.3px;}
.pv-card-foot{margin-top:10px;padding-top:8px;border-top:0.5px dashed var(--edge);font-size:10px;color:var(--dim);display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3;}
.pv-foot-num{color:var(--bright);font-weight:600;}
.pv-foot-rel{color:var(--ghost);}
.pv-foot-sep{color:var(--edge);}
.pv-foot-pronta{color:var(--ghost);font-style:italic;}
.pv-foot-rascunho{color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-size:9px;font-weight:700;}
.pv-card-rascunho{opacity:.62;}
.pv-card-rascunho:hover{opacity:.85;}
.pv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.pv-kpi{background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r-md);padding:10px 14px;}
.pv-kpi-label{font-size:10px;color:var(--ghost);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;}
.pv-kpi-val{font-size:20px;font-weight:700;color:var(--bright);font-family:var(--ff-mono);line-height:1.1;}
.pv-kpi-val-sm{font-size:13px;font-weight:600;font-family:var(--ff-body);color:var(--body);}
.pv-panel{display:none;grid-column:1/-1;background:var(--deep);border:0.5px solid var(--edge);border-radius:var(--r3);padding:18px 20px;margin-top:2px;}
.pv-panel.pv-open{display:block;}
.pv-panel-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:0.5px solid var(--edge);}
.pv-panel-emoji{font-size:18px;}
.pv-panel-title{font-size:13px;font-weight:700;color:var(--bright);}
.pv-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.pv-tpl-lbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:10px;font-weight:700;color:var(--ghost);text-transform:uppercase;letter-spacing:1px;}
.pv-ia-btn{font-size:10px;padding:2px 8px;background:var(--purpBg);border:0.5px solid rgba(179,136,255,0.3);color:var(--purp);border-radius:var(--r);cursor:pointer;white-space:nowrap;}
.pv-ia-btn:hover{background:rgba(179,136,255,0.18);}
.pv-ia-btn:disabled{opacity:.5;cursor:not-allowed;}
.pv-panel-actions{display:flex;gap:8px;}
.pv-btn-preview{padding:7px 14px;background:var(--surface);border:0.5px solid var(--edge);color:var(--body);font-size:11px;font-weight:600;border-radius:var(--r);cursor:pointer;white-space:nowrap;}
.pv-btn-preview:hover{border-color:var(--rim);}
.pv-btn-wa{flex:1;padding:7px 14px;background:rgba(37,211,102,0.1);border:0.5px solid rgba(37,211,102,0.3);color:#25d366;font-size:11px;font-weight:700;border-radius:var(--r);cursor:pointer;}
.pv-btn-wa:hover{background:rgba(37,211,102,0.18);}
.pv-btn-em{flex:1;padding:7px 14px;background:var(--tealBg);border:0.5px solid rgba(38,198,218,0.3);color:var(--teal);font-size:11px;font-weight:700;border-radius:var(--r);cursor:pointer;}
.pv-btn-em:hover{background:rgba(38,198,218,0.18);}
.pv-gar-cat{background:var(--surface);border:0.5px solid var(--edge);border-radius:var(--r2);padding:12px;}
.pv-gar-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pv-gar-cat-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0;}
.pv-gar-cat-name{font-size:12px;font-weight:700;color:var(--bright);flex:1;}
.pv-gar-cat-sel{font-size:11px;padding:4px 8px;height:30px;max-width:110px;background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r);color:var(--bright);outline:none;}

/* Responsivo */
@media(max-width:1024px){
  .pv-shell .pv-camp-grid,.pv-camp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  .pv-shell{padding:5px 5px 14px;}
  .pv-shell-pane{padding:0 8px;}
  .pv-shell .pv-kpis{grid-template-columns:1fr;}
  .pv-shell .pv-camp-grid,.pv-camp-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .pv-shell .pv-card{padding:14px 16px 12px;min-height:auto;}
  .pv-tpl-grid{grid-template-columns:1fr;}
  .pv-panel{padding:14px;}
  .pv-shell .pv-vars-bar,.pv-vars-bar{flex-direction:column;align-items:flex-start;gap:6px;}
  .pv-panel-actions{flex-wrap:wrap;}
  .pv-btn-wa,.pv-btn-em{flex:1 0 calc(50% - 4px);}
}

/* ── IA DE CONVERSÃO — CHAT (s55) ── */
#page-conversao.active{display:flex !important;flex-direction:column !important;padding:0 !important;gap:0 !important;height:calc(100vh - var(--topbar-h));overflow:hidden;}
#page-conversao .conv-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:0.5px solid var(--edge);background:var(--panel);flex-shrink:0;}
#page-conversao .conv-avatar-icon{width:34px;height:34px;border-radius:var(--r-md);background:var(--a0);border:0.5px solid var(--a1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
#page-conversao .conv-topbar-title{font-size:13px;font-weight:700;color:var(--bright);}
#page-conversao .conv-topbar-sub{font-size:10px;color:var(--ghost);margin-top:1px;}
#page-conversao .conv-tipo-group{display:flex;gap:3px;background:var(--surface);border:0.5px solid var(--edge);border-radius:99px;padding:3px;}
#page-conversao .conv-tipo-btn{padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;color:var(--ghost);transition:all .15s;}
#page-conversao .conv-tipo-btn.active{background:var(--a0);color:var(--a3);border:0.5px solid var(--a1);}
#page-conversao .conv-msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--deep);}
#page-conversao .conv-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:14px;padding:20px;text-align:center;}
#page-conversao .conv-welcome-icon{width:56px;height:56px;border-radius:var(--r-xl);background:var(--a0);border:0.5px solid var(--a1);display:flex;align-items:center;justify-content:center;font-size:26px;}
#page-conversao .conv-welcome-title{font-size:15px;font-weight:700;color:var(--bright);}
#page-conversao .conv-welcome-sub{font-size:12px;color:var(--ghost);line-height:1.7;max-width:360px;}
#page-conversao .conv-starters{display:flex;flex-direction:column;gap:6px;width:100%;max-width:460px;}
#page-conversao .conv-starter{padding:10px 14px;background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-lg);font-size:12px;color:var(--body);cursor:pointer;transition:all .15s;text-align:left;}
#page-conversao .conv-starter:hover{border-color:var(--a1);color:var(--bright);}
#page-conversao .conv-msg-row{display:flex;gap:8px;align-items:flex-end;}
#page-conversao .conv-msg-row.user{justify-content:flex-end;}
#page-conversao .conv-msg-avatar{width:26px;height:26px;border-radius:var(--r-sm);background:var(--a0);border:0.5px solid var(--a1);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
#page-conversao .conv-bubble{max-width:76%;padding:10px 14px;font-size:13px;line-height:1.65;}
#page-conversao .conv-bubble.ai{background:var(--panel);border:0.5px solid var(--edge);border-radius:14px 14px 14px 4px;color:var(--body);}
#page-conversao .conv-bubble.user{background:var(--a0);border:0.5px solid var(--a1);border-radius:14px 14px 4px 14px;color:var(--a4);}
#page-conversao .conv-bubble-meta{font-size:10px;color:var(--dim);margin-top:6px;display:flex;align-items:center;gap:6px;}
#page-conversao .conv-copy-btn{font-size:10px;padding:2px 8px;border-radius:99px;border:0.5px solid var(--edge);background:var(--surface);color:var(--ghost);cursor:pointer;transition:color .15s;}
#page-conversao .conv-copy-btn:hover{color:var(--body);}
#page-conversao .conv-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
#page-conversao .conv-sug{padding:5px 12px;background:var(--surface);border:0.5px solid var(--edge);border-radius:99px;font-size:11px;color:var(--body);cursor:pointer;transition:all .15s;white-space:nowrap;}
#page-conversao .conv-sug:hover{border-color:var(--a1);color:var(--a3);}
#page-conversao .conv-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--panel);border:0.5px solid var(--edge);border-radius:14px 14px 14px 4px;width:fit-content;}
#page-conversao .conv-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--ghost);animation:conv-tdot 1.2s ease-in-out infinite;}
#page-conversao .conv-typing-dot:nth-child(2){animation-delay:.2s;}
#page-conversao .conv-typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes conv-tdot{0%,60%,100%{opacity:.3;transform:scale(1);}30%{opacity:1;transform:scale(1.3);}}
#page-conversao .conv-input-bar{padding:10px 14px;border-top:0.5px solid var(--edge);background:var(--panel);flex-shrink:0;}
#page-conversao .conv-input-wrap{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:8px 10px;transition:border-color .15s;}
#page-conversao .conv-input-wrap:focus-within{border-color:var(--a1);}
#page-conversao .conv-input{flex:1;background:transparent;border:none;outline:none;color:var(--bright);font-size:13px;font-family:var(--ff-body);resize:none;min-height:20px;max-height:120px;line-height:1.6;}
#page-conversao .conv-input::placeholder{color:var(--ghost);}
#page-conversao .conv-send-btn{width:32px;height:32px;border-radius:var(--r-md);background:var(--a3);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:#000;font-weight:700;transition:opacity .15s;}
#page-conversao .conv-send-btn:hover{opacity:.85;}
#page-conversao .conv-send-btn:disabled{opacity:.4;cursor:not-allowed;}
#page-conversao .conv-input-hint{font-size:10px;color:var(--dim);margin-top:5px;text-align:center;}
@media(max-width:768px){#page-conversao.active{height:calc(100dvh - 64px);} #page-conversao .conv-topbar{flex-wrap:wrap;gap:8px;padding:10px 12px;} #page-conversao .conv-tipo-group{order:3;width:100%;justify-content:center;} #page-conversao .conv-bubble{max-width:88%;} #page-conversao .conv-msgs{padding:12px;} #page-conversao .conv-starters{max-width:100%;}}

/* ═══════════════════════════════════════
   REDESIGN S56 — ERP SaaS Dashboard
═══════════════════════════════════════ */

/* Topbar — novo estilo */
.topbar-brand{font-size:16px;font-weight:700;color:var(--bright);letter-spacing:-0.5px;white-space:nowrap;flex-shrink:0;}
.topbar-meta{font-size:11px;color:var(--dim);white-space:nowrap;flex-shrink:0;}
.topbar-nova-os{background:var(--a3) !important;color:#000 !important;border-color:var(--a3) !important;font-weight:700 !important;font-size:11px !important;width:auto !important;padding:0 12px !important;gap:4px !important;white-space:nowrap;}
.topbar-nova-os:hover{opacity:.85;}
.topbar-avatar{width:28px;height:28px;border-radius:50%;background:var(--a3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000;cursor:pointer;flex-shrink:0;transition:opacity .15s;}
.topbar-avatar:hover{opacity:.8;}

/* Sidebar — grupos com seções */
.sb-status-bar{display:flex;align-items:center;gap:6px;padding:6px 14px 8px;border-top:0.5px solid var(--edge);margin-top:4px;}
.sb-status-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.sb-status-dot.err{background:var(--err);}
.sb-status-dot.warn{background:var(--warn);}
.sb-status-txt{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Dashboard — barra de atalhos atualizada */
.dash-shortcuts{display:flex;align-items:center;gap:6px;background:var(--panel);border:0.5px solid var(--edge);border-radius:var(--r-xl);padding:8px 14px;margin-bottom:12px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;}
.dash-shortcuts::-webkit-scrollbar{display:none;}
.sc-sep{width:0.5px;height:20px;background:var(--edge);flex-shrink:0;margin:0 2px;}

/* KPI Grid 4 colunas */
.bkpi-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.bkpi-card-accent{border-top:2px solid var(--a3) !important;}
.bkpi-card-accent::before{display:none !important;}

/* Status bar desktop */
.dash-status-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 20px;background:var(--ink);border-top:0.5px solid var(--edge);font-size:10px;color:var(--dim);flex-shrink:0;}
.dsb-left,.dsb-right{display:flex;align-items:center;gap:6px;}
.dsb-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.dsb-dot.err{background:var(--err);}
.dsb-sep{color:var(--rim);}
@media(max-width:768px){.dash-status-bar{display:none;}}

/* Responsive KPI 4 */
@media(max-width:1280px){.bkpi-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.bkpi-grid-4{grid-template-columns:1fr 1fr;gap:8px;}}
@media(max-width:480px){.bkpi-grid-4{grid-template-columns:1fr;}}
.dsb-right{gap:4px;}
#dsbUserTxt{display:none;}
.dsb-right{gap:6px;}

/* Status bar — fixada no rodapé, só desktop */
.dash-status-bar{
  position:fixed;
  bottom:0;
  left:var(--sidebar-w);
  right:0;
  z-index:50;
  height:24px;
}
@media(max-width:768px){.dash-status-bar{display:none !important;}}
@media(min-width:769px){.content{padding-bottom:32px;}}

/* ═══════════════════════════════════════
   TEMA ERP — Cinza Profissional SaaS
═══════════════════════════════════════ */

/* Sidebar: mantém escuro independente do tema */
body.mode-erp .sb{background:var(--deep);border-right-color:rgba(0,0,0,0.08);}

/* Topbar ERP */
body.mode-erp .topbar{background:var(--ink);border-bottom-color:var(--edge);box-shadow:0 1px 0 var(--edge);}
body.mode-erp .topbar-brand{color:var(--bright);}
body.mode-erp .topbar-meta{color:var(--dim);}
body.mode-erp .topbar-saldo{color:var(--a3);}
body.mode-erp .topbar-div{background:var(--edge);}
body.mode-erp .tb-btn{background:var(--surface);border-color:var(--edge);color:var(--body);}
body.mode-erp .tb-btn:hover{background:var(--raised);}
body.mode-erp .search-bar{background:var(--surface);border-color:var(--edge);}
body.mode-erp .search-bar input{color:var(--body);}
body.mode-erp .search-bar input::placeholder{color:var(--ghost);}
body.mode-erp .search-icon{color:var(--ghost);}
body.mode-erp .topbar-nova-os{background:var(--a3) !important;border-color:var(--a3) !important;}

/* Dashboard shortcuts ERP */
body.mode-erp .dash-shortcuts{background:var(--ink);border-color:var(--edge);}
body.mode-erp .sc-btn{background:var(--surface);border-color:var(--edge);color:var(--body);}
body.mode-erp .sc-btn:hover{background:var(--raised);border-color:var(--rim);}
body.mode-erp .sc-kbd{background:var(--raised);border-color:var(--rim);color:var(--dim);}
body.mode-erp .sc-sep{background:var(--edge);}
body.mode-erp .dash-period-btn{color:var(--dim);border-color:var(--edge);background:var(--surface);}
body.mode-erp .dash-period-btn.active{background:var(--a3);color:#fff;border-color:var(--a3);}

/* KPI cards ERP */
body.mode-erp .bkpi-card{background:var(--ink);border-color:var(--edge);}
body.mode-erp .bkpi-card::before{background:var(--bk-ac,var(--a3));}
body.mode-erp .bkpi-card-accent{border-top-color:var(--a3) !important;}
body.mode-erp .bkpi-label{color:var(--dim);}
body.mode-erp .bkpi-val{color:var(--bright);}
body.mode-erp .bkpi-divider{background:var(--edge);}
body.mode-erp .bkpi-name{color:var(--body);}
body.mode-erp .bkpi-track{background:var(--raised);}

/* Cards e dash-cards ERP */
body.mode-erp .card{background:var(--ink);border-color:var(--edge);}
body.mode-erp .card-title{color:var(--bright);}
body.mode-erp .card-head{border-bottom-color:var(--edge);}
body.mode-erp .dash-card{background:var(--ink);border-color:var(--edge);}

/* Status bar ERP */
body.mode-erp .dash-status-bar{background:var(--ink);border-top-color:var(--edge);color:var(--dim);}

/* Badges ERP */
body.mode-erp .badge{border-color:var(--edge);}
body.mode-erp .b-ok{background:rgba(26,138,80,0.1);color:#1a8a50;}
body.mode-erp .b-warn{background:rgba(194,123,0,0.1);color:#c27b00;}
body.mode-erp .b-err{background:rgba(211,47,47,0.1);color:#d32f2f;}

/* Botões e formulários ERP */
body.mode-erp .btn{border-color:var(--edge);color:var(--body);}
body.mode-erp .btn:hover{background:var(--raised);}
body.mode-erp .btn-primary{background:var(--a3) !important;border-color:var(--a3) !important;color:#fff !important;}
body.mode-erp .btn-primary:hover{background:var(--a4) !important;}
body.mode-erp .btn-ghost{color:var(--a3);}
body.mode-erp .btn-danger{background:rgba(211,47,47,0.1) !important;border-color:rgba(211,47,47,0.3) !important;color:#d32f2f !important;}
body.mode-erp .fi{background:var(--surface);border-color:var(--edge);color:var(--bright);}
body.mode-erp .fi:focus{border-color:var(--a3);box-shadow:0 0 0 3px rgba(59,111,232,0.1);}

/* Notificações e modais ERP */
body.mode-erp .modal{background:var(--ink);border-color:var(--edge);}
body.mode-erp .modal-head{border-bottom-color:var(--edge);}
body.mode-erp .modal-title{color:var(--bright);}
body.mode-erp .overlay{background:rgba(17,24,39,0.4);}

/* Tabs ERP */
body.mode-erp .tab{color:var(--dim);border-color:var(--edge);}
body.mode-erp .tab.active{color:var(--a3);border-color:var(--a3);}

/* Scrollbar ERP */
body.mode-erp ::-webkit-scrollbar-thumb{background:rgba(59,111,232,0.15);}
body.mode-erp ::-webkit-scrollbar-thumb:hover{background:rgba(59,111,232,0.3);}

/* Acento lateral em item ativo do sidebar (corrigir no ERP) */

/* ═══════════════════════════════════════
   CORREÇÕES DE CONFLITO — Todos os temas
═══════════════════════════════════════ */

/* brand name — cor por tema */
body.mode-light .sb-brand-name{color:var(--body) !important;}
body.mode-light .sb-brand-tag{color:var(--a3);}

/* 3. ERP — topbar: avatar, botões e search no tema claro */
body.mode-erp .topbar-avatar{background:var(--a3);color:#fff;}
body.mode-erp .tb-btn{color:var(--body);background:var(--surface);border-color:var(--edge);}
body.mode-erp .tb-btn:hover{background:var(--raised);}

/* 4. Light — topbar: avatar e botões legíveis */
body.mode-light .topbar-avatar{background:var(--a3);color:#fff;}
body.mode-light .tb-btn{color:var(--body);border-color:var(--edge);}
body.mode-light .topbar-brand{color:var(--bright);}
body.mode-light .topbar-meta{color:var(--ghost);}

/* 5. Light — sidebar item active legível (gradiente muito fraco) */
body.mode-light .sb-icon-wrap{background:transparent;border:none;}

/* 6. ERP — dash-shortcuts period buttons */
body.mode-erp .btn-group .dash-period-btn{color:var(--dim);background:var(--surface);border-color:var(--edge);}
body.mode-erp .btn-group .dash-period-btn.active{background:var(--a3);color:#fff;border-color:var(--a3);}

/* 7. ERP — status bar cor do texto da versão */
body.mode-erp #dsbConnTxt,body.mode-erp #dsbSyncTxt{color:var(--dim);}
body.mode-erp .dsb-dot{background:#1a8a50;}

/* 8. ERP — content background e cards de dash */
body.mode-erp .content{background:var(--void);}
body.mode-erp #bkpiRow .bkpi-card{box-shadow:none;}

/* 9. Todos os temas — sb-brand-text deve aparecer ao hover */
.sb-brand{cursor:pointer;}

/* 10. ERP — search bar placeholder e ícone */
body.mode-erp .search-icon{color:var(--ghost);}
body.mode-erp #globalSearch{color:var(--body);}
body.mode-erp #globalSearch::placeholder{color:var(--ghost);}

/* 11. Light — bkpi-val legível (bright é quase preto no light) */
body.mode-light .bkpi-val{color:var(--bright);}
body.mode-light .bkpi-label{color:var(--ghost);}

/* 12. ERP — modal e overlay */
body.mode-erp .overlay{background:rgba(15,23,42,0.45);}
body.mode-erp .modal-head{border-bottom-color:var(--edge);}
body.mode-erp .modal-title{color:var(--bright);}
body.mode-erp .modal-foot{background:var(--ink);}

/* 13. ERP — sec-title e sec-head */
body.mode-erp .sec-title{color:var(--bright);}
body.mode-erp .sec-head{border-bottom-color:var(--edge);}
body.mode-erp .card-head{border-bottom-color:var(--edge);}
body.mode-erp .card-title{color:var(--bright);}

/* 14. ERP — tbl (tabelas) */
body.mode-erp .tbl th{background:var(--surface);color:var(--body);border-color:var(--edge);}
body.mode-erp .tbl td{border-color:var(--edge);color:var(--body);}
body.mode-erp .tbl-row:hover{background:var(--surface);}

/* 15. ERP — KPI cards do dashGrid (dash-card) */
body.mode-erp .dash-card{background:var(--ink);border-color:var(--edge);}
body.mode-erp .dash-card-body{color:var(--body);}
body.mode-erp .drag-handle{color:var(--rim);}

/* ══════════════════════════════════════════════════════════
   MÓDULO COMPRAS & CONTA CORRENTE — s58
══════════════════════════════════════════════════════════ */

/* Linhas da grade de compras e pagamentos */
.compra-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 100px 100px 80px 70px;
  gap: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--edge);
  align-items: center;
  cursor: pointer;
  transition: background .15s;
  font-size: 13px;
}
/* Cabeçalho compartilha o grid exato de .compra-row, sem interatividade */
.compra-row-head {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 100px 100px 80px 70px;
  gap: 0;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--edge);
}
.compra-row:hover { background: var(--raised); }
.compra-row:last-child { border-bottom: none; }
.compra-data { color: var(--dim); font-size: 11px; font-family: var(--ff-mono); }
.compra-forn { font-weight: 600; color: var(--ghost); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compra-itens { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compra-total { text-align: right; font-family: var(--ff-mono); font-weight: 700; color: var(--bright); }
.compra-saldo { text-align: right; font-family: var(--ff-mono); font-weight: 700; }

/* [S40-B3] Pagamentos têm 6 colunas (sem Saldo). Antes reusava .compra-row
   (7 cols) e o renderer enfiava um <div></div> vazio na quinta posição,
   criando coluna fantasma visualmente confusa. */
.pgto-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 100px 80px 70px;
  gap: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--edge);
  align-items: center;
  font-size: 13px;
}
.pgto-row-head {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 100px 80px 70px;
  gap: 0;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--edge);
}
.pgto-row:hover { background: var(--raised); }
.pgto-row:last-child { border-bottom: none; }

/* Itens da nova compra */
.compra-item-row {
  display: grid;
  grid-template-columns: 1fr 70px 100px 100px 36px;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

/* Conta Corrente — cards de fornecedor */
.cc-forn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.cc-forn-card:hover { border-color: var(--a3); background: var(--raised); }
.cc-forn-card.cc-devedor { border-left: 3px solid var(--err); }
.cc-forn-icon { font-size: 24px; flex-shrink: 0; }
.cc-forn-info { flex: 1; min-width: 0; }
.cc-forn-nome { font-weight: 700; color: var(--bright); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-forn-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.cc-kpis { display: flex; gap: 20px; flex-shrink: 0; }
.cc-kpi { text-align: right; }
.cc-kpi-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.cc-kpi-val { font-size: 13px; font-weight: 700; font-family: var(--ff-mono); color: var(--bright); }

/* Timeline da Conta Corrente */
.tl-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge);
  position: relative;
}
.tl-row:last-child { border-bottom: none; }
.tl-row::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--edge);
  z-index: 0;
}
.tl-row:last-child::before { height: 50%; bottom: auto; }
.tl-row:first-child::before { top: 50%; }
.tl-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}
.tl-dot-compra { background: rgba(239,68,68,.12); border: 2px solid var(--err); }
.tl-dot-pgto   { background: rgba(77,219,143,.12); border: 2px solid var(--ok); }
.tl-content { flex: 1; min-width: 0; }
.tl-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.tl-date { font-size: 11px; color: var(--dim); font-family: var(--ff-mono); }
.tl-desc { font-size: 12px; color: var(--ghost); margin-bottom: 4px; }
.tl-vals { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.tl-vals span:first-child { font-weight: 700; font-size: 14px; font-family: var(--ff-mono); }

/* Tab fornecedores full */
#fornecedoresRowsFull { display: flex; flex-direction: column; gap: 0; padding: 10px; }

/* Responsivo compra-row mobile */
@media (max-width: 640px) {
  .compra-row, .compra-row-head { grid-template-columns: 80px 1fr 80px 70px; padding-left: 10px; padding-right: 10px; }
  .compra-row { padding-top: 11px; padding-bottom: 11px; }
  .compra-itens, .compra-saldo, .compra-col-itens, .compra-col-saldo { display: none; }
  .compra-total { font-size: 12px; }
  /* [S40-B3] Pagamentos: esconde Forma/Obs e Status em mobile */
  .pgto-row, .pgto-row-head { grid-template-columns: 80px 1fr 80px 70px; padding-left: 10px; padding-right: 10px; }
  .pgto-row { padding-top: 11px; padding-bottom: 11px; }
  .pgto-col-obs, .pgto-row > div:nth-child(5), .pgto-row-head > div:nth-child(5) { display: none; }
  .cc-kpis { gap: 10px; }
  .cc-forn-card { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   MÓDULO GARANTIAS — linhas da tabela (s25)
════════════════════════════════════════════════════════════ */.gar-row-head {
  display: grid;
  grid-template-columns: 56px 1fr 120px 110px 110px 100px;
  gap: 0;
  padding: 8px 14px;
  background: var(--raised);
  border-bottom: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.gar-row {
  display: grid;
  grid-template-columns: 56px 1fr 120px 110px 110px 100px;
  gap: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  align-items: center;
  cursor: pointer;
  transition: background .1s;
}
.gar-row:hover { background: var(--surface); }
.gar-row:last-child { border-bottom: none; }

@media (max-width: 640px) {
  .gar-row, .gar-row-head { grid-template-columns: 56px 1fr 100px 90px; padding-left: 10px; padding-right: 10px; }
  .gar-col-entregue, .gar-col-restam { display: none; }
}

/* ══════════════════════════════════════════════════════════
   TABELAS CLIENTES & USUÁRIOS — esconde cols em mobile (s25)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cli-col-end, .cli-col-nasc, .cli-col-nivel { display: none; }
  .usr-col-cargo, .usr-col-perms, .usr-col-acesso { display: none; }
  /* Com menos colunas, tabelas podem relaxar o min-width forçado (que causava scroll) */
  #page-clientes .tbl { min-width: 0 !important; }
}

/* ══════════════════════════════════════════════════════════
   DRAWER MOBILE — cards do menu "Mais" (s25)
   Labels de comprimento desigual ("Fechamento Contábil" vs "Clientes")
   criavam rows com alturas diferentes dentro do grid 1fr 1fr, causando
   desalinhamento visual entre rows. Solução: altura mínima uniforme
   igual ao pior caso (2 linhas de texto), com line-clamp por segurança.
════════════════════════════════════════════════════════════ */
[id^="mob-nav-"] {
  min-height: 52px;
  align-items: center !important;
}
[id^="mob-nav-"] .m-mais-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
}

/* Drawers do carrinho — visíveis apenas no PDV, controlados por transform */
#pdvCartDrawer { display:none; }
#pdvPayDrawer  { display:none; }
body:has(#page-pdv.active) #pdvCartDrawer { display:flex; }
body:has(#page-pdv.active) #pdvPayDrawer  { display:flex; }

/* ============================================================================
   MÓDULO FISCAL — Fase 1 NF — Integração Focus NFe
   Usa variáveis do tema existente (tema quente: laranja em fundo marrom).
   ============================================================================ */

/* Modal fiscal herda .modal e .modal-lg do sistema; ajustes específicos: */
.modal-fiscal,
#modalFiscal .modal {
  max-width: 740px;
}

/* Badge (reutilizável em outros contextos depois) */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge-ok {
  background: rgba(77,219,143,0.15);
  color: var(--ok);
  border: 0.5px solid rgba(77,219,143,0.3);
}
.badge-off {
  background: var(--raised);
  color: var(--ghost);
  border: 0.5px solid var(--edge);
}

/* Status row no topo do modal */
.fiscal-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--edge);
}
.fiscal-status-row h3 {
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--bright);
  margin: 0;
}

/* Caixa de explicação "Como funciona" */
.fiscal-info {
  background: var(--aGlow2, rgba(255,140,66,0.06));
  border-left: 2px solid var(--a3);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--body);
}
.fiscal-info p { margin: 4px 0; }
.fiscal-info strong { color: var(--bright); font-weight: 600; }
.fiscal-info a {
  color: var(--a3);
  text-decoration: none;
  font-weight: 600;
}
.fiscal-info a:hover { color: var(--a4); text-decoration: underline; }

/* Fieldsets numerados (conexão, empresa, endereço, séries) */
#modalFiscalBody fieldset {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
#modalFiscalBody legend {
  padding: 0 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--a3);
}
#modalFiscalBody label {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--dim);
  font-weight: 500;
}
#modalFiscalBody label input,
#modalFiscalBody label select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--bright);
  font-size: 13px;
  font-family: var(--ff-body);
  transition: border-color 0.15s, background 0.15s;
}
#modalFiscalBody label input:focus,
#modalFiscalBody label select:focus {
  border-color: var(--a3);
  outline: none;
  background: var(--ink);
}
#modalFiscalBody label small {
  display: block;
  margin-top: 5px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* Grid de inputs lado a lado (Número+Complemento, Município+UF, etc) */
.fiscal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

/* Botão "Testar conexão" */
#modalFiscalBody .btn-secondary {
  background: var(--raised);
  border: 1px solid var(--edge);
  color: var(--body);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 4px;
}
#modalFiscalBody .btn-secondary:hover {
  background: var(--surface);
  border-color: var(--a3);
  color: var(--a3);
}

/* Bloco de resultado do teste (alerts reutilizáveis) */
.alert {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-family: var(--ff-mono);
  line-height: 1.4;
  background: var(--raised);
  color: var(--body);
  border: 0.5px solid var(--edge);
}
.alert-ok {
  background: var(--okBg, rgba(77,219,143,0.08));
  color: var(--ok);
  border-color: rgba(77,219,143,0.3);
  border-left: 2px solid var(--ok);
}
.alert-warn {
  background: var(--warnBg, rgba(255,179,0,0.08));
  color: var(--warn);
  border-color: rgba(255,179,0,0.3);
  border-left: 2px solid var(--warn);
}
.alert-err {
  background: var(--errBg, rgba(255,71,87,0.08));
  color: var(--err);
  border-color: rgba(255,71,87,0.3);
  border-left: 2px solid var(--err);
}

/* Checkbox "Ativar módulo" com destaque laranja */
.fiscal-ativar {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
  background: var(--aGlow2, rgba(255,140,66,0.06));
  border: 1px solid rgba(255,140,66,0.2);
  border-radius: var(--r-sm);
  margin-bottom: 14px !important;
  font-size: 12px !important;
  color: var(--bright) !important;
  cursor: pointer;
}
.fiscal-ativar input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0;
  accent-color: var(--a3);
}
.fiscal-ativar span {
  font-size: 12px;
  color: var(--bright);
  font-weight: 500;
}

/* Área de ações (rodapé do form) */
.fiscal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--edge);
}
.fiscal-actions > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#modalFiscalBody .btn-primary {
  background: var(--a3);
  color: var(--ink);
  border: none;
  padding: 9px 20px;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
#modalFiscalBody .btn-primary:hover {
  background: var(--a4);
  transform: translateY(-1px);
}
#modalFiscalBody .btn-primary:active {
  transform: translateY(0);
}

/* Responsivo mobile */
@media (max-width: 640px) {
  .modal-fiscal,
  #modalFiscal .modal { max-width: 96vw; }
  .fiscal-row { grid-template-columns: 1fr; }
  .fiscal-actions > div { flex-direction: column-reverse; }
  .fiscal-actions > div button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES S21-S23 — Fechamento Contábil, card de venda cancelada
═══════════════════════════════════════════════════════════════════════ */

/* Fechamento Contábil: desktop mostra todos os botões, mobile mostra só
   o primário + dropdown "Mais ações". */
.fech-actions-desk { display: flex; gap: 8px; flex-wrap: wrap; }
.fech-actions-mob  { display: none; }
@media (max-width: 768px) {
  .fech-actions-desk { display: none; }
  .fech-actions-mob  { display: flex; gap: 6px; width: 100%; }
  .fech-actions-mob > button { flex: 1 1 0; min-width: 0; }
  .fech-actions-mob > button.btn-primary { flex: 2 1 0; }
}
/* Dropdown do "Mais ações" — versão simples com position fixed */
.fech-mais-menu {
  position: fixed;
  z-index: 99900;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  min-width: 200px;
  padding: 6px;
  display: none;
}
.fech-mais-menu.open { display: block; }
.fech-mais-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-size: 13px; color: var(--body);
  cursor: pointer; border-radius: var(--r-sm);
  touch-action: manipulation;
}
.fech-mais-item:hover,
.fech-mais-item:active { background: var(--raised); color: var(--bright); }

/* Card de venda no histórico do PDV: em mobile, encurta labels dos botões
   pra caberem numa linha sem wrap agressivo. */
@media (max-width: 480px) {
  /* Os botões de ação (Troca, Cancelar, Ver recibo) ficam com padding menor
     e font menor pra caber mais na largura apertada. */
  #pdvHistList span[onclick*="abrirTroca"],
  #pdvHistList span[onclick*="cancelarVenda"],
  #pdvHistList span[onclick*="pdvHistVerRecibo"] {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }
}

/* Barra de período do Fechamento: em mobile garante que inputs de data
   ocupem largura adequada e atalhos fiquem numa linha scrollável. */
@media (max-width: 768px) {
  #page-fechamento .rel-periodo-bar { padding: 8px 10px; gap: 6px; }
  #page-fechamento .rel-periodo-bar .input-date { min-width: 120px; flex: 1; }
  #page-fechamento .rel-periodo-bar > div[style*="flex:1"] { display: none; }
  /* Atalhos (Mês atual, Mês anterior, Trimestre, Limpar): bar scrollável */
  #page-fechamento .rel-periodo-bar > div:last-child {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #page-fechamento .rel-periodo-bar > div:last-child::-webkit-scrollbar { display: none; }
  #page-fechamento .rel-periodo-bar > div:last-child > button { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   S26 — Modal Repor Estoque: grid compartilhado header+rows
   Padrão: mesma estratégia de .compra-row-head (S25)
   ═══════════════════════════════════════════════════════════════ */

.repor-row-head,
.repor-row {
  display: grid;
  grid-template-columns: 28px 36px 1fr 52px 52px 52px 116px;
  gap: 0;
  padding: 8px 10px;
  align-items: center;
  min-width: 0;
}

.repor-row-head {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-md) var(--r-md) 0 0;
  flex-shrink: 0;
}

.repor-row-head > div {
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--ghost);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.repor-row-head .repor-col-atual,
.repor-row-head .repor-col-min,
.repor-row-head .repor-col-apos,
.repor-row-head .repor-col-step {
  text-align: center;
}

.repor-row {
  border-bottom: 1px solid rgba(31, 47, 68, 0.4);
  transition: background 0.1s;
  overflow: hidden;
}

.repor-row.sel {
  background: var(--a0);
}

@media (max-width: 768px) {
  /* Esconde colunas não-essenciais em mobile: thumb, mínimo, após.
     O status de mínimo já aparece no badge do subtítulo (.repor-col-nome). */
  .repor-row-head .repor-col-thumb,
  .repor-row-head .repor-col-min,
  .repor-row-head .repor-col-apos,
  .repor-row .repor-col-thumb,
  .repor-row .repor-col-min,
  .repor-row .repor-col-apos {
    display: none !important;
  }

  /* Grid reduz para 4 colunas: check · nome · atual · stepper */
  .repor-row-head,
  .repor-row {
    grid-template-columns: 28px 1fr 52px 110px !important;
    padding: 10px 10px !important;
  }

  /* Stepper touch-friendly em mobile: botões maiores, input caber */
  .repor-row .repor-step-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 17px !important;
    touch-action: manipulation;
  }
  .repor-row .repor-step-input {
    width: 44px !important;
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S26 — Drawers PDV: safe-area-inset-bottom para iPhone X+
   S27 — Seletor trocado de `> div:last-child` (frágil) para
   `.pdv-drawer-foot` (classe dedicada). HTML dos drawers agora
   marca os rodapés explicitamente.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Rodapé do drawer Carrinho (Continuar) */
  #pdvCartDrawer .pdv-drawer-foot {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Rodapé do drawer Pagamento (Finalizar Venda) */
  #pdvPayDrawer .pdv-drawer-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27 — touch-action:manipulation expandido (B-bund alto)
   ───────────────────────────────────────────────────────────────
   A S25 já cobriu .os-ticket,.prod-card,.kpi,.dash-card,.sb-item,
   .tab,.btn,.pay-btn,.cat-tab,.qty-b,.tog. Esta regra amplia para
   cobrir todos os clicáveis restantes de uma vez, eliminando:
   - delay de 300ms em browsers mobile antigos
   - double-tap zoom acidental em elementos interativos

   Seletor [onclick] cobre os ~909 elementos com handler inline,
   incluindo os que usam elementos não-semânticos (div/span/etc).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  a, button, [onclick], [role="button"],
  input[type="checkbox"], input[type="radio"],
  select, .fi,
  .stock-row, .fin-entry, .os-card-mob,
  .m-bn-item, .m-mais-item,
  .cart-head, .cart-client,
  .repor-row, .repor-step-btn,
  .pdv-tab, .pdv-hist-row, .pdv-hist-recibo,
  .os-prog-step, .os-step-node,
  .mob-search-item, .dash-mob-kpi, .dm-row,
  .modal-foot > *, .sec-actions > *,
  .theme-card, .mod-card, .rel-card, .cfg-row, .bkpi-card,
  .login-user-opt, .lu-avatar,
  .prod-card, .kpi, .dash-card, .sb-item, .tab, .btn,
  .pay-btn, .cat-tab, .qty-b, .tog, .os-ticket {
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27 — Feedback :active em mobile (B-bund alto)
   ───────────────────────────────────────────────────────────────
   62 handlers onmouseenter/leave no projeto fornecem feedback
   visual só pra mouse — não disparam em touch. Em vez de refactorar
   os 62 handlers, esta regra garante feedback :active em mobile para
   qualquer clicável que AINDA não tenha :active próprio.

   - Opacity 0.85 (sutil, não opressivo)
   - Transition 0.05s (resposta rápida ao toque)
   - Sem !important — regras locais com :active específico vencem
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (hover: none) {
  /* Só aplica em dispositivos SEM hover (touch real).
     Evita interferir em iPads com mouse/trackpad. */
  button:active, [onclick]:active, [role="button"]:active,
  a:active,
  .prod-card:active, .kpi:active, .dash-card:active,
  .sb-item:active, .btn:active, .pay-btn:active,
  .cat-tab:active, .qty-b:active, .tog:active,
  .theme-card:active, .mod-card:active, .rel-card:active,
  .bkpi-card:active,
  .pdv-tab:active, .pdv-hist-recibo:active,
  .os-prog-step:active, .os-step-node:active,
  .dash-mob-kpi:active, .dm-row:active,
  .mob-search-item:active,
  .repor-step-btn:active,
  .login-user-opt:active, .lu-avatar:active {
    opacity: 0.85;
    transition: opacity 0.05s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27.1 — Hotfix: seção "Aparência & Tema" em mobile
   ───────────────────────────────────────────────────────────────
   Bugs no print do usuário:
   1. .cfg-row é flex row com label à esquerda e botões à direita.
      Quando os botões ocupam espaço (.row-6 com 5 itens), o label
      fica com ~170px e quebra palavras verticalmente ("Modo / de /
      Interface"). Solução: em mobile, cfg-row vira coluna com o
      label full-width acima dos botões.
   2. .row-6 não tem flex-wrap. Os 5 botões de modo (Dark/Ocean/
      Light/Grafite/ERP) ficam em linha única forçada. Solução:
      permitir wrap e dar min-width aos botões.
   3. #themeColorGrid em mobile usa minmax(44px,1fr) = 7-8 colunas
      em 360px, cortando nomes ("Dourad", "Vermelh"). Solução:
      forçar grid de 2 colunas em mobile (nomes caibem inteiros).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. cfg-row: label em cima, controles embaixo (full-width) */
  .cfg-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cfg-row > div:first-child {
    min-width: 0;
    width: 100%;
  }
  .cfg-row .cfg-row-lbl {
    font-size: 13px;
  }

  /* 2. row-6 dentro de cfg-row (botões de modo de interface):
        permite quebra e dá largura mínima para nomes caberem.
        Qualificado com .cfg-row para NÃO afetar row-6 em modais
        (pvCampModal, cadRapidoBox) que têm só 2 botões pequenos. */
  .cfg-row .row-6 {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .cfg-row .row-6 .theme-mode-btn {
    flex: 1 1 auto;
    min-width: 68px;
    text-align: center;
  }

  /* 3. Grid de cores: força 2 colunas (nomes longos como "Vermelho",
        "Dourado", "Feminino & suave" cabem inteiros).
        Regra existente `repeat(auto-fill, minmax(44px, 1fr))` fica
        sobrescrita pela especificidade do ID #themeColorGrid. */
  #themeColorGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .theme-card {
    padding: 10px 12px;
  }
  .theme-card-name {
    font-size: 13px;
  }
  .theme-card-sub {
    font-size: 10px;
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27.2 — Hotfix: outros menus com grids 2 colunas fixas em mobile
   ───────────────────────────────────────────────────────────────
   Varredura pós-S27.1 identificou padrões similares ao bug da tela
   Aparência & Tema em outras páginas. Lista:

   ✅ Já cobertos antes desta sessão: #modal-est-peca, #modal-est-cel,
      .cfg-grid, .cfg-menu-grid, #parcelasGrid, #dmCaixaBody,
      #filtrosAvCelPanel, #filtrosAvPecPanel, menu mobile "Mais"
      (este último é DELIBERADAMENTE 2 colunas).

   🔧 Corrigidos nesta S27.2:
   1. Página NF-e (#page-nf) — 4 abas com wrapper grid 1fr 1fr
      (guia, tipos, impostos, portais). Página inteira fica em 2
      colunas de ~170px em viewport mobile → texto explicativo,
      tabelas e cards ficam apertados.
   2. Modal Importar/Exportar (#iePanelExport/#iePanelImport) —
      2 cards grandes "CSV"/"Excel" com ícone 36px + texto + botão.
   3. Barra de ações histórico NF-e — sem flex-wrap, pode transbordar.
   4. Modal admin (#modalAdmin) — pares Meses/Valor, Desc%/DescR$.
   5. Grid Técnico+Prazo no modal Nova OS — 2 selects/inputs.
   6. Calc fiscal (#nf-tab-calc) — cobertura preventiva do mesmo
      padrão de wrapper 1fr 1fr da aba irmã.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. PÁGINA NF-e: wrappers de 2 colunas das abas viram 1 coluna.
        Seletor via ID da página para não afetar outras páginas que
        possam ter grids 1fr 1fr intencionais (ex: menu "Mais"). */
  #page-nf #nf-tab-guia > div[style*="grid-template-columns:1fr 1fr"],
  #page-nf #nf-tab-tipos > div[style*="grid-template-columns:1fr 1fr"],
  #page-nf #nf-tab-impostos > div[style*="grid-template-columns:1fr 1fr"],
  #page-nf #nf-tab-portais > div[style*="grid-template-columns:1fr 1fr"],
  #page-nf #nf-tab-calc > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Barra de ações do histórico NF-e: permite wrap quando contador
     e botões competem por espaço. */
  #page-nf #nf-tab-historico .card > div[style*="justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 2. MODAL IMPORT/EXPORT: os 2 cards grandes empilham verticalmente
        para aproveitar a largura total e manter legibilidade. */
  #iePanelExport > div[style*="grid-template-columns:1fr 1fr"],
  #iePanelImport > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 4. MODAL ADMIN: pares Meses/Valor e Desc%/DescR$ em 1 coluna.
        Inputs numéricos com labels longos ficam legíveis em full-width. */
  #modalAdmin div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 5. MODAL NOVA OS: grid "Técnico + Prazo" empilha em mobile.
        Select + input[type=date] precisam de espaço mínimo para
        serem usáveis sem clipping. Seletor contextual via #modal-os. */
  #modal-os div[style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]):not([style*="1fr 1fr auto"]) {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27.3 — Collapsible: atalhos de período em mobile (Fechamento)
   ───────────────────────────────────────────────────────────────
   Bug: a regra legada `.rel-periodo-bar .btn { width:100% }` força
   todos os botões (incluindo "Aplicar", "Mês atual", "Mês anterior",
   "Trimestre", "Limpar") a empilharem verticalmente em mobile,
   ocupando 5 linhas só pra atalhos de data. Tentativa S26 de scroll
   horizontal falhou por conflito com `width:100%`.

   Solução: os 4 atalhos ficam dentro de um <details> HTML nativo.
   - Desktop: forçado open (open padrão) — sem mudança visual
   - Mobile: começa closed, usuário toca "⏱ Atalhos" para expandir
   - Zero JavaScript — <details>/<summary> é HTML nativo
   ═══════════════════════════════════════════════════════════════ */

/* Estilo base do <details> como botão inline na barra */
.periodo-atalhos {
  position: relative;
}
.periodo-atalhos > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
.periodo-atalhos > summary::-webkit-details-marker { display: none; }
.periodo-atalhos > summary::marker { content: ''; }

/* Indicador visual de estado (chevron) */
.periodo-atalhos > summary::after {
  content: ' ▾';
  margin-left: 4px;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.periodo-atalhos[open] > summary::after {
  transform: rotate(180deg);
  display: inline-block;
}

/* Desktop: atalhos sempre visíveis (summary escondido, box em fluxo normal).
   Simula o layout original (sem o <details>).
   Usamos display:contents pra tirar o details do layout e deixar os
   filhos (summary hidden + box) fluirem como antes. */
@media (min-width: 769px) {
  .periodo-atalhos {
    display: contents;
  }
  .periodo-atalhos > summary { display: none; }
  .periodo-atalhos > .periodo-atalhos-box { display: flex !important; }
}

/* Mobile: layout colapsado. Summary vira botão full-width (herda
   width:100% da regra .rel-periodo-bar .btn existente).
   Box aparece embaixo quando aberto. */
@media (max-width: 768px) {
  .periodo-atalhos {
    width: 100%;
  }
  .periodo-atalhos > summary {
    width: 100%;
    justify-content: center;
  }
  .periodo-atalhos > .periodo-atalhos-box {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: var(--deep);
    border: 0.5px solid var(--edge);
    border-radius: var(--r-md);
  }
  .periodo-atalhos[open] > .periodo-atalhos-box {
    display: flex !important;
  }
  /* Os botões dentro da box ficam em grid 2x2 pra aproveitar espaço
     (antes ficavam 100% cada um por causa da regra herdada L864). */
  .periodo-atalhos-box > .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 8px 6px !important;
  }

  /* Fechamento: wrapper Aplicar + ⏱ Atalhos vira grid 2 colunas em mobile.
     Desktop permanece display:contents (inline no style) preservando layout.
     O spacer interno (flex:1) é escondido pra que os 2 botões fiquem colados. */
  .rel-periodo-bar .periodo-actions-row {
    display: flex !important;
    width: 100%;
    gap: 6px;
  }
  .rel-periodo-bar .periodo-actions-row > div[style*="flex:1"] {
    display: none !important;
  }
  /* Cada botão ocupa metade da linha. Importante: o <details> é inline
     por padrão, então transformamos ele em item flex explícito. */
  .rel-periodo-bar .periodo-actions-row > .btn,
  .rel-periodo-bar .periodo-actions-row > .periodo-atalhos {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* Quando os atalhos estão abertos, o <details> precisa expandir pra linha
     própria (a box aparece abaixo). Força width:100% e volta a flex:100%. */
  .rel-periodo-bar .periodo-actions-row > .periodo-atalhos[open] {
    flex: 1 1 100% !important;
    order: 99; /* Quando aberto, fica depois do Aplicar na mesma linha de fluxo */
  }

  /* Relatórios: wrapper com 2 botões (Aplicar + Limpar) em grid 2 colunas.
     Vira display:flex em mobile (sai do display:contents do desktop). */
  .rel-periodo-bar .periodo-actions-2col {
    display: flex !important;
    width: 100%;
    gap: 6px;
  }
  .rel-periodo-bar .periodo-actions-2col > .btn {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27.4 / S27.5 — Dashboard: grid 3×2 + divisória expansível (mobile)
   ───────────────────────────────────────────────────────────────
   Bug: 7+ atalhos em flex horizontal com overflow-x:auto. Em mobile
   só 2-3 visíveis e o usuário não vê que tem mais (scrollbar escondida).

   Solução:
   - Desktop: layout inalterado (wrapper .sc-actions e <details>
     são display:contents — transparentes ao layout). Todos os
     botões fluem no flex bar como antes.
   - Mobile: .sc-actions vira grid 3 cols.
     · 6 primeiros .sc-btn ocupam 3+3 (2 linhas)
     · <details class="sc-extras"> é um item do grid ocupando
       linha inteira (grid-column: 1/-1), estilizado como divisória
       horizontal com "handle" (tracinho central). Ao tocar,
       expande revelando .sc-extras-box com atalhos extras em
       grid 3-col. Fácil de escalar pra N extras futuros.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: <details> sempre open (via HTML attribute).
   Wrapper e box viram display:contents pra fluir no flex bar.
   Summary escondido — desktop não precisa da divisória puxável. */
@media (min-width: 769px) {
  .sc-extras {
    display: contents;
  }
  .sc-extras > summary { display: none; }
  .sc-extras > .sc-extras-box { display: contents; }
}

@media (max-width: 768px) {
  /* Barra permite wrap para quebrar em 2 linhas: atalhos + período */
  .dash-shortcuts {
    flex-wrap: wrap !important;
    align-items: center !important;
    overflow: visible !important;
    row-gap: 10px !important;
  }

  /* Wrapper dos atalhos vira grid 3 colunas ocupando 100% da linha */
  .dash-shortcuts .sc-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    flex: 1 1 100%;
  }

  /* Separador flex não faz sentido no grid */
  .dash-shortcuts .sc-actions .sc-sep {
    display: none;
  }

  /* Cards de atalho em modo compacto vertical:
     ícone em cima, label embaixo. Sub-texto e kbd escondidos
     (regra S25 L1501). */
  .dash-shortcuts .sc-actions .sc-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
    padding: 10px 6px !important;
    min-height: 68px;
    text-align: center;
  }
  .dash-shortcuts .sc-actions .sc-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  .dash-shortcuts .sc-actions .sc-text {
    align-items: center !important;
    min-width: 0;
    width: 100%;
  }
  .dash-shortcuts .sc-actions .sc-main {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }

  /* ═══ Divisória expansível <details class="sc-extras"> ═══ */

  /* O <details> ocupa linha inteira do grid (3 colunas) */
  .dash-shortcuts .sc-actions > .sc-extras {
    grid-column: 1 / -1;
    display: block; /* sobrescreve display:contents do desktop */
    margin-top: 2px;
  }

  /* Summary (a divisória clicável) */
  .sc-extras > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-top: 0.5px solid var(--edge);
    transition: border-color 0.15s;
  }
  .sc-extras > summary::-webkit-details-marker { display: none; }
  .sc-extras > summary::marker { content: ''; }
  .sc-extras > summary:active {
    border-top-color: var(--a3);
  }

  /* Handle visual: tracinho cinza no centro (estilo bottom-sheet) */
  .sc-extras-grip {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--rim);
    transition: background 0.15s, transform 0.2s ease;
  }
  .sc-extras[open] > summary .sc-extras-grip {
    background: var(--a3);
    transform: scaleX(0.6);
  }

  /* Box dos atalhos extras: grid 3 colunas, aparece quando open */
  .sc-extras > .sc-extras-box {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
  }
  .sc-extras[open] > .sc-extras-box {
    display: grid;
  }
  /* Os botões dentro da box herdam o estilo .sc-btn vertical do grid */
  .sc-extras-box .sc-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
    padding: 10px 6px !important;
    min-height: 68px;
    text-align: center;
  }
  .sc-extras-box .sc-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  .sc-extras-box .sc-text {
    align-items: center !important;
    min-width: 0;
    width: 100%;
  }
  .sc-extras-box .sc-main {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }

  /* Spacer (flex:1) some em mobile — não faz sentido em coluna */
  .dash-shortcuts > div[style*="flex:1"] {
    display: none !important;
  }

  /* Botão refresh ↺ e botões de período na 2ª linha em mobile.
     Evitamos :has() (não suportado em Chrome Android < 105).
     Forçamos todo > div irmão (exceto .sc-actions e spacer) a
     ocupar espaço disponível; o > button refresh fica ao lado. */
  .dash-shortcuts > div:not(.sc-actions):not([style*="flex:1"]) {
    flex: 1;
    justify-content: center;
  }
  .dash-shortcuts .dash-period-btn {
    flex: 1;
    text-align: center;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   S27.6 — Tabs NF-e e PDV filtros: remover scroll horizontal mobile
   ───────────────────────────────────────────────────────────────
   Bug: duas telas com tabs/filtros ainda scrolláveis lateralmente
   em mobile, escondendo opções sem indicação visual clara:
   1. Página NF-e (#nfPageTabs): 6 tabs (Guia/Tipos/Impostos/
      Calc/Portais/Histórico). Texto longo com emoji, só 3 caibam.
   2. PDV toolbar (.cat-tabs): 4 filtros (Todos/Celulares/Acess/
      Peças) competindo com Varejo/Atacado, busca e carrinho.

   Solução:
   - NF-e: grid 3×2 (3 colunas × 2 linhas), todas as 6 tabs visíveis
   - PDV: toolbar vira flex-wrap (em vez de nowrap+scroll), cat-tabs
     em linha separada ocupando 100% da largura em grid 4-col.
     Separador vertical some (não faz sentido em múltiplas linhas).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ═══ NF-e: tabs da página em grid 3×2 ═══ */
  #nfPageTabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  #nfPageTabs .tab {
    text-align: center;
    padding: 8px 6px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ═══ PDV toolbar: wrap em múltiplas linhas ═══ */
  /* Sobrescreve a regra S25 que forçava flex-wrap:nowrap + overflow-x:auto.
     Agora a toolbar quebra em 2 linhas naturalmente. */
  .pdv-toolbar {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 6px !important;
  }

  /* Separador vertical some em mobile - não faz sentido entre linhas */
  .pdv-toolbar > div[style*="width:1px"][style*="height:20px"] {
    display: none !important;
  }

  /* cat-tabs ocupa linha inteira em grid 4 colunas */
  .pdv-toolbar .cat-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .pdv-toolbar .cat-tabs .cat-tab {
    text-align: center;
    padding: 6px 4px !important;
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Esconder scrollbar (herdou de -webkit-overflow-scrolling anterior) */
  .pdv-toolbar .cat-tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   S27.7 — Varredura completa: fim dos scrolls horizontais (mobile)
   ───────────────────────────────────────────────────────────────
   Bug comum em várias páginas: S25 adotou padrão de scroll
   horizontal (overflow-x:auto + scrollbar-width:none) para manter
   tabs/filtros em uma única linha em mobile. Resultado: itens
   cortados pela borda, usuário não vê que tem mais opções.

   Locais identificados na varredura:
   1. Peças & Produtos (#page-estoque .sec-actions) — 9 itens
   2. Celulares (#page-celulares .sec-actions) — 8 itens
   3. Atacado (#page-atacado .sec-actions + #fornTabsBar tabs)
   4. Pós-venda (#page-posvenda .sec-actions) — scroll inútil, 1 btn
   5. Financeiro (#finTabs) — 5 tabs
   6. Fluxo de Caixa (#fin-fluxo .btn-group) — 4 botões período
   7. Contas a Pagar (#fin-contas .btn-group) — 4 botões filtro
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ═══ 1+2. Peças & Produtos + Celulares: sec-actions em wrap ═══
     S25 forçava nowrap + overflow-x:auto. Agora quebra em múltiplas
     linhas naturalmente. Search-bar continua escondida (mob-search-bar
     substitui). Selects e botões ficam lado a lado quando cabem. */
  #page-celulares .sec-actions,
  #page-estoque .sec-actions {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 6px !important;
  }
  #page-celulares .sec-actions::-webkit-scrollbar,
  #page-estoque .sec-actions::-webkit-scrollbar { display: none; }
  /* Selects: largura mínima garantida, crescem se houver espaço */
  #page-celulares .sec-actions select,
  #page-estoque .sec-actions select {
    flex: 1 1 auto !important;
    min-width: 110px !important;
    max-width: none !important;
  }
  /* Botões: permitir que ocupem espaço disponível, não limitam largura */
  #page-celulares .sec-actions .btn,
  #page-estoque .sec-actions .btn {
    flex: 0 1 auto !important;
  }

  /* ═══ 3. Atacado sec-actions: wrap em vez de scroll ═══ */
  #page-atacado .sec-actions {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 6px !important;
  }
  #page-atacado .sec-actions::-webkit-scrollbar { display: none; }

  /* ═══ 3b. Atacado tabs (#fornTabsBar): grid 3×2 (5 tabs) ═══ */
  #fornTabsBar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  #fornTabsBar .tab {
    text-align: center;
    padding: 8px 6px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ═══ 4. Pós-venda: scroll inútil (só 1 botão) — remover ═══ */
  #page-posvenda .sec-actions {
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  /* ═══ 5. Financeiro tabs (#finTabs): grid 3×2 (5 tabs) ═══ */
  #finTabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    overflow: visible !important;
    /* Remove mask-image que criava efeito de fade nas bordas
       (feito pra indicar scroll — não faz sentido em grid) */
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #finTabs .tab {
    flex-shrink: 1 !important;
    text-align: center;
    padding: 8px 6px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #finTabs::-webkit-scrollbar { display: none; }

  /* ═══ 6. Fluxo de Caixa: 4 botões de período em grid 4-col ═══ */
  #fin-fluxo > div:first-child .btn-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  #fin-fluxo > div:first-child .btn-group .fluxo-period-btn {
    text-align: center;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #fin-fluxo > div:first-child .btn-group::-webkit-scrollbar { display: none; }

  /* ═══ 7. Contas a Pagar: 4 botões de filtro em grid 4-col ═══ */
  #fin-contas > div:first-child .btn-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  #fin-contas > div:first-child .btn-group .dash-period-btn {
    text-align: center;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #fin-contas > div:first-child .btn-group::-webkit-scrollbar { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   [Polimento] iPhone SE 320px — ajustes mínimos pra telas de 320–359px
   ═══════════════════════════════════════════════════════════════════
   iPhone SE (1ª/2ª geração) tem 320px de largura. O breakpoint @480px
   já cobre boa parte, mas alguns elementos tinham widths/min-widths
   fixos que sangravam a tela. Aqui apertamos só esses pontos críticos.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  /* Drawers laterais do PDV: 320px era a tela inteira no iPhone SE.
     Vira 100vw com pequena margem de respeito. */
  #pdvCartDrawer,
  #pdvHistDrawer { width: 100vw !important; max-width: 100vw !important; }

  /* Onboarding box com min-width:320 sangrava as margens.
     Apertamos pra caber bem em 320 com algum padding. */
  .ob-modal-card,
  [style*="min-width:320px"] { min-width: 0 !important; max-width: 92vw !important; }

  /* Kanban de OS já scrolla horizontal, mas em 320 a 220px por coluna
     vira muito scroll. Reduz pra 170px. */
  .os-kanban { grid-template-columns: repeat(4, 170px) !important; gap: 8px !important; }

  /* Topbar mobile: já está apertado, mas tb-btn 38px × 4 + logo + título
     estoura. Reduz tb-btn pra 34px. */
  .tb-btn { width: 34px !important; height: 34px !important; font-size: 14px !important; }

  /* Login users em 320: 80px avatar × 3 + gaps = 280px+ (apertado).
     Reduz pra 64px (mantém usabilidade). */
  .lu-avatar { width: 64px !important; height: 64px !important; font-size: 26px !important; }
  .lu-name   { font-size: 11px !important; }
  .login-pass-inner { padding: 18px 14px !important; }

  /* Modais já são fullscreen em 768px, mas padding lateral ainda achata
     campos de formulário. Reduz pra 12px. */
  .modal,
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl { padding: 14px 12px 18px !important; }

  /* KPI row ainda em 2 colunas em 480px. Em 320 fica colado.
     Vira 1 coluna pra respirar. */
  .kpi-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .dash-card .kpi-row { grid-template-columns: 1fr 1fr !important; }
  /* (dash mantém 2 colunas porque os cards já são pequenos lá dentro) */

  /* Botões do modal-foot empilhados em 320 — sem overflow x feio.
     Modal-foot vira coluna se tem 3+ botões. */
  .modal-foot { flex-wrap: wrap !important; gap: 6px !important; }
  .modal-foot .btn { flex: 1 1 calc(50% - 4px); }

  /* Toast: max-width 90vw já existe, mas em 320 com texto longo quebra.
     Permite quebra de linha. */
  .toast { white-space: normal !important; }

  /* Dashboard: cards-shortcuts horizontal scroll já tinha; aperta padding. */
  .dash-shortcuts { padding: 6px 8px !important; gap: 4px !important; }
  .sc-btn         { padding: 6px 10px !important; }
}

/* ═══ fim polimento iPhone SE ══════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   [Polimento] Classes utilitárias de hover (substitui inline JS)
   ═══════════════════════════════════════════════════════════════════
   Substituem onmouseenter/onmouseleave inline pra os 2 padrões mais
   comuns: hover com fundo --surface ou --raised.
   Em mobile (max-width:768px) o hover não aparece — comportamento
   correto pra touch (evita "stuck hover" ao tocar e tirar o dedo).
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .hov-surface { transition: background 0.1s; }
  .hov-surface:hover { background: var(--surface); }

  .hov-raised { transition: background 0.1s; }
  .hov-raised:hover { background: var(--raised); }
}

/* ═══ fim utilitárias hover ════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1 (Quick Wins / só CSS)
   Cópia fiel dos mockups antes/depois discutidos.
   Aplica-se em ≤768px sobrepondo regras anteriores.
   Reversível: deletar este bloco volta ao estado anterior.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── 1. TOPBAR MOBILE ───────────────────────────────────────────── */
  /* Translúcida com blur, padding mais generoso, título case mista */
  .m-topbar-mob{
    background:var(--bar-translucent-bg) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    backdrop-filter:blur(14px) !important;
    border-bottom:0.5px solid var(--bar-translucent-border) !important;
    height:54px !important;
    padding:0 14px !important;
  }
  .m-topbar-mob-logo{display:none !important;} /* logo "HOS" mono fora */
  .m-topbar-mob-page{
    font-size:17px !important;
    font-weight:600 !important;
    letter-spacing:-0.2px !important;
    text-transform:none !important;
  }

  /* Botão "Instalar" sai da topbar — fica acessível pelo menu "Mais" */
  #mobInstallBtn{display:none !important;}

  /* Ícones da topbar mais compactos e em pílula sutil */
  .m-topbar-mob-right .tb-btn{
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    background:var(--hairline-active) !important;
    border:none !important;
    font-size:14px !important;
    color:var(--soft) !important;
  }
  .m-topbar-mob-right .tb-btn:active{
    background:var(--hairline-active-hover) !important;
    transform:scale(0.94);
  }

  /* ── 2. BOTTOM NAV ──────────────────────────────────────────────── */
  /* Translúcida, pill ativa de verdade, labels case mista peso 500 */
  .m-bottomnav{
    background:var(--bar-translucent-bg) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    backdrop-filter:blur(14px) !important;
    border-top:0.5px solid var(--bar-translucent-border) !important;
    padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 8px) !important;
    gap:2px !important;
  }
  .m-bn-item{
    padding:7px 4px !important;
    border-radius:14px !important;
    transition:background 0.15s !important;
  }
  .m-bn-item:active{
    background:var(--hairline-active) !important;
    transform:scale(0.96);
  }
  .m-bn-item.act{
    background:rgba(255,140,66,0.14) !important;
  }
  .m-bn-icon{
    font-size:19px !important;
  }
  .m-bn-label{
    font-family:inherit !important;       /* tira o mono */
    font-size:10px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--ghost) !important;
  }
  .m-bn-item.act .m-bn-label{
    font-weight:600 !important;
    color:var(--a3) !important;
  }
  .m-bn-badge{
    background:var(--warn) !important;
    color:#000 !important;
    font-family:inherit !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    top:3px !important;
    right:8px !important;
  }

  /* ── 3. CARDS PDV ───────────────────────────────────────────────── */
  /* Sem borda de 1px, radius maior, sombra suave, área da imagem maior */
  .prod-card{
    border:none !important;
    border-radius:18px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.3) !important;
    overflow:hidden !important;
    transition:transform 0.12s, box-shadow 0.15s !important;
  }
  .prod-card:active{
    transform:scale(0.97);
    box-shadow:0 1px 2px rgba(0,0,0,0.2) !important;
  }
  .prod-card.in-cart{
    box-shadow:0 0 0 2px var(--ok), 0 1px 3px rgba(0,0,0,0.3) !important;
  }
  .prod-card-img-wrap{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    background:var(--surface) !important;
    border-radius:18px 18px 0 0 !important;
  }
  .prod-card-info{
    border-top:none !important;
  }

  /* ── 4. KPIs MOBILE ─────────────────────────────────────────────── */
  /* Sem borda, fundo levemente elevado, label peso normal sem CAPS-mono */
  .kpi{
    border:none !important;
    background:var(--panel) !important;
    border-radius:14px !important;
    padding:11px 13px !important;
  }
  .kpi-label{
    font-family:inherit !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--muted) !important;
    margin-bottom:4px !important;
  }
  .kpi-val{
    font-size:1.5rem !important;
    font-weight:600 !important;
    letter-spacing:-0.5px !important;
  }
  /* mesmo tratamento para os "cc-kpi" usados no caixa/financeiro */
  .cc-kpi{
    border:none !important;
    background:var(--panel) !important;
    border-radius:14px !important;
    padding:10px 12px !important;
  }
  .cc-kpi::before{display:none !important;} /* tira a faixa colorida em cima */
  .cc-kpi .kpi-label{
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    margin-bottom:3px !important;
  }
  .cc-kpi .kpi-val{
    font-size:20px !important;
    font-weight:600 !important;
    letter-spacing:-0.5px !important;
  }

  /* ── 5. CARDS OS MOBILE ─────────────────────────────────────────── */
  /* Radius maior, padding interno, botão "AVANÇAR" suave */
  .os-card-mob{
    border:none !important;
    border-radius:16px !important;
    padding:13px 14px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  .os-card-mob:active{
    background:var(--raised) !important;
    transform:scale(0.99);
  }
  .os-card-mob-num{
    font-size:10px !important;
    color:var(--dim) !important;
  }
  .os-card-mob-cli{
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.2px !important;
  }
  .os-card-mob-foot{
    border-top:none !important;     /* tira o divisor */
    padding-top:6px !important;
  }
  .os-card-mob-adv{
    height:32px !important;
    padding:0 14px !important;
    font-size:11px !important;
    font-weight:600 !important;
    border-radius:9px !important;
    border:none !important;
    background:rgba(255,140,66,0.14) !important;
    color:var(--a3) !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }
  .os-card-mob-adv.final{
    background:rgba(77,219,143,0.14) !important;
    color:var(--ok) !important;
  }
  .os-card-mob-wa{
    width:32px !important;
    height:32px !important;
  }

  /* ── 6. STOCK ROW (linha de estoque) ────────────────────────────── */
  /* Sem borda separadora — o thumb colorido já cria ritmo */
  .stock-row{
    border-bottom:none !important;
    padding:9px 8px !important;
    border-radius:12px !important;
    margin:0 2px !important;
  }
  .stock-row:active{
    background:var(--raised) !important;
  }
  .stock-thumb{
    border:none !important;
    border-radius:10px !important;
    background:rgba(93,202,165,0.12) !important;
  }
  .stock-name{
    font-size:11.5px !important;
    font-weight:600 !important;
    letter-spacing:0.1px !important;
  }
  .stock-sku{
    font-family:inherit !important;
    font-size:9.5px !important;
    color:var(--muted) !important;
    letter-spacing:0 !important;
  }

  /* ── 7. FILTROS / CHIPS / TABS ──────────────────────────────────── */
  /* tira CAPS+mono dos filtros, deixa case mista peso 500-600 */
  .cat-tab,
  .fin-tab,
  #finTabs .tab,
  .tabs .tab{
    font-family:inherit !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-weight:500 !important;
  }
  .cat-tab.active,
  .fin-tab.active,
  #finTabs .tab.active,
  .tabs .tab.active{
    font-weight:600 !important;
  }

  /* PDV step-bar — labels do stepper sem CAPS */
  #pdvTabBar .pdv-tab{
    font-family:inherit !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-weight:500 !important;
    font-size:13px !important;
  }
  #pdvTabBar .pdv-tab.active{
    font-weight:600 !important;
  }

  /* ── 8. BANNERS / STATUS PILLS ──────────────────────────────────── */
  .caixa-banner{
    font-family:inherit !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-weight:500 !important;
  }

  /* ── 9. BADGES (do pdv-hist e geral) ────────────────────────────── */
  /* Tira CAPS-mono e dá peso 600, fica mais leve */
  .pdv-hist-badge,
  .badge{
    font-family:inherit !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-weight:600 !important;
  }

  /* ── 10. FAB / botão + da topbar (Nova OS, Novo, etc) ───────────── */
  .m-mob-nova-os,
  .m-topbar-mob-right .tb-btn[onclick*="abrirNova"],
  .m-topbar-mob-right .tb-btn[onclick*="novo"],
  .m-topbar-mob-right .tb-btn[onclick*="Nova"]{
    background:rgba(255,140,66,0.14) !important;
    color:var(--a3) !important;
  }

  /* ── 11. CART buttons / ícones com feedback tátil ───────────────── */
  .qty-b:active,
  .pay-btn:active,
  .btn:active,
  .cat-tab:active{
    transform:scale(0.96);
    transition:transform 0.08s !important;
  }

  /* ── 12. content padding ajustado pro novo topbar 54px ──────────── */
  .m-topbar-mob{
    height:54px !important;
  }

}
/* ═══ fim Fase 1 mobile polish ═══════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1.5
   Cobre: Dashboard, Relatórios, Configurações, Clientes
   Mantém o mesmo tratamento da Fase 1: sem CAPS-mono, sem bordas
   neutras, fundo levemente colorido, radius maior, peso 500-600.
   Reversível: deletar este bloco volta ao estado anterior.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── DASHBOARD ──────────────────────────────────────────────────── */
  /* dash-card: sem borda, radius maior, sombra suave */
  .dash-card.card,
  .card.dash-card,
  .dash-card>.card{
    border:none !important;
    border-radius:16px !important;
    background:var(--panel) !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  /* títulos do dashboard sem CAPS-mono */
  .dash-card .card-title{
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--soft) !important;
  }

  /* bkpi-card: KPIs grandes do dashboard - sem borda, sem faixa colorida em cima */
  .bkpi-card{
    border:none !important;
    border-radius:16px !important;
    background:var(--panel) !important;
    padding:14px 14px 12px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  .bkpi-card::before{display:none !important;}
  .bkpi-label{
    font-family:inherit !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--muted) !important;
  }
  .bkpi-val{
    font-family:var(--ff-mono) !important;
    font-size:24px !important;
    font-weight:600 !important;
    letter-spacing:-0.5px !important;
  }
  .bkpi-badge{
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    border:none !important;
  }
  .bkpi-num{
    font-weight:600 !important;
  }
  .bkpi-name{
    font-size:12px !important;
  }

  /* ── RELATÓRIOS ─────────────────────────────────────────────────── */
  /* rel-card: cards de relatório no menu - sem borda, sombra, radius maior */
  .rel-card{
    border:none !important;
    border-radius:16px !important;
    background:var(--panel) !important;
    padding:14px 14px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:transform 0.12s, background 0.15s !important;
  }
  .rel-card:hover{
    transform:none !important;            /* hover não funciona em mobile */
    box-shadow:0 1px 3px rgba(0,0,0,0.25) !important;
  }
  .rel-card:active{
    background:var(--raised) !important;
    transform:scale(0.98);
  }
  .rel-card::before{display:none !important;}
  .rel-card-title{
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:-0.1px !important;
  }
  .rel-card-desc{
    font-size:11px !important;
    color:var(--muted) !important;
  }
  .rel-card-badge{
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    border:none !important;
  }

  /* ── CONFIGURAÇÕES ──────────────────────────────────────────────── */
  /* cfg-row: linhas de configuração sem border-bottom, com padding */
  .cfg-row{
    border-bottom:none !important;
    padding:12px 12px !important;
    border-radius:12px !important;
    margin:0 -4px;
  }
  .cfg-row:active{
    background:var(--raised) !important;
  }
  .cfg-row-lbl{
    font-size:13px !important;
    font-weight:500 !important;
    color:var(--bright) !important;
  }
  .cfg-row-desc{
    font-size:10.5px !important;
    color:var(--muted) !important;
  }

  /* labels de seção sem CAPS-mono */
  .cfg-menu-section-label{
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--soft) !important;
    border-bottom:none !important;
    padding-bottom:0 !important;
    margin-bottom:6px !important;
  }

  /* theme-card: cards de tema com radius maior e sem border 2px */
  .theme-card{
    border-width:1px !important;
    border-radius:14px !important;
    padding:9px !important;
  }
  .theme-card.sel{
    border-width:1.5px !important;
  }
  .theme-card-name{
    font-weight:600 !important;
  }
  .theme-card-sub{
    font-family:inherit !important;
    font-size:10.5px !important;
    color:var(--muted) !important;
  }

  /* mod-card: cards de módulos */
  .mod-card{
    border:none !important;
    border-radius:14px !important;
    background:var(--panel) !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }

  /* biz-type-grid: tipos de negócio */
  .biz-type-nm{
    font-family:inherit !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
  }

  /* ── CLIENTES ───────────────────────────────────────────────────── */
  /* No mobile, a tabela já vira card (ver linha 829 do CSS).
     Aqui ajustamos ESSE card pra ficar igual aos outros do app. */
  #page-clientes .tbl tr{
    background:var(--panel) !important;
    border:none !important;
    border-radius:14px !important;
    padding:12px 14px !important;
    margin-bottom:8px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:transform 0.1s, background 0.15s;
  }
  #page-clientes .tbl tr:active{
    background:var(--raised) !important;
    transform:scale(0.99);
  }
  #page-clientes .tbl td{
    color:var(--soft) !important;
  }
  #page-clientes .tbl td:first-child{
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.2px !important;
    color:var(--bright) !important;
    margin-bottom:4px !important;
  }

  /* ── HEADERS DE TABELA EM GERAL ─────────────────────────────────── */
  /* Quando uma tabela ESTIVER visível em mobile (não-clientes),
     suaviza os headers que são CAPS-mono */
  .tbl th{
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--muted) !important;
  }

  /* tbl-wrap sem borda de 1px */
  .tbl-wrap{
    border:none !important;
    background:transparent !important;
  }

  /* ── CARDS GENÉRICOS: .card com padding mobile ──────────────────── */
  /* Nas várias páginas que usam .card direto, dá um leve respiro.
     NÃO tira a borda do .card genérico pra não regredir o desktop. */
  .card{
    border-radius:14px !important;
  }

  /* ── LABELS DE FORMULÁRIO E TÍTULOS DE SEÇÃO ───────────────────── */
  /* Os "label-mono" (text-transform CAPS) que aparecem em várias
     páginas (formulários de OS, cadastro, modais) ficam mais leves */
  .sec-title{
    letter-spacing:-0.2px !important;
  }

  /* ── BANNER DE ALERTA (estoque baixo, contas vencidas) ──────────── */
  #alertaEstoqueBanner,
  #alertaContasBanner{
    border-radius:12px !important;
    margin:8px 8px !important;
    border:none !important;
    font-family:inherit !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-weight:500 !important;
  }

}
/* ═══ fim Fase 1.5 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1.6
   Cobre páginas com componentes próprios:
   Atacado, Garantias, Conversão, Pós-venda, FAQ, Usuários
   (NF, Cofre, Películas, Regras, Admin já cobertas via genéricos)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── ATACADO ────────────────────────────────────────────────────── */
  /* Linhas da lista de atacadistas: sem border-bottom, padding maior */
  .atk-row{
    border-bottom:none !important;
    padding:11px 12px !important;
    border-radius:12px !important;
    margin:0 4px;
  }
  .atk-row:active{
    background:var(--raised) !important;
  }
  .atk-id{
    font-family:var(--ff-mono) !important;
    font-size:11px !important;
    font-weight:600 !important;
    color:var(--soft) !important;
  }
  .atk-data{
    font-family:inherit !important;
    font-size:10.5px !important;
    color:var(--muted) !important;
    letter-spacing:0 !important;
  }

  /* ── GARANTIAS ──────────────────────────────────────────────────── */
  /* Linhas de garantia: mesmo tratamento de listas */
  .gar-row{
    border-bottom:none !important;
    padding:11px 12px !important;
    border-radius:12px !important;
    margin:0 4px;
  }
  .gar-row:active{
    background:var(--raised) !important;
  }

  /* ── CONVERSÃO (chat AI) ────────────────────────────────────────── */
  /* Topbar interna do chat: tipografia mais leve */
  #page-conversao .conv-topbar{
    padding:11px 14px !important;
  }
  #page-conversao .conv-topbar-title{
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.2px !important;
  }
  #page-conversao .conv-topbar-sub{
    font-size:10.5px !important;
    color:var(--muted) !important;
  }
  #page-conversao .conv-avatar-icon{
    width:32px !important;
    height:32px !important;
    border:none !important;
    border-radius:10px !important;
  }
  /* segmented control (tipo de assistente) sem border */
  #page-conversao .conv-tipo-group{
    border:none !important;
    background:var(--hairline-active) !important;
  }
  #page-conversao .conv-tipo-btn{
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }
  #page-conversao .conv-tipo-btn.active{
    border:none !important;
    font-weight:600 !important;
  }
  /* Bolhas de mensagem: sem borda, radius maior, mais respiro */
  #page-conversao .conv-bubble{
    padding:11px 14px !important;
    font-size:13.5px !important;
    line-height:1.6 !important;
  }
  #page-conversao .conv-bubble.ai{
    border:none !important;
    background:var(--panel) !important;
    border-radius:16px 16px 16px 4px !important;
  }
  #page-conversao .conv-bubble.user{
    border:none !important;
    border-radius:16px 16px 4px 16px !important;
  }
  /* Cards de "starter" (sugestões iniciais) */
  #page-conversao .conv-starter{
    border:none !important;
    background:var(--panel) !important;
    border-radius:14px !important;
    padding:11px 14px !important;
    font-size:13px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  #page-conversao .conv-starter:active{
    background:var(--raised) !important;
    transform:scale(0.99);
  }
  /* Pílulas de sugestão */
  #page-conversao .conv-sug{
    border:none !important;
    background:var(--hairline-soft) !important;
    font-size:11.5px !important;
  }
  #page-conversao .conv-bubble-meta{
    font-size:10.5px !important;
    color:var(--muted) !important;
  }
  #page-conversao .conv-copy-btn{
    border:none !important;
    background:var(--hairline-active) !important;
    font-size:10.5px !important;
  }

  /* ── PÓS-VENDA ──────────────────────────────────────────────────── */
  /* Cards de campanha: sem borda, fundo elevado */
  .pv-camp-card{
    border:none !important;
    background:var(--panel) !important;
    border-radius:14px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:transform 0.12s, background 0.15s !important;
  }
  .pv-camp-card:active{
    transform:scale(0.99);
    background:var(--raised) !important;
  }
  .pv-camp-card.pv-active{
    border:none !important;
    background:var(--raised) !important;
    box-shadow:0 0 0 1.5px var(--a3), 0 1px 3px rgba(0,0,0,0.25) !important;
  }
  /* badges canal (whatsapp / email) sem CAPS-mono */
  .pv-badge-wa,
  .pv-badge-em{
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    border:none !important;
  }

  /* ── FAQ ────────────────────────────────────────────────────────── */
  .faq-cat-btn{
    font-family:inherit !important;
    font-size:11.5px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    border-radius:12px !important;
    padding:7px 12px !important;
  }
  .faq-cat-btn.active,
  .faq-cat-btn[class*="ativ"]{
    font-weight:600 !important;
  }

  /* ── USUÁRIOS ───────────────────────────────────────────────────── */
  /* Mesma transformação que aplicamos em #page-clientes — a linha
     da tabela vira card mais bonito no mobile */
  #page-usuarios .tbl tr{
    background:var(--panel) !important;
    border:none !important;
    border-radius:14px !important;
    padding:12px 14px !important;
    margin-bottom:8px !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:transform 0.1s, background 0.15s;
  }
  #page-usuarios .tbl tr:active{
    background:var(--raised) !important;
    transform:scale(0.99);
  }
  #page-usuarios .tbl td:first-child{
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:-0.2px !important;
    color:var(--bright) !important;
    margin-bottom:3px !important;
  }
  #page-usuarios .tbl td:nth-child(3){
    font-size:11px !important;
    color:var(--muted) !important;
  }

}
/* ═══ fim Fase 1.6 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1.7
   Selects de filtro com cara de app (encorpados, sem borda, chevron SVG)
   Aplicado em .fi-filter (só usado no #osFiltrosBar — 2 selects do OS)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* Wrapper já é flex no HTML; aqui ajustamos o select em si */
  .fi-filter{
    /* tamanho confortável de toque */
    height:48px !important;
    padding:0 38px 0 16px !important;
    /* visual: sem borda, fundo elevado, sombra suave */
    border:none !important;
    border-radius:14px !important;
    background:var(--surface) !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25) !important;
    /* tipografia: sem CAPS-mono, peso 500 */
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:500 !important;
    color:var(--bright) !important;
    letter-spacing:-0.1px !important;
    /* esconde o chevron nativo do navegador */
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    /* chevron customizado via SVG inline (cor #969080 = var(--ghost)) */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23969080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    cursor:pointer !important;
    transition:background 0.15s, transform 0.1s !important;
  }

  /* feedback tátil */
  .fi-filter:active{
    background-color:var(--raised) !important;
    transform:scale(0.99);
  }

  /* foco: fundo um pouco mais claro em vez da borda laranja */
  .fi-filter:focus{
    border:none !important;
    background-color:var(--raised) !important;
    outline:none !important;
  }

  /* sobrescreve a regra antiga do osFiltrosBar pra os selects ficarem
     com largura cheia e bem espaçados (em vez de width:150px herdado) */
  #osFiltrosBar{
    gap:8px !important;
  }
  #osFiltrosBar .fi-filter{
    flex:1 1 auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  /* tema claro/ERP: fundo branco-suave, chevron mais escuro */
  body.mode-light .fi-filter,
  body.mode-erp .fi-filter{
    background-color:var(--panel) !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f5e5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.06) !important;
  }

}
/* ═══ fim Fase 1.7 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1.8
   Inputs/selects/textareas com estilo "encorpado-compacto" no mobile
   - 40px de altura (era ~35px)
   - sem borda 1px (era 1px solid --rim)
   - fundo elevado var(--surface)
   - radius 12px
   - foco com fundo levemente mais claro em vez de borda laranja
   - chevron SVG nos selects (não os fi-filter, que já têm tratamento maior)
   Aplicado em .fi (262 inputs + 65 selects + ~14 textareas)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── INPUTS / SELECTS / TEXTAREAS COMUNS (.fi) ──────────────────── */
  input.fi,
  select.fi,
  textarea.fi{
    border:none !important;
    background:var(--surface) !important;
    border-radius:12px !important;
    padding:0 14px !important;
    /* font-size:16px é mantido (já estava na regra antiga pra evitar zoom iOS) */
    color:var(--bright) !important;
    transition:background 0.15s !important;
  }

  /* altura consistente em inputs/selects (40px); textareas ficam livres */
  input.fi,
  select.fi{
    height:40px !important;
    line-height:40px !important;
  }
  textarea.fi{
    padding:10px 14px !important;
    line-height:1.5 !important;
    min-height:80px !important;
  }

  /* foco: sem borda laranja, fundo um pouco mais claro */
  input.fi:focus,
  select.fi:focus,
  textarea.fi:focus{
    border:none !important;
    background:var(--raised) !important;
    box-shadow:none !important;
    outline:none !important;
  }

  input.fi::placeholder,
  textarea.fi::placeholder{
    color:var(--muted) !important;
  }

  /* ── SELECTS COMUNS (.fi) ───────────────────────────────────────── */
  /* chevron SVG inline (sobreescreve o ▼ nativo) */
  select.fi{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    padding-right:38px !important;
    cursor:pointer !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23969080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
  }

  /* ── INPUT DE DATA ──────────────────────────────────────────────── */
  /* Garante que o picker nativo continue funcionando, ajusta cor */
  input[type="date"].fi,
  .input-date{
    border:none !important;
    background:var(--surface) !important;
    border-radius:12px !important;
    height:40px !important;
    padding:0 14px !important;
  }
  /* ícone do calendário no Chrome/Android */
  input[type="date"].fi::-webkit-calendar-picker-indicator,
  .input-date::-webkit-calendar-picker-indicator{
    filter:invert(0.6);
    cursor:pointer;
  }

  /* ── CASOS ESPECIAIS QUE NÃO DEVEM HERDAR ALTURA 40px ──────────── */
  /* Inputs inline no carrinho do PDV — já têm sizing próprio */
  .ci-obs-input,
  .ci-desc-input,
  .cart-desc-input,
  .troco-box-input{
    height:auto !important;
    line-height:normal !important;
  }

  /* Inputs do PDV de quantidade (qtd) — mantêm tamanho original */
  #cartDesconto{
    height:auto !important;
  }

  /* ── TEMA CLARO/ERP: ajusta fundo e chevron ─────────────────────── */
  body.mode-light input.fi,
  body.mode-light select.fi,
  body.mode-light textarea.fi,
  body.mode-erp input.fi,
  body.mode-erp select.fi,
  body.mode-erp textarea.fi{
    background:var(--panel) !important;
    color:var(--bright) !important;
  }
  body.mode-light input.fi:focus,
  body.mode-light select.fi:focus,
  body.mode-light textarea.fi:focus,
  body.mode-erp input.fi:focus,
  body.mode-erp select.fi:focus,
  body.mode-erp textarea.fi:focus{
    background:var(--surface) !important;
  }
  body.mode-light select.fi,
  body.mode-erp select.fi{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f5e5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
  }

}
/* ═══ fim Fase 1.8 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 1.9 (5 verdes finais)
   1. Botões com mais peso e altura confortável
   2. Search-bar com ícone destacado
   3. Toasts com blur
   4. Menu "Mais" agrupado
   5. Skeletons disponíveis (utilitário)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── 1. BOTÕES ──────────────────────────────────────────────────── */
  /* sobreescreve a regra antiga `.btn{font-size:12px;padding:8px 14px}` */
  .btn{
    height:42px !important;
    padding:0 18px !important;
    font-size:13px !important;
    font-weight:600 !important;
    border-radius:12px !important;
    letter-spacing:-0.1px !important;
  }
  /* botões pequenos em sec-actions ficam um pouco menores
     pra não dominar o header da página */
  .sec-actions .btn{
    height:36px !important;
    padding:0 14px !important;
    font-size:12px !important;
    border-radius:10px !important;
  }
  /* feedback tátil */
  .btn:active{
    transform:scale(0.97);
    transition:transform 0.08s !important;
  }
  /* btn-primary fica com fundo cheio laranja, sem brilho excessivo */
  .btn-primary{
    background:var(--a3) !important;
    color:#fff !important;
    border:none !important;
    box-shadow:0 1px 3px rgba(255,140,66,0.25);
  }
  .btn-primary:active{
    background:var(--a4) !important;
    box-shadow:0 1px 2px rgba(255,140,66,0.15);
  }
  /* btn-danger e btn-ok perdem a borda 1px, ganham fundo cheio sutil */
  .btn-danger{
    border:none !important;
    background:rgba(255,90,108,0.14) !important;
    color:var(--err) !important;
  }
  .btn-danger:active{
    background:rgba(255,90,108,0.22) !important;
  }
  .btn-ok{
    border:none !important;
    background:rgba(77,219,143,0.14) !important;
    color:var(--ok) !important;
  }
  .btn-ok:active{
    background:rgba(77,219,143,0.22) !important;
  }

  /* ── 2. SEARCH-BAR ──────────────────────────────────────────────── */
  /* sem borda, fundo elevado, altura 44px, ícone com cor laranja sutil */
  .search-bar{
    border:none !important;
    background:var(--surface) !important;
    border-radius:14px !important;
    height:44px !important;
    padding:0 14px !important;
    gap:10px !important;
    transition:background 0.15s !important;
  }
  .search-bar:focus-within{
    background:var(--raised) !important;
    box-shadow:none !important;
  }
  /* ícone de busca no início da barra fica colorido sutil pra dar destaque */
  .search-bar > svg:first-child,
  .search-bar > i:first-child,
  .search-bar > span:first-child{
    color:var(--a3) !important;
    opacity:0.85;
  }
  /* o input dentro perde herança visual */
  .search-bar input{
    border:none !important;
    background:transparent !important;
    padding:0 !important;
    height:100% !important;
    font-size:14px !important;
    color:var(--bright) !important;
  }
  .search-bar input:focus{
    box-shadow:none !important;
    outline:none !important;
  }

  /* mob-search-bar (a barra de busca mobile específica) — mesmo tratamento */
  .mob-search-bar{
    background:var(--surface) !important;
    border:none !important;
    border-radius:14px !important;
    height:44px !important;
  }

  /* ── 3. TOAST ───────────────────────────────────────────────────── */
  .toast{
    background:rgba(22,26,36,0.92) !important;
    -webkit-backdrop-filter:blur(16px) !important;
    backdrop-filter:blur(16px) !important;
    border:none !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.4) !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:500 !important;
    padding:10px 16px 10px 12px !important;
    color:var(--bright) !important;
    letter-spacing:-0.1px !important;
  }
  /* toasts coloridos (success/err/warn) só ajustam acento, mantêm o blur */
  .toast.toast-ok,
  .toast.success{
    background:rgba(77,219,143,0.18) !important;
    color:var(--ok) !important;
  }
  .toast.toast-err,
  .toast.error{
    background:rgba(255,90,108,0.18) !important;
    color:var(--err) !important;
  }
  .toast.toast-warn,
  .toast.warning{
    background:rgba(255,179,0,0.18) !important;
    color:var(--warn) !important;
  }
  .toast-bar{
    border-radius:0 0 14px 14px !important;
  }

  /* ── 4. MENU "MAIS" (m-mais) ────────────────────────────────────── */
  /* group label sem CAPS */
  .m-mais-group-label{
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:var(--muted) !important;
    padding:14px 16px 6px !important;
  }
  /* itens agrupados com fundo unificado em vez de divisores */
  .m-mais-item{
    padding:13px 16px !important;
    transition:background 0.12s !important;
  }
  .m-mais-item:active{
    background:var(--raised) !important;
  }
  /* ícone no início do item: sem borda, fundo colorido sutil */
  .m-mais-icon{
    border:none !important;
    background:var(--hairline-active) !important;
    border-radius:11px !important;
    width:38px !important;
    height:38px !important;
  }
  .m-mais-label{
    font-weight:500 !important;
    letter-spacing:-0.1px !important;
  }
  .m-mais-sub{
    color:var(--muted) !important;
  }
  .m-mais-chev{
    color:var(--ghost) !important;
  }

  /* ── 5. SKELETONS (utilitários disponíveis) ─────────────────────── */
  /* Pra usar: <div class="sk sk-line"></div>
              <div class="sk sk-block"></div>
              <div class="sk sk-circle"></div> */
  .sk{
    background:linear-gradient(90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.04) 100%) !important;
    background-size:200% 100% !important;
    animation:sk-shimmer 1.4s ease-in-out infinite !important;
    border-radius:8px !important;
    display:block !important;
  }
  .sk-line{
    height:14px !important;
    width:100% !important;
    margin:6px 0 !important;
    border-radius:7px !important;
  }
  .sk-line.sk-sm{height:11px !important;width:60% !important;}
  .sk-line.sk-md{width:80% !important;}
  .sk-line.sk-title{height:18px !important;width:50% !important;}
  .sk-block{
    height:80px !important;
    width:100% !important;
    border-radius:14px !important;
    margin:8px 0 !important;
  }
  .sk-circle{
    width:40px !important;
    height:40px !important;
    border-radius:50% !important;
  }
  .sk-card{
    height:120px !important;
    width:100% !important;
    border-radius:16px !important;
    margin:8px 0 !important;
  }

}

/* keyframe shimmer (fora da media query — disponível também em desktop) */
@keyframes sk-shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
/* ═══ fim Fase 1.9 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 2.0 (transições + pull-to-refresh)
   - Transição entre páginas: fade + slide vertical sutil
   - Scroll suave em listas longas
   - Pull-to-refresh: SOMENTE INFRA CSS — exige JS pra funcionar
   ════════════════════════════════════════════════════════════════════ */

/* keyframes ficam fora da media query (disponíveis sempre) */
@keyframes pageInMobile{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes ptr-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@media (max-width:768px){

  /* ── 6. TRANSIÇÃO ENTRE PÁGINAS ─────────────────────────────────── */
  /* sobreescreve a animação .page existente (que é só fade) com
     uma combinação mais "app": fade + leve slide vertical de baixo */
  .page.active{
    animation:pageInMobile 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  /* respeita o usuário que prefere movimento reduzido (acessibilidade) */
  @media (prefers-reduced-motion:reduce){
    .page.active{
      animation:fadeIn 0.18s ease !important;
    }
  }

  /* ── 6+. SCROLL SUAVE EM LISTAS LONGAS ──────────────────────────── */
  /* Só onde realmente faz sentido — listas com scroll vertical */
  .prod-grid,
  .cart-items,
  .pdv-hist,
  .dash-os-list,
  .dash-critico-list,
  .dash-fin-list,
  .dash-equipe-list,
  .notif-list,
  .user-dropdown,
  .os-lista-mobile,
  .content{
    scroll-behavior:smooth !important;
    overscroll-behavior:contain !important;
  }

  /* ── 7. PULL-TO-REFRESH — INFRA CSS (precisa de JS pra funcionar) ─ */
  /* Container do indicador. Posicionar logo acima do conteúdo:
     <div class="ptr-host">
       <div class="ptr-indicator"><div class="ptr-spinner"></div></div>
       ...conteúdo da lista...
     </div> */
  .ptr-host{
    position:relative;
    overflow:hidden;
  }

  .ptr-indicator{
    position:absolute;
    top:-56px;                          /* escondido por padrão acima */
    left:0;
    right:0;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    transition:transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index:5;
  }

  /* O JS deve adicionar a classe .ptr-pulling enquanto o usuário puxa,
     e definir CSS var --ptr-progress de 0 a 1 conforme o puxão.
     Quando atingir 1, adicionar .ptr-refreshing e fazer o fetch. */
  .ptr-host.ptr-pulling .ptr-indicator{
    transform:translateY(calc(56px * var(--ptr-progress, 0)));
  }
  .ptr-host.ptr-refreshing .ptr-indicator{
    transform:translateY(56px);
  }

  /* Spinner em si — círculo com borda animada */
  .ptr-spinner{
    width:24px;
    height:24px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,0.1);
    border-top-color:var(--a3);
    transition:opacity 0.2s, transform 0.2s;
    opacity:0.4;
  }
  /* enquanto puxa: spinner gira proporcional ao puxão (JS pode setar
     o transform inline; o CSS abaixo é o fallback estático) */
  .ptr-host.ptr-pulling .ptr-spinner{
    opacity:calc(0.4 + (0.6 * var(--ptr-progress, 0)));
    transform:rotate(calc(360deg * var(--ptr-progress, 0)));
  }
  /* atingiu o limite: spinner anima sozinho continuamente */
  .ptr-host.ptr-refreshing .ptr-spinner{
    opacity:1;
    animation:ptr-spin 0.8s linear infinite;
  }

  /* Sumir suavemente quando terminar (JS remove .ptr-refreshing) */
  .ptr-host:not(.ptr-pulling):not(.ptr-refreshing) .ptr-indicator{
    transform:translateY(0);
  }

}
/* ═══ fim Fase 2.0 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MOBILE POLISH — Fase 2.1 (PTR funcional + rubber band)
   Complementa a infra da Fase 2.0 com ajustes de runtime.
   Funciona em conjunto com hybrid-ptr.js (incluído após app.js).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── PTR: ajustes finos pra funcionar bem em runtime ────────────── */
  .ptr-host{
    /* o indicator é absolute, então o host precisa ser relative */
    position:relative;
  }
  /* Quando NÃO está puxando nem refrescando, transição rápida pro
     indicator voltar suavemente ao topo escondido */
  .ptr-host:not(.ptr-pulling):not(.ptr-refreshing) .ptr-indicator{
    transition:transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Enquanto puxa, sem transition (segue o dedo) */
  .ptr-host.ptr-pulling .ptr-indicator{
    transition:none;
  }
  /* Bloqueia a seleção de texto durante o gesto pra não atrapalhar */
  .ptr-host.ptr-pulling{
    user-select:none;
    -webkit-user-select:none;
  }

  /* ── RUBBER BAND ────────────────────────────────────────────────── */
  /* O JS aplica transform inline; aqui só garantimos transform-origin
     e que o container não corte o que sobrou */
  [data-rubber]{
    transform-origin:center center;
    will-change:transform;
  }
  /* Em iOS o overscroll nativo já faz rubber band, então marcamos
     containers com data-rubber pra desativar o nativo e usar o nosso
     (que funciona em Android também — comportamento consistente) */
  [data-rubber]{
    overscroll-behavior:contain;
  }

}
/* ═══ fim Fase 2.1 ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FASE 2 #11 — Centavos discretos no saldo (truque tipo Nubank)
   Classe usada por finFmtHTML() em saldos de destaque.
   ════════════════════════════════════════════════════════════════════ */
.cents-sub{
  font-size:0.65em;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
  margin-left:1px;
}
@media (max-width:768px){
  /* No mobile o saldo é maior, então os centavos podem ser ainda mais discretos */
  .cents-sub{
    font-size:0.6em;
  }
}
/* ═══ fim Fase 2 #11 ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FASE 2 #12 — Faixa colorida vertical no card OS (prioridade/status)
   ════════════════════════════════════════════════════════════════════ */
.os-card-mob{
  /* garantir que o stripe possa ser absolute */
  position:relative;
}
.os-card-mob-stripe{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:3px 0 0 3px;
  pointer-events:none;
}
@media (max-width:768px){
  /* o card no mobile já tem padding interno; só garantimos que o stripe
     ainda fique visível mesmo sem borda (Fase 1.5 tirou as bordas) */
  .os-card-mob-stripe{
    width:3px;
    border-radius:16px 0 0 16px;  /* combina com o radius do card mobile */
  }
}
/* ═══ fim Fase 2 #12 ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FASE 2 #10 — Status com bolinha + texto inline (substitui pílulas CAPS)
   ════════════════════════════════════════════════════════════════════ */
.status-inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:500;
  letter-spacing:-0.1px;
}
.status-inline-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
}
.prio-inline{
  font-size:11px;
  font-weight:500;
  letter-spacing:-0.1px;
}
@media (max-width:768px){
  .status-inline{
    font-size:10.5px;
  }
  .prio-inline{
    font-size:10.5px;
  }
}
/* ═══ fim Fase 2 #10 ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FIX — Parcelamento no PDV mobile cortando 3ª linha do card
   Causa: max-height:120px + grid auto-fill cortava "sem taxa"/"+2.99%"
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Espaço suficiente pra mostrar 4 linhas de parcelas (8 opções) sem
     transbordar a tela; se tiver mais que isso, scrolla dentro mesmo */
  #parcelasBox{
    max-height:280px !important;
  }
  /* Grid forçado em 2 colunas — combina com #parcelasGrid já existente
     no override do max-width 768, mas garante que cada card tem largura
     consistente e não fica apertado em telas estreitas */
  #parcelasGrid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
    padding:10px !important;
  }
  /* Cada card de parcela: garante altura mínima pra caber as 3 linhas */
  #parcelasGrid > div{
    min-height:62px !important;
    padding:9px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:1px !important;
  }
}
/* ═══ fim fix parcelas ═══════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FIX — Modal torto no mobile (scroll-x indesejado)
   ────────────────────────────────────────────────────────────────────
   Problema: o .modal mobile (bottom sheet 100% largura) não tinha
   overflow-x:hidden. Qualquer filho que passasse de 100vw (label longo,
   flex sem min-width:0, etc) criava scroll horizontal. Quando o usuário
   arrastava lateralmente, o conteúdo deslizava e ficava nessa posição
   até o modal fechar.
   Solução: forçar overflow-x:hidden em todos os modais no mobile, e
   garantir que filhos diretos não estourem (min-width:0 já existe via
   .modal>* mas reforço aqui pra inputs/selects/textareas que entram
   depois via JS).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl{
    overflow-x:hidden !important;
    overscroll-behavior-x:contain !important;
  }
  /* inputs/selects/textareas dentro de modais nunca devem ultrapassar
     a largura do container — protege contra overflow horizontal vindo
     de placeholders longos ou values colados */
  .modal .fi,
  .modal input,
  .modal select,
  .modal textarea{
    max-width:100%;
    box-sizing:border-box;
  }
}
/* ═══ fim fix modal torto ═══════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FIX — Bloqueio de zoom no mobile (camada CSS)
   ────────────────────────────────────────────────────────────────────
   touch-action:manipulation no body desabilita double-tap-to-zoom
   nativo e remove o delay de 300ms de clique. Combina com a camada
   JS no <head> que pega o pinch (touchmove 2+ dedos) e o gesturestart
   do iOS Safari.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  html,body{
    touch-action:manipulation;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
}
/* ═══ fim fix bloqueio zoom ═════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   AUDITORIA MOBILE — Fixes V1 + V7 + V8
   ────────────────────────────────────────────────────────────────────
   V1: Safe area inset-bottom no .main mobile (iPhone com home
       indicator perdia o último item de listas).
   V7: Selects de filtro com width px fixa em estilo inline. No
       mobile cada um ficava com largura aleatória (130/160/200/220px)
       criando layout salada. Forçados a 100%.
   V8: page-nf usava grids 1fr 1fr inline em 4 abas. No mobile
       conteúdo ficava apertado. Forçados a 1 coluna.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* ── V1: Safe area no main ─────────────────────────────────────── */
  /* Soma os 64px da bottom nav com env(safe-area-inset-bottom) pra
     que o último item da lista nunca fique atrás do home indicator
     em iPhones com notch/dynamic island.
     Não afeta o PDV: a regra body:has(#page-pdv.active) .main usa
     padding-bottom:0 !important com seletor mais específico. */
  .main{
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* ── V7: Selects de filtro com largura fixa ────────────────────── */
  /* Lista cirúrgica de IDs — só os selects que estão em barras de
     filtro (Estoque, Compras, Pagamentos, Lançamentos, Fluxo,
     Contas). NÃO inclui selects de formulário em modais (esses já
     têm tratamento próprio). */
  #filterEstCelStatus,
  #filterEstCat,
  #filterEstStatus,
  #sortPec,
  #comprasFiltForn,
  #comprasFiltStatus,
  #pgtosFiltForn,
  #filterLancTipo,
  #filterLancCat,
  #fluxoFiltroTipo,
  #fluxoFiltroCat,
  #contasFiltCat{
    width:100% !important;
    max-width:none !important;
    flex:1 1 auto !important;
  }

  /* Inputs de data do Fluxo de Caixa lado a lado — viram 50/50 */
  #fluxoDataInicio,
  #fluxoDataFim{
    width:calc(50% - 4px) !important;
    flex:1 1 calc(50% - 4px) !important;
    min-width:0 !important;
  }

  /* Search-bars com largura px fixa em sec-actions — viram fluidas.
     Já existe regra .sec-actions .search-bar{flex:1;min-width:0}
     na linha 783, mas o style="width:Xpx" inline ganha. Aqui forço. */
  .sec-actions .search-bar[style*="width:"]{
    width:100% !important;
    flex:1 1 100% !important;
    min-width:0 !important;
  }

  /* Search "Buscar regra" na página Regras (V3 entra junto, é o
     mesmo padrão — input solto em sec-actions com width:180px) */
  #regraSearch{
    width:100% !important;
    flex:1 1 100% !important;
  }

  /* ── V8: page-nf grids 1fr 1fr ─────────────────────────────────── */
  /* As 4 abas (Guia, Cofins, Como Emitir, Histórico) usam grids
     1fr 1fr inline. No mobile viram coluna única.
     Seletor preciso: "1fr 1fr;" termina com ; (próximo declaration)
     ou "1fr 1fr "/"1fr 1fr\"" (final do style). Evita match em
     "1fr 1fr 1fr" se for adicionado no futuro. */
  #page-nf [style*="grid-template-columns:1fr 1fr;"],
  #page-nf [style*="grid-template-columns: 1fr 1fr;"]{
    grid-template-columns:1fr !important;
  }
}

/* ── V1 fine-tuning para telas <480px ─────────────────────────── */
@media (max-width:480px){
  /* A regra original na linha 980 dava 60px (4px a menos que 64).
     Aqui mantenho a redução e somo o safe-area. */
  .main{
    padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)) !important;
  }
}
/* ═══ fim auditoria mobile V1+V7+V8 ════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   AUDITORIA DE CORES — C4 + C5
   ────────────────────────────────────────────────────────────────────
   C4: Topbar/bottom-nav mobile usavam rgba(11,14,20,0.85) hardcoded.
       Em temas claros (light, erp), ficavam barras pretas sobre fundo
       claro. Agora respeitam o tema via variável.
   C5: Bordas translúcidas brancas (rgba(255,255,255,0.x)) na
       modernização mobile sumiam em temas claros. Mesma solução.
   ────────────────────────────────────────────────────────────────────
   Estratégia: variáveis com fallback escuro no :root + override
   por classe de tema. Só aplicadas onde existe o problema (mobile).
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bar-translucent-bg:        rgba(11,14,20,0.85);
  --bar-translucent-border:    rgba(255,255,255,0.06);
  --hairline-soft:             rgba(255,255,255,0.06);
  --hairline-active:           rgba(255,255,255,0.04);
  --hairline-active-hover:     rgba(255,255,255,0.08);
}
body.mode-light,
body.mode-erp{
  --bar-translucent-bg:        rgba(255,255,255,0.85);
  --bar-translucent-border:    rgba(0,0,0,0.08);
  --hairline-soft:             rgba(0,0,0,0.06);
  --hairline-active:           rgba(0,0,0,0.04);
  --hairline-active-hover:     rgba(0,0,0,0.08);
}
/* ═══ fim auditoria de cores C4+C5 ═════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   AUDITORIA DE CORES — C4 conseq.: textos da topbar/nav em tema claro
   ────────────────────────────────────────────────────────────────────
   Como agora a topbar/bottom-nav respeitam o tema (ficam claras em
   modo claro/erp), os textos e ícones que eram bege-claro ficam
   invisíveis sobre fundo branco. Aqui forçamos cor escura nesses
   elementos quando em tema claro/erp.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  body.mode-light .m-topbar-mob-page,
  body.mode-erp .m-topbar-mob-page{
    color:var(--bright) !important;
  }
  body.mode-light .m-topbar-mob-right .tb-btn,
  body.mode-erp .m-topbar-mob-right .tb-btn{
    color:var(--dim) !important;
  }
  body.mode-light .m-bn-label,
  body.mode-erp .m-bn-label{
    color:var(--ghost) !important;
  }
  body.mode-light .m-bn-item.act .m-bn-label,
  body.mode-erp .m-bn-item.act .m-bn-label{
    color:var(--a3) !important;
  }
  /* Ícone do bottom-nav (emoji ou SVG) — em tema escuro herdam cor
     natural; em tema claro precisa garantir contraste */
  body.mode-light .m-bn-icon,
  body.mode-erp .m-bn-icon{
    color:var(--dim) !important;
  }
  body.mode-light .m-bn-item.act .m-bn-icon,
  body.mode-erp .m-bn-item.act .m-bn-icon{
    color:var(--a3) !important;
  }
}
/* ═══ fim consequência C4 ════════════════════════════════════════════ */

/* ═══ [S35] Usuários & Acessos — shell unificado ══════════════════════
   Container único + segmented control + KPIs + tabelas custom (div-based)
   Padrão idêntico ao .pv-shell da S34, scopado em .usr-shell pra não
   afetar outras telas que usem .tbl ou .pv-* classes.
   ═════════════════════════════════════════════════════════════════════ */

.usr-shell{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--r-xl);
  padding:6px 6px 18px;
  margin-top:18px;
}

/* ── Segmented control de tabs ── */
.usr-shell-tabs{
  display:flex;gap:4px;
  background:var(--deep);
  border-radius:10px;
  padding:5px;
  margin-bottom:18px;
}
.usr-shell-tab{
  flex:1;
  padding:11px 14px;
  text-align:center;
  border-radius:7px;
  font-size:13px;
  color:var(--dim);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  border:1px solid transparent;
  user-select:none;
}
.usr-shell-tab:hover{color:var(--body);}
.usr-shell-tab.active{
  background:var(--surface);
  color:var(--bright);
  font-weight:600;
  border-color:var(--rim);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.usr-shell-tab-icon{font-size:14px;line-height:1;}
.usr-shell-tab-count{
  background:rgba(138,133,124,.12);
  color:var(--dim);
  font-size:11px;
  padding:2px 7px;
  border-radius:10px;
  font-weight:700;
  font-family:var(--ff-mono);
  min-width:22px;
  text-align:center;
}
.usr-shell-tab.active .usr-shell-tab-count{
  background:rgba(255,140,66,.15);
  color:var(--a3);
}

/* ── Cabeçalho de cada pane: explicação + ações ── */
.usr-shell-pane{padding:0 14px;}
.usr-pane-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.usr-pane-desc{
  flex:1;
  min-width:240px;
  font-size:12px;
  color:var(--dim);
  line-height:1.55;
  max-width:560px;
}
.usr-pane-actions{
  display:flex;gap:8px;align-items:center;
  flex-shrink:0;
}

/* ── KPIs (3 cards no topo) ── */
.usr-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.usr-kpi{
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:12px 14px;
}
.usr-kpi-label{
  font-size:11px;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.usr-kpi-val{
  font-size:22px;
  font-weight:600;
  color:var(--bright);
  font-family:var(--ff-mono);
  line-height:1.15;
}
.usr-kpi-val-sm{
  font-size:13px;
  font-family:inherit;
  margin-top:6px;
}

/* ── Tabela custom (div-based, não <table>) ── */
.usr-table-card{
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:14px;
}
.usr-table-head{
  padding:11px 16px;
  background:var(--ink);
  border-bottom:1px solid var(--edge);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
  font-weight:600;
  display:grid;
  align-items:center;
  gap:0;
}
.usr-grid-membros{
  grid-template-columns:1fr 110px 100px 110px 100px;
}
.usr-grid-crachas{
  grid-template-columns:1fr 140px 130px 140px 100px 100px;
}

/* Linhas (cada .usr-row é um <div>, não <tr>) */
.usr-row{
  display:grid;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.03);
  gap:0;
}
.usr-row:last-child{border-bottom:none;}
.usr-row.usr-grid-membros{grid-template-columns:1fr 110px 100px 110px 100px;}
.usr-row.usr-grid-crachas{grid-template-columns:1fr 140px 130px 140px 100px 100px;}

.usr-row-empty{
  padding:20px 16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* ── Avatar + email do membro ── */
.usr-mem{display:flex;align-items:center;gap:10px;}
.usr-mem-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  flex-shrink:0;
}
.usr-mem-avatar-dono{
  background:rgba(61,220,132,.12);
  border:1px solid rgba(61,220,132,.3);
  color:var(--ok);
}
.usr-mem-avatar-out{
  background:rgba(255,140,66,.12);
  border:1px solid rgba(255,140,66,.3);
  color:var(--a3);
}
.usr-mem-info{min-width:0;}
.usr-mem-email{
  font-size:13px;color:var(--bright);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usr-mem-sub{font-size:11px;color:var(--muted);margin-top:1px;}

/* ── Badges de papel ── */
.usr-role{
  display:inline-block;
  font-size:10px;
  padding:3px 9px;
  border-radius:5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  border:1px solid;
}
.usr-role-dono{
  background:rgba(61,220,132,.12);
  color:var(--ok);
  border-color:rgba(61,220,132,.3);
}
.usr-role-out{
  background:rgba(255,140,66,.12);
  color:var(--a3);
  border-color:rgba(255,140,66,.3);
}

/* ── Status com bolinha ── */
.usr-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;
}
.usr-status-on{color:var(--ok);}
.usr-status-off{color:var(--err);}
.usr-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
}

/* ── Data em mono ── */
.usr-date{font-size:12px;color:var(--body);font-family:var(--ff-mono);}

/* ── Subtítulo de seção (Convites pendentes) ── */
.usr-section-sub{
  display:flex;align-items:center;gap:8px;
  font-size:13px;
  color:var(--dim);
  margin:18px 0 10px;
  font-weight:600;
}
.usr-section-sub-icon{font-size:14px;}

/* ── Empty state (convites vazios) ── */
.usr-pendentes-empty{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:var(--deep);
  border:1px dashed var(--edge);
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
}
.usr-pendentes-icon{font-size:14px;opacity:.5;}

/* ── Botões inline da tabela ── */
.usr-row .btn-ghost{
  padding:5px 11px;font-size:11px;
}

/* ── Override pra crachás resumo (3 cards) ── */
.usr-shell-pane #usuariosResumo{
  margin-bottom:18px;
}

/* ── Responsivo: tablet (≤960px) ── */
@media (max-width:960px){
  .usr-grid-membros,.usr-row.usr-grid-membros{
    grid-template-columns:1fr 90px 80px 90px;
  }
  .usr-grid-membros > :nth-child(5),
  .usr-row.usr-grid-membros > :nth-child(5){display:none;}
  .usr-grid-crachas,.usr-row.usr-grid-crachas{
    grid-template-columns:1fr 120px 100px 90px;
  }
  .usr-grid-crachas > :nth-child(5),
  .usr-grid-crachas > :nth-child(6),
  .usr-row.usr-grid-crachas > :nth-child(5),
  .usr-row.usr-grid-crachas > :nth-child(6){display:none;}
}

/* ── Responsivo: mobile (≤640px) ── */
@media (max-width:640px){
  .usr-shell-pane{padding:0 8px;}
  .usr-kpis{grid-template-columns:1fr 1fr;}
  .usr-kpis > :nth-child(3){grid-column:1/-1;}
  .usr-shell-tab{padding:9px 8px;font-size:12px;gap:5px;flex-wrap:wrap;}
  .usr-shell-tab-icon{font-size:13px;}

  /* Tabelas viram cards empilhados */
  .usr-table-head{display:none;}
  .usr-row,.usr-row.usr-grid-membros,.usr-row.usr-grid-crachas{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px 14px;
  }
  .usr-row > div{padding:0;}
  .usr-row .usr-mem{margin-bottom:2px;}
  .usr-row > :nth-child(n+2){
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:var(--dim);
  }
  .usr-row > :nth-child(n+2)::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.5px;
  }

  .usr-pane-head{flex-direction:column;align-items:stretch;}
  .usr-pane-actions{justify-content:flex-end;}
}
/* ═══ fim S35 Usuários & Acessos ═════════════════════════════════════ */

/* ═══ [S35] Películas Compatíveis — shell unificado ═══════════════════
   Mesmo padrão da .pv-shell (S34) e .usr-shell (S35). Acordeão de
   películas, chips de marca, banner de moderação.
   ═════════════════════════════════════════════════════════════════════ */

.pelic-shell{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--r-xl);
  padding:6px 6px 18px;
  margin-top:18px;
}

/* ── Tabs (segmented control) ── */
.pelic-shell-tabs{
  display:flex;gap:4px;
  background:var(--deep);
  border-radius:10px;
  padding:5px;
  margin-bottom:18px;
}
.pelic-shell-tab{
  flex:1;
  padding:11px 14px;
  text-align:center;
  border-radius:7px;
  font-size:13px;
  color:var(--dim);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  border:1px solid transparent;
  user-select:none;
}
.pelic-shell-tab:hover{color:var(--body);}
.pelic-shell-tab.active{
  background:var(--surface);
  color:var(--bright);
  font-weight:600;
  border-color:var(--rim);
}
.pelic-shell-tab-icon{font-size:14px;line-height:1;}
.pelic-shell-tab-count{
  background:rgba(138,133,124,.12);
  color:var(--dim);
  font-size:11px;
  padding:2px 7px;
  border-radius:10px;
  font-weight:700;
  font-family:var(--ff-mono);
  min-width:22px;
  text-align:center;
}
.pelic-shell-tab.active .pelic-shell-tab-count{
  background:rgba(255,140,66,.15);
  color:var(--a3);
}

/* ── Pane ── */
.pelic-shell-pane{padding:0 14px;}
.pelic-pane-desc{
  font-size:12px;color:var(--dim);
  line-height:1.55;
  margin-bottom:14px;
  max-width:640px;
}

/* ── KPIs ── */
.pelic-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.pelic-kpi{
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:12px 14px;
}
.pelic-kpi-label{
  font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:4px;
}
.pelic-kpi-val{
  font-size:22px;font-weight:600;
  color:var(--bright);
  font-family:var(--ff-mono);
  line-height:1.15;
}

/* ── Busca ── */
.pelic-search{position:relative;margin-bottom:14px;}
.pelic-search-icon{
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  color:var(--dim);
  pointer-events:none;
}
.pelic-search-input{
  width:100%;
  padding:11px 14px 11px 38px;
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  color:var(--bright);
  font-size:13px;
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .15s,background .15s;
}
.pelic-search-input:focus{
  outline:none;
  border-color:var(--a3);
  background:var(--surface);
}
.pelic-search-input::placeholder{color:var(--muted);}

/* ── Filtros (marcas + ações) ── */
.pelic-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:18px;
  align-items:center;
}
.pelic-filters-lbl{
  font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px;
  margin-right:4px;
}
.pelic-marcas{
  display:flex;gap:6px;flex-wrap:wrap;flex:1;
}
.pelic-marca{
  background:transparent;
  color:var(--body);
  border:1px solid var(--edge);
  border-radius:7px;
  padding:5px 12px;
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,color .15s,border-color .15s;
}
.pelic-marca:hover{
  border-color:var(--rim);
  color:var(--bright);
}
.pelic-marca.active{
  background:rgba(255,140,66,.15);
  color:var(--a3);
  border-color:rgba(255,140,66,.3);
  font-weight:600;
}
.pelic-marca-count{
  opacity:.55;
  font-family:var(--ff-mono);
  margin-left:4px;
}
.pelic-marca.active .pelic-marca-count{opacity:.75;}

.pelic-filters-actions{
  display:flex;gap:6px;
  margin-left:auto;
}
.pelic-mini-btn{
  background:transparent;
  color:var(--dim);
  border:1px solid var(--edge);
  border-radius:7px;
  padding:5px 10px;
  font-size:11px;
  cursor:pointer;
  font-family:inherit;
  transition:color .15s,border-color .15s;
}
.pelic-mini-btn:hover{
  color:var(--body);
  border-color:var(--rim);
}

/* ── Banner de moderação ── */
.pelic-banner-pendentes{
  background:rgba(255,179,0,.06);
  border:1px solid rgba(255,179,0,.2);
  border-radius:10px;
  padding:11px 14px;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--body);
}
.pelic-banner-icon{font-size:14px;}
.pelic-banner-pendentes b{color:var(--warn);font-weight:700;}
.pelic-banner-pendentes i{color:var(--bright);font-style:normal;}
.pelic-banner-pendentes .pelic-mini-btn{margin-left:auto;}

/* ── Lista (acordeão) ── */
.pelic-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pelic-grupo{
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .15s;
}
.pelic-grupo:hover{border-color:var(--rim);}
.pelic-grupo.aberto{border-color:rgba(255,140,66,.25);}

.pelic-grupo-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  transition:background .15s;
}
.pelic-grupo-head:hover{background:rgba(255,255,255,.02);}
.pelic-grupo.aberto .pelic-grupo-head{
  background:var(--panel);
  border-bottom:1px solid var(--edge);
}

.pelic-caret{
  color:var(--dim);
  font-size:11px;
  transition:transform .2s,color .15s;
  flex-shrink:0;
  width:12px;text-align:center;
}
.pelic-grupo.aberto .pelic-caret{
  transform:rotate(90deg);
  color:var(--a3);
}

.pelic-grupo-icon{
  width:32px;height:32px;
  border-radius:8px;
  background:rgba(255,140,66,.08);
  border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.pelic-grupo.aberto .pelic-grupo-icon{
  background:rgba(255,140,66,.12);
  border-color:rgba(255,140,66,.3);
}

.pelic-grupo-info{flex:1;min-width:0;}
.pelic-grupo-nome{
  font-size:14px;font-weight:600;
  color:var(--bright);
}
.pelic-grupo-sub{
  font-size:11px;color:var(--muted);
  margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pelic-grupo-count{
  background:rgba(138,133,124,.12);
  color:var(--soft);
  font-size:11px;
  padding:3px 9px;
  border-radius:5px;
  font-weight:700;
  font-family:var(--ff-mono);
  min-width:30px;
  text-align:center;
  flex-shrink:0;
}
.pelic-grupo.aberto .pelic-grupo-count{
  background:rgba(255,140,66,.12);
  color:var(--a3);
}

/* ── Corpo do grupo (modelos agrupados por marca) ── */
.pelic-grupo-body{
  padding:14px 16px 16px 50px;
  display:none;
}
.pelic-grupo.aberto .pelic-grupo-body{display:block;}

.pelic-marca-titulo{
  font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px;
  font-weight:600;margin-bottom:8px;
  margin-top:12px;
  display:flex;align-items:center;gap:6px;
}
.pelic-marca-titulo:first-child{margin-top:0;}
.pelic-marca-titulo-count{
  color:var(--muted);
  font-family:var(--ff-mono);
  font-weight:400;
}

.pelic-modelos{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:6px;
}
.pelic-chip{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:6px;
  padding:5px 10px;
  font-size:12px;
  color:var(--body);
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:border-color .15s,background .15s;
}
.pelic-chip:hover{
  border-color:var(--rim);
  background:var(--raised);
}
.pelic-chip-nota{
  color:var(--muted);
  font-size:10px;
}
.pelic-chip-match{
  background:rgba(255,140,66,.1);
  border-color:rgba(255,140,66,.3);
  color:var(--a4);
}

/* ── Item da aba "Minhas sugestões" ── */
.pelic-sug{
  background:var(--deep);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:1fr 110px 110px;
  gap:12px;
  align-items:center;
}
.pelic-sug-info{min-width:0;}
.pelic-sug-pelic{
  font-size:13px;font-weight:600;
  color:var(--bright);
}
.pelic-sug-modelo{
  font-size:12px;color:var(--dim);
  margin-top:2px;
}
.pelic-sug-data{
  font-size:11px;color:var(--muted);
  font-family:var(--ff-mono);
}
.pelic-sug-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;
  padding:3px 9px;
  border-radius:5px;
  font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  border:1px solid;
}
.pelic-sug-status-pend{
  background:rgba(255,179,0,.12);
  color:var(--warn);
  border-color:rgba(255,179,0,.3);
}
.pelic-sug-status-ok{
  background:rgba(77,219,143,.12);
  color:var(--ok);
  border-color:rgba(77,219,143,.3);
}
.pelic-sug-status-rej{
  background:rgba(255,71,87,.12);
  color:var(--err);
  border-color:rgba(255,71,87,.3);
}

/* ── Estado vazio / erro ── */
.pelic-empty{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  background:var(--deep);
  border:1px dashed var(--edge);
  border-radius:10px;
}
.pelic-empty-icon{
  font-size:32px;display:block;margin-bottom:10px;opacity:.5;
}
.pelic-empty-error{color:var(--err);}

/* ── Highlight do termo buscado ── */
.pelic-hl{
  background:rgba(255,140,66,.25);
  color:var(--a4);
  padding:0 2px;border-radius:2px;
  font-weight:600;
}

/* ── Responsivo: tablet (≤960px) ── */
@media (max-width:960px){
  .pelic-grupo-body{padding-left:16px;}
  .pelic-filters-actions{margin-left:0;width:100%;justify-content:flex-end;margin-top:6px;}
}

/* ── Responsivo: mobile (≤640px) ── */
@media (max-width:640px){
  .pelic-shell-pane{padding:0 8px;}
  .pelic-kpis{grid-template-columns:1fr 1fr;}
  .pelic-kpis > :nth-child(3){grid-column:1/-1;}
  .pelic-grupo-head{padding:12px 14px;gap:10px;}
  .pelic-grupo-icon{width:28px;height:28px;}
  .pelic-grupo-body{padding:12px 14px 14px 14px;}
  .pelic-shell-tab{padding:9px 8px;font-size:12px;flex-wrap:wrap;}
  .pelic-sug{grid-template-columns:1fr;gap:6px;}
  .pelic-sug-data,.pelic-sug-status{justify-self:start;}
}
/* ═══ fim S35 Películas ═══════════════════════════════════════════════ */

/* ═══ [S35] Módulo Impostos — card do dia + config de DAS ═════════════════ */
.imp-card{
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);
  padding:18px 20px;
}
.imp-card-empty{
  text-align:center;padding:22px 12px;
}
.imp-card-empty-icon{font-size:32px;margin-bottom:6px;}
.imp-card-empty-title{font-size:15px;font-weight:700;color:var(--bright);margin-bottom:4px;}
.imp-card-empty-desc{font-size:12px;color:var(--dim);line-height:1.5;max-width:380px;margin:0 auto;}
.imp-card-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;
  border-bottom:0.5px solid var(--edge);
}
.imp-card-icon{font-size:18px;}
.imp-card-title{font-size:15px;font-weight:700;color:var(--bright);flex:1;}
.imp-card-modo{
  font-size:10px;font-weight:700;color:var(--ghost);text-transform:uppercase;letter-spacing:.6px;
  background:var(--raised);padding:4px 10px;border-radius:999px;border:0.5px solid var(--edge);
}
.imp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.imp-kpi{
  background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r-md);
  padding:11px 14px;
}
.imp-kpi-label{font-size:10px;color:var(--ghost);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.imp-kpi-val{font-size:20px;font-weight:700;color:var(--bright);font-family:var(--ff-mono);line-height:1.1;}
.imp-kpi-val.imp-kpi-info{color:var(--a3);}
.imp-kpi-val.imp-kpi-sm{font-size:13px;font-weight:600;font-family:var(--ff-body);color:var(--body);}
.imp-kpi-sub{font-size:10px;color:var(--dim);margin-top:4px;}
.imp-detalhe{
  background:var(--raised);border:0.5px solid var(--edge);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:12px;
}
.imp-detalhe-head{font-size:12px;font-weight:600;color:var(--bright);margin-bottom:8px;}
.imp-detalhe-tbl{width:100%;font-size:12px;border-collapse:collapse;}
.imp-detalhe-tbl td{padding:7px 0;color:var(--body);border-bottom:0.5px solid var(--edge);}
.imp-detalhe-tbl tr:last-child td{border-bottom:none;}
.imp-tbl-num{text-align:right;font-family:var(--ff-mono);}
.imp-tbl-aliq{color:var(--dim);}
.imp-tbl-bold{font-weight:700;color:var(--bright);}
.imp-detalhe-total td{padding-top:10px;}
.imp-detalhe-total td:first-child{font-weight:700;color:var(--bright);}
.imp-detalhe-total td.imp-tbl-bold{color:var(--a3);}
.imp-aviso{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-md);
  margin-bottom:10px;font-size:12px;line-height:1.5;
}
.imp-aviso > span{font-size:14px;line-height:1;flex-shrink:0;}
.imp-aviso-warn{background:var(--warnBg);color:var(--warn);border:0.5px solid rgba(255,179,0,.25);}
.imp-aviso-info{background:var(--infoBg);color:var(--info);border:0.5px solid rgba(91,140,255,.25);}
.imp-aviso b{color:inherit;}
.imp-foot{
  font-size:11px;color:var(--dim);font-style:italic;text-align:center;
  padding-top:6px;border-top:0.5px solid var(--edge);
}

/* Configuração */
.imp-cfg-card{padding:18px 20px;}
.imp-cfg-head{font-size:14px;font-weight:700;color:var(--bright);margin-bottom:4px;}
.imp-cfg-desc{font-size:12px;color:var(--dim);margin-bottom:16px;line-height:1.5;}
.imp-cfg-row{margin-bottom:14px;}
.imp-cfg-row label{display:block;font-size:11px;font-weight:600;color:var(--ghost);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
.imp-cfg-row select,.imp-cfg-row input[type=number]{
  width:100%;padding:10px 12px;border-radius:var(--r-md);border:0.5px solid var(--edge);
  background:var(--raised);color:var(--bright);font-size:13px;font-family:inherit;
}
.imp-cfg-row select:focus,.imp-cfg-row input:focus{outline:none;border-color:var(--a3);}
.imp-cfg-hint{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.5;}
.imp-cfg-opt{font-size:9px;color:var(--ghost);font-weight:500;text-transform:none;letter-spacing:0;background:var(--raised);padding:2px 6px;border-radius:4px;margin-left:6px;}
.imp-cfg-pane{padding:14px;background:var(--raised);border:0.5px dashed var(--edge);border-radius:var(--r-md);margin-bottom:14px;}
.imp-cfg-pane .imp-cfg-row:last-child{margin-bottom:0;}
.imp-cfg-mei-info{font-size:11px;color:var(--dim);line-height:1.6;padding:10px 12px;background:var(--deep);border-radius:var(--r-md);}
.imp-cfg-toggle label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--body);font-size:13px;font-weight:500;}
.imp-cfg-toggle input{margin:0;}
.imp-cfg-actions{display:flex;justify-content:flex-end;margin-top:18px;}
.imp-cfg-foot{font-size:10px;color:var(--ghost);text-align:center;margin-top:14px;font-style:italic;}

/* PDV: toggle produto/serviço por item do carrinho */
.cart-item-tipo-trib{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ghost);
  background:var(--raised);padding:2px 8px;border-radius:999px;border:0.5px solid var(--edge);
  cursor:pointer;user-select:none;
}
.cart-item-tipo-trib:hover{border-color:var(--a3);color:var(--bright);}
.cart-item-tipo-trib.is-servico{color:var(--info);border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.08);}

/* Mobile */
@media (max-width:640px){
  .imp-kpis{grid-template-columns:1fr;}
  .imp-card{padding:14px 16px;}
  .imp-cfg-card{padding:14px 16px;}
}
/* ═══ fim [S35] Impostos ══════════════════════════════════════════════════ */

/* ═══ [S35.2] Recibo — formato configurável + ajustes ═════════════════════ */
.recfmt-btn{
  padding:10px 16px;border-radius:var(--r-md);font-size:12px;font-weight:600;cursor:pointer;
  border:0.5px solid var(--edge);background:var(--raised);color:var(--body);
  transition:all .15s;user-select:none;
}
.recfmt-btn:hover{border-color:var(--a3);color:var(--bright);}
.recfmt-btn.sel{
  background:var(--a3);color:var(--deep);border-color:var(--a3);font-weight:700;
}
.cfg-recfmt-hint{
  font-size:11px;color:var(--dim);line-height:1.6;margin-top:8px;
  padding:10px 12px;background:var(--deep);border-radius:var(--r-md);
}
/* ═══ fim [S35.2] ═══════════════════════════════════════════════════════════ */

/* ═══ [S35.4] Logo da loja na config ═══════════════════════════════════════ */
.cfg-logo-box{
  width:100%;height:120px;border:1px dashed var(--edge);border-radius:var(--r-md);
  background:var(--raised);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cfg-logo-placeholder{
  display:flex;align-items:center;gap:10px;color:var(--ghost);font-size:12px;
  font-family:var(--ff-mono);
}
.cfg-logo-preview{max-height:100px;max-width:90%;object-fit:contain;}
/* ═══ fim [S35.4] ═══════════════════════════════════════════════════════════ */