:root{
  --bg:#070b12; --bg2:#0c1521; --panel:#0f1a28; --panel2:#13212f;
  --line:rgba(90,150,190,.14); --line2:rgba(90,150,190,.28);
  --ink:#e6f1fa; --muted:#7f97ac; --dim:#5a7185;
  --accent:#19e7ff; --accent2:#1488ff;
  --green:#22d39a; --amber:#ffb838; --red:#ff5d6c; --violet:#a98bff; --blue:#4d9bff;
  --grad:linear-gradient(135deg,#1488ff,#19e7ff);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:
  radial-gradient(1200px 700px at 85% -15%,#10243a 0%,var(--bg) 55%) fixed;
  color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;font-size:14px}
a{color:var(--accent);text-decoration:none}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:370px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.brand{font-weight:800;letter-spacing:.28em;font-size:19px;text-align:center}
.brand b{color:var(--accent)}
.brand-sub{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;margin:6px 0 26px}
.login-card label{display:block;font-size:11px;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;margin:14px 0 6px}
.login-card input{width:100%;background:var(--bg2);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:13px;font-size:14px;outline:none}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(25,231,255,.2)}
.btn{width:100%;margin-top:22px;background:var(--grad);color:#04161f;border:none;
  border-radius:10px;padding:13px;font-weight:800;letter-spacing:.06em;cursor:pointer;
  text-transform:uppercase;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.err{background:rgba(255,93,108,.12);border:1px solid var(--red);color:#ffc4ca;
  border-radius:10px;padding:11px;font-size:13px;margin-top:14px;text-align:center}
.note{color:var(--muted);font-size:12px;margin-top:18px;text-align:center;line-height:1.6}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,rgba(10,18,28,.9),rgba(8,13,20,.6));
  border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:5px}
.side .brand{text-align:left;letter-spacing:.2em;font-size:17px;margin:2px 6px 20px}
.nav{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;
  color:var(--muted);cursor:pointer;font-size:14px;font-weight:500;transition:.15s;position:relative}
.nav:hover{background:var(--bg2);color:var(--ink)}
.nav.active{background:linear-gradient(90deg,rgba(25,231,255,.16),rgba(25,231,255,.03));color:#fff}
.nav.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.nav .ic{width:18px;text-align:center;font-size:15px}
.side .foot{margin-top:auto;font-size:12px;color:var(--muted);padding:10px 8px;
  border-top:1px solid var(--line)}
.side .foot b{color:var(--ink)}
.side .foot a{color:var(--dim)}

.main{padding:26px 32px;overflow-y:auto;max-height:100vh}
.top{display:flex;align-items:flex-end;gap:14px;margin-bottom:24px}
.top h1{font-size:23px;margin:0;font-weight:700;letter-spacing:.01em}
.top .sub{color:var(--muted);font-size:13px;margin-top:3px}
.live-dot{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;
  color:var(--green);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(34,211,154,.1);border:1px solid rgba(34,211,154,.3);
  padding:6px 12px;border-radius:999px}
.live-dot i{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

.section{display:none}
.section.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.kpi{position:relative;background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;overflow:hidden;
  transition:.18s;box-shadow:var(--shadow)}
.kpi:hover{transform:translateY(-3px);border-color:var(--line2)}
.kpi .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;margin-bottom:14px}
.kpi .ic.cy{background:rgba(25,231,255,.14);color:var(--accent)}
.kpi .ic.gr{background:rgba(34,211,154,.14);color:var(--green)}
.kpi .ic.am{background:rgba(255,184,56,.14);color:var(--amber)}
.kpi .ic.bl{background:rgba(77,155,255,.14);color:var(--blue)}
.kpi .ic.vi{background:rgba(169,139,255,.14);color:var(--violet)}
.kpi .val{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1}
.kpi .lbl{font-size:12px;color:var(--muted);margin-top:7px}
.kpi.pulse-amber{border-color:rgba(255,184,56,.5);cursor:pointer}
.kpi.pulse-amber:hover{box-shadow:0 0 24px rgba(255,184,56,.25)}

/* Respiro entre blocos: `gap` na seção, no fim deste arquivo.
   Já foi lista de pares (.card + .card, .kpis + .card...), e toda combinação
   não prevista nascia colada, em silêncio. Depois virou `* + *`, que resolvia
   isso mas ainda contava irmão ESCONDIDO: no Financeiro o card de conversões
   some com a fila vazia, e o bloco seguinte herdava a margem. `gap` não vê
   filho com display:none, então some o caso em vez de compensá-lo. */

.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}

.card{background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.card + .card{margin-top:var(--gap-bloco)}
.card h3{margin:0 0 4px;font-size:15px;font-weight:700}
.card .csub{color:var(--muted);font-size:12px;margin-bottom:14px}
.card.hl{border-color:rgba(255,184,56,.4);background:linear-gradient(160deg,#1c1a14,#14110b)}

/* funil visual */
.funnel{display:flex;flex-direction:column;gap:10px}
.fstage{}
.fstage .fl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.fstage .fl b{color:var(--ink)} .fstage .fl span{color:var(--accent);font-weight:700}
.fbar{height:12px;border-radius:7px;background:var(--bg2);overflow:hidden}
.fbar i{display:block;height:100%;border-radius:7px;background:var(--grad);
  box-shadow:0 0 12px rgba(25,231,255,.4);transition:width .6s ease}
.fstage.s-fechado .fbar i{background:linear-gradient(135deg,#11a36f,#22d39a)}

/* aprovações (hero) */
.appr{background:linear-gradient(160deg,#1d1a12,#14110b);
  border:1px solid rgba(255,184,56,.4);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.appr .h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.appr .tag{font-size:10px;padding:3px 9px;border-radius:999px;background:rgba(255,184,56,.18);
  color:var(--amber);text-transform:uppercase;letter-spacing:.08em}
.appr .meta{color:var(--muted);font-size:13px;margin:8px 0 14px}
.btns{display:flex;gap:10px}
.bt{border:none;border-radius:10px;padding:11px 22px;font-size:13px;font-weight:700;cursor:pointer;
  letter-spacing:.03em;transition:.15s}
.bt.ok{background:var(--green);color:#04221a} .bt.ok:hover{filter:brightness(1.1);box-shadow:0 0 20px rgba(34,211,154,.4)}
.bt.no{background:transparent;border:1px solid var(--red);color:var(--red)} .bt.no:hover{background:var(--red);color:#2a0a0e}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0}
.tl .it{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.tl .it:last-child{border-bottom:none}
.tl .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--accent)}
.tl .dot.CREATE{background:var(--green)} .tl .dot.ERROR{background:var(--red)}
.tl .dot.APPROVAL{background:var(--amber)} .tl .dot.ANALYSIS{background:var(--violet)} .tl .dot.INFO{background:var(--dim)}
.tl .txt{flex:1}.tl .who{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* rows / pills */
.row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.row:last-child{border-bottom:none}
.id{font-family:ui-monospace,monospace;color:var(--accent);font-size:12.5px}
.pill{font-size:10px;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--line2);color:var(--muted);font-weight:600}
.pill.running,.pill.pending{color:var(--accent);border-color:var(--accent);background:rgba(25,231,255,.08)}
.pill.awaiting_approval{color:var(--amber);border-color:var(--amber);background:rgba(255,184,56,.08)}
.pill.approved,.pill.done,.pill.ativo{color:var(--green);border-color:var(--green);background:rgba(34,211,154,.08)}
.pill.failed,.pill.cancelled{color:var(--red);border-color:var(--red)}
.mut{color:var(--muted)} .right{margin-left:auto}
.empty{color:var(--muted);font-size:13px;padding:16px 2px;text-align:center}

/* clientes grid */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cc{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s}
.cc:hover{transform:translateY(-2px);border-color:var(--line2)}
.cc .av{width:40px;height:40px;border-radius:11px;background:var(--grad);color:#04161f;
  display:grid;place-items:center;font-weight:800;font-size:17px;margin-bottom:10px}
.cc .nm{font-weight:600} .cc .sl{color:var(--muted);font-size:12px;margin-top:2px}

.addrow{display:flex;gap:10px;margin-top:16px}
.addrow input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:12px 14px;outline:none}
.addrow input:focus{border-color:var(--accent)}
.addrow button{background:var(--grad);color:#04161f;border:none;border-radius:10px;
  padding:0 22px;font-weight:700;cursor:pointer}

.tars-cta{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(20,136,255,.14),rgba(25,231,255,.06));
  border:1px solid var(--line2);border-radius:16px;padding:16px 20px;margin-top:18px;cursor:pointer;transition:.15s}
.tars-cta:hover{border-color:var(--accent);box-shadow:0 0 26px rgba(25,231,255,.18)}
.tars-cta .orb{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#eafbff,var(--accent) 45%,#0a5f7a 80%);
  box-shadow:0 0 22px var(--accent)}
.tars-cta .t1{font-weight:700}.tars-cta .t2{color:var(--muted);font-size:12px}

/* ---------- META / REALIZADO ---------- */
.goal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.goal-head .big{font-size:26px;font-weight:800}
.goal-head .of{color:var(--muted);font-size:13px}
.goal-head .edit{color:var(--dim);cursor:pointer;font-size:12px}
.goal-head .edit:hover{color:var(--accent)}
.gbar{height:14px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.gbar i{display:block;height:100%;border-radius:8px;background:var(--grad);transition:width .6s ease}
.gbar i.over{background:linear-gradient(135deg,#22d39a,#7bffd0)}
.goal-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}
.goal-foot b{color:var(--green)}
.goal-edit{display:flex;gap:8px;margin-top:10px}
.goal-edit input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 12px;outline:none}
.goal-edit input:focus{border-color:var(--accent)}
.goal-edit button{background:var(--grad);color:#04161f;border:none;border-radius:9px;
  padding:0 18px;font-weight:700;cursor:pointer}

/* ---------- RANKING ---------- */
.rank{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.rk{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center}
.rk .pos{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:var(--bg2);color:var(--muted)}
.rk:nth-child(1) .pos{background:linear-gradient(135deg,#ffd66b,#ffb838);color:#3a2600}
.rk:nth-child(2) .pos{background:linear-gradient(135deg,#dfe9f2,#b9c7d6);color:#1c2733}
.rk:nth-child(3) .pos{background:linear-gradient(135deg,#e7a977,#c77f48);color:#2a1500}
.rk .nm{font-weight:600}
.rk .nm small{display:block;color:var(--dim);font-weight:400;font-size:11px}
.rk .bar{height:6px;border-radius:6px;background:var(--bg2);margin-top:5px;overflow:hidden}
.rk .bar i{display:block;height:100%;background:var(--grad);border-radius:6px}
.rk .vl{font-weight:700;color:var(--accent);white-space:nowrap}

/* ---------- ALERTAS ---------- */
.alerts{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.al{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);border-left-width:3px}
.al .ai{font-size:15px;line-height:1.2}
.al.warn{border-left-color:var(--amber)}
.al.info{border-left-color:var(--blue)}
.al.ok{border-left-color:var(--green)}
.al .at{font-size:13px}

/* ---------- EDIÇÃO INLINE (negócios / clientes / jobs) ---------- */
.inp,.sel{background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 10px;outline:none;font-size:13px;font-family:inherit}
.inp:focus,.sel:focus{border-color:var(--accent)}
.sel{cursor:pointer}
.iconbtn{background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:14px;flex:none}
.iconbtn:hover{border-color:var(--red);color:var(--red)}

.ethead,.drow{display:grid;grid-template-columns:1.4fr 1.6fr .9fr 1.1fr 34px;gap:9px;align-items:center}
.ethead{padding:0 4px 8px;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.drow{padding:6px 0;border-top:1px solid var(--line)}
.drow .inp,.drow .sel{width:100%}

.stage-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.st-lead{background:rgba(77,155,255,.16);color:#9cc4ff}
.st-proposta{background:rgba(169,139,255,.16);color:#c9b8ff}
.st-negociacao{background:rgba(255,184,56,.16);color:#ffd98a}
.st-fechado{background:rgba(34,211,154,.16);color:#7af0c4}
.st-perdido{background:rgba(255,93,108,.16);color:#ffb0b7}

.addgrid{display:grid;grid-template-columns:1.4fr 1.6fr .9fr 1.1fr auto;gap:9px;margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--line2)}
.addgrid .inp,.addgrid .sel{width:100%}
.addgrid button{background:var(--grad);color:#04161f;border:none;border-radius:8px;
  padding:0 18px;font-weight:700;cursor:pointer;white-space:nowrap}

/* clientes editáveis */
.cc .nm-edit{width:100%;background:transparent;border:1px solid transparent;color:var(--ink);
  font-weight:700;font-size:14px;border-radius:7px;padding:4px 6px;text-align:center;outline:none}
.cc .nm-edit:hover{border-color:var(--line)}
.cc .nm-edit:focus{border-color:var(--accent);background:var(--bg2)}
.cc .crow{display:flex;gap:6px;margin-top:10px;align-items:center;justify-content:center}
.cc .crow .sel{padding:5px 8px;font-size:12px}
.cc .crow .iconbtn{width:30px;height:30px;font-size:12px}

/* jobs editáveis */
.row .sel{padding:5px 8px;font-size:12px}
.row .iconbtn{width:28px;height:28px;font-size:12px}

/* ---------- DRAWER DE MENSAGENS (comunicação por etapa) ---------- */
.msk{position:fixed;inset:0;background:rgba(3,8,20,.62);backdrop-filter:blur(3px);
  z-index:60;display:none}
.msk.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:61;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border-left:1px solid var(--line2);
  box-shadow:-20px 0 60px rgba(3,8,20,.5);transform:translateX(102%);
  transition:transform .28s var(--ease-out);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dw-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);flex:none}
.dw-head h3{font-family:var(--font-display);font-size:17px;margin:0 0 4px}
.dw-head .sub{color:var(--muted);font-size:12.5px}
.dw-close{position:absolute;top:16px;right:18px;background:var(--bg2);border:1px solid var(--line);
  color:var(--muted);width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:15px}
.dw-close:hover{border-color:var(--red);color:var(--red)}
.dw-body{padding:16px 22px 26px;overflow-y:auto;flex:1}
.mcard{background:var(--bg2);border:1px solid var(--line);border-radius:13px;
  padding:14px 15px;margin-bottom:14px}
.mcard.bad{border-color:rgba(251,191,36,.5)}
.mc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.mc-top b{font-size:13px}
.mc-canal{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.mc-txt{white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--ink);
  background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:10px;padding:12px 13px}
.mc-acts{display:flex;gap:8px;margin-top:11px;align-items:center}
.mc-warn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);
  color:#FCD34D;font-size:12px;padding:9px 11px;border-radius:9px;margin-top:10px}
.btn-copy{background:var(--bg2);border:1px solid var(--line2);color:var(--accent);
  border-radius:9px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer}
.btn-copy:hover{background:rgba(56,189,248,.14)}
.dw-empty{color:var(--muted);font-size:13px;text-align:center;padding:30px 10px}

/* ---------- Drawer do lead: abas Dados / Mensagens ---------- */
.dw-tabs{display:flex;gap:6px;margin-bottom:18px;background:rgba(0,0,0,.20);
  border:1px solid var(--line);border-radius:12px;padding:4px}
.dwt{flex:1;background:transparent;border:none;color:var(--muted);cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;
  padding:9px 0;border-radius:9px;transition:.18s}
.dwt:hover{color:var(--ink)}
.dwt.on{color:var(--accent);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(124,196,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 18px rgba(124,196,255,.07)}

.dw-lab{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:14px 0 6px}
.dw-form .dw-lab:first-child{margin-top:0}
.dw-inp{width:100%}
.dw-form textarea.dw-inp{resize:vertical;line-height:1.55;font-family:inherit}
.dw-acts{display:flex;align-items:center;gap:12px;margin-top:20px}
.dw-ok{font-size:12px;color:var(--green)}

/* Bloco do dinheiro: destacado porque é o campo que vira faturamento. Fica no
   topo do formulário para você não precisar caçar onde digitar o valor. */
.dw-valor{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(124,196,255,.03));
  border:1px solid rgba(124,196,255,.22);border-radius:14px;padding:14px 15px;
  margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 20px rgba(124,196,255,.05)}
.dw-valor .dw-lab{margin-top:0}
.dw-valor input{font-family:var(--font-display);font-weight:800;font-size:20px;
  letter-spacing:-.01em}
.dw-dica{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.55}

/* ---------- Editor de contratos ---------- */
/* Colunas de largura FIXA à direita: com fração (1fr, 1.2fr) elas esticavam
   junto com a tela e abriam um vão enorme entre o nome e o valor, difícil de
   ler de relance. Agora o nome absorve a sobra e valor/vigência/ações ficam
   agrupados. */
.ctrow{display:grid;grid-template-columns:1fr 150px 170px auto;gap:16px;
  align-items:center;padding:14px 2px;border-bottom:1px solid var(--line)}
.ctrow:last-of-type{border-bottom:none}
/* encerrado continua à vista: é ele que explica o passado do gráfico */
.ctrow.fim{opacity:.45}
.ctrow.fim .ctval{color:var(--muted)}
.ctrow b{font-size:13.5px}
.ctmeta{font-size:11.5px;color:var(--muted);margin-top:2px}
.cttipo{font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 7px;border-radius:99px;background:rgba(169,139,255,.16);
  color:var(--violet);border:1px solid rgba(169,139,255,.28)}
.ctval{font-family:var(--font-display);font-weight:800;font-size:16px;
  color:var(--green);letter-spacing:-.01em}
.ctval i{font-style:normal;font-size:10px;font-weight:500;color:var(--muted)}
.ctper{font-size:12px;color:var(--muted);letter-spacing:.02em}
.ctacts{display:flex;gap:5px}
.ctb{background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px;
  line-height:1;transition:.15s}
.ctb:hover{border-color:var(--accent);color:var(--accent)}
.ctb.up:hover{border-color:var(--green);color:var(--green)}
.ctb.del:hover{border-color:var(--red);color:var(--red)}

.ctform:empty{display:none}
.ctform{background:rgba(0,0,0,.20);border:1px solid var(--line);
  border-radius:12px;padding:14px 15px;margin:0 0 12px}
.ctaviso{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:10px;
  padding-left:11px;border-left:2px solid rgba(124,196,255,.45)}
.ctaviso.alerta{border-left-color:var(--amber);color:#e9d9b4}
.ct-msg{font-size:12px;display:inline-block;margin-top:8px}
.ct-novo{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

@media (max-width:980px){
  .ctrow{grid-template-columns:1fr auto;row-gap:6px}
  .ctper{grid-column:1/-1}
}

/* ---------- Fila de conversões (nada sai sem clique) ---------- */
.conv-ver{cursor:pointer;font-size:11.5px;color:var(--accent);letter-spacing:.02em;
  list-style:none;padding:4px 0}
.conv-ver::-webkit-details-marker{display:none}
.conv-ver::before{content:"▸ ";transition:.15s}
details[open] > .conv-ver::before{content:"▾ "}
.conv-pre{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;margin:8px 0 0;font-size:11.5px;line-height:1.55;
  color:#a9cdff;max-height:280px;overflow:auto;white-space:pre-wrap;
  word-break:break-word}
.conv-msg{font-size:12px}

/* ══ FINANCEIRO ═══════════════════════════════════════════════════════ */
/* legenda pequena ao lado do rótulo do KPI (quantos leads, quantos sem valor) */
.fi-sub{color:var(--dim);font-weight:400}

/* A tira da Visão Geral: a leitura de dinheiro antes de qualquer outra coisa */
.fin-tira{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:18px 0;
  cursor:pointer;overflow:hidden;border-radius:16px;
  background:rgba(124,196,255,.14);
  border:1px solid rgba(124,196,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow);
  transition:.18s}
.fin-tira:hover{border-color:rgba(124,196,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 0 26px rgba(56,189,248,.16)}
.fin-tira .ft{background:linear-gradient(160deg,var(--panel2),var(--panel));
  padding:16px 20px;display:flex;flex-direction:column;gap:3px}
.fin-tira .ft span{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted)}
.fin-tira .ft b{font-family:var(--font-display);font-size:24px;letter-spacing:-.01em;
  line-height:1.1}
.fin-tira .ft i{font-style:normal;font-size:11.5px;color:var(--dim)}
.fin-tira .v-gr{color:var(--green)} .fin-tira .v-cy{color:var(--accent)}
.fin-tira .v-rd{color:var(--red);opacity:.85} .fin-tira .v-am{color:var(--amber)}
@media (max-width:1200px){.fin-tira{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.fin-tira{grid-template-columns:1fr}}

/* ---------- Recebimentos ---------- */
.rc-barra{margin:0 0 16px}
.rcb{height:10px;border-radius:6px;background:var(--bg2);overflow:hidden;
  border:1px solid var(--line)}
.rcb i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#11a36f,#22d39a);
  box-shadow:0 0 14px rgba(34,211,154,.45);transition:width .5s var(--ease-out)}
.rcnums{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12.5px;
  color:var(--muted)}
.rcnums b{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.rcnums .atras b{color:var(--amber)}
.rcnums .atras{color:var(--amber)}
.rcnums .pct{margin-left:auto;color:var(--dim)}

.rcrow{display:grid;grid-template-columns:1fr 150px 170px auto;gap:16px;
  align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.rcrow:last-child{border-bottom:none}
/* pago sai de cena visualmente: o que importa é o que ainda falta entrar */
.rcrow.pago{opacity:.5}
.rcrow.pago .ctval{color:var(--muted)}
.rcrow.atrasado .ctval{color:var(--amber)}
.rcvenc{font-size:12px;color:var(--muted)}
.rcrow.atrasado .rcvenc b{color:var(--amber)}

/* Altura FIXA, e não é detalhe estético: com maintainAspectRatio:false o
   Chart.js mede o elemento pai. Se o pai crescer junto com o canvas, os dois
   se empurram para sempre e a aba trava a máquina. */
.cash-box{position:relative;height:230px;width:100%;margin:4px 0 6px}
.cash-box canvas{position:absolute;inset:0}
@media (max-width:700px){.cash-box{height:180px}}

/* Cabeçalho do gráfico de receita: número grande + variação do mês */
.cash-topo{display:flex;align-items:center;gap:14px;margin:2px 0 18px}
.cash-val{font-family:var(--font-display);font-weight:800;font-size:32px;
  letter-spacing:-.02em;line-height:1}
.cash-per{font-size:11.5px;color:var(--dim);margin-top:5px;letter-spacing:.04em}
.cash-badge{display:none;align-items:center;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px}
.cash-badge.sobe{color:var(--green);background:rgba(34,211,154,.14);
  border:1px solid rgba(34,211,154,.3)}
.cash-badge.cai{color:var(--red);background:rgba(255,93,108,.12);
  border:1px solid rgba(255,93,108,.3)}

/* ---------- Histórico do lead (aba do drawer) ---------- */
.hist{position:relative;padding-left:18px}
/* o fio que liga os eventos, atrás das bolinhas */
.hist::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(124,196,255,.45),rgba(124,196,255,.05))}
.hev{position:relative;padding:0 0 16px}
.hev > i{position:absolute;left:-18px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--bg2);border:2px solid rgba(124,196,255,.55)}
.hev.etapa > i{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 10px rgba(56,189,248,.6)}
.hev.criado > i{background:var(--green);border-color:var(--green);
  box-shadow:0 0 10px rgba(34,211,154,.5)}
.hev b{font-size:12.5px;color:var(--ink)}
.hev .hq{font-size:11px;color:var(--dim);margin-left:8px;letter-spacing:.02em}
.hev .hde{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.hev .hde s{color:var(--dim);text-decoration-color:rgba(127,151,172,.6)}
.hev .hde b{color:var(--accent);font-weight:600}
.hev.etapa .hde b{color:#fff}

/* Auditoria: aparece só aqui dentro, nunca no card do Kanban. */
.dw-audit{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.7}

/* ---------- KANBAN (pipeline de vendas) — vidro + luz nas bordas ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:16px;
  overflow-x:auto;padding:6px 4px 16px}
.kcol{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(124,196,255,.03));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(124,196,255,.20);border-radius:18px;padding:13px 12px;
  display:flex;flex-direction:column;min-height:150px;transition:.18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 22px rgba(124,196,255,.05), 0 10px 34px rgba(0,0,0,.30);
}
.kcol.kdrag{border-color:rgba(124,196,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(124,196,255,.5), 0 0 26px rgba(124,196,255,.28)}
.kcol-head{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 12px;
  font-weight:700;font-size:13px;color:#eaf4ff;letter-spacing:.02em;
  border-bottom:1px solid rgba(124,196,255,.16);margin-bottom:11px}
.kcol-head .kcol-meta{font-weight:500;font-size:11px;color:#a8cdee}
/* Soma da coluna: a linha de dinheiro do Kanban. Verde no Fechado (entrou),
   vermelho no Perdido (escapou), ciano no resto (ainda está na mesa). */
.kcol-soma{font-family:var(--font-display);font-weight:800;font-size:15px;
  color:var(--accent);letter-spacing:-.01em;margin:-4px 0 10px;
  display:flex;align-items:baseline;gap:3px}
.kcol-soma span{font-size:10px;font-weight:500;color:var(--muted);letter-spacing:.04em}
.kcol-soma.s-fechado{color:var(--green)}
.kcol-soma.s-perdido{color:var(--red);opacity:.75}
.kcol-body{display:flex;flex-direction:column;gap:10px;flex:1;min-height:40px}
.kcard{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:11px 12px;cursor:grab;transition:.14s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 4px 16px rgba(0,0,0,.24);
}
.kcard:hover{border-color:rgba(124,196,255,.6);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(124,196,255,.35), 0 0 20px rgba(124,196,255,.22)}
.kcard{cursor:pointer}
.kcard.dragging{opacity:.5;cursor:grabbing}
.kc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.kc-top b{font-size:13px;line-height:1.25;color:#fff}
.kc-del{background:none;border:none;color:#7e97ad;cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.kc-del:hover{color:#ff6b78}
.kc-svc{font-size:11px;color:#bcd5ec;margin:3px 0 7px}
.kc-val{font-weight:700;font-size:13.5px;color:#8fd0ff}
.kc-empty{color:#6f8aa3;font-size:11px;text-align:center;padding:12px 0;
  border:1px dashed rgba(124,196,255,.16);border-radius:10px}
/* ---- cards de LEAD (prospecção) ---- */
.lead-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ltag{font-size:10px;padding:2px 8px;border-radius:99px;background:rgba(124,196,255,.12);
  color:#a9cdff;border:1px solid rgba(124,196,255,.18)}
.lead-actions{display:flex;gap:8px;margin-top:9px}
.wa-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  text-decoration:none;padding:5px 11px;border-radius:8px;color:#04210f;
  background:linear-gradient(180deg,#3ee37a,#25D366);box-shadow:0 2px 8px rgba(37,211,102,.3)}
.wa-btn:hover{filter:brightness(1.07)}
.mail-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  text-decoration:none;padding:5px 11px;border-radius:8px;color:#cfe6ff;
  background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.30)}
.mail-btn:hover{background:rgba(56,189,248,.24);border-color:rgba(56,189,248,.6)}
.lead-obj{font-size:11px;color:#bcd5ec;margin-top:6px}

/* tom pastel por etapa no título da coluna */
.kcol[data-stage="lead"] .kcol-head{color:#a9cdff}
.kcol[data-stage="novo"] .kcol-head{color:#a9cdff}
.kcol[data-stage="contato"] .kcol-head{color:#9fe0ff}
.kcol[data-stage="diagnostico"] .kcol-head{color:#d2c4ff}
.kcol[data-stage="proposta"] .kcol-head{color:#ffe1a3}
.kcol[data-stage="proposta"] .kcol-head{color:#d2c4ff}
.kcol[data-stage="negociacao"] .kcol-head{color:#ffe1a3}
.kcol[data-stage="fechado"] .kcol-head{color:#9bf3d4}
.kcol[data-stage="perdido"] .kcol-head{color:#ffc2c8}

::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
@media (max-width:760px){.app{grid-template-columns:1fr}.side{display:none}
  /* Duas coisas nesta regra, e as duas precisam estar aqui.
     `minmax(0,1fr)` e não `1fr`: `1fr` resolve para minmax(auto,1fr), e o
     `auto` respeita a largura intrínseca do <input>/<select>, então a coluna
     nunca encolhe. Como o .card tem overflow:hidden, o excesso não virava
     rolagem, virava conteúdo CORTADO. Mesma armadilha da linha do editor de
     etapas do WhatsApp.
     E `!important` porque oito lugares do markup trazem grid-template-columns
     INLINE (três deles gerados por JS dentro de template literal), e estilo
     inline só perde para isso. O que a regra diz é "nesta largura, ignore
     qualquer layout de desktop escrito na tag", e não há outro jeito de
     dizer isso em CSS. */
  .ethead,.drow,.addgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .ethead > *,.drow > *,.addgrid > *{min-width:0}
  /* Texto de célula que não cabe passa a cortar com reticências em vez de
     empurrar a linha para fora do card. Reticência avisa que falta coisa;
     corte seco não avisa nada. */
  .ethead > *,.drow > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* a linha de adicionar cliente é flex e não quebrava: o input tem largura
     mínima própria e empurrava o botão para fora */
  .addrow{flex-wrap:wrap}
  .addrow input{min-width:0;flex:1 1 100%}
  /* botão que vinha como coluna `auto` no desktop ocupa a linha inteira */
  .addgrid > button{grid-column:1 / -1}
}

/* ============================================================ */
/* PREMIUM — "Vidro de comando sobre navy profundo"             */
/* (overrides coesos com o relatorio.html; mesmos nomes de var) */
/* ============================================================ */
/* Mesmos tokens do relatório de anúncios (integracao-leads/relatorio-v2.html).
   O painel e o relatório vivem na mesma tela — o relatório abre num iframe
   dentro dele —, então divergir de paleta ou de fonte aqui aparece como
   emenda. Se mudar um lado, mude o outro. */
:root{
  --bg:#05080F; --bg2:#080D18; --panel:#0D1524; --panel2:#111B2D;
  --line:#1B2740; --line2:rgba(56,189,248,.36);
  --ink:#E8EEF8; --muted:#9AA9BF; --dim:#647087;
  --accent:#38BDF8; --accent2:#0EA5E9; --accent-soft:rgba(56,189,248,.12);
  --green:#34D399; --amber:#FBBF24; --red:#F87171; --violet:#818CF8; --blue:#38BDF8;
  --grad:linear-gradient(135deg,#0EA5E9,#38BDF8);
  /* Plus Jakarta Sans nos números e títulos, Inter na leitura. A Syne saiu:
     é display, boa em capa de marca e cansativa numa tela cheia de dado. */
  --font-display:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font-body:Inter,"Segoe UI",system-ui,sans-serif;
  --radius:16px; --radius-lg:20px; --radius-sm:12px;
  /* respiro vertical entre blocos de primeiro nivel de uma secao */
  --gap-bloco:18px;
  --elev-1:0 1px 2px rgba(3,8,20,.35), 0 8px 24px rgba(3,8,20,.30);
  --elev-2:0 2px 4px rgba(3,8,20,.40), 0 18px 48px rgba(3,8,20,.46);
  --shadow:var(--elev-1);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.08);
  --edge-glass:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 24px rgba(56,189,248,.04);
  --glow-accent:0 0 0 1px rgba(56,189,248,.22), 0 0 26px rgba(56,189,248,.18);
  --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:.16s; --t:.22s;
}

/* Fundo navy + blobs + ruido + fonte base */
html,body{margin:0;height:100%;color:var(--ink);
  font-family:var(--font-body);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(620px 620px at -6% -10%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(520px 520px at 106% 108%, rgba(99,102,241,.12), transparent 60%),
    var(--bg) fixed;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");}
.app{position:relative;z-index:1}

/* Tipografia (Syne titulos/numeros + DM Sans corpo) */
.top h1{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.015em;line-height:1.1}
.brand{font-family:var(--font-display);font-weight:800;letter-spacing:.22em}
.side .brand{letter-spacing:.16em}
.card h3{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.005em}
.goal-head .big{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .val{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kpi .lbl{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.kc-val{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums}
.rk .vl{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.ethead{font-family:var(--font-display);font-weight:700;letter-spacing:.12em}
.kcol-head{font-family:var(--font-display);font-weight:700;letter-spacing:.04em}
.id{font-variant-numeric:tabular-nums}

/* KPIs — navy solido em camadas + faixa de acento + lift */
.kpi{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  box-shadow:var(--edge-top), var(--elev-1);
  transition:transform var(--t) var(--ease-out),border-color var(--t),box-shadow var(--t)}
.kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.kpi:has(.ic.gr)::after{background:linear-gradient(90deg,var(--green),transparent)}
.kpi:has(.ic.am)::after{background:linear-gradient(90deg,var(--amber),transparent)}
.kpi:has(.ic.bl)::after{background:linear-gradient(90deg,var(--blue),transparent)}
.kpi:has(.ic.vi)::after{background:linear-gradient(90deg,var(--violet),transparent)}
.kpi:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:var(--edge-top), var(--elev-2), var(--glow-accent)}
.kpi.pulse-amber{border-color:rgba(251,191,36,.45)}
.kpi.pulse-amber:hover{box-shadow:var(--edge-top), var(--elev-2), 0 0 26px rgba(251,191,36,.22)}

/* Cards — navy solido, hairline, luz de superficie no topo, sombra dupla */
.card{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  box-shadow:var(--edge-top), var(--elev-1);
  transition:border-color var(--t),box-shadow var(--t)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:100px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
.card:hover{border-color:var(--line2);box-shadow:var(--edge-top), var(--elev-2)}
.card.hl{border-color:rgba(251,191,36,.35);
  background:linear-gradient(160deg,rgba(251,191,36,.06),var(--panel))}

/* Sidebar — UNICA superficie de vidro + item ativo refinado */
.side{position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 74%,transparent),color-mix(in srgb,var(--bg) 62%,transparent));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-right:1px solid var(--line);
  box-shadow:var(--edge-top), 1px 0 30px rgba(3,8,20,.30)}
.nav{transition:background var(--t),color var(--t),transform var(--t-fast)}
.nav:hover{background:var(--bg2);color:var(--ink);transform:translateX(2px)}
.nav.active{background:linear-gradient(90deg,rgba(14,165,233,.16),rgba(14,165,233,.02));color:#fff}
.nav.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--accent2);box-shadow:0 0 10px rgba(14,165,233,.55)}

/* Badges semanticos translucidos */
.pill{font-size:10.5px;padding:3px 10px;border-radius:99px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;border:1px solid var(--line);
  background:rgba(124,144,168,.12);color:var(--muted)}
.pill.running,.pill.pending{color:var(--accent);border-color:transparent;background:rgba(56,189,248,.15)}
.pill.awaiting_approval{color:var(--amber);border-color:transparent;background:rgba(251,191,36,.15)}
.pill.approved,.pill.done,.pill.ativo{color:var(--green);border-color:transparent;background:rgba(52,211,153,.15)}
.pill.failed,.pill.cancelled{color:var(--red);border-color:transparent;background:rgba(248,113,113,.15)}
.stage-pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600}
.st-lead{background:rgba(56,189,248,.15);color:#7DD3FC}
.st-proposta{background:rgba(129,140,248,.15);color:#A5B4FC}
.st-negociacao{background:rgba(251,191,36,.15);color:#FCD34D}
.st-fechado{background:rgba(52,211,153,.15);color:#6EE7B7}
.st-perdido{background:rgba(248,113,113,.15);color:#FCA5A5}
.appr{background:linear-gradient(160deg,rgba(251,191,36,.07),var(--panel));
  border:1px solid rgba(251,191,36,.30);border-radius:var(--radius-sm)}
.appr .tag{background:rgba(251,191,36,.18);color:var(--amber);letter-spacing:.08em}

/* Kanban consome os tokens (mantem vidro + JS) */
.kcol{border-radius:var(--radius-lg);border:1px solid var(--line2);
  box-shadow:var(--edge-glass), var(--elev-1)}
.kcol.kdrag{border-color:rgba(56,189,248,.75);
  box-shadow:var(--edge-glass), var(--glow-accent)}
.kcard{border-radius:var(--radius-sm);
  box-shadow:var(--edge-top), var(--elev-1)}
.kcard:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.55);
  box-shadow:var(--edge-glass), var(--glow-accent)}

/* Acento raro — corrige literais ciano antigos + foco coeso */
.kpi .ic.cy{background:rgba(56,189,248,.14);color:var(--accent)}
.kpi .ic.gr{background:rgba(52,211,153,.14)}
.kpi .ic.am{background:rgba(251,191,36,.14)}
.kpi .ic.bl{background:rgba(56,189,248,.14)}
.kpi .ic.vi{background:rgba(129,140,248,.14)}
.id{font-family:ui-monospace,monospace;color:var(--accent);font-size:12.5px}
.fbar i{background:var(--grad);box-shadow:0 0 12px rgba(56,189,248,.35)}
.tars-cta{border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(56,189,248,.05));
  border:1px solid var(--line2);box-shadow:var(--edge-top), var(--elev-1);
  transition:border-color var(--t),box-shadow var(--t)}
.tars-cta:hover{border-color:var(--accent);
  box-shadow:var(--edge-top), var(--elev-2), 0 0 26px rgba(56,189,248,.20)}
.tars-cta .orb{background:radial-gradient(circle at 40% 35%,#eafbff,var(--accent) 45%,#0a5f7a 80%);box-shadow:0 0 22px var(--accent)}
.login-card input:focus,.addrow input:focus,.goal-edit input:focus,.inp:focus,.sel:focus,.nm-edit:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.18);outline:none;
  transition:box-shadow var(--t),border-color var(--t)}

/* Clientes + login no sistema de elevacao */
.cc{border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel2),var(--panel2));
  border:1px solid var(--line);box-shadow:var(--edge-top), var(--elev-1);
  transition:transform var(--t) var(--ease-out),border-color var(--t),box-shadow var(--t)}
.cc:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:var(--edge-top), var(--elev-2), var(--glow-accent)}
.cc .av{background:var(--grad);color:#04161f}
.login-card{border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--edge-glass), var(--elev-2)}

/* Ritmo 8pt + CTAs Syne + scrollbar fina + hover de linhas + entrada */
.main{padding:24px 32px}
.top{margin-bottom:32px}
.kpis{gap:16px}
/* gap interno de 24 e escolha desta camada; o respiro VERTICAL entre blocos
   nao mora mais aqui, mora em `.section > * + *`, senao volta a existir mais
   de um dono para a mesma medida. */
.grid2{gap:24px}
.card{padding:20px 22px}
.card + .card{margin-top:var(--gap-bloco)}
.btn,.bt,.addgrid button,.addrow button,.goal-edit button{font-family:var(--font-display);font-weight:700;letter-spacing:.06em}
.btn:hover,.addgrid button:hover,.addrow button:hover{transform:translateY(-1px)}
*{scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.28) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(56,189,248,.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.45);background-clip:padding-box}
.row,.tl .it{transition:background var(--t),padding var(--t-fast);border-radius:10px}
.row:hover{background:rgba(56,189,248,.05);padding-left:8px;padding-right:8px}
.tl .it:hover{background:rgba(56,189,248,.04);padding-left:8px}
.section.active{animation:fade .45s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- COS · CRIATIVOS ---------- */
.cos-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cos-tabs{display:flex;gap:6px;background:rgba(0,0,0,.20);border:1px solid var(--line);
  border-radius:11px;padding:4px;width:max-content;margin-bottom:16px}
.cost{background:transparent;border:none;color:var(--muted);cursor:pointer;
  padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;transition:.2s}
.cost:hover{color:var(--ink)}
.cost.on{color:var(--accent);background:rgba(25,231,255,.10)}
.dna-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.dna-chips .dna-l{font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.sc{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-hi{background:rgba(52,211,153,.16);color:#6EE7B7}
.sc-mid{background:rgba(251,191,36,.16);color:#FCD34D}
.sc-lo{background:rgba(248,113,113,.16);color:#FCA5A5}
.sc-none{background:rgba(124,196,255,.10);color:var(--muted)}
.kcol[data-stage="aprovado"] .kcol-head{color:#9fe0ff}
.kcol[data-stage="gravar"] .kcol-head{color:#d2c4ff}
.kcol[data-stage="no_ar"] .kcol-head{color:#ffe1a3}
.kcol[data-stage="lido"] .kcol-head{color:#9bf3d4}
.kc-tri{display:flex;gap:6px;margin-top:9px}
.kc-tri button{flex:1;border:none;border-radius:8px;padding:6px 0;font-size:11px;
  font-weight:700;cursor:pointer;transition:.2s}
.kc-tri .tri-ok{background:rgba(52,211,153,.15);color:#6EE7B7}
.kc-tri .tri-ok:hover{background:var(--green);color:#04221a}
.kc-tri .tri-no{background:rgba(248,113,113,.12);color:#FCA5A5}
.kc-tri .tri-no:hover{background:var(--red);color:#2a0a0e}
.win-card{background:var(--bg2);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;margin-bottom:12px;border-left:3px solid var(--green);transition:.2s}
.win-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.win-dna{font-size:13.5px;line-height:1.55;color:var(--ink);font-style:italic}
.win-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.win-acts{display:flex;gap:8px;margin-top:11px}
.lib-acc{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
  background:var(--bg2);overflow:hidden}
.lib-acc summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:13.5px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;transition:.2s}
.lib-acc summary:hover{background:rgba(56,189,248,.05)}
.lib-acc summary::-webkit-details-marker{display:none}
.lib-acc summary .lib-n{color:var(--dim);font-weight:400;font-size:11.5px}
.lib-acc summary::after{content:"\25be";color:var(--dim);margin-left:10px;transition:transform .3s}
.lib-acc[open] summary::after{transform:rotateX(180deg)}
.lib-body{padding:0 16px 14px}
.lib-fam{margin:12px 0 2px;color:var(--accent);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.lib-item{padding:9px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
.lib-item:first-child{border-top:none}
.lib-item b{color:var(--ink)}
.lib-item .li-sub{color:var(--muted);font-size:12px;margin-top:2px}
.lib-copy{float:right;background:var(--bg2);border:1px solid var(--line2);color:var(--accent);
  border-radius:7px;font-size:11px;padding:3px 10px;cursor:pointer;margin-left:10px;transition:.2s}
.lib-copy:hover{background:rgba(56,189,248,.14)}
.prompt-box{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:12px;line-height:1.5;max-height:180px;overflow:auto;
  white-space:pre-wrap;font-family:ui-monospace,monospace;color:var(--muted)}
.cdw-facts{background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:10px 13px;font-size:12.5px;line-height:1.6;margin-top:6px}
.cdw-facts .fa{color:var(--green)} .cdw-facts .hi{color:var(--amber)}
.cdw-score-dims{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cdw-score-dims .ltag{background:rgba(124,196,255,.08)}

/* ============================================================
   ÍCONES EM SVG (substituem os emojis)
   Emoji tem cor própria, muda de desenho em cada sistema e não
   acompanha o tema. Estes herdam currentColor, então seguem a cor
   do estado (hover, ativo) sem nenhuma regra extra.
   ============================================================ */
.nav .ic{width:18px;height:18px;display:grid;place-items:center;flex:none}
.nav .ic svg{width:18px;height:18px;display:block}
.nav .ic svg,.kpi .ic svg{stroke-width:1.7}
/* o ícone acompanha o texto: apagado em repouso, aceso no item ativo */
.nav .ic{color:var(--dim);transition:color var(--t)}
.nav:hover .ic{color:var(--muted)}
.nav.active .ic{color:var(--accent)}

/* KPI: caixa menor que a original de 42px — o número é o protagonista,
   o ícone só rotula */
.kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  margin-bottom:12px;font-size:0}
.kpi .ic svg{width:17px;height:17px;display:block}

/* ícone em linha dentro de botão/link: acompanha o texto e não empurra nada */
.i{width:15px;height:15px;display:inline-block;vertical-align:-2.5px;flex:none}
.bt .i,.btn-copy .i,.edit .i{margin-right:5px}
.iconbtn .i,.dw-close .i{margin:0;vertical-align:-3px}

/* KPI: o número não pode quebrar nem vazar — mesmo tratamento do relatório.
   Era o defeito mais visível: "R$ 3689.76" caindo para a segunda linha. */
.kpi .val{white-space:nowrap;font-size:clamp(21px,2.3vw,30px)}
.kpi .val.g{font-size:clamp(18px,1.9vw,24px)}
.kpi .val.gg{font-size:clamp(16px,1.6vw,20px)}

/* mesmos degraus para os outros números grandes do painel */
.fin-tira .ft b,.cash-val,.goal-head .big{white-space:nowrap}
.fin-tira .ft b.g{font-size:20px} .fin-tira .ft b.gg{font-size:17px}
.cash-val.g{font-size:26px} .cash-val.gg{font-size:21px}
.goal-head .big.g{font-size:.85em} .goal-head .big.gg{font-size:.72em}

/* ============================================================
   WHATSAPP — funil de conversa (extensão do WhatsApp Web)
   Reaproveita .kanban/.kcol/.kcard/.drawer do painel. O que existe
   aqui é só o que essa tela tem de diferente: a cor da etapa vinda
   do banco, o pino de vínculo com o lead e o editor de etapas.
   ============================================================ */

/* barra de busca acima do quadro */
.wa-bar{display:flex;gap:10px;align-items:center;margin:2px 0 4px;flex-wrap:wrap}
.wa-bar .inp{flex:1;min-width:240px}
.wa-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:7px 13px;border-radius:999px;
  color:var(--amber);background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.38);
  transition:background var(--t),border-color var(--t)}
.wa-chip:hover{background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.6)}

/* KPI "sem lead" quando o filtro está ligado */
.kpi.wa-on{border-color:rgba(251,191,36,.75);
  box-shadow:var(--edge-top), var(--elev-2), 0 0 26px rgba(251,191,36,.24)}

/* vazio de primeira vez: explica de onde vêm os cards em vez de só dizer "vazio" */
.wa-vazio{background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(56,189,248,.01));
  border:1px dashed var(--line2);border-radius:var(--radius-sm);
  padding:16px 18px;margin:12px 0 4px;font-size:12.5px;color:var(--muted);line-height:1.65}
.wa-vazio b{color:var(--ink);font-family:var(--font-display)}
.wa-vazio > div{margin-top:6px}
/* zerado por filtro nao e o mesmo que zerado por falta de dado: azul, porque
   e um estado que voce criou e desfaz num clique, nao um vazio a resolver */
.wa-vazio.filtrado{border-style:solid;border-color:var(--line2);
  background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(56,189,248,.02))}
.wa-vazio .wa-lead-acts{margin-top:11px}

/* ---- colunas: a cor vem do banco (wa_stages.cor), via --etapa ---- */
.wa-col .kcol-head{color:var(--etapa,var(--accent))}
.wa-col-nome{display:flex;align-items:center;gap:7px;min-width:0}
.wa-col-nome i{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--etapa,var(--accent));box-shadow:0 0 9px var(--etapa,var(--accent))}
.wa-selo{font-style:normal;font-family:var(--font-body);font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  color:var(--green);background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.32)}
.wa-selo.perdida{color:var(--red);background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.32)}

/* ---- cards ---- */
.wa-card .kc-top{align-items:center}
.wa-card .kc-svc{margin:3px 0 0;font-variant-numeric:tabular-nums}
.wa-card .kc-val{margin-top:7px}
.wa-sem-tel{color:var(--dim);font-style:italic}
.wa-nota{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wa-quando{margin-top:7px;font-size:10.5px;color:var(--dim);letter-spacing:.02em}

/* conversa parada: a idade deixou de ser cinza decorativo e virou aviso.
   Ambar, nao vermelho: parada nao e erro, e uma coisa que voce ainda pode
   resolver. Vermelho aqui competiria com o "sem conexao" do selo. */
.wa-quando.parada{color:var(--amber);font-weight:600;cursor:help}
.wa-card.parada{border-color:rgba(251,191,36,.55);
  background:linear-gradient(160deg,rgba(251,191,36,.07),var(--panel2))}
.wa-card.parada:hover{border-color:var(--amber);
  box-shadow:var(--edge-glass), 0 0 22px rgba(251,191,36,.22)}
/* fio ambar na lateral: le como marcador na coluna, mesmo com o card fechado
   e sem espaco para texto */
.wa-card.parada::before{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:2px;border-radius:2px;background:var(--amber);box-shadow:0 0 8px rgba(251,191,36,.5)}
.wa-card{position:relative}

/* campo de dias no editor de etapas */
.wa-et-dias{display:flex;align-items:center;gap:6px;font-size:11px;
  color:var(--muted);white-space:nowrap;cursor:help}
.wa-et-dias .inp{width:58px;padding:8px 8px;font-size:12.5px;text-align:center;
  font-variant-numeric:tabular-nums}

/* pino de vínculo com o lead do site: aceso = a conversão pode ir ao Meta */
.wa-pino{width:9px;height:9px;border-radius:50%;flex:none;margin-top:3px;cursor:help;
  background:transparent;border:1.5px solid var(--dim)}
.wa-pino.on{background:var(--green);border-color:var(--green);
  box-shadow:0 0 9px rgba(52,211,153,.6)}

/* ---- ficha (drawer) ---- */
.wa-quem{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.wa-av{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.02em;
  color:#04221a;background:linear-gradient(150deg,#6EE7B7,var(--green));
  box-shadow:var(--edge-top), 0 8px 20px rgba(52,211,153,.20)}
.wa-quem b{font-family:var(--font-display);font-size:15px}
.wa-lead{font-size:12.5px;line-height:1.6;color:var(--muted);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:18px;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.30)}
.wa-lead.on{background:rgba(52,211,153,.09);border-color:rgba(52,211,153,.32)}
.wa-lead b{color:var(--ink)}
.wa-lead.on b{color:#6EE7B7}

/* vinculo card <-> lead: o bloco deixou de ser um parágrafo que constata o
   problema e virou o lugar onde ele se resolve. Três estados — âmbar (falta
   vínculo), azul (achei um candidato), verde (amarrado). */
.wa-lead.sug{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.34)}
.wa-lead.sug b{color:#7DD3FC}
.wa-lead > b:first-child{display:block;font-family:var(--font-display);font-size:13px;
  margin-bottom:5px}
.wa-lead-p{margin-top:5px;line-height:1.6}
.wa-lead-acts{display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap}
.wa-lead-pick{display:flex;gap:8px;align-items:center;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
/* minmax(0,…) de novo: sem isso o <select> não encolhe e vaza a gaveta
   quando o nome da empresa é comprido */
.wa-lead-pick .sel{flex:1;min-width:0;font-size:12.5px;padding:8px 10px}
.wa-lead-pick .btn-copy{flex:none}
.wa-lead-pick option:disabled{color:var(--dim)}
.wa-arquivar{display:block;width:100%;margin-top:22px;text-align:center;
  border-color:rgba(248,113,113,.35);color:var(--red)}
.wa-arquivar:hover{background:rgba(248,113,113,.12);border-color:var(--red)}
#waDrawer .dw-acts a.btn-copy{text-decoration:none;display:inline-block}

/* ---- editor de etapas ---- */
.wamod{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:24px}
.wamod.on{display:grid}
.wamod-fundo{position:absolute;inset:0;background:rgba(3,8,20,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wamod-caixa{position:relative;width:min(680px,100%);max-height:86vh;overflow-y:auto;
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:var(--radius);padding:24px 26px 22px;
  box-shadow:var(--edge-top), var(--elev-2)}
.wamod-caixa h3{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 4px}
.wamod-caixa .csub{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:18px}

.wa-et{display:grid;grid-template-columns:auto minmax(0,1fr) 42px auto auto auto auto;gap:10px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
/* `1fr` sozinho vira minmax(auto,1fr), e o `auto` respeita a largura
   intrínseca do <input> — a coluna nunca encolhia e a linha vazava a
   caixa no celular. minmax(0,1fr) deixa encolher. */
.wa-et > input.inp{min-width:0}
.wa-et:last-of-type{border-bottom:none}
.wa-et-setas{display:flex;flex-direction:column;gap:2px}
.wa-et-setas button{background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  width:24px;height:17px;border-radius:6px;cursor:pointer;font-size:10px;line-height:1;padding:0}
.wa-et-setas button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.wa-et-setas button:disabled{opacity:.3;cursor:default}
.wa-et input[type=color]{width:42px;height:34px;padding:2px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px}
.wa-et-cli{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
  white-space:nowrap;cursor:pointer}
.wa-et-cli input{accent-color:var(--green);cursor:pointer}
.wa-et-slug{font-size:11px;color:var(--dim);white-space:nowrap;cursor:help;
  min-width:0;overflow:hidden;text-overflow:ellipsis}

@media (max-width:760px){
  .wa-et{grid-template-columns:auto minmax(0,1fr) 42px;gap:8px;row-gap:6px}
  .wa-et-cli,.wa-et-slug,.wa-et-dias{grid-column:2 / -1}
  .wamod{padding:14px}
  .wamod-caixa{padding:20px 16px 18px}
}

/* Selo de sincronia do quadro de conversa.
   Quadro congelado e quadro sem novidade tinham a mesma cara — este selo é
   a diferença entre as duas. Verde pulsando = falou com o painel agora;
   cinza = está envelhecendo; vermelho = não respondeu. */
.wa-live{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;cursor:help;
  color:var(--muted);background:rgba(124,144,168,.10);border:1px solid var(--line)}
.wa-live i{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.wa-live.on{color:var(--green);background:rgba(52,211,153,.12);
  border-color:rgba(52,211,153,.30)}
.wa-live.on i{box-shadow:0 0 8px currentColor;animation:wa-bate 1.8s infinite}
.wa-live.off{color:var(--red);background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.35)}
@keyframes wa-bate{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.wa-live.on i{animation:none}}

/* ============================================================
   RESPIRO VERTICAL DAS SEÇÕES
   Fica no fim de propósito: `.card + .card` da camada premium tem a mesma
   especificidade do neutralizador abaixo, então quem decide é a ordem.
   ============================================================ */
.section.active{display:flex;flex-direction:column;gap:var(--gap-bloco)}
/* Com `gap` cuidando do respiro, QUALQUER margem vertical de filho direto
   vira soma: 18 de gap + 18 de margem = 36. Zerar só o topo não bastava,
   porque `.fin-tira` traz `margin: 18px 0` e era a margem de BAIXO dela que
   empurrava o bloco seguinte. Aqui o gap é o único dono da medida.
   O `.card + .card` continua valendo para card ANINHADO (dentro do .grid2,
   por exemplo), que não é filho da seção e portanto não recebe gap. */
.section.active > *{margin-block:0}
/* Item de flex encolhe no eixo principal por padrão. Os iframes do TARS e do
   relatório têm altura calculada e não podem ser espremidos. */
.section.active > iframe{flex:none}

@media (max-width:760px){
  /* As três abas do COS passavam da borda do card e eram cortadas pelo
     overflow:hidden dele. Duas coisas eram necessárias, e nenhuma sozinha
     bastava: a regra base traz `width:max-content`, que faz o elemento ser
     tão largo quanto o conteúdo pede e ignorar o pai, então nunca havia
     motivo para quebrar linha; e a media query precisa vir DEPOIS da regra
     base, porque as duas têm a mesma especificidade e quem decide é a ordem.
     Por isso este bloco mora no fim do arquivo, e não junto das outras
     regras de tela estreita lá em cima. */
  .cos-tabs{flex-wrap:wrap;width:auto}
}

/* mensalidade no card do cliente: parece um campo, mas é um valor lido do
   contrato. A borda tracejada é o sinal de "não se digita aqui"; o cursor de
   ponteiro e o clique levando ao Financeiro dizem onde se digita. */
.fee-fixo{border:1px dashed var(--line2);border-radius:10px;padding:9px 10px;
  color:var(--ink);font-family:var(--font-display);font-weight:700;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color var(--t),background var(--t)}
.fee-fixo:hover{border-color:var(--accent);background:rgba(56,189,248,.08)}
/* --muted e nao --dim: em 9.5px o --dim da 3.45:1 contra o fundo do card,
   abaixo dos 4.5 que texto pequeno exige. O --muted da 7.22:1. */
.fee-fixo i{display:block;font-style:normal;font-family:var(--font-body);
  font-weight:500;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}
/* "sem contrato vigente" e informacao, nao enfeite: fica legivel */
.fee-fixo.off{color:var(--muted);border-style:dotted}
.fee-nota{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);text-align:center;margin-top:4px}

/* ---------- integrações ---------- */
.igrupo{margin:16px 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.icard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ihead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.itag{font-size:10.5px;color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:2px 8px}
.idesc{color:var(--muted);font-size:12px;line-height:1.5;margin-bottom:10px}
.ifield{display:block;margin-top:8px}
.ifield span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.ifield em{font-style:normal;color:var(--amber)} .ifield em.pad{color:var(--muted)}
.ifield .inp{width:100%;box-sizing:border-box}
.iacts{display:flex;gap:8px;margin-top:12px} .iacts .bt{flex:1;margin-top:0}
.ires{font-size:12px;margin-top:8px;min-height:16px;color:var(--muted)}
.ires.ok{color:var(--green)} .ires.bad{color:var(--red)}
/* ---- Agenda (Google Agenda via n8n) ---- */
.ag-dia{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:16px 0 2px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.ag-dia:first-child{margin-top:4px}
.ag-ev{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ag-ev:last-child{border-bottom:none}
.ag-hora{flex:none;min-width:100px;font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.ag-tit{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-loc{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.ag-link{flex:none;font-size:12px;color:var(--accent);text-decoration:none;border:1px solid var(--line2);border-radius:8px;padding:4px 9px;white-space:nowrap}
.ag-link:hover{background:rgba(56,189,248,.14)}
.ag-link.meet{color:var(--green);border-color:rgba(52,211,153,.4)}
.ag-link.meet:hover{background:rgba(52,211,153,.14)}
#ov-agenda .ag-ev{padding:7px 0;font-size:13px} #ov-agenda .ag-hora{min-width:96px;font-size:12.5px}
.empty.ag-err{color:var(--amber);text-align:left;padding:8px 0}
/* ---- Drive (Google Drive via n8n) ---- */
.dr-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dr-row:last-child{border-bottom:none}
.dr-ico{flex:none;width:22px;text-align:center}
.dr-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.dr-nome:hover{color:var(--accent);text-decoration:underline}
.dr-tipo{flex:none;font-size:10px;padding:2px 8px;border-radius:99px;background:rgba(124,196,255,.12);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dr-meta{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dr-chip{cursor:pointer;font-size:12.5px;padding:6px 11px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.dr-chip:hover{border-color:var(--accent);color:var(--accent)}
.cc .crow .iconbtn.dr:hover{border-color:var(--accent);color:var(--accent)}