/* ============================================================================
   Social Nudge — CAMADA "LIMA": a identidade visual do /marta como padrão da casa.
   PADRÃO da casa desde 22/09/2026 (rollout quick 260922-pqf, OK do Carlos). Piloto no
   /pri-duprat em 21/09 (quick 260921-fcl). Vale para todo dash de marca Social Nudge, a
   central (dash/index.html), o /carlos e a tela de login. FORA: /marta, /giullya-imersao
   (marca MAGNETIC.AI), /leila-zara (tokens próprios) e o painel VSL (tema anterior).

   CONTRASTE (decisão do rollout): no tema CLARO o --accent é oliva #6B6D00 (5,51:1 no
   branco, 5,13:1 no #F7F7F2, 5,00:1 no #F2F4F7) porque os dashs usam --accent como COR DE
   TEXTO (kicker, números, links). O lima de marca (#FAFC59/#D4D62A/#B5B71A) como texto no
   branco fica em 1,1–2,2:1. Onde se quer PREENCHIMENTO lima, a regra usa --lima/--lima-500
   explicitamente (barras, chips, faixa do kpi); ativo = lima cheio com texto #101828.
   No escuro o --accent é o próprio lima #FAFC59 (16,2:1 no #16181C).

   COMO LIGAR num dashboard — uma linha, logo DEPOIS da folha da casa:
       <link rel="stylesheet" href="/dash-theme.css">
       <link rel="stylesheet" href="/dash-theme-lima.css">
   A ordem é o mecanismo: esta folha herda as correções FUNCIONAIS da dash-theme.css
   (celular, armadilha do grid, quirks de tabela) e troca só a APARÊNCIA. Mesma regra
   de lá: nada de !important, empate de especificidade se resolve pela posição.

   O QUE VEM DO /marta: paleta lima + cereja sobre #F7F7F2, hero preto de canto 28px,
   títulos em Trade Gothic Next caixa-alta, corpo em fonte de sistema, cartão branco com
   sombra leve, chip ativo lima, barra "melhor" em cereja.
   O QUE NÃO VEM: a marca. Logo, nome e grafismo no hero são da Social Nudge. O PNG de
   anéis do /marta tem o ímã da MAGNETIC.AI no centro — aqui os anéis são CSS puro.

   FONTE: Trade Gothic Next é comercial (Linotype) e está em /fonts por causa do /marta.
   Se a licença não cobrir o uso geral, basta apagar os dois @font-face: o fallback é
   Barlow Condensed (se instalada) e depois a sans do sistema — o layout não depende dela.
   ============================================================================ */
@font-face{font-family:'Trade Gothic Next';src:url('/fonts/TradeGothicNextLTPro-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Trade Gothic Next';src:url('/fonts/TradeGothicNextLTPro-Heavy.ttf') format('truetype');font-weight:900;font-display:swap}

/* ── Paleta — os 4 estados, pelo mesmo motivo da folha da casa ───────────────*/
:root{
  --lima:#FAFC59; --lima-500:#D4D62A; --lima-600:#B5B71A; --cereja:#E8285F; --cereja-50:#FDE8EF;
  --bg:#F7F7F2; --panel:#FFFFFF; --elev:#F2F4F7; --line:#EAECF0; --grid:transparent;
  --ink:#101828; --dim:#475467; --faint:#667085;
  --accent:#6B6D00; --accent-soft:rgba(181,183,26,.12);
  --good:#0A7266; --good-soft:rgba(10,114,102,.12);
  --warn:#E08700; --warn-soft:rgba(224,135,0,.12);
  --bad:#E8285F; --bad-soft:rgba(232,40,95,.10); --hot:#E8285F;
  --r:16px; --hero:#0A0B0D;
  --sombra:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --font-h:'Trade Gothic Next','Barlow Condensed','Arial Narrow',sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --display:var(--font-h);
}
:root[data-theme="light"]{
  --bg:#F7F7F2; --panel:#FFFFFF; --elev:#F2F4F7; --line:#EAECF0; --grid:transparent;
  --ink:#101828; --dim:#475467; --faint:#667085;
  --accent:#6B6D00; --accent-soft:rgba(181,183,26,.12);
  --good:#0A7266; --good-soft:rgba(10,114,102,.12); --warn:#E08700; --warn-soft:rgba(224,135,0,.12);
  --bad:#E8285F; --bad-soft:rgba(232,40,95,.10); --hot:#E8285F; --hero:#0A0B0D;
  --sombra:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
:root[data-theme="dark"]{
  --bg:#0A0B0D; --panel:#16181C; --elev:#1E2126; --line:rgba(255,255,255,.10); --grid:transparent;
  --ink:#F2F4F7; --dim:#C4CBD4; --faint:#98A2B3;
  --accent:#FAFC59; --accent-soft:rgba(250,252,89,.14);
  --good:#2ED3B7; --good-soft:rgba(46,211,183,.14); --warn:#FDB022; --warn-soft:rgba(253,176,34,.14);
  --bad:#FF5C8A; --bad-soft:rgba(255,92,138,.14); --hot:#FF5C8A; --hero:#000;
  --sombra:0 1px 3px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0B0D; --panel:#16181C; --elev:#1E2126; --line:rgba(255,255,255,.10); --grid:transparent;
  --ink:#F2F4F7; --dim:#C4CBD4; --faint:#98A2B3;
  --accent:#FAFC59; --accent-soft:rgba(250,252,89,.14);
  --good:#2ED3B7; --good-soft:rgba(46,211,183,.14); --warn:#FDB022; --warn-soft:rgba(253,176,34,.14);
  --bad:#FF5C8A; --bad-soft:rgba(255,92,138,.14); --hot:#FF5C8A; --hero:#000;
  --sombra:0 1px 3px rgba(0,0,0,.5);
}}

/* ── Base e tipografia ──────────────────────────────────────────────────────*/
body{font-family:var(--sans);letter-spacing:0;background:var(--bg);color:var(--ink)}
.wrap{max-width:1120px}
h1{font-family:var(--font-h);font-weight:900;text-transform:uppercase;letter-spacing:.005em}
h2,.card h2,.subcard-h3{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:14.5px}
.card .note,.sub-h2{font-family:var(--sans);font-size:12px;color:var(--faint);line-height:1.45}
.val,.strip .v{font-family:var(--font-h);font-weight:900;letter-spacing:.005em}
.val{font-size:29px}
.strip .v{font-size:19px}
.lbl,.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint)}
.kpi .foot,.kpi .hint{font-family:var(--sans);font-size:11.5px;color:var(--faint);line-height:1.35}
td,th,.mono,.chip,.sv,.cpl,.dspend,.dl,.pill,.fv,.bn{font-family:var(--mono)}
td,th{font-size:12px;letter-spacing:0}
.periodsum{font-family:var(--sans);font-size:12px;color:var(--dim)}
.foot-note{font-family:var(--sans);font-size:11.5px;color:var(--faint);line-height:1.6}

/* ── Forma: cartão branco, borda fria, sombra leve ─────────────────────────*/
.card,.kpi,.strip,.controls{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sombra)}
.controls{border-radius:14px}
.kpi::before{width:3px;opacity:1;background:var(--lima-500)}
.kpi.good::before{background:var(--good)} .kpi.warn::before{background:var(--warn)} .kpi.bad::before{background:var(--cereja)}
.dinput{border-radius:8px;background:var(--elev);border-color:var(--line);color:var(--ink)}

/* chips de período, toggles e abas: o ativo é LIMA cheio com texto escuro (nos dois temas) */
.qchip{font-family:var(--sans);font-size:12px;color:var(--dim);background:var(--elev);border:1px solid var(--line);border-radius:100px}
.qchip:hover{border-color:var(--lima-500);color:var(--ink)}
.qchip.on{background:var(--lima);border-color:var(--lima-500);color:#101828;font-weight:600}
.rtoggle{border-color:var(--line);background:var(--panel)}
.tbtn{font-family:var(--sans);font-size:12px;color:var(--dim)}
.tbtn.on{background:var(--lima);color:#101828;font-weight:600}
/* abas de seção (o /marta usa .tabs/.tab; outros dashs usam .modebar/.modebtn) */
.tabs,.modebar{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab,.modebtn{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;
  color:var(--faint);background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:9px 14px;cursor:pointer}
.tab:hover,.modebtn:hover{color:var(--ink)}
.tab.on,.modebtn.on{color:var(--ink);background:none;border-bottom-color:var(--lima-500);font-weight:700}
/* seletor de visão (.vtoggle/.vbtn — david, tassia, salomao-rid, vinicius-5era): só fonte e cor.
   Cada dash tem um LAYOUT diferente (pílulas separadas x segmentado): não mexer em borda/layout. */
.vbtn{font-family:var(--sans);color:var(--dim)}
.vbtn:hover{color:var(--ink)}
.vbtn.on{background:var(--lima);border-color:var(--lima-500);color:#101828;font-weight:600}
/* número-destaque dos blocos de meta/pagamento */
.metabig .big,.pbox .big{font-family:var(--font-h);font-weight:900;letter-spacing:.005em}

/* ── Gráficos: lima chapado, o "melhor" em cereja ─────────────────────────*/
.bar{background:var(--lima-500);border-radius:6px 6px 0 0}
.bar.best{background:var(--cereja)}
/* barras EMPILHADAS guardam significado — a .bar lima acima não pode pintar o fundo delas:
   vinicius-5era: fundo = orgânico (--org), .pg = pago por cima;
   vinicius-rota: fundo neutro, .seg.normal/.seg.zero empilhados.
   :has() dá especificidade maior que .bar e roda em Chrome/Safari/Firefox atuais. */
.bar:has(> .pg){background:var(--org)}
.bar:has(> .seg){background:var(--elev)}
.fill,.fill.m,.prog>i{background:var(--lima-500)}
.ffill{background:var(--lima-500)}
.fstage.won .ffill{background:var(--good)}
.track,.ftrack,.prog{background:var(--elev)}
.cgood{color:var(--good);background:var(--good-soft)} .cwarn{color:var(--warn);background:var(--warn-soft)} .cbad{color:var(--bad);background:var(--bad-soft)}
.win td{background:var(--accent-soft)} .win .rank{color:var(--accent)}
.banner{background:var(--cereja-50);border:1px solid var(--cereja);color:#9B1B41;border-radius:12px}
/* funil do CRM (.crmtbl): faixa de anúncio em lima forte, resto em lima claro */
.crmtbl .bfill{background:color-mix(in srgb,var(--lima-500) 38%,transparent)}
.crmtbl .btraf{background:var(--lima-600)}
:root[data-theme="dark"] .crmtbl .btraf{background:var(--lima)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .crmtbl .btraf{background:var(--lima)}}

/* ── HERO: preto, canto 28px, símbolo Social Nudge dourado ao fundo ────────*/
.hero{background:var(--hero);border:0;border-radius:28px;padding:26px 30px 28px;margin-bottom:18px;color:#fff;overflow:hidden;position:relative}
.hero .glow{display:none}
/* Fundo do hero = SÍMBOLO SOCIAL NUDGE no Gold oficial #C9A243 (23/09, pedido do Carlos: sai o
   anel lima, entra a marca "meio ofuscada", na cor do manual da marca). Vetor redesenhado do logo
   oficial (formulario/Logo.png) em /assets/sn-simbolo-ouro.svg, cor chapada.
   A máscara apaga as duas pontas (os arcos são cortados em linha reta no desenho) e o ::before
   dá um brilho dourado atrás. */
.hero::after{content:"";position:absolute;right:24px;top:50%;width:300px;height:300px;transform:translateY(-50%);
  pointer-events:none;opacity:.9;
  background:url('/assets/sn-simbolo-ouro.svg') center/contain no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.35) 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.35) 86%,transparent 100%)}
.hero::before{content:"";position:absolute;right:-40px;top:50%;width:440px;height:440px;transform:translateY(-50%);
  pointer-events:none;background:radial-gradient(closest-side,rgba(201,162,67,.15),transparent)}
.hero>*{position:relative;z-index:1}
/* login (.lhero): cabeçalho baixo — símbolo menor, encostado à direita, fora do título */
.lhero::after{width:150px;height:150px;right:-18px;opacity:.75}
.lhero::before{width:260px;height:260px;right:-90px}
/* marca: .brand vira flex aqui também, para valer em página sem o CSS de .brand (login) */
.hero .brand{display:flex;align-items:center;margin-bottom:18px;gap:10px}
/* logo = versão "Gold (Original)" do MANUAL DA MARCA (formulario/Social-Nudge-Brand-Book.pdf):
   bloco #C9A243 chapado com o símbolo vazado. Nada de lima nem degradê no logo (pedido do
   Carlos 23/09; o manual proíbe gradiente, sombra e contorno). É background-image (o .mark é <span role="img">, não
   <img>) e vence o --sn-logo creme que cada HTML define. NÃO usar symbol-lima/grafismo-lima:
   são da MAGNETIC.AI (só /marta e /giullya-imersao). logo-sn-lima.png fica no servidor só
   para quem ainda apontar para ele. */
.hero .mark{display:block;flex:none;width:30px;height:30px;background-image:url('/assets/logo-sn-ouro.svg');background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;border:0;border-radius:0}
.hero .wm{font-family:var(--font-h);font-weight:900;font-size:17px;letter-spacing:.06em;color:#fff;line-height:1}
.hero .wsub{font-family:var(--sans);font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.04em;margin-top:3px}
.hero .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--lima);margin-bottom:8px}
.hero .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--lima);margin-bottom:8px}
.hero .tagline{font-family:var(--sans);color:rgba(255,255,255,.62)}
.hero h1{font-family:var(--font-h);font-weight:900;font-size:34px;line-height:1.05;text-transform:uppercase;letter-spacing:.005em;color:#fff}
.hero h1 .sub{color:rgba(255,255,255,.62);font-weight:700}
.hero .chip{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.18);background:transparent;box-shadow:none}
.hero .dot,.dot{background:var(--lima);box-shadow:0 0 0 3px rgba(250,252,89,.2)}
.hero .iconbtn{color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:10px}
.hero .iconbtn:hover{color:#fff;border-color:var(--lima)}
.hero .avatar{border-color:rgba(250,252,89,.35)}
@media (max-width:820px){.hero{padding:20px 18px 22px;border-radius:22px}.hero h1{font-size:26px}.hero::after{right:-70px;opacity:.7}.hero::before{right:-140px}}
@media (max-width:560px){.hero h1{font-size:23px}.val{font-size:26px}.hero::after{right:-120px;opacity:.55}}

/* ── Defensivo: painel VSL não recebe a lima; se um dia receber, não sobrepõe o grafismo MAGNETIC ──*/
.marca-mag .hero::after,.marca-mag .hero::before{display:none}