/* Sistema de design do ERP — herdado do caixa.belosanto.com.br.
   Módulos usam estas classes (card, tbl, btn, input, badge) para ficarem consistentes. */
/* Avisos informativos não interceptam toques nas ações por baixo deles. */
#erp-toasts{pointer-events:none}
:root{
  --font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Space Grotesk','Instrument Sans',sans-serif;
  --font-data:'IBM Plex Mono','Fira Code',monospace;
  --bg:#0b0d12;--bg-subtle:#0f111a;--surface:#12151e;--surface-hover:#1a1e2e;--card:#12151e;
  --border:rgba(255,255,255,.06);--border-strong:rgba(255,255,255,.12);
  --text:#e8ecf4;--text-secondary:#8b95a8;--muted:#515b6e;
  --primary:#6a75ff;--primary-hover:#4553f5;--primary-surface:rgba(95,107,255,.12);--primary-fill:#4553f5;--primary-fill-hover:#3a46d9;
  --accent-2:#969dff;--green:#22c55e;--yellow:#f59e0b;--red:#ef4444;
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --shadow:0 2px 8px rgba(0,0,0,.5);--shadow-lg:0 4px 16px rgba(0,0,0,.6);
  --topbar-bg:rgba(11,13,18,.85);
  /* azul do caixa (cor de ação e de marca do ERP; o verde fica só para pago/dinheiro): sublinhado da aba ativa */
  --gradient-1:linear-gradient(135deg,#3a46d9 0%,#4553f5 100%);
  --primary-border:rgba(95,107,255,.32);
}

/* Despesas/guia local: alvos operáveis e conteúdo longo sem estouro em 390px. */
.mod-despesas .dp-action{min-height:44px}
.mod-despesas .input{min-height:44px}
.mod-despesas label.chk-row{min-height:44px;align-items:center;gap:8px;cursor:pointer}
.mod-despesas input.chk{width:22px;height:22px;min-width:22px;flex:0 0 22px}
.mod-despesas #dp-alerta td,.mod-despesas #dp-r td{min-width:0;overflow-wrap:anywhere;word-break:break-word}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none} code{font-family:var(--font-data);font-size:.9em;color:var(--primary)}

.app{display:block;min-height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:17px}
.brand .mark{width:32px;height:32px;background:url('/logo-mark.svg') center/contain no-repeat;font-size:0;flex-shrink:0}
.brand small{display:block;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mods{display:flex;flex-direction:column;gap:5px;padding:8px 10px 18px;overflow-y:auto}
.nav-area{border-radius:10px}
.nav-area-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font:700 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left;transition:.15s}
.nav-area-toggle:hover{background:var(--surface);color:var(--text)}
.nav-area-toggle .ic{width:19px;display:grid;place-items:center;flex-shrink:0}
.nav-area-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-area-total{margin-left:auto;min-width:22px;padding:3px 6px;border-radius:99px;background:var(--surface);color:var(--muted);font:600 10px/1 var(--font-data);text-align:center}
.nav-chevron{font-size:16px;line-height:1;transition:transform .18s}
/* só o chevron do PRÓPRIO toggle gira (antes, abrir a área girava os dos subgrupos fechados também) */
.nav-area.aberta>.nav-area-toggle .nav-chevron,.nav-subgrupo.aberta>.nav-subgrupo-toggle .nav-chevron{transform:rotate(180deg)}
.nav-filhos{display:none;flex-direction:column;gap:2px;padding:2px 0 7px 12px}
.nav-area.aberta .nav-filhos{display:flex}
.nav-subgrupo{display:flex;flex-direction:column;gap:1px}
.nav-subgrupo-toggle{width:100%;display:flex;align-items:center;gap:8px;padding:7px 10px 6px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:700 10px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:left}
.nav-subgrupo-toggle:hover{background:var(--surface);color:var(--text-secondary)}
.nav-subgrupo-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-subfilhos{display:none;flex-direction:column;gap:2px;padding-left:9px}
.nav-subgrupo.aberta .nav-subfilhos{display:flex}
.mod{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-weight:600;font-size:13px;text-align:left;cursor:pointer;border:1px solid transparent;transition:.15s}
.mod:hover{background:var(--surface);color:var(--text)}
.mod.active{background:var(--primary-surface);color:var(--primary);border-color:var(--primary-border)}
.mod .ic{width:19px;display:grid;place-items:center;text-align:center;font-size:16px;flex-shrink:0}
.nav-monograma{width:19px;height:19px;display:grid;place-items:center;border:1px solid currentColor;border-radius:5px;font:700 10px/1 var(--font-data)}

.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 26px;background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:2px solid var(--loja-cor,var(--border))}
.topbar h1{margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.pill{font-family:var(--font-data);font-size:11px;padding:4px 10px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary)}
.pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle}
.topbar-context{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:13px;line-height:1.3}
.topbar-group,.topbar-module{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-group{color:var(--text-secondary)}
.topbar-module{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text)}
.topbar-separator{color:var(--muted);font-size:16px;line-height:1;user-select:none}
.command-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:40px;margin-left:auto;padding:7px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-secondary);font:600 12px/1 var(--font-body);cursor:pointer;white-space:nowrap}
.command-trigger-icon{width:17px;height:17px;display:block;flex:0 0 auto}
.command-trigger:hover{background:var(--surface-hover);color:var(--text)}
.command-trigger kbd{font:500 10px/1 var(--font-data);padding:3px 5px;border:1px solid var(--border-strong);border-radius:4px;color:var(--muted);background:var(--surface)}
.command-palette{position:fixed;inset:0;z-index:90;display:grid;place-items:start center;padding:clamp(72px,14vh,140px) 18px 24px;pointer-events:none}
.command-palette:not([hidden]){pointer-events:auto}
/* [hidden] do UA perde para display:grid de regra de autor — sem esta guarda a paleta
   fica PINTADA sobre todas as telas mesmo fechada (achado do harness de captura 5-6;
   bug pré-existente desde os itens 1-2). */
.command-palette[hidden]{display:none}
.command-backdrop{position:fixed;inset:0;z-index:0;background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
.command-backdrop[hidden]{display:none}
.command-panel{position:relative;z-index:1;width:min(620px,100%);max-height:min(620px,calc(100vh - 96px));display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.command-head{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border)}
.command-input{min-height:44px;border:0!important;background:transparent!important;box-shadow:none!important;font-size:16px}
.command-input:focus{outline:2px solid var(--primary)!important;outline-offset:-2px}
.command-results{overflow-y:auto;padding:8px}
.command-result{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:600 14px/1.3 var(--font-body);text-align:left;cursor:pointer}
.command-result:hover,.command-result-active{background:var(--primary-surface);border-color:var(--primary-border);color:var(--primary)}
.command-empty{padding:24px 16px;color:var(--muted);font-size:13px;text-align:center}
.nav-pending-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;margin-left:auto;padding:2px 6px;border-radius:99px;background:rgba(245,158,11,.14);color:var(--yellow);font:600 10px/1 var(--font-data);font-variant-numeric:tabular-nums}
.nav-pending-badge[hidden]{display:none}
.nav-area-toggle>.nav-pending-badge{margin-left:auto}
.command-trigger:focus-visible,.command-result:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.content{width:100%;max-width:1440px;margin:0 auto;padding:24px 26px 80px}
.carregando,.vazio{color:var(--muted);padding:24px;font-size:14px}
.erro{color:var(--red);padding:16px;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);background:rgba(239,68,68,.05)}

/* hero / títulos de seção */
.hero{background:linear-gradient(160deg,var(--surface),var(--bg-subtle));border:1px solid var(--border);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow-lg);margin-bottom:22px}
.hero .eyebrow{font-family:var(--font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.hero h2{margin:0 0 8px;font-family:var(--font-display);font-size:clamp(22px,3.4vw,30px);font-weight:700;letter-spacing:-.02em}
.hero p{margin:0;color:var(--text-secondary);max-width:62ch}
.pcp-engenharia-cabecalho__legado{margin:0 0 12px;border:1px solid var(--border);border-radius:var(--radius);padding:0 12px}
.pcp-engenharia-cabecalho__legado>summary{min-height:44px;box-sizing:border-box;padding:10px 0;cursor:pointer}
.pcp-engenharia-cabecalho__legado>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:640px){.pcp-engenharia-cabecalho .hero{padding:16px;margin-bottom:12px}.pcp-engenharia-cabecalho .hero .eyebrow{font-size:10px;letter-spacing:.08em}}
.sec-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* componentes reutilizáveis */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;margin-bottom:14px}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .grow{flex:1}
.btn{font-family:var(--font-body);font-weight:600;font-size:14px;padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-subtle);color:var(--text);cursor:pointer;transition:.15s}
.btn:hover{background:var(--surface-hover)}
.btn-primary{background:var(--primary-fill,var(--primary));border-color:transparent;color:#fff}
.btn-primary:hover{background:var(--primary-fill-hover,var(--primary-hover))}
.ev-logistica-acoes .btn,.ev-logistica-form .input,.ev-logistica-confirmacao{min-height:44px}
.ev-logistica-form label{overflow-wrap:anywhere}
.eng-paradas,.eng-paradas .card,.eng-paradas label{min-width:0;overflow-wrap:anywhere}
.eng-paradas .btn,.eng-paradas .input{min-height:44px}
.input,input[type=text],input[type=number],input[type=search],select,textarea{font-family:var(--font-body);font-size:14px;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);width:100%}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
label.campo{display:block;margin-bottom:12px}
label.campo span{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:5px}

.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg-subtle)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right}
.badge{font-family:var(--font-data);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--surface);color:var(--text-secondary)}
.badge.ok{background:var(--green-glow,rgba(34,197,94,.14));color:var(--green)} .badge.warn{background:rgba(245,158,11,.12);color:var(--yellow)} .badge.err{background:rgba(239,68,68,.12);color:var(--red)}

/* toasts */
.erp-fechar-dialog{width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
.erp-fechar-dialog::backdrop{background:rgba(0,0,0,.6)}
.erp-fechar-dialog h2{margin:0 0 12px;font-size:20px}.erp-fechar-dialog p{line-height:1.5;margin:0 0 20px}
.erp-fechar-dialog .btn{min-height:44px;width:100%;margin-top:8px}.erp-fechar-dialog .btn-danger{border-color:var(--red);color:var(--red)}
.erp-dialogo form{margin:0}.erp-dialogo-campo{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;font-size:12px;font-weight:600;color:var(--muted)}.erp-dialogo-campo .input{width:100%;box-sizing:border-box;color:var(--text)}.erp-dialogo-erro{color:var(--red);font-size:13px;margin:0 0 10px}.erp-dialogo-acoes{display:flex;gap:8px}.erp-dialogo-acoes .btn{flex:1;width:auto}
.tab-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
#erp-toasts{position:fixed;bottom:20px;right:20px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast{padding:11px 16px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);font-size:13px;font-weight:600;transition:.3s;opacity:1}
.release-notices{display:flex;flex-direction:column;gap:8px;padding:8px 16px 0}
.release-aviso{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--primary);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow);color:var(--text);font-size:12px;line-height:1.4}
.release-aviso span{flex:1;min-width:0}.release-aviso .btn,.release-dispensar,.release-indicador{min-height:44px;white-space:nowrap}.release-dispensar{border:0;background:transparent;color:var(--text-secondary);cursor:pointer;padding:8px}.release-dispensar:hover{color:var(--text)}
.release-indicador{align-self:flex-end;padding:7px 10px;border:1px solid var(--border-strong);border-radius:99px;background:var(--surface);color:var(--text-secondary);box-shadow:var(--shadow);font-size:11px;cursor:pointer}.release-indicador:hover{color:var(--text);border-color:var(--primary)}
@media (max-width:640px){.release-notices{padding:8px 10px 0}.release-aviso{align-items:stretch;flex-direction:column;gap:6px}.release-aviso .btn,.release-dispensar{width:100%}.release-indicador{align-self:stretch;width:100%}}
.toast.ok{border-left:3px solid var(--primary)} .toast.err{border-left:3px solid var(--red)}
.toast.out{opacity:0;transform:translateX(10px)}

.botnav,.mobile-nav{display:none}
@media (max-width:640px){
  .content{padding:18px 14px 92px}.topbar{padding:12px 10px}
  /* tabela vira cards no mobile */
  .tbl,.tbl thead,.tbl tbody,.tbl th,.tbl td,.tbl tr{display:block}
  .tbl thead{display:none}.tbl{min-width:0}
  .tbl tr{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;padding:6px 12px}
  .tbl td{border:none;padding:6px 0;display:flex;justify-content:space-between;gap:12px}
  .tbl td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
  .botnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--topbar-bg);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .botnav .b{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);font-family:var(--font-body);font-size:10px;font-weight:600;cursor:pointer}
  .botnav .b.active{color:var(--primary)}.botnav .b .ic{font-size:19px}
}

/* ===== TEMA CLARO (alternável) — resposta ao "tá tudo escuro" ===== */
:root[data-theme="light"]{
  --bg:#f4f6fa;--bg-subtle:#eaecf2;--surface:#ffffff;--surface-hover:#f1f4f9;--card:#ffffff;
  --border:rgba(16,23,40,.10);--border-strong:rgba(16,23,40,.18);
  --text:#141a2e;--text-secondary:#3c4257;--muted:#6b7488;
  --primary:#2a3aff;--primary-hover:#1f2ccc;--primary-surface:rgba(42,58,255,.08);--primary-fill:#2a3aff;--primary-fill-hover:#1f2ccc;
  --topbar-bg:rgba(255,255,255,.88);
  --shadow:0 1px 3px rgba(16,23,40,.08);--shadow-lg:0 6px 20px rgba(16,23,40,.12);
  --gradient-1:linear-gradient(135deg,#1f2ccc 0%,#2a3aff 100%);
  --primary-border:rgba(42,58,255,.28);
}
:root[data-theme="light"] .tbl th{background:#eef1f7}
:root[data-theme="light"] .brand .mark{color:#fff}
:root[data-theme="light"] .command-backdrop{background:rgba(16,23,40,.34)}
:root[data-theme="light"] .nav-pending-badge{background:rgba(180,83,9,.12);color:#b45309}
/* botão de tema no topbar */
.tema-btn{margin-left:auto;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;font-size:15px;transition:.15s}
.tema-btn:hover{background:var(--surface-hover);color:var(--text)}
.topbar .pill{margin-left:0}

/* ===== SHELL v2: usuário, abas (MDI), sub-abas, grade ordenável/filtrável ===== */
.user-box{display:flex;align-items:center;gap:10px;margin-left:8px}
.user-nome{font-size:13px;color:var(--text-secondary);font-weight:600}
.btn-sair{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:14px}
.btn-sair:hover{color:var(--red);border-color:var(--red)}
.topbar .pill{margin-left:0}
.tema-btn+.pill{margin-left:0}

/* barra de abas tipo Excel/navegador */
.tabbar{display:none;align-items:center;gap:2px;padding:0 14px;background:var(--bg-subtle);border-bottom:1px solid var(--border);overflow-x:auto}
#tabbar{min-width:0;overflow-x:auto}
.tab{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;white-space:nowrap;max-width:220px}
.tab span:first-child{overflow:hidden;text-overflow:ellipsis}
.tab:hover{background:var(--surface)}
.tab.ativa{background:var(--card);color:var(--text);border-color:var(--border)}
.tab .x{opacity:.5;font-size:15px;line-height:1;border:0;background:transparent;color:inherit;border-radius:4px;padding:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tab .x:hover{opacity:1;background:var(--red);color:#fff}
@media (max-width:640px){.tab .x{min-width:44px;min-height:44px;flex-shrink:0}}

.tab-view{}  /* mostrado/escondido via JS */

/* sub-abas dentro do detalhe */
.subabas{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.subaba{flex:0 0 auto;min-height:44px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-family:var(--font-body);font-weight:600;font-size:14px;padding:10px 14px;cursor:pointer;white-space:nowrap}
.subaba:hover{color:var(--text)}
.subaba.ativa{color:var(--primary);border-bottom-color:var(--primary)}

/* grade: filtro + ordenação */
.grid-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.grid-filtro{max-width:280px;font-family:var(--font-body);font-size:13px;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text)}
.grid-filtro:focus{outline:none;border-color:var(--primary)}
.grid-cont{font-family:var(--font-data);font-size:11px;color:var(--muted)}
th.sortable{cursor:pointer;user-select:none;position:relative}
th.sortable:hover{color:var(--text)}
.sort-ind{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;opacity:0}
th.sortable.asc .sort-ind{opacity:.9;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--primary)}
th.sortable.desc .sort-ind{opacity:.9;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--primary)}
tr.clicavel{cursor:pointer}
tr.clicavel:hover{background:var(--primary-surface)!important}
.grid tr.clicavel:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}

/* ===== painel de início: cards KPI ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 22px;cursor:pointer;transition:.15s}
.kpi:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi-rot{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kpi-val{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
/* Financeiro: quantias completas permanecem em uma linha dentro de cada cartão. */
/* mínimo de 480px: com a área útil de 1440 (sem lateral) o grid passaria a 3 colunas e quantias de 20 dígitos cortariam */
#fin-kpi-geral{grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}
#fin-kpi-geral .kpi{min-width:0}
#fin-kpi-geral .kpi-val{font-size:clamp(20px,2vw,28px);white-space:nowrap}
@media(max-width:640px){#fin-kpi-geral{grid-template-columns:minmax(0,1fr)}#fin-kpi-geral .kpi-val{font-size:clamp(20px,5vw,24px)}}
/* Consulta contábil: valores completos, inclusive sinal e centavos, em 390px. */
.contabil-razao-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.contabil-razao-kpis .kpi{min-width:0}
.contabil-razao-kpis .kpi-val{font-size:clamp(24px,3vw,34px);overflow-wrap:anywhere}

/* ===== helpers de formulário/layout REUTILIZÁVEIS =====
   Regra: módulo NUNCA injeta <style> nem <link>. Usa estas classes. Falta um padrão? Adiciona AQUI. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px}
.chk-row{display:flex;flex-wrap:wrap;gap:8px 14px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.hint{margin-top:6px;font-size:12px;color:var(--muted)}
.field-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--border)}
.field-row:last-child{border-bottom:none}
.field-row .k{font-size:12px;color:var(--muted)} .field-row .v{font-size:13px;font-weight:600}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* configurações: linha chave/valor (centralizada, não no módulo) */
.cfg-row{display:flex;gap:8px;align-items:center;padding:6px 0}
.cfg-row .cfg-k{min-width:180px;display:flex;flex-direction:column;gap:2px}
.cfg-row .cfg-k small{color:var(--muted);font-family:var(--font-data);font-size:10px}
.cfg-row .cfg-v{flex:1}
.cfg-del{color:var(--red);padding:9px 12px}
@media(max-width:820px){.cfg-row{flex-wrap:wrap}.cfg-row .cfg-k{min-width:0;width:100%}}

/* ===== ícones SVG do nav + recolher menu ===== */
.mod .ic svg,.b .ic svg,.nav-area-toggle .ic svg{width:19px;height:19px;display:block}
.nav-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0}
.nav-btn:hover{background:var(--surface-hover);color:var(--text)}
.nav-btn svg{width:18px;height:18px}

/* ===== trocador de loja (multi-loja) ===== */
.loja-sw-wrap{display:flex;align-items:center;gap:7px;margin-left:auto;--loja-cor:#2563eb}
.loja-cor-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--loja-cor,#2563eb);box-shadow:0 1px 2px rgba(0,0,0,.18);flex-shrink:0}
.loja-lbl{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#loja-sw{font-family:var(--font-body);font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;border:1.5px solid var(--loja-cor,var(--border-strong));background:var(--surface);color:var(--text);cursor:pointer;max-width:390px;box-shadow:0 0 0 2px color-mix(in srgb,var(--loja-cor,#2563eb) 22%,transparent)}
.fin-loja-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-family:var(--font-data);font-size:10.5px;font-weight:700;border:1px solid currentColor;white-space:nowrap;vertical-align:middle}

@media (max-width:640px){
  .topbar{gap:6px;min-width:0}
  .topbar h1{min-width:0;max-width:min(48vw,260px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .loja-sw-wrap{min-width:0;gap:0}
  .topbar .loja-lbl,.topbar .user-nome{display:none}
  .topbar #loja-sw{min-width:0;max-width:88px;padding:6px}
  .topbar .user-box{margin-left:0;gap:0;flex-shrink:0}
  .topbar>.pill{font-size:0;width:28px;height:28px;padding:7px;box-sizing:border-box}
  .topbar>.pill .dot{margin:0;vertical-align:top}
  .topbar-context{flex:1;gap:5px;min-width:0;font-size:11px}
  .topbar-module{font-size:13px}
  .topbar-separator{font-size:14px}
  .command-trigger{width:44px;height:44px;min-height:44px;margin-left:0;padding:6px;font-size:0}
  .command-trigger-icon{width:20px;height:20px}
  .command-trigger kbd{display:none}
}

/* ===== navegação responsiva: barra curta + folha de módulos ===== */
@media (max-width:640px){
  .content{padding-bottom:94px}
  .botnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--topbar-bg);backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .botnav .b{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);font-family:var(--font-body);font-size:10px;font-weight:650;cursor:pointer}
  .botnav .b.active{color:var(--primary)}
  .botnav .b .ic{height:20px;display:grid;place-items:center}
  .mobile-nav:not([hidden]){display:block;position:fixed;inset:0;z-index:80}
  .mobile-nav-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
  .mobile-nav-sheet{position:absolute;left:0;right:0;bottom:0;max-height:min(82vh,760px);display:flex;flex-direction:column;background:var(--bg-subtle);border:1px solid var(--border-strong);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -18px 60px rgba(0,0,0,.45);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-nav-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border)}
  .mobile-nav-sheet>header div{display:flex;flex-direction:column;gap:2px}
  .mobile-nav-sheet>header small{font:700 10px/1 var(--font-data);letter-spacing:.14em;color:var(--primary)}
  .mobile-nav-sheet>header strong{font:700 20px/1.2 var(--font-display)}
  .mobile-nav-fechar{width:44px;height:44px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
  .mobile-nav-search-wrap{display:flex;flex-direction:column;gap:5px;padding:12px 12px 4px;color:var(--muted);font:700 10px/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase}
  .mobile-nav-search-wrap input{font:var(--font-body);font-size:14px;letter-spacing:normal;text-transform:none;padding:10px 12px;min-height:44px;background:var(--surface)}
  .mobile-nav-list{overflow-y:auto;padding:10px 12px 22px}
  .mobile-nav-list [hidden]{display:none!important}
  .mobile-nav-list .nav-area{border-bottom:1px solid var(--border);border-radius:0}
  .mobile-nav-list .nav-area-toggle{min-height:50px;padding:12px 8px;font-size:12px}
  .mobile-nav-list .nav-filhos{padding:0 0 12px 14px;display:none;flex-direction:column;gap:7px}
  .mobile-nav-list .nav-area.aberta>.nav-filhos{display:flex}
  .mobile-nav-list .nav-subgrupo-toggle{min-height:44px;padding:9px 8px 7px;font-size:10px}
  .mobile-nav-list .nav-subfilhos{display:none;padding:0 0 4px 0;gap:7px}
  .mobile-nav-list .nav-subgrupo.aberta>.nav-subfilhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-nav-list .mod{min-height:48px;padding:10px;background:var(--surface);border-color:var(--border);font-size:13px}
  .mobile-nav-list .mod.active{border-color:var(--primary-border)}
  body.menu-mobile-aberto{overflow:hidden}
  .command-palette{padding:12px 10px 76px}
  .command-panel{max-height:calc(100vh - 88px);border-radius:14px}
  .command-head{padding:8px}
  .command-result{min-height:48px;padding:11px 12px}
}
@media (max-width:430px){
  .mobile-nav-list .nav-subgrupo.aberta>.nav-subfilhos{grid-template-columns:1fr}
}

/* ============================================================
   COMPONENTES-BASE NOVOS (Item 3 do design) — Tokens.dc.html
   Todos derivados dos tokens existentes; funcionam nos temas
   escuro e claro. Classes reutilizáveis — nenhum ID de tela.
   ============================================================ */

/* ===== stepper de etapas do fluxo (anatomia: TelaFluxoPedido.dc.html) =====
   .stepper > .stepper-etapa > .stepper-circulo (ícone SVG inline de
   check/ponto/traço) + .stepper-rotulo + .stepper-sub (mono).
   Modificadores: .concluida .andamento .pulada .pendente .bloqueada.
   A tela marca aria-current="step" na etapa em andamento (.andamento).
   Horizontal no desktop; vertical <=640px. Cor nunca é o único canal:
   o ícone do círculo e o subrótulo textual acompanham o estado. */
.stepper{display:flex;align-items:flex-start;margin:0;padding:14px 4px 4px;list-style:none}
.stepper-etapa{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;text-align:center;background:transparent;border:0;font:inherit;color:inherit}
.stepper-etapa::before{content:'';position:absolute;top:16px;left:calc(-50% + 21px);right:calc(50% + 21px);height:2px;background:var(--border-strong)}
.stepper-etapa:first-child::before{display:none}
.stepper-etapa.concluida+.stepper-etapa::before{background:var(--green)}
.stepper-circulo{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:2px solid var(--muted);background:var(--bg-subtle);display:grid;place-items:center;color:var(--muted)}
.stepper-circulo svg{width:15px;height:15px;display:block}
.stepper-rotulo{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;color:var(--muted)}
.stepper-sub{font-family:var(--font-data);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stepper-etapa.concluida .stepper-circulo{border-color:var(--green);background:rgba(34,197,94,.12);color:var(--green)}
.stepper-etapa.concluida .stepper-rotulo{color:var(--text)}
.stepper-etapa.concluida .stepper-sub{color:var(--green)}
.stepper-etapa.andamento .stepper-circulo{border-color:var(--yellow);background:rgba(245,158,11,.12);color:var(--yellow)}
.stepper-etapa.andamento .stepper-rotulo{color:var(--text)}
.stepper-etapa.andamento .stepper-sub{color:var(--yellow)}
.stepper-etapa.bloqueada .stepper-circulo{border-color:var(--red);background:rgba(239,68,68,.12);color:var(--red)}
.stepper-etapa.bloqueada .stepper-rotulo{color:var(--text)}
.stepper-etapa.bloqueada .stepper-sub{color:var(--red)}
.stepper-etapa.pulada .stepper-circulo{border-color:var(--muted);background:var(--bg-subtle);color:var(--muted)}
.stepper-etapa.pendente .stepper-circulo{border-color:var(--muted);background:var(--bg-subtle);color:var(--muted)}

/* ===== timeline de custódia/auditoria (anatomia: TelaRastro.dc.html) =====
   .timeline (borda vertical) > .timeline-item > marcador colorido (::before)
   + .timeline-hora (font-data) + .timeline-rotulo (mono) + .timeline-corpo.
   Modificadores do marcador: .ok .aviso .erro .neutro. Append-only: a tela
   só lê — item nunca é removido nem editado. */
.timeline{display:flex;flex-direction:column;margin:0 0 0 8px;padding:0;list-style:none;border-left:2px solid var(--primary-border)}
.timeline-item{position:relative;display:flex;gap:14px;padding:10px 0 10px 16px}
.timeline-item::before{content:'';position:absolute;left:-6px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--muted);border:2px solid var(--bg)}
.timeline-hora{width:86px;flex-shrink:0;font-family:var(--font-data);font-size:11px;color:var(--muted)}
.timeline-rotulo{width:130px;flex-shrink:0;font-family:var(--font-data);font-size:11.5px;font-weight:600;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-corpo{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.timeline-corpo small{font-size:11.5px;color:var(--text-secondary)}
.timeline-item.ok::before{background:var(--green)}
.timeline-item.ok .timeline-rotulo{color:var(--green)}
.timeline-item.aviso::before{background:var(--yellow)}
.timeline-item.aviso .timeline-rotulo{color:var(--yellow)}
.timeline-item.erro::before{background:var(--red)}
.timeline-item.erro .timeline-rotulo{color:var(--red)}
.timeline-item.neutro::before{background:var(--muted)}
.timeline-item.neutro .timeline-rotulo{color:var(--muted)}

/* Navegação pessoal Ecoplast. O topo e o menu móvel mantêm suas regras. */
#nav-lateral[hidden],#preferencias-layout-grupo[hidden]{display:none!important}
.nav-lateral{display:none}
#preferencias-layout-grupo p{font-size:12px;line-height:1.5;color:var(--text-secondary)}
@media(min-width:981px){
  body[data-nav-layout^="lateral-"] #nav-areas,body[data-nav-layout^="lateral-"] #nav{display:none!important}
  body[data-nav-layout^="lateral-"] .main .command-trigger{margin-left:auto}
  body[data-nav-layout^="lateral-"] .main .content,body[data-nav-layout^="lateral-"] .shell-faixa,body[data-nav-layout^="lateral-"] .shell-rodape{margin-left:64px;min-width:0}
  body[data-nav-layout^="lateral-"] .main .content{width:auto}
  body[data-nav-layout="lateral-fixa"] .main .content,body[data-nav-layout="lateral-fixa"] .shell-faixa,body[data-nav-layout="lateral-fixa"] .shell-rodape{margin-left:260px}
  body[data-nav-layout^="lateral-"] .nav-lateral{position:fixed;top:var(--topbar-h,54px);bottom:0;left:0;z-index:61;display:flex;flex-direction:column;width:64px;padding:8px;background:var(--bg);border-right:1px solid var(--border);transition:width .16s ease;overflow:hidden}
  body[data-nav-layout^="lateral-"] .nav-lateral.aberta{width:260px;box-shadow:var(--shadow-lg)}
  body[data-nav-layout="lateral-fixa"] .nav-lateral{box-shadow:none}
  .nav-lateral-toggle{flex:0 0 44px;display:flex;align-items:center;gap:12px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:600 14px/1.3 var(--font-body);text-align:left;cursor:pointer}
  .nav-lateral-toggle:disabled{opacity:1;cursor:default}
  .nav-lateral-list{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-top:6px}
  .nav-lateral .nav-area-toggle{min-height:44px;padding:10px 12px;letter-spacing:.03em;font-size:11px}
  .nav-lateral .nav-subgrupo-toggle{min-height:40px;font-size:10px;line-height:1.35}
  .nav-lateral .mod{min-height:40px;min-width:0;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
  .nav-lateral .mod>span:not(.ic){min-width:0}
  .nav-lateral .nav-filhos{padding-left:7px}
  .nav-lateral:not(.aberta) .nav-filhos{display:none!important}
  .nav-lateral:not(.aberta) .nav-area-nome,.nav-lateral:not(.aberta) .nav-area-total,.nav-lateral:not(.aberta) .nav-chevron,.nav-lateral:not(.aberta) .nav-pending-badge,.nav-lateral:not(.aberta) .nav-lateral-titulo{display:none}
  .nav-lateral:not(.aberta) .nav-area-toggle{gap:0}
  .nav-lateral .nav-area-toggle:focus-visible,.nav-lateral .nav-subgrupo-toggle:focus-visible,.nav-lateral .mod:focus-visible,.nav-lateral-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  body[data-nav-layout^="lateral-"] .tab-view:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}
@media(min-width:981px) and (max-width:1100px){
  body[data-nav-layout^="lateral-"] .main .topbar .user-nome{display:none}
}
@media(prefers-reduced-motion:reduce){.nav-lateral,.nav-lateral *{transition:none!important}}
body.modo-terminal #nav-lateral{display:none!important}
body.modo-terminal[data-nav-layout^="lateral-"] .main .content,body.modo-terminal[data-nav-layout^="lateral-"] .shell-faixa,body.modo-terminal[data-nav-layout^="lateral-"] .shell-rodape{margin-left:0}
@media print{#nav-lateral{display:none!important}body[data-nav-layout^="lateral-"] .main .content{margin-left:0}}
/* Menu lateral: "Janelas" sobe para o meio livre do topo (#tb-janelas, movido pelo shell) e a faixa de baixo some;
   o conteúdo começa logo abaixo do topo. No modo fixo o "Módulos" (inerte) sai do alto da lateral. */
.tb-janelas[hidden]{display:none!important}
@media(min-width:981px){
  body[data-nav-layout^="lateral-"] .shell-faixa{display:none}
  body[data-nav-layout^="lateral-"] .main .topbar{z-index:62}
  body[data-nav-layout="lateral-fixa"] .nav-lateral-toggle{display:none}
  body[data-nav-layout="lateral-fixa"] .main .topbar{padding-left:0}
  body[data-nav-layout="lateral-fixa"] .main .topbar .brand{flex:0 0 260px;width:260px;box-sizing:border-box;padding-left:20px;min-width:0;overflow:hidden}
  .tb-janelas{flex:1 1 auto;min-width:0;display:flex;align-items:center;align-self:center}
  .tb-janelas .tabbar{position:static;flex:0 1 auto;min-width:0;max-width:100%;width:auto;padding:0;gap:8px;background:transparent;border:0;overflow:visible;align-items:center}
  .tb-janelas #tabbar{overflow:visible}
  .tb-janelas .guias{flex:1 1 auto;min-width:0}
  .tb-janelas .g2-janelas.g2-guias-visiveis .guias{max-width:none}
  .tb-janelas .guias-menu{left:0;right:auto}
}

/* ===== drawer lateral (anatomia: Assistente.dc.html) =====
   .drawer[hidden] fecha de verdade > .drawer-backdrop ([data-fechar-drawer])
   + .drawer-painel (role="dialog" aria-modal="true" na marcação da tela)
   > .drawer-cabecalho (.drawer-titulo/.drawer-contexto/.drawer-fechar)
   + .drawer-corpo + .drawer-rodape. Desktop: painel à direita 380px.
   <=640px: bottom sheet. Abrir/fechar pelo helper ui.drawer do erp.js
   (foco vai ao painel, Esc fecha, foco devolvido ao acionador). */
.drawer{position:fixed;inset:0;z-index:85;display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-backdrop{position:absolute;inset:0;border:0;padding:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);cursor:pointer}
.drawer-painel{position:relative;z-index:1;width:min(380px,100%);height:100%;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--primary-border);box-shadow:var(--shadow-lg)}
.drawer-cabecalho{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.drawer-titulo{font-family:var(--font-display);font-size:14px;font-weight:600}
.drawer-contexto{margin-left:auto;font-family:var(--font-data);font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-fechar{width:38px;height:38px;flex-shrink:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.drawer-fechar:hover{background:var(--surface-hover)}
.drawer-corpo{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.drawer-rodape{padding:10px 16px;border-top:1px solid var(--border);font-size:10.5px;color:var(--muted);line-height:1.5}

/* ===== banner de estado — o que houve · por quê · o que fazer =====
   (anatomia: Estados.dc.html; emitido pelo helper ui.estado do erp.js)
   .estado-banner.estado-{info|aviso|erro|sucesso} > .estado-head
   (.estado-titulo chip + .estado-code mono) + .estado-msg + .estado-acao
   (próxima ação em texto) + .estado-cta (botões que a TELA só monta depois
   de ctx.podeAcao). role="alert" no erro; role="status" nos demais.
   Fundos translúcidos derivados de --primary/--yellow/--red/--green,
   como os badges existentes. */
.estado-banner{display:flex;flex-direction:column;gap:9px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.estado-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.estado-titulo{font-family:var(--font-data);font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--surface-hover);color:var(--text-secondary)}
.estado-code{font-family:var(--font-data);font-size:10.5px;color:var(--muted)}
.estado-msg{font-size:13.5px;line-height:1.55}
.estado-acao{font-size:12.5px;color:var(--text-secondary)}
.estado-cta{display:flex;flex-wrap:wrap;gap:8px}
.estado-banner.estado-info{border-color:var(--primary-border)}
.estado-banner.estado-info .estado-titulo{background:var(--primary-surface);color:var(--primary)}
.estado-banner.estado-aviso{border-color:rgba(245,158,11,.25)}
.estado-banner.estado-aviso .estado-titulo{background:rgba(245,158,11,.12);color:var(--yellow)}
.estado-banner.estado-erro{border-color:rgba(239,68,68,.25)}
.estado-banner.estado-erro .estado-titulo{background:rgba(239,68,68,.12);color:var(--red)}
.estado-banner.estado-sucesso{border-color:rgba(34,197,94,.25)}
.estado-banner.estado-sucesso .estado-titulo{background:rgba(34,197,94,.14);color:var(--green)}

/* ===== skeleton de carregamento (Estados.dc.html: nunca spinner em tabela) =====
   Aplicar em blocos placeholder; o shimmer é sutil e desliga inteiro sob
   prefers-reduced-motion. */
.skeleton{position:relative;overflow:hidden;min-height:14px;border-radius:var(--radius-xs);background:var(--surface-hover);color:transparent!important;pointer-events:none;user-select:none}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:skeleton-brilho 1.4s ease-in-out infinite}
@keyframes skeleton-brilho{100%{transform:translateX(100%)}}

/* ===== paleta ⌘K — só polimento visual/acessível; comportamento intacto ===== */
.command-result small{margin-left:auto;font-family:var(--font-data);font-size:10px;color:var(--muted);white-space:nowrap}
.command-result:hover small,.command-result-active small{color:var(--primary)}
.command-input:focus-visible{outline:2px solid var(--primary)!important;outline-offset:-2px}

/* foco visível dos componentes novos — anel com --primary, como o restante do shell */
.stepper-etapa:focus-visible,.drawer-fechar:focus-visible,.drawer-backdrop:focus-visible,.drawer-painel:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.stepper-etapa:focus-visible{border-radius:var(--radius-sm)}
.drawer-painel:focus-visible{outline-offset:-3px}

/* mobile <=640px: stepper vertical, drawer vira bottom sheet, alvos >=44px,
   timeline quebra linha para nunca estourar 390px */
@media (max-width:640px){
  .stepper{flex-direction:column;align-items:stretch;padding:4px 0}
  .stepper-etapa{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:1px;padding:8px 4px;min-height:44px;text-align:left}
  .stepper-circulo{grid-row:1 / span 2}
  .stepper-rotulo{white-space:normal}
  .stepper-sub{grid-column:2}
  .stepper-etapa::before{top:0;bottom:auto;left:20px;right:auto;width:2px;height:calc(50% - 19px)}
  .stepper-etapa::after{content:'';position:absolute;left:20px;top:calc(50% + 19px);bottom:0;width:2px;background:var(--border-strong)}
  .stepper-etapa:last-child::after{display:none}
  .stepper-etapa.concluida::after{background:var(--green)}
  .timeline-item{flex-wrap:wrap}
  .timeline-corpo{flex-basis:100%}
  .drawer{align-items:flex-end}
  .drawer-painel{width:100%;height:auto;max-height:min(82vh,760px);border-left:0;border-top:1px solid var(--primary-border);border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .drawer-fechar{width:44px;height:44px}
  .estado-cta .btn{min-height:44px}
}

/* acessibilidade: quem pede menos movimento não recebe shimmer nem transição */
@media (prefers-reduced-motion:reduce){
  .skeleton::after{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* tema claro: mesmos componentes, contrastes recalibrados (nada nasce só-escuro).
   Valores reutilizam o que o bloco claro já usa (#b45309, rgba(16,23,40,…)). */
:root[data-theme="light"] .estado-banner.estado-info .estado-titulo{background:var(--primary-surface);color:var(--primary)}
:root[data-theme="light"] .estado-banner.estado-aviso .estado-titulo{background:rgba(180,83,9,.12);color:#b45309}
:root[data-theme="light"] .timeline-item.ok::before{background:var(--primary)}
:root[data-theme="light"] .timeline-item.ok .timeline-rotulo{color:var(--primary)}
:root[data-theme="light"] .timeline-item.aviso .timeline-rotulo{color:#b45309}
:root[data-theme="light"] .stepper-etapa.andamento .stepper-circulo{border-color:#b45309;color:#b45309}
:root[data-theme="light"] .stepper-etapa.andamento .stepper-sub{color:#b45309}
:root[data-theme="light"] .drawer-backdrop{background:rgba(16,23,40,.34)}
:root[data-theme="light"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(16,23,40,.08),transparent)}

/* ============================================================
   INFRA MOBILE DO SHELL (Itens 5–6) — ShellMobile.dc.html +
   MobileFluxoPedido/MobileRomaneio/MobileConvergencia/MobileInicio.
   Classes reutilizáveis pelas oito telas; nenhuma regra de negócio.
   Tudo derivado dos tokens — funciona nos temas escuro E claro.
   ============================================================ */

/* ação primária fixa no rodapé (MobileFluxoPedido/MobileRomaneio): no desktop
   é bloco normal ao fim da tela; <=640px cola acima da botnav. A variante
   [disabled]/.bloqueada mantém o botão visível e NOMEIA a causa da trava em
   .acao-fixa-causa — "Despachar (2/3)": a trava nunca é escondida. */
.acao-fixa{display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:var(--topbar-bg);backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.acao-fixa .btn{width:100%;min-height:48px;font-size:14px;font-weight:700}
.acao-fixa .btn[disabled],.acao-fixa .btn.bloqueada{background:var(--bg-subtle);border:1px solid var(--border-strong);color:var(--muted);cursor:not-allowed;filter:none}
.acao-fixa-causa{font-size:10.5px;color:var(--muted);text-align:center}
.acao-fixa .btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* comparação Litos × ERP (MobileConvergencia): dois blocos lado a lado que
   nunca estouram 390px — colunas minmax(0,1fr) e filhos com min-width:0. */
.comparacao-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.comparacao-2col>*{min-width:0;overflow-wrap:break-word}
.comparacao-fonte{font:700 9.5px/1.4 var(--font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* KPIs em grade de 2 colunas no mobile (MobileInicio/ShellMobile). */
/* .kpi-grid-mobile: escopada a 640px — aplicada estaticamente não pode vencer o
   auto-fit do desktop (achado dos agentes das telas Início e Financeiro). */
@media (max-width:640px){.kpi-grid-mobile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.kpi-grid-mobile .kpi{padding:13px 15px;margin:0;min-width:0}

/* filtros em bottom sheet: modificador do componente .drawer existente —
   abertura/fecho/foco continuam com ui.drawer; aqui só o miolo do formulário
   e o rodapé de aplicar/limpar com alvos >=44px. */
.filtros-drawer .drawer-corpo{gap:12px}
.filtros-drawer .drawer-corpo label.campo{margin-bottom:0}
.filtros-drawer .drawer-rodape{display:flex;gap:8px}
.filtros-drawer .drawer-rodape .btn{flex:1;min-height:44px}

/* tema claro: recalibra o que não deriva só de token */
:root[data-theme="light"] .acao-fixa{box-shadow:0 -10px 30px rgba(16,23,40,.14)}
:root[data-theme="light"] .filtros-drawer .drawer-corpo input,:root[data-theme="light"] .filtros-drawer .drawer-corpo select{background:var(--surface)}
:root[data-theme="light"] .comparacao-2col .comparacao-fonte{color:var(--text-secondary)}

/* <=640px: botnav de 5 itens com alvos >=44px; badge de Alertas sobre o
   ícone reusa .nav-pending-badge (mesma fonte de contagem da sidebar); o
   modo terminal do chão (body.modo-terminal) NÃO tem botnav; a ação fixa
   flutua acima da botnav — e desce ao rodapé quando ela não existe. */
@media (max-width:640px){
  .botnav .b{min-height:44px;min-width:44px;gap:3px;padding:6px 2px}
  .botnav .b .ic{position:relative}
  .botnav .b .nav-pending-badge{position:absolute;top:-5px;right:-11px;margin:0;min-width:15px;min-height:15px;padding:1px 4px;background:var(--red);color:#fff;font-size:8.5px}
  .botnav .b:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:var(--radius-sm)}
  .botnav .b[aria-current="page"]{color:var(--primary)}
  body.modo-terminal .botnav{display:none}
  .acao-fixa{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom));z-index:19}
  body.modo-terminal .acao-fixa{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .content:has(.acao-fixa){padding-bottom:190px}
  body.modo-terminal .content:has(.acao-fixa){padding-bottom:120px}
}

/* ============================================================
   ASSISTENTE CONTEXTUAL (Item 7) — Assistente.dc.html.
   Contrato de classes para o shell: .assistente-botao,
   .assistente-drawer (modificador do .drawer existente),
   .assistente-atalhos e .assistente-resultado. Tudo derivado
   dos tokens — funciona nos temas escuro E claro.
   O assistente explica; quem executa é o sistema.
   ============================================================ */

/* botão flutuante: pill ícone+rótulo no canto inferior direito.
   z-index 40: acima do conteúdo, abaixo do .drawer (85) — o painel
   aberto sempre cobre o acionador. */
.assistente-botao{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:99px;background:var(--primary-fill,var(--primary));color:#fff;font:600 13px/1 var(--font-body);cursor:pointer;box-shadow:var(--shadow-lg);transition:.15s}
.assistente-botao:hover{filter:brightness(1.06)}
.topbar .assistente-botao{position:static;right:auto;bottom:auto;z-index:auto;flex-shrink:0;min-width:44px;padding:8px 10px;box-shadow:none}
.topbar .assistente-botao svg{width:18px;height:18px}
.topbar .assistente-botao-rotulo{display:none}
.assistente-botao .ic{display:grid;place-items:center}
.assistente-botao .ic svg{width:17px;height:17px;display:block}
/* modo terminal do chão: nada flutua sobre a bipagem */
body.modo-terminal .assistente-botao{display:none}

/* drawer do assistente: refina o .drawer sem duplicar overlay/painel */
.assistente-drawer .drawer-painel{border-left-color:var(--primary-border);animation:assistente-entrada .18s ease-out}
@keyframes assistente-entrada{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.assistente-drawer .drawer-cabecalho{flex-shrink:0}
.assistente-drawer .drawer-corpo{gap:12px;overflow-x:hidden}
.assistente-drawer .drawer-corpo>*{min-width:0}
.assistente-drawer .drawer-rodape{font-size:10.5px;color:var(--muted)}
/* rótulo de seção do corpo (atalhos do contexto / resultados) */
.assistente-secao{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* busca "pergunte sobre esta tela" — herda .input; alvo >=44px */
.assistente-busca{min-height:44px;background:var(--bg)}

/* atalhos do contexto: chips clicáveis empilhados */
.assistente-atalhos{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.assistente-atalho{min-height:44px;display:flex;align-items:center;text-align:left;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font:500 12.5px/1.4 var(--font-body);cursor:pointer;transition:.15s}
.assistente-atalho:hover{background:var(--surface-hover);color:var(--text);border-color:var(--primary-border)}

/* card de resposta: título + nível + o-quê/por-quê/o-que-fazer + fonte.
   Nível reusa as cores dos .estado-*: informacao=info, atencao=aviso,
   bloqueio=erro — cor nunca é o único canal: o rótulo textual acompanha. */
.assistente-resultado{display:flex;flex-direction:column;gap:9px;padding:13px 14px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm)}
.assistente-resultado-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.assistente-resultado-titulo{font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.assistente-nivel{font-family:var(--font-data);font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:20px;background:var(--surface-hover);color:var(--text-secondary)}
.assistente-nivel.informacao{background:var(--primary-surface);color:var(--primary)}
.assistente-nivel.atencao{background:rgba(245,158,11,.12);color:var(--yellow)}
.assistente-nivel.bloqueio{background:rgba(239,68,68,.12);color:var(--red)}
.assistente-bloco{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.55;min-width:0;overflow-wrap:break-word}
.assistente-bloco-rotulo{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.assistente-fonte{font-family:var(--font-data);font-size:10px;color:var(--muted);overflow-wrap:break-word}
.assistente-resultado .btn{align-self:flex-start}

/* foco visível — anel primário, como o restante do shell */
.assistente-botao:focus-visible,.assistente-atalho:focus-visible,.assistente-resultado:focus-visible,.assistente-busca:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* <=640px: launcher integra a botnav; drawer vira bottom sheet a ~60% com
   cabeçalho fixo; alvos >=44px. */
@media (max-width:640px){
  /* No mobile o launcher é um item da barra real, não uma camada sobre o
     formulário. O JS o move para #botnav; desktop permanece FAB fixed. */
  .botnav .assistente-botao{position:static;right:auto;bottom:auto;z-index:auto;flex:1;flex-direction:column;gap:2px;justify-content:center;min-width:44px;min-height:44px;padding:6px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text-secondary);font-size:10px;line-height:1.1;white-space:normal}
  .botnav .assistente-botao:hover{filter:none;background:var(--surface-hover)}
  .botnav .assistente-botao svg{width:19px;height:19px;display:block}
  .assistente-drawer .drawer-painel{height:60vh;max-height:min(82vh,760px)}
  .assistente-atalho{font-size:13px}
  .assistente-resultado .btn{min-height:44px}
}

/* menos movimento: sem entrada animada do painel nem transição do botão */
@media (prefers-reduced-motion:reduce){
  .assistente-drawer .drawer-painel{animation:none}
  .assistente-botao{transition:none}
}

/* tema claro: recalibra o que define cor própria (mesmos valores que o
   bloco claro já usa — #b45309 e --primary/--primary-surface) */
:root[data-theme="light"] .assistente-nivel.informacao{background:var(--primary-surface);color:var(--primary)}
:root[data-theme="light"] .assistente-nivel.atencao{background:rgba(180,83,9,.12);color:#b45309}

/* Vendas: alvo de toque na tela de orçamentos (patch da entrega 22/09) */
.mod-orcamentos .btn{min-height:44px}
.mod-orcamentos .input{min-height:44px}
.mod-orcamentos .tabela .input{max-width:9rem}

/* ============================================================
   CASCA NO ESTILO DO CAIXA (frente casca-caixa, 14/10/2026)
   Topo: marca + contexto (Área › Tela) + busca + loja + usuário.
   Faixa de ÁREAS como o #tabBar do caixa (aba ativa com sublinhado
   --gradient-1) e, abaixo, as telas da área como sub-abas em pílula,
   divididas por subgrupo. A faixa cola logo abaixo do topo pela altura
   MEDIDA (--topbar-h, ResizeObserver no erp.js) — o caixa crava
   top:45px/46px e desalinha quando o topo quebra linha.
   ============================================================ */
.topbar .brand{padding:0 8px 0 0;font-size:15px;gap:8px;flex-shrink:0}
.topbar .brand .mark{width:26px;height:26px}
.topbar .brand small{font-size:9.5px}
.nav-btn{display:none}
html{scroll-padding-top:calc(var(--topbar-h,0px) + var(--area-nav-h,0px) + 8px)}
.area-nav{position:sticky;top:var(--topbar-h,57px);z-index:4;background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);min-width:0}
.area-nav:empty{display:none}
.area-tabs{display:flex;gap:2px;padding:0 20px;overflow-x:auto;scrollbar-width:thin}
.area-tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 14px;border:0;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:transparent;color:var(--muted);font:500 13px/1.2 var(--font-body);white-space:nowrap;cursor:pointer;transition:color .15s,background .15s}
.area-tab:hover{color:var(--text);background:var(--surface-hover)}
.area-tab.active{color:var(--text);font-weight:600}
.area-tab.active::after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;border-radius:2px 2px 0 0;background:var(--gradient-1)}
.area-tab .ic{display:grid;place-items:center}
.area-tab .ic svg{width:15px;height:15px;display:block}
.area-tab.active .ic{color:var(--primary)}
.area-tab .nav-pending-badge{margin-left:2px}
.area-subtabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding:8px 14px;border-top:1px solid var(--border);background:var(--bg-subtle)}
.area-subtabs[hidden]{display:none}
.area-subtab-grupo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 6px}
.area-subtab-grupo+.area-subtab-grupo{border-left:1px solid var(--border-strong)}
.area-subtab{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid transparent;border-radius:20px;background:transparent;color:var(--text-secondary);font:600 12.5px/1.2 var(--font-body);white-space:nowrap;cursor:pointer;transition:color .15s,background .15s}
.area-subtab:hover{background:var(--surface);color:var(--text)}
.area-subtab.active{background:var(--primary-surface);color:var(--primary);border-color:var(--primary-border)}
.area-tab:focus-visible,.area-subtab:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
/* abas abertas (workspace): faixa discreta logo abaixo das sub-abas; as
   ações em massa ficam como links (alvo de 44px mantido) para não competir
   com as abas — no caixa não existem, aqui são do MDI do ERP */
.tabbar{position:relative;z-index:3;background:var(--bg)}
.tab-actions .btn{background:transparent;border-color:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:6px 10px}
.tab-actions .btn:hover{color:var(--text);background:var(--surface)}
@media (min-width:641px){.topbar .command-trigger{margin-left:12px}}
.shell-rodape{margin-top:auto;padding:12px 26px;border-top:1px solid var(--border);font-family:var(--font-data);font-size:11px;color:var(--muted)}
@media (max-width:640px){
  /* celular (como o shell do caixa): áreas pela folha "Menu" e pela barra de
     baixo; no topo fica só a faixa de telas da área atual, rolando de lado. */
  .nav-btn{display:grid;flex-shrink:0;width:44px;height:44px}
  .topbar .brand{display:none}
  .area-nav{top:var(--topbar-h,68px)}
  .area-tabs{display:none}
  .area-subtabs{flex-wrap:nowrap;overflow-x:auto;padding:6px 10px;border-top:0;scrollbar-width:none}
  .area-subtab-grupo{flex-wrap:nowrap;padding:0 4px}
  .area-subtab{min-height:44px;padding:8px 14px}
  /* o contexto (Área › Tela) ganha a segunda linha do topo em vez de sumir
     espremido pelos botões — a faixa de baixo acompanha pela altura medida */
  .topbar{flex-wrap:wrap;row-gap:4px}
  .topbar-context{order:9;flex:1 0 100%;padding:0 4px 2px}
  .shell-rodape{display:none}
}

/* ===== lista padrão (ui.lista): filtro + contagem no topo, tabela, rodapé
   com paginação — o "table-toolbar / table-footer" do caixa num componente só.
   Ordenação por botão no cabeçalho (teclado e leitor de tela), contagem viva,
   esqueleto ao carregar (nunca spinner em tabela), vazio/erro por ui.estado. */
.lista{display:flex;flex-direction:column;gap:10px;min-width:0}
.lista-topo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lista-filtro{flex:1 1 220px;max-width:360px;min-height:40px}
.lista-contagem{margin-left:auto;font-family:var(--font-data);font-size:11px;color:var(--muted);white-space:nowrap}
.lista-nota{padding:8px 12px;border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-sm);background:rgba(245,158,11,.06);color:var(--text-secondary);font-size:12.5px}
.lista-nota[hidden]{display:none}
.lista-tbl th{padding:0}
.lista-ordenar{width:100%;display:flex;align-items:center;gap:4px;min-height:40px;padding:11px 14px;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.lista-tbl th.num .lista-ordenar{justify-content:flex-end}
.lista-ordenar:hover{color:var(--text)}
.lista-ordenar:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.lista-ordenar.asc .sort-ind{opacity:.9;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--primary)}
.lista-ordenar.desc .sort-ind{opacity:.9;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--primary)}
.lista-tbl tbody tr:nth-child(even){background:rgba(255,255,255,.012)}
.lista-tbl tr.clicavel:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.lista-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0;font-size:12px;color:var(--muted)}
.lista-rodape[hidden]{display:none}
.lista-por-pagina{display:inline-flex;align-items:center;gap:8px}
.lista-por-pagina select{min-height:36px;padding:6px 10px;font-size:12.5px}
.lista-paginas{display:inline-flex;align-items:center;gap:8px}
.lista-paginas .btn{min-height:36px;padding:6px 12px;font-size:13px}
.lista-paginas .btn:disabled{opacity:.45;cursor:not-allowed}
.lista-pagina{font-family:var(--font-data);font-size:11.5px;color:var(--text-secondary);white-space:nowrap}
.lista-esqueleto{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.lista-esqueleto .skeleton{height:34px;border-radius:var(--radius-xs)}
:root[data-theme="light"] .lista-tbl tbody tr:nth-child(even){background:rgba(16,23,40,.025)}
@media (max-width:640px){
  .lista-filtro{max-width:none;min-height:44px}
  .lista-contagem{margin-left:0;width:100%;white-space:normal}
  /* tabela vira cartões (regra global de .tbl) — cabeçalho some, então a
     ordenação fica para o desktop; paginação ganha alvos de 44px */
  .lista-tbl tbody tr:nth-child(even){background:transparent}
  .lista-rodape{flex-direction:column-reverse;align-items:stretch}
  .lista-paginas{justify-content:space-between}
  .lista-paginas .btn,.lista-por-pagina select{min-height:44px}
}
.lista-por-pagina{white-space:nowrap}
.lista-por-pagina select{width:auto}
/* tablet (641–980): topo enxuto para o contexto (Área › Tela) não sumir */
@media (min-width:641px) and (max-width:980px){
  .topbar{gap:10px;padding:12px 16px}
  .topbar .brand div,.topbar .user-nome,.topbar .loja-lbl,.command-trigger kbd{display:none}
  .topbar>.pill{font-size:0;width:28px;height:28px;padding:7px;box-sizing:border-box}
  .topbar>.pill .dot{margin:0;vertical-align:top}
  .topbar-context{flex:1 1 auto}
  .topbar #loja-sw{max-width:150px}
  .area-tabs,.area-subtabs{padding-left:10px;padding-right:10px}
  .content{padding:20px 18px 40px}
}

/* [ECOPLAST UX] bloco caixa: inicio (gerado por ux/aplicar-ux.js; fonte ux/arquivos/public/ux-caixa.css) */
/* ====================================================================
   ECOPLAST UX (19/10/2026) · padrão do CAIXA da Belo Santo no ERP
   Fonte da verdade: caixa /opt/caixa-sicoob/public (style.css CARBON v4 +
   "Fase 1" azul da marca + REFORMA-CPCR + mods/cr-v2.css + shell de banco).
   Este bloco é anexado ao fim do style.css pelo ux/aplicar-ux.js (bloco
   gerenciado). A cascata vence as regras antigas sem editar o que está acima.
   Componentes compartilhados (outros agentes usam estes nomes):
     topo .topbar / .area-tab · faixa .shell-faixa / .area-subtab / guias .tab
     .btn .btn-primary .btn-secondary .btn-ghost .btn-success .btn-danger .btn-sm .btn-xs
     .badge (+ .ok .warn .err .badge-green .badge-red .badge-yellow .badge-gray .badge-blue)
     .fin-toolbar .fin-tabs .fin-tab .fin-search .perf-presets .perf-btn
     .kpi-chips .kpi-chip (.vencidos .hoje .avencer .recebido .pendentes) .table-wrap .table-footer
     .fin-table (+ .fin-row-overdue .fin-row-today .fin-row-paid) .selection-bar .section-title
   ==================================================================== */

/* ── tokens do caixa (dark = CARBON + Fase 1; light = paleta clara do caixa) ── */
:root{
  --font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Space Grotesk','Instrument Sans',sans-serif;
  --font-data:'IBM Plex Mono','Fira Code','Courier New',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --transition-fast:.15s ease;--transition-med:.2s ease;--transition-slow:.3s ease;
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --bg:#0b0d12;--bg-subtle:#0f1117;--surface:#13161f;--surface-hover:#191d28;
  --card:#13161f;--card-hover:#191d28;
  --border:rgba(255,255,255,.07);--border-subtle:rgba(255,255,255,.045);--border-strong:rgba(255,255,255,.12);
  --text:#e9edf5;--text-secondary:#98a2b3;--muted:#586173;
  --primary:#6a75ff;--primary-hover:#4553f5;--primary-fill:#4553f5;--primary-fill-hover:#3a46d9;
  --primary-glow:rgba(95,107,255,.16);--primary-surface:rgba(95,107,255,.10);--primary-border:rgba(95,107,255,.36);
  --accent:#6a75ff;--accent-2:#969dff;
  --gradient-1:linear-gradient(135deg,#3a46d9 0%,#4553f5 100%);
  --green:#41b07f;--green-glow:rgba(65,176,127,.10);
  --red:#e05766;--red-glow:rgba(224,87,102,.09);
  --yellow:#d6a13c;--yellow-glow:rgba(214,161,60,.10);
  --orange:#df7d48;
  --input-bg:#0b0d12;--input-border:rgba(255,255,255,.08);
  --topbar-bg:rgba(11,13,18,.85);
  --badge-blue-bg:rgba(95,107,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);--shadow-xl:0 8px 32px rgba(0,0,0,.7);
  --table-stripe:rgba(255,255,255,.015);--table-hover:rgba(255,255,255,.04);
}
:root[data-theme="light"]{
  --bg:#f5f7fa;--bg-subtle:#eceff4;--surface:#ffffff;--surface-hover:#f7f9fc;
  --card:#ffffff;--card-hover:#f7f9fc;
  --border:rgba(15,23,42,.08);--border-subtle:rgba(15,23,42,.05);--border-strong:rgba(15,23,42,.14);
  --text:#1a2236;--text-secondary:#475067;--muted:#6b7589;
  --primary:#2a3aff;--primary-hover:#1f2ccc;--primary-fill:#2a3aff;--primary-fill-hover:#1f2ccc;
  --primary-glow:rgba(42,58,255,.12);--primary-surface:rgba(42,58,255,.06);--primary-border:rgba(42,58,255,.28);
  --accent:#2a3aff;--accent-2:#5f6bff;
  --gradient-1:linear-gradient(135deg,#1f2ccc 0%,#2a3aff 100%);
  --green:#15784f;--green-glow:rgba(21,120,79,.08);
  --red:#d23a57;--red-glow:rgba(210,58,87,.07);
  --yellow:#b9802a;--yellow-glow:rgba(185,128,42,.08);
  --orange:#c2510c;
  --input-bg:#ffffff;--input-border:rgba(15,23,42,.12);
  --topbar-bg:rgba(255,255,255,.9);
  --badge-blue-bg:rgba(42,58,255,.08);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow:0 2px 8px rgba(15,23,42,.07);
  --shadow-lg:0 4px 16px rgba(15,23,42,.09);--shadow-xl:0 8px 32px rgba(15,23,42,.12);
  --table-stripe:rgba(15,23,42,.015);--table-hover:rgba(15,23,42,.03);
}
body{font-size:14px;line-height:1.5}
::selection{background:var(--primary-fill,#2a3aff);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── SHELL: topo único (marca + áreas + ações), faixa de telas e abas, largura total ── */
.shell-cabecalho{display:contents}
.main .topbar{position:sticky;top:0;z-index:60;display:flex;align-items:stretch;gap:10px;min-height:54px;padding:0 20px;
  background:var(--topbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.main .topbar>*{align-self:center}
.main .topbar .brand{padding:0 6px 0 0;gap:6px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.5px}
.main .topbar .brand>div small{display:inline;margin-left:2px;font:600 15px/1 var(--font-display);letter-spacing:-.2px;text-transform:none;
  background:var(--gradient-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.nav-areas{align-self:stretch!important;display:flex;min-width:0;flex:1 1 auto}
.nav-areas .area-tabs{display:flex;align-items:stretch;gap:2px;padding:0;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-areas .area-tabs::-webkit-scrollbar{display:none}
.nav-areas .area-tab{min-height:0;height:100%;padding:0 12px;border-radius:var(--radius-xs) var(--radius-xs) 0 0;color:var(--muted);font:500 13px/1 var(--font-body);gap:6px}
.nav-areas .area-tab:hover{color:var(--text);background:var(--surface-hover)}
.nav-areas .area-tab.active{color:var(--text);font-weight:600;background:transparent}
.nav-areas .area-tab.active::after{left:8px;right:8px;height:2px;bottom:0;background:var(--gradient-1)}
.nav-areas .area-tab .ic svg{width:14px;height:14px}
.nav-areas .area-tab:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
/* contexto (Área › Tela): no desktop a área e a tela já aparecem marcadas no topo e na faixa;
   o texto fica só para leitor de tela; o selo "somente visualização" continua visível */
.main .topbar-context{flex:0 0 auto}
.main .topbar-context>#tb-group,.main .topbar-context>#tb-separator,.main .topbar-context>#tb-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx [hidden],.shell-faixa [hidden],.fx-painel [hidden],.selection-bar[hidden],.badge[hidden]{display:none!important}
.main .command-trigger{margin-left:0;min-height:34px;padding:6px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted)}
.main .command-trigger:hover{border-color:var(--primary);color:var(--primary);background:transparent}
.main .command-trigger-label{display:none}
.main .loja-sw-wrap{margin-left:0;gap:6px}
.main #loja-sw{padding:5px 10px;border-radius:var(--radius-xs);border:1.5px solid var(--loja-cor,var(--border));background:var(--surface);font-size:12px;max-width:320px}
.main .tema-btn,.main .btn-sair{width:auto;min-width:34px;height:34px;padding:0 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);margin-left:0}
.main .tema-btn:hover{border-color:var(--primary);color:var(--primary)}
.main .btn-sair[data-sair]{font-size:12px;font-weight:500;padding:0 14px}
.main .btn-sair[data-sair]:hover{border-color:var(--red);color:var(--red)}
.main .user-box{gap:8px;margin-left:0}
.main .user-nome{font-size:13px;font-weight:500;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main .topbar>.pill{font-size:0;width:14px;height:14px;padding:0;border:0;background:transparent}
.main .topbar>.pill .dot{margin:0;width:8px;height:8px}
#preferencias-btn{min-width:34px!important;min-height:34px!important}

/* Navegacao e trabalho aberto tem linhas proprias; nenhum disputa a largura do outro. */
.shell-faixa{position:sticky;top:var(--topbar-h,54px);z-index:59;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:0;min-height:34px;padding:0 20px;
  background:var(--topbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.shell-faixa .area-nav{position:static;flex:1 1 auto;min-width:0;background:transparent;border:0;backdrop-filter:none}
.shell-faixa .area-subtabs{flex-wrap:nowrap;gap:4px;padding:4px 0;border:0;background:transparent;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.shell-faixa .area-subtabs::-webkit-scrollbar{height:4px}
.shell-faixa .area-subtabs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.shell-faixa .area-subtab-grupo{flex-wrap:nowrap;gap:4px;padding:0 6px}
.shell-faixa .area-subtab-grupo:first-child{padding-left:0}
.shell-faixa .area-subtab-grupo+.area-subtab-grupo{border-left:1px solid var(--border)}
.shell-faixa .area-subtab{min-height:28px;padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font:600 12px/1.2 var(--font-body)}
.shell-faixa .area-subtab:hover{border-color:var(--primary);color:var(--text);background:var(--surface)}
.shell-faixa .area-subtab.active{border-color:var(--primary);background:var(--primary-surface);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.shell-faixa .area-subtab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.shell-faixa .tabbar{position:static;max-width:none;min-width:0;width:100%;padding:3px 0;gap:8px;background:transparent;border:0;border-top:1px solid var(--border);overflow:visible;align-items:center}
.shell-faixa #tabbar{overflow:visible}
.guias-rotulo{flex:0 0 auto;font:600 11px/1.2 var(--font-body);color:var(--muted)}
.guias{display:flex;flex:1 1 auto;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.guias::-webkit-scrollbar{display:none}
.shell-faixa .tab,.guias .tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;max-width:180px;min-height:26px;padding:2px 4px 2px 10px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--muted);font:500 11.5px/1.2 var(--font-body);cursor:pointer;white-space:nowrap}
.guias .tab>span:first-child{overflow:hidden;text-overflow:ellipsis}
.guias .tab:hover{color:var(--text);border-color:var(--border-strong);background:transparent}
.guias .tab.ativa{color:var(--text);border-color:var(--primary-border);background:var(--primary-surface);font-weight:600}
.guias .tab .x{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border-radius:50%;opacity:1}
.guias .tab .x:hover{opacity:1;background:var(--red-glow);color:var(--red)}
.guias-mais{position:relative;flex:0 0 auto}
.guias-mais-btn{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 9px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:600 11.5px/1 var(--font-body);cursor:pointer}
.guias-mais-btn:hover,.guias-mais-btn[aria-expanded="true"]{border-color:var(--primary);color:var(--primary)}
.guias-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:120;min-width:240px;max-width:min(360px,92vw);max-height:60vh;overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px}
.guias-menu[hidden]{display:none}
.guias-menu-tit{padding:6px 10px 4px;font:600 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.guias-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:500 12.5px/1.3 var(--font-body);text-align:left;cursor:pointer}
.guias-menu button:hover,.guias-menu button:focus-visible{background:var(--primary-glow)}
.guias-menu button.ativa{color:var(--primary);font-weight:600}
.guias-menu hr{border:0;border-top:1px solid var(--border);margin:4px 0}
.guias-menu .perigo{color:var(--red)}
html{scroll-padding-top:calc(var(--topbar-h,54px) + var(--area-nav-h,40px) + 8px);scroll-padding-bottom:calc(var(--botnav-h,0px) + 12px)}

.main .content{max-width:none;margin:0;padding:12px 24px 72px}
.shell-rodape{padding:8px 24px;font-size:10.5px}

/* tablet e janelas reduzidas (641–1220): áreas descem para a 2ª linha do topo, sem espremer botões */
@media (min-width:641px) and (max-width:1220px){
  .main .topbar{flex-wrap:wrap;row-gap:0;padding:4px 14px}
  .main .topbar>*{margin-top:4px}
  .nav-areas{order:20;flex:1 0 100%;height:36px;margin-top:4px!important}
  .main .content{padding:14px 16px 60px}
  .shell-faixa{padding:0 14px}
}
@media (min-width:981px) and (max-width:1599px){
  .nav-areas .area-tab{padding:0 8px}
  .nav-areas .area-tab .ic{display:none}
  .main .user-nome{display:none}
}
@media (min-width:981px) and (max-width:1279px){
  .nav-areas .area-tab{padding:0 8px;font-size:12.5px}
  .main .topbar{padding:0 14px;gap:6px}
  .main #loja-sw{max-width:120px}
  .main .loja-lbl{display:none}
}
/* celular (≤640): topo enxuto do caixa + faixa de telas rolando + barra de baixo; nada de áreas no topo */
@media (max-width:640px){
  .nav-areas{display:none}
  .main .topbar{min-height:53px;padding:6px 10px;gap:6px;flex-wrap:nowrap;align-items:center}
  .main .topbar>*{align-self:center}
  .main .topbar .brand{display:flex;font-size:15px;margin-right:auto;min-width:0}
  .main .topbar .brand>div{display:none}
  .main .topbar .brand .mark{width:96px;height:18px}
  .main .topbar #nav-btn{display:none}
  .main .topbar-context{order:0;flex:0 0 auto;padding:0}
  .main .topbar.tem-leitura{flex-wrap:wrap}
  .main .topbar.tem-leitura .topbar-context{order:10;flex:1 0 100%;min-width:0;padding:0 0 2px}
  .main .topbar.tem-leitura #tb-leitura{margin-left:0!important;white-space:normal!important;max-width:100%;box-sizing:border-box}
  .main .loja-sw-wrap.loja-unica{display:none}
  .main .topbar #loja-sw{max-width:96px}
  .main .command-trigger{width:36px;height:36px;min-height:36px;padding:0;font-size:0}
  .main .command-trigger kbd{display:none}
  .main .tema-btn,.main .btn-sair,#preferencias-btn{height:36px;min-height:36px!important;min-width:36px!important}
  .shell-faixa{display:grid;padding:0}
  .shell-faixa .area-nav{position:static;background:var(--topbar-bg);border-bottom:1px solid var(--border)}
  .shell-faixa .area-subtabs{padding:6px 10px}
  .shell-faixa .area-subtab{min-height:40px;padding:8px 14px}
  .shell-faixa .tabbar{max-width:none;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--bg)}
  .guias-rotulo{display:none}
  .guias .tab{min-height:36px;max-width:200px}
  .guias .tab .x{min-width:32px;min-height:32px}
  .guias-mais-btn{min-height:36px;min-width:44px;justify-content:center}
  .main .content{padding:14px 12px 92px}
  .main .btn-sair[data-sair]{padding:0 10px}
  .botnav{background:var(--topbar-bg);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:6px 4px calc(7px + env(safe-area-inset-bottom,0px))}
  .botnav .b{font:700 9.5px/1.1 var(--font-body);letter-spacing:.02em;color:var(--muted)}
  .botnav .b .ic svg{width:20px;height:20px}
  .botnav .b.active,.botnav .b[aria-current="page"]{color:var(--primary)}
}

/* ── componentes do caixa ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;font:600 13px/1 var(--font-body);border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;white-space:nowrap;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),filter var(--transition-fast)}
.btn:hover{border-color:var(--primary);color:var(--text);background:var(--card-hover);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled,.btn[disabled],.btn[aria-busy="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn-primary{background:var(--gradient-1);color:#fff;border-color:transparent;box-shadow:0 3px 12px var(--primary-glow)}
.btn-primary:hover{background:var(--gradient-1);color:#fff;border-color:transparent;filter:brightness(1.06);box-shadow:0 5px 18px var(--primary-glow)}
.btn-secondary{background:var(--surface);color:var(--text-secondary);border:1px solid var(--border)}
.btn-success{background:var(--primary-fill,var(--primary));color:#fff;border-color:transparent}
.btn-success:hover{background:var(--primary-fill-hover,var(--primary-hover));color:#fff;border-color:transparent}
.btn-danger{background:var(--red-glow);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:#fff;border-color:transparent}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text);border-color:transparent}
.btn-sm{padding:6px 10px;font-size:13px;border-radius:var(--radius-xs)}
.btn-xs{padding:3px 8px;font-size:11px;font-weight:500;border-radius:var(--radius-xs)}
.input,input[type=text],input[type=number],input[type=search],input[type=date],input[type=email],input[type=tel],select,textarea{
  font:inherit;font-size:13px;padding:7px 11px;border-radius:var(--radius-xs);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text)}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font:600 12px/1.5 var(--font-body);letter-spacing:.2px;background:var(--surface-hover);color:var(--text-secondary);border:1px solid var(--border)}
.badge-blue{background:var(--badge-blue-bg);color:var(--primary);border-color:var(--primary-border)}.badge.ok{background:var(--green-glow);color:var(--green);border-color:transparent}
.badge.warn,.badge-yellow{background:var(--yellow-glow);color:var(--yellow);border-color:transparent}
.badge.err,.badge-red{background:var(--red-glow);color:var(--red);border-color:transparent}
.badge-green{background:var(--green-glow);color:var(--green);border-color:transparent}
.badge-gray{background:transparent;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px}
.hero{padding:14px 18px;margin-bottom:14px;border-radius:var(--radius);box-shadow:none;background:var(--card)}
.hero h2{font-size:18px;font-weight:700;letter-spacing:-.3px;margin:0 0 4px}
.hero .eyebrow{font-size:10.5px;margin-bottom:4px}
.hero p{font-size:13px}
.section-title{font:700 15px/1.3 var(--font-display);letter-spacing:-.2px;color:var(--text);padding-left:12px;border-left:3px solid var(--primary);margin:0 0 12px;text-transform:none}
.tbl-wrap,.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.tbl{font-size:13px}
.tbl th{padding:9px 12px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.tbl tbody tr:nth-child(even){background:var(--table-stripe)}
.tbl tbody tr:hover{background:var(--table-hover)}
.kpi{border-radius:var(--radius);padding:16px 20px}
.kpi:hover{transform:translateY(-2px)}
.kpi-rot{font-size:11px;letter-spacing:.6px}
.kpi-val{font-family:var(--font-data);font-size:26px;letter-spacing:-.5px}
.subabas{gap:2px;margin-bottom:14px}
.subaba{min-height:40px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;position:relative}
.subaba.ativa{color:var(--text);font-weight:600;border-bottom-color:transparent}
.subaba.ativa::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--gradient-1)}
.toast{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.erp-fechar-dialog{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xl);padding:24px}
.erp-fechar-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.drawer-painel{background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-xl)}

/* barra de filtros do caixa (CP/CR): segmentado · busca · período em pílulas */
.fin-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px;min-width:0}
.fin-tabs{display:inline-flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.fin-tabs::-webkit-scrollbar{display:none}
.fin-tab{padding:5px 12px;min-height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 12px/1.2 var(--font-body);cursor:pointer;white-space:nowrap}
.fin-tab:not(.active):hover{color:var(--text);background:var(--surface-hover)}
.fin-tab.active{background:var(--primary-fill,var(--primary));color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.fin-tabs.receber .fin-tab.active{background:var(--primary-fill,var(--primary))}
.fin-toolbar .fin-search{width:220px;padding:5px 10px;min-height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;transition:width .2s}
.fin-toolbar .fin-search:focus{width:300px}
.perf-presets{display:flex;flex-wrap:wrap;gap:4px}
.perf-btn{padding:3px 10px;min-height:28px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font:600 11.5px/1.1 var(--font-body);cursor:pointer;white-space:nowrap}
.perf-btn:hover{color:var(--text);border-color:var(--primary)}
.perf-btn.on{background:var(--gradient-1);border-color:var(--primary);color:#fff}
.kpi-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.kpi-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 11px;min-height:30px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:600 12px/1.2 var(--font-body);cursor:pointer;white-space:nowrap}
.kpi-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--chip-c,var(--muted));flex:0 0 auto}
.kpi-chip .l{color:var(--text-secondary)}
.kpi-chip .n{font:800 13px/1 var(--font-data);color:var(--text)}
.kpi-chip .v{font:600 12px/1 var(--font-data);color:var(--text-secondary)}
.kpi-chip:hover{border-color:var(--primary)}
.kpi-chip.on{border-color:var(--primary);background:var(--primary-surface);box-shadow:inset 0 0 0 1px var(--primary)}
.kpi-chip.vencidos{--chip-c:var(--red)}.kpi-chip.vencidos .n{color:var(--red)}
.kpi-chip.hoje{--chip-c:var(--yellow)}
.kpi-chip.avencer{--chip-c:var(--primary)}
.kpi-chip.recebido{--chip-c:var(--green)}.kpi-chip.recebido .n{color:var(--green)}
.kpi-chip.pendentes{--chip-c:var(--muted)}
.kpi-chip.total{--chip-c:var(--text-secondary);cursor:default}
.table-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}
.selection-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;margin:0 0 8px;background:var(--primary-surface);border:1px solid var(--primary-border);border-radius:var(--radius);font-size:13px}
.fin-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.fin-table th{position:sticky;top:0;z-index:3;padding:7px 10px;background:var(--surface);color:var(--muted);font:600 11px/1.2 var(--font-body);letter-spacing:.6px;text-transform:uppercase;text-align:left;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--border)}
.fin-table th.num,.fin-table td.num{text-align:right}
.fin-table th button.ord{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.fin-table th button.ord:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.fin-table th button.ord::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.25}
.fin-table th[aria-sort="ascending"] button.ord::after{border-top:0;border-bottom:5px solid var(--primary);opacity:.9}
.fin-table th[aria-sort="descending"] button.ord::after{border-top-color:var(--primary);opacity:.9}
.fin-table td{padding:5px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-table tbody tr{cursor:pointer;border-left:3px solid transparent}
.fin-table tbody tr:nth-child(even){background:var(--table-stripe)}
.fin-table tbody tr:hover{background:var(--table-hover)}
.fin-table tbody tr:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.fin-table tr.fin-row-overdue{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 4%,transparent)}
.fin-table tr.fin-row-today{border-left-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 4%,transparent)}
.fin-table tr.fin-row-paid{border-left-color:var(--green)}
.fin-table tr.fin-row-cancel{opacity:.55}
.fin-table tr.row-selected{background:var(--primary-surface)!important}
.fin-table .fin-fornecedor{font-weight:600;color:var(--text)}
.fin-table .fin-doc{display:block;font:500 10.5px/1.3 var(--font-data);color:var(--muted)}
.fin-table .fin-descricao{font-size:12px;color:var(--text-secondary)}
.fin-table .fin-valor{font:700 13px/1.2 var(--font-data);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.3px}
.fin-table .fin-saldo{font:600 13px/1.2 var(--font-data);font-variant-numeric:tabular-nums;text-align:right}
.fin-table .fin-venc-date{font:600 12px/1.2 var(--font-data)}
.fin-table .fin-venc-dias{margin-left:6px;font:700 10px/1 var(--font-body)}
.fin-table .atraso{color:var(--red)}
.fin-table .chk-cel{width:38px;text-align:center}
.fin-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.fin-btn-baixar{padding:4px 12px;min-height:26px;border:0;border-radius:6px;background:var(--primary-fill,var(--primary));color:#fff;font:700 11px/1 var(--font-body);cursor:pointer}
.fin-btn-baixar:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fin-btn-more{padding:3px 8px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer}
.fin-btn-more:hover{background:var(--surface-hover);color:var(--text)}

/* layout de 2 colunas (pedido do agente de vendas): conteúdo + resumo fixo à direita; 1 coluna abaixo de 900 px */
.layout-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:14px;align-items:start}
.layout-2col>.layout-2col-lado{position:sticky;top:calc(var(--topbar-h,54px) + var(--area-nav-h,40px) + 12px)}
@media (max-width:900px){.layout-2col{grid-template-columns:minmax(0,1fr)}.layout-2col>.layout-2col-lado{position:static}}

/* ── Contas a receber / pagar (financeiro, padrão CR v2 do caixa) ── */
.fx{display:flex;flex-direction:column;gap:8px;min-width:0}
.fx-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx-topo .acoes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.fx-mais{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.fx-mais[hidden]{display:none}
.fx-campo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.fx-campo select,.fx-campo input{min-height:30px;padding:4px 8px;font-size:12px;width:auto}
.fx-campo input:is([type=date],.erp-data){width:140px}
.fx-campo .fx-centro{width:200px}
.fx-pill{display:inline-flex;align-items:center;gap:4px;max-width:340px;padding:3px 4px 3px 10px;border-radius:999px;border:1px solid var(--primary);background:var(--primary-surface);font-size:12px;font-weight:600}
.fx-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-pill button{border:0;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:15px;line-height:1;padding:0 5px}
.fx-lista{max-height:calc(100vh - var(--topbar-h,54px) - var(--area-nav-h,40px) - 210px);min-height:300px;overflow:auto}
.fx-pagina{display:inline-flex;align-items:center;gap:6px}
.fx-pagina select{width:auto;min-height:28px;padding:2px 6px;font-size:12px}
.fx-pagina .btn{min-height:28px}
.fx-total-sel{font:700 13px/1 var(--font-data)}
.fx-vazio{padding:28px 16px;text-align:center;color:var(--muted)}
.fx-esqueleto td{height:34px}
/* painel do título (lateral à direita no desktop, folha de baixo no celular) */
.fx-painel{z-index:150}
.fx-painel .drawer-painel{width:min(1240px,94vw);max-width:none}
.fx-painel .drawer-cabecalho{flex-wrap:wrap;gap:8px 10px;padding:12px 16px}
.fx-cab-tit{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 300px}
.fx-cab-tit strong{font:700 16px/1.25 var(--font-display);letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-cab-tit small{color:var(--muted);font-size:12px}
.fx-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fx-resumo>div{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.fx-resumo .k{font:600 10.5px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.fx-resumo .v{margin-top:6px;font:700 16px/1.2 var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-acoes{display:flex;flex-wrap:wrap;gap:6px}
.fx-abas{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.fx-aba{position:relative;padding:8px 14px;border:0;background:transparent;color:var(--muted);font:500 13px/1.2 var(--font-body);cursor:pointer}
.fx-aba[aria-selected="true"]{color:var(--text);font-weight:600}
.fx-aba[aria-selected="true"]::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--gradient-1)}
.fx-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.fx-dados .field-row{padding:7px 0}
.fx-dados .field-row .v{text-align:right;overflow-wrap:anywhere}
.fx-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.fx-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-secondary);min-width:0}
.fx-form label.largo,.fx-form .largo{grid-column:1/-1}
.fx input:not([type]),.fx-painel input:not([type]){font:inherit;font-size:13px;padding:7px 11px;border-radius:var(--radius-xs);border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);width:100%}
.fx input:not([type]):focus,.fx-painel input:not([type]):focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.fx-painel .drawer-cabecalho .drawer-fechar{order:2}
.fx-painel .drawer-cabecalho .fx-acoes{order:3}
.fx-form .travado{font-weight:400;color:var(--muted);font-size:11.5px}
.fx-form .fx-sugestoes{position:relative}
.fx-sug-lista{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:240px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg)}
.fx-sug-lista button{display:block;width:100%;padding:7px 10px;border:0;background:transparent;color:var(--text);text-align:left;font-size:12.5px;cursor:pointer}
.fx-sug-lista button:hover,.fx-sug-lista button:focus-visible{background:var(--primary-glow)}
.fx-rodape-form{display:flex;justify-content:flex-end;gap:8px;grid-column:1/-1}
.fx-aviso{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface-hover);font-size:12.5px;color:var(--text-secondary)}
.fx-aviso.erro{border-color:var(--red);background:var(--red-glow);color:var(--red)}
.fx-aviso.ok{border-color:var(--green);background:var(--green-glow);color:var(--green)}
.fx-hist{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;border-left:2px solid var(--primary-border)}
.fx-hist li{position:relative;padding:8px 0 8px 14px}
.fx-hist li::before{content:'';position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--muted);border:2px solid var(--surface)}
.fx-hist li.BAIXA::before{background:var(--green)}.fx-hist li.ESTORNO::before{background:var(--yellow)}
.fx-hist li.EDICAO::before,.fx-hist li.DESDOBRAMENTO::before{background:var(--primary)}.fx-hist li.OPERACAO::before{background:var(--red)}
.fx-hist .q{font:500 11px/1.3 var(--font-data);color:var(--muted)}
.fx-hist .t{font-weight:600;font-size:13px}
.fx-hist .d{font-size:12px;color:var(--text-secondary)}
.fx-mud{margin:4px 0 0;font-size:12px;border-collapse:collapse}
.fx-mud td{padding:2px 10px 2px 0;vertical-align:top}
.fx-mud .antes{color:var(--red);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 60%,transparent)}
.fx-mud .depois{color:var(--green)}
.fx-calc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fx-calc .tot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;background:var(--surface-hover);font-weight:600}
.fx-calc .tot b{font:700 18px/1 var(--font-data)}
.fx-parcelas{display:flex;flex-direction:column;gap:6px}
.fx-parcelas .lin{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
@media (max-width:980px){.fx-resumo{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-calc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .fx-dados,.fx-form{grid-template-columns:minmax(0,1fr)}
  .kpi-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kpi-chips::-webkit-scrollbar{display:none}
  .kpi-chip{min-height:34px}
  .fin-toolbar .fin-tabs{width:100%}
  .fin-toolbar .fin-search,.fin-toolbar .fin-search:focus{width:100%;min-height:40px}
  .perf-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .perf-btn{min-height:34px;flex:0 0 auto}
  .fx-mais{flex-direction:column;align-items:stretch}
  .fx-campo{justify-content:space-between}
  .fx-lista{max-height:none;overflow:visible}
  .fin-table,.fin-table tbody{display:block}
  .fin-table thead{display:none}
  .fin-table tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chk quem valor" "chk desc venc" "chk sit acoes";gap:2px 10px;padding:8px 11px;margin-bottom:6px;
    border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-sm);background:var(--card)}
  .fin-table td{display:block;padding:0;border:0;white-space:normal}
  .fin-table td.chk-cel{grid-area:chk;width:auto;align-self:center}
  .fin-table td.c-quem{grid-area:quem}.fin-table td.c-valor{grid-area:valor;text-align:right}
  .fin-table td.c-desc{grid-area:desc}.fin-table td.c-venc{grid-area:venc;text-align:right}
  .fin-table td.c-sit{grid-area:sit}.fin-table td.c-acoes{grid-area:acoes;text-align:right}
  .fin-table td.c-esp,.fin-table td.c-saldo,.fin-table td.c-atraso{display:none}
  .fin-table input[type=checkbox]{width:22px;height:22px}
  .fx-painel .drawer-painel{width:100%;max-height:92vh;height:92vh}
  .fx-resumo .v{font-size:15px}
}
@media print{
  .main .topbar,.shell-faixa,.botnav,.assistente-botao,.fx-topo,.fin-toolbar,.fx-mais,.table-footer,.selection-bar{display:none!important}
}
@media(max-width:640px){#views{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}}
.eco-novo-titulo{width:min(660px,94vw);max-height:90dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:20px}
.eco-novo-titulo::backdrop{background:rgba(0,0,0,.55)}
.eco-novo-titulo .acoes input{min-width:0;flex:1}
.eco-novo-titulo input[type=checkbox]{width:20px;min-height:20px;height:20px;vertical-align:middle}
/* [ECOPLAST UX] bloco caixa: fim */

/* Planilha opcional: só aparece com a capacidade tabelas_planilha. */
.grid-planilha,.lista-planilha{min-width:0;max-width:100%}
.grid-planilha .grid-top{flex-wrap:wrap}
.grid-planilha .grid-filtro{min-height:44px;box-sizing:border-box;max-width:100%}
/* Seletor de colunas: botão compacto à direita da barra + popover ancorado
   (não empurra a página). Celular: bottom sheet. */
.grade-opcoes{flex:0 0 auto;min-width:0;max-width:100%;margin-left:auto}
.grade-colunas{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:600 13px/1 var(--font-body);cursor:pointer;white-space:nowrap}
.grade-colunas:hover{background:var(--surface-hover)}
.grade-colunas[aria-expanded="true"]{border-color:var(--primary);color:var(--primary)}
.grade-colunas svg{flex:0 0 16px;color:var(--text-secondary)}
.grade-colunas[aria-expanded="true"] svg{color:inherit}
.grade-selo{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;background:var(--surface-hover);color:var(--text-secondary);font:600 11px/1 var(--font-data);letter-spacing:0}
.grade-selo.parcial{background:var(--primary-surface);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary-border)}
.grade-colunas:focus-visible,.grade-ordenar:focus-visible,.grade-painel-fechar:focus-visible,.grade-acoes .btn:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.grade-painel{position:fixed;inset:auto;margin:0;z-index:10040;box-sizing:border-box;width:320px;transition:none;max-width:calc(100vw - 16px);max-height:60vh;display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--card);color:var(--text);box-shadow:0 10px 32px rgba(0,0,0,.28);font:14px/1.4 var(--font-body)}
.grade-painel[hidden]{display:none}
.grade-painel::backdrop{background:transparent;pointer-events:none}
.grade-painel-topo{display:flex;align-items:center;gap:8px;padding:2px 2px 0 14px}
.grade-painel-titulo{flex:1;min-width:0;font-size:13px;font-weight:700}
.grade-painel-fechar{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:22px;line-height:1;cursor:pointer}
.grade-painel-fechar:hover{background:var(--surface-hover);color:var(--text)}
.grade-painel-dica{margin:0;padding:0 14px 8px;font-size:12px;line-height:1.4;color:var(--muted)}
.grade-campos{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:4px 6px;border-top:1px solid var(--border)}
.grade-visibilidade{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border-radius:var(--radius-sm);font-size:13px;color:var(--text);cursor:pointer}
.grade-visibilidade:hover{background:var(--surface-hover)}
.grade-visibilidade span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grade-visibilidade input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--primary)}
.grade-visibilidade:has(input:disabled){color:var(--text-secondary);cursor:default}
.grade-visibilidade:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:-3px}
.grade-aviso{margin:0;padding:8px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--yellow)}
.grade-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
/* rodapé do seletor de colunas: cada botão do tamanho do texto (nada de "arguras padrã"); se faltar espaço, quebra a linha */
.grade-acoes .btn{flex:1 1 auto;min-width:0;min-height:44px;padding:0 10px;font-size:13px;white-space:nowrap;overflow:visible}
.grade-acoes .btn:disabled{opacity:.5;cursor:default}
.grade-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* sequência das colunas: alça para arrastar, ↑/↓ (Alt+↑/↓ no teclado) e arrastar o cabeçalho com o mouse */
.grade-coluna{display:flex;align-items:center;gap:2px;border-radius:var(--radius-sm)}
.grade-coluna .grade-visibilidade{flex:1 1 auto;min-width:0;padding-left:2px}
.grade-pega{flex:0 0 22px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.grade-pega:hover{color:var(--text)}
.grade-mover{flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}
.grade-mover:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}
.grade-mover:disabled{opacity:.3;cursor:default}
.grade-mover:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.grade-coluna.grade-arrastando{opacity:.5}
.grade-coluna.grade-alvo-antes{box-shadow:inset 0 2px 0 var(--primary)}
.grade-campos.grade-alvo-fim{box-shadow:inset 0 -2px 0 var(--primary)}
.grade-marca-coluna{position:fixed;z-index:10030;width:2px;background:var(--primary);pointer-events:none}
table.grade-movendo-coluna,table.grade-movendo-coluna *{cursor:grabbing!important;user-select:none!important}
th.grade-th-origem{opacity:.5}
@media (pointer:fine){.grade-coluna .grade-visibilidade{min-height:40px}.grade-mover{flex-basis:28px;width:28px;height:28px}}
/* coluna justa (data, valor, situação, código): do tamanho do conteúdo, sem quebrar; o resto da largura vai para o texto */
@media (min-width:641px){
  .tbl th.gl-justa,.tbl td.gl-justa{width:1px;white-space:nowrap}
  .tbl th.gl-justa{min-width:0!important}
  .tbl th.gl-justa .grade-ordenar,.tbl th.gl-justa .lista-ordenar{white-space:nowrap}
}
.grade-ordenar{display:flex;align-items:center;gap:5px;min-height:44px;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.grid-planilha th,.lista-planilha th{position:relative}
.grid-planilha .grade-ordenar,.lista-planilha .lista-ordenar{padding-right:0;box-sizing:border-box;min-height:44px;min-width:44px;white-space:normal;overflow-wrap:normal}
.grade-cabecalho{display:grid;grid-template-columns:minmax(min-content,1fr) 44px;gap:2px;align-items:center;min-width:0;min-height:44px;box-sizing:border-box}
.grade-cabecalho-rotulo{display:flex;align-items:center;min-width:0}
.grade-decorada .grade-cabecalho .grade-cabecalho-rotulo>button{display:flex;align-items:center;min-height:44px;min-width:44px;max-width:100%;width:100%;white-space:normal;overflow-wrap:normal;box-sizing:border-box}
.grade-filtrar{position:static;transform:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}
.grade-decorada .fin-table:has(thead th:first-child input[type=checkbox]) col:first-child{width:84px!important}
.grade-decorada .fin-table th:has(.grade-cabecalho input[type=checkbox]){min-width:84px}
.grade-decorada .fin-table{table-layout:auto}
.grid-planilha th:has(.grade-ordenar),.lista-planilha th:has(.lista-ordenar),.grade-decorada th:has(.grade-cabecalho-rotulo>button){min-width:104px}
.grade-filtrar:hover{background:var(--hover)}
.grade-filtrar.ativo{color:var(--primary);background:var(--primary-soft,rgba(0,110,60,.1));border-color:var(--primary)}
.grade-filtrar:focus-visible,.grade-filtro-fechar:focus-visible{outline:3px solid var(--primary);outline-offset:-2px}
.grade-filtro-popup{position:fixed;inset:auto;margin:0;z-index:10050;box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);box-shadow:0 6px 24px rgba(0,0,0,.22);font:14px var(--font-ui,system-ui)}
.grade-filtro-popup label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.grade-filtro-popup .input{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
.grade-filtro-titulo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.grade-filtro-titulo strong{flex:1;min-width:0;overflow-wrap:anywhere}
.grade-filtro-fechar{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;font-size:24px;cursor:pointer}
.grade-filtro-opcoes{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;margin-top:8px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface,rgba(0,0,0,.02))}
.grade-filtro-opcao{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:inherit;font:13px var(--font-ui,system-ui);text-align:left;cursor:pointer}
.grade-filtro-opcao:hover,.grade-filtro-opcao:focus-visible{background:var(--hover,rgba(127,127,127,.12));outline:none}
.grade-filtro-opcao.ativo{background:var(--primary-soft,rgba(0,110,60,.14));color:var(--primary);font-weight:600}
.grade-filtro-opcao-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grade-filtro-opcao-n{flex:0 0 auto;font-size:11px;opacity:.75;padding:1px 6px;border-radius:999px;background:var(--hover,rgba(127,127,127,.12))}
.grade-filtro-limpar{width:100%;min-height:44px;margin-top:10px;white-space:normal}
.grade-filtro-popup .hint{margin:8px 0 0}
.grid-planilha th.sortable{padding:0 12px}
.grid-planilha .tbl [hidden],.lista-planilha .tbl [hidden],.grade-decorada table [hidden]{display:none!important}
@media(max-width:640px){
  .grid-planilha .tbl thead,.lista-planilha .tbl thead{display:block;margin-bottom:8px}
  .grid-planilha .tbl thead tr,.lista-planilha .tbl thead tr{display:flex;flex-wrap:wrap;gap:4px}
  .grid-planilha .tbl thead th,.lista-planilha .tbl thead th{display:block;position:relative;flex:0 1 auto;max-width:100%;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 6px;white-space:normal}
  .grid-planilha .tbl thead .grade-ordenar,.lista-planilha .tbl thead .lista-ordenar{font-size:11px;white-space:normal}
  .grade-colunas{padding:0 10px}
  .grade-painel.grade-painel-folha{left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;max-height:min(75dvh,560px);border-width:1px 0 0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 32px rgba(0,0,0,.35)}
  .grade-painel.grade-painel-folha::before{content:"";display:block;flex:0 0 auto;width:40px;height:4px;margin:8px auto 2px;border-radius:2px;background:var(--border-strong)}
  .grade-painel.grade-painel-folha::backdrop{background:rgba(0,0,0,.45);pointer-events:auto}
  .grade-painel-folha .grade-painel-titulo{font-size:15px}
  .grade-painel-folha .grade-visibilidade{font-size:14px}
  .grid-planilha .grid-top{gap:8px}.grid-planilha .grid-filtro{width:100%;max-width:none}
}

/* (Mesa de design, etapa 1) Sem as regras que, no celular, reabriam o cabeçalho do fin-table decorado em chips e
   devolviam Espécie/Saldo/Atraso/extras como faixas de "rótulo: valor" — era o que esticava o cartão a 472 px. O
   fin-table segue com o cartão de três áreas do bloco do caixa (≤ 640 px); com papéis, o modo celular da grade. */
/* Subabas opt-in: uma janela, com faixa rolável inclusive no celular. */
.module-subtabs { display:flex; gap:4px; max-width:100%; overflow-x:auto; padding:6px 0 10px; margin-bottom:10px; border-bottom:1px solid var(--border, #ddd); }
.module-subtabs[hidden] { display:none; }

/* Ecoplast: faixa de módulos e barra horizontal de janelas abertas de fácil acesso */
.telas-limpas .shell-faixa{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:2px 12px}
.telas-limpas .shell-faixa:has(#tabbar:not(.g2-guias-visiveis)){grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.telas-limpas .shell-faixa #tabbar.g2-janelas{width:100%;max-width:100%;border-top:1px solid var(--border-subtle,var(--border));padding:2px 0 1px;justify-content:flex-start;gap:6px}
.telas-limpas .shell-faixa #tabbar.g2-janelas:not(.g2-guias-visiveis){width:auto;max-width:45vw;border:0;padding:0;justify-content:flex-end}
.g2-janelas .guias-rotulo,.g2-janelas .guias{display:none}
.g2-janelas.g2-guias-visiveis .guias-rotulo{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--muted);padding-right:2px}
.g2-janelas.g2-guias-visiveis .guias{display:flex;flex:1 1 auto;max-width:100%;min-width:0;overflow-x:auto;gap:4px}
.g2-navigation{flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;max-width:100%;overflow-x:auto}
.g2-navigation>button{flex:0 0 auto;white-space:nowrap;min-height:32px}
.telas-limpas [data-g2-nav-original][hidden],.telas-limpas [hidden]{display:none!important}
.telas-limpas [data-g2-tecnico] pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:640px){.telas-limpas .shell-faixa{grid-template-columns:minmax(0,1fr);row-gap:0;padding:0 6px}.telas-limpas .shell-faixa #tabbar.g2-janelas{width:100%;max-width:100%;border-top:1px solid var(--border-subtle,var(--border));padding:2px 0;justify-content:flex-start;gap:5px;overflow:visible}.telas-limpas .shell-faixa #tabbar.g2-janelas:not(.g2-guias-visiveis){width:auto;max-width:none;border:0;padding:0;justify-content:flex-end}.telas-limpas .shell-faixa .area-subtabs{padding:3px 0}.telas-limpas .guias-mais-btn{min-height:30px;padding:2px 8px;font-size:11.5px}.g2-janelas.g2-guias-visiveis .guias-rotulo{display:none}.g2-janelas.g2-guias-visiveis .guias{display:flex!important;flex:1 1 auto;max-width:100%!important;min-width:0;overflow-x:auto;gap:4px}.g2-navigation>button{min-height:36px}}
.module-subtab { flex:0 0 auto; min-height:40px; padding:8px 12px; border:1px solid var(--border, #ddd); border-radius:6px; background:var(--bg, #fff); color:inherit; cursor:pointer; font:inherit; }
.module-subtab[aria-selected="true"] { background:var(--primary-fill, var(--primary)); color:#fff; }
.module-subtab:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.module-subtab-panel { min-width:0; }
.module-help { border:1px solid var(--border); border-radius:50%; background:transparent; color:inherit; min-width:28px; min-height:28px; cursor:help; }
/* Contagem e "Colunas" da grade na própria linha de filtros do módulo (aprimorarTabela com opts.barra). */
.grid-top.grade-na-barra{margin:0 0 0 auto;gap:8px;flex:0 0 auto}

/* ===== Grade: modo celular (≤ 640 px) — cartão por papel de coluna, sem cabeçalho =====
   A tela declara o papel (data-papel) e o componente (erp.js) marca as células; aqui só a apresentação.
   linha 1: titulo (até 2 linhas) · valor · acoes | linha 2: data · sub · situacao | linha 3: campos do cartão. */
.gm-barra,.gm-carregar,.gm-selbar,.conta-btn{display:none}
@media (max-width:640px){
  :root body .gm-celular table thead,:root body .gm-celular table colgroup{display:none!important}
  .gm-celular .grid-top>.grid-cont,.gm-celular .grid-top>.grade-opcoes,.gm-celular .lista-topo>.lista-contagem,.gm-celular .lista-topo>.grade-opcoes,.gm-celular .grid-top.grade-na-barra,.gm-celular>.selection-bar{display:none!important}
  :root body .gm-celular table,:root body .gm-celular table>tbody{display:block!important;width:100%!important;min-width:0!important;border:0;table-layout:auto}
  .gm-celular .tbl-wrap,.gm-celular .table-wrap,.gm-celular .fx-lista{overflow:visible!important;max-height:none!important;min-height:0!important;border:0!important}
  :root body .gm-celular table>tbody>tr{display:flex!important;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;margin:0 0 6px;padding:6px 2px 6px 12px;
    border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;min-height:0;height:auto}
  :root body .gm-celular table>tbody>tr::before{content:"";order:20;flex:0 0 100%;height:0}
  :root body .gm-celular table>tbody>tr::after{content:"";order:40;flex:0 0 100%;height:0}
  :root body .gm-celular table>tbody>tr.gm-alem{display:none!important}
  :root body .gm-celular table>tbody>tr.row-selected,:root body .gm-celular table>tbody>tr.selecionada{background:var(--primary-surface)!important;border-color:var(--primary)}
  :root body .gm-celular table>tbody>tr>td{display:block!important;padding:0!important;border:0!important;min-width:0;max-width:100%;width:auto!important;height:auto!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 13px/1.35 var(--font-body);color:var(--text-secondary);background:none!important;position:static!important;text-align:left!important;grid-column:auto!important}
  :root body .gm-celular table>tbody>tr>td::before{content:none!important}
  :root body .gm-celular table>tbody>tr>td:not([data-papel]):not([data-gm-meta]),:root body .gm-celular table>tbody>tr>td[data-papel="meta"]:not([data-gm-meta]),
  :root body .gm-celular table>tbody>tr>td[hidden]{display:none!important}
  :root body .gm-celular table>tbody>tr>td.vazio,:root body .gm-celular table>tbody>tr>td.fx-vazio{display:block!important;flex:1 1 100%;white-space:normal;padding:12px!important}
  /* seleção sempre à vista onde a grade tem seleção: caixa de 44 px desenhada com tokens (a nativa fica pequena) */
  :root body .gm-celular table>tbody>tr>td[data-papel="selecao"]{display:flex!important;order:5;flex:0 0 44px;height:44px!important;align-items:center;justify-content:center;margin:-6px 0 -6px -8px!important;overflow:visible}
  :root body .gm-celular table>tbody>tr>td[data-papel="selecao"]:empty{visibility:hidden}
  :root body .gm-celular td[data-papel="selecao"] input[type=checkbox]{-webkit-appearance:none;appearance:none;width:44px!important;height:44px!important;margin:0;border:0;border-radius:var(--radius-sm);cursor:pointer;background:linear-gradient(var(--card),var(--card)) center/20px 20px no-repeat,linear-gradient(var(--border-strong),var(--border-strong)) center/24px 24px no-repeat}
  :root body .gm-celular td[data-papel="selecao"] input[type=checkbox]:checked{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3 8.5l3.2 3L13 4.5%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/16px 16px no-repeat,linear-gradient(var(--acao),var(--acao)) center/24px 24px no-repeat}
  :root body .gm-celular td[data-papel="selecao"] input[type=checkbox]:focus-visible{outline:3px solid var(--primary);outline-offset:-6px}
  :root body .gm-celular .fin-table td .fx-selo-ext{display:none!important}
  :root body .gm-celular table>tbody>tr>td[data-papel="titulo"]{order:10;flex:1 1 0;white-space:normal;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;font:600 15px/1.25 var(--font-body);color:var(--text)}
  :root body .gm-celular table>tbody>tr>td[data-papel="valor"]{order:11;flex:0 0 auto;overflow:visible;font:700 15px/1.3 var(--font-body);font-variant-numeric:tabular-nums;color:var(--text);text-align:right!important}
  :root body .gm-celular table>tbody>tr>td[data-papel="acoes"]{order:12;flex:0 0 auto;overflow:visible;align-self:flex-start;margin:-6px 0 -8px -4px;display:flex!important;justify-content:flex-end}
  :root body .gm-celular table>tbody>tr>td[data-papel="acoes"] :is(button,.btn){min-width:44px!important;min-height:44px!important;height:44px;padding:0 6px;border:0;background:transparent;font-size:20px;font-weight:700}
  :root body .gm-celular table>tbody>tr>td[data-papel="data"]{order:21;flex:0 0 auto;overflow:visible;font-variant-numeric:tabular-nums;color:var(--text)}
  :root body .gm-celular table>tbody>tr>td[data-papel="sub"]{order:22;flex:0 1 auto}
  :root body .gm-celular table>tbody>tr>td[data-papel="situacao"]{order:29;flex:0 0 auto;margin-left:auto;overflow:visible;padding-right:8px!important}
  :root body .gm-celular table>tbody>tr>td[data-papel="situacao"] .badge{font-size:13px;line-height:1.3;padding:1px 8px;min-height:0}
  :root body .gm-celular table>tbody>tr>td[data-gm-meta]{flex:1 1 0;display:block!important;color:var(--muted);font-size:13px}
  :root body .gm-celular table>tbody>tr>td[data-gm-meta]:not([data-gm-meta="0"])::before{content:"· "!important}
  :root body .gm-celular table>tbody>tr>td br{display:none}
  /* barra do topo da lista */
  .gm-barra{display:block;margin:0 0 8px}
  .gm-linha{display:flex;gap:6px;align-items:center}
  .gm-busca{flex:1 1 auto;min-width:0;display:flex}.gm-busca:empty{display:none}
  .gm-busca>input,.gm-busca>input:focus{width:100%!important;min-height:44px!important;font-size:16px!important;box-sizing:border-box;margin:0}
  .gm-btn{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:600 14px/1 var(--font-body);white-space:nowrap;cursor:pointer}
  .gm-n{color:var(--primary)}
  .gm-chips{display:flex;gap:6px;overflow-x:auto;padding:6px 0 0;scrollbar-width:none}.gm-chips::-webkit-scrollbar{display:none}.gm-chips[hidden]{display:none}
  .gm-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:78vw;padding:0 12px;border:1px solid var(--primary);border-radius:999px;background:var(--primary-surface);color:var(--primary);font:600 13px/1.2 var(--font-body);cursor:pointer}
  .gm-chip>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gm-chip-mais{border-color:var(--border-strong);background:var(--card);color:var(--text)}
  .gm-resumo{display:flex;align-items:center;gap:6px;margin-top:4px}
  /* resumo em até 2 linhas; cada parte inteira (o que pede ação vem antes e na cor da situação), a ordem atual no fim */
  .gm-resumo-btn{flex:1 1 auto;min-width:0;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;border:0;background:none;color:var(--text-secondary);font:600 13px/1.3 var(--font-body);text-align:left;padding:2px;cursor:pointer}
  .gm-resumo-txt{display:inline}.gm-resumo-parte{white-space:nowrap}.gm-resumo-parte[data-situacao]{color:var(--gm-cor);font-weight:700}
  .gm-ordem{margin-left:4px;color:var(--muted);font-weight:500;white-space:nowrap}
  .gm-seta{display:inline-block;margin-left:4px;transition:transform .15s}
  .gm-resumo-aberto .gm-seta{transform:rotate(180deg)}
  /* "Novo" da tela vira "+" de 44 px no celular (o nome continua para leitor de tela) */
  .gm-novo:empty{display:none}.gm-novo .btn{min-height:44px;min-width:44px;padding:0;font-size:0!important}.gm-novo .btn::before{content:"+";font:600 24px/1 var(--font-body)}
  .gm-carregar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:6px 0 14px}.gm-carregar[hidden]{display:none}
  .gm-carregar .btn{min-height:44px}.gm-carregar-txt{font-size:13px;color:var(--muted)}
  .gm-selbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:8px;align-items:center;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border-strong);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .gm-selbar[hidden]{display:none}
  .gm-sel-txt{flex:1 1 auto;min-width:0;font:600 14px/1.25 var(--font-body);color:var(--text)}
  .gm-selbar .btn{min-height:44px;min-width:44px;padding:0 12px}.gm-sel-sair{font-size:20px}
  body.gm-selecao-aberta .botnav,body.gm-selecao-aberta .assistente-botao{display:none!important}
}
/* folha inferior (Filtros, Visão, menu da conta) */
body.erp-folha-aberta{overflow:hidden}
.erp-folha{position:fixed;inset:0;z-index:9500;display:flex;align-items:flex-end;justify-content:center}
.erp-folha-fundo{position:absolute;inset:0;border:0;padding:0;margin:0;background:rgba(0,0,0,.45);cursor:default}
.erp-folha-caixa{position:relative;box-sizing:border-box;width:min(560px,100%);max-height:min(85dvh,760px);display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--border-strong);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom,0px);font:14px/1.4 var(--font-body)}
.erp-folha-caixa::before{content:"";flex:0 0 auto;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--border-strong)}
.erp-folha-topo{display:flex;align-items:center;gap:8px;padding:0 4px 0 16px}
.erp-folha-topo strong{flex:1;min-width:0;font:700 16px/1.2 var(--font-body)}
.erp-folha-fechar{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-secondary);font-size:24px;line-height:1;cursor:pointer}
.erp-folha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 16px 14px;border-top:1px solid var(--border)}
.erp-folha-rodape{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border)}
.erp-folha-rodape .btn{flex:1 1 0;min-height:48px;font-size:15px}
.gm-grupo{border:0;margin:12px 0 0;padding:0;min-width:0}
.gm-grupo>legend{padding:0;margin:0 0 6px;font:700 13px/1.3 var(--font-body);color:var(--text-secondary)}
.gm-alcance{font-weight:500;color:var(--muted)}
.gm-opcoes{display:flex;flex-wrap:wrap;gap:6px}
.gm-opcao{min-height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);font:600 14px/1.2 var(--font-body);cursor:pointer}
.gm-opcao[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-surface);color:var(--primary)}
.gm-opcao:disabled{opacity:.45;cursor:default}
.gm-campo{display:flex;flex-direction:column;gap:4px;margin-top:8px;font:600 13px/1.3 var(--font-body);color:var(--text-secondary)}
.gm-campo .input,.gm-faixa .input,.gm-campo select{width:100%;min-width:0;min-height:44px;box-sizing:border-box;font-size:16px}
.gm-de-ate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gm-faixa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;margin-top:8px;font:600 14px/1.3 var(--font-body);color:var(--text)}
.gm-campos{display:flex;flex-direction:column}
.gm-campo-linha{display:flex;align-items:center;gap:4px;min-height:48px;border-bottom:1px solid var(--border)}
.gm-campo-nome{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1.3 var(--font-body);color:var(--text);cursor:pointer}
.gm-campo-nome input{flex:0 0 22px;width:22px;height:22px;margin:0;accent-color:var(--primary)}
.gm-campo-nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-mover{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.gm-mover:disabled{opacity:.3;cursor:default}
.gm-vazio{margin:14px 0;color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* menu da conta (casca do celular) */
.conta-item{display:flex;align-items:center;width:100%;min-height:48px;padding:0 4px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:500 15px/1.3 var(--font-body);text-align:left;cursor:pointer}
.conta-perigo{color:var(--red)}
.conta-quem{margin:10px 0 2px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.conta-loja{margin:6px 0 4px}
/* Casca do celular: topo enxuto (marca, título, busca, menu); faixa de telas + barra horizontal de janelas abertas visível e sem cortar menu */
@media (max-width:640px){
  :root body .main .topbar{min-height:48px;padding:4px 8px;gap:6px}
  :root body .main .topbar .loja-sw-wrap,:root body .main .topbar #tema-btn,:root body .main .topbar .atualizar-sistema-btn,:root body .main .topbar>.pill,:root body .main .topbar>.user-box{display:none!important}
  /* faixa de áreas e barra de Janelas abertas: sem overflow:hidden para nunca cortar o menu de Janelas (.guias-menu) */
  :root body .shell-faixa{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:center;height:auto!important;min-height:36px;padding:0 6px;overflow:visible!important;border-bottom:1px solid var(--border)}
  :root body .shell-faixa:has(#tabbar:not(.g2-guias-visiveis)){grid-template-columns:minmax(0,1fr) auto;column-gap:6px}
  :root body .shell-faixa .area-nav{border:0;background:transparent;min-width:0}
  :root body .shell-faixa .area-subtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 10px 2px 4px;gap:4px;min-height:36px;height:auto;align-items:center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 14px),transparent)}
  :root body .shell-faixa .area-subtabs::-webkit-scrollbar{display:none}
  :root body .shell-faixa .area-subtab{min-height:30px;padding:0 10px;font-size:12px;white-space:nowrap}
  :root body .shell-faixa .tabbar{padding:2px 0;border:0;border-top:1px solid var(--border-subtle,var(--border));background:transparent;overflow:visible!important}
  :root body .shell-faixa .tabbar:empty{display:none!important;border:0}
  :root body .shell-faixa .guias .tab{min-height:28px;max-width:165px;padding:1px 4px 1px 9px;font-size:11.5px}
  :root body .shell-faixa .guias .tab .x{width:22px;height:22px;min-width:22px;min-height:22px}
  :root body .shell-faixa .guias-mais-btn{min-height:28px;padding:2px 8px;font-size:11.5px}
  :root body .shell-faixa .guias-menu{z-index:9999;right:0;top:calc(100% + 4px);max-height:65dvh}
  :root body .main .topbar .brand{flex:0 0 auto;margin-right:0}
  :root body .main .topbar .brand .mark{width:76px;height:16px}
  :root body .main .topbar-context{order:1;flex:1 1 auto;min-width:0;padding:0}
  :root body .main .topbar-context>#tb-title{position:static!important;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font:700 14.5px/1.2 var(--font-body);color:var(--text)}
  :root body .main .topbar .command-trigger{order:2;flex:0 0 40px;width:40px;height:40px;min-height:40px}
  .conta-btn{display:inline-grid;place-items:center;order:3;position:relative;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-secondary);cursor:pointer}
  /* sub-abas da tela: faixa rolável de 38 px */
  :root body .subabas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
  :root body .subabas::-webkit-scrollbar{display:none}
  :root body .subaba{min-height:38px;padding:0 12px}
}
/* PC: Saldo, Situação e Ações fixos à direita; o meio da grade rola dentro dela */
@media (min-width:641px){
  .gl-com-fixas-dir th[data-fixa-dir],.gl-com-fixas-dir td[data-fixa-dir]{position:sticky;z-index:2}
  .gl-com-fixas-dir thead th[data-fixa-dir]{z-index:5}
  .gl-com-fixas-dir tbody td[data-fixa-dir]{background:linear-gradient(var(--grade-linha-bg,transparent),var(--grade-linha-bg,transparent)),var(--surface)}
  .gl-com-fixas-dir [data-fixa-dir="0"]{right:var(--gl-dir-0,0px)}.gl-com-fixas-dir [data-fixa-dir="1"]{right:var(--gl-dir-1,0px)}
  .gl-com-fixas-dir [data-fixa-dir="2"]{right:var(--gl-dir-2,0px)}.gl-com-fixas-dir [data-fixa-dir="3"]{right:var(--gl-dir-3,0px)}
  .gl-com-fixas-dir [data-fixa-borda]{box-shadow:-8px 0 8px -8px rgba(0,0,0,.28)}
  .gl-com-fixas-dir tbody tr:nth-child(even){--grade-linha-bg:var(--table-stripe)}
  .gl-com-fixas-dir tbody tr:hover{--grade-linha-bg:var(--table-hover)}
  .gl-com-fixas-dir tbody tr.row-selected,.gl-com-fixas-dir tbody tr.selecionada{--grade-linha-bg:var(--primary-surface)}
}
/* Contas a pagar/receber no celular: os controles do PC dão lugar à barra da grade; totais por toque no resumo */
@media (max-width:640px){
  .fx.fx-celular>.fx-topo,.fx.fx-celular>.fin-toolbar,.fx.fx-celular>.fx-mais,.fx.fx-celular .fx-portadores-linha{display:none!important}
  .fx.fx-celular.fx-resumo-aberto>.fx-topo{display:flex!important}
  .fx.fx-celular.fx-resumo-aberto .fx-portadores-linha{display:flex!important}
  .fx.fx-celular.fx-resumo-aberto .fx-portadores-linha>.grid-top{display:none!important}
  .fx.fx-celular>.fx-topo>.acoes{display:none}
  .fx.fx-celular .kpi-chips,.fx.fx-celular .fx-portadores{flex-wrap:wrap;overflow:visible}
  .fx.fx-celular{gap:0}
  :root body .gm-celular .fin-table td .fin-doc,:root body .gm-celular .fin-table td .fin-btn-baixar,:root body .gm-celular .fin-table td .fin-descricao .badge-yellow{display:none!important}
  :root body .gm-celular .fin-table td[data-papel="titulo"] .fin-fornecedor{font:inherit;color:inherit}
  :root body .gm-celular .fin-table td[data-papel="valor"],:root body .gm-celular .fin-table td[data-papel="valor"] *{font:700 15px/1.3 var(--font-body)}
  :root body .gm-celular .fin-table td[data-papel="data"] .fin-venc-date{font:600 13px/1.35 var(--font-body)}
  :root body .gm-celular .fin-table td .fin-descricao{font-size:13px;color:inherit}
  :root body .gm-celular .fin-table td .atraso{font-weight:700}
  .fx.fx-celular .table-footer{flex-wrap:wrap;gap:6px;font-size:13px}
  .fx.fx-celular .table-footer .btn{min-width:44px;min-height:44px}
}
/* detalhe do título na janela única */
/* (largura da janela: a do ui.janela, min(1240px, 94vw) e até 90vh) */
.fx-janela .fx-cab-janela{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.fx-janela .fx-cab-janela:empty{display:none}
.fx-janela .fx-painel-conteudo{display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:0}
.fx-janela .fx-abas{overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap}
@media (max-width:640px){:root body .fx-janela .fx-abas{flex-wrap:wrap;overflow-x:visible}}
.fx-janela .fx-aba{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){.fx-janela .fx-aba{min-height:44px}.fx-janela .fx-resumo .v{font-size:15px}}
/* PC: Contas a pagar/receber mais perto do topo (1º título em y ≤ 280 em 1366) sem mudar fonte nem altura de linha */
@media (min-width:641px){
  :root body .fx{gap:2px!important}:root body .fx>.fin-toolbar{margin-bottom:0!important}
  :root body .fx .fx-portadores-linha{margin:0!important;min-height:0}
  :root body .fx .fx-portadores-linha>*{margin-top:0!important;margin-bottom:0!important}
  .module-subtabs:has(~ .module-subtab-panel .fx){margin-bottom:8px!important}
  :root body .grade-decorada .fin-table thead th{white-space:nowrap;padding-top:2px!important;padding-bottom:2px!important}
  :root body .grade-decorada .fin-table .grade-cabecalho .grade-cabecalho-rotulo>button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:640px){:root body .module-subtabs:has(~ .module-subtab-panel .fx){margin-bottom:8px}}
/* ===== Grade: cor, ícone e miniatura por tokens (estilo do caixa: ESTILO-CAIXA.md §1.2 e §9) =====
   Cor quer dizer uma coisa só (ux-dda.css do caixa): --risco vencido/falha · --decidir alguém precisa decidir (hoje,
   parcial) · --ok pago/resolvido (o verde do dinheiro) · --acao ação e informação comum (≠ verde do dinheiro) ·
   --neutro estado sem ação (a vencer, histórico). Valores do caixa nos temas claro e escuro. O tema troca só isto.
   --sit-<situação>: cor do selo · -fundo: fundo do selo (14% da cor) · -icone: emoji/ícone opcional (string CSS).
   A linha diz a situação em data-situacao e o prazo em data-prazo (trilho de 3 px: vencido, hoje, pago). */
:root,:root[data-theme="dark"]{
  --risco:#e05766;--decidir:#e0a23c;--on-decidir:#1d1300;--ok:#41b07f;--acao:#4553f5;--acao-hover:#3a46d9;--acao-texto:#ffffff;--neutro:#98a2b3;
}
:root[data-theme="light"]{
  --risco:#d23a57;--decidir:#b45309;--on-decidir:#ffffff;--ok:#15784f;--acao:#2a3aff;--acao-hover:#1f2ccc;--acao-texto:#ffffff;--neutro:#475067;
}
:root{
  --sit-vencido:var(--risco);--sit-vencido-fundo:color-mix(in srgb,var(--risco) 14%,transparent);--sit-vencido-icone:"";
  --sit-hoje:var(--decidir);--sit-hoje-fundo:color-mix(in srgb,var(--decidir) 14%,transparent);--sit-hoje-icone:"";
  --sit-aberto:var(--neutro);--sit-aberto-fundo:color-mix(in srgb,var(--neutro) 14%,transparent);--sit-aberto-icone:"";
  --sit-parcial:var(--decidir);--sit-parcial-fundo:color-mix(in srgb,var(--decidir) 14%,transparent);--sit-parcial-icone:"";
  --sit-baixado:var(--ok);--sit-baixado-fundo:color-mix(in srgb,var(--ok) 14%,transparent);--sit-baixado-icone:"";
  --sit-cancelado:var(--neutro);--sit-cancelado-fundo:color-mix(in srgb,var(--neutro) 10%,transparent);--sit-cancelado-icone:"";
  --sit-estornado:var(--decidir);--sit-estornado-fundo:color-mix(in srgb,var(--decidir) 14%,transparent);--sit-estornado-icone:"";
  --gm-miniatura-cel:48px;--gm-miniatura-pc:26px;--gm-icone-tam:20px;
}
[data-situacao="vencido"]{--gm-cor:var(--sit-vencido);--gm-cor-fundo:var(--sit-vencido-fundo);--gm-icone:var(--sit-vencido-icone);--gm-trilho:var(--sit-vencido)}
[data-situacao="hoje"]{--gm-cor:var(--sit-hoje);--gm-cor-fundo:var(--sit-hoje-fundo);--gm-icone:var(--sit-hoje-icone);--gm-trilho:var(--sit-hoje)}
[data-situacao="aberto"]{--gm-cor:var(--sit-aberto);--gm-cor-fundo:var(--sit-aberto-fundo);--gm-icone:var(--sit-aberto-icone)}
[data-situacao="parcial"]{--gm-cor:var(--sit-parcial);--gm-cor-fundo:var(--sit-parcial-fundo);--gm-icone:var(--sit-parcial-icone)}
[data-situacao="baixado"]{--gm-cor:var(--sit-baixado);--gm-cor-fundo:var(--sit-baixado-fundo);--gm-icone:var(--sit-baixado-icone);--gm-trilho:var(--sit-baixado)}
[data-situacao="cancelado"]{--gm-cor:var(--sit-cancelado);--gm-cor-fundo:var(--sit-cancelado-fundo);--gm-icone:var(--sit-cancelado-icone)}
[data-situacao="estornado"]{--gm-cor:var(--sit-estornado);--gm-cor-fundo:var(--sit-estornado-fundo);--gm-icone:var(--sit-estornado-icone)}
tr[data-prazo="hoje"]{--gm-trilho:var(--sit-hoje)}
/* trilho de 3 px na linha (PC) e no cartão (celular): vermelho vencido · âmbar hoje · verde pago · nada a vencer */
:root body .grade-cartoes-pronta table>tbody>tr[data-situacao]{border-left:3px solid var(--gm-trilho,transparent)!important}
/* prazo colorido ao lado da data: "6d atraso" · "hoje" · "em 3d" */
.gm-prazo{margin-left:6px;font-weight:600;white-space:nowrap}
.gm-prazo[data-prazo="atraso"]{color:var(--risco)}.gm-prazo[data-prazo="hoje"]{color:var(--decidir)}.gm-prazo[data-prazo="futuro"]{color:var(--neutro);font-weight:500}
/* um selo por linha, cor do token, sem o ícone do visual-v2 (o emoji, quando há, vem do dicionário, com texto) */
:root body .grade-cartoes-pronta tr[data-situacao] td[data-papel="situacao"] .badge{color:var(--gm-cor);background:var(--gm-cor-fundo);border-color:transparent}
:root body .grade-cartoes-pronta tr[data-situacao] td[data-papel="situacao"] .badge::before{content:none}
:root body .grade-cartoes-pronta tr[data-situacao] td[data-papel="situacao"]::before{content:var(--gm-icone,"")!important;margin-right:4px}
/* emoji do dicionário (ERP.ui.emoji): só no conteúdo, sempre com texto */
.emo{font-style:normal;margin-right:4px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
/* valor em fonte mono com algarismos de mesma largura (IBM Plex Mono, já servida em /fonts) */
:root body .grade-cartoes-pronta td[data-papel="valor"],:root body .grade-cartoes-pronta .fin-table .fin-valor,:root body .grade-cartoes-pronta .fin-table .fin-saldo{font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
/* cor de ação por token (não é o verde do dinheiro): Baixar da linha, Novo, primários da folha e da janela, seleção */
:root body .grade-cartoes-pronta .fin-btn-baixar,:root body .fx [data-novo],:root body .fx-janela .erp-janela-rodape .btn-primary,:root body .erp-folha-rodape .btn-primary,:root body .gm-selbar .btn-primary{background:var(--acao)!important;border-color:var(--acao)!important;color:var(--acao-texto)!important}
:root body .grade-cartoes-pronta .fin-btn-baixar:hover,:root body .fx [data-novo]:hover,:root body .fx-janela .erp-janela-rodape .btn-primary:hover,:root body .erp-folha-rodape .btn-primary:hover{background:var(--acao-hover)!important}
:root body .gm-opcao[aria-pressed="true"],:root body .gm-chip{border-color:var(--primary);background:var(--primary-soft,var(--primary-surface));color:var(--primary-strong,var(--primary))}
:root body .gm-chip-mais{border-color:var(--border-strong);background:var(--card);color:var(--text)}
:root body .gm-n{color:var(--primary-strong,var(--primary))}
/* ícone (emoji) e miniatura declarados como papel */
.grade-cartoes-pronta td[data-papel="icone"]{font-size:var(--gm-icone-tam);line-height:1;text-align:center}
.grade-cartoes-pronta td[data-papel="miniatura"] img,.grade-cartoes-pronta td[data-papel="miniatura"] .gm-miniatura{width:var(--gm-miniatura-pc);height:var(--gm-miniatura-pc);object-fit:cover;border-radius:6px;vertical-align:middle;display:inline-block}
.gm-logo{width:18px;height:18px;object-fit:contain;border-radius:4px;vertical-align:-4px;margin-right:4px;flex:none}
@media (max-width:640px){
  :root body .gm-celular table>tbody>tr[data-situacao]{border-left-color:var(--gm-trilho,var(--border))!important}
  :root body .gm-celular table>tbody>tr>td[data-papel="icone"]{display:block!important;order:9;flex:0 0 28px;overflow:visible;text-align:center}
  :root body .gm-celular table>tbody>tr:has(>td[data-papel="miniatura"]:not(:empty)){padding-left:calc(var(--gm-miniatura-cel) + 22px);min-height:calc(var(--gm-miniatura-cel) + 16px)}
  :root body .gm-celular table>tbody>tr>td[data-papel="miniatura"]{display:block!important;position:absolute!important;left:12px;top:8px;width:var(--gm-miniatura-cel)!important;height:var(--gm-miniatura-cel)!important;overflow:hidden}
  :root body .gm-celular table>tbody>tr>td[data-papel="miniatura"] img,:root body .gm-celular table>tbody>tr>td[data-papel="miniatura"] .gm-miniatura{width:var(--gm-miniatura-cel);height:var(--gm-miniatura-cel);border-radius:8px}
}
/* gavetas do Financeiro (Achar no extrato, Pago no banco) abertas de dentro da janela do título ficam por cima dela */
.drawer.fx-painel{z-index:950}
/* ===== Janela de detalhe: ficha densa (padrão do ui.janela; .erp-ficha para as outras telas) =====
   Rótulo pequeno em cima do valor, em grade (4 colunas na janela de 1240 px; 2 no celular). Sem vão entre rótulo
   e valor, sem linha vazia (a tela não manda campo sem valor). */
:root body .erp-ficha,:root body .erp-janela .fx-dados{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px 22px;align-items:start;margin:4px 0 10px}
:root body .erp-ficha .field-row,:root body .erp-janela .fx-dados .field-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:0;border:0;min-width:0}
:root body .erp-ficha .field-row .k,:root body .erp-janela .fx-dados .field-row .k{font:600 11.5px/1.3 var(--font-body);color:var(--muted);letter-spacing:0;text-transform:none}
:root body .erp-ficha .field-row .v,:root body .erp-janela .fx-dados .field-row .v{font:600 14px/1.35 var(--font-body);color:var(--text);text-align:left;overflow-wrap:anywhere;white-space:normal}
@media (max-width:640px){:root body .erp-ficha,:root body .erp-janela .fx-dados{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}}
/* abas da janela em tabela densa (Baixas, Histórico): data completa, nada cortado */
.fx-hist.fx-hist-tbl{display:table;border-left:0;margin:0;padding:0;list-style:none}
.fx-hist-tbl td{vertical-align:top}
.fx-hist-tbl .fx-mud{margin-top:4px}
.fx-nowrap{white-space:nowrap}
:root body .fx-janela .tbl td,:root body .fx-janela .tbl th{white-space:nowrap}
:root body .fx-janela .tbl td:last-child,:root body .fx-hist-tbl td:nth-child(5){white-space:normal}
/* PC (≥ 1024): data, valor, documento, situação e conta/portador nunca cortam; quem cede espaço é a identidade */
@media (min-width:1024px){
  :root body table th.gl-inteira,:root body table td.gl-inteira{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  :root body table td.gl-inteira *{white-space:nowrap}
  :root body table td.gl-inteira .fin-doc{white-space:nowrap}
}
/* campo de data dd/mm/aaaa (campo próprio do shell): ícone do calendário à direita */
:root body input.erp-data{padding-right:32px!important;min-width:132px;font-variant-numeric:tabular-nums;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2378849a%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Crect x=%273%27 y=%275%27 width=%2718%27 height=%2716%27 rx=%272%27/%3E%3Cpath d=%27M3 10h18M8 3v4M16 3v4%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:18px 18px}
:root body input.erp-data[aria-invalid=true]{border-color:var(--red)}
/* coluna Débito (Pago no banco, Baixas automáticas): data e valor inteiros em linhas próprias; a conta quebra */
:root body .fin-table td.fx-deb{white-space:normal;overflow:visible;text-overflow:clip}
:root body .fin-table td.fx-deb .fin-doc{white-space:normal;overflow-wrap:anywhere}
:root body .fin-table td.fx-deb .fx-deb-v{display:block;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== Seletor Admin "Ver como usuário" + Topo Compacto de Alto Aproveitamento ===== */
.ver-como-wrap{display:inline-flex;align-items:center;gap:5px;margin-left:0}
.ver-como-wrap .loja-lbl{font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ver-como-wrap select,#ver-como-sw{font-family:var(--font-body);font-size:12px;font-weight:600;padding:4px 8px;min-height:30px;height:30px;border-radius:7px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;max-width:165px}
.ver-como-wrap select:hover,.ver-como-wrap select:focus,#ver-como-sw:hover,#ver-como-sw:focus{border-color:var(--primary);outline:none}
.ver-como-wrap.ver-como-ativo{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);border-radius:8px;padding:2px 5px}
.ver-como-wrap.ver-como-ativo .loja-lbl{color:#fbbf24;font-weight:700}
.ver-como-reset{background:#f59e0b;color:#111827;border:0;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:24px}
.ver-como-reset:hover{filter:brightness(1.08)}

@media (min-width:641px){
  .main .topbar{min-height:44px;padding:0 12px;gap:6px}
  .main .topbar .brand{font-size:16px;padding-right:4px;gap:5px}
  .main .topbar .brand>div small{font-size:13px}
  .nav-areas .area-tab{padding:0 9px;font-size:12.5px;gap:5px}
  .loja-sw-wrap:not(.ver-como-wrap) .loja-lbl{display:none}
  .loja-cor-badge{padding:2px 6px;font-size:10.5px}
  .main #loja-sw{max-width:190px;min-height:30px;height:30px;padding:2px 8px;font-size:12px}
  .main .command-trigger{min-height:30px;height:30px;padding:0 9px;font-size:12px}
  .main .tema-btn,.main .btn-sair,#preferencias-btn{min-width:30px!important;min-height:30px!important;height:30px;padding:0 8px;font-size:12px}
  .main .user-nome{font-size:12px;max-width:115px}
  .shell-faixa{top:var(--topbar-h,44px);min-height:30px;padding:2px 12px}
  .shell-faixa .area-subtabs{padding:2px 0;gap:3px}
  .shell-faixa .area-subtab{min-height:26px;padding:2px 10px;font-size:12px}
  .shell-faixa .tab,.guias .tab{min-height:25px;max-width:195px;padding:1px 4px 1px 9px;font-size:11.5px;border-radius:7px}
  .guias .tab .x{width:20px;height:20px;min-width:20px;min-height:20px}
  .guias-mais-btn{min-height:25px;padding:1px 8px;font-size:11.5px;border-radius:7px}
  .main .content{max-width:100%;padding:10px 14px 48px}
}
@media (min-width:641px) and (max-width:1440px){
  .main .topbar .brand>div small{display:none}
  .nav-areas .area-tab{padding:0 7px;font-size:12px}
  .nav-areas .area-tab .ic{display:none}
  .main #loja-sw{max-width:155px;font-size:11.5px}
  .ver-como-wrap .loja-lbl{display:none}
  .ver-como-wrap select,#ver-como-sw{max-width:130px;font-size:11.5px}
  .main .user-nome{display:none}
}
@media (max-width:640px){
  .ver-como-wrap .loja-lbl{display:none}
  .ver-como-wrap select,#ver-como-sw{max-width:130px;font-size:12px}
}

/* ============================================================================
   MOTOR DE RESPONSIVIDADE FLUIDA MULTITELA (NOTEBOOKS, JANELAS REDUZIDAS, TABLETS E MONITORES)
   Garante que nenhum card, grid, tabela ou badge estoure para fora quando a janela não está em tela cheia.
   ============================================================================ */
html,body{overflow-x:hidden}
.main,.content,.tab-view,.card,.kpi,.hero,.toolbar{min-width:0;max-width:100%;box-sizing:border-box}
[style*="display:grid"]>*,[style*="display: grid"]>*,
[style*="display:flex"]>*,[style*="display: flex"]>*{
  min-width:0;
}
.card .tbl:not(.fin-table){min-width:0!important;width:100%!important;table-layout:auto}
.card .tbl:not(.fin-table) th,
.card .tbl:not(.fin-table) td{white-space:normal;overflow-wrap:break-word;word-break:normal}
.card .tbl:not(.fin-table) .badge,
.card .badge{white-space:normal!important;line-height:1.3;text-align:left;max-width:100%;overflow-wrap:break-word;word-break:normal;height:auto}
.badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Grids de Níveis de Consulta de Crédito / RH / Planos e Cards de Inteligência */
.erp-planos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,182px),1fr));
  gap:10px;
  width:100%;
  min-width:0;
}
.erp-planos-grid>*{min-width:0;max-width:100%;box-sizing:border-box}
.erp-scores-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:12px;
  width:100%;
  min-width:0;
}
.erp-split-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:14px;
  width:100%;
  min-width:0;
}
.erp-kpis-auto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:10px;
  width:100%;
  min-width:0;
}

/* Telas de notebook / janela dividida (até 1366px) */
@media (max-width:1366px){
  .main .content{padding:10px 14px 48px}
  .card{padding:14px 16px}
  .tbl th,.tbl td{padding:8px 10px;font-size:12.5px}
}

/* Janelas médias / não-fullscreen (até 1160px) */
@media (max-width:1160px){
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))!important}
  .erp-split-grid{grid-template-columns:minmax(0,1fr)}
}

/* Janelas compactas / meia-tela (até 920px) */
@media (max-width:920px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"]{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))!important;
  }
}