/* Crown Orbit · tema futurista do painel (carrega por último: só sobrescreve o style.css)
   laranja Crown = marca e ação · ciano = dados, IA e tempo real · vidro escuro sobre fundo vivo.
   para voltar ao visual antigo: tirar o <link href="/orbit.css"> do index.html. */
:root {
  --bg: #05060a;
  --side: #07080e;
  --sf: #0d1019;
  --sf2: #131726;
  --sf3: #1b2033;
  --bd: rgba(148, 163, 214, .11);
  --bd2: rgba(148, 163, 214, .2);
  --tx: #eef1f8;
  --mt: #9aa3b8;
  --mt2: #6b7389;
  --ac: #ff6a00;
  --ac-h: #ff8a1f;
  --ac2: #ffa04d;
  --acb: rgba(255, 106, 0, .1);
  --acbd: rgba(255, 138, 51, .32);
  --cy: #38e1ff;
  --cyb: rgba(56, 225, 255, .08);
  --cybd: rgba(56, 225, 255, .28);
  --vi: #8b7bff;
  --ok: #2ee6a6;
  --ok2: #5ff0bd;
  --okb: rgba(46, 230, 166, .09);
  --okbd: rgba(46, 230, 166, .26);
  --al: #ffc857;
  --alb: rgba(255, 200, 87, .09);
  --albd: rgba(255, 200, 87, .26);
  --er: #ff6b81;
  --erb: rgba(255, 107, 129, .09);
  --erbd: rgba(255, 107, 129, .28);
  --info: #38e1ff;
  --infob: rgba(56, 225, 255, .08);
  --infobd: rgba(56, 225, 255, .26);
  --pu: #a89bff;
  --pub: rgba(139, 123, 255, .1);
  --r: 18px;
  --side-w: 244px;
  --glass: rgba(14, 17, 28, .62);
  --surface: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%), var(--glass);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 40px -12px rgba(0, 0, 0, .6);
  --glow-ac: 0 0 0 1px rgba(255, 106, 0, .4), 0 8px 34px -8px rgba(255, 106, 0, .55);
  --glow-cy: 0 0 0 1px rgba(56, 225, 255, .32), 0 8px 34px -10px rgba(56, 225, 255, .45);
  --ease: 200ms cubic-bezier(.2, .8, .2, 1);
  --f-num: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html { background: var(--bg); }
body { background: transparent; }
::selection { background: rgba(255, 106, 0, .35); }

/* ---------- fundo vivo: aurora + grade em perspectiva ---------- */
body::before, body::after { content: ''; position: fixed; pointer-events: none; z-index: 0; }
body::before { inset: -20%;
  background:
    radial-gradient(38% 32% at 80% 6%, rgba(255, 106, 0, .16), transparent 70%),
    radial-gradient(34% 30% at 8% 96%, rgba(56, 225, 255, .10), transparent 70%),
    radial-gradient(30% 26% at 48% 52%, rgba(139, 123, 255, .05), transparent 70%);
  animation: orbit-deriva 28s ease-in-out infinite alternate; }
body::after { left: -50%; right: -50%; bottom: -12%; height: 52%;
  background-image: linear-gradient(rgba(56, 225, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 225, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(620px) rotateX(64deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 80%); mask-image: linear-gradient(to top, #000 8%, transparent 80%); }
@keyframes orbit-deriva { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
#app, #login, .sheet, .toast, .tip { position: relative; z-index: 1; }
.sheet, .toast, .tip { position: fixed; }
.sheet { z-index: 40; } .toast { z-index: 50; } .tip { z-index: 30; }

/* ---------- tipografia ---------- */
h1 { font-family: var(--f-num); font-weight: 700; letter-spacing: -.04em; }
h2, .sheet-card > .card-head h2 { font-family: var(--f-num); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.eyebrow, .nav-label { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--ac2); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.kpi strong, .perf .pf strong, .cli-num strong, .eq-num b, .mrr strong, .pl-kpis strong, .rel-kpis strong, .ctl-kpis strong { font-family: var(--f-num); }
code { background: var(--sf3); border-color: var(--bd2); color: var(--cy); font-family: var(--f-mono); }

/* ---------- menu lateral ---------- */
.side { background: linear-gradient(180deg, rgba(10, 12, 22, .88), rgba(5, 6, 11, .94)); border-right: 1px solid var(--bd); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.logo, .logo-marca { filter: drop-shadow(0 0 10px rgba(255, 106, 0, .45)); }
.nav { gap: 2px; }
.nav-label.gestao { border-top-color: var(--bd); }
.nav button { border-radius: 11px; transition: color var(--ease), background var(--ease); }
.nav button i { transition: color var(--ease), filter var(--ease); }
.nav button.on { background: linear-gradient(90deg, rgba(255, 106, 0, .17), rgba(255, 106, 0, .02) 85%); border-color: transparent; color: #fff; box-shadow: none; }
.nav button.on::after { left: -14px; top: 10px; bottom: 10px; background: var(--ac); box-shadow: 0 0 14px 2px rgba(255, 106, 0, .85); }
.nav button.on i { color: var(--ac2); filter: drop-shadow(0 0 6px rgba(255, 106, 0, .75)); }
.side-user { margin: 0 -4px; padding: 12px 10px; border: 1px solid var(--bd); border-radius: 14px; background: var(--glass); }
.avatar { border-color: var(--acbd); background: linear-gradient(140deg, rgba(255, 138, 51, .2), rgba(139, 123, 255, .12)); color: #ffc49a; }
.side-user .avatar { border: 0; border-radius: 50%; background: conic-gradient(from 200deg, var(--ac), var(--vi), var(--cy), var(--ac)); color: #fff; box-shadow: inset 0 0 0 2px #0b0d16; }
.badge { border-radius: 20px; font-family: var(--f-num); font-weight: 700; }

/* ---------- superfícies de vidro ---------- */
.card, .kpi, .ag-card, .eq-card, .cli, .login-card, .mestre-painel, .tk { background: var(--surface); border-color: var(--bd); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card { border-radius: 22px; }
.cli, .ag-card, .eq-card { transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.sheet { background: rgba(3, 4, 8, .72); backdrop-filter: blur(10px); }
.sheet-card { background: linear-gradient(160deg, rgba(255, 255, 255, .04), transparent 40%), rgba(12, 14, 24, .94); border-color: var(--bd2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 40px 120px -20px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(255, 106, 0, .25); backdrop-filter: blur(24px); }
.sheet-card > .acoes { background: rgba(12, 14, 24, .96); box-shadow: 0 -12px 16px rgba(12, 14, 24, .96); }
.toast, .tip { background: rgba(14, 17, 28, .92); border-color: var(--bd2); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(56, 225, 255, .08) inset; }
.skeleton { border-color: var(--bd); background: linear-gradient(100deg, rgba(19, 23, 38, .7) 15%, rgba(56, 225, 255, .07) 45%, rgba(19, 23, 38, .7) 75%); background-size: 240% 100%; }
.vazio { border-color: var(--bd2); background: rgba(5, 6, 10, .25); }
.vazio > i { background: var(--cyb); border-color: var(--cybd); color: var(--cy); box-shadow: 0 0 24px -6px rgba(56, 225, 255, .5); }

/* ---------- botões, links e campos ---------- */
.btn { border-radius: 12px; transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease); }
.btn.primary, .send { background: linear-gradient(135deg, #ff8a1f, #ff5200); border-color: rgba(255, 170, 100, .55); color: #fff; box-shadow: var(--glow-ac); }
a.btn.primary { color: #fff; }
.btn.ghost { background: rgba(255, 255, 255, .035); border-color: var(--bd2); }
.link { color: var(--cy); font-weight: 600; }
.chip { background: rgba(255, 255, 255, .025); border-color: var(--bd); border-radius: 11px; }
.chip.on { color: #fff; background: linear-gradient(135deg, rgba(255, 106, 0, .22), rgba(255, 106, 0, .06)); border-color: var(--acbd); box-shadow: 0 0 20px -6px rgba(255, 106, 0, .5); }
.chip.on .n { background: rgba(255, 106, 0, .3); color: #fff; }
input, textarea, .campo { background-color: rgba(5, 6, 10, .55); border-color: var(--bd2); border-radius: 12px; }
input:focus, textarea:focus, .campo:focus { border-color: var(--cy); box-shadow: 0 0 0 3px var(--cyb), 0 0 22px -6px rgba(56, 225, 255, .55); }
:where(button, a, summary, input, textarea, select, [tabindex]):focus-visible { outline-color: var(--cy); }
.switch input:checked + span { background: linear-gradient(135deg, #ff8a1f, #ff5200); box-shadow: 0 0 14px -2px rgba(255, 106, 0, .7); }
.switch input:checked + span::after { background: #fff; }
.icon-btn.box { border-color: var(--bd2); background: var(--glass); }
@media (hover: hover) {
  .btn.primary:hover, .send:not(.parar):hover { background: linear-gradient(135deg, #ff9a3a, #ff6200); box-shadow: 0 0 0 1px rgba(255, 106, 0, .55), 0 12px 46px -8px rgba(255, 106, 0, .75); transform: translateY(-1px); }
  .btn.ghost:hover { border-color: var(--cybd); color: var(--cy); background: var(--cyb); }
  .link:hover { text-shadow: 0 0 12px rgba(56, 225, 255, .6); }
  .nav button:not(.on):hover { color: var(--tx); background: rgba(255, 255, 255, .04); }
  .nav button:not(.on):hover i { color: var(--tx); }
  .chip:not(.on):hover { border-color: var(--bd2); color: var(--tx); }
  .kpi:hover, .cli:hover, .ag-card:hover, .eq-card:hover { transform: translateY(-3px); border-color: var(--cybd); box-shadow: var(--shadow), var(--glow-cy); }
  .linhas > .linha:hover, .entrega:hover { background: rgba(255, 255, 255, .025); }
}

/* ---------- etiquetas ---------- */
.pill { border-radius: 20px; padding: 3px 9px; font-weight: 600; }
.pill.status { border-radius: 20px; }
.pill.ok .dot, .ag-st.ok .dot { box-shadow: 0 0 8px var(--ok); }

/* ---------- métricas ---------- */
.kpi { border-radius: 20px; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); overflow: hidden; }
.kpi::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kc, var(--ac)), transparent); opacity: .7; }
.kpi > .kpi-ic { border-radius: 11px; color: var(--kc, var(--ac2)); background: color-mix(in srgb, var(--kc, var(--ac)) 13%, transparent); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--kc, var(--ac)) 55%, transparent); }
.kpi strong { font-size: clamp(30px, 2.6vw, 42px); font-weight: 700; letter-spacing: -.045em; }
.kpi-l { color: var(--mt); font-weight: 500; }
.kpi-ic { border-color: var(--acbd); background: var(--acb); }
.kpi-ic.blue, .c-blue { background: var(--cyb); border-color: var(--cybd); color: var(--cy); }
.kpi-ic.purple, .c-purple { background: var(--pub); border-color: rgba(139, 123, 255, .3); color: var(--pu); }
.kpi-ic.gray, .c-gray { background: var(--sf3); border-color: var(--bd2); color: #c3cbe0; }
.kpi:has(.kpi-ic.red) { --kc: var(--er); }
.kpi:has(.kpi-ic.amber) { --kc: var(--al); }
.kpi:has(.kpi-ic.blue) { --kc: var(--cy); }
.kpi:has(.kpi-ic.purple) { --kc: var(--vi); }
.kpi:has(.kpi-ic.gray) { --kc: var(--mt); }
.prog, .rk-bar { background: rgba(255, 255, 255, .06); }
.prog span, .rk-bar span { background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 10px rgba(255, 106, 0, .6); }
.etapa.info .rk-bar span { background: linear-gradient(90deg, #1fb8d6, var(--cy)); box-shadow: 0 0 10px rgba(56, 225, 255, .6); }
.etapa.warn .rk-bar span { background: var(--al); box-shadow: 0 0 10px rgba(255, 200, 87, .5); }
.etapa.ok .rk-bar span { background: var(--ok); box-shadow: 0 0 10px rgba(46, 230, 166, .5); }
.etapa.err .rk-bar span { background: var(--er); box-shadow: 0 0 10px rgba(255, 107, 129, .5); }
.perf .pf, .cli-num div, .eq-num div, .passo-c, .entrega, .mrr, .col { background: rgba(5, 6, 10, .38); border-color: var(--bd); }
.perf .pf > span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mt2); }
.perf .pf strong { font-size: 26px; font-weight: 600; }
.mrr strong { color: var(--ac2); text-shadow: 0 0 22px rgba(255, 106, 0, .45); }

/* ---------- tabelas e listas ---------- */
.tabela-wrap { border-color: var(--bd); background: rgba(5, 6, 10, .3); }
.tabela th { background: rgba(19, 23, 38, .8); border-bottom-color: var(--bd2); font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mt2); }
.tabela td { border-bottom-color: var(--bd); }
.tabela tr { transition: background var(--ease); }
@media (hover: hover) { .tabela tr:hover td { background: rgba(56, 225, 255, .03); } }
.linha { border-top-color: var(--bd); }
.abas-cli { border-bottom-color: var(--bd); }
.abas-cli button.on { border-bottom-color: var(--ac); box-shadow: 0 8px 16px -10px rgba(255, 106, 0, .8); }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .bottom-nav { background: rgba(7, 8, 14, .9); border-top-color: var(--bd); backdrop-filter: blur(22px); }
  .bottom-nav button.on { background: linear-gradient(180deg, rgba(255, 106, 0, .2), rgba(255, 106, 0, .04)); border-color: var(--acbd); color: #fff; }
  .bottom-nav button.on i { color: var(--ac2); filter: drop-shadow(0 0 6px rgba(255, 106, 0, .7)); }
  .bottom-nav .badge { background: var(--ac); color: #fff; }
  body::after { height: 38%; }
  /* celular: sem desfoque nos cartões (pesa no aparelho); vidro mais opaco no lugar */
  .card, .kpi, .ag-card, .eq-card, .cli, .tk, #tab-inicio .vg-hero { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root { --glass: rgba(13, 16, 26, .88); }
}
.fab-mestre { border: 0; border-radius: 40px; background: linear-gradient(135deg, #ff8a1f, #ff3d6e); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 14px 44px -10px rgba(255, 106, 0, .85); }

/* =================== visão geral =================== */
#tab-inicio .home-main { gap: 22px; }
#tab-inicio .vg-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 26px; padding: 30px; border: 1px solid var(--bd2); border-radius: 26px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 106, 0, .11), rgba(139, 123, 255, .05) 45%, rgba(56, 225, 255, .06)), var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); }
#tab-inicio .vg-hero::after { content: ''; position: absolute; right: -130px; top: -170px; width: 440px; height: 440px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 106, 0, .16); box-shadow: inset 0 0 80px rgba(255, 106, 0, .07), 0 0 0 44px rgba(255, 106, 0, .022), 0 0 0 96px rgba(255, 106, 0, .016); animation: orbit-gira 60s linear infinite; }
@keyframes orbit-gira { to { transform: rotate(360deg); } }
.vg-hero-txt, .vg-hero-side { position: relative; z-index: 1; min-width: 0; }
.vg-hero h1 { margin: 12px 0 10px; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.08; }
.vg-foco em { font-style: normal; background: linear-gradient(90deg, #ffb066, #ff6a00 45%, #ff3d6e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg-hero p { max-width: 54ch; margin-top: 0; color: var(--mt); font-size: 14px; }
#tab-inicio .vg-hero .head-acts { margin: 22px 0 0; width: auto; }
.vg-hero-side { display: flex; flex-direction: column; gap: 12px; }
.vg-score { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--bd); border-radius: 18px; background: rgba(5, 6, 10, .45); }
.vg-score b { display: block; font-size: 15px; }
.vg-score .sm { display: block; margin-top: 3px; line-height: 1.6; }
.vg-ring { --p: 0; --rc: var(--ok); position: relative; flex: none; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; }
.vg-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(255, 255, 255, .07) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 71%, #000 72%); mask: radial-gradient(farthest-side, transparent 71%, #000 72%); filter: drop-shadow(0 0 8px var(--rc)); transition: background 600ms ease; }
.vg-ring[data-nivel="warn"] { --rc: var(--al); }
.vg-ring[data-nivel="err"] { --rc: var(--er); }
.vg-ring span { position: relative; font-family: var(--f-num); font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.vg-ring span::after { content: '%'; font-size: 11px; color: var(--mt); margin-left: 1px; }
.vg-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vg-mini { min-width: 0; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 14px; background: rgba(5, 6, 10, .4); }
.vg-mini span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mt2); }
.vg-mini b { display: block; margin-top: 2px; font-family: var(--f-num); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }

/* kpis da visão geral */
#tab-inicio .kpis { gap: 16px; }
#tab-inicio .vg-zero .kpi-ic { color: var(--mt2); background: rgba(255, 255, 255, .04); box-shadow: none; }
#tab-inicio .vg-zero::after { opacity: .15; }

/* colunas: principal à esquerda, "hoje" fixo à direita */
.vg-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-areas: 'a b'; gap: 22px; align-items: start; }
.vg-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vg-col-a { grid-area: a; }
.vg-col-b { grid-area: b; position: sticky; top: 22px; }
.vg-col-b .vg-hoje-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
#tab-inicio .vg-col-a .duo { gap: 22px; }

/* hoje: linha do tempo */
#vgAgendaHoje { position: relative; padding-left: 18px; }
#vgAgendaHoje:has(.vg-item)::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--ac), var(--cy) 65%, transparent); }
#vgAgendaHoje .vg-item { position: relative; border-top: 0; padding: 10px 12px; border-radius: 12px; }
#vgAgendaHoje .vg-item::before { content: ''; position: absolute; left: -17px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cy); box-shadow: 0 0 8px rgba(56, 225, 255, .6); }
#vgAgendaHoje .vg-item:first-child { background: rgba(255, 106, 0, .07); border: 1px solid rgba(255, 106, 0, .22); }
#vgAgendaHoje .vg-item:first-child::before { background: var(--ac); border-color: var(--ac); box-shadow: 0 0 10px var(--ac); }
.vg-hour { font-family: var(--f-mono); font-size: 11px; color: var(--cy); }
.vg-list-head h3 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mt2); }
#vgLeadsHoje .vg-item { border-top: 0; margin-top: 6px; padding: 11px 12px; border-radius: 12px; background: rgba(5, 6, 10, .38); border: 1px solid var(--bd); }

/* performance: gráfico de conversões */
.vg-chart { position: relative; height: 190px; margin-top: 18px; }
.vg-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vg-traco { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: orbit-traco 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes orbit-traco { to { stroke-dashoffset: 0; } }

/* equipe de IA: chips vivos */
#tab-inicio #equipe { gap: 10px; }
.vg-agent { position: relative; padding: 10px 15px 10px 12px; border-color: var(--bd); border-radius: 14px; background: rgba(5, 6, 10, .45); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.vg-agent > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: var(--mt); }
.vg-agent.vg-working { background: linear-gradient(135deg, rgba(255, 106, 0, .16), rgba(255, 106, 0, .03)); border-color: var(--acbd); color: #fff; }
.vg-agent.vg-working > i { color: var(--ac2); background: rgba(255, 106, 0, .16); }
.vg-agent.vg-working::after { content: ''; position: absolute; inset: -4px; border-radius: 17px; border: 1px solid rgba(255, 106, 0, .55); animation: orbit-anel 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes orbit-anel { 50% { inset: -7px; opacity: 0; } }
.vg-agent-dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.vg-agent-dot.work { background: var(--ac2); box-shadow: 0 0 0 3px var(--acb), 0 0 10px var(--ac); }
@media (hover: hover) { .vg-agent:hover { border-color: var(--cybd); box-shadow: var(--glow-cy); transform: translateY(-2px); } }

/* listas da visão geral em cartões */
#tab-inicio .linhas > .linha { min-height: 0; margin-top: 8px; padding: 12px; border: 1px solid var(--bd); border-radius: 14px; background: rgba(5, 6, 10, .32); }
#tab-inicio .linhas > .linha:first-child { margin-top: 0; padding-top: 12px; }
#tab-inicio .linhas > .linha:last-child { padding-bottom: 12px; }
#tab-inicio .linhas > .vazio { margin-top: 0; }
/* card estreito: etiquetas descem para baixo do título em vez de espremer o texto */
#tab-inicio .card { container-type: inline-size; }
@container (max-width: 620px) {
  #tab-inicio .linhas > .linha { flex-wrap: wrap; row-gap: 10px; }
  #tab-inicio .linha .txt { flex: 1 1 0; }
  #tab-inicio .linha .tags, #tab-inicio .linha > .quando { flex-basis: 100%; max-width: 100%; justify-content: flex-start; padding-left: 54px; }
  #tab-inicio .linha .seta { display: none; }
}
@container (max-width: 360px) { #tab-inicio .linha .tags, #tab-inicio .linha > .quando { padding-left: 0; } }
/* na coluna principal os pares de cards ficam sempre empilhados (lado a lado espremia as listas) */
#tab-inicio .vg-col-a .duo { grid-template-columns: minmax(0, 1fr); }

/* alertas e rodapé */
.vg-alert { border-radius: 16px; backdrop-filter: blur(12px); }
.vg-alert.vg-err { box-shadow: 0 0 30px -12px rgba(255, 107, 129, .5); }
.vg-all-clear { padding: 8px 14px; border: 1px solid var(--okbd); border-radius: 20px; background: var(--okb); color: var(--ok2); }
#tab-inicio .vg-footer { border-top-color: var(--bd); }
#tab-inicio #fabMestre { border: 0; border-radius: 40px; background: linear-gradient(135deg, #ff8a1f, #ff3d6e); color: #fff; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 14px 44px -10px rgba(255, 106, 0, .85); }
#tab-inicio #fabMestre > i { color: #fff; }
#tab-inicio #fabMestre::before { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid rgba(255, 106, 0, .5); animation: orbit-anel 2.6s ease-in-out infinite; pointer-events: none; }
#tab-inicio #painelMestre { background: rgba(9, 11, 19, .96); border-left-color: var(--bd2); backdrop-filter: blur(24px); }

/* =================== clientes =================== */
.cli-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cli-stat { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border: 1px solid var(--bd); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.cli-stat::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sc), transparent); opacity: .75; }
.cli-stat.zerado { --sc: var(--mt2); }
.cli-stat-l { display: flex; align-items: center; gap: 8px; color: var(--mt); font-size: 12px; font-weight: 500; }
.cli-stat-l i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-size: 16px; color: var(--sc); background: color-mix(in srgb, var(--sc) 13%, transparent); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--sc) 55%, transparent); }
.cli-stat b { font-family: var(--f-num); font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; overflow-wrap: anywhere; }
.cli-stat small { color: var(--mt2); font-size: 11px; }
.cli-share { padding: 20px 22px; }
.cli-share-head { margin-bottom: 14px; }
.cli-share-head p { margin-top: 4px; }
.cli-share-head .down i { vertical-align: -2px; }
.cli-share-bar { display: flex; gap: 3px; height: 12px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.cli-share-bar span { min-width: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 100%, #fff 20%), var(--cc)); box-shadow: 0 0 12px -2px var(--cc); }
.cli-share-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--mt); }
.cli-share-leg span { display: inline-flex; align-items: center; gap: 7px; }
.cli-share-leg i { width: 8px; height: 8px; border-radius: 3px; }
.cli-share-leg b { color: var(--tx); font-family: var(--f-num); font-weight: 600; }
.cli-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cli-busca { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--bd2); border-radius: 13px; background: rgba(5, 6, 10, .55); color: var(--mt2); transition: border-color var(--ease), box-shadow var(--ease); }
.cli-busca:focus-within { border-color: var(--cy); box-shadow: 0 0 0 3px var(--cyb), 0 0 22px -6px rgba(56, 225, 255, .55); }
.cli-busca input { min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none !important; }
.cli-busca input::-webkit-search-cancel-button { filter: invert(.7); }

/* card do cliente */
.cli-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.cli.cli-v2 { --cc: var(--ac); position: relative; gap: 16px; padding: 20px; border-radius: 22px; overflow: hidden; }
.cli.cli-v2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--sdc, var(--ok)), transparent 80%); box-shadow: 0 0 14px var(--sdc, var(--ok)); }
.cli.cli-v2::after { content: ''; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%); pointer-events: none; }
.cli.s-ok { --sdc: var(--ok); } .cli.s-warn { --sdc: var(--al); } .cli.s-err { --sdc: var(--er); }
.cli-v2 > * { position: relative; z-index: 1; }
.cli-v2 .cli-head .avatar { width: 46px; height: 46px; border: 0; border-radius: 14px; color: #fff; font-family: var(--f-num); font-size: 15px; font-weight: 700;
  background: linear-gradient(140deg, var(--cc), color-mix(in srgb, var(--cc) 45%, #05060a)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 6px 22px -6px var(--cc); }
.cli-v2 .cli-head .nm b { font-family: var(--f-num); font-size: 17px; }
.cli-st { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: capitalize; border: 1px solid; }
.cli-st.ok { color: var(--ok2); background: var(--okb); border-color: var(--okbd); }
.cli-st.ok .dot { box-shadow: 0 0 8px var(--ok); animation: pulso 2.2s ease-in-out infinite; }
.cli-st.warn { color: var(--al); background: var(--alb); border-color: var(--albd); }
.cli-st.info { color: var(--cy); background: var(--cyb); border-color: var(--cybd); }
.cli-st.neutral { color: var(--mt); background: rgba(255, 255, 255, .04); border-color: var(--bd); }
.cli-fee { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 16px; background: rgba(5, 6, 10, .4); }
.cli-fee > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-fee span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mt2); }
.cli-fee strong { font-family: var(--f-num); font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.cli-fee small { color: var(--mt); font-size: 11px; }
.cli-anel { --p: 0; position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; }
.cli-anel::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--cc) calc(var(--p) * 1%), rgba(255, 255, 255, .07) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 70%, #000 71%); mask: radial-gradient(farthest-side, transparent 70%, #000 71%); filter: drop-shadow(0 0 6px var(--cc)); }
.cli-anel span { position: relative; font-family: var(--f-num); font-size: 13px; font-weight: 700; }
.cli-v2 .cli-num { gap: 8px; }
.cli-v2 .cli-num div { padding: 10px 12px; border-radius: 12px; }
.cli-v2 .cli-num span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mt2); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-v2 .cli-num strong { font-family: var(--f-num); font-size: 18px; }
.cli-linha { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.plat-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px dashed var(--bd2); color: var(--mt2); font-size: 17px; }
.plat-ic.on { border-style: solid; }
.plat-ic.on.meta { color: #6aa8ff; border-color: rgba(106, 168, 255, .35); background: rgba(106, 168, 255, .1); }
.plat-ic.on.google { color: var(--al); border-color: var(--albd); background: var(--alb); }
.plat-ic.on.tiktok { color: #f472d0; border-color: rgba(244, 114, 208, .35); background: rgba(244, 114, 208, .1); }
.cli-saude { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cli-saude.ok { color: var(--ok2); background: var(--okb); }
.cli-saude.warn { color: var(--al); background: var(--alb); }
.cli-saude.err { color: var(--er); background: var(--erb); box-shadow: 0 0 18px -6px rgba(255, 107, 129, .6); }
.cli-v2 .cli-acts { align-items: center; padding-top: 14px; }
.cli-v2 .cli-acts .btn { min-height: 40px; }
.cli-abrir { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: var(--mt); border: 1px solid var(--bd); transition: var(--ease); }
@media (hover: hover) {
  .cli.cli-v2:hover { border-color: color-mix(in srgb, var(--cc) 45%, transparent); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--cc) 30%, transparent), 0 14px 44px -14px var(--cc); }
  .cli.cli-v2:hover .cli-abrir { color: #fff; background: var(--cc); border-color: var(--cc); box-shadow: 0 0 18px -2px var(--cc); }
}
@media (max-width: 1200px) { .cli-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .cli-stats { gap: 10px; }
  .cli-stat { padding: 14px; border-radius: 16px; }
  .cli-stat-l { font-size: 11px; }
  .cli-busca { max-width: none; }
  .cli.cli-v2 { padding: 16px; }
  .cli-fee strong { font-size: 22px; }
}

/* =================== ficha do cliente =================== */
#cliDetalhe > .tab { gap: 20px; }
.voltar { color: var(--mt); }
@media (hover: hover) { .voltar:hover { color: var(--cy); } }
/* cabeçalho: identidade à esquerda, contato e documentos à direita */
.det-head { --cc: var(--ac); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 22px; padding: 24px 26px; border: 1px solid var(--bd2); border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 13%, transparent), rgba(139, 123, 255, .04) 50%, rgba(56, 225, 255, .05)), var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.det-head::after { content: ''; position: absolute; left: -80px; top: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 20%, transparent), transparent 70%); pointer-events: none; }
.det-head > * { position: relative; z-index: 1; }
.ch-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.det-head .avatar { width: 64px; height: 64px; flex: none; border: 0; border-radius: 18px; color: #fff; font-family: var(--f-num); font-size: 22px; font-weight: 700;
  background: linear-gradient(140deg, var(--cc), color-mix(in srgb, var(--cc) 45%, #05060a)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 30px -8px var(--cc); }
.det-head .avatar.logo-cli { background: #fff; }
.det-head .nm { min-width: 0; }
.det-head h1 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.det-head .nm > p { margin-top: 4px; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ch-tags .pill i { font-size: 13px; }
.ch-grupos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ch-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-rot { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mt2); }
.det-head .det-links { width: auto; gap: 6px; }
.det-head .det-links .chip { min-height: 36px; padding: 6px 12px; border-radius: 10px; background: rgba(5, 6, 10, .45); }
.det-head .det-links .chip i { font-size: 16px; }
.det-head .det-links a.chip i.ti-brand-whatsapp { color: #4ade80; }
.det-head .det-links a.chip i.ti-brand-instagram { color: #f472d0; }
.det-head .det-links a.chip i.ti-brand-meta { color: #6aa8ff; }
@media (hover: hover) { .det-head .det-links .chip:hover { border-color: var(--cybd); color: var(--tx); } }
/* navegação em 4 grupos + sub-abas do grupo */
.cli-nav { display: flex; flex-direction: column; gap: 10px; }
.cli-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px; border: 1px solid var(--bd); border-radius: 18px; background: rgba(5, 6, 10, .5); }
.cli-grupos button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 8px 12px; border-radius: 13px; color: var(--mt); font-weight: 600; transition: background var(--ease), color var(--ease), box-shadow var(--ease); }
.cli-grupos button i { font-size: 19px; }
.cli-grupos button small { min-width: 18px; padding: 0 5px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--mt2); font-size: 10px; font-weight: 700; text-align: center; }
.cli-grupos button.on { color: #fff; background: linear-gradient(135deg, rgba(255, 106, 0, .26), rgba(255, 106, 0, .08)); box-shadow: 0 0 0 1px rgba(255, 138, 51, .4) inset, 0 8px 26px -10px rgba(255, 106, 0, .7); }
.cli-grupos button.on i { color: var(--ac2); filter: drop-shadow(0 0 6px rgba(255, 106, 0, .7)); }
.cli-grupos button.on small { background: rgba(255, 106, 0, .3); color: #fff; }
.cli-grupos .badge { position: absolute; top: 6px; right: 8px; margin: 0; }
@media (hover: hover) { .cli-grupos button:not(.on):hover { color: var(--tx); background: rgba(255, 255, 255, .04); } }
.cli-sub.abas-cli { gap: 6px; border: 0; padding: 0 4px; }
.cli-sub.abas-cli button { min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 11px; }
.cli-sub.abas-cli button.on { color: var(--cy); border-color: var(--cybd); background: var(--cyb); box-shadow: 0 0 18px -8px rgba(56, 225, 255, .7); }
.cli-sub.abas-cli button.on i { color: var(--cy); }
/* resumo do cliente: ações e checklist ao lado, tarefas e atividade na coluna principal */
.cv-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); grid-template-areas: 'p l'; gap: 20px; align-items: start; }
.cv-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cv-principal { grid-area: p; } .cv-lado { grid-area: l; }
.cv-pronto .card-head { align-items: center; }
.card-head > .cv-anel { flex: 0 0 54px; width: 54px; height: 54px; min-width: 54px; max-width: 54px; }
.cv-anel span { font-size: 12px; }
.cv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cv-tiles .chip { justify-content: flex-start; min-height: 46px; padding: 10px 12px; border-radius: 13px; background: rgba(5, 6, 10, .4); color: var(--tx); text-align: left; }
.cv-tiles .chip i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; font-size: 16px; color: var(--ac2); background: rgba(255, 106, 0, .12); }
@media (hover: hover) { .cv-tiles .chip:hover { border-color: var(--acbd); background: rgba(255, 106, 0, .08); } }
#cliDetalhe .card { container-type: inline-size; }
@container (max-width: 620px) {
  #cliDetalhe .linhas > .linha { flex-wrap: wrap; row-gap: 10px; }
  #cliDetalhe .linha .txt { flex: 1 1 0; }
  #cliDetalhe .linha .tags { flex-basis: 100%; max-width: 100%; justify-content: flex-start; padding-left: 54px; }
}
@media (max-width: 1100px) {
  .det-head { grid-template-columns: minmax(0, 1fr); }
  .cv-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'l' 'p'; }
}
@media (max-width: 700px) {
  .cli-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-sub.abas-cli { flex-wrap: wrap; overflow: visible; }
  .det-head { padding: 18px; border-radius: 20px; }
  .det-head .avatar { width: 52px; height: 52px; font-size: 18px; border-radius: 15px; }
}
@media (max-width: 400px) { .cv-tiles { grid-template-columns: minmax(0, 1fr); } }

/* =================== whatsapp do cliente =================== */
.wa-conectar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 28px; }
.wa-con-txt h2 { font-size: 22px; margin: 10px 0 6px; }
.wa-passos { margin: 18px 0 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--mt); font-size: 13px; }
.wa-passos b { color: var(--tx); }
.wa-aviso { display: flex; gap: 8px; margin-top: 18px; padding: 10px 12px; border: 1px solid var(--albd); border-radius: 12px; background: var(--alb); color: var(--al); font-size: 12px; line-height: 1.6; }
.wa-aviso i { flex: none; margin-top: 2px; }
.wa-aviso[hidden] { display: none; }
.wa-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wa-qr img { width: 264px; height: 264px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 40px -6px rgba(46, 230, 166, .55); image-rendering: pixelated; }
.wa-qr-vazio { display: grid; place-items: center; gap: 10px; width: 264px; height: 264px; border: 1px dashed var(--bd2); border-radius: 18px; color: var(--mt2); }
.wa-qr-vazio i { font-size: 54px; }
.dot.pisca { display: inline-block; margin-right: 6px; color: var(--ok); background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulso 1.4s ease-in-out infinite; }
.wa-box { padding: 0; overflow: hidden; }
.wa-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.wa-topo b { font-family: var(--f-num); }
.wa-topo-info { margin-left: auto; }
.wa-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: min(72dvh, 760px); min-height: 460px; }
.wa-lista { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border-right: 1px solid var(--bd); background: rgba(5, 6, 10, .25); }
.wa-lista .cli-busca { max-width: none; flex: none; min-height: 40px; }
.wa-lista .cli-busca input { min-height: 38px; }
.wa-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.wa-vazio-lista { padding: 18px 8px; line-height: 1.7; }
.wa-chat { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 13px; text-align: left; transition: background var(--ease); }
.wa-chat .avatar, .wa-conv-head .avatar { --cc: var(--cy); width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; background: linear-gradient(140deg, var(--cc), color-mix(in srgb, var(--cc) 40%, #05060a)); }
.wa-chat-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wa-chat-l1, .wa-chat-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-chat-l1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.wa-chat-l1 small { flex: none; color: var(--mt2); font-size: 11px; }
.wa-chat-l2 > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mt); font-size: 12px; }
.wa-chat-l2 > span i { margin-right: 3px; color: var(--cy); font-size: 13px; vertical-align: -2px; }
.wa-nl { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 20px; background: var(--ok); color: #04130d; font-size: 11px; font-weight: 800; text-align: center; box-shadow: 0 0 10px -2px var(--ok); }
.wa-chat.nova .wa-chat-l1 b, .wa-chat.nova .wa-chat-l2 > span { color: var(--tx); }
.wa-chat.nova .wa-chat-l1 small { color: var(--ok2); }
.wa-ia-on { color: var(--vi); flex: none; }
.wa-chat.on { background: linear-gradient(90deg, rgba(56, 225, 255, .12), rgba(56, 225, 255, .03)); box-shadow: 0 0 0 1px var(--cybd) inset; }
@media (hover: hover) { .wa-chat:not(.on):hover { background: rgba(255, 255, 255, .04); } }
.wa-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: radial-gradient(circle at 20% 10%, rgba(56, 225, 255, .04), transparent 40%), radial-gradient(circle at 90% 90%, rgba(255, 106, 0, .04), transparent 40%); }
.wa-nada { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--mt); }
.wa-nada > i { font-size: 44px; color: var(--ok); filter: drop-shadow(0 0 12px rgba(46, 230, 166, .5)); }
.wa-conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bd); background: rgba(5, 6, 10, .35); }
.wa-conv-nm { display: flex; flex-direction: column; min-width: 0; }
.wa-conv-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-nm small { font-size: 11px; }
.wa-voltar { display: none; }
.wa-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
.wa-dia { align-self: center; margin: 10px 0 4px; }
.wa-dia span { padding: 4px 12px; border: 1px solid var(--bd); border-radius: 20px; background: rgba(5, 6, 10, .6); color: var(--mt); font-size: 11px; }
.wa-msg { display: flex; }
.wa-msg.eu { justify-content: flex-end; }
.wa-bolha { position: relative; max-width: min(72%, 560px); padding: 9px 12px 7px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.wa-msg.ele .wa-bolha { border: 1px solid var(--bd); border-bottom-left-radius: 5px; background: rgba(19, 23, 38, .9); }
.wa-msg.eu .wa-bolha { border-bottom-right-radius: 5px; background: linear-gradient(135deg, rgba(255, 106, 0, .3), rgba(255, 106, 0, .16)); border: 1px solid rgba(255, 138, 51, .32); }
.wa-bolha > i.ti { color: var(--cy); }
.wa-meta { display: block; margin-top: 3px; color: var(--mt2); font-size: 10px; text-align: right; }
.wa-msg.eu .wa-meta { color: #ffc49a; opacity: .8; }
.wa-comp { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--bd); background: rgba(5, 6, 10, .4); }
.wa-comp textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; border-radius: 14px; }
.wa-comp .send { display: grid; place-items: center; flex: none; width: 46px; height: 44px; border-radius: 14px; }
.wa-ia-btn.on { color: #fff; border-color: rgba(139, 123, 255, .5); background: linear-gradient(135deg, rgba(139, 123, 255, .3), rgba(139, 123, 255, .1)); box-shadow: 0 0 18px -6px rgba(139, 123, 255, .8); }
.wa-ia-btn.on i { color: var(--pu); }
.wa-ia-chave { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12px; font-weight: 600; color: var(--mt); cursor: pointer; }
.wa-ia-chave i { color: var(--pu); margin-right: 3px; }
.wa-ia-chave:has(input:checked) { color: var(--tx); }
.wa-ia-form .wa-ia-linha { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--tx); }
.wa-ia-form .wa-ia-linha > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.wa-ia-form textarea { font-size: 13px; line-height: 1.6; }
.wa-ia-quem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wa-ia-quem label { display: block; cursor: pointer; }
.wa-ia-quem input { position: absolute; opacity: 0; pointer-events: none; }
.wa-ia-quem label > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; height: 100%; padding: 12px 14px; border: 1px solid var(--bd2); border-radius: 14px; background: var(--sf2); color: var(--tx); transition: border-color .15s, background .15s; }
.wa-ia-quem label > span i { grid-row: span 2; font-size: 20px; color: var(--mt); }
.wa-ia-quem small { color: var(--mt); font-size: 11.5px; font-weight: 400; }
.wa-ia-quem input:checked + span { border-color: rgba(139, 123, 255, .6); background: linear-gradient(135deg, rgba(139, 123, 255, .22), rgba(139, 123, 255, .06)); box-shadow: 0 0 18px -8px rgba(139, 123, 255, .9); }
.wa-ia-quem input:checked + span i { color: var(--pu); }
.wa-ia-quem input:focus-visible + span { outline: 2px solid var(--pu); outline-offset: 2px; }
.wa-ia-fluxo { display: flex; flex-direction: column; gap: 6px; }
.wa-ia-fluxo[hidden] { display: none; }
.wa-ia-fluxo input { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.wa-ia-form code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--cy); overflow-wrap: anywhere; }
@media (max-width: 520px) { .wa-ia-quem { grid-template-columns: minmax(0, 1fr); } }
.wa-msg.eu .wa-bolha:has(.wa-meta-ia) { background: linear-gradient(135deg, rgba(139, 123, 255, .3), rgba(139, 123, 255, .14)); border-color: rgba(139, 123, 255, .4); }
@media (max-width: 900px) {
  .wa-ia-chave > span:last-child { display: none; }
  .wa-conectar { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .wa-qr { order: -1; }
  .wa-grid { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 290px); min-height: 400px; }
  .wa-lista { border-right: 0; }
  .wa-box.com-conversa .wa-lista { display: none; }
  .wa-box:not(.com-conversa) .wa-conversa { display: none; }
  .wa-voltar { display: grid; }
  .wa-topo-info { display: none; }
  .wa-bolha { max-width: 86%; }
}

/* =================== assinantes (saas) =================== */
.saas-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saas-linha .avatar { --cc: var(--ac); border: 0; border-radius: 14px; color: #fff; font-weight: 700; background: linear-gradient(140deg, var(--cc), color-mix(in srgb, var(--cc) 45%, #05060a)); }
.saas-linha .t small { font-weight: 400; }
.saas-rec summary { cursor: pointer; list-style: none; }
.saas-rec summary::-webkit-details-marker { display: none; }
.saas-rec[open] summary { margin-bottom: 14px; }
@media (max-width: 900px) { .saas-stats { grid-template-columns: minmax(0, 1fr); } }

/* =================== fluxos do plano (cliente do saas) =================== */
.fx-plano { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.card-head > .fx-anel, .fx-anel { flex: 0 0 84px; width: 84px; height: 84px; }
.fx-anel span { font-size: 17px; }
.fx-plano-txt { flex: 1 1 260px; min-width: 0; }
.fx-plano-txt h2 { font-size: 22px; margin: 6px 0 4px; }
.fx-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1 1 300px; }
.fx-mini div { padding: 12px; border: 1px solid var(--bd); border-radius: 14px; background: rgba(5, 6, 10, .4); }
.fx-mini span { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mt2); }
.fx-mini b { font-family: var(--f-num); font-size: 22px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.fx-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--bd); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.fx-card.on { border-color: rgba(46, 230, 166, .22); }
.fx-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-top b { flex: 1; min-width: 0; font-family: var(--f-num); font-size: 15px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fx-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--cy); background: var(--cyb); box-shadow: 0 0 18px -6px rgba(56, 225, 255, .6); }
.fx-ult { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-sem { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--bd); font-size: 13px; color: var(--mt); }
.fx-sem b { font-family: var(--f-num); font-size: 16px; color: var(--tx); }
.fx-sem small { margin-left: auto; }
.fx-pedir textarea { min-height: 90px; }
.saas-pedido { border-left: 3px solid var(--cy); }

/* ---------- relatório de tráfego: decisões ---------- */
.pill.violet { background: var(--pub); border-color: rgba(139, 123, 255, .3); color: var(--pu); }
.rel-delta { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-family: var(--f-num, inherit); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mt); background: rgba(255, 255, 255, .05); vertical-align: middle; white-space: nowrap; }
.rel-delta i { font-size: 11px; }
.rel-delta.up { color: var(--ok2); background: var(--okb); }
.rel-delta.down { color: var(--er); background: var(--erb); }
.rel-mini .rel-delta { align-self: flex-start; margin-left: 0; }
.rel-acoes h3 { margin-bottom: 10px; }
.rel-acoes h3 i { color: var(--ac); }
.rel-acoes h3 small { margin-left: auto; font-size: 11.5px; font-weight: 400; }
.rel-acoes ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rel-acao { --c: var(--cy); --cb: var(--cyb); display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--bd); border-left: 3px solid var(--c); border-radius: 14px; background: linear-gradient(100deg, var(--cb), transparent 70%); min-width: 0; }
.rel-acao.ruim { --c: var(--er); --cb: var(--erb); }
.rel-acao.atencao { --c: var(--al); --cb: var(--alb); }
.rel-acao.bom { --c: var(--ok); --cb: var(--okb); }
.rel-acao > i:first-child { flex: none; margin-top: 2px; font-size: 18px; color: var(--c); }
.rel-acao > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rel-acao small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.rel-acao b { font-size: 13.5px; color: var(--tx); overflow-wrap: anywhere; }
.rel-acao span { font-size: 12.5px; line-height: 1.55; color: var(--mt); }
.rel-acao[data-rel-ad] { cursor: pointer; transition: border-color .15s, transform .15s; }
.rel-acao[data-rel-ad]:hover, .rel-acao[data-rel-ad]:focus-visible { border-color: var(--c); outline: none; }
.ao-vivo-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(46, 230, 166, .6); animation: ao-vivo 1.8s ease-out infinite; vertical-align: 1px; }
@keyframes ao-vivo { 0% { box-shadow: 0 0 0 0 rgba(46, 230, 166, .55); } 70% { box-shadow: 0 0 0 7px rgba(46, 230, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 230, 166, 0); } }
.pill.ao-vivo { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.tr-periodo .chip i { margin-right: 4px; }
.tr-datas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 10px 0 2px; padding: 12px 14px; border: 1px solid var(--bd2); border-radius: 14px; background: var(--sf); }
.tr-datas.hidden { display: none; }
.tr-datas label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mt); }
.tr-datas input[type=date] { min-height: 38px; color-scheme: dark; }
.tr-datas small { flex-basis: 100%; }
.girando { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ao-vivo-dot, .girando { animation: none; } }
#cliRel .rel-minis { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
#cliRel .rel-grade.tres { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rel-destino { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--cybd); background: var(--cyb); color: var(--cy); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.rel-destino .ti-brand-whatsapp { color: #25d366; }
.rel-destino .ti-brand-instagram { color: #e1306c; }
.rel-acao-bts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.rel-acao-bts .link { min-height: 0; padding: 2px 0; font-size: 12px; font-weight: 600; color: var(--tx); display: inline-flex; align-items: center; gap: 4px; }
.rel-acao-bts .link i { font-size: 14px; color: var(--c); }
.rel-acao-bts .link.fraco, .rel-decisoes .link.fraco { color: var(--mt); font-weight: 500; }
.rel-acao-bts .link.fraco i { color: var(--mt2); }
.rel-acao-bts .link:disabled { opacity: .5; }
.rel-meta { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.rel-meta.ok { color: var(--ok2); } .rel-meta.fora { color: var(--er); }
.rel-topo-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.rel-topo-acoes .link { margin-left: 0; }
.rel-decisoes h3 i { color: var(--cy); }
.rel-decisoes .linha { align-items: flex-start; gap: 12px; }
.rel-decisoes .t { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; white-space: normal; }
.rel-decisoes .t i { flex: none; margin-top: 2px; color: var(--ok2); }
.rel-decisoes .t .ti-circle-minus { color: var(--mt2); }
.rel-dec-res { display: block; margin-top: 3px; font-size: 12px; }
.rel-dec-res.up { color: var(--ok2); } .rel-dec-res.down { color: var(--er); }
.rel-dec-res i { margin-right: 3px; }
.rel-dec-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.rel-dec-dir .link { min-height: 0; font-size: 11.5px; }
.rel-verba-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rel-verba-top h3 { margin: 0; }
.rel-verba-top h3 i { color: var(--cy); }
.rel-verba-barra { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: visible; }
.rel-verba-barra .gasto { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cy), #7cf0ff); box-shadow: 0 0 14px -2px rgba(56, 225, 255, .6); }
.rel-verba-barra .gasto.neg { background: linear-gradient(90deg, #ff8a5c, var(--er)); box-shadow: 0 0 14px -2px rgba(255, 107, 129, .6); }
.rel-verba-barra .gasto.warn { background: linear-gradient(90deg, #ffb347, var(--al)); box-shadow: none; }
.rel-verba-barra .ideal { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tx); opacity: .7; }
.rel-verba-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
.rel-verba-nums span { display: flex; flex-direction: column; gap: 2px; }
.rel-verba-nums small { font-size: 11px; color: var(--mt); }
.rel-verba-nums b { font-family: var(--f-num, inherit); font-size: 15px; font-variant-numeric: tabular-nums; }
.rel-tabela-wrap { margin: 10px -18px -16px; overflow-x: auto; border-top: 1px solid var(--bd); }
.rel-tabela { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 12.5px; }
.rel-tabela th, .rel-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--bd); text-align: left; white-space: nowrap; font-weight: 400; }
.rel-tabela thead th { position: sticky; top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mt); background: var(--sf); }
.rel-tabela .n { text-align: right; font-variant-numeric: tabular-nums; }
.rel-tabela td.n small { display: block; font-size: 10.5px; color: var(--mt2); }
.rel-tabela tbody th { max-width: 340px; white-space: normal; }
.rel-tabela tr.camp { background: rgba(255, 255, 255, .025); }
.rel-tabela tr.camp th, .rel-tabela tr.camp td { font-weight: 600; color: var(--tx); }
.rel-abre { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rel-abre i { transition: transform .15s; color: var(--mt); }
.rel-camp.aberta .rel-abre i { transform: rotate(90deg); }
.rel-camp:not(.aberta) tr:not(.camp) { display: none; }
.rel-tabela tr.conj th span { display: inline-flex; align-items: center; gap: 6px; padding-left: 20px; color: var(--mt); }
.rel-tabela tr.conj td { color: var(--mt); }
.rel-tabela tr.ad th > span { display: flex; align-items: center; gap: 10px; padding-left: 40px; }
.rel-tabela tr.ad img, .rel-tabela tr.ad th > span > i { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--sf2); display: grid; place-items: center; color: var(--mt2); }
.rel-tabela tr.ad .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.rel-tabela tr.ad .nm small { font-size: 10.5px; color: var(--mt2); }
.rel-tabela tr.ad.foco { animation: rel-foco 1.8s ease-out; }
@keyframes rel-foco { from { background: rgba(255, 106, 0, .22); } to { background: transparent; } }
.rel-selo { font-size: 11px; padding: 2px 8px; }
.rel-criativos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.rel-criativo { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border: 1px solid var(--bd); border-radius: 14px; background: var(--sf); color: var(--tx); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color .15s, transform .15s; }
.rel-criativo:hover, .rel-criativo:focus-visible { border-color: var(--bd2); transform: translateY(-2px); outline: none; }
.rel-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sf2); display: grid; place-items: center; color: var(--mt2); font-size: 28px; }
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rel-thumb .rel-selo { position: absolute; top: 8px; left: 8px; backdrop-filter: blur(8px); }
.rel-criativo > b { padding: 0 4px; font-size: 12.5px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-criativo-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rel-criativo-nums span { display: flex; flex-direction: column; }
.rel-criativo-nums small { font-size: 10px; color: var(--mt); }
.rel-semanas .linha b { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.rel-semanas .txt { flex: 1; min-width: 0; }
.rel-sem-barra { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .05); }
.rel-sem-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ac), var(--ac2)); }
@media (max-width: 900px) { .rel-acoes ol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .rel-tabela-wrap { margin-left: -14px; margin-right: -14px; }
  .rel-criativos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-verba-nums { gap: 8px 18px; }
}

/* ---------- entrada suave ao trocar de aba ---------- */
main > .tab:not(.hidden) > *, #tab-inicio:not(.hidden) .home-main > * { animation: orbit-sobe .55s cubic-bezier(.2, .8, .2, 1) both; }
main > .tab:not(.hidden) > :nth-child(2), #tab-inicio .home-main > :nth-child(2) { animation-delay: .05s; }
main > .tab:not(.hidden) > :nth-child(3), #tab-inicio .home-main > :nth-child(3) { animation-delay: .1s; }
main > .tab:not(.hidden) > :nth-child(4), #tab-inicio .home-main > :nth-child(4) { animation-delay: .15s; }
main > .tab:not(.hidden) > :nth-child(n+5), #tab-inicio .home-main > :nth-child(n+5) { animation-delay: .2s; }
#tab-inicio:not(.hidden) > .home-main, #tab-inicio:not(.hidden) > #painelMestre, #tab-inicio:not(.hidden) > #fabMestre { animation: none; }
@keyframes orbit-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- responsivo ---------- */
@media (max-width: 1280px) {
  .vg-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'b' 'a'; }
  .vg-col-b { position: static; }
  .vg-col-b .vg-hoje-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { #tab-inicio .vg-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  #tab-inicio .vg-hero { padding: 22px; border-radius: 22px; }
  .vg-col-b .vg-hoje-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi strong { font-size: 30px; }
}
@media (max-width: 560px) {
  #tab-inicio .vg-hero { padding: 18px; }
  .vg-hero h1 { font-size: 27px; }
  #tab-inicio .vg-hero .head-acts .btn { flex: 1 1 auto; }
  .vg-score { padding: 14px; gap: 14px; }
  .vg-ring { width: 64px; height: 64px; }
  .vg-mini { padding: 10px; }
  .vg-mini span { white-space: normal; font-size: 9px; letter-spacing: .05em; line-height: 1.35; }
  .vg-mini b { font-size: 18px; }
  .vg-chart { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, #tab-inicio .vg-hero::after, .vg-agent.vg-working::after, #tab-inicio #fabMestre::before { animation: none; }
  main > .tab:not(.hidden) > *, #tab-inicio:not(.hidden) .home-main > * { animation: none; }
  .vg-traco { animation: none; stroke-dashoffset: 0; }
}