/* ════════════════════════════════════════════════════════════
   ATOMIC FLOW — Redesign system
   Jost (display, equiv. Kiona) + Kumbh Sans (texto) · 3 direções via [data-dir]
   Fontes carregadas via <link> no HTML.
════════════════════════════════════════════════════════════ */

/* ── TOKENS BASE (compartilhados) ── */
:root{
  --font-display:'Jost','Kumbh Sans',sans-serif;
  --font-text:'Kumbh Sans',sans-serif;

  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.14s var(--ease); --t:.22s var(--ease);

  /* canais — constantes em todas as direções */
  --c-wpp:#25d366; --c-li:#3b82f6; --c-mail:#a78bfa; --c-call:#fbbf24;
}

/* ════════════════════════════════════════════════════════════
   DIREÇÃO 1 · ECLIPSE  (dark minimalista, amarelo como único acento)
════════════════════════════════════════════════════════════ */
html[data-dir="eclipse"]{
  --bg:#0c0c0d;
  --bg-grad:radial-gradient(120% 80% at 50% -10%,#161617 0%,#0c0c0d 60%);
  --s1:#141415; --s2:#1a1a1c; --s3:#212124; --s-hover:#26262a;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --tx:#f4f4f2; --tx-mut:#94949c; --tx-faint:#5c5c63;

  --primary:#ffc002; --primary-ink:#131312;
  --primary-soft:rgba(255,192,2,.12); --primary-line:rgba(255,192,2,.35);
  --accent:#ffc002; --accent-soft:rgba(255,192,2,.12);

  --blue:#6f8cff; --blue-soft:rgba(111,140,255,.13);
  --green:#34d399; --green-soft:rgba(52,211,153,.13);
  --red:#f87171; --red-soft:rgba(248,113,113,.13);
  --orange:#fbbf24; --orange-soft:rgba(251,191,36,.13);
  --purple:#c084fc; --purple-soft:rgba(192,132,252,.13);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-pop:0 24px 60px -20px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* ════════════════════════════════════════════════════════════
   DIREÇÃO 2 · REACTOR  (dark, azul primário + amarelo energia)
════════════════════════════════════════════════════════════ */
html[data-dir="reactor"]{
  --bg:#0a0b10;
  --bg-grad:radial-gradient(120% 80% at 80% -10%,#141826 0%,#0a0b10 55%);
  --s1:#12141c; --s2:#181b25; --s3:#1f2330; --s-hover:#252a3a;
  --line:rgba(125,150,255,.10); --line-2:rgba(125,150,255,.20);
  --tx:#eef0f7; --tx-mut:#8c92a8; --tx-faint:#565d72;

  --primary:#3f63ff; --primary-ink:#ffffff;
  --primary-soft:rgba(63,99,255,.16); --primary-line:rgba(63,99,255,.5);
  --accent:#ffc002; --accent-soft:rgba(255,192,2,.14);

  --blue:#6f8cff; --blue-soft:rgba(111,140,255,.15);
  --green:#34d399; --green-soft:rgba(52,211,153,.14);
  --red:#f87171; --red-soft:rgba(248,113,113,.14);
  --orange:#fbbf24; --orange-soft:rgba(251,191,36,.14);
  --purple:#c084fc; --purple-soft:rgba(192,132,252,.14);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 44px -26px rgba(0,0,0,.9);
  --shadow-pop:0 28px 64px -22px rgba(4,8,30,.9);
  color-scheme:dark;
}

/* ════════════════════════════════════════════════════════════
   DIREÇÃO 3 · DAYLIGHT  (clara, azul primário)
════════════════════════════════════════════════════════════ */
html[data-dir="daylight"]{
  --bg:#f3f4f7;
  --bg-grad:radial-gradient(120% 80% at 50% -10%,#ffffff 0%,#eef0f4 70%);
  --s1:#ffffff; --s2:#ffffff; --s3:#f4f5f8; --s-hover:#eef0f5;
  --line:rgba(19,19,18,.09); --line-2:rgba(19,19,18,.16);
  --tx:#16171a; --tx-mut:#6a6e78; --tx-faint:#9aa0ab;

  --primary:#254dcf; --primary-ink:#ffffff;
  --primary-soft:rgba(37,77,207,.10); --primary-line:rgba(37,77,207,.35);
  --accent:#e0a400; --accent-soft:rgba(255,192,2,.18);

  --blue:#254dcf; --blue-soft:rgba(37,77,207,.10);
  --green:#159a5b; --green-soft:rgba(21,154,91,.12);
  --red:#dc2626; --red-soft:rgba(220,38,38,.10);
  --orange:#d97706; --orange-soft:rgba(217,119,6,.12);
  --purple:#7c3aed; --purple-soft:rgba(124,58,237,.10);
  --shadow:0 1px 2px rgba(19,19,18,.04), 0 12px 32px -18px rgba(19,19,18,.22);
  --shadow-pop:0 30px 60px -24px rgba(19,19,18,.28);
  color-scheme:light;
}

/* ════════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--tx);
  font-family:var(--font-text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s var(--ease), color .35s var(--ease);
  overflow-x:hidden;
}
button{font-family:inherit}
svg{display:block}
.ico{width:18px;height:18px;stroke-width:1.6;flex:0 0 auto}
.ico-sm{width:15px;height:15px}
.ico-lg{width:22px;height:22px}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--tx-faint);background-clip:padding-box}

/* ── TIPOGRAFIA ── */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;line-height:1.02}
.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-mut)}
.num{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ════════════════════════════════════════════════════════════
   BOTÕES
════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);}
.btn:active{transform:translateY(.5px)}
.btn .ico{width:16px;height:16px}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-soft{background:var(--s3);color:var(--tx);border-color:var(--line)}
.btn-soft:hover{background:var(--s-hover);border-color:var(--line-2)}
.btn-ghost{background:transparent;color:var(--tx-mut);border-color:transparent}
.btn-ghost:hover{background:var(--s2);color:var(--tx)}
.btn-line{background:transparent;color:var(--tx);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--tx-faint);background:var(--s2)}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-accent{background:var(--accent);color:var(--primary-ink)}
.btn-accent:hover{filter:brightness(1.07)}
.btn-yellow{background:var(--accent);color:var(--primary-ink);font-weight:700}
.btn-yellow:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-lg{padding:12px 20px;font-size:14px}
.btn-xs{padding:4px 8px;font-size:11px}
.btn-icon{padding:8px;border-radius:var(--r-sm)}
.btn-icon.btn-sm{padding:6px}

/* ── INPUTS ── */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut)}
input,select,textarea{
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx);
  font-family:var(--font-text);font-size:13.5px;padding:10px 13px;width:100%;outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);}
input:focus,select:focus,textarea:focus{border-color:var(--primary-line);box-shadow:0 0 0 3px var(--primary-soft)}
input::placeholder,textarea::placeholder{color:var(--tx-faint)}
select option{background:var(--s2)}
textarea{resize:vertical;min-height:72px}
.input-search{display:flex;align-items:center;gap:9px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 13px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input-search:focus-within{border-color:var(--primary-line);box-shadow:0 0 0 3px var(--primary-soft)}
.input-search .ico{color:var(--tx-faint);width:16px;height:16px}
.input-search input{background:none;border:none;padding:10px 0;box-shadow:none!important}

.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fg label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ════════════════════════════════════════════════════════════
   APP SHELL
════════════════════════════════════════════════════════════ */
#app{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.screen{display:none;flex-direction:column;flex:1;animation:fade .3s var(--ease)}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-inner{height:62px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.brand-name b{color:var(--accent);font-weight:600}
.spacer{flex:1}

/* user chip */
.user{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 12px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--s1);cursor:pointer;transition:border-color var(--t-fast)}
.user:hover{border-color:var(--line-2)}
.user .nm{font-size:13px;font-weight:600}
.avatar{width:30px;height:30px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--primary-ink);
  background:var(--primary);flex:0 0 auto}
.avatar.lg{width:48px;height:48px;font-size:18px;border-radius:14px}
.avatar.sm{width:22px;height:22px;font-size:9px;border-radius:7px}
.avatar.blue{background:var(--blue);color:#fff}
.avatar.no-owner{background:var(--red-soft);border:1.5px solid var(--red);cursor:help}

/* ════════════════════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════════════════════ */
.page{padding-top:44px;padding-bottom:64px;flex:1}
.page-head{margin-bottom:32px}
.page-title{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:.005em;margin-bottom:8px}
.page-sub{font-size:14.5px;color:var(--tx-mut);max-width:60ch}

/* ════════════════════════════════════════════════════════════
   FOCUS BANNER  (o "o que faço agora")
════════════════════════════════════════════════════════════ */
.focus{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--r-lg);margin-bottom:28px;
  background:linear-gradient(100deg,var(--primary-soft),transparent 70%);border:1px solid var(--primary-line);position:relative;overflow:hidden}
.focus-ico{width:44px;height:44px;border-radius:13px;background:var(--primary);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.focus-ico .ico{width:22px;height:22px;stroke-width:2}
.focus-txt{flex:1}
.focus-txt .t{font-size:15px;font-weight:700;margin-bottom:2px}
.focus-txt .s{font-size:13px;color:var(--tx-mut)}
.focus-num{font-family:var(--font-display);font-size:40px;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}

/* ════════════════════════════════════════════════════════════
   CLIENTS GRID
════════════════════════════════════════════════════════════ */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:24px}
.client-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;cursor:pointer;position:relative;
  transition:border-color var(--t),transform var(--t),background var(--t);box-shadow:var(--shadow)}
.client-card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--s2)}
.cc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.cc-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--t-fast)}
.client-card:hover .cc-actions{opacity:1}
.cc-actions .btn-icon{color:var(--tx-mut)}
.cc-name{font-size:17px;font-weight:700;margin-bottom:3px}
.cc-meta{font-size:12.5px;color:var(--tx-mut);margin-bottom:18px}
.cc-today{display:flex;align-items:baseline;gap:8px;padding:13px 15px;border-radius:var(--r-md);background:var(--accent-soft);margin-bottom:14px}
.cc-today .n{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--accent);line-height:1}
.cc-today .l{font-size:12px;font-weight:600;color:var(--tx)}
.cc-today.zero{background:var(--s3)}.cc-today.zero .n{color:var(--tx-mut)}
.cc-stats{display:flex;gap:22px}
.cc-stat .n{font-family:var(--font-display);font-size:18px;font-weight:600;display:block;line-height:1}
.cc-stat .l{font-size:10.5px;color:var(--tx-mut);letter-spacing:.04em;margin-top:4px}
.add-card{background:transparent;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);min-height:206px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--tx-mut);transition:all var(--t)}
.add-card:hover{border-color:var(--primary-line);color:var(--primary);background:var(--primary-soft)}
.add-card .ring{width:46px;height:46px;border-radius:var(--r-full);background:var(--s2);display:flex;align-items:center;justify-content:center}
.add-card:hover .ring{background:var(--primary);color:var(--primary-ink)}

/* ════════════════════════════════════════════════════════════
   WORKSPACE TOPBAR
════════════════════════════════════════════════════════════ */
.ws-bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ws-bar-inner{height:60px;display:flex;align-items:center;gap:14px}
.iconbtn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--s1);color:var(--tx-mut);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast)}
.iconbtn:hover{color:var(--tx);border-color:var(--line-2);background:var(--s2)}
.ws-client{display:flex;align-items:center;gap:10px;padding-right:16px;margin-right:2px;border-right:1px solid var(--line)}
.ws-client .nm{font-size:15px;font-weight:700}
.ws-nav{display:flex;gap:2px}
.ws-tab{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);background:none;border:none;color:var(--tx-mut);font-family:var(--font-text);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.ws-tab .ico{width:16px;height:16px}
.ws-tab:hover{color:var(--tx);background:var(--s2)}
.ws-tab.active{color:var(--tx);background:var(--s3)}
.ws-tab.active .ico{color:var(--primary)}
.ws-actions{display:flex;align-items:center;gap:8px}

.ws-body{flex:1;padding-top:32px;padding-bottom:64px}
.tab-pane{display:none;animation:fade .25s var(--ease)}
.tab-pane.active{display:block}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section-title{font-family:var(--font-display);font-size:23px;font-weight:600}
.section-sub{font-size:13.5px;color:var(--tx-mut);margin-top:3px}

/* ── KANBAN CONTROLS ── */
.kanban-controls{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.segmented{display:flex;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px}
.seg{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;background:none;color:var(--tx-mut);font-family:var(--font-text);font-size:12.5px;font-weight:600;border-radius:6px;cursor:pointer;transition:all var(--t-fast)}
.seg .ico{width:15px;height:15px}
.seg.active{background:var(--s3);color:var(--tx)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--s1);color:var(--tx-mut);font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.chip:hover{border-color:var(--line-2);color:var(--tx)}
.chip.active{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.chip.active.warn{background:var(--accent);border-color:var(--accent);color:var(--primary-ink)}

/* ── KANBAN BOARD ── */
.kanban-scroll{overflow-x:auto;padding-bottom:16px;margin:0 -32px;padding-left:32px;padding-right:32px}
.kanban{display:flex;gap:14px;min-width:max-content;align-items:flex-start}
.kcol{width:256px;flex:0 0 auto;display:flex;flex-direction:column}
.kcol-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px}
.kcol-day{display:flex;align-items:center;gap:9px}
.kcol-num{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}
.kcol-ch{display:flex;gap:5px;color:var(--tx-faint)}
.kcol-ch .ico{width:14px;height:14px}
.kcol-cnt{font-family:var(--font-display);font-size:12px;font-weight:600;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-full);background:var(--s3);color:var(--tx-mut);display:flex;align-items:center;justify-content:center}
.kcol-body{display:flex;flex-direction:column;gap:9px;padding:10px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);min-height:120px;flex:1}
.kcol.done .kcol-body{background:transparent;border-style:dashed}

.kcard{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px;cursor:pointer;transition:all var(--t-fast);position:relative}
.kcard:hover{border-color:var(--line-2);background:var(--s3);transform:translateY(-1px)}
.kcard.today{border-color:var(--primary-line);box-shadow:0 0 0 1px var(--primary-line)}
.kcard.today::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;background:var(--accent)}
.kcard.respondeu{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.5);box-shadow:0 0 0 1px rgba(251,191,36,.3),0 4px 16px rgba(251,191,36,.08)}
.kcard.respondeu:hover{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.7)}
.kcard.respondeu::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;background:#fbbf24}
.kcard.prio{border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.04)}
.kcard.prio:hover{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.6)}
.kcard.prio::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;background:var(--orange)}
.tag-prio{color:var(--orange)}
.wpp-ok,.wpp-badge.ok{color:var(--c-wpp)}
.wpp-fail,.wpp-badge.fail{color:var(--tx-faint)}
.wpp-badge{display:inline-flex;align-items:center}
.wpp-badge .ico{width:13px;height:13px}
.obtn.sel-prio{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.45);color:var(--orange)}
.b-agendamento{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}
.kcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
.kcard-name{font-size:13.5px;font-weight:700;line-height:1.25}
.kcard-co{font-size:12px;color:var(--tx-mut);margin-top:1px}
.kcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px}
.kcard-tags{display:flex;gap:5px}
.today-pip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.today-pip .ico{width:12px;height:12px;stroke-width:2.2}
.kempty{text-align:center;color:var(--tx-faint);font-size:12px;padding:22px 0}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-full)}
.badge .dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.b-pending{background:var(--blue-soft);color:var(--blue)} .b-pending .dot{background:var(--blue)}
.b-today{background:var(--accent-soft);color:var(--accent)} .b-today .dot{background:var(--accent)}
.b-scheduled{background:var(--orange-soft);color:var(--orange)} .b-scheduled .dot{background:var(--orange)}
.b-done{background:var(--green-soft);color:var(--green)} .b-done .dot{background:var(--green)}
.b-noshow{background:var(--purple-soft);color:var(--purple)} .b-noshow .dot{background:var(--purple)}
.b-won{background:var(--green-soft);color:var(--green)} .b-won .dot{background:var(--green)}
.b-lost{background:var(--red-soft);color:var(--red)} .b-lost .dot{background:var(--red)}
.b-finished{background:var(--s3);color:var(--tx-mut)} .b-finished .dot{background:var(--tx-mut)}
.b-executar{background:var(--accent-soft);color:var(--accent)} .b-executar .dot{background:var(--accent)}
.b-aguardar{background:var(--blue-soft);color:var(--blue)} .b-aguardar .dot{background:var(--blue)}
.b-vencido{background:var(--red-soft);color:var(--red)} .b-vencido .dot{background:var(--red)}
.b-remarketing{background:var(--orange-soft);color:var(--orange)} .b-remarketing .dot{background:var(--orange)}
.tag-emoji{display:inline-flex;width:18px;height:18px;border-radius:5px;background:var(--s3);align-items:center;justify-content:center;color:var(--tx-mut)}
.tag-emoji .ico{width:11px;height:11px}

/* ════════════════════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.kpi-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut)}
.kpi-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.kpi-ico .ico{width:16px;height:16px}
.kpi-val{font-family:var(--font-display);font-size:38px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;color:var(--tx-mut);margin-top:6px}
.kpi.i-blue .kpi-ico{background:var(--blue-soft);color:var(--blue)} .kpi.i-blue .kpi-val{color:var(--blue)}
.kpi.i-accent .kpi-ico{background:var(--accent-soft);color:var(--accent)} .kpi.i-accent .kpi-val{color:var(--accent)}
.kpi.i-green .kpi-ico{background:var(--green-soft);color:var(--green)} .kpi.i-green .kpi-val{color:var(--green)}
.kpi.i-purple .kpi-ico{background:var(--purple-soft);color:var(--purple)} .kpi.i-purple .kpi-val{color:var(--purple)}

.panel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.panel-title{font-size:15px;font-weight:700}
.legend{display:flex;gap:18px}
.legend .it{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx-mut)}
.legend .ln{width:14px;height:3px;border-radius:99px}
.chart-wrap{position:relative;height:280px}

.goal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.goal-pct{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--accent)}
.bar{height:8px;border-radius:99px;background:var(--s3);overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--primary);transition:width .6s var(--ease)}

/* ════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity var(--t)}
.overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r-xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-pop);transform:translateY(16px) scale(.98);transition:transform var(--t)}
.overlay.open .modal{transform:none}
.modal-lg{max-width:680px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;position:sticky;top:0;z-index:10;background:var(--s1);border-bottom:1px solid var(--line);margin-bottom:4px}
.modal-title{font-family:var(--font-display);font-size:19px;font-weight:600}
.modal-body{padding:20px 26px 26px;margin-top:0}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding-top:20px;margin-top:8px;border-top:1px solid var(--line)}
.x{width:34px;height:34px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--s3);color:var(--tx-mut);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast);flex:0 0 auto;font-size:15px}
.x:hover{background:var(--red-soft);color:var(--red);border-color:transparent;transform:scale(1.08)}

/* ── LEAD MODAL ── */
.lead-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-md);background:var(--s2);border:1px solid var(--line);margin-bottom:22px}
.lead-hero .nm{font-size:16px;font-weight:700}
.lead-hero .mt{font-size:12.5px;color:var(--tx-mut);margin-top:2px}
.lead-hero .ow{font-size:11.5px;color:var(--tx-faint);margin-top:4px;display:flex;align-items:center;gap:5px}
.lead-day{margin-left:auto;text-align:center;flex:0 0 auto;padding-left:16px;border-left:1px solid var(--line)}
.lead-day .n{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--accent);line-height:1}
.lead-day .l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut);margin-top:3px}

.sec-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.action{display:flex;align-items:center;gap:12px;text-align:left;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;cursor:pointer;transition:all var(--t-fast);font-family:var(--font-text)}
.action:hover{transform:translateY(-1px);border-color:var(--line-2);background:var(--s3)}
.action .ai{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.action .ai .ico{width:18px;height:18px}
.action>span:last-child{display:flex;flex-direction:column;min-width:0}
.action .al{font-size:13px;font-weight:700;color:var(--tx);display:block}
.action .as{font-size:11.5px;color:var(--tx-mut);margin-top:1px;display:block}
.action.wpp .ai{background:rgba(37,211,102,.14);color:var(--c-wpp)} .action.wpp:hover{border-color:rgba(37,211,102,.4)}
.action.mail .ai{background:var(--purple-soft);color:var(--c-mail)} .action.mail:hover{border-color:var(--purple-soft)}
.action.email .ai{background:var(--purple-soft);color:var(--c-mail)} .action.email:hover{border-color:var(--purple-soft)}
.action.li .ai{background:rgba(59,130,246,.14);color:var(--c-li)} .action.li:hover{border-color:rgba(59,130,246,.4)}
.action.linkedin .ai{background:rgba(59,130,246,.14);color:var(--c-li)} .action.linkedin:hover{border-color:rgba(59,130,246,.4)}
.action.call .ai{background:var(--accent-soft);color:var(--c-call)} .action.call:hover{border-color:var(--primary-line)}

.outcome{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.obtn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--s2);color:var(--tx-mut);font-family:var(--font-text);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--t-fast)}
.obtn:hover{color:var(--tx);border-color:var(--line-2)}
.obtn.sel-won{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.obtn.sel-lost{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.obtn.sel-tag{background:var(--accent-soft);border-color:var(--primary-line);color:var(--accent)}

.history{display:flex;flex-direction:column;gap:0;position:relative;padding-left:8px}
.hitem{display:flex;gap:13px;padding:10px 0;position:relative}
.hitem:not(:last-child)::before{content:'';position:absolute;left:13px;top:30px;bottom:-4px;width:1.5px;background:var(--line)}
.hdot{width:28px;height:28px;border-radius:var(--r-full);background:var(--s2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--tx-mut);flex:0 0 auto;z-index:1}
.hdot .ico{width:14px;height:14px}
.htext{font-size:13px;flex:1}
.htime{font-size:11px;color:var(--tx-faint);white-space:nowrap}

/* ── USER MENU ── */
.user-wrap{position:relative}
.user .chev{color:var(--tx-faint);width:15px;height:15px;transition:transform var(--t-fast)}
.user-wrap.open .chev{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:268px;background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:8px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:all var(--t-fast);transform-origin:top right}
.user-wrap.open .menu{opacity:1;transform:none;pointer-events:auto}
.user-chip-sm.open .menu{opacity:1;transform:none;pointer-events:auto}
.menu-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.menu-head .mh-name{font-size:13.5px;font-weight:700;line-height:1.2}
.menu-head .mh-mail{font-size:11.5px;color:var(--tx-mut);margin-top:2px}
.menu-sec{padding:8px 10px}
.menu-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:9px}
.theme-seg{width:100%}
.theme-seg .seg{flex:1;justify-content:center}
.menu-divider{height:1px;background:var(--line);margin:6px 4px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:none;background:none;border-radius:var(--r-sm);
  color:var(--tx-mut);font-family:var(--font-text);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.menu-item:hover{background:var(--s2);color:var(--tx)}
.menu-item .ico{width:16px;height:16px}

/* ── TOAST ── */
.toast{position:fixed;bottom:84px;left:50%;transform:translate(-50%,20px);z-index:400;background:var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:11px 20px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:all var(--t);box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ico{width:16px;height:16px;color:var(--green)}

/* production toast (bottom-right, id="toast") */
#toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:11px 20px;
  font-size:13px;font-weight:600;z-index:9999;
  transform:translateY(60px) scale(.96);opacity:0;
  transition:all .22s var(--ease);max-width:320px;
  display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-pop);
}
#toast.show{transform:translateY(0) scale(1);opacity:1}
#toast.success{border-color:rgba(52,211,153,.4)}
#toast.error{border-color:rgba(248,113,113,.4)}

/* ── LEADS LIST ── */
.leads-list{display:flex;flex-direction:column;gap:8px}
.lead-row{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast)}
.lead-row:hover{border-color:var(--line-2);background:var(--s2)}
.lr-main{flex:1;min-width:0}
.lr-name{font-size:13.5px;font-weight:700}
.lr-co{font-size:12px;color:var(--tx-mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-sub{font-size:12px;color:var(--tx-mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-av{width:36px;height:36px;border-radius:var(--r-full);background:var(--blue-soft);border:1px solid rgba(111,140,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue);flex-shrink:0}
.lr-day{font-size:12px;color:var(--tx-mut);min-width:54px;text-align:right}
.lr-email{font-size:11px;color:var(--tx-faint);flex-shrink:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-row .btn .ico{width:14px;height:14px}

/* ── CONFIG ── */
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cad-row{display:flex;align-items:center;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line)}
.cad-row:last-child{border-bottom:none}
.cad-row .kcol-num{min-width:64px}
.cad-ch{display:flex;gap:8px;flex-wrap:wrap}
.cad-ch-t{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--s2);color:var(--tx-faint)}
.cad-ch-t.on{color:var(--tx);border-color:var(--primary-line);background:var(--primary-soft)}

/* queue info bar */
.queue-info-bar{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--tx-mut)}
#queue-info{display:none;font-size:13px;margin-bottom:16px;padding:13px 16px;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:space-between;gap:12px}

@media(max-width:920px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 18px}
  .frow,.cfg-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   PRODUCTION-SPECIFIC STYLES
   (components not in the redesign reference)
════════════════════════════════════════════════════════════ */

/* ── LOGIN SCREEN ── */
.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000}
.login-card{
  background:var(--s1);border:1px solid var(--line-2);
  border-radius:var(--r-xl);padding:48px 48px 40px;
  display:flex;flex-direction:column;align-items:center;
  max-width:400px;width:100%;box-shadow:var(--shadow-pop);
}
.btn-google{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--s2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:13px 24px;color:var(--tx);font-family:var(--font-text);
  font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:all var(--t-fast);
}
.btn-google:hover{border-color:var(--blue);background:var(--blue-soft)}

/* ── DISPATCH PANEL ── */
.dispatch-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--t)}
.dispatch-overlay.open{opacity:1;pointer-events:all}
.dispatch-panel{
  position:fixed;left:-420px;top:0;height:100vh;width:400px;
  background:var(--s1);border-right:1px solid var(--line-2);
  z-index:101;transition:left .3s var(--ease);display:flex;flex-direction:column;overflow:hidden;
}
.dispatch-panel.open{left:0}
.dp-header{padding:20px 20px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.dp-title{font-family:var(--font-display);font-size:16px;font-weight:700}
.dp-close{
  background:var(--s3);border:1px solid var(--line);color:var(--tx-mut);
  width:28px;height:28px;border-radius:var(--r-full);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);
}
.dp-close:hover{background:var(--red-soft);color:var(--red);border-color:transparent}
.dp-meta{padding:10px 20px;font-size:12px;color:var(--tx-mut);border-bottom:1px solid var(--line);flex-shrink:0}
.dp-body{flex:1;overflow-y:auto;padding:12px}
.dp-empty{color:var(--tx-mut);font-size:13px;text-align:center;padding:40px 20px}
.dp-item{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px}
.dp-item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.dp-item-name{font-size:13px;font-weight:700}
.dp-item-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);letter-spacing:.04em}
.dp-item-status.sending{background:var(--accent-soft);color:var(--accent)}
.dp-item-status.done{background:var(--green-soft);color:var(--green)}
.dp-item-status.error{background:var(--red-soft);color:var(--red)}
.dp-item-status.skipped{background:var(--s3);color:var(--tx-mut)}
.dp-blocks{font-size:11px;color:var(--tx-mut);margin-top:4px}
.dp-wait{font-size:11px;color:var(--tx-faint);padding:6px 14px;text-align:center;font-style:italic}
.dp-done-banner{background:var(--green-soft);border:1px solid rgba(52,211,153,.35);border-radius:var(--r-md);padding:14px;text-align:center;margin-top:8px}
.dp-done-banner div:first-child{font-size:20px;margin-bottom:4px}
.dp-done-banner div:last-child{font-size:13px;font-weight:700;color:var(--green)}

/* ── ATOMIC MAPS PANEL ── */
.gmaps-fab{
  position:fixed;bottom:28px;left:28px;
  width:52px;height:52px;border-radius:var(--r-full);
  background:var(--s1);border:1px solid var(--line-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:500;box-shadow:var(--shadow-pop);transition:all var(--t);padding:0;
}
.gmaps-fab:hover{border-color:var(--blue);box-shadow:0 4px 28px var(--blue-soft);transform:scale(1.08)}
.gmaps-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:110;opacity:0;pointer-events:none;transition:opacity var(--t)}
.gmaps-overlay.open{opacity:1;pointer-events:all}
.gmaps-panel{
  position:fixed;left:-920px;top:0;height:100vh;width:900px;max-width:100vw;
  background:var(--s1);border-right:1px solid var(--line-2);
  z-index:111;transition:left .3s var(--ease);display:flex;flex-direction:column;overflow:hidden;
}
.gmaps-panel.open{left:0}
.gm-header{padding:16px 22px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
.gm-title{font-family:var(--font-display);font-size:16px;font-weight:700;flex:1}
.gm-subtitle{font-size:11px;color:var(--tx-mut)}
.gm-filter-bar{padding:10px 22px;border-bottom:1px solid var(--line);display:flex;gap:9px;flex-shrink:0;flex-wrap:wrap;align-items:center}
.gm-filter-bar input,.gm-filter-bar select{padding:7px 11px;font-size:12px}
.gm-filter-bar input{flex:1;min-width:140px}
.gm-filter-bar select{width:auto;min-width:150px}
.gm-table-wrap{flex:1;overflow-y:auto}
.gm-table{width:100%;border-collapse:collapse;font-size:12px}
.gm-table th{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut);padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--s1);z-index:1;white-space:nowrap}
.gm-table td{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.025);vertical-align:middle}
.gm-table tr:hover td{background:rgba(255,255,255,.02)}
.gm-empresa{font-weight:600;color:var(--tx);max-width:220px}
.gm-sub{font-size:10px;color:var(--tx-mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.gm-muted{color:var(--tx-mut);font-size:11px;white-space:nowrap}
.gm-seg-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700;background:var(--blue-soft);color:var(--blue);border:1px solid rgba(111,140,255,.2);white-space:nowrap}
.gm-pushed{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--green)}
.gm-bulk-bar{padding:12px 22px;background:var(--s2);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
.gm-sel-count{font-size:13px;font-weight:700;color:var(--tx);flex:1}
.gm-empty{color:var(--tx-mut);font-size:13px;text-align:center;padding:60px 20px}

/* ── IMPORT MODAL (imp-*) ── */
.imp-steps{display:flex;align-items:center;margin-bottom:24px}
.imp-step-item{display:flex;align-items:center;gap:7px}
.imp-step-connector{flex:1;height:1px;background:var(--line);margin:0 10px}
.imp-step-dot{
  width:26px;height:26px;border-radius:var(--r-full);
  background:var(--s3);border:2px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--tx-mut);
  flex-shrink:0;transition:all var(--t);
}
.imp-step-dot.active{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.imp-step-dot.done{background:var(--green-soft);border-color:rgba(52,211,153,.4);color:var(--green)}
.imp-step-lbl{font-size:11px;font-weight:600;color:var(--tx-mut);white-space:nowrap;transition:color var(--t)}
.imp-step-lbl.active{color:var(--tx)}
.imp-upload-area{
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:28px;
  text-align:center;cursor:pointer;transition:all var(--t);margin-bottom:8px;
}
.imp-upload-area:hover,.imp-upload-area.drag-over{border-color:var(--primary-line);background:var(--primary-soft)}
.imp-upload-area.has-file{border-color:rgba(52,211,153,.4);background:var(--green-soft)}
.imp-upload-icon{font-size:26px;margin-bottom:6px}
.imp-upload-title{font-size:13px;font-weight:700;margin-bottom:3px}
.imp-upload-sub{font-size:11px;color:var(--tx-mut)}
.imp-divider{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--tx-mut);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.imp-divider::before,.imp-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.imp-map-meta{display:inline-block;font-size:11px;color:var(--tx-mut);margin-bottom:12px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 11px}
.imp-map-table{width:100%;border-collapse:collapse}
.imp-map-table th{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-mut);padding:7px 12px;text-align:left;border-bottom:1px solid var(--line)}
.imp-map-table td{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.025);vertical-align:middle}
.imp-map-table tr:last-child td{border-bottom:none}
.imp-col-src{font-size:12px;font-weight:600;padding:8px 12px!important;white-space:nowrap}
.imp-col-preview{font-size:11px;color:var(--tx-faint);padding:8px 12px!important;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-confirm-box{text-align:center;padding:22px 0}
.imp-confirm-count{font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--accent);line-height:1}
.imp-confirm-label{font-size:13px;color:var(--tx-mut);margin-top:4px;margin-bottom:16px}
.imp-confirm-detail{font-size:11px;color:var(--tx-faint);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;text-align:left}
.modal-add-lead{max-width:580px}

/* ── WPP MULTI-MESSAGE ── */
.wpp-mode-toggle{display:flex;gap:6px;margin-bottom:10px}
.wpp-mode-btn{flex:1;padding:6px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--s3);color:var(--tx-mut);font-family:var(--font-text);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--t-fast);text-align:center}
.wpp-mode-btn.active{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.09);color:#25d366}
.wpp-blocks{display:flex;flex-direction:column;gap:8px}
.wpp-block{background:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px}
.wpp-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.wpp-block-num{font-size:10px;font-weight:700;color:var(--tx-mut);letter-spacing:.1em;text-transform:uppercase}
.wpp-block-del{background:none;border:none;color:var(--tx-mut);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:var(--r-xs);transition:all var(--t-fast)}
.wpp-block-del:hover{background:var(--red-soft);color:var(--red)}
.add-wpp-block{width:100%;padding:7px;border-radius:var(--r-sm);border:1px dashed var(--line-2);background:transparent;color:var(--tx-mut);font-family:var(--font-text);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--t-fast);margin-top:4px}
.add-wpp-block:hover{border-color:rgba(37,211,102,.4);color:#25d366}

/* ── WPP SEND SEQUENCE ── */
.wpp-sequence{display:flex;flex-direction:column;gap:8px}
.wpp-seq-item{background:var(--s2);border:1px solid rgba(37,211,102,.15);border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:flex-start;gap:12px}
.wpp-seq-num{width:22px;height:22px;border-radius:var(--r-full);background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.25);color:#25d366;font-family:var(--font-display);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.wpp-seq-text{font-size:12px;color:var(--tx);flex:1;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.wpp-seq-btn{background:#25d366;border:none;border-radius:var(--r-sm);color:#fff;font-family:var(--font-text);font-size:11px;font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all var(--t-fast)}
.wpp-seq-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.wpp-seq-btn.sent{background:var(--s3);color:var(--green);border:1px solid rgba(52,211,153,.3)}

/* ── LINKEDIN SECTION ── */
.linkedin-section{background:var(--s2);border:1px solid rgba(59,130,246,.2);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px}
.li-msg-block{background:var(--s3);border-radius:var(--r-sm);padding:10px 12px}
.li-msg-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:6px}
.li-msg-text{font-size:12px;color:var(--tx);line-height:1.55;white-space:pre-wrap;word-break:break-word;margin-bottom:8px}
.li-msg-actions{display:flex;gap:7px;flex-wrap:wrap}
.li-copy-btn,.li-connect-btn{padding:5px 12px;border-radius:var(--r-sm);border:1px solid rgba(59,130,246,.35);background:rgba(59,130,246,.08);color:var(--blue);font-family:var(--font-text);font-size:11px;font-weight:700;cursor:pointer;transition:all var(--t-fast);display:inline-flex;align-items:center;gap:5px}
.li-copy-btn:hover,.li-connect-btn:hover{background:rgba(59,130,246,.18);border-color:var(--blue)}
.li-copy-btn.copied{background:var(--green-soft);border-color:rgba(52,211,153,.4);color:var(--green)}
.li-connect-btn{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.5)}
.li-connect-btn .ico,.li-copy-btn .ico{width:12px;height:12px}
.li-done-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.li-done-btn{padding:5px 12px;border-radius:var(--r-sm);border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08);color:var(--green);font-family:var(--font-text);font-size:11px;font-weight:700;cursor:pointer;transition:all var(--t-fast);margin-left:auto}
.li-done-btn:hover{background:rgba(52,211,153,.18);border-color:var(--green)}
.li-done-btn.li-done-sent{background:var(--green-soft);border-color:rgba(52,211,153,.5);opacity:.7;cursor:default}

/* ── HISTORY (production list style) ── */
.history-wrap{margin-bottom:16px}
.history-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}
.hist-item{display:flex;align-items:flex-start;gap:9px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.hist-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.hist-text{font-size:12px;color:var(--tx);flex:1;line-height:1.45}
.hist-time{font-family:var(--font-display);font-size:9px;color:var(--tx-faint);white-space:nowrap}
.hist-empty{font-size:12px;color:var(--tx-mut);text-align:center;padding:12px 0}

/* ── OUTCOME / TAG BUTTONS (production st-btn style) ── */
.st-btn{
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 6px;cursor:pointer;font-family:var(--font-text);
  font-size:10.5px;font-weight:700;color:var(--tx-mut);
  transition:all var(--t-fast);text-align:center;
}
.st-btn:hover{color:var(--tx);border-color:var(--line-2)}
.outcome-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.tag-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:18px}
.st-btn.sel-won{background:var(--green-soft);border-color:rgba(52,211,153,.4);color:var(--green)}
.st-btn.sel-lost{background:var(--red-soft);border-color:rgba(248,113,113,.4);color:var(--red)}
.st-btn.sel-tag{background:var(--accent-soft);border-color:var(--primary-line);color:var(--accent)}

/* ── MODAL OVERLAY (production class kept for non-migrated modals) ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity var(--t);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-overlay .modal{
  background:var(--s1);border:1px solid var(--line-2);
  border-radius:var(--r-xl);width:100%;max-width:540px;
  max-height:92vh;overflow-y:auto;
  transform:translateY(16px) scale(.98);transition:transform var(--t);
  box-shadow:var(--shadow-pop);
}
.modal-overlay.open .modal{transform:none}
.modal-header{padding:22px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-footer{display:flex;gap:9px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--line);margin-top:6px}
.modal-close{
  background:var(--s3);border:1px solid var(--line);color:var(--tx-mut);
  width:30px;height:30px;border-radius:var(--r-full);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all var(--t-fast);
}
.modal-close:hover{background:var(--red-soft);color:var(--red);border-color:transparent}

/* ── CONFIG sections ── */
.cfg-section{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow)}
.cfg-sec-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.cfg-sec-title{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.01em}
.cfg-sec-body{padding:20px 22px}

.cad-day{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:10px}
.cad-day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.day-badge{
  background:var(--blue-soft);color:var(--blue);
  font-family:var(--font-display);font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid rgba(111,140,255,.2);
}

.ch-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ch-tog{
  display:flex;align-items:center;gap:5px;padding:5px 11px;
  border-radius:var(--r-full);border:1px solid var(--line);background:var(--s3);
  cursor:pointer;font-size:11px;font-weight:600;color:var(--tx-mut);
  transition:all var(--t-fast);user-select:none;
}
.ch-tog.on-wpp{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.09);color:#25d366}
.ch-tog.on-email{border-color:var(--primary-line);background:var(--primary-soft);color:var(--tx)}
.ch-tog.on-linkedin{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.1);color:var(--blue)}
.ch-tog.on-call{border-color:var(--primary-line);background:var(--accent-soft);color:var(--accent)}

.tpl-block{display:flex;flex-direction:column;gap:9px}
.tpl-label{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.var-hint{font-family:var(--font-display);font-size:8px;background:var(--s3);border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 5px;color:var(--tx-faint)}

/* ── DASHBOARD (production card names) ── */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.dash-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.dash-label{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:10px}
.dash-value{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1;margin-bottom:4px}
.dash-sub{font-size:11px;color:var(--tx-mut)}
.dash-card.c-blue{border-top:2px solid var(--blue)} .dash-card.c-blue .dash-value{color:var(--blue)}
.dash-card.c-yellow{border-top:2px solid var(--accent)} .dash-card.c-yellow .dash-value{color:var(--accent)}
.dash-card.c-green{border-top:2px solid var(--green)} .dash-card.c-green .dash-value{color:var(--green)}
.dash-card.c-purple{border-top:2px solid var(--purple)} .dash-card.c-purple .dash-value{color:var(--purple)}

.chart-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.chart-title{font-family:var(--font-display);font-size:14px;font-weight:700}
.chart-legend{display:flex;gap:16px}
.leg-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx-mut)}
.leg-dot{width:10px;height:3px;border-radius:var(--r-full)}

.prog-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.prog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.prog-pct{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--accent)}
.prog-bar-bg{background:var(--s3);border-radius:var(--r-full);height:7px;overflow:hidden}
.prog-bar-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .5s var(--ease)}

/* ── TODAY BAR (clients screen) ── */
.today-bar{
  background:linear-gradient(100deg,var(--primary-soft),transparent 70%);
  border:1px solid var(--primary-line);border-radius:var(--r-lg);
  padding:16px 20px;margin-bottom:28px;display:flex;align-items:center;gap:16px;
}
.today-bar .tb-icon{font-size:22px;flex-shrink:0}
.today-bar .tb-text{font-size:13.5px;font-weight:600;color:var(--tx);flex:1}
.today-bar .tb-count{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent);line-height:1}

/* ── USER CHIP (production) ── */
.user-chip{display:flex;align-items:center;gap:10px}
.user-chip-sm{display:flex;align-items:center;position:relative;cursor:pointer}
.uc-av{
  width:32px;height:32px;border-radius:var(--r-full);
  background:var(--blue-soft);border:1px solid rgba(111,140,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--blue);flex-shrink:0;
}
.uc-name{font-size:13px;font-weight:600;color:var(--tx)}

/* ── CLIENTS SCREEN HEADER (production) ── */
#sc-clients{min-height:100vh;display:flex;flex-direction:column}
.ch-inner{width:100%;max-width:1200px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between}
.logo-wrap{display:flex;align-items:center;gap:13px}
.cb{flex:1;padding:32px 0}
.cb-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.pg-title{font-family:var(--font-display);font-size:30px;font-weight:700;margin-bottom:6px;letter-spacing:.01em}
.pg-sub{color:var(--tx-mut);font-size:13.5px;margin-bottom:32px}

/* ── SEARCH BAR (production) ── */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 14px;margin-bottom:24px;max-width:360px;transition:border-color var(--t-fast)}
.search-bar:focus-within{border-color:var(--primary-line)}
.search-bar input{background:transparent;border:none;padding:0;font-size:13px;color:var(--tx);box-shadow:none!important}
.search-icon{color:var(--tx-mut);font-size:14px;flex-shrink:0}

/* ── CC-AVATAR (production client card, maps to .avatar.lg) ── */
.cc-avatar{
  width:44px;height:44px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--blue-soft),rgba(111,140,255,.08));
  border:1px solid rgba(111,140,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--blue);
}

/* ── WORKSPACE CONTENT (production) ── */
.ws-content{flex:1;padding:26px 0}
.ws-content-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}

/* ── WORKSPACE TOPBAR (production legacy, kept for JS selectors) ── */
.ws-topbar{
  background:rgba(12,12,13,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:0;display:flex;align-items:center;height:56px;
  position:sticky;top:0;z-index:90;
}
.ws-topbar-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;height:100%}

/* ── TOPBAR CLOCK ── */
.topbar-clock{position:fixed;top:0;right:0;height:62px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 18px;z-index:50;pointer-events:none}
.topbar-clock .tc-time{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--tx);line-height:1.2;letter-spacing:.03em;text-align:right}
.topbar-clock .tc-date{font-size:10px;color:var(--tx-mut);font-weight:500;text-align:right;margin-top:2px;text-transform:capitalize}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

@media(max-width:768px){
  .dash-grid{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .ch-inner,.cb-inner,.ws-topbar-inner,.ws-content-inner{padding-left:16px;padding-right:16px}
  .dispatch-panel{width:100%;left:-100%}
}
@media(max-width:960px){.gmaps-panel{width:100%;left:-100%}}

/* ── PAINEL VARIÁVEIS ───────────────────── */
#vars-panel{position:fixed;right:-400px;top:0;height:100vh;width:360px;max-width:100vw;background:var(--s1);border-left:1px solid var(--line-2);z-index:120;transition:right .3s var(--ease);display:flex;flex-direction:column;overflow:hidden}
#vars-panel.open{right:0}
#vars-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:119;display:none}
#vars-overlay.open{display:block}
.vars-header{padding:16px 22px 12px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.vars-title{font-family:var(--font-display);font-size:16px;font-weight:700}
.vars-sub{font-size:11px;color:var(--tx-mut);margin-top:2px}
.vars-body{flex:1;overflow-y:auto;padding-bottom:24px}
.vars-section{padding:16px 22px 0}
.vars-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-mut);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.vars-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.vars-row:last-child{border-bottom:none}
.var-code{font-family:monospace;font-size:12px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:2px 7px;color:var(--yellow);white-space:nowrap;flex-shrink:0}
.var-desc{font-size:12px;color:var(--tx-mut);flex:1}
.vars-locked{font-size:10px;color:var(--muted)}
.vars-add-form{padding:12px 22px;border-top:1px solid var(--line);margin-top:8px;display:flex;flex-direction:column;gap:8px}
.vars-add-form input,.vars-add-form select{font-size:12px;padding:7px 10px}
/* picker inline no editor */
.var-picker{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}
.var-chip{font-family:monospace;font-size:11px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:2px 7px;cursor:pointer;color:var(--yellow);line-height:1.5;transition:background .12s,border-color .12s}
.var-chip:hover{background:var(--s2);border-color:var(--yellow)}
@media(max-width:960px){#vars-panel{width:100%;right:-100%}}