/* ============================================================
   RepCom · Painel Gerencial — TEMA ESCURO (v9 · preset shadcn b3m6YR0pc)
   Base mãe: tweakcn b3m6YR0pc — superfícies neutras (#0A0A0A/#171717),
   primário indigo, bordas brancas translúcidas, rampa laranja nos gráficos.
   Apoio administrativo (densidade, tabelas, filtros): Tabler.
   Cantos RETOS (radius 0) e botoes uppercase = identidade do preset (ver expectativa 04/07).
   JS local: erp.js (autocomplete/linha clicavel) e graficos.js (Chart.js vendorado).
   ============================================================ */
/* Inter vendorada (variable font, licença OFL em vendor/fonts/LICENSE-Inter.txt) —
   a fonte do preset; fallback do stack cobre ambientes sem o arquivo */
@font-face{font-family:"Inter";src:url("vendor/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* superfícies — dark neutro do preset shadcn b3m6YR0pc */
  --bg:#0A0A0A;                 /* canvas */
  --navy:#111111;               /* sidebar / chrome (mais escuro) */
  --card:#171717;               /* superfície de cartão */
  --card2:#262626;              /* cartão elevado / hover / zebra */
  --line:rgba(255,255,255,.10);   /* preset: border */
  --line2:rgba(255,255,255,.15);  /* preset: input */
  --zebra:rgba(255,255,255,.025);
  --field:#101010;                /* fundo de campos (inputs/selects) */
  /* tipografia */
  --font-sans:Inter,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* texto */
  --ink:#FAFAFA;                /* primário (quase branco) */
  --ink2:#D4D4D4;              /* secundário */
  --gray:#A3A3A3;              /* labels / muted */
  --faint:#737373;             /* muito apagado */
  /* ação primária indigo (preset) + acentos de apoio */
  --primary:#3730A3;           /* preset: primary (fundo de botões) */
  --primary-fg:#E0E7FF;        /* preset: primary-foreground */
  --teal:#818CF8;              /* legado: hoje acento indigo-400 (links/valores) */
  --teal-deep:#4338CA;
  --cyan:#22D3EE;
  --indigo:#6366F1;
  --violet:#A78BFA;
  --orange:#FB923C;--laranja:var(--orange); /* alias usado inline em base.html */
  --pink:#F472B6;
  --ok:#34D399;--warn:#FBBF24;--bad:#F87171;
  --ok-deep:#10B981;--warn-deep:#D9930B;--bad-deep:#DC2626;
  /* gradientes quase chapados (estética flat do preset) */
  --g-brand:linear-gradient(135deg,#4338CA,#3730A3);
  --g-teal:linear-gradient(135deg,#6366F1,#4338CA);
  --g-cyan:linear-gradient(135deg,#38BDF8,#0284C7);
  --g-violet:linear-gradient(135deg,#A78BFA,#7C3AED);
  --g-orange:linear-gradient(135deg,#FB923C,#EA580C);
  --g-pink:linear-gradient(135deg,#F472B6,#DB2777);
  --g-ok:linear-gradient(135deg,#34D399,#059669);
  --g-bad:linear-gradient(135deg,#F87171,#DC2626);
  /* raio ZERO (preset exporta --radius:0 — expectativa é canto reto) + sombras planas */
  --r:0;--r-sm:0;
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 0 0 1px rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.45);
  --glow-teal:0 0 0 1px rgba(99,102,241,.35),0 8px 28px rgba(99,102,241,.15);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink);
  background:var(--bg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--teal);text-decoration:none}
a:hover{color:#A5B4FC}
main{max-width:1340px;margin:0 auto;width:100%;padding:26px 30px 54px}
::selection{background:rgba(99,102,241,.28)}
/* scrollbar discreta no tema escuro */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--r-sm);border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:padding-box}

/* ===== app shell: sidebar + área principal ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:14px 10px;
  border-right:1px solid rgba(255,255,255,.06);box-shadow:1px 0 0 rgba(255,255,255,.02)}
/* marca 2 andares (paridade Dashboard): logo RAIU grande + linha do programa */
.side-logo{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:8px 8px 16px;text-decoration:none}
.side-app{display:flex;align-items:center;gap:11px}
.side-mark{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--g-brand);color:var(--primary-fg);font-weight:900;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(67,56,202,.35)}
.side-name{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.side-name b{font-weight:800;font-size:19px;letter-spacing:.2px;
  background:linear-gradient(115deg,#E0E7FF 0%,#A5B4FC 55%,#67E8F9 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.side-name small{font-weight:600;font-size:9px;color:var(--gray);letter-spacing:1.6px;text-transform:uppercase;margin-top:3px}
/* PC-20: seletor de módulo abaixo da marca — idêntico ao Dashboard. Desvios S-37
   medidos no DOM (espelhados): colunas minmax(0,1fr) + min-width:0 + small em 1 linha
   com reticência — o CSS literal do contrato quebrava "pedidos · cadastros" em 2
   linhas na coluna de 95px da sidebar de 240px. */
.mod-switch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;padding:4px;margin:0 8px 4px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.mod-switch a{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 6px 8px 8px;min-width:0;
  text-decoration:none;color:var(--gray);transition:background .15s,color .15s}
.mod-switch a b{font-size:12.5px;font-weight:800;letter-spacing:.2px;color:inherit}
.mod-switch a small{font-size:9px;font-weight:500;letter-spacing:-.2px;color:inherit;opacity:.75;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mod-switch a:hover{background:rgba(255,255,255,.05);color:var(--ink2)}
.mod-switch a.on{background:var(--g-brand);color:var(--primary-fg);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(67,56,202,.35)}
.mod-switch a.off{opacity:.45;cursor:not-allowed}
.mod-switch a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mod-switch a{transition:none}}
.side-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.side-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--faint);padding:16px 12px 6px}
.side-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);color:var(--gray);font-weight:600;font-size:13px;
  text-decoration:none;transition:background .14s,color .14s,box-shadow .14s;position:relative}
.side-link:hover{background:rgba(255,255,255,.05);color:#fff}
/* ativo estilo shadcn sidebar: fundo sutil + trilho indigo, sem pílula chamativa */
.side-link.on{background:rgba(255,255,255,.06);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 0 var(--indigo)}
.side-link.on .ico{stroke:var(--teal)}
.side-link .ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* PC-21 (c150): o rodapé do usuário (.side-user/.su-*) e o logout da lateral saíram —
   identidade, senha, sair e relato vivem na topbar (.tb-perfil/.menu) */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
/* ===== PC-21: topbar unificada — bloco LITERAL do contrato (idêntico ao Dashboard) ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:0 18px;height:56px;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.tb-status{font-size:11.5px;color:var(--gray);display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .mod-switch{margin:0 auto;min-width:260px;padding:3px;gap:3px}
.topbar .mod-switch a{flex-direction:row;align-items:baseline;gap:7px;padding:6px 12px}
.tb-acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--gray);border:1px solid transparent;
  cursor:pointer;font-weight:800;font-size:14px;text-decoration:none;background:none;font-family:inherit}
.tb-ico:hover,.tb-ico[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
.tb-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.tb-perfil{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border:1px solid transparent;cursor:pointer;background:none;color:inherit;font-family:inherit}
.tb-perfil:hover,.tb-perfil[aria-expanded="true"]{background:rgba(255,255,255,.06);border-color:var(--line)}
.tb-av{width:28px;height:28px;background:var(--card2);color:var(--ink);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2)}
.tb-perfil .who{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.tb-perfil .who b{font-size:12.5px;font-weight:700}
.tb-perfil .who small{font-size:9.5px;color:var(--faint);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.tb-perfil .chev{color:var(--faint);font-size:10px;margin-left:2px}
.menu{position:absolute;right:18px;top:52px;width:250px;background:var(--card);border:1px solid var(--line2);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.5);z-index:9}
.menu .cab{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.menu .cab .tb-av{width:34px;height:34px;font-size:14px}
.menu .cab b{display:block;font-size:13px}.menu .cab small{display:block;font-size:11px;color:var(--faint)}
.menu .grp{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:10px 14px 4px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;color:var(--ink2);font-size:13px;font-weight:600;
  text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.menu .ico{width:14px;height:14px;opacity:.7}
.menu .sair{border-top:1px solid var(--line);margin-top:6px}.menu .sair button{color:var(--bad)}
/* balão de relato ancorado no ícone do topo: abre para BAIXO, à direita */
.topbar .relato-pop{top:calc(100% + 8px);bottom:auto;right:0;left:auto}
.topbar .relato-pop::before{top:-6px;bottom:auto;left:auto;right:12px;border:0;border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16)}
/* complementos do ERP (fora do bloco literal): estado fechado/aberto do menu sem JS
   inline, traço dos ícones do menu (o ERP não tem regra global .ico) e o balão de
   relato sem a margem que ele tinha no rodapé da lateral */
.menu:not([data-open]){display:none}
.menu .ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.menu .sair form{margin:0}
.ajuda-balao[open] .tb-ico{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
@media(max-width:880px){
  /* PC-21 (trecho mobile do contrato): status some; seletor desce em linha própria; perfil só avatar */
  .topbar{height:auto;flex-wrap:wrap;padding:8px 10px;gap:8px}
  .tb-status{display:none}.topbar .mod-switch{order:3;width:100%;min-width:0}.tb-perfil .who{display:none}
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .side-logo{flex-direction:row;align-items:center;gap:10px;padding:4px 6px}
  /* .side-logo à frente: a regra base de .logo-ent-side vem DEPOIS desta media query
     no arquivo e empataria em peso — aqui a ordem difere do Dashboard */
  .side-logo .logo-ent-side{height:26px;align-self:center}
  .side-name small{display:none}
  .side-nav{flex-direction:row;gap:2px}.side-group{display:none}
  .side-link span{white-space:nowrap}
  .topbar{position:relative}   /* sem sticky no mobile, mas ancora o .menu (PC-21) */
}
.rodape{max-width:1340px;margin:0 auto;width:100%;padding:18px 30px 30px;color:var(--gray);font-size:11.5px}
.rodape code{background:rgba(255,255,255,.06);padding:1px 5px;border-radius:var(--r-sm);color:var(--ink2)}

/* status dot do topbar */
.tb-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34D399;margin-right:6px;box-shadow:0 0 9px rgba(52,211,153,.85)}

/* filtros */
.filtros-erp{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--card);
  border-radius:var(--r);padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
.filtros-erp button{background:var(--g-brand);color:var(--primary-fg);border:0;padding:8px 16px;border-radius:var(--r-sm);font-weight:700;cursor:pointer}
.filtros-erp button:hover{filter:brightness(1.12)}

/* secoes */
h1{color:#fff;font-size:21px;font-weight:700;letter-spacing:-.3px;margin:6px 0 3px}
/* subtítulo de página (Tabler page-header): o .muted logo após o h1 */
h1+.muted{display:block;font-size:12.5px;margin:2px 0 18px}
h3{color:var(--ink);font-size:13px;margin:4px 0 8px}
p{color:var(--ink2)}

/* tabelas */
.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
table.tab{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink2)}
table.tab th{background:rgba(255,255,255,.03);color:var(--gray);text-align:left;padding:8px 12px;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;border-bottom:1px solid var(--line2)}
table.tab td{padding:9px 12px;border-bottom:1px solid var(--line)}
table.tab tbody tr:last-child td{border-bottom:0}
table.tab tbody tr:nth-child(even){background:var(--zebra)}
table.tab tbody tr:hover{background:rgba(255,255,255,.045)}
table.tab td.num,table.tab th.num{text-align:right;white-space:nowrap}
table.tab b,table.tab strong{color:var(--ink)}
table.tab tfoot td{background:rgba(99,102,241,.08);font-weight:800;color:var(--ink);border-top:2px solid var(--teal)}
table.tab small{color:var(--gray)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:block;
  transition:box-shadow .16s,transform .16s,border-color .16s;box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--g-brand);opacity:0;transition:opacity .16s}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:var(--line2)}
.card:hover::before{opacity:1}

/* ---- autenticacao / admin ---- */
.auth-body{background:radial-gradient(900px 600px at 70% -10%,#1C1C1C,#0A0A0A 60%);min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;color:var(--ink)}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;width:360px;max-width:92vw;box-shadow:var(--shadow-lift)}
.auth-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:.5px}
.auth-logo b,.auth-logo span{background:linear-gradient(135deg,#A5B4FC,#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{font-size:11.5px;color:var(--gray);margin-bottom:18px}
.auth-h1{font-size:18px;color:var(--ink);margin:0 0 14px}
.auth-form label{display:block;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;margin:10px 0 4px}
.auth-form input{width:100%;padding:11px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:14px;background:var(--field);color:var(--ink)}
.auth-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.auth-form button{width:100%;margin-top:16px;background:var(--g-brand);color:var(--primary-fg);border:0;padding:12px;border-radius:var(--r-sm);font-weight:800;font-size:14px;cursor:pointer}
.auth-form button:hover{filter:brightness(1.06)}
.auth-info{font-size:12.5px;color:var(--ink2)}
/* módulo integrado (PC-13/modulo-integrado): entrada principal = SSO do RepCom;
   login local recolhido em <details> como contingência */
.btn-sso{display:block;text-align:center;background:var(--g-brand);color:var(--primary-fg);padding:12px;border-radius:var(--r-sm);font-weight:800;font-size:14px;text-decoration:none}
.btn-sso:hover{filter:brightness(1.06)}
.btn-sso:active{transform:translateY(1px)}
.auth-conting{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.auth-conting summary{cursor:pointer;font-size:12px;color:var(--gray)}
.auth-conting summary:hover{color:var(--ink)}
.msg{border-radius:var(--r-sm);padding:10px 13px;font-size:13px;margin:10px 0}
.msg.erro{background:rgba(251,111,132,.12);color:#FF9AAA;border:1px solid rgba(251,111,132,.3)}
.msg.ok{background:rgba(52,211,153,.12);color:#5FE3AE;border:1px solid rgba(52,211,153,.3)}
.msg.aviso{background:rgba(251,191,36,.1);color:#FBD24E;border:1px solid rgba(251,191,36,.28)}
.msg.aviso code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:var(--r-sm);word-break:break-all;color:var(--ink)}

/* ==== RepCom Novo (ERP) — design system enxuto (herança webdash aposentada na faxina 04/07) ==== */
.muted{color:var(--gray);font-size:.95em}
.side-link.em-breve{opacity:.45;cursor:default} /* sem pointer-events:none: preserva o tooltip title (c02/B3) */
.filtros-erp{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filtros-erp input,.filtros-erp select{background:var(--field);border:1px solid var(--line2);color:var(--ink2);border-radius:var(--r-sm);padding:7px 10px;font-size:13px}
.filtros-erp button{background:var(--primary);color:var(--primary-fg);border:0;border-radius:var(--r-sm);padding:8px 16px;font-weight:700;cursor:pointer}
/* autocomplete elegante (c22): dropdown de sugestões no tema, substitui o datalist nativo */
.sugestoes-envolt{position:relative;display:inline-block}
.sugestoes-box{position:absolute;top:calc(100% + 4px);left:0;min-width:320px;max-width:460px;
  max-height:300px;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:60;display:none}
.sugestoes-box.aberta{display:block}
.sugestoes-box .sug{display:flex;gap:10px;padding:7px 12px;cursor:pointer;font-size:13px;align-items:baseline}
.sugestoes-box .sug:hover,.sugestoes-box .sug.ativa{background:var(--card2)}
.sugestoes-box .sug b{color:var(--teal);white-space:nowrap}
.sugestoes-box .sug span{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestoes-box .sug-vazio{padding:9px 12px;color:var(--gray);font-size:12.5px}
/* campo editável dentro da tabela de itens (qtd/desconto/unitário) */
.campo-item{background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);color:inherit;
  text-align:right;padding:2px 4px;font:inherit}
/* logo de cliente/fornecedor nas telas de pedido (c25): proporção SEMPRE preservada */
.logo-entidade{display:none;height:44px;max-width:170px;object-fit:contain;background:#fff;
  border-radius:var(--r-sm);padding:3px;margin:2px 0 6px}
/* c29/UX-1: ações com cara de BOTÃO discreto (pedido do usuário 03/07) — classe única,
   sóbria, para "voltar", "Gerar PDF", exports, paginação e afins, em todas as telas */
.acao{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:rgba(255,255,255,.03);color:var(--ink2);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.3;
  transition:border-color .15s,background .15s,color .15s}
.acao:hover{border-color:var(--teal);background:rgba(99,102,241,.08);color:var(--ink);
  text-decoration:none}
.acao b{color:inherit}
.linha-acoes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;align-items:center}
/* c29/UX-2: linha inteira clicável nas listas (erp.js navega pelo data-href) */
tr[data-href]{cursor:pointer}

/* ==== Onda Visual 2 (04/07): tokens do design system ERP ====================
   Preset externo (tweakcn b3m6YR0pc) APLICADO em 04/07/2026 — rampa laranja
   oficial do preset; os componentes consomem só as variáveis.   */
:root{
  --raio: 0;                              /* raio padrão de componentes ERP (preset: 0) */
  --chart-1: #FDBA74;        /* séries de gráfico (Onda 3) */
  --chart-2: #F97316;
  --chart-3: #EA580C;
  --chart-4: #C2410C;
  --chart-5: #9A3412;
}
/* badge de situação do pedido (C/E/P/F/X) — antes era texto puro */
.badge{display:inline-block;padding:2px 10px;border-radius:var(--r-sm);font-size:10.5px;
  font-weight:800;letter-spacing:.5px;text-transform:uppercase;border:1px solid;
  vertical-align:middle;white-space:nowrap}
.badge-p{color:var(--teal);border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08)}
.badge-c{color:var(--cyan);border-color:rgba(63,182,255,.4);background:rgba(63,182,255,.08)}
.badge-e{color:var(--violet);border-color:rgba(138,125,255,.4);background:rgba(138,125,255,.08)}
.badge-f{color:var(--ok);border-color:rgba(57,217,138,.4);background:rgba(57,217,138,.08)}
.badge-x{color:var(--bad);border-color:rgba(255,108,108,.4);background:rgba(255,108,108,.08)}
/* INT-2: badges de inteligência de negociação na tela do pedido (curva ABC + tendência).
   Injetados pelo erp.js na coluna Sinais; ícones SVG (não emoji), cores semânticas. */
.ind-cel{white-space:nowrap}
.ind-slot{display:inline-flex;gap:5px;align-items:center;vertical-align:middle}
.badge-abc{display:inline-block;min-width:15px;padding:1px 5px;border-radius:var(--r-sm);
  font-size:10px;font-weight:800;text-align:center;border:1px solid;cursor:help}
.abc-A{color:var(--ok);border-color:rgba(57,217,138,.5);background:rgba(57,217,138,.1)}
.abc-B{color:var(--cyan);border-color:rgba(63,182,255,.45);background:rgba(63,182,255,.09)}
.abc-C{color:var(--muted);border-color:rgba(150,150,150,.35);background:rgba(150,150,150,.08)}
.badge-int{display:inline-flex;align-items:center;line-height:1;cursor:help}
.badge-int .ico-t{width:15px;height:15px}
.badge-int.alta{color:var(--ok)}                 /* em alta na região — verde */
.badge-int.alerta.recompra{color:var(--warn)}    /* recompra parada — âmbar (atenção) */
.badge-int.alerta.ritmo{color:var(--orange)}     /* ritmo caindo — laranja */
.badge-int.alerta.participacao{color:var(--bad)} /* perdendo participação — vermelho */
/* INT-3/5: painéis de RECOMENDAÇÃO (cesta, oportunidade de linha, linha esfriando). Ganham
   destaque próprio (borda/fundo de acento) p/ não se misturarem com a tabela de itens; cada
   recomendação tem hierarquia — código em destaque, o "porquê" em texto secundário. */
.painel-reco{border-color:rgba(99,102,241,.30);background:rgba(99,102,241,.05)}
.reco{display:flex;align-items:center;gap:12px;padding:9px 2px;
  border-top:1px solid rgba(255,255,255,.06)}
.reco:first-child{border-top:none}
.reco-corpo{flex:1;min-width:0}
.reco-titulo{color:var(--ink);font-size:13px;line-height:1.35}
.reco-titulo b{color:var(--teal);font-weight:800}
.reco-motivo{color:var(--muted);font-size:11.5px;margin-top:2px}
.reco-mais{color:var(--muted);font-size:12px;justify-content:center}
.cesta-incluir{flex:none;align-self:center;padding:3px 12px;border-radius:var(--r-sm);
  cursor:pointer;font-size:11px;font-weight:700;color:var(--teal);white-space:nowrap;
  border:1px solid rgba(99,102,241,.45);background:rgba(99,102,241,.10)}
.cesta-incluir:hover{background:rgba(99,102,241,.20)}
.cesta-n,.linha-n,.fria-n{color:var(--muted);font-weight:600}
/* logo de entidade — variantes que estavam em style= repetido nos templates */
.logo-ent-h1{display:none;height:34px;max-width:130px;object-fit:contain;vertical-align:middle;
  background:#fff;border-radius:var(--r-sm);padding:2px;margin-right:8px}
/* logo escura do gerenciador vira BRANCA sobre o fundo escuro: invert acende o traço
   e o screen "come" o fundo (funciona com PNG transparente E com fundo branco chapado) */
.logo-ent-side{display:none;height:46px;max-width:180px;align-self:flex-start;object-fit:contain;object-position:left;
  background:transparent;border-radius:0;padding:0;
  filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
/* Onda Visual 5: foco visível no bloco ERP (paridade com o padrão do tema) e fim dos
   estilos inline repetidos em botões de célula e alinhamentos de filtro */
.filtros-erp input:focus,.filtros-erp select:focus,.filtros-erp textarea:focus,
.campo-item:focus,.painel-dobra textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.acao:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.filtros-erp .muted,.filtros-erp .acao{align-self:center}
/* c37/UX: botões de célula deixaram de ter cara de texto puro (pedido do usuário) —
   mini botões com borda, mesmo idioma dos chips */
.btn-cel{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink2);
  cursor:pointer;font:inherit;font-size:12px;line-height:1.3;padding:2px 7px;
  border-radius:var(--r-sm);transition:border-color .15s,background .15s,color .15s}
.btn-cel:hover{border-color:var(--teal);background:rgba(99,102,241,.08);color:var(--ink)}
.btn-cel-perigo{background:none;border:1px solid rgba(248,113,113,.3);color:var(--bad);
  cursor:pointer;font:inherit;font-size:12px;line-height:1.3;padding:2px 8px;
  border-radius:var(--r-sm);transition:border-color .15s,background .15s}
.btn-cel-perigo:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.55)}
.logo-mini{max-height:34px;max-width:140px;background:#fff;border-radius:var(--r-sm);padding:2px}
/* Onda Visual 4: pontas soltas de padronização */
.form-grid{max-width:960px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
/* kaizen c70: campos do form-grid ocupam a coluna por padrão (fim dos width:100% inline).
   Descendente (não filho): o erp.js envolve os campos de busca no span .sugestoes-envolt —
   que também precisa de 100% (é inline-block shrink-to-fit; sem isso o campo de busca
   ficava na largura default — rev. c70) */
.form-grid label input:not([type=hidden]),.form-grid label select{width:100%}
.form-grid label .sugestoes-envolt{width:100%}
.h-secao{margin-top:16px}
.painel-dobra{margin:10px 0;border:1px solid var(--line);border-radius:var(--raio);
  padding:8px 12px;background:rgba(255,255,255,.02)}
.painel-dobra[open]{background:var(--card)}
.painel-dobra>summary{list-style:none}
.painel-dobra>summary::-webkit-details-marker{display:none}
/* Onda Visual 3: cards de gráfico (Chart.js) */
.paineis-graficos{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin:14px 0}
@media(max-width:900px){.paineis-graficos{grid-template-columns:1fr}}
.grafico-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--raio);padding:14px 16px}
.grafico-card h3{margin:0 0 2px;font-size:14px;color:var(--ink)}
.grafico-card .muted{margin:0 0 10px;font-size:12px}
.grafico-area{position:relative;height:240px}
.grafico-area canvas{max-width:100%}
/* estados padronizados (listas vazias e carregamento — base p/ os gráficos da Onda 3) */
.vazio{color:var(--gray);padding:18px;text-align:center;font-size:13px}
.carregando{color:var(--gray);padding:18px;text-align:center;font-size:13px}
.carregando::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;
  vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
/* Onda Visual 6 (04/07): ícones Tabler inline via macro _icones.html */
.ico-t{width:14px;height:14px;flex-shrink:0;vertical-align:-2px}
.filtros-erp button{display:inline-flex;align-items:center;gap:6px}
.tb-teste{color:var(--orange);margin-left:8px;font-weight:700}
.side-breve{margin-left:auto;opacity:.55}
/* botões primários com a identidade do preset b3m6YR0pc (button.tsx da base mãe):
   uppercase, tracking largo, texto pequeno semibold, canto quase reto e "press" de 1px */
.filtros-erp button,.auth-form button{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;border-radius:var(--r-sm)}
.filtros-erp button:active,.auth-form button:active,.acao:active{transform:translateY(1px)}
/* estados vazios com respiro (Tabler empty state) */
.vazio,.carregando{padding:28px 18px}
/* ==== Onda Visual 7 (04/07 — c36): formulários FLUIDOS =======================
   Feedback do usuário: campos desalinhados/bagunçados. Padrões novos:
   .campo = rótulo pequeno ACIMA do campo; .linha-campos = fileira alinhada pela
   base; .contato-linha = grid de colunas fixas (tudo alinha, como planilha). */
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo>span{font-size:10.5px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.campo input,.campo select,.campo textarea{background:var(--field);border:1px solid var(--line2);
  color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;width:100%;
  font-family:inherit;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.check-linha{display:flex;gap:7px;align-items:center;color:var(--ink2);font-size:13px;
  padding:8px 0}
.linha-campos{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}
.campo-tabela{min-width:240px;flex:1;max-width:340px}
.campo-desconto{width:160px}
.campo-qtd{width:90px}
/* resultado do cálculo em destaque, com a ação seguinte NA MESMA linha */
.resultado-liquido{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:12px 0;
  padding:12px 16px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25)}
.resultado-liquido b{font-size:21px;color:var(--ink)}
.resultado-liquido form{display:flex;gap:10px;align-items:center;margin-left:auto}
/* botões com hierarquia: gravar = primário compacto; excluir = perigo discreto */
.btn-gravar{background:var(--g-brand);color:var(--primary-fg);border:0;border-radius:var(--r-sm);
  padding:8px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  cursor:pointer;white-space:nowrap}
.btn-gravar:hover{filter:brightness(1.12)}
.btn-excluir{background:none;border:1px solid rgba(248,113,113,.35);color:var(--bad);
  border-radius:var(--r-sm);padding:7px 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.btn-excluir:hover{background:rgba(248,113,113,.1)}
/* gerenciador de contatos: MESMA grade p/ cabeçalho, form de adicionar e cada linha */
.contato-cab,.contato-linha{display:grid;gap:8px;align-items:center;padding:8px 0;
  grid-template-columns:1.25fr .9fr 1fr 1.15fr 128px 150px;border-bottom:1px dashed var(--line)}
.contato-cab{font-size:10.5px;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;border-bottom:1px solid var(--line2);padding:10px 0 6px}
.contato-linha:last-child{border-bottom:0}
.contato-linha input{width:100%;min-width:0;background:var(--field);border:1px solid var(--line2);
  color:var(--ink);border-radius:var(--r-sm);padding:6px 9px;font-size:12.5px}
.contato-linha input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.contato-linha .c-nome{font-weight:600;color:var(--ink);font-size:12.5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contato-linha .c-cargo{color:var(--ink2);font-size:12.5px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.contato-acoes{display:flex;gap:6px;justify-content:flex-end}
/* kaizen c39 (sobra c36/#3): input date não tem placeholder — no mobile, onde o
   cabeçalho da grade some, um micro-rótulo identifica o campo Aniversário */
.c-aniv{display:flex;flex-direction:column;gap:2px;min-width:0}
.c-aniv>span{display:none}
@media(max-width:940px){.contato-cab{display:none}
  .contato-cab,.contato-linha{grid-template-columns:1fr 1fr}
  .c-aniv>span{display:block;font-size:9.5px;color:var(--gray);font-weight:600;
    text-transform:uppercase;letter-spacing:.05em}}
/* chips de ação inline (c36/UX — fim do 💬 e dos links crus de copiar):
   botão pequeno e elegante ao lado do dado, com ícone de traço */
.chip-acao{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;margin-left:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.03);
  color:var(--ink2);font-family:inherit;line-height:inherit;   /* <button> não herda (rev. c37/#1) */
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;cursor:pointer;white-space:nowrap;
  vertical-align:middle;transition:border-color .15s,background .15s,color .15s}
.chip-acao .ico-t{width:12px;height:12px;vertical-align:0}
.chip-acao:hover{border-color:var(--teal);background:rgba(99,102,241,.08);color:var(--ink)}
.chip-wa{color:#4ADE80;border-color:rgba(37,211,102,.3)}
.chip-wa:hover{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.55);color:#86EFAC}
/* c41: grade de chips (itens relacionados do catálogo — sem margin-left herdado) */
.chips-linha{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips-linha .chip-acao{margin-left:0}

/* c81: indicador discreto da filtragem automática (form[data-filtro-auto]) */
.filtro-ind{margin-left:8px;font-size:.85em}

/* ===== Ajuda e manual (c136) — chip contextual + página do manual ===== */
.chip-ajuda{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);background:var(--card2);
  color:var(--gray);font-size:13px;font-weight:800;text-decoration:none;vertical-align:middle;
  margin-left:8px;line-height:1;transform:translateY(-2px)}
.chip-ajuda:hover{border-color:var(--teal);color:var(--teal);background:rgba(129,140,248,.10)}
.chip-ajuda.demo{transform:none;margin-left:2px;cursor:default}
.manual{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start;max-width:1080px}
.manual-indice{position:sticky;top:14px;background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.manual-indice b{color:var(--ink);margin-bottom:6px}
.manual-indice a{color:var(--ink2);text-decoration:none;font-size:13px;padding:3px 6px;border-radius:6px}
.manual-indice a:hover{color:var(--teal);background:rgba(129,140,248,.08)}
.manual-corpo{min-width:0}
.manual-corpo section{background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:16px 20px;margin-bottom:16px;
  /* a topbar é sticky (~56px): sem esta folga a âncora parava ATRÁS dela (feedback 10/08) */
  scroll-margin-top:76px}
.manual-corpo section:target{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal-deep)}
.manual-corpo h2{margin:0 0 10px;font-size:19px}
.manual-corpo h2 small{color:var(--gray);font-weight:400;font-size:13px}
.manual-corpo h3{margin:14px 0 6px;font-size:15px;color:var(--ink2)}
.manual-corpo p{line-height:1.55;margin:8px 0}
.passos{margin:8px 0 8px 4px;padding-left:20px;line-height:1.65}
.passos li{margin:4px 0}
.passos li::marker{color:var(--teal);font-weight:700}
.tab-campos{width:100%;border-collapse:collapse;margin:8px 0;font-size:13.5px}
.tab-campos th{width:220px;text-align:left;vertical-align:top;color:var(--ink);
  padding:7px 12px 7px 0;font-weight:600}
.tab-campos td{padding:7px 0;color:var(--ink2);line-height:1.5}
.tab-campos tr+tr th,.tab-campos tr+tr td{border-top:1px solid rgba(255,255,255,.07)}
.dica{border-left:3px solid var(--teal);background:rgba(129,140,248,.07);
  padding:9px 13px;border-radius:0 8px 8px 0;margin:10px 0;line-height:1.5;color:var(--ink2)}
.manual code,.manual kbd{background:var(--card2);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;padding:1px 6px;font-size:12.5px}
.badge-abc{display:inline-block;min-width:18px;text-align:center;border-radius:5px;
  padding:1px 4px;font-size:11.5px;font-weight:800;background:rgba(52,211,153,.15);
  color:#34D399;border:1px solid rgba(52,211,153,.4)}
@media(max-width:940px){.manual{grid-template-columns:1fr}.manual-indice{position:static}}

/* Balão de ajuda na própria tela (feedback 10/08): o chip abre um popover local,
   nunca navega. <details> CSS-only; clicar fora fecha via erp.js. */
.ajuda-balao{display:inline-block;position:relative;vertical-align:middle}
.ajuda-balao summary{list-style:none;cursor:pointer}
.ajuda-balao summary::-webkit-details-marker{display:none}
.ajuda-balao[open] .chip-ajuda{border-color:var(--teal);color:var(--teal);
  background:rgba(129,140,248,.12)}
.ajuda-pop{position:absolute;left:-8px;top:30px;z-index:40;width:min(380px,72vw);
  background:var(--card2);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  box-shadow:var(--shadow-lift);padding:12px 14px;
  font-size:13px;font-weight:400;line-height:1.5;color:var(--ink2);text-align:left;
  letter-spacing:normal;white-space:normal}
.ajuda-pop::before{content:"";position:absolute;top:-6px;left:14px;width:10px;height:10px;
  background:var(--card2);border-left:1px solid rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16);transform:rotate(45deg)}
.ajuda-pop b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.ajuda-pop ul{margin:0 0 8px;padding-left:17px}
.ajuda-pop li{margin:3px 0}
.ajuda-pop li::marker{color:var(--teal)}
.ajuda-mais{font-size:12px;font-weight:600}

/* Botão fixo de volta do manual (feedback 10/08) — discreto no canto, some no mobile */
.manual-voltar-fixo{position:fixed;right:26px;bottom:26px;z-index:35;
  background:var(--card2);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--ink2);
  box-shadow:var(--shadow-lift);text-decoration:none}
.manual-voltar-fixo:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:880px){.manual-voltar-fixo{display:none}}

/* Reportar erro (c137): formulário compacto herda o visual do balão de ajuda. Desde
   o PC-21 (c150) o gatilho é o ícone ⚑ da topbar (posição: bloco .topbar .relato-pop). */
.relato-balao{display:block}
.relato-pop{left:8px;top:auto;bottom:calc(100% + 10px);width:min(340px,80vw)}
.relato-pop::before{top:auto;bottom:-6px;border:0;border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16)}
.relato-form textarea,.relato-pop textarea{width:100%;box-sizing:border-box;resize:vertical;
  background:var(--card);color:var(--ink);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;margin:4px 0 6px}
.relato-pop .muted{font-size:11.5px;margin:0 0 8px}
.relato-aviso{color:#fca5a5;font-size:12px;margin:6px 0 0}
.relato-form{margin:10px 0 4px;text-align:left}
.relato-logs{margin-top:4px}
.relato-logs summary{cursor:pointer;font-size:12px}
.relato-logs pre{max-height:180px;overflow:auto;font-size:11px;background:var(--card);
  border:1px solid rgba(255,255,255,.10);border-radius:8px;padding:8px;white-space:pre-wrap}

/* Guia objetivo (c144): quadro "regras de ouro" no topo do manual */
.manual-regras{margin-bottom:18px}
.manual-regras ul{margin:8px 0 0;padding-left:18px}
.manual-regras li{margin:4px 0}

/* RLS na tela de administração (retro c145): controle de trava por vendedor em bloco
   próprio — divisória e rótulo p/ não encavalar com os toggles de perfil/emergência. */
.rls-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;
  padding-top:7px;border-top:1px dashed rgba(255,255,255,.10)}
.rls-rotulo{font-size:11.5px;color:var(--gray)}
.rls-form{display:inline-flex;gap:4px;align-items:center}
.rls-form input[type=text]{width:3.2em;text-align:center}