/* ============================================================================
   OnBuyBox — folha de estilo do sistema
   Criada em 11/09/2026, tirando as 807 linhas de dentro do index.html.
   Cópia literal do que já existia: nada foi reescrito nesta passagem.

   A PARTIR DAQUI: cor, tamanho e espaçamento saem DAQUI, não escritos à mão
   dentro da regra. Toda tela nova usa estas variáveis. Foi cor solta em 800
   linhas que deixou o sistema impossível de "deixar bonito".
   ========================================================================= */

:root{
  color-scheme:light;

  /* ---- marca ---- */
  --azul:#26215c;        /* logo, cabeçalho */
  --azul2:#312e81;       /* item de menu ativo */

  /* ---- fundo e traço ---- */
  --bg:#f4f5f9;          /* fundo da página */
  --branco:#fff;         /* fundo de cartão e tabela */
  --linha:#e8e9f1;       /* divisória forte (borda de cartão, cabeçalho) */
  --linha2:#f2f3f8;      /* divisória fraca (entre linhas da tabela) */
  --hover:#fafbfe;       /* linha da tabela sob o mouse */

  /* ---- texto, do mais forte ao mais fraco ---- */
  --tinta:#1a1a2e;       /* texto principal */
  --mut:#6b7280;         /* secundário: rótulo, explicação */
  --fraco:#94a3b8;       /* terciário: unidade, data, rodapé */

  /* ---- ação ---- */
  --acao:#2563eb;        /* botão e link */
  --acao-escuro:#1d4ed8;
  --acao-claro:#eff6ff;

  /* ---- significado ---- */
  --bom:#16a34a;   --bom-claro:#f0fdf4;
  --ruim:#dc2626;  --ruim-claro:#fef2f2;
  --aviso:#d97706; --aviso-claro:#fffbeb;

  /* ---- medidas ---- */
  --r-card:14px;  --r-btn:9px;  --r-campo:8px;
  --t-base:14px;  --t-tabela:13px;  --t-rotulo:12px;  --t-mini:11px;
}

/* ==== daqui para baixo: o CSS como estava no index.html ==== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:#1a1a2e; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button{ cursor:pointer; font-family:inherit; }
.hidden{ display:none !important; }


/* ---------- Financeiro ---------- */
.fintag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.4px; padding:2px 6px; border-radius:5px; vertical-align:middle; margin-left:6px; }
.fintag.exato{ background:#e7f6ed; color:#15803d; }
.fintag.calc{ background:#eef1fe; color:#3730a3; }
.fintag.estim{ background:#fdf7e8; color:#b45309; }
.finlegenda{ font-size:12px; color:var(--mut); margin:-8px 0 20px; }
.finlegenda b{ color:#1a1a2e; }

.finsec{ margin-bottom:26px; }
.finsec h3{ font-size:16px; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.finsec h3 i{ color:#4f46e5; font-size:19px; }
.finsec .sub{ font-size:12.5px; color:var(--mut); margin:0 0 14px; }

.segbtns{ display:inline-flex; background:#eef0f5; border-radius:9px; padding:3px; gap:2px; }
.segbtns button{ border:0; background:transparent; padding:6px 13px; border-radius:7px; font-size:12.5px; color:var(--mut); font-weight:500; }
.segbtns button.on{ background:#fff; color:#1a1a2e; box-shadow:0 1px 3px rgba(0,0,0,.08); font-weight:600; }
.finmeswrap{ display:inline-flex; align-items:center; gap:5px; background:#eef0f5; border-radius:9px; padding:5px 10px; font-size:12.5px; color:var(--mut); }
.finmeswrap i{ font-size:15px; }
.finmes{ border:0; background:transparent; font-size:12.5px; color:#1a1a2e; font-weight:600; cursor:pointer; outline:none; }
.vermais{ border:0; background:#eef0f5; color:#4a4a68; padding:5px 12px; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer; margin:2px 0; }
.vermais:hover{ background:#e2e5ee; }
.tagbtn{ border:1px solid #d4d7e0; background:#fff; color:#6a6a80; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:600; cursor:pointer; margin-left:8px; white-space:nowrap; }
.tagbtn:hover{ background:#f0f1f6; color:#1a1a2e; }
.finmorerow td{ padding-top:6px; padding-bottom:6px; }
.finsplit{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:760px){ .finsplit{ grid-template-columns:1fr; gap:14px; } }

.barlist{ display:flex; flex-direction:column; gap:9px; }
.barrow{ display:grid; grid-template-columns:110px 1fr 120px; align-items:center; gap:12px; font-size:13px; }
.barrow .dia{ color:var(--mut); font-size:12.5px; }
.barrow .bar{ background:#eef0f5; border-radius:6px; height:22px; overflow:hidden; }
.barrow .bar span{ display:block; height:100%; background:linear-gradient(90deg,#4f46e5,#7c3aed); border-radius:6px; }
.barrow .vl{ text-align:right; font-weight:600; }
.barrow.hoje .dia{ color:#15803d; font-weight:700; }
.barrow.hoje .bar span{ background:linear-gradient(90deg,#16a34a,#22c55e); }

.finaviso{ background:#fdf7e8; border:1px solid #f5e2b8; border-radius:11px; padding:12px 14px; font-size:12.5px; color:#7c5a12; margin-bottom:14px; }
.finaviso b{ color:#5c440e; }
.finok{ background:#eafaf1; border:1px solid #c9ecd8; border-radius:11px; padding:12px 14px; font-size:12.5px; color:#166534; margin-bottom:14px; }

.skubox{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.skubox input{ flex:1; min-width:240px; padding:11px 14px; border:1px solid var(--linha); border-radius:10px; font-size:14px; }
.skures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.skulista{ max-height:190px; overflow:auto; border:1px solid var(--linha); border-radius:10px; }
.skulista div{ padding:9px 13px; font-size:13px; cursor:pointer; border-bottom:1px solid #f2f3f7; }
.skulista div:hover{ background:#f7f8fc; }
.skulista div:last-child{ border-bottom:0; }
.skulista .sk{ color:var(--mut); font-size:11.5px; }

.finneg{ color:#b91c1c; } .finpos{ color:#15803d; }
@media(max-width:820px){
  .barrow{ grid-template-columns:82px 1fr 96px; gap:8px; font-size:12px; }
  .barrow .vl{ font-size:12px; }
}

/* ---------- login ---------- */
#login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.loginbox{ background:#fff; border:1px solid var(--linha); border-radius:18px; padding:34px 30px; width:100%; max-width:370px; box-shadow:0 8px 30px rgba(16,24,40,.07); text-align:center; }
.logo{ width:46px;height:46px;border-radius:12px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin:0 auto; }
.brandlogo{ display:block; height:54px; width:auto; margin:0 auto; }
.brandlogo.sm{ height:38px; width:auto; display:block; }
.loginbox h1{ font-size:20px; margin:16px 0 2px; }
.loginbox p.sub{ color:var(--mut); font-size:13px; margin:0 0 24px; }
input{ width:100%; height:42px; border:1px solid #d7d9e3; border-radius:10px; padding:0 13px; font-size:14px; margin-bottom:11px; font-family:inherit; }
input[type=checkbox]{ width:16px; height:16px; margin:0; padding:0; border-radius:4px; accent-color:#2563eb; cursor:pointer; vertical-align:middle; flex:none; }
input[type=radio]{ width:16px; height:16px; min-width:16px; margin:0; padding:0; accent-color:#2563eb; cursor:pointer; vertical-align:middle; flex:none; }
input:focus{ outline:none; border-color:var(--azul2); box-shadow:0 0 0 3px rgba(49,46,129,.12); }
.btn{ width:100%; height:42px; background:var(--azul); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; }
.btn:hover{ background:var(--azul2); }
/* botão pequeno (Aplicar/Limpar/Ao vivo) — não herda o width:100% do login */
.btn.sm{ width:auto; height:36px; padding:0 16px; font-size:13px; border-radius:9px; font-family:inherit; cursor:pointer; }
.btn.ghost{ background:#eef0f5; color:#334155; }
.btn.ghost:hover{ background:#e2e5ee; }
.nstbtn{ background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; border-radius:8px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.nstbtn.on{ background:var(--azul); color:#fff; border-color:var(--azul); }
.erro{ color:#b91c1c; font-size:13px; margin:8px 0 0; min-height:16px; }
.mfawrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.mfaicon{ width:52px;height:52px;border-radius:14px;background:#eef1fe;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 4px; }
.mfawrap h1{ font-size:19px; margin:14px 0 4px; }
.mfaqr{ margin:16px auto 8px; display:flex; align-items:center; justify-content:center; min-height:200px; }
.mfaqr img, .mfaqr svg{ width:200px; height:200px; border:1px solid var(--linha); border-radius:12px; background:#fff; padding:8px; display:block; }
.mfasecret{ font-size:12px; color:var(--mut); margin:0 0 16px; text-align:center; line-height:1.8; }
.secretcode{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:#1a1a2e; background:#f1f2f8; padding:3px 8px; border-radius:6px; word-break:break-all; user-select:all; }
.copiar{ background:none; border:1px solid #d7d9e3; border-radius:7px; color:var(--azul); font-size:12px; padding:4px 9px; cursor:pointer; white-space:nowrap; }
.copiar:hover{ background:#f4f4fb; }
#mfaEnrollCode, #mfaCodeInput{ text-align:center; letter-spacing:8px; font-size:20px; font-weight:600; }
#mfaEnrollCode::placeholder, #mfaCodeInput::placeholder{ letter-spacing:2px; font-weight:400; font-size:15px; }

/* ---------- app ---------- */
.top{ background:#fff; border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:20; }
.topin{ display:flex; align-items:center; gap:12px; padding:11px 22px; }
.top .logo{ width:30px;height:30px;border-radius:8px;font-size:12px; }
.brand{ font-weight:600; font-size:16px; }
.spacer{ flex:1; }
/* [16/09/2026] busca global no topo */
.gbSpacer{ position:relative; display:flex; justify-content:center; min-width:0; }
.gbCampo{ display:flex; align-items:center; gap:8px; width:100%; max-width:560px; height:38px; padding:0 10px 0 12px; border:1px solid #d7d9e3; border-radius:10px; background:#fff; color:var(--mut); }
.gbCampo:focus-within{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.gbCampo i{ font-size:17px; }
.gbCampo input, .gbCampo input:focus{ flex:1; min-width:0; height:34px; margin:0; padding:0; border:none; outline:none; box-shadow:none; background:transparent; font:inherit; font-size:14px; color:var(--tinta); }
.gbCampo input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.gbCampo kbd{ font:inherit; font-size:11px; color:var(--mut); border:1px solid #e2e8f0; border-radius:6px; padding:1px 6px; background:#f8fafc; }
.gbBox{ position:absolute; top:44px; left:50%; transform:translateX(-50%); width:min(720px, 96vw); max-height:min(70vh, 640px); overflow:auto; background:#fff; border:1px solid var(--linha); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.14); z-index:40; padding:6px; text-align:left; }
.gbGrp{ padding:4px 0 6px; }
.gbGrp + .gbGrp{ border-top:1px solid #eef0f4; }
.gbGt{ font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--mut); padding:6px 10px 2px; }
.gbIt{ padding:7px 10px; border-radius:8px; cursor:pointer; }
.gbIt:hover, .gbIt.on{ background:#f4f4fb; }
.gbL{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; color:var(--tinta); }
.gbL b{ font-weight:600; }
.gbS{ font-size:12px; color:var(--mut); }
.gbS code{ font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.gbIt mark{ background:#fef3c7; color:inherit; padding:0 1px; border-radius:2px; }
.gbAbas{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.gbAba{ font:inherit; font-size:11.5px; padding:2px 8px; border:1px solid #d7d9e3; border-radius:999px; background:#fff; color:var(--tinta); cursor:pointer; }
.gbAba:hover{ border-color:var(--azul); color:var(--azul); }
.gbVazio{ padding:14px 12px; font-size:13px; color:var(--mut); }
.topsel{ display:contents; }
.selwrap{ display:flex; align-items:center; gap:7px; border:1px solid #d7d9e3; border-radius:10px; padding:0 6px 0 11px; height:38px; color:var(--mut); background:#fff; }
.selwrap i{ font-size:17px; }
select{ height:36px; border:none; background:transparent; font-size:14px; color:#1a1a2e; font-family:inherit; padding-right:2px; }
select:focus{ outline:none; }
.avatar{ width:34px;height:34px;border-radius:50%;background:#e0e7ff;color:#3730a3;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600; }
.linkbtn{ background:none; border:none; color:var(--mut); font-size:13.5px; padding:6px 4px; }
.linkbtn:hover{ color:#1a1a2e; }

.body{ display:flex; align-items:flex-start; }
/* [BUG 11/09/2026 — z-index:56] `position:sticky` PRENDE o empilhamento dos
   filhos: tudo que está dentro da .side é desenhado como um bloco só, na
   posição da própria .side. Sem z-index aqui, esse bloco ficava ABAIXO do
   conteúdo da página e abaixo do véu que fecha o menu — resultado: o painel
   aparecia por baixo da tabela e NENHUM clique no menu funcionava.
   A ordem correta é: conteúdo (sem z-index) < .flyback (54) < .side (56). */
.side{ width:238px; background:#fff; border-right:1px solid var(--linha); position:sticky; top:53px; z-index:56; height:calc(100vh - 53px); display:flex; flex-direction:column; gap:2px; padding:16px 12px; overflow-y:auto; flex-shrink:0; }
.navsec{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#9aa0ad; font-weight:600; margin:16px 10px 6px; }
.navsec:first-child{ margin-top:2px; }
.navitem{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:#4b5563; font-size:14px; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.navitem i{ font-size:19px; color:#9aa0ad; width:20px; text-align:center; }
.navitem:hover{ background:#f4f4fb; }
.navitem.on{ background:#efeefe; color:var(--azul2); font-weight:500; }
.navitem.on i{ color:var(--azul2); }
.navitem em{ margin-left:auto; font-style:normal; font-size:10px; color:#a9adba; background:#f1f2f8; padding:2px 7px; border-radius:20px; }

/* ===== Menu com submenu que abre [11/09/2026] =====
   Antes: as 22 telas ficavam empilhadas na barra, todas visíveis. Agora a barra
   tem 7 entradas e o resto abre num painel ao lado.
   O painel é `fixed` de propósito: a .side tem overflow-y:auto e cortaria um
   filho absoluto. Fixo, ele nunca é cortado e não depende da rolagem da barra.
   IMPORTANTE: os botões de tela continuam sendo .navitem DENTRO da .side —
   `telasDoMenu()` e `mostrarView()` varrem por '.side .navitem', então mexer
   nisso quebraria a permissão de usuário e o realce da tela atual. */
.navtop{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:#4b5563; font-size:14px; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.navtop i:first-child{ font-size:19px; color:#9aa0ad; width:20px; text-align:center; }
/* [11/09/2026] A seta NÃO gira. Ela girava 90° ao abrir e virava seta para
   baixo — o Chefe leu como bug, e com razão: seta para baixo promete lista
   que desce, e o que abre é um painel ao lado. Aponta sempre para a direita. */
.navtop .seta{ margin-left:auto; font-size:15px; color:#c3c7d2; }
.navtop:hover{ background:#f4f4fb; }
.navgrp.aberto>.navtop{ background:#efeefe; color:var(--azul2); }
.navgrp.aberto>.navtop i:first-child{ color:var(--azul2); }
.navgrp.aberto>.navtop .seta{ color:var(--azul2); }
/* a seção que contém a tela aberta fica marcada mesmo com o painel fechado */
.navgrp.temAtiva>.navtop{ color:var(--azul2); font-weight:500; }
.navgrp.temAtiva>.navtop i:first-child{ color:var(--azul2); }

/* z-index 1 e não 55: já estamos DENTRO do empilhamento da .side (que vale 56),
   então basta ficar acima dos irmãos. Número alto aqui não subiria nada. */
.navfly{ display:none; position:fixed; left:238px; top:53px; bottom:0; width:266px; z-index:1;
  background:#fff; border-right:1px solid var(--linha); box-shadow:6px 0 24px rgba(20,24,54,.07);
  padding:16px 12px; overflow-y:auto; }
.navgrp.aberto .navfly{ display:block; }
.flyhead{ font-size:13px; font-weight:600; color:#1a1a2e; margin:2px 10px 12px; }
/* No desktop o painel fecha clicando fora ou no Esc; no celular ele cobre a
   gaveta inteira, então precisa de um Voltar visível. */
.flyvolta{ display:none; align-items:center; gap:8px; width:100%; padding:7px 10px; margin-bottom:6px;
  border:none; background:none; font-family:inherit; font-size:13px; color:#64748b; cursor:pointer; border-radius:8px; }
.flyvolta:hover{ background:#f4f4fb; }
.navfly .navitem{ font-size:13.5px; padding:8px 11px; }
.navfly .navitem i{ font-size:17px; }
/* véu que fecha o painel ao clicar em qualquer lugar fora dele */
.flyback{ display:none; position:fixed; inset:53px 0 0 0; z-index:54; }
.flyback.on{ display:block; }

.main{ flex:1; min-width:0; padding:22px 32px 60px; }
.periodo{ color:var(--mut); font-size:13.5px; margin:0 0 18px; display:flex; align-items:center; gap:6px; }
.customrange{ display:flex; align-items:center; gap:8px; margin:0 0 16px; font-size:13px; color:var(--mut); flex-wrap:wrap; }
.customrange input[type=date]{ height:36px; width:auto; margin:0; border:1px solid #d7d9e3; border-radius:8px; padding:0 10px; font-size:13px; }
.customrange button{ height:36px; padding:0 16px; background:var(--azul); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:500; }
.customrange button:hover{ background:var(--azul2); }
/* minmax(0,1fr) e não 1fr: com "1fr" puro a coluna tem min-width:auto, então um
   cartão com texto largo (R$ 5.537.422, "Deixando de faturar") empurra a própria
   coluna e rouba espaço das outras. Era isso que deixava os cartões desiguais. */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.kpi{ background:#fff; border:1px solid #e8ecf3; border-radius:14px; padding:14px 16px; }
.kpi .lbl{ font-size:11.5px; color:#64748b; font-weight:700; display:flex; align-items:center; gap:6px; }
.kpi .lbl i{ display:none; }
.kpi .val{ font-size:20px; font-weight:800; margin-top:5px; letter-spacing:-.3px; color:#1a1a2e; }
.kpi .pct{ font-size:11px; margin-top:2px; color:#94a3b8; }
/* variação: só a COR do valor muda — fundo/borda ficam limpos e iguais em todas */
.kpi.accent .val{ color:#4f46e5; }
.kpi.c-roxo .val{ color:#7c3aed; }
.kpi.c-verm .val{ color:#dc2626; }
.kpi.c-amar .val{ color:#d97706; }
.kpi.c-verde .val{ color:#16a34a; }
.adsfaixas{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(180,120,20,.22); font-size:12.5px; color:#8a5a12; display:flex; flex-direction:column; gap:4px; }
.adsfaixas strong{ font-weight:600; }
.adsfaixas.aberto{ max-height:230px; overflow-y:auto; padding-right:4px; }
.fx-org{ color:#b08a55; }
.fxmais{ background:none; border:none; color:#8a5a12; font-size:12px; padding:4px 0 0; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-weight:500; }
.fxmais:hover{ text-decoration:underline; }
.fxmais i{ font-size:14px; }
.kpis2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 24px; }
.kpi2{ background:#fff; border:1px solid #e8ecf3; border-radius:14px; padding:14px 16px; min-width:0; }
.kpi2 .l{ font-size:11.5px; color:#64748b; font-weight:700; display:flex; align-items:center; gap:6px; }
.kpi2 .l i{ display:none; }
.kpi2 .v{ font-size:20px; font-weight:800; margin-top:5px; color:#1a1a2e; }
.kpi2 .s{ font-size:11px; color:#94a3b8; margin-top:2px; }
/* topo: 3 cards na 1ª linha (Vendas + Sobrou + Faturamento).
   [08/09/2026] Eram 1.3fr / 1fr / 1.05fr — larguras desiguais na mão, que
   deixavam o topo torto. Agora os três têm exatamente a mesma largura.
   minmax(0,...) impede que o cartão de texto mais largo empurre os vizinhos. */
#kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:20px; align-items:stretch; }
/* [08/09/2026] O topo de cada cartão tem altura diferente (um tem barra, outro
   tem a barra da meta, outro não tem nada), então as três listas começavam em
   alturas diferentes e o conjunto ficava torto. Reservando a mesma altura para
   o topo dos três, as listas arrancam na mesma linha. Só no desktop: abaixo de
   900px os cartões viram uma coluna só e o alinhamento perde o sentido. */
@media(min-width:901px){ #kpis .kpiTopo{ min-height:96px; } }

/* ===== Gráficos diários (08/09/2026) =====
   Um embaixo de cada cartão, na MESMA grade — por isso repetem exatamente o
   grid-template-columns do #kpis. Barras em CSS puro, sem biblioteca nova:
   para 30 barras simples uma <div> com altura em % resolve, e continua sendo
   um arquivo só, sem CDN pra cair. */
#kpisGraf{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:24px; }
@media(max-width:900px){ #kpisGraf{ grid-template-columns:1fr; } }
#kpisGraf .kpi{ padding:12px 16px; }
.grafHead{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.grafHead .lbl{ font-size:11.5px; color:#64748b; font-weight:700; }
.grafHead .per{ font-size:11px; color:#94a3b8; }
.grafVal{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.grafVal b{ font-size:17px; font-weight:800; color:#1a1a2e; letter-spacing:-.2px; }
.grafVal span{ font-size:11.5px; color:#94a3b8; }
.grafBarras{ display:flex; align-items:flex-end; gap:2px; height:44px; margin:10px 0 5px; }
.grafBarras > i{ flex:1; min-width:0; display:block; border-radius:2px 2px 0 0; }
/* dia sem foto do histórico: risquinho listrado em vez de barra zero, que
   mentiria dizendo "nenhum anúncio ativo" */
.grafBarras > i.semdado{ height:3px !important; background:repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 2px,transparent 2px,transparent 4px) !important; }
.grafPe{ display:flex; justify-content:space-between; font-size:10.5px; color:#94a3b8; }
.vendasCard .vcHead, .metaCard .vcHead{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.vendasCard .vcAnun{ font-size:12px; color:#94a3b8; }
.vcSub{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 14px; margin-top:12px; padding-top:10px; border-top:1px solid #eef0f6; }
.metaCard .vcSub{ grid-template-columns:repeat(3,1fr); }
/* tela Vendas: 3 cards agrupados (igual Início) */
#vendasKpis{ grid-template-columns:1.5fr 0.9fr 1.2fr; align-items:stretch; }
#vendasKpis2:empty{ display:none; }
@media(max-width:900px){ #vendasKpis{ grid-template-columns:1fr; } }
.vcl{ font-size:12px; color:#64748b; white-space:nowrap; }
.vcv{ font-size:15px; font-weight:700; color:#1a1a2e; margin-top:1px; white-space:nowrap; }
/* demais telas: cards agrupados no mesmo padrão do Início/Vendas */
#repKpis, #pedKpis, #devolKpis, #nfKpis, #cpKpis, #perdasKpis, #finSaqTotais, #finSkuKpis{ display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; }
#finKpis{ grid-template-columns:1.5fr 0.9fr; align-items:stretch; }
#finKpis2:empty, #devolKpis:empty{ display:none; }
#repKpis .vcSub{ grid-template-columns:repeat(5,1fr); }
#perdasKpis .vcSub, #nfKpis .vcSub, #cpKpis .vcSub, #finKpis .vcSub{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){
  #finKpis{ grid-template-columns:1fr; }
  #repKpis .vcSub, #perdasKpis .vcSub, #nfKpis .vcSub, #cpKpis .vcSub, #finKpis .vcSub{ grid-template-columns:repeat(2,1fr); }
}
/* Oportunidades [25/09/2026]: os três cartões lado a lado, no mesmo desenho do Início
   (Chefe: "esses cards da tela oportunidades faz igual da tela de início") — mesma grade
   de 3 colunas iguais, mesmo topo com altura reservada para as listas arrancarem alinhadas. */
#oportKpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; align-items:stretch; }
@media(min-width:901px){ #oportKpis .kpiTopo{ min-height:96px; } }
@media(max-width:900px){ #oportKpis{ grid-template-columns:1fr; } }
/* card da Meta na 1ª linha */
.metaCard .val{ margin-top:6px; }
.metaCard .metabar{ margin:10px 0 6px; }
.metaCard .metatxt2{ font-size:12px; color:var(--mut); display:flex; align-items:center; gap:8px; justify-content:space-between; }
.metaCard .metatxt2 .up{ color:#047857; font-weight:600; } .metaCard .metatxt2 .down{ color:#b91c1c; font-weight:600; }
.metaCard .metaselo{ margin-top:0; }
/* multi-seletor de marcas/fornecedores */
.msBox{ border:1px solid #d7d9e3; border-radius:8px; padding:6px 8px; }
.msChips{ display:flex; flex-wrap:wrap; gap:5px; }
.msChips:not(:empty){ margin-bottom:5px; }
.msChip{ display:inline-flex; align-items:center; gap:6px; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.msChip .msX{ cursor:pointer; color:#64748b; font-weight:800; font-size:14px; line-height:1; }
.msSearch{ width:100%; border:none; outline:none; font-family:inherit; font-size:13px; padding:3px 2px; box-sizing:border-box; background:transparent; }
.msList{ max-height:160px; overflow:auto; border-top:1px solid #eef0f6; margin-top:4px; padding-top:4px; }
.msOpt{ padding:5px 7px; font-size:13px; cursor:pointer; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msOpt:hover{ background:#f1f5f9; }
.msOpt.on{ background:#eff6ff; color:#1d4ed8; font-weight:600; }
/* Usuários › Telas permitidas [25/09/2026]: lista de caixinhas agrupada como o menu (Chefe: "toda vez que
   entra uma nova tela, precisa aparecer para eu poder liberar… as subtelas também") */
.usrTelas{ border:1px solid #d7d9e3; border-radius:8px; padding:6px 10px 8px; max-height:60vh; overflow:auto; }
.usrGrp{ padding:5px 0 6px; border-bottom:1px solid #eef0f6; }
.usrGrp:last-of-type{ border-bottom:none; }
.usrGrpHead{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; padding:3px 0; }
.usrGrpItens{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 12px; padding-left:24px; margin-top:2px; }
.usrTela{ display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; padding:3px 0; min-width:0; }
.usrTela > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usrGrpSolto .usrTela{ font-size:13px; font-weight:600; }
@media(max-width:480px){ .usrGrpItens{ grid-template-columns:1fr; } }
.msOpt.hide{ display:none; }
@media(max-width:900px){ #kpis{ grid-template-columns:1fr; } }
.prevhead{ font-size:14px; font-weight:600; margin:6px 0 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prevhead i{ font-size:18px; color:var(--azul2); }
.previnfo{ font-size:11.5px; font-weight:400; color:var(--mut); background:#f1f2f8; padding:3px 9px; border-radius:20px; }
.kpi.warn{ background:#fff; border:1px solid #e8ecf3; }
.kpi.warn .lbl{ color:#64748b; } .kpi.warn .val{ color:#c2410c; } .kpi.warn .pct{ color:#94a3b8; }
.prevgrid{ grid-template-columns:1fr; }
.prevhero{ display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap; }
.prevhero .phLeft{ flex:1; min-width:260px; }
.prevhero .phTop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.prevhero .phTop .metaselo{ margin-top:0; }
.prevhero .phLbl{ font-size:12px; font-weight:600; color:var(--mut); white-space:nowrap; }
.prevhero .phBig{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.prevhero .phBig .val{ font-size:26px; white-space:nowrap; margin:0; }
.prevhero .phResumo{ font-size:12px; color:var(--mut); }
.prevhero .phResumo .up{ color:#047857; font-weight:600; } .prevhero .phResumo .down{ color:#b91c1c; font-weight:600; }
.prevhero .phEditWrap{ margin-left:auto; }
.prevhero .metabar{ margin-top:8px; }
.prevhero .phRight{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.prevhero .phMetric .phl{ font-size:11px; color:var(--mut); margin-bottom:2px; white-space:nowrap; }
.prevhero .phMetric .phv{ font-size:18px; font-weight:800; letter-spacing:-.3px; white-space:nowrap; }
.prevhero .phMetric .phs{ font-size:11px; color:#94a3b8; margin-top:1px; white-space:nowrap; }
.metaline{ margin-top:14px; }
.metabar{ height:7px; background:#eef0f6; border-radius:6px; overflow:hidden; }
.metabar > i{ display:block; height:100%; background:#4f46e5; border-radius:6px; }
.metatxt{ font-size:12px; color:var(--mut); margin-top:6px; display:flex; align-items:center; gap:8px; justify-content:space-between; }
.metaedit{ background:none; border:none; color:#4f46e5; font-size:12px; cursor:pointer; padding:0; font-family:inherit; }
.metaedit:hover{ text-decoration:underline; }
/* --- meta batida: destaque comemorativo --- */
.kpi.metabatida{ background:linear-gradient(150deg,#fffbeb 0%,#fff 55%); border:1px solid #fcd34d; box-shadow:0 0 0 1px #fde68a inset, 0 8px 26px rgba(217,119,6,.14); position:relative; overflow:hidden; }
.kpi.metabatida::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-18deg); animation:metaShine 3.4s ease-in-out infinite; pointer-events:none; }
@keyframes metaShine{ 0%{ left:-60%; } 55%{ left:130%; } 100%{ left:130%; } }
.kpi.metabatida .val{ color:#b45309; }
.kpi.metabatida .metabar{ background:#fde68a; }
.kpi.metabatida .metabar > i{ background:linear-gradient(90deg,#f59e0b,#16a34a); }
.metaselo{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(90deg,#f59e0b,#d97706); box-shadow:0 4px 12px rgba(217,119,6,.35); animation:metaPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.metaselo i{ display:inline-block; animation:metaBounce 1.6s ease-in-out infinite; }
@keyframes metaPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes metaBounce{ 0%,100%{ transform:translateY(0) rotate(0); } 30%{ transform:translateY(-3px) rotate(-8deg); } 60%{ transform:translateY(-1px) rotate(6deg); } }
.cmp{ font-size:12px; color:var(--mut); margin-top:12px; padding-top:9px; border-top:1px solid var(--linha); }
.cmp .up{ color:#047857; font-weight:600; } .cmp .down{ color:#b91c1c; font-weight:600; }
/* Recomendações de Ads */
.rec{ border:1px solid var(--linha); border-left-width:4px; border-radius:10px; padding:11px 14px; margin-bottom:10px; background:#fff; }
.rec-esc{ border-left-color:#16a34a; } .rec-red{ border-left-color:#d97706; } .rec-pau{ border-left-color:#dc2626; }
.rec-orc{ border-left-color:#2563eb; } .rec-rev{ border-left-color:#64748b; } .rec-man{ border-left-color:#cbd5e1; }
.rec-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.rec-badge{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; color:#fff; white-space:nowrap; }
.rec-badge.rec-esc{ background:#16a34a; } .rec-badge.rec-red{ background:#d97706; } .rec-badge.rec-pau{ background:#dc2626; }
.rec-badge.rec-orc{ background:#2563eb; } .rec-badge.rec-rev{ background:#64748b; } .rec-badge.rec-man{ background:#94a3b8; }
.rec-nome{ font-weight:700; color:#1e293b; }
.rec-motivo{ font-size:13px; color:#475569; margin-bottom:9px; line-height:1.45; }
.rec-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--mut); }
.rec-alvo b{ color:#1e293b; } .rec-luc{ color:#16a34a; font-weight:600; }
.rec-piso{ margin-left:6px; font-size:11px; background:#fef2f2; color:#b91c1c; padding:1px 7px; border-radius:10px; }
.rec-btn{ margin-left:auto; background:#f1f5f9; border:1px solid var(--linha); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; color:#334155; cursor:not-allowed; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.rec-soon{ font-size:10px; background:#e2e8f0; padding:1px 6px; border-radius:10px; color:#64748b; }
/* ===== Cartões do Início (08/09/2026) =====
   A barra mostra para onde foi cada real da venda: custo, comissão, frete,
   publicidade e o que sobrou. Substitui as oito etiquetas soltas — dá para ler
   a proporção sem ler número nenhum, e os valores continuam logo abaixo. */
.vcNote{ font-size:11.5px; color:#94a3b8; margin:3px 0 12px; }
.fluxobar{ display:flex; height:8px; border-radius:5px; overflow:hidden; background:#eef0f6; margin-bottom:11px; }
.fluxobar > i{ display:block; height:100%; }
.fluxolist{ display:grid; grid-template-columns:1fr auto; gap:5px 12px; font-size:12.5px; align-items:center; }
.fluxolist .fl{ color:#64748b; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.fluxolist .fd{ width:7px; height:7px; border-radius:2px; flex:none; }
.fluxolist .fv{ text-align:right; font-weight:600; color:#1a1a2e; white-space:nowrap; }
/* mesma linha "rótulo à esquerda, valor à direita" dos outros dois cartões,
   para os três terem a mesma leitura. O <small> vira uma segunda linha
   discreta sob o valor (ex.: "3.160 a caminho do Full"). */
.kpilist{ display:grid; grid-template-columns:1fr auto; gap:7px 12px; font-size:12.5px; align-items:baseline; }
.kpilist .kl{ color:#64748b; white-space:nowrap; }
.kpilist .kv{ text-align:right; font-weight:600; color:#1a1a2e; white-space:nowrap; }
.kpilist .kv small{ display:block; font-weight:500; font-size:11px; color:#94a3b8; margin-top:1px; }
/* mesmo respiro antes da lista nos três cartões. Sem isso o cartão de Vendas
   começava 23px acima dos outros dois — era essa a linha torta. */
.kpilist.sep, .fluxolist.sep{ margin-top:12px; padding-top:11px; border-top:1px solid #eef0f6; }
.heroLinha{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px; }
/* o número da margem usa a MESMA classe .val dos outros dois cartões — só muda
   a cor. Antes era uma classe própria com 26px, e por isso ele aparecia maior
   que os vizinhos. Compartilhando a classe, os três nunca mais divergem, e o
   ajuste de fonte no celular já vale para os três. */
.kpi .val.verde{ color:#16a34a; }
.kpi .val.vermelho{ color:#dc2626; }
.heroPct{ font-size:14px; font-weight:700; color:#16a34a; }
.heroPct.neg{ color:#dc2626; }
/* traço do ritmo esperado na barra da meta. Fica FORA da .metabar porque ela
   tem overflow:hidden e cortaria o traço. */
.metawrap{ position:relative; margin:10px 0 6px; }
.metawrap .metabar{ margin:0; }
.metawrap .ritmo{ position:absolute; top:-3px; width:2px; height:13px; background:#94a3b8; border-radius:1px; }
.alrt{ font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:3px; margin-left:4px; white-space:nowrap; }
.alrt-red{ background:#fef2f2; color:#b91c1c; } .alrt-amb{ background:#fffbeb; color:#b45309; }
.mmid{ color:#64748b; }
.org{ color:#2563eb; }
.selo{ font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:10px; display:inline-flex; align-items:center; gap:4px; margin-left:6px; white-space:nowrap; }
.selo-esc{ background:#dcfce7; color:#15803d; } .selo-seg{ background:#fef3c7; color:#b45309; } .selo-rev{ background:#fee2e2; color:#b91c1c; }
.mercmodal{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:200; }
.mercbox{ background:#fff; border-radius:16px; padding:24px 26px; max-width:920px; width:92%; max-height:82vh; overflow:auto; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.mercclose{ position:absolute; top:14px; right:16px; border:none; background:none; font-size:13px; cursor:pointer; color:var(--mut); }
.verof{ background:none; border:none; color:#2563eb; cursor:pointer; font-weight:600; font-size:13px; padding:0; }
.verof:hover{ text-decoration:underline; }
.logtag{ font-size:10px; color:#64748b; background:#f1f5f9; padding:1px 6px; border-radius:8px; margin-left:5px; white-space:nowrap; }
.catacts{ display:block; margin-top:3px; font-size:11.5px; color:var(--mut); }
.catacts a, .catacts button{ color:#2563eb; background:none; border:none; cursor:pointer; padding:0; font-size:11.5px; }
.catacts a:hover, .catacts button:hover{ text-decoration:underline; }
.catacts .catexcluir{ color:#b91c1c; } .catacts .catnovo{ color:#15803d; }
.eantag{ color:#334155; font-weight:600; }
.custoinp, .freteinp, .merccustoinp, .mercfreteinp{ width:82px; padding:4px 6px; border:1px solid var(--linha); border-radius:6px; font-size:13px; text-align:right; }
.custoinp:focus, .freteinp:focus, .merccustoinp:focus, .mercfreteinp:focus{ border-color:#2563eb; outline:none; }
.eaninp, .merceaninp{ width:120px; padding:2px 5px; border:1px solid var(--linha); border-radius:5px; font-size:11px; }
.eaninp:focus, .merceaninp:focus{ border-color:#2563eb; outline:none; }
.oportdel{ background:none; border:none; color:#b91c1c; cursor:pointer; font-size:14px; opacity:.45; }
.oportdel:hover{ opacity:1; }
.mercbox a{ color:#2563eb; text-decoration:none; } .mercbox a:hover{ text-decoration:underline; }
.btnanalise{ background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; border:none; padding:8px 16px; border-radius:9px; font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(79,70,229,.3); }
.btnanalise:hover{ filter:brightness(1.08); }
#pubAnalise{ background:#fff; border:1px solid var(--linha); border-radius:14px; padding:22px 26px; margin-bottom:16px; line-height:1.55; }
#pubAnalise h3{ margin:0 0 4px; font-size:17px; }
#pubAnalise .pansub{ color:var(--mut); font-size:12.5px; margin-bottom:16px; }
#pubAnalise .pansec{ margin-top:18px; padding-top:16px; border-top:1px solid var(--linha); }
#pubAnalise .pansec:first-of-type{ border-top:none; padding-top:0; margin-top:14px; }
#pubAnalise .panh{ font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:#334155; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
#pubAnalise .panh .dot{ width:8px; height:8px; border-radius:50%; }
#pubAnalise ul{ margin:6px 0 0; padding-left:0; list-style:none; }
#pubAnalise li{ padding:5px 0; border-bottom:1px dashed #eef2f7; }
#pubAnalise li:last-child{ border-bottom:none; }
#pubAnalise .pnome{ font-weight:600; }
#pubAnalise .pnum{ color:var(--mut); font-size:12.5px; }
#pubAnalise .kpis{ display:flex; gap:22px; flex-wrap:wrap; margin:10px 0 4px; }
#pubAnalise .kpis div span{ display:block; font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.3px; }
#pubAnalise .kpis div b{ font-size:18px; }
#pubAnalise .pos{ color:#15803d; } #pubAnalise .neg{ color:#b91c1c; }
#pubAnalise .panclose{ float:right; background:none; border:none; color:var(--mut); cursor:pointer; font-size:13px; }
#pubAnalise .destaque{ background:#f5f3ff; border-left:3px solid #7c3aed; padding:10px 14px; border-radius:8px; margin-top:8px; font-size:13.5px; }
/* Calculadora preço x ROAS */
.calchead{ display:flex; align-items:center; gap:2px; height:17px; }
.calctog{ display:inline-flex; margin-left:6px; vertical-align:middle; }
.calctog button{ border:1px solid var(--linha); background:#fff; font-size:11px; padding:1px 8px; cursor:pointer; font-family:inherit; color:var(--mut); }
.calctog button:first-child{ border-radius:6px 0 0 6px; } .calctog button:last-child{ border-radius:0 6px 6px 0; border-left:0; }
.calctog button.on{ background:#4f46e5; color:#fff; border-color:#4f46e5; }
.calcprodwrap{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--mut); margin:12px 0 16px; max-width:560px; position:relative; }
.calcprodwrap input{ padding:9px 12px; border:1px solid var(--linha); border-radius:8px; font-family:inherit; font-size:14px; background:#fff; }
.calcgrid{ display:flex; flex-wrap:wrap; gap:16px; margin:0 0 18px; }
.calcgrid label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--mut); width:190px; }
.calcgrid input, .calcgrid select{ padding:9px 12px; border:1px solid var(--linha); border-radius:8px; font-family:inherit; font-size:14px; background:#fff; width:100%; box-sizing:border-box; }
.calcbig{ font-size:15px; } .calcbig b{ font-size:24px; color:#4f46e5; }
.calcsub{ font-size:12px; color:var(--mut); margin:2px 0 12px; }
.calctab{ width:100%; border-collapse:collapse; font-size:13px; max-width:440px; }
.calctab td{ padding:4px 0; color:#475569; } .calctab td:last-child{ text-align:right; font-weight:500; color:#1e293b; }
.calctab tr.tot td{ border-top:1px solid var(--linha); padding-top:8px; font-weight:700; color:#16a34a; }
.calcalt{ font-size:12px; color:#475569; margin-top:12px; background:#f8fafc; padding:9px 12px; border-radius:8px; line-height:1.5; }
.vtitle{ font-size:18px; margin:2px 0 4px; }
.rup7{ color:#b91c1c; font-weight:500; } .rup15{ color:#c2410c; font-weight:500; }
td.rup7{ background:#fef2f2 !important; color:#b91c1c; font-weight:600; }
td.rup15{ background:#fff7ed !important; color:#c2410c; font-weight:600; }
.badge.paused{ background:#fee2e2; color:#991b1b; }
.badge.active{ background:#dcfce7; color:#166534; }
.badge.rev{ background:#e0e7ff; color:#3730a3; }

.card{ background:#fff; border:1px solid var(--linha); border-radius:16px; padding:18px 20px 20px; }
.card h2{ font-size:15px; margin:0 0 4px; }
.card .cinfo{ font-size:12.5px; color:var(--mut); margin:0 0 14px; }
.searchbox{ width:280px; max-width:100%; height:38px; margin-bottom:14px; }
/* ===== Toolbar padrão: busca (tamanho fixo, à esquerda) + Colunas grudado — igual em toda tela e dispositivo ===== */
.toolbar{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:6px 0 14px; }
.toolbar .searchstd{ flex:0 0 360px !important; width:360px !important; min-width:0 !important; max-width:100% !important; height:38px !important; margin:0 !important; }
.toolbar .colbtn{ flex:0 0 auto; white-space:nowrap; align-self:center; }
/* linha de filtros (chips/datas/dropdowns) fica acima da busca */
.filterrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:12px 0 12px; }
/* linha de filtros 100% alinhada: tudo com 38px de altura */
.filterrow input[type=date], .filterrow .btn.sm, .filterrow select{ height:38px !important; }
.filterrow .btn.sm{ display:inline-flex; align-items:center; }
/* Hierarquia da linha de filtros:
   ESTADO (qual filtro está ligado) = chip azul sólido — só ele é sólido.
   AÇÃO (aplicar)                   = contorno azul, enche no hover.
   ESCAPE (limpar)                  = texto discreto.
   O fio fica centrado no vão: mesmo respiro dos dois lados. */
.grupodata{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-left:11px; margin-left:1px; border-left:1px solid #e8ecf3; }
/* a regra global input{margin-bottom:11px} empurrava as datas ~5px pra cima na linha:
   o flex centraliza a caixa COM a margem. Aqui a margem some e tudo senta na mesma base. */
.filterrow input, .filterrow .btn, .filterrow select, .grupodata input{ margin:0 !important; vertical-align:middle; }
.filterrow .grupodata .sub{ font-size:13px; color:#64748b; margin:0; white-space:nowrap; }
.filterrow input[type=date]{ border:1px solid #e2e8f0 !important; border-radius:9px !important; font-size:13px !important; color:#334155; padding:0 10px !important; width:146px !important; }
.filterrow input[type=date]:hover{ border-color:#c7d2e5 !important; }
.filterrow input[type=date]:focus{ outline:none; border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.filterrow .btn.sm{ border-radius:9px !important; font-weight:700; }
.filterrow .btn.sm:not(.ghost){ background:#fff; color:#2563eb; border:1px solid #bfdbfe; }
.filterrow .btn.sm:not(.ghost):hover{ background:#2563eb; color:#fff; border-color:#2563eb; }
.filterrow .btn.sm.ghost{ background:transparent; color:#94a3b8; border:1px solid transparent; font-weight:600; }
.filterrow .btn.sm.ghost:hover{ color:#475569; background:#f1f5f9; }
@media (max-width:860px){ .grupodata{ padding-left:0; margin-left:0; border-left:none; width:100%; } }
.segbar{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.segbar .seg{ height:38px; padding:0 14px; border:1px solid #e2e8f0; background:#fff; border-radius:9px; font-size:13px; font-weight:600; color:#475569; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; white-space:nowrap; }
.segbar .seg:hover{ border-color:#c7d2e5; }
.segbar .seg.on{ background:#2563eb; color:#fff; border-color:#2563eb; }
.cenbtn{ height:32px; padding:0 12px; border:1px solid #e2e8f0; background:#fff; border-radius:9px; font-size:12.5px; font-weight:700; color:#475569; cursor:pointer; font-family:inherit; }
.cenbtn:hover{ border-color:#93c5fd; color:#2563eb; }
.cenbtn.on{ background:#eff6ff; border-color:#2563eb; color:#2563eb; }
/* botão de ajuda (?) no topo: mostra/oculta os textos explicativos das telas */
.helpbtn{ width:30px; height:30px; border-radius:50%; border:1px solid #d7d9e3; background:#fff; color:#64748b; font-size:15px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-family:inherit; }
.helpbtn:hover{ background:#f4f4fb; color:#1a1a2e; }
.helpbtn.on{ background:var(--azul); color:#fff; border-color:var(--azul); }
body.hide-help .cinfo, body.hide-help .helptext, body.hide-help .finlegenda{ display:none !important; }
/* com a ajuda oculta, título respira antes da busca/filtros */
body.hide-help .card h2, body.hide-help .finsec h3{ margin-bottom:14px; }
.toolbar{ margin-top:18px !important; margin-bottom:20px !important; }
.filterrow{ margin-bottom:14px; }
#repFiltros{ margin-bottom:14px !important; }
/* campos de data padronizados: fundo branco, dd/mm/aaaa visível, mesma cara em toda tela */
.main input[type=date]{ height:38px; background:#fff; color:#1a1a2e; border:1px solid #d7d9e3; border-radius:8px; padding:0 10px; font-size:13px; }
.tbl.hide-ana .col-ana{ display:none !important; }   /* toggle "Ocultar análise" (margem, MC%, ads, MAA%, ROAS) */
.tblwrap{ overflow-x:auto; }
.tblwrap.stickyhead{ max-height:72vh; overflow:auto; }
.tblwrap > table > thead th{ position:sticky; top:0; background:#fff; z-index:8; box-shadow:inset 0 -1px 0 var(--linha); }
tr.child table thead th{ position:sticky; top:var(--foff,37px); background:#eef1f7; z-index:7; box-shadow:inset 0 -1px 0 var(--linha); font-weight:600; }
/* Seleção de produtos para pedir cotação direto da tela de Oportunidades */
.oportchk{ width:16px; height:16px; margin-right:9px; vertical-align:-3px; cursor:pointer; accent-color:#16a34a; }
/* EAN recém-inserido, ainda sem resposta do ML: a linha diz o que está havendo
   em vez de aparecer vazia e parecer erro */
.buscandoml{ color:#7c3aed; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.buscandoml i{ animation:girando 1.4s linear infinite; }
@keyframes girando{ to{ transform:rotate(360deg); } }
.selbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:60;
  background:#0f172a; color:#fff; border-radius:14px; padding:11px 14px 11px 18px;
  box-shadow:0 14px 40px rgba(15,23,42,.35); display:none; align-items:center; gap:14px; font-size:13.5px; }
.selbar.on{ display:flex; }
.selbar b{ font-size:15px; }
.selbar button{ font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:8px 14px; cursor:pointer; border:none; }
.selbar .batu{ background:#2563eb; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.selbar .batu:hover{ background:#1d4ed8; }
.selbar .batu:disabled{ background:#475569; cursor:wait; }
.selbar .bzap{ background:#16a34a; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.selbar .bzap:hover{ background:#15803d; }
.selbar .bexc{ background:transparent; color:#fca5a5; border:1px solid #7f1d1d; display:inline-flex; align-items:center; gap:6px; }
.selbar .bexc:hover{ background:#7f1d1d; color:#fff; }
.selbar .blimpar{ background:transparent; color:#94a3b8; }
.selbar .blimpar:hover{ color:#fff; }
.zapitem{ display:grid; grid-template-columns:1fr 92px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid #f2f3f8; }
.zapitem .qtd{ width:100%; padding:6px 8px; border:1px solid var(--linha); border-radius:7px; font-family:inherit; font-size:13px; text-align:right; }
.zapmsg{ width:100%; min-height:190px; padding:11px; border:1px solid var(--linha); border-radius:10px;
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.5; resize:vertical; box-sizing:border-box; }
/* Clássico | Premium: muda a comissão de todo o cálculo, sem tocar no banco */
.tipoanuncio{ display:inline-flex; background:#f1f2f8; padding:3px; border-radius:10px; }
.tipoanuncio button{ border:none; background:transparent; color:#64748b; font-family:inherit; font-size:12.5px;
  font-weight:600; padding:6px 13px; border-radius:8px; cursor:pointer; }
.tipoanuncio button.on{ background:#fff; color:#1e293b; box-shadow:0 1px 3px rgba(20,20,50,.12); }
/* Andamento da fila: uma linha discreta. A primeira versão ocupava um bloco
   inteiro da tela para dizer "9 de 10" — informação pequena, espaço grande. */
.filabarra{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; color:#475569; }
.filatrilho{ flex:0 0 120px; height:4px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.filapreenche{ height:100%; width:0%; background:#2563eb; border-radius:999px; transition:width .4s ease; }
.filabarra button{ border:none; background:transparent; color:#94a3b8; font-family:inherit; font-size:11.5px; cursor:pointer; text-decoration:underline; padding:0; }
.filabarra button:hover{ color:#b91c1c; }
/* Filtro rápido: separa o que fecha a conta do que não fecha */
.oportfiltro{ display:inline-flex; gap:4px; align-items:center; background:#f1f2f8; padding:3px; border-radius:10px; }
.oportfiltro .fcabe{ border:none; background:transparent; color:#64748b; font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.oportfiltro .fcabe:hover{ color:#1e293b; }
/* botão discreto que abre a lista de fornecedores do produto */
.vforn{ border:none; background:transparent; color:#2563eb; font-family:inherit; font-size:11px; padding:0; cursor:pointer; text-decoration:underline; }
.vforn:hover{ color:#1d4ed8; }
.fornitem{ display:grid; grid-template-columns:1fr 110px 90px 30px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #f2f3f8; }
.fornitem input{ padding:6px 8px; border:1px solid var(--linha); border-radius:7px; font-family:inherit; font-size:13px; text-align:right; width:100%; box-sizing:border-box; }
.oportfiltro .fcabe.on{ background:#fff; color:#1e293b; box-shadow:0 1px 3px rgba(20,20,50,.12); }
/* o filtro de demanda é um interruptor à parte: soma com os outros três */
.fdem{ border:1px solid var(--linha); background:#fff; color:#64748b; font-family:inherit; font-size:12.5px;
  font-weight:600; padding:8px 12px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.fdem:hover{ border-color:#fdba74; color:#9a3412; }
.fdem.on{ background:#fff7ed; border-color:#fb923c; color:#9a3412; box-shadow:0 1px 3px rgba(251,146,60,.25); }
.fdem.on.baixo{ background:#eff6ff; border-color:#60a5fa; color:#1d4ed8; box-shadow:0 1px 3px rgba(96,165,250,.25); }
/* Oportunidades: a coluna do produto fica fixa ao rolar a tabela para o lado.
   A tabela é larga e sem isso a pessoa perde de vista de qual produto é a linha.
   O cabeçalho já era fixo na vertical (regra acima, z-index 8); aqui a primeira
   coluna ganha z-index maior para passar por cima dele no canto. */
/* 1º) Quem rola de lado tem que ser a CAIXA da tabela, não a página inteira.
   Enquanto a página é que rolava, a coluna fixa ia embora junto com ela. */
#viewOport .card{ min-width:0; max-width:100%; }
/* A caixa da tabela tem altura própria e rola nos DOIS sentidos.
   Isso é o que permite o cabeçalho grudar em cima (top:0) e a coluna do
   produto grudar à esquerda (left:0) ao mesmo tempo — sem altura definida,
   quem rola é a página e não existe borda onde grudar. */
#viewOport .tblwrap{ overflow:auto; max-height:72vh; max-width:100%; }
#tabelaO{ width:auto; min-width:max-content; }
/* 2º) Agora sim a primeira coluna gruda na borda esquerda da caixa. */
#tabelaO thead th{ z-index:10; }
#tabelaO th:first-child,
#tabelaO td:first-child{ position:sticky; left:0; z-index:6; background:#fff; box-shadow:1px 0 0 var(--linha); }
#tabelaO thead th:first-child{ z-index:12; background:#fff; box-shadow:1px 0 0 var(--linha), inset 0 -1px 0 var(--linha); }
#tabelaO tbody tr:hover td:first-child{ background:#fafbfe; }
/* a coluna do produto não pode encolher nem esticar demais */
#tabelaO th:first-child, #tabelaO td:first-child{ min-width:300px; max-width:340px; }
tr.child table.cdet thead th{ position:static !important; top:auto !important; z-index:auto !important; box-shadow:none; background:#eef2f9; font-weight:600; }

/* ===== Tela de Anúncios =====
   Mesmo pulo do gato da tela de Oportunidades: a CAIXA tem altura própria e rola
   nos dois sentidos. Sem isso quem rola é a página, e aí não existe borda onde o
   position:sticky se apoiar — nem o cabeçalho no topo nem as colunas da esquerda.
   A coluna do + tem 34px fixos (regra th.exp,td.exp), por isso o produto gruda
   exatamente em left:34px. */
#viewAnuncios .card{ min-width:0; max-width:100%; }
#viewAnuncios .tblwrap{ overflow:auto; max-height:72vh; max-width:100%; }
#anTab{ width:auto; min-width:max-content; }
#anTab thead th{ z-index:10; }
#anTab > thead > tr > th.exp,
#anTab > tbody > tr > td.exp{ position:sticky; left:0; z-index:6; background:#fff; }
#anTab > thead > tr > th.exp{ z-index:12; }
#anTab > thead > tr > th.anprod,
#anTab > tbody > tr > td.anprod{ position:sticky; left:34px; z-index:6; background:#fff; box-shadow:1px 0 0 var(--linha); min-width:300px; max-width:340px; }
#anTab > thead > tr > th.anprod{ z-index:12; box-shadow:1px 0 0 var(--linha), inset 0 -1px 0 var(--linha); }
#anTab > tbody > tr:hover > td.exp,
#anTab > tbody > tr:hover > td.anprod{ background:#fafbfe; }
/* a linha aberta (os potes) não pode herdar o sticky da tabela de fora */
#anTab tr.andet table th{ position:static !important; top:auto !important; z-index:auto !important; }
.anpote{ background:#f4f6fa; border:1px solid #e4e8f0; border-radius:10px; padding:10px 12px; margin:8px 0; }
.anpote:first-child{ margin-top:0; }
.anpote table{ width:100%; margin:6px 0 0; background:#fff; border-radius:8px; overflow:hidden; }
.anpotehd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:#475569; }
.anpotehd b{ color:#1a1a2e; font-size:12.5px; }
/* Colunas de CONTAGEM ficam centradas sob o título. O padrão do sistema é
   text-align:right (certo para dinheiro, que alinha pela vírgula), mas em
   cabeçalho largo como "Ativos · Pausados · Revisão" o número encostava na
   borda direita e parecia solto do título. Dinheiro segue à direita. */
#anTab th.cnum, #anTab > tbody > tr > td.cnum{ text-align:center; }
/* ===== Tela de Produtos (08/09/2026) =====
   Linhas no mesmo peso da tabela do Início. Campo que salva sozinho: sem borda
   em repouso pra tabela não virar formulário, borda no hover, e sinal claro de
   salvando/salvo. O verde some sozinho — recado eterno vira enfeite. */
#viewProdutos .tblwrap{ overflow:auto; max-height:74vh; }
#prTab{ width:100%; min-width:max-content; }
#prTab thead th{ position:sticky; top:0; background:#fff; z-index:8; }
#prTab th.prchk, #prTab td.prchk{ width:34px; padding-left:10px; padding-right:0; text-align:center; }
#prTab th.prprod, #prTab td.prprod{ min-width:520px; max-width:640px; }   /* [15/09/2026] Chefe: nome do produto inteiro */
#prTab td.prsku{ font-size:12px; color:#8b90a0; white-space:nowrap; }
#prTab tr.inativo td{ opacity:.5; }
.prchk input{ width:15px; height:15px; cursor:pointer; accent-color:#2563eb; vertical-align:-2px; }
.pedit{ width:100%; border:1px solid transparent; border-radius:6px; background:transparent;
  font-family:inherit; font-size:13px; color:#1a1a2e; padding:4px 6px; }
.pedit:hover{ border-color:#e2e8f0; background:#fbfcfe; }
.pedit:focus{ outline:none; border-color:#2563eb; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
/* números editáveis alinham à direita, como os valores das outras colunas */
/* número editável ocupa a célula inteira: com max-width o campo ficava mais
   estreito que a coluna e o valor não batia com o cabeçalho nem com a coluna
   vizinha. Sem largura fixa, o alinhamento à direita vale para todos. */
.pedit.num{ text-align:right; width:100%; font-variant-numeric:tabular-nums; }
.pedit.salvando{ border-color:#c7d2fe; background:#eef2ff; }
.pedit.salvo{ border-color:#86efac; background:#f0fdf4; }
.pedit.erro{ border-color:#fca5a5; background:#fef2f2; }
/* custo que vem do FIFO não é editável: digitar por cima não teria efeito na
   margem, e aceitar em silêncio seria mentir para quem digitou */
/* mesmo recuo e mesma borda (transparente) do .pedit — um pixel de diferença
   já desalinha a coluna do custo em relação à do preço */
.custofixo{ display:block; text-align:right; font-variant-numeric:tabular-nums;
  padding:4px 6px; border:1px solid transparent; }
.anoff{ opacity:.55; cursor:not-allowed; }
.anlock{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:#92400e; background:#fef3c7; border:1px solid #fde68a; border-radius:5px; padding:1px 6px; white-space:nowrap; }
.cbadge{ display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:5px; font-weight:600; white-space:nowrap; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:right; font-weight:500; color:var(--mut); font-size:12px; padding:9px 10px; border-bottom:1px solid var(--linha); cursor:pointer; white-space:nowrap; user-select:none; }
th:hover{ color:#1a1a2e; }
th.l,td.l{ text-align:left; }
td{ text-align:right; padding:10px 10px; border-bottom:1px solid #f2f3f8; white-space:nowrap; }
tr:hover td{ background:#fafbfe; }
tr.repalt>td{ background:#f5f6fa; }
tr.repalt:hover>td{ background:#eef0f7; }
/* Notas de compra: linhas todas brancas (sem listra) — só o detalhe da nota aberto fica cinza */
#nfTab tbody tr.nfrow>td, #cpTab tbody tr.cprow>td{ background:#fff; }
#nfTab tbody tr.nfrow:hover>td, #cpTab tbody tr.cprow:hover>td{ background:#fbfcfe; }
.mlb{ font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:#4b5563; }
.tit{ display:block; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* [08/09/2026] No ranking do Início o nome do produto aparece INTEIRO — é o
   nome do cadastro, curto e limpo, não o título quilométrico do anúncio.
   Vale só na linha do produto: os MLBs abertos seguem cortados, porque ali o
   título é longo de verdade e o que identifica é o número do anúncio. */
#tabela tr.grp .tit{ max-width:none; white-space:normal; overflow:visible; text-overflow:clip; }
th.ccenter, td.ccenter{ text-align:center; }
.skul{ display:block; font-size:11px; color:#9aa0ad; margin-top:2px; }
th.exp,td.exp{ width:34px; padding-left:6px; padding-right:0; text-align:center; }
.expbtn{ width:22px;height:22px;border:1px solid #d7d9e3;border-radius:6px;background:#fff;color:#4b5563;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0; }
.expbtn:hover{ background:#f1f2f8;border-color:#b9bccb; }
tr.grp td{ border-bottom:1px solid var(--linha); }
tr.grp.aberto td{ background:#faf9ff; }
tr.child td{ background:#fbfbfd; border-bottom:1px solid #f2f3f8; }
tr.child .cprod{ padding-left:30px; }
tr.child .mlb{ font-size:13px; font-family:inherit; color:#1a1a2e; }
tr.child .ctit{ color:#8b90a0; font-size:12px; }
tr.child .skul{ font-size:12px; }
tr.child td{ font-size:13px; }
/* Padrão de tabelas (invertido): linha-pai BRANCA, linhas filhas/anúncios em CINZA (destaque quando aberto) */
tr.reprow > td, tr.grp > td{ background:#fff; }
tr.reprow:hover > td, tr.grp:hover > td{ background:#f6f7fb; }
tr.reprow.aberto > td, tr.grp.aberto > td{ background:#f1f2f8; }
tr.reprow.aberto > td:first-child, tr.grp.aberto > td:first-child{ box-shadow:inset 3px 0 0 #2563eb; }
tr.child > td, tr.child td{ background:#f2f3f8; }
tr.grp.aberto td{ background:#f1f2f8; }
#fornBody tr.selrow > td, #repBody tr.selrow > td{ background:#eff6ff !important; }
/* Envios: linhas mais compactas (menos altura) + tudo centralizado na vertical */
#repTab td{ padding-top:4px; padding-bottom:4px; vertical-align:middle; }
#repTab thead th{ padding-top:6px; padding-bottom:6px; }
#repTab .skul{ margin-top:1px; }
.compForn{ display:none; }   /* oculta o fornecedor abaixo do input de compra (só oculto, continua usando o principal) */
#fornAcaoBar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px; }
.gacard{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:9px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-family:inherit; }
.pedfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 14px; background:#f1f5fb; border-top:1px solid var(--linha); }
.pedfoot .pedinfo{ font-size:13px; color:#1a1a2e; }
.pedbtn{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid #d7d9e3; border-radius:8px; background:#fff; font-size:12.5px; font-weight:600; color:#334155; cursor:pointer; font-family:inherit; }
.pedbtn:disabled{ opacity:.45; cursor:default; }
.selqty{ width:62px; padding:4px 6px; border:1px solid #d7d9e3; border-radius:6px; font-size:12.5px; text-align:right; font-family:inherit; }
th.selcol,td.selcol{ width:34px; text-align:center; padding-left:8px; padding-right:2px; }
.selchk,.selall{ width:15px; height:15px; cursor:pointer; vertical-align:middle; }
.cotfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 14px; background:#f6f8fc; border-top:1px solid var(--linha); }
.cotsteps{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cotstatus{ padding:5px 12px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; font-size:12px; font-weight:600; color:#475569; cursor:pointer; font-family:inherit; }
.cotstatus.on{ background:#2563eb; color:#fff; border-color:#2563eb; }
.cotstatus.cancel.on{ background:#6b7280; border-color:#6b7280; }
.cotstatus.dis,.cotstatus:disabled{ opacity:.4; cursor:not-allowed; background:#f1f5f9; }
.divq::-webkit-outer-spin-button,.divq::-webkit-inner-spin-button,.divc::-webkit-outer-spin-button,.divc::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.divq,.divc{ -moz-appearance:textfield; appearance:textfield; }
.cotarrow{ color:#cbd5e1; font-size:11px; }
.cotcusto{ width:96px; padding:4px 6px; border:1px solid #d7d9e3; border-radius:6px; font-size:12.5px; text-align:right; font-family:inherit; }
.cotqtd{ width:74px; padding:4px 6px; border:1px solid #d7d9e3; border-radius:6px; font-size:12.5px; text-align:right; font-family:inherit; }
#pedidoBar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 15px; margin:0 0 14px; background:#eff4ff; border:1px solid #cdddfb; border-radius:12px; }
#pedidoBar.hidden{ display:none; }
#pedidoBar .pedinfo{ font-size:13.5px; color:#1a1a2e; }
#waov{ position:fixed; inset:0; background:rgba(20,20,40,.4); z-index:9999; display:none; align-items:center; justify-content:center; }
.wabox{ background:#fff; border-radius:14px; padding:16px; width:min(460px,92vw); max-height:80vh; overflow:auto; box-shadow:0 20px 50px rgba(20,20,50,.3); }
.wabox-h{ font-size:14px; font-weight:700; color:#1a1a2e; margin-bottom:12px; }
.wabox-i{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:10px 12px; border:1px solid #e5e7eb; border-radius:9px; background:#fff; cursor:pointer; margin-bottom:8px; font-family:inherit; }
.wabox-i:hover{ background:#f1f5f9; border-color:#c7d2e5; }
.wabox-i .sub{ font-size:11.5px; color:#64748b; }
.wabox-x{ width:100%; padding:9px; border:none; background:#f1f5f9; border-radius:9px; cursor:pointer; font-family:inherit; font-weight:600; color:#475569; }
.pos{ color:#047857; font-weight:500; } .neg{ color:#b91c1c; font-weight:500; } .muted{ color:var(--mut); }   /* [15/09/2026] era #c0c4cc — "cinza quase não dá pra ver" (Chefe): texto secundário tem que ser legível */
.badge{ font-size:11px; padding:2px 9px; border-radius:20px; font-weight:500; white-space:nowrap; }
.badge.full{ background:#e0f2fe; color:#075985; }
.badge.coleta{ background:#fef3c7; color:#92400e; }
.badge.misto{ background:#ede9fe; color:#5b21b6; }
.modalbg{ position:fixed; inset:0; background:rgba(17,24,39,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modalbox{ background:#fff; border-radius:16px; padding:22px 24px; width:100%; max-width:540px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
/* ---- caixinha de confirmação / aviso (substitui o alert e o confirm do navegador) ---- */
#uiAsk{ position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:2000000; padding:20px; animation:uiFade .14s ease-out; }
#uiAsk.hidden{ display:none; }
#uiAskBox{ background:#fff; border-radius:18px; padding:26px 26px 20px; width:100%; max-width:430px; box-shadow:0 24px 70px rgba(15,23,42,.32); text-align:center; animation:uiPop .16s cubic-bezier(.2,.9,.3,1.2); }
@keyframes uiFade{ from{opacity:0} to{opacity:1} }
@keyframes uiPop{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
#uiAskIco{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:25px; margin:0 auto 14px; }
#uiAskTit{ font-size:17px; font-weight:700; color:#0f172a; margin-bottom:7px; line-height:1.35; }
#uiAskMsg{ font-size:14px; color:#475569; line-height:1.55; white-space:pre-line; }
#uiAskBtns{ display:flex; gap:9px; margin-top:20px; }
#uiAskBtns button{ flex:1; height:44px; border-radius:11px; font-size:14.5px; font-weight:650; font-family:inherit; cursor:pointer; border:1px solid transparent; transition:filter .12s, background .12s; }
#uiAskBtns button:hover{ filter:brightness(.96); }
#uiAskNao{ background:#fff; color:#475569; border-color:#e2e8f0 !important; }
#uiAskSim{ background:#2563eb; color:#fff; }
#uiAskSim.perigo{ background:#dc2626; }
#uiToast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:2000001; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
#uiToast div{ background:#0f172a; color:#fff; padding:11px 18px; border-radius:11px; font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(15,23,42,.3); animation:uiPop .16s ease-out; max-width:88vw; }
#uiToast div.ok{ background:#15803d; } #uiToast div.err{ background:#b91c1c; }
.modalhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modalhead span{ font-size:16px; font-weight:600; display:flex; align-items:center; gap:7px; }
.estgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px; }
.estcard{ background:var(--surface,#f7f8fc); background:#f6f7fb; border-radius:12px; padding:13px 15px; }
.estcard .l{ font-size:12px; color:var(--mut); }
.estcard .v{ font-size:19px; font-weight:700; margin-top:5px; }
.estcard.big{ grid-column:1 / -1; background:#111827; }
.estcard.big .l{ color:#c7d2fe; } .estcard.big .v{ color:#fff; }
.estvazio{ margin-top:16px; padding:16px; background:#fef9e7; border:1px solid #f7e6a2; border-radius:10px; color:#8a6d00; font-size:13.5px; }
#loading{ text-align:center; color:var(--mut); padding:30px; }
.hammenu{ display:none; background:none; border:none; color:#4b5563; font-size:22px; padding:2px 6px; cursor:pointer; }
.sideback{ display:none; }
/* opção de acesso (modal usuário) — realce do card escolhido */
.usrAccOpt{ transition:border-color .12s, background .12s; }
.usrAccOpt.on{ border-color:#2563eb !important; background:#eff6ff; box-shadow:0 0 0 1px #2563eb inset; }
@media(max-width:820px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .main{ padding:16px 12px 54px; }
  .hammenu{ display:inline-flex; align-items:center; }
  .brand{ display:none; }
  .gbCampo kbd{ display:none; }
  .gbCampo input::placeholder{ color:transparent; }
  /* topo em 2 linhas: [☰ logo ... avatar Sair] e [período][conta] juntos */
  .topin{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; }
  .topin .spacer{ order:1; flex:1 1 auto; }
  .avatar{ order:1; } #btnSair{ order:1; }
  .topsel{ order:2; flex:1 1 100%; display:flex; gap:8px; }
  .topsel .selwrap{ flex:1 1 50%; padding:0 6px 0 10px; }
  .topsel .selwrap select{ flex:1; min-width:0; max-width:none; font-size:13px; padding-right:0; }
  /* menu vira gaveta deslizante */
  .side{ position:fixed; top:0; left:0; height:100vh; width:250px; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .side.open{ transform:translateX(0); }
  .sideback{ position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:55; }
  .sideback.open{ display:block; }
  /* [11/09/2026] No celular não cabe painel ao lado da gaveta (gaveta 250px +
     painel 266px passa da tela). O painel vira a "segunda página" da gaveta:
     cobre ela por cima, com um Voltar no topo. z-index acima da .side (60). */
  /* No celular a .side é fixed com z-index:60 — mesma prisão de empilhamento.
     Ordem: .sideback (55) < .flyback (58) < .side (60), e o painel dentro dela. */
  .navfly{ left:0; top:0; bottom:0; width:250px; z-index:1; box-shadow:none; }
  .navgrp.aberto .navfly{ display:block; }
  .flyback{ inset:0; z-index:58; }
  .flyvolta{ display:flex; }   /* o Voltar só existe no celular */
  .kpi .val{ font-size:21px; } .vtitle{ font-size:16px; }
  table{ font-size:12px; }
  th, td{ padding:7px 8px; font-size:11.5px; }
  .tit{ max-width:200px; }
  .kpi2.wide{ grid-column:1 / -1; }
  /* nada empurra a página pra fora da tela — só as tabelas rolam por dentro */
  html, body{ overflow-x:hidden; max-width:100%; }
  .main{ max-width:100%; }
  /* rodapés de 4 colunas (Centro de custo etc.) empilham em 2 pra não cortar valor */
  .vcSub{ grid-template-columns:repeat(2,1fr) !important; gap:10px 12px; }
  .estgrid{ grid-template-columns:1fr; }
  /* tabelas: rolagem horizontal suave por dentro do card */
  .tblwrap{ -webkit-overflow-scrolling:touch; }
  /* modal de usuário: opções de acesso ocupam a largura toda e ficam confortáveis */
  .usrAccOpt{ font-size:13px; }
  /* buscas não convertidas: não vazam a margem */
  input[id^="busca"]:not(.searchstd), input[id$="Busca"]:not(.searchstd){ max-width:100% !important; }
  /* no celular a busca padrão pode crescer um pouco mais, mantendo o Colunas do lado */
  .toolbar .searchstd{ max-width:none; }
  /* qualquer linha de filtros/ícones/botões em flex quebra a linha em vez de estourar a tela */
  .main [style*="display:flex"]{ flex-wrap:wrap; }
  /* campos de data: encolhem e ficam lado a lado (de/até na mesma linha) */
  .main input[type=date]{ min-width:0; max-width:100%; width:auto !important; flex:1 1 110px; }
  .segbar, .segbtns{ flex-wrap:wrap; }
  /* botões de ação não passam da borda */
  .main .pedbtn, .main .btn.sm, .main .cotstatus{ max-width:100%; }
}
@media(max-width:480px){
  .kpis{ grid-template-columns:minmax(0,1fr); }
  .vcSub{ grid-template-columns:repeat(2,1fr) !important; }
  .kpi .val{ font-size:20px; }
  .card{ padding:14px 14px 16px; }
}


/* ============================================================================
   REFINO VISUAL [11/09/2026]
   O Chefe pediu "mais fino, bonito, atualizado" mostrando o Olist. Estes são
   os ajustes de base que valem para TODAS as telas de uma vez. Ficam no fim
   de propósito: vêm depois das regras antigas, então mandam nelas sem eu ter
   que mexer em 800 linhas e arriscar quebrar tela que hoje funciona.
   ========================================================================= */

/* O que mais muda a percepção de "fino": desligar o engorda-letra do sistema.
   É uma linha e vale em cada texto da tela. */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Tabela: mais ar entre as linhas e cabeçalho discreto.
   Número continua à direita e texto à esquerda — isso não muda. */
table{ font-size:var(--t-tabela); }
th{ font-size:var(--t-rotulo); font-weight:500; color:var(--fraco);
    letter-spacing:.2px; padding:11px 12px; border-bottom:1px solid var(--linha); }
td{ padding:12px 12px; border-bottom:1px solid var(--linha2); }
tr:hover td{ background:var(--hover); }

/* Cartão: borda mais leve e sombra de apoio em vez de traço forte */
.card, .kpi, .kpi2{ border-color:var(--linha); box-shadow:0 1px 2px rgba(20,24,54,.04); }

/* Título de tela mais calmo */
.vtitle{ letter-spacing:-.2px; }


/* ---- Envios Full: cabeçalho preso [movido de dentro do index.html em 11/09/2026] ---- */
/* cabeçalho da tabela de Envios Full fica preso no topo enquanto a lista rola */
            #efTab.efsticky thead th{position:sticky;top:0;z-index:5;background:#f1f5f9;
              box-shadow:inset 0 -1px 0 var(--linha)}
            #efTab.efsticky table{border-collapse:separate;border-spacing:0}
            /* remessas: a linha do inbound fica destacada e os produtos dele ficam brancos por dentro */
            #remLista tr.remGrp>td{background:#eef2f7;border-top:1px solid #dbe2ec}
            #remLista tr.remGrp:hover>td{background:#e3eaf3}

/* ============================================================================
   FICHA DO PRODUTO [11/09/2026]
   Primeira tela de detalhe do sistema. Tudo daqui usa as variáveis do topo —
   nenhuma cor escrita à mão, que foi o que tornou o resto difícil de mudar.
   ========================================================================= */

.fpTopo{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.fpVoltar{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-btn);
  border:1px solid var(--linha); background:var(--branco); color:var(--mut);
  font-family:inherit; font-size:13px; cursor:pointer; }
.fpVoltar:hover{ color:var(--tinta); border-color:var(--fraco); }
.fpCrumb{ font-size:12.5px; color:var(--fraco); }
.fpCrumb b{ color:var(--mut); font-weight:600; }

.fpCard{ padding:20px 22px; margin-bottom:16px; }
.fpHead{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.fpIdent{ flex:1 1 300px; min-width:0; }
.fpIdent h2{ margin:0 0 6px; font-size:19px; font-weight:600; letter-spacing:-.2px; color:var(--tinta); }
.fpSub{ font-size:12.5px; color:var(--fraco); display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.fpSub .sep{ color:var(--linha); }
.fpSub code{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--mut); }
.fpBtnAtivo{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border:1px solid var(--linha); border-radius:20px;
  background:#fff; font-size:11px; font-weight:600; color:var(--mut); cursor:pointer; font-family:inherit; }
.fpBtnAtivo:hover{ color:var(--ruim); border-color:var(--ruim); }
/* [22/09/2026] Reler do ML: ação neutra (azul), não é o vermelho de inativar */
.fpBtnReler:hover{ color:var(--azul); border-color:var(--azul); }
.fpBtnAtivo:disabled{ opacity:.5; cursor:default; }

/* os números do cabeçalho: rótulo pequeno em cima, valor embaixo */
.fpNums{ display:flex; gap:26px; flex-wrap:wrap; }
.fpNum{ min-width:78px; }
.fpNum .r{ font-size:var(--t-mini); color:var(--fraco); text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.fpNum .v{ font-size:17px; font-weight:700; color:var(--tinta); margin-top:3px; white-space:nowrap; }
.fpNum .v.bom{ color:var(--bom); } .fpNum .v.ruim{ color:var(--ruim); } .fpNum .v.fraco{ color:var(--fraco); font-weight:600; }
.fpNum .v.aviso{ color:var(--aviso); }   /* [15/09/2026] número que existe mas pede confirmação (base curta / pico) */
/* [15/09/2026] aba Giro: pílulas de período (30 / 60 / 90) */
.gjTopo{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.gjDias{ height:30px; padding:0 14px; border:1px solid var(--linha); border-radius:20px; background:#fff; color:var(--mut); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.gjDias:hover{ border-color:var(--tinta); color:var(--tinta); }
.gjDias.on{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.fpNum .n{ font-size:var(--t-mini); color:var(--fraco); margin-top:1px; white-space:nowrap; }

/* abas */
.fpAbas{ display:flex; gap:2px; border-bottom:1px solid var(--linha); margin-bottom:0; overflow-x:auto; }
.fpAba{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border:none; background:none;
  font-family:inherit; font-size:13.5px; color:var(--mut); cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.fpAba i{ font-size:16px; color:var(--fraco); }
.fpAba:hover{ color:var(--tinta); }
.fpAba.on{ color:var(--azul2); border-bottom-color:var(--azul2); font-weight:500; }
.fpAba.on i{ color:var(--azul2); }
.fpConteudo{ border-top-left-radius:0; border-top-right-radius:0; padding:20px 22px; min-height:220px; }
/* [23/09/2026] tela Compras: número de itens na aba */
.cotAbaN{ margin-left:2px; background:#eef2ff; color:var(--azul2); font-size:11px; font-weight:600; padding:1px 7px; border-radius:10px; }
/* [23/09/2026] aba Comprar */
#sugWrap tr.selrow > td{ background:#f0fdf4 !important; }
#sugWrap .tit{ max-width:420px; }
/* [23/09/2026] Chefe: "centraliza a tabela pra ficar com layout legal" — colunas de número no centro (título e valor);
   a coluna de texto (class "l") continua à esquerda. Padrão das tabelas de giro (Envio ao Full, Compras). Ver CLAUDE.md */
table.tblCentro th:not(.l), table.tblCentro td:not(.l){ text-align:center; }
table.tblCentro td:not(.l) .skul{ margin-left:auto !important; margin-right:auto !important; text-align:center; }

/* aba Dados: rótulo em cima, campo embaixo, em grade que se ajusta */
.fpCampos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px 20px; }
.fpCampo label{ display:block; font-size:var(--t-mini); color:var(--fraco); text-transform:uppercase;
  letter-spacing:.3px; margin-bottom:5px; }
.fpCampo input{ width:100%; padding:8px 10px; border:1px solid var(--linha); border-radius:var(--r-campo);
  font-family:inherit; font-size:13.5px; color:var(--tinta); background:var(--branco); box-sizing:border-box; }
.fpCampo input:focus{ outline:none; border-color:var(--acao); box-shadow:0 0 0 3px var(--acao-claro); }
.fpCampo input:disabled{ background:var(--bg); color:var(--mut); cursor:not-allowed; }
.fpCampo .dica{ font-size:var(--t-mini); color:var(--fraco); margin-top:4px; }
.fpCampo input.salvando{ border-color:#c4b5fd; } 
.fpCampo input.salvo{ border-color:var(--bom); background:var(--bom-claro); }
.fpCampo input.erro{ border-color:var(--ruim); background:var(--ruim-claro); }

/* selo usado nas abas (bonificação, pausado, perdendo buy box…) */
.fpSelo{ display:inline-block; padding:1px 7px; border-radius:20px; font-size:10.5px; font-weight:600;
  letter-spacing:.2px; vertical-align:middle; }
.fpSelo.bom{ background:var(--bom-claro); color:var(--bom); }
.fpSelo.ruim{ background:var(--ruim-claro); color:var(--ruim); }
.fpSelo.aviso{ background:var(--aviso-claro); color:var(--aviso); }
.fpSelo.frio{ background:var(--bg); color:var(--mut); }

.fpVazio{ padding:34px 10px; text-align:center; color:var(--fraco); font-size:13.5px; }
.fpNota{ font-size:12.5px; color:var(--mut); background:var(--bg); border:1px solid var(--linha);
  border-radius:var(--r-campo); padding:9px 12px; margin-bottom:14px; }

/* a linha da lista de Produtos vira clicável */
#prBody tr{ cursor:pointer; }
#prBody tr input, #prBody tr button{ cursor:auto; }

/* [15/09/2026] Inventário do galpão — tela própria (telas/inventario.js) */
#ivTab input.ivQtd{ height:34px; margin:0; padding:0 8px; border-radius:8px; }
#ivTab .tit{ max-width:none; white-space:normal; overflow:visible; text-overflow:clip; }
#ivTab td.l{ min-width:260px; }
#ivBar .linkbtn{ color:#cbd5e1; }
@media (max-width:640px){ #ivTab td.l{ min-width:180px; } #ivTab input.ivQtd{ width:76px !important; } }

/* [16/09/2026] Situação real como extrato (Vendas): linha a linha, saldo correndo */
.sitWrap{ margin-top:12px; padding-top:8px; border-top:1px solid #eef0f6; overflow:auto; }
.sitExt{ width:100%; border-collapse:collapse; font-size:12.5px; }
.sitExt th{ font-size:11px; color:#64748b; font-weight:600; text-align:right; padding:4px 8px; border-bottom:1px solid #eef0f6; white-space:nowrap; }
.sitExt th.l, .sitExt td.l{ text-align:left; }
.sitExt td{ padding:5px 8px; border-bottom:1px solid #f3f4f8; color:#1a1a2e; vertical-align:top; }
.sitExt td.sitN{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sitExt td.sitD{ white-space:nowrap; color:#64748b; width:1%; }
.sitExt tr.sitTot td{ border-top:2px solid #1a1a2e; border-bottom:2px solid #1a1a2e; font-weight:700; background:#fafafe; }
.sitExt tr.sitInfo td{ color:#64748b; border-bottom:1px dashed #eef0f6; }

/* [16/09/2026] Sino de alertas no topo (js/alertas.js) */
.alWrap{ position:relative; flex:0 0 auto; }
.alBtn{ width:30px; height:30px; border-radius:50%; border:1px solid #d7d9e3; background:#fff; color:#64748b; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:16px; position:relative; }
.alBtn:hover, .alBtn.on{ background:#f4f4fb; color:#1a1a2e; }
.alBadge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#dc2626; color:#fff; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff; }
.alBox{ position:absolute; top:40px; right:0; width:min(460px, 94vw); max-height:min(70vh, 560px); overflow:auto; background:#fff; border:1px solid var(--linha); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.14); z-index:40; padding:6px; text-align:left; }
.alHead{ display:flex; justify-content:space-between; align-items:center; padding:6px 10px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--mut); }
.alHead button{ font:inherit; text-transform:none; letter-spacing:0; color:var(--azul); background:none; border:0; cursor:pointer; padding:0; }
.alIt{ padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; gap:10px; align-items:flex-start; }
.alIt:hover{ background:#f4f4fb; }
.alIt.lido{ opacity:.6; }
.alDot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:0 0 auto; background:#2563eb; }
.alIt.lido .alDot{ background:#d7d9e3; }
.alIt.reembolso_ml .alDot{ background:#16a34a; }
.alIt.devolucao_voltou .alDot{ background:#16a34a; }
.alIt.devolucao_perda .alDot, .alIt.liberacao_atrasada .alDot{ background:#dc2626; }
.alIt.precisa_retirar .alDot{ background:#d97706; }
.alIt.troca .alDot{ background:#7c3aed; }
.alIt.promo_rebate .alDot{ background:#d97706; }
.alIt.promo_fim .alDot{ background:#64748b; }
.alIt.troca_paga .alDot{ background:#16a34a; }
.alT{ font-size:13px; color:var(--tinta); font-weight:600; }
.alS{ font-size:12px; color:var(--mut); margin-top:1px; }
.alVazio{ padding:14px 12px; font-size:13px; color:var(--mut); }
/* [22/09/2026] Sino 2 — Minhas pendências (js/meuspend.js). Âmbar para não se confundir com o
   sino da conta, que é vermelho: um é "olha o que aconteceu", o outro é "isso espera por você". */
.mePendBtn{ color:#b45309; border-color:#f3d9a4; background:#fffbeb; }
.mePendBtn:hover, .mePendBtn.on{ background:#fef3c7; color:#92400e; }
#mePendBadge{ background:#d97706; }
.meIco{ width:22px; height:22px; border-radius:6px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:14px; background:#f1f3f9; color:#64748b; margin-top:1px; }
.alIt.me-aprovacao .meIco{ background:#fee2e2; color:#b91c1c; }
.alIt.me-tarefa .meIco{ background:#fef3c7; color:#b45309; }
.alIt.lido .meIco{ background:#f1f3f9; color:#94a3b8; }
.meP{ font-size:11px; color:#94a3b8; margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.meP b{ font-weight:700; }
.mePzAtraso{ color:#b91c1c; }
.mePzHoje{ color:#b45309; }
/* abas Novos / Já vistos: discretas, no estilo dos seletores do sistema (a ativa fica clara, não preta) */
.alAbas{ display:inline-flex; gap:2px; background:#f1f3f9; border-radius:9px; padding:2px; }
.alHead .alAba{ font:inherit; text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; padding:4px 11px; border-radius:7px; border:0; background:transparent; color:#64748b; cursor:pointer; }
.alHead .alAba:hover{ color:#1a1a2e; }
.alHead .alAba.on{ background:#fff; color:#1a1a2e; box-shadow:0 1px 2px rgba(15,23,42,.10); }
.alIt.lido{ opacity:.85; }
.sitExt tr.sitSub td{ color:#64748b; font-size:12px; padding-top:2px; padding-bottom:2px; border-bottom:0; background:#fafbfd; }
.sitExt tr.sitSub td.l{ padding-left:22px; }
.sitExt tr.sitSub td.sitN{ font-variant-numeric:tabular-nums; }
.sitExt tr.sitSub + tr:not(.sitSub) td{ border-top:1px solid #f3f4f8; }
/* extrato dentro da ficha do produto (aba Devolvidos): sem a borda de cima, com fundo leve */
.gpDet .sitWrap{ margin-top:4px; padding:6px 10px 2px; border-top:0; background:#fafbfd; border-radius:10px; }
/* [16/09/2026] aba Devolvidos: uma linha por status (expand abre os pedidos; cada pedido expande a devolução + extrato) */
.dvDot{ width:8px; height:8px; border-radius:50%; background:#94a3b8; display:inline-block; flex:0 0 auto; }
.c-bom .dvDot{ background:#16a34a; } .c-ruim .dvDot{ background:#dc2626; } .c-aviso .dvDot{ background:#d97706; } .c-mut .dvDot{ background:#94a3b8; }
.dvSt{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.dvSt.c-bom{ color:#16a34a; } .dvSt.c-ruim{ color:#dc2626; } .dvSt.c-aviso{ color:#d97706; } .dvSt.c-mut{ color:#64748b; }
/* o bloco e a grade NÃO podem empurrar a largura da tabela de fora (quebrou a tela em 16/09):
   min-width:0 + quebra de linha em todo texto longo */
.dvBloco{ background:#fff; border:1px solid #eef0f6; border-radius:10px; padding:10px 14px; margin-bottom:8px; min-width:0; overflow:hidden; }
.dvTit{ font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
/* Chefe (16/09): "aqui pode ser em linha" — um campo por linha, rótulo à esquerda */
.dvGrid{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dvKV{ font-size:12.5px; color:#1a1a2e; display:flex; gap:10px; align-items:baseline; min-width:0; padding:2px 0; border-bottom:1px dashed #f1f3f8; }
.dvKV:last-child{ border-bottom:0; }
.dvKV span{ color:#64748b; flex:0 0 170px; }
.dvKV b{ font-weight:500; min-width:0; overflow-wrap:anywhere; white-space:normal; }
/* expand dentro de expand: o conteúdo cabe na célula, nunca alarga a tabela de fora */
.gpDet > td > .tblwrap, .gpDet > td > .dvBloco, .gpDet > td > .sitWrap{ max-width:100%; }
.gpDet .sitExt{ table-layout:auto; }
.gpDet .sitExt td.l{ white-space:normal; overflow-wrap:anywhere; }
.gpDet .sitExt td.sitD{ white-space:nowrap; overflow-wrap:normal; width:1%; }   /* a data nunca quebra */

/* ===== Central de Marketing [16/09/2026] — cards de campanha, barra de filtros com painéis, abas, lote ===== */
.mkCards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin:0 0 14px; }
.mkCard{ background:#fff; border:1px solid #e6e8f0; border-left:4px solid #cbd5e1; border-radius:10px; padding:10px 12px; cursor:pointer; min-width:0; transition:box-shadow .12s, border-color .12s; }
.mkCard:hover{ box-shadow:0 2px 10px rgba(30,41,59,.08); }
.mkCard.c-bom{ border-left-color:#16a34a; } .mkCard.c-aviso{ border-left-color:#d97706; } .mkCard.c-mut{ border-left-color:#94a3b8; }
.mkCard.on{ border-color:#4338ca; box-shadow:0 0 0 2px #c7d2fe; background:#f8f9ff; }
.mkCard.vazio{ opacity:.45; }
.mkCardTit{ font-weight:700; font-size:13px; color:#1a1a2e; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mkCardTipo{ margin-top:4px; font-size:11.5px; min-width:0; }
.mkCard .dvSt{ white-space:normal; display:inline; line-height:1.3; }   /* o texto do tipo quebra linha dentro do card, não estoura */
.mkCard .dvSt .dvDot{ display:inline-block; vertical-align:middle; margin-right:5px; }
.mkCardSub{ font-size:11px; color:#64748b; margin-top:4px; }
.mkCardNums{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:11.5px; color:#475569; }
.mkCardNums b{ color:#1a1a2e; }
.mkVerMais{ grid-column:1/-1; justify-self:center; background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:6px 14px; font-size:12.5px; color:#475569; cursor:pointer; }
.mkBar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mkFiltro{ position:relative; }
.mkFBtn{ background:#fff; border:1px solid #e2e8f0; border-radius:9px; padding:7px 12px; font-size:13px; color:#1a1a2e; cursor:pointer; display:inline-flex; align-items:center; gap:6px; width:auto; }
.mkFBtn.on{ border-color:#4338ca; color:#4338ca; background:#f5f6ff; }
.mkFBtn.aberto{ box-shadow:0 0 0 3px #e0e7ff; }
.mkFBtn em{ font-style:normal; background:#4338ca; color:#fff; border-radius:999px; font-size:11px; padding:0 6px; }
.mkFBtn .ti{ font-size:13px; color:#94a3b8; }
.mkPainel{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 10px 30px rgba(30,41,59,.14); padding:12px 14px; width:340px; max-height:70vh; overflow:auto; }
.mkPHead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#64748b; }
.mkLimpar, .mkLimparTudo{ background:none; border:none; color:#dc2626; font-size:12.5px; cursor:pointer; width:auto; padding:2px 4px; }
.mkLimparTudo{ border:1px solid #fecaca; border-radius:9px; padding:6px 10px; }
.mkFRot{ font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.3px; margin:10px 0 4px; }
.mkFRot:first-child{ margin-top:0; }
.mkFPar{ display:flex; gap:8px; }
.mkIn{ width:100%; padding:7px 9px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; font-family:inherit; }
.mkChk{ display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 0; cursor:pointer; color:#1a1a2e; }
.mkChk input{ width:16px; height:16px; accent-color:#4338ca; margin:0; }
.mkBuscaLista{ width:100%; padding:7px 9px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; font-family:inherit; margin:2px 0 4px; }
.mkLista{ max-height:180px; overflow:auto; border-top:1px dashed #eef0f6; }
.mkAbas{ display:flex; gap:4px; border-bottom:2px solid #eef0f6; }
.mkAba{ background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; padding:8px 12px; font-size:13.5px; color:#475569; cursor:pointer; width:auto; display:inline-flex; align-items:center; gap:6px; }
.mkAba.on{ color:#1a1a2e; font-weight:700; border-bottom-color:#4338ca; }
.mkAba em{ font-style:normal; background:#f1f5f9; color:#475569; border-radius:999px; font-size:11px; padding:0 7px; }
.mkAba em.bom{ background:#dcfce7; color:#15803d; } .mkAba em.aviso{ background:#fef3c7; color:#b45309; }
.mkOrdem{ padding:8px 10px; border:1px solid #e2e8f0; border-radius:9px; font-size:13px; font-family:inherit; background:#fff; color:#1a1a2e; }
.mkLote{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#f5f6ff; border:1px solid #c7d2fe; border-radius:10px; padding:8px 12px; margin:10px 0; font-size:13px; }
.mkSel{ width:16px; height:16px; accent-color:#4338ca; }
.mkMl{ color:#4338ca; text-decoration:none; font-weight:600; }
.mkMl:hover{ text-decoration:underline; }
/* a lista de Marketing: título e campanha quebram linha em vez de empurrar as colunas de números pra fora */
#mkBody td:nth-child(2){ max-width:360px; white-space:normal; }
#mkBody td:nth-child(2) a.mkProd{ display:inline; }
#mkBody td:nth-child(3){ max-width:200px; white-space:normal; }
#mkBody td .skul{ white-space:normal; }
/* [23/09/2026] Precificar: a coluna Fazer é texto e quebra linha; as outras seguem a largura fixa (sem tabela de 3 m) */
/* [23/09/2026] a tabela do Precificar é #pcTab — NÃO #prTab, que é a lista Produtos › cadastro
   (o mesmo id nas duas espremia a coluna Produto do cadastro com o table-layout:fixed daqui). */
#pcTab{ table-layout:fixed; }
#pcTab td{ white-space:normal; vertical-align:top; }
#pcTab td.l .tit{ max-width:none; white-space:normal; }
#prWrap tr.selrow > td{ background:#f0fdf4 !important; }
/* [24/09/2026] Precificar: uma linha por par embaixo do produto ("como se fosse um Excel") */
#pcTab tr.prParRow > td{ background:#fafbfd; font-size:12.5px; padding-top:6px; padding-bottom:6px; border-top:1px dashed #eef0f5; }
#pcTab tr.prParRow.selrow > td{ background:#f7fdf9 !important; }
#pcTab .prPreco{ flex:none; }
/* [24/09/2026] Precificar em lista única: separador dos pausados, opções do par e o rodapé do produto */
#pcTab tr.prSep > td{ background:#f1f5f9; color:#64748b; font-weight:700; font-size:12px; padding-top:8px; padding-bottom:8px; }
#pcTab tr.prOpcRow > td, #pcTab tr.prRodape > td{ background:#fafbfd; font-size:12px; }
#pcTab tr.prRodape > td{ color:#64748b; padding-top:6px; padding-bottom:8px; border-top:1px dashed #eef0f5; }
#pcTab table.prOpc{ width:auto; border-collapse:collapse; font-size:12px; table-layout:auto; }
#pcTab table.prOpc td, #pcTab table.prOpc th{ padding:3px 10px; border-bottom:1px solid #eef0f5; text-align:right; white-space:nowrap; }
#pcTab table.prOpc td.l, #pcTab table.prOpc th.l{ text-align:left; white-space:normal; }

/* [26/09/2026] Planejamento (a Oportunidades com os nossos produtos): colunas por modo.
   nossos → some o lote de teste dos novos; novos → somem as colunas do plano; Tudo mostra as duas. */
#tabelaO.modoNovos .col-p_vendeu, #tabelaO.modoNovos .col-p_ritmo, #tabelaO.modoNovos .col-p_semest, #tabelaO.modoNovos .col-p_estoque,
#tabelaO.modoNovos .col-p_comprar, #tabelaO.modoNovos .col-p_lucro, #tabelaO.modoNovos .col-p_lped, #tabelaO.modoNovos .col-p_porque{ display:none; }
#tabelaO.modoNossos .col-qtd, #tabelaO.modoNossos .col-invest, #tabelaO.modoNossos .col-ranking, #tabelaO.modoNossos .col-atualizado{ display:none; }
/* [26/09 à tarde] o ⭐ da loja oficial vai junto do vendedor (a coluna "Loja oficial?" saiu: Chefe, "podemos tirar") */
tr.planorow td .skul.inl{ display:inline; margin:0; }
.planomodo{ flex-wrap:wrap; }
.planomodo .fcabe.sub{ font-weight:500; padding-left:8px; padding-right:8px; color:#7a8699; }
.planomodo .fcabe.sub.on{ color:#1e293b; }
.sitbadge{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
tr.planorow td{ vertical-align:top; }
tr.planorow td .skul{ display:block; margin:2px 0 0; }

/* ===== [26/09/2026 à noite] Planejamento POR PROCESSO — o teste do Chefe =====
   "Para funcionários não está legal… separada por status: a linha Novos abre o expand com os produtos novos, a linha
   Nossos abre outro… ir detalhando processo por processo." Dois grupos, uma seção por decisão, só as colunas da decisão.
   As seções são tabelas aninhadas numa única linha de #tbodyO (colspan), para os cliques (ficha, ofertas, fornecedores,
   custo, frete, marcar) continuarem chegando aos mesmos ouvintes da tabela grande. */
.planolayout{ margin-left:auto; display:inline-flex; gap:4px; background:#e6e9f4; padding:3px; border-radius:10px; }
.planolayout .fcabe.lay{ font-weight:600; }
#viewOport.porprocesso #planoModo .fcabe[data-m]{ display:none; }           /* os status viram as seções */
#viewOport.porprocesso #oportFiltro, #viewOport.porprocesso #oportColBtn{ display:none; }   /* a Situação vira seção; as colunas são da seção */
#tabelaO.modoProcessos > thead{ display:none; }
#tabelaO.modoProcessos{ width:100%; }
#tabelaO.modoProcessos > tbody > tr.procrow > td.proccell{ position:static; min-width:0; max-width:none; padding:0 0 8px; box-shadow:none; background:transparent; text-align:left; }
#tabelaO.modoProcessos > tbody > tr.procrow:hover > td.proccell{ background:transparent; }
.procgrp{ margin:0 0 12px; }
.prochead{ position:sticky; left:0; width:max-content; max-width:calc(100vw - 340px); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px;
  text-align:left; border:none; background:#f1f2f8; border-radius:10px; padding:10px 14px; font-family:inherit; cursor:pointer; color:#1e293b; box-sizing:border-box; }
.prochead.grp{ background:#e6e9f4; padding:12px 14px; }
.prochead:hover{ background:#e9ebf5; }
.prochead.grp:hover{ background:#dfe3f1; }
.prochead .chev{ width:12px; color:#64748b; font-size:12px; }
.prochead .proctit{ font-weight:700; font-size:14px; }
.prochead.sec .proctit{ font-size:13px; }
.prochead .procn{ font-weight:700; color:#2563eb; font-size:12px; background:#fff; padding:1px 8px; border-radius:999px; }
.prochead .procsum{ color:#0f766e; font-weight:600; font-size:12px; }
.prochead .procdesc{ flex-basis:100%; margin-left:22px; color:#7a8699; font-size:12px; font-weight:500; line-height:1.35; }
.procsec{ margin:6px 0 6px 22px; }
.procsec.vazia .prochead{ opacity:.55; }
.procvazio{ padding:8px 14px 10px; color:#94a3b8; font-size:12px; position:sticky; left:0; width:max-content; }
.secwrap{ padding:6px 0 4px; }
.sectab{ width:auto; min-width:max-content; }
.sectab > thead th{ position:sticky; top:0; background:#fff; z-index:9; box-shadow:inset 0 -1px 0 var(--linha); }

/* ===== [27/09/2026] Vendas mês a mês — a "tabela do Excel" do Chefe: produtos em linha, meses em coluna ===== */
#viewMensal .tblwrap{ overflow:auto; max-height:76vh; max-width:100%; }
/* [27/09 à noite] as duas tabelas seguem a largura da página (Chefe: "deixar as colunas automáticas para seguir a página na
   largura"): a tabela ocupa o card inteiro, a coluna Produto tem 350 px e os meses / dias dividem o resto. Quando o conteúdo
   não cabe (notebook, os 31 dias), fica na largura do conteúdo, com rolagem de lado e o Produto preso à esquerda. */
#tabelaM{ width:100%; min-width:max-content; }
#tabelaM thead th{ z-index:10; white-space:nowrap; }
#tabelaM th:first-child, #tabelaM td:first-child{ position:sticky; left:0; z-index:6; background:#fff; box-shadow:1px 0 0 var(--linha); width:350px; min-width:350px; max-width:350px; }
#tabelaM thead th:first-child{ z-index:12; background:#fff; box-shadow:1px 0 0 var(--linha), inset 0 -1px 0 var(--linha); }
#tabelaM tbody tr:hover td:first-child{ background:#fafbfe; }
#tabelaM th.mth{ cursor:pointer; user-select:none; min-width:84px; }
#tabelaM th.mth:hover{ color:#1e293b; }
#tabelaM th.mth.semdados{ color:#c3c8d4; }
#tabelaM th.many, #tabelaM td.many{ background:#f6f7fb; font-weight:700; }
#tabelaM td.mcel{ padding:7px 8px; line-height:1.25; }
#tabelaM td.mcel b{ font-size:13px; }
#tabelaM td.mcel .mm2{ font-size:11px; font-weight:600; }
#tabelaM td.mcel .mm2.pos{ color:#16a34a; } #tabelaM td.mcel .mm2.rup7{ color:#d97706; } #tabelaM td.mcel .mm2.neg{ color:#dc2626; }
#tabelaM td.mvazia{ color:#cbd5e1; }
#tabelaM td.mvazia.furo .muted{ color:#f59e0b; font-weight:700; }   /* vendeu antes e depois, mas não neste mês */
#tabelaM tr.mtot td{ background:#eef2f9; border-bottom:2px solid #dbe1ee; }
#tabelaM tr.mtot td:first-child{ background:#eef2f9; }
#tabelaM tr.mtot td.mcel b{ font-size:13.5px; }
/* dia a dia (2ª tabela da tela): colunas estreitas, fim de semana sombreado, dias futuros em branco */
#tabelaD{ width:100%; min-width:max-content; }
#tabelaD thead th{ z-index:10; white-space:nowrap; }
#tabelaD th:first-child, #tabelaD td:first-child{ position:sticky; left:0; z-index:6; background:#fff; box-shadow:1px 0 0 var(--linha); width:350px; min-width:350px; max-width:350px; }
#tabelaD thead th:first-child{ z-index:12; background:#fff; box-shadow:1px 0 0 var(--linha), inset 0 -1px 0 var(--linha); }
#tabelaD tbody tr:hover td:first-child{ background:#fafbfe; }
#tabelaD th.dth{ cursor:pointer; user-select:none; min-width:38px; padding-left:4px; padding-right:4px; line-height:1.1; }
#tabelaD th.dth .dsem{ display:block; font-size:9.5px; font-weight:500; color:#a3aab8; }
#tabelaD th.dth.fds, #tabelaD td.fds{ background:#f6f7fb; }
#tabelaD th.dth.futuro, #tabelaD td.futuro{ background:#fff; color:#e2e8f0; }
#tabelaD th.many, #tabelaD td.many{ background:#eef2f9; font-weight:700; min-width:76px; }
#tabelaD td.dcel{ padding:6px 4px; line-height:1.2; }
#tabelaD td.dcel b{ font-size:12.5px; }
#tabelaD td.dcel b.neg{ color:#dc2626; }
#tabelaD td.dcel .dm2{ font-size:10px; font-weight:600; color:#64748b; white-space:nowrap; }
#tabelaD td.dcel .dm2.pos{ color:#16a34a; }
#tabelaD td.dvazia{ color:#dbe1ee; padding:6px 4px; }
#tabelaD tr.mtot td{ background:#eef2f9; border-bottom:2px solid #dbe1ee; }
#tabelaD tr.mtot td.fds{ background:#e6eaf4; }
#tabelaD tr.mtot td:first-child{ background:#eef2f9; }
/* blocos por situação nas duas tabelas (ativos · pausados · sem estoque · parados) */
#tabelaM tr.mgrp td, #tabelaD tr.mgrp td{ position:static; width:auto; max-width:none; min-width:0; background:#f8fafc; border-top:2px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:7px 12px; text-align:left; box-shadow:none; }
#tabelaM tr.mgrp td .grpin, #tabelaD tr.mgrp td .grpin{ position:sticky; left:12px; width:max-content; font-size:12px; color:#334155; }
#tabelaM tr.mgrp td .grpin b, #tabelaD tr.mgrp td .grpin b{ font-size:12.5px; }
#tabelaM th.mth.l, #tabelaD th.dth.l{ text-align:left; }
/* nome e linha cinza nunca invadem a coluna do lado: cortam com "…" (o texto inteiro fica na dica); na linha dos totais a
   linha cinza quebra em duas */
#tabelaM td:first-child .tit, #tabelaD td:first-child .tit{ max-width:calc(100% - 15px); }
#tabelaM td:first-child .skul, #tabelaD td:first-child .skul{ overflow:hidden; text-overflow:ellipsis; }
#tabelaM tr.mtot td:first-child .skul, #tabelaD tr.mtot td:first-child .skul{ white-space:normal; }
/* [27/09] legenda das cores das duas tabelas (Chefe: "como posso ter uma legenda dessas cores?") */
.mleg{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0 0 12px; font-size:11.5px; color:#64748b; line-height:1.5; }
.mleg > span{ display:inline-flex; align-items:center; gap:5px; }
.mleg .mleg-t{ font-weight:600; color:#475569; text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; }
.mleg b, .mleg em{ font-weight:700; font-style:normal; }
.mleg .lg-pos{ color:#16a34a; } .mleg .lg-rup{ color:#d97706; } .mleg .lg-neg{ color:#dc2626; }
.mleg .lg-furo{ color:#f59e0b; } .mleg .lg-vz{ color:#94a3b8; } .mleg .lg-ent{ color:#0f766e; }
.mleg .sitbadge{ margin:0 0 0 4px; }
.mleg .lgsw{ display:inline-block; width:30px; height:12px; border-radius:3px; border:1px solid #e2e8f0; }
.mleg .lgsw-m{ background:linear-gradient(90deg, rgba(37,99,235,.03), rgba(37,99,235,.17)); }
.mleg .lgsw-d{ background:linear-gradient(90deg, rgba(37,99,235,.04), rgba(37,99,235,.22)); }
.mleg .lgsw-fds{ background:#f6f7fb; width:18px; }
/* [27/09] central de gestão, etapa 1 — coluna ESTOQUE HOJE nas duas tabelas e a LENTE do produto (Vendas mês a mês) */
#tabelaM th.mest, #tabelaM td.mest, #tabelaD th.mest, #tabelaD td.mest{ background:#f3f8f6; box-shadow:inset 1px 0 0 #dfe7e3; min-width:88px; }
#tabelaM td.mest, #tabelaD td.mest{ padding:7px 8px; line-height:1.25; }
#tabelaM td.mest b, #tabelaD td.mest b{ font-size:13px; color:#0f766e; }
#tabelaM td.mest .mest2, #tabelaD td.mest .mest2{ font-size:10.5px; font-weight:600; color:#64748b; white-space:nowrap; }
#tabelaM tr.mtot td.mest, #tabelaD tr.mtot td.mest{ background:#e4efea; }
#tabelaM td.mcel .mm2.mads{ color:#0e7490; }
#tabelaM tbody tr[data-sku] td:first-child, #tabelaD tbody tr[data-sku] td:first-child{ cursor:zoom-in; }
.mleg .mleg-lente{ color:#0f766e; }
.lente{ position:fixed; z-index:60; background:#fff; border:1px solid #d9dfeb; border-radius:14px; box-shadow:0 18px 48px rgba(15,23,42,.22);
  display:flex; flex-direction:column; overflow:hidden; font-size:12.5px; color:#1e293b; text-align:left; }
.lente.fixa{ border-color:#93c5fd; box-shadow:0 18px 48px rgba(37,99,235,.22); }
.lente .lnCab{ padding:12px 14px 10px; border-bottom:1px solid #eef1f6; background:#fbfcfe; display:grid; grid-template-columns:1fr auto; gap:3px 10px; flex:0 0 auto; }
.lente .lnCabT{ font-size:14px; line-height:1.3; min-width:0; }
.lente .lnCabT b{ font-weight:700; }
.lente .lnBtns{ display:flex; gap:4px; align-items:flex-start; }
.lente .lnSub{ grid-column:1 / -1; font-size:11.5px; color:#64748b; line-height:1.45; }
.lente .lnLink{ border:0; background:none; padding:0; color:#2563eb; cursor:pointer; font:inherit; }
.lente .lnLink:hover{ text-decoration:underline; }
.lente .lnSec{ padding:10px 0; border-bottom:1px solid #f1f4f9; }
.lente .lnSec:last-child{ border-bottom:0; }
.lente .lnTit{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#475569; margin-bottom:6px; }
.lente .lnTit .lnMut{ text-transform:none; letter-spacing:0; font-weight:500; }
.lente .lnSubT{ font-size:11px; font-weight:700; color:#334155; margin:8px 0 3px; }
.lente .lnBig{ font-size:13px; margin-bottom:6px; }
.lente .lnBig b{ font-size:18px; }
.lente .lnMut{ color:#94a3b8; }
.lente .lnLinha{ margin:3px 0; line-height:1.45; }
.lente .lnChips{ display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 2px; align-items:center; }
.lente .lnChip{ display:inline-flex; gap:4px; align-items:baseline; background:#f1f5f9; border-radius:20px; padding:2px 9px; font-size:11.5px; color:#475569; }
.lente .lnChip b{ color:#1e293b; }
.lente .lnChip.zero{ opacity:.55; }
.lente .lnChip.fora{ background:#fff; border:1px dashed #cbd5e1; }
.lente .lnItem{ margin:4px 0; line-height:1.45; }
.lente .lnTag{ display:inline-block; font-size:10.5px; font-weight:700; border-radius:10px; padding:1px 7px; margin-right:2px; }
.lente .lnTag.rod{ background:#dcfce7; color:#166534; } .lente .lnTag.prog{ background:#e0e7ff; color:#3730a3; } .lente .lnTag.disp{ background:#fef3c7; color:#92400e; }
.lente .lnTag.cot{ background:#fef3c7; color:#92400e; } .lente .lnTag.ped{ background:#e0f2fe; color:#075985; }
.lente .lnTab{ width:100%; border-collapse:collapse; font-size:12px; }
.lente .lnTab th{ font-size:10.5px; font-weight:600; color:#94a3b8; text-align:right; padding:3px 6px; border-bottom:1px solid #eef1f6; white-space:nowrap; }
.lente .lnTab td{ text-align:right; padding:4px 6px; border-bottom:1px solid #f5f7fb; vertical-align:top; white-space:normal; }
.lente .lnTab td:first-child, .lente .lnTab th:first-child{ text-align:left; color:#64748b; }
.lente .lnTab.lnAn td:first-child{ color:#1e293b; white-space:nowrap; }
.lente .lnTab a{ color:#2563eb; text-decoration:none; }
.lente .pos{ color:#16a34a; font-weight:600; } .lente .neg{ color:#dc2626; } .lente .rup7{ color:#d97706; font-weight:600; }
.lente .lnCarr{ padding:14px 0; color:#64748b; }
.lente .lnCarr .ti-loader{ display:inline-block; animation:lnGira 1s linear infinite; }
@keyframes lnGira{ to{ transform:rotate(360deg); } }
.lente .lnErro{ padding:10px 12px; background:#fef2f2; color:#b91c1c; border-radius:8px; margin:8px 0; }
.lente .lnPe{ font-size:11px; margin-top:6px; }
.lente .lnBtn{ border:1px solid #e2e8f0; background:#fff; border-radius:8px; height:28px; padding:0 10px; display:inline-flex; align-items:center; cursor:pointer; color:#475569; font:inherit; font-size:12px; font-weight:600; }
.lente .lnBtn:hover{ color:#1e293b; border-color:#cbd5e1; }
.lente .lnBtn.on{ color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; }
.lente .lnBtn.lnX{ width:28px; padding:0; justify-content:center; font-size:14px; }
/* [27/09, lente v2] duas colunas: ANÁLISE à esquerda, AÇÕES à direita — cada uma rola sozinha */
.lente .lnCols{ display:grid; grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr); flex:1 1 auto; min-height:0; }
.lente .lnCol{ overflow:auto; padding:0 16px 14px; min-height:0; }
.lente .lnDir{ background:#fbfcfe; box-shadow:inset 1px 0 0 #e6eaf2; }
.lente .lnColTit{ position:sticky; top:0; z-index:2; background:#fff; margin:0 -16px; padding:9px 16px 7px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0f172a; border-bottom:1px solid #eef1f6; }
.lente .lnDir .lnColTit{ background:#fbfcfe; color:#1d4ed8; }
.lente .lnTab.lnPromo tr.lnGrp{ cursor:pointer; }
.lente .lnTab.lnPromo tr.lnGrp:hover td{ background:#f1f5fb; }
.lente .lnTab.lnPromo tr.lnGrp.on td{ background:#eef4ff; border-bottom-color:#dbe5f7; }
.lente .lnTab tr.lnGrpDet td{ background:#fff; font-size:11.5px; }
.lente .lnTab tr.lnGrpDet td:first-child{ padding-left:22px; }
.lente .lnSeta{ display:inline-block; width:10px; color:#64748b; }
.lente .lnAcao{ border:1px solid #93c5fd; background:#eff6ff; color:#1d4ed8; border-radius:7px; padding:3px 10px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.lente .lnAcao:hover{ background:#dbeafe; }
.lente .lnAcao.sair{ border-color:#fecaca; background:#fff5f5; color:#b91c1c; }
.lente .lnAcao.sair:hover{ background:#fee2e2; }
.lente .lnAcao.off{ border-color:#e2e8f0; background:#f8fafc; color:#94a3b8; cursor:not-allowed; }
.lente .lnAcao[disabled]:not(.off){ opacity:.6; cursor:wait; }
.lente .lnAcoes{ white-space:nowrap; }
.lente .lnAcoes .lnAcao + .lnAcao{ margin-left:4px; }
.lente .lnNota{ font-size:11px; color:#64748b; margin-top:7px; line-height:1.45; }
.lente .lnCorta{ display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.lente .lnBarra{ display:inline-block; width:34px; height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:4px; }
.lente .lnBarra i{ display:block; height:100%; }
@media (max-width: 1000px){
  .lente .lnCols{ grid-template-columns:1fr; overflow:auto; }
  .lente .lnCol{ overflow:visible; }
  .lente .lnDir{ box-shadow:inset 0 1px 0 #e6eaf2; }
}
.lente .lnSubL{ font-size:11px; }
.lente .lnAbrir{ font-size:11px; color:#2563eb; white-space:nowrap; }
.lente .lnTab.lnPromo td:first-child{ min-width:180px; }
.lente .lnTab td.nw{ white-space:nowrap; }
.lente .lnFaixa{ font-size:10.5px; }
/* [27/09, lente v3] Chefe: "tudo na lente, mas no expande" — cada assunto é um bloco que abre e fecha; o título mostra o resumo */
.lente .lnColTit{ display:flex; align-items:baseline; gap:10px; }
.lente .lnColBtns{ margin-left:auto; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:#94a3b8; white-space:nowrap; }
.lente .lnGrupo{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin:12px 2px 5px; }
.lente .lnBl{ border:1px solid #e6eaf1; border-radius:9px; background:#fff; margin:0 0 5px; }
.lente .lnBl.on{ border-color:#c7d2fe; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.lente .lnBlCab{ display:flex; align-items:baseline; gap:8px; width:100%; border:0; background:none; padding:7px 10px; cursor:pointer; font:inherit; color:inherit; text-align:left; border-radius:9px; }
.lente .lnBlCab:hover{ background:#f6f8fc; }
.lente .lnBl.on > .lnBlCab{ border-bottom:1px solid #eef1f6; border-radius:9px 9px 0 0; background:#f8faff; }
.lente .lnBlTit{ flex:0 0 158px; font-weight:700; font-size:12.5px; color:#0f172a; }
.lente .lnBlRes{ flex:1 1 auto; min-width:0; font-size:11.5px; color:#64748b; line-height:1.45; }
.lente .lnBlRes b{ color:#1e293b; }
.lente .lnBlRes b.pos{ color:#16a34a; } .lente .lnBlRes b.neg{ color:#dc2626; } .lente .lnBlRes b.rup7{ color:#d97706; }
.lente .lnBlCorpo{ padding:6px 12px 10px; }
.lente .lnTopo{ font-size:11px; color:#94a3b8; margin:2px 0 6px; line-height:1.45; }
.lente .lnAtencao{ border:1px solid #fde68a; background:#fffbeb; border-radius:9px; padding:7px 10px; margin:10px 0 2px; }
.lente .lnAtencao.ok{ border-color:#bbf7d0; background:#f0fdf4; color:#166534; font-size:11.5px; }
.lente .lnAtT{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#92400e; margin-bottom:3px; }
.lente .lnAtL{ font-size:11.5px; line-height:1.45; margin:2px 0; color:#334155; }
.lente .lnPonto{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; background:#16a34a; }
.lente .lnAtL.s3 .lnPonto{ background:#dc2626; } .lente .lnAtL.s2 .lnPonto{ background:#f59e0b; } .lente .lnAtL.s1 .lnPonto{ background:#94a3b8; }
.lente .lnTag.cinza{ background:#f1f5f9; color:#475569; }
.lente .lnSelo{ display:inline-block; font-size:10.5px; font-weight:700; border-radius:10px; padding:1px 7px; }
.lente .lnKVs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 14px; margin:2px 0 6px; }
.lente .lnKV{ display:flex; gap:8px; font-size:12px; line-height:1.4; }
.lente .lnKV span{ flex:0 0 108px; color:#94a3b8; }
.lente .lnKV b{ font-weight:600; color:#1e293b; min-width:0; }
.lente .lnCat{ padding:4px 0 8px; border-bottom:1px dashed #e6eaf1; margin-bottom:6px; }
.lente .lnCat:last-of-type{ border-bottom:0; }
.lente .lnTab tr.lnNosso td{ background:#f0fdf4; }
.lente .lnTab th.l, .lente .lnTab td.l{ text-align:left; }
.lente a{ color:#2563eb; text-decoration:none; }
.lente a:hover{ text-decoration:underline; }
@media (max-width: 1000px){
  .lente .lnBlTit{ flex-basis:120px; }
  .lente .lnKVs{ grid-template-columns:1fr; }
  .lente .lnCols{ align-content:start; }
  .lente .lnCol{ min-height:auto; }   /* uma coluna só: a análise inteira e depois as ações (sem cortar a de cima) */
}