/* ═══════════════════════════════════════════════════════════════════════════ VALIOM DS v2 — ADAPTADOR DO CRM (crm/index.html) Escopo: html.vds[data-theme] — vale nos DOIS temas; o claro (padrão desde 18/10/2026) usa o TEMA CLARO OFICIAL de valiom-ds.css O CRM é o MESMO produto: mesmos tokens e componentes do Sistema Principal. Só CSS — não toca em ID, data-*, onclick, go(), drawer, kanban drag nem chat. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Variáveis legadas → tokens ────────────────────────────────────────── */ html.vds[data-theme] { --bg: var(--vds-bg-canvas); --sb: var(--vds-bg-header); --s1: var(--vds-surface-1); --s2: var(--vds-surface-2); --s3: var(--vds-surface-3); --b1: var(--vds-border-default); --b2: var(--vds-border-strong); --t1: var(--vds-text-primary); --t2: var(--vds-text-secondary); --t3: var(--vds-text-tertiary); --gold: var(--vds-accent); --g2: var(--vds-accent-press); --gbg: var(--vds-surface-selected); --gb: var(--vds-accent-bd-weak); --gold-glow: transparent; --gold-border: var(--vds-accent-bd-weak); --gold-dim: var(--vds-surface-selected); --cyan-glow: transparent; --lime-glow: transparent; --pink-glow: transparent; --blue: var(--vds-info); --cyan: var(--vds-info); --neon-cyan: var(--vds-info); --green: var(--vds-success); --lime: var(--vds-success); --red: var(--vds-danger); --glass-bg: var(--vds-surface-1); --glass-bg-2: var(--vds-surface-1); --glass-border: var(--vds-border-default); --glass-blur: 0px; --r: var(--vds-radius-md); --rl: var(--vds-radius-xl); --shadow-md: var(--vds-shadow-pop); --shadow-gold: none; background: var(--vds-bg-canvas) !important; /* sem radial ambiente */ font-family: var(--vds-font-sans) !important; } html.vds[data-theme]::before { display: none !important; } /* grão/noise */ html.vds[data-theme] body { background: var(--vds-bg-canvas); color: var(--vds-text-primary); font-family: var(--vds-font-sans); -webkit-font-smoothing: antialiased; } html.vds[data-theme] :is(input, select, textarea, button) { font-family: inherit; } html.vds[data-theme] * { text-shadow: none !important; } /* ── 2. HEADER + NAVEGAÇÃO (topnav horizontal = abas do produto) ──────────── */ html.vds[data-theme] .topbar { height: 56px; padding: 0 24px; gap: 16px; background: var(--vds-bg-header) !important; border-bottom: 1px solid var(--vds-border-subtle) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } html.vds[data-theme] .logo { font-family: var(--vds-font-sans) !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--vds-text-primary); } html.vds[data-theme] .logo em { color: var(--vds-accent); font-style: normal; } html.vds[data-theme] :is(.topbar-sep) { background: var(--vds-border-default); } html.vds[data-theme] .topbar-module { color: var(--vds-text-secondary); } html.vds[data-theme] .search-input { height: 36px; border-radius: var(--vds-radius-md); background: var(--vds-surface-input); border: 1px solid var(--vds-border-default); color: var(--vds-text-primary); font-size: 13px; } html.vds[data-theme] .search-input::placeholder { color: var(--vds-text-placeholder); } html.vds[data-theme] .search-input:focus { border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; } html.vds[data-theme] .search-icon { color: var(--vds-text-tertiary); } html.vds[data-theme] #search-dropdown { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-lg) !important; box-shadow: var(--vds-shadow-pop) !important; } html.vds[data-theme] .search-row:hover { background: var(--vds-surface-hover); } html.vds[data-theme] .btn-top { height: 32px; border-radius: var(--vds-radius-md); border: 1px solid var(--vds-border-strong); background: var(--vds-surface-1); color: var(--vds-text-primary); font: 500 12px var(--vds-font-sans); } html.vds[data-theme] .btn-top:hover { background: var(--vds-surface-hover); color: var(--vds-text-primary); border-color: var(--vds-border-strong); } html.vds[data-theme] .topbar-right > div:last-child { background: transparent !important; border-color: transparent !important; border-left: 1px solid var(--vds-border-subtle) !important; border-radius: 0 !important; } html.vds[data-theme] #sb-user-name { color: var(--vds-text-primary) !important; font-weight: 600; } html.vds[data-theme] #sb-user-role { color: var(--vds-text-secondary) !important; } html.vds[data-theme] .avatar { box-shadow: none !important; background: var(--vds-surface-3) !important; border-color: var(--vds-border-strong) !important; color: var(--vds-text-primary) !important; } html.vds[data-theme] .phone-priv-btn { background: transparent; border: 1px solid var(--vds-border-default); color: var(--vds-text-secondary); } html.vds[data-theme] .sync-dot { box-shadow: none; } html.vds[data-theme] .topnav { height: 44px; padding: 0 24px; gap: 24px; align-items: stretch; background: var(--vds-bg-header); border-bottom: 1px solid var(--vds-border-default); } html.vds[data-theme] .ni { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; border-radius: 0; background: transparent !important; border-bottom: 0 !important; color: var(--vds-text-tertiary); font: 500 13px var(--vds-font-sans); opacity: 1 !important; } html.vds[data-theme] .ni:hover { color: var(--vds-text-secondary); background: transparent !important; } html.vds[data-theme] .ni.on { color: var(--vds-text-primary) !important; } html.vds[data-theme] .ni.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--vds-accent); } html.vds[data-theme] .ni.on .ni-icon { color: var(--vds-accent); } html.vds[data-theme] .ni-badge { background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); color: var(--vds-text-primary); } html.vds[data-theme] .topnav-sep { background: var(--vds-border-default); } /* Barra do modo embutido (CRM dentro do Sistema Principal) */ html.vds[data-theme] .tab-search input { height: 32px; background: var(--vds-surface-input); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-md); color: var(--vds-text-primary); font-family: var(--vds-font-sans); } html.vds[data-theme] .tab-search input:focus { border-color: var(--vds-focus-border); box-shadow: var(--vds-focus-ring); } html.vds[data-theme] .tab-wa-status { border-radius: var(--vds-radius-sm); letter-spacing: .04em; font-weight: 600; box-shadow: none; } html.vds[data-theme] .tab-wa-status .dot { box-shadow: none !important; animation: none !important; } html.vds[data-theme] .tab-novo-lead { background: var(--vds-accent) !important; color: var(--vds-on-accent) !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; font: 600 12px var(--vds-font-sans) !important; border-radius: var(--vds-radius-md) !important; animation: none !important; } html.vds[data-theme] .tab-novo-lead:hover { background: var(--vds-accent-hover) !important; transform: none !important; } html.vds[data-theme] .theme-toggle-btn .tt-track { background: var(--vds-surface-3); border-color: var(--vds-border-strong); } html.vds[data-theme] .theme-toggle-btn .tt-thumb { background: var(--vds-accent); box-shadow: none; } html.vds[data-theme] .theme-toggle-btn :is(.tt-sun, .tt-moon) { filter: none; } /* ── 3. BOTÕES ────────────────────────────────────────────────────────────── */ html.vds[data-theme] .btn { gap: 8px; min-height: 32px; padding: 7px 14px; border-radius: var(--vds-radius-md); font: 500 13px/1.2 var(--vds-font-sans); letter-spacing: 0; text-transform: none; box-shadow: none; animation: none; } html.vds[data-theme] :is(.btn-sm, .btn.btn-sm) { min-height: 28px; padding: 5px 10px; font-size: 12px; } html.vds[data-theme] :is(.btn-gold, .btn.btn-gold, .btn-primary) { background: var(--vds-accent) !important; color: var(--vds-on-accent) !important; border: 1px solid transparent !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; box-shadow: none !important; animation: none !important; transform: none; } html.vds[data-theme] :is(.btn-sm.btn-gold, .btn-gold.btn-sm) { font-size: 12px !important; } html.vds[data-theme] :is(.btn-gold, .btn.btn-gold, .btn-primary):hover { background: var(--vds-accent-hover) !important; box-shadow: none !important; transform: none; } html.vds[data-theme] :is(.btn-ghost, .btn:not(.btn-gold):not(.btn-danger)) { background: var(--vds-surface-1); border: 1px solid var(--vds-border-strong); color: var(--vds-text-primary); } html.vds[data-theme] :is(.btn-ghost, .btn:not(.btn-gold):not(.btn-danger)):hover { background: var(--vds-surface-hover); border-color: var(--vds-border-strong); color: var(--vds-text-primary); box-shadow: none; } html.vds[data-theme] .btn-danger { background: var(--vds-danger-bg); border: 1px solid var(--vds-danger-bd); color: var(--vds-danger); } html.vds[data-theme] .btn:disabled { opacity: .45; } html.vds[data-theme] .suggest-btn { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-strong) !important; color: var(--vds-text-primary) !important; box-shadow: none !important; border-radius: var(--vds-radius-md); } html.vds[data-theme] .suggest-btn:hover { background: var(--vds-surface-hover) !important; box-shadow: none !important; } html.vds[data-theme] .stage-btn { border-radius: var(--vds-radius-md); } html.vds[data-theme] .stage-btn.on { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd); color: var(--vds-text-primary); } html.vds[data-theme] .add-card-btn { border-color: var(--vds-border-strong); color: var(--vds-text-secondary); border-radius: var(--vds-radius-md); } html.vds[data-theme] #fab-novo-lead { background: var(--vds-accent) !important; color: var(--vds-on-accent) !important; box-shadow: var(--vds-shadow-fab) !important; animation: none !important; } /* ── 4. INPUTS ────────────────────────────────────────────────────────────── */ html.vds[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { background-color: var(--vds-surface-input); border: 1px solid var(--vds-border-default); color: var(--vds-text-primary); border-radius: var(--vds-radius-md); } html.vds[data-theme] :is(input, textarea, select):focus { border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; outline: none !important; } html.vds[data-theme] :is(input, textarea)::placeholder { color: var(--vds-text-placeholder); } html.vds[data-theme] select option { background: var(--vds-surface-2); color: var(--vds-text-primary); } html.vds[data-theme] .field label { font: 500 12px/1.3 var(--vds-font-sans); color: var(--vds-text-secondary); text-transform: none; letter-spacing: 0; } html.vds[data-theme] :is(.filter-select, .filter-input, .dv2-select) { border-radius: var(--vds-radius-md); } html.vds[data-theme] .filter-label { color: var(--vds-text-secondary); } html.vds[data-theme] .chat-input { background: var(--vds-surface-input); border-color: var(--vds-border-default); border-radius: var(--vds-radius-lg); } /* ── 5. CARDS / DASHBOARD ─────────────────────────────────────────────────── */ html.vds[data-theme] .card { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; box-shadow: none !important; backdrop-filter: none !important; transform: none; } html.vds[data-theme] .card:hover { border-color: var(--vds-border-strong) !important; box-shadow: none !important; transform: none; } html.vds[data-theme] .card-title { font: 600 14px var(--vds-font-sans); color: var(--vds-text-primary); } html.vds[data-theme] :is(.kpi-lbl) { color: var(--vds-text-secondary); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; } html.vds[data-theme] :is(.kpi-val) { color: var(--vds-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; } html.vds[data-theme] .kpi-icon { background: transparent !important; color: var(--vds-accent); } html.vds[data-theme] .dv2-title { font: 600 20px var(--vds-font-sans); letter-spacing: -.01em; color: var(--vds-text-primary); } html.vds[data-theme] .dv2-section { background: var(--vds-surface-1); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-xl); box-shadow: none; } html.vds[data-theme] .dv2-section-title { font: 600 16px var(--vds-font-sans); color: var(--vds-text-primary); } html.vds[data-theme] .dv2-section-sub { color: var(--vds-text-secondary); } html.vds[data-theme] :is(.dv2-card, .dv2-funnel-stage, .dv2-att-card, .dv2-ai-card) { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-subtle) !important; border-radius: var(--vds-radius-lg) !important; backdrop-filter: none !important; box-shadow: none !important; } html.vds[data-theme] .dv2-card:hover { border-color: var(--vds-border-strong) !important; } html.vds[data-theme] .dv2-card-gold { background: var(--vds-surface-2) !important; border-color: var(--vds-accent-bd-weak) !important; } html.vds[data-theme] .dv2-card-label { color: var(--vds-text-secondary); text-transform: none; letter-spacing: 0; font-weight: 500; } html.vds[data-theme] :is(.dv2-card-value, .dv2-row-val, .dv2-att-title) { font-family: var(--vds-font-sans) !important; font-weight: 600; letter-spacing: -.02em; color: var(--vds-text-primary); font-variant-numeric: tabular-nums; } html.vds[data-theme] .dv2-card-gold .dv2-card-value { color: var(--vds-text-primary); } html.vds[data-theme] :is(.dv2-period-btn) { border-radius: var(--vds-radius-sm); } html.vds[data-theme] .dv2-period-btn.active { background: var(--vds-surface-3) !important; color: var(--vds-text-primary) !important; box-shadow: none !important; } html.vds[data-theme] .dv2-ai-btn { background: var(--vds-surface-1); border: 1px solid var(--vds-border-strong); color: var(--vds-text-primary); } html.vds[data-theme] :is(.dv2-cta-gold) { background: var(--vds-accent); color: var(--vds-on-accent); box-shadow: none; } html.vds[data-theme] .dv2-progress, html.vds[data-theme] .dv2-bar-track { background: var(--vds-track-soft); } html.vds[data-theme] .dv2-sort-btn.active { color: var(--vds-text-primary); border-color: var(--vds-accent); } /* ── 6. KANBAN ────────────────────────────────────────────────────────────── */ html.vds[data-theme] .kanban-header { border-bottom-color: var(--vds-border-subtle); } html.vds[data-theme] .kcol { background: transparent; } html.vds[data-theme] .kcol-head { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default); border-left-width: 2px; border-radius: var(--vds-radius-lg); } html.vds[data-theme] .kcol-title { color: var(--vds-text-primary); font: 600 12px var(--vds-font-sans); letter-spacing: .04em; } html.vds[data-theme] .kcol-count { color: var(--vds-text-secondary); font: 600 12px var(--vds-font-sans); font-variant-numeric: tabular-nums; } html.vds[data-theme] .kcol-body.drag-over { background: var(--vds-surface-selected); outline: 1px dashed var(--vds-accent-bd); border-radius: var(--vds-radius-lg); } html.vds[data-theme] .kcard { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-lg) !important; box-shadow: none !important; backdrop-filter: none !important; } html.vds[data-theme] .kcard:hover { border-color: var(--vds-border-strong) !important; background: var(--vds-surface-2) !important; box-shadow: none !important; transform: none !important; } html.vds[data-theme] .kcard.dragging { box-shadow: var(--vds-shadow-pop) !important; } html.vds[data-theme] .kcard-name { color: var(--vds-text-primary); font-weight: 600; } html.vds[data-theme] :is(.kcard-service, .kcard-sub, .kcard-date) { color: var(--vds-text-secondary); } html.vds[data-theme] .kcard-val { color: var(--vds-text-primary); font-family: var(--vds-font-sans); font-weight: 600; font-variant-numeric: tabular-nums; } html.vds[data-theme] .kcard-footer { border-top-color: var(--vds-border-subtle); } html.vds[data-theme] .lead-tag { border-radius: var(--vds-radius-xs); } html.vds[data-theme] :is(.orig-meta, .orig-wpp, .orig-ind, .orig-man) { border-radius: var(--vds-radius-xs); } html.vds[data-theme] :is(.kanban-col, .kanban-col-header, .stage-header, [class*="col-header"]) { background: var(--vds-surface-1) !important; color: var(--vds-text-primary) !important; letter-spacing: .04em !important; } /* ── 7. DRAWER DO LEAD ────────────────────────────────────────────────────── */ html.vds[data-theme] .drawer-overlay { background: var(--vds-overlay); } html.vds[data-theme] .lead-drawer { background: var(--vds-surface-1) !important; border: 0 !important; border-left: 1px solid var(--vds-border-default) !important; box-shadow: -24px 0 64px rgba(0, 0, 0, .5) !important; } html.vds[data-theme] .lead-drawer .drawer-header { background: var(--vds-surface-1); border-bottom: 1px solid var(--vds-border-subtle); } html.vds[data-theme] .lead-drawer .drawer-avatar { box-shadow: none; } html.vds[data-theme] .lead-drawer #d-name { font-weight: 600 !important; letter-spacing: -.01em; color: var(--vds-text-primary) !important; } html.vds[data-theme] .lead-drawer #d-sub { color: var(--vds-text-secondary); } html.vds[data-theme] .lead-drawer .d-sub-stage { background: var(--vds-surface-3); color: var(--vds-text-primary); border-color: var(--vds-border-strong); text-transform: none; letter-spacing: 0; font-weight: 600; } html.vds[data-theme] .lead-drawer .d-recur-badge { background: transparent; border-color: var(--vds-accent-bd); color: var(--vds-accent); } html.vds[data-theme] .lead-drawer .lead-hero { background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-xl); box-shadow: none; } html.vds[data-theme] .lead-drawer .lead-hero-top { border-bottom-color: var(--vds-border-subtle); } html.vds[data-theme] .lead-drawer .lh-label { color: var(--vds-text-secondary); letter-spacing: .08em; font-weight: 600; } html.vds[data-theme] .lead-drawer .lh-input:focus { background: var(--vds-surface-input); box-shadow: var(--vds-focus-ring); } html.vds[data-theme] .lead-drawer .lh-input::placeholder { color: var(--vds-text-placeholder); } html.vds[data-theme] .lead-drawer .lh-input-money { font-family: var(--vds-font-sans); font-weight: 650; letter-spacing: -.02em; color: var(--vds-text-primary); font-variant-numeric: tabular-nums; } html.vds[data-theme] .lead-drawer .lh-input-phone { font-family: var(--vds-font-sans); font-weight: 600; letter-spacing: 0; } html.vds[data-theme] .lead-drawer .lh-act { background: var(--vds-surface-1); border-color: var(--vds-border-default); color: var(--vds-text-body); border-radius: var(--vds-radius-md); } html.vds[data-theme] .lead-drawer .lh-act:hover { background: var(--vds-surface-hover); border-color: var(--vds-border-strong); color: var(--vds-text-primary); transform: none; } html.vds[data-theme] .lead-drawer :is(.contato-phone, .tags-block-wrap) { background: var(--vds-surface-2); border-color: var(--vds-border-subtle); } html.vds[data-theme] .lead-drawer .dp-sec::after { background: var(--vds-border-subtle); } html.vds[data-theme] .lead-drawer .dp-sec-chev { color: var(--vds-text-tertiary); } html.vds[data-theme] .lead-drawer .field label { font-size: 12px !important; color: var(--vds-text-secondary) !important; text-transform: none; letter-spacing: 0; font-weight: 500; } html.vds[data-theme] .lead-drawer .field :is(input, select, textarea), html.vds[data-theme] .lead-drawer .field.field-chip select { background: var(--vds-surface-input) !important; border: 1px solid var(--vds-border-default) !important; color: var(--vds-text-primary) !important; } html.vds[data-theme] .lead-drawer .field :is(input, select, textarea):focus { border-color: var(--vds-focus-border) !important; background: var(--vds-surface-input) !important; } html.vds[data-theme] .lead-drawer .drawer-footer-new { border-top-color: var(--vds-border-subtle); } html.vds[data-theme] .lead-drawer .btn-save-hero { background: var(--vds-accent); color: var(--vds-on-accent); font-weight: 600; box-shadow: none; } html.vds[data-theme] .lead-drawer .btn-save-hero:hover { background: var(--vds-accent-hover); box-shadow: none; transform: none; } html.vds[data-theme] .lead-drawer .btn-more-trigger { background: var(--vds-surface-1); border-color: var(--vds-border-strong); color: var(--vds-text-body); } html.vds[data-theme] .lead-drawer .more-menu { background: var(--vds-surface-2); border-color: var(--vds-border-default); border-radius: var(--vds-radius-lg); box-shadow: var(--vds-shadow-pop); } html.vds[data-theme] .lead-drawer .more-menu button:hover { background: var(--vds-surface-hover); } html.vds[data-theme] .drawer-tabs { border-bottom-color: var(--vds-border-default); } html.vds[data-theme] .drawer-close { border-radius: var(--vds-radius-md); color: var(--vds-text-secondary); } /* ── 8. ABAS / BADGES / TOASTS / MODAIS ───────────────────────────────────── */ html.vds[data-theme] :is(.tab.on, .dtab.on, .cfg-tab.on) { color: var(--vds-text-primary) !important; border-bottom: 2px solid var(--vds-accent) !important; background: transparent !important; } html.vds[data-theme] :is(.dtab, .cfg-tab):not(.on) { color: var(--vds-text-tertiary); } html.vds[data-theme] .tab:not(.on) { opacity: 1; color: var(--vds-text-tertiary) !important; } html.vds[data-theme] :is(.badge-online, [class*="badge"][class*="success"], [class*="badge"][class*="active"]) { background: var(--vds-success-bg) !important; color: var(--vds-success) !important; border-color: var(--vds-success-bd) !important; } html.vds[data-theme] :is(.badge-online, [class*="badge"][class*="success"])::before { box-shadow: none !important; animation: none !important; } html.vds[data-theme] :is([class*="badge"][class*="pending"], [class*="badge"][class*="info"]) { background: var(--vds-info-bg) !important; color: var(--vds-info) !important; border-color: var(--vds-info-bd) !important; } html.vds[data-theme] :is([class*="badge"][class*="error"], [class*="badge"][class*="danger"]) { background: var(--vds-danger-bg) !important; color: var(--vds-danger) !important; border-color: var(--vds-danger-bd) !important; } html.vds[data-theme] :is(.toast, #toast) { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important; border-left: 3px solid var(--vds-accent) !important; border-radius: var(--vds-radius-lg) !important; box-shadow: var(--vds-shadow-pop) !important; color: var(--vds-text-primary) !important; } html.vds[data-theme] :is(.toast.success, [class*="toast"][class*="success"]) { background: var(--vds-surface-2) !important; border-left-color: var(--vds-success) !important; box-shadow: var(--vds-shadow-pop) !important; } html.vds[data-theme] :is(.toast.error, [class*="toast"][class*="error"]) { background: var(--vds-surface-2) !important; border-left-color: var(--vds-danger) !important; box-shadow: var(--vds-shadow-pop) !important; } html.vds[data-theme] .modal-bg { background: var(--vds-overlay); backdrop-filter: blur(2px); } html.vds[data-theme] :is(.modal, .modal-bg .modal) { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; box-shadow: var(--vds-shadow-modal) !important; backdrop-filter: none !important; } html.vds[data-theme] .modal-title { font: 600 18px/1.3 var(--vds-font-sans); color: var(--vds-text-primary); } html.vds[data-theme] .modal-footer { border-top: 1px solid var(--vds-border-subtle); padding-top: 16px; gap: 8px; } html.vds[data-theme] :is(.load-spin, .spin) { border-color: var(--vds-spinner-track); border-top-color: var(--vds-accent); } html.vds[data-theme] .load-row { color: var(--vds-text-secondary); } html.vds[data-theme] .dv2-empty { color: var(--vds-text-secondary); } /* ── 9. CHAT ──────────────────────────────────────────────────────────────── */ html.vds[data-theme] .msg { border-radius: var(--vds-radius-lg); font-size: 13px; line-height: 1.5; } html.vds[data-theme] .msg-in { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-subtle) !important; color: var(--vds-text-primary) !important; border-bottom-left-radius: 4px; } html.vds[data-theme] .msg-out { background: var(--vds-surface-hover) !important; border: 1px solid var(--vds-border-default) !important; color: var(--vds-text-primary) !important; border-bottom-right-radius: 4px; } html.vds[data-theme] .msg-time { color: var(--vds-text-tertiary); } html.vds[data-theme] :is(.chat-hdr, .chat-footer) { border-color: var(--vds-border-subtle); background: var(--vds-surface-1); } html.vds[data-theme] .ai-badge { border-radius: var(--vds-radius-xs); } /* ── 10. SCROLLBAR / MATA-GLOW INLINE ─────────────────────────────────────── */ html.vds[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--vds-scroll-thumb-hover) !important; } html.vds[data-theme] [style*="0 0 12px rgba(235"], html.vds[data-theme] [style*="0 0 16px rgba(235"], html.vds[data-theme] [style*="0 0 20px rgba(235"], html.vds[data-theme] [style*="0 0 24px rgba(235"] { box-shadow: none !important; } html.vds[data-theme] #cmdk-bg { backdrop-filter: blur(2px) !important; } @media (max-width: 760px) { html.vds[data-theme] .topbar { padding: 0 12px; } html.vds[data-theme] .topnav { padding: 0 12px; gap: 16px; } } /* ── 11. Ajustes pós-QA ───────────────────────────────────────────────────── */ /* Total da coluna do funil: número, não destaque → neutro (dourado não é cor de número) */ html.vds[data-theme] .kcol-head span[style*="color:var(--gold)"] { color: var(--vds-text-secondary) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } /* Botão da Mila: sem gradiente/neon; o avatar continua identificando a agente */ html.vds[data-theme] #mila-fab { background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-strong) !important; box-shadow: var(--vds-shadow-fab) !important; animation: none !important; } html.vds[data-theme] #mila-fab * { filter: none !important; } html.vds[data-theme] .lead-drawer .btn-save-hero { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; } /* bug antigo: applyTheme() troca o conteúdo do #btn-theme por texto e ele quebra em 2 linhas */ html.vds[data-theme] #btn-theme { white-space: nowrap; font: 500 12px var(--vds-font-sans); color: var(--vds-text-secondary); } /* ═══ ONDA 2 — POLIMENTO / CONSISTÊNCIA (25/09/2026) ═════════════════════════ */ /* ── 12. MetricGroup automático (mesma regra do Sistema) ─────────────────────── */ html.vds[data-theme] :is(#dv2-kpis, #dv2-diagnostico, #users-kpis):has(> :nth-child(3)) { gap: 0 !important; background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; overflow: hidden; padding: 0 !important; } html.vds[data-theme] :is(#dv2-kpis, #dv2-diagnostico, #users-kpis):has(> :nth-child(3)) > * { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; box-shadow: -1px 0 0 0 var(--vds-border-default), 0 -1px 0 0 var(--vds-border-default) !important; padding: 16px 20px !important; } html.vds[data-theme] #users-kpis { margin: 12px 16px !important; } html.vds[data-theme] .kpi-val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.vds[data-theme] .kpi-lbl { color: var(--vds-text-secondary) !important; } /* ── 13. Controles: alturas/raios do DS (sm 32 · md 36) ──────────────────────── */ html.vds[data-theme] .btn { min-height: var(--vds-h-md); font-size: 13px; } html.vds[data-theme] :is(.btn-sm, .btn.btn-sm) { min-height: var(--vds-h-sm) !important; padding: 6px 12px; font-size: 12px !important; } html.vds[data-theme] .btn-sm:empty, html.vds[data-theme] .btn-sm:has(> i:only-child) { min-width: var(--vds-h-sm); padding: 6px 8px; } html.vds[data-theme] :is(.btn, .btn-top, .suggest-btn):focus-visible { outline: none; box-shadow: var(--vds-focus-ring) !important; } html.vds[data-theme] .btn-top { height: var(--vds-h-sm); padding: 0 12px; } html.vds[data-theme] .tab-novo-lead { height: var(--vds-h-sm) !important; min-height: 0 !important; padding: 0 12px !important; } html.vds[data-theme] .add-card-btn { min-height: var(--vds-h-sm); font-size: 12px; } html.vds[data-theme] .drawer-close { min-height: var(--vds-h-sm); padding: 0 12px; font-size: 12px; background: var(--vds-surface-1); border: 1px solid var(--vds-border-strong); color: var(--vds-text-primary); } html.vds[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.lh-input), select) { min-height: var(--vds-h-sm); font-size: 13px; border-radius: var(--vds-radius-md) !important; } html.vds[data-theme] :is(.field input, .field select):not(.lh-input) { min-height: var(--vds-h-md); } html.vds[data-theme] .lead-drawer .field :is(input, select) { min-height: var(--vds-h-sm); font-size: 13px !important; } html.vds[data-theme] :is(#chat-search, #user-search, .search-input) { border-radius: var(--vds-radius-md) !important; background: var(--vds-surface-input) !important; border-color: var(--vds-border-default) !important; } html.vds[data-theme] textarea { font-size: 13px; border-radius: var(--vds-radius-md) !important; } /* seletor de funil do drawer (hex legado #262A3F/#393E55) */ html.vds[data-theme] .stage-compact-pipeline { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-strong) !important; color: var(--vds-text-primary) !important; border-radius: var(--vds-radius-sm) !important; } html.vds[data-theme] .stage-compact-arrow { color: var(--vds-text-tertiary) !important; } html.vds[data-theme] #btn-tags-toggle { border-radius: var(--vds-radius-sm) !important; border-style: solid !important; border-color: var(--vds-border-strong) !important; color: var(--vds-text-body) !important; } /* ── 14. Abas / navegação: altura 44 igual ao Tráfego; sem text-shadow ─────── */ html.vds[data-theme] .topnav { height: 44px; } html.vds[data-theme] :is(.dtab, .cfg-tab, .tab, [class*="tab"][class*="on"]) { text-shadow: none !important; } html.vds[data-theme] .cfg-tab { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 2px !important; margin-right: 20px; color: var(--vds-text-tertiary) !important; font-weight: 500; } html.vds[data-theme] .cfg-tab.on { color: var(--vds-text-primary) !important; border-bottom: 2px solid var(--vds-accent) !important; } html.vds[data-theme] .cfg-tab i { color: inherit !important; } html.vds[data-theme] .dtab { padding: 10px 2px; margin-right: 16px; } /* abas inline (Relatórios: Funil/Atendimento) pintadas com var(--gold) no texto */ html.vds[data-theme] button:is([style*="border-bottom:2px solid var(--gold)"], [style*="border-bottom: 2px solid var(--gold)"]) { color: var(--vds-text-primary) !important; } /* ── 15. Dourado só com significado ─────────────────────────────────────────── */ /* títulos de seção em Rajdhani dourado (Relatórios) → título padrão */ html.vds[data-theme] [style*="Rajdhani"]:is([style*="color:var(--gold)"], [style*="color: var(--gold)"]) { color: var(--vds-text-primary) !important; font-family: var(--vds-font-sans) !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* controle segmentado (Semana/Mês…): opção ativa = superfície elevada, não pílula dourada */ html.vds[data-theme] div[style*="inline-flex"][style*="overflow:hidden"] > button:is([style*="background:var(--gold)"], [style*="background: var(--gold)"]) { background: var(--vds-surface-3) !important; color: var(--vds-text-primary) !important; } html.vds[data-theme] div[style*="inline-flex"][style*="overflow:hidden"]:has(> button) { border-radius: var(--vds-radius-md) !important; border-color: var(--vds-border-strong) !important; } /* avatar do lead e ícones do drawer: neutros (o dourado fica no CTA "Salvar") */ html.vds[data-theme] .lead-drawer .drawer-avatar { background: var(--vds-surface-3) !important; color: var(--vds-text-primary) !important; border-color: var(--vds-border-strong) !important; } html.vds[data-theme] .lead-drawer :is(.lh-phone-icon, .lh-label i, .dp-sec i) { color: var(--vds-text-tertiary) !important; } html.vds[data-theme] .chat-footer :is(.fa-bolt) { color: var(--vds-text-secondary) !important; } /* ── 16. Raios inline arbitrários (14–20px em containers) → 12 ────────────────── */ html.vds[data-theme] .main :is(div, section)[style*="border-radius:14px"], html.vds[data-theme] .main :is(div, section)[style*="border-radius:16px"], html.vds[data-theme] .main :is(div, section)[style*="border-radius:18px"] { border-radius: var(--vds-radius-xl) !important; } /* caixas "glass" inline (var(--glass-bg)) já viram surface-1 pelo token; borda padrão */ html.vds[data-theme] [style*="var(--glass-border"] { border-color: var(--vds-border-default) !important; } /* ── 17. Cabeçalhos do Follow-up: rótulo semântico, borda neutra ─────────────── */ html.vds[data-theme] #panel-tarefas .kcol-head { border-color: var(--vds-border-default) !important; border-left-width: 2px !important; } /* Relatórios (relCard): KPIs do período = MetricGroup; número em Geist 600 */ html.vds[data-theme] div[style*="flex-wrap:wrap"]:has(> div[style*="flex:1;min-width:150px"]:nth-child(3)) { gap: 0 !important; background: var(--vds-surface-1); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-xl); overflow: hidden; } html.vds[data-theme] div[style*="flex-wrap:wrap"]:has(> div[style*="flex:1;min-width:150px"]:nth-child(3)) > div { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: -1px 0 0 0 var(--vds-border-default), 0 -1px 0 0 var(--vds-border-default) !important; padding: 16px 20px !important; } html.vds[data-theme] div[style*="flex:1;min-width:150px"] > div[style*="Rajdhani"] { font-weight: 600 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } html.vds[data-theme] div[style*="flex:1;min-width:150px"] > div[style*="text-transform:uppercase"] { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--vds-text-secondary) !important; } html.vds[data-theme] .card-title { text-transform: none !important; letter-spacing: 0 !important; } /* Onda 3 — fidelidade de cor: canvas navy com luz azul sutil (igual ao Sistema) */ html.vds[data-theme] { background: var(--vds-canvas-light), var(--vds-bg-canvas) !important; background-attachment: fixed !important; } html.vds[data-theme] body { background: transparent; } html.vds[data-theme] .dv2-progress, html.vds[data-theme] .dv2-bar-track { background: var(--vds-track) !important; } /* ═══ ONDA 4 — FIDELIDADE CROMÁTICA (25/09/2026) ═══ */ /* embutido no Sistema: o header é o do shell — a barra do módulo não vira uma 2ª faixa; sem luz própria */ html.vds[data-theme][data-embedded="true"] { background: var(--vds-bg-canvas) !important; } html.vds[data-theme][data-embedded="true"] .topnav { background: transparent; border-bottom-color: var(--vds-border-default); } html.vds[data-theme]:not([data-embedded="true"]) .topbar { background: var(--vds-header-glass) !important; } /* painéis emergem (aresta superior do mockup) */ html.vds[data-theme] :is(.card, .kcard, .dv2-section, .kcol-head, .lead-drawer .lead-hero) { border-top-color: var(--vds-border-top) !important; } /* Onda 5 — mesma luz vertical sutil dos painéis do Sistema */ html.vds[data-theme] :is(.card, .dv2-section, .lead-drawer .lead-hero) { background-image: var(--vds-panel-light) !important; } /* ═══ CRM ONDA 3 — PRODUTO (04/10/2026) ════════════════════════════════════════ Consolida o CRM no DS v2 (não cria outro sistema). Regras: · tokens `--vds-*` do valiom-ds.css são a única fonte de cor/raio/espaço/tipo; · dourado só em marca, estado ativo, progresso e CTA principal; · breakpoints canônicos do CRM: 480 · 768 · 1024 · 1280 (CSS não aceita var em @media); · camadas (z-index) abaixo — nada de 9998/99999 soltos. */ html.vds { --crm-z-sticky: 20; --crm-z-dropdown: 200; --crm-z-fab: 300; --crm-z-drawer: 400; --crm-z-modal: 500; --crm-z-popover: 600; --crm-z-toast: 700; } /* ── O1. Toast: um só formato (vds-toast), canto superior direito, acima de tudo ── */ html.vds #toast.vds-toast { position: fixed; top: 60px; right: 16px; bottom: auto; left: auto; z-index: var(--crm-z-toast); align-items: center; gap: 10px; font-size: var(--vds-fs-13); line-height: 1.4; } html.vds #toast.vds-toast > i { flex: 0 0 auto; font-size: 14px; } html.vds #toast.vds-toast--success > i { color: var(--vds-success); } html.vds #toast.vds-toast--error > i { color: var(--vds-danger); } html.vds #toast.vds-toast--warning > i { color: var(--vds-warning); } html.vds #toast.vds-toast--info > i { color: var(--vds-info); } @media (max-width: 480px) { html.vds #toast.vds-toast { left: 12px; right: 12px; top: 52px; min-width: 0; max-width: none; } } /* ── O2. Botão da Mila (só POSIÇÃO): sobe quando há campo de mensagem na tela ── Antes cobria o "Enviar" do Inbox e do chat do drawer. Comportamento intacto. */ body[data-active-panel="leads"] #mila-fab, body[data-drawer-aberto] #mila-fab { bottom: 104px !important; } body[data-active-panel="leads"] #mila-panel, body[data-drawer-aberto] #mila-panel { bottom: 166px !important; max-height: calc(100vh - 230px) !important; } @media (max-width: 480px) { body[data-active-panel="leads"] #mila-fab, body[data-drawer-aberto] #mila-fab { bottom: 128px !important; right: 12px !important; width: 46px !important; height: 46px !important; font-size: 20px !important; } } /* ── O3. Skeleton e estado vazio padrão do CRM (usam vds-skeleton / vds-empty) ── */ html.vds .crm-skel { display: grid; gap: 10px; padding: 12px; } html.vds .crm-skel .vds-skeleton { height: 12px; } html.vds .crm-skel-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--vds-border-subtle); border-radius: var(--vds-radius-lg); background: var(--vds-surface-1); } html.vds .crm-skel-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; } html.vds .crm-skel-row .vds-skeleton.is-avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; } html.vds .crm-skel .w-40 { width: 40%; } html.vds .crm-skel .w-60 { width: 60%; } html.vds .crm-skel .w-80 { width: 80%; } html.vds .crm-empty { padding: 32px 20px; } html.vds .crm-empty .vds-btn { margin-top: 12px; } /* ── O4. Texto secundário: peso e tracking de leitura (a "letra espaçada" vinha de 600 + 0,2px) ── */ html.vds[data-theme] :is(.kcard-service, .kcard-assignee, .kcard-date, .kcard-origin) { font-weight: 500 !important; letter-spacing: normal !important; } html.vds[data-theme] :is(.kcard-name, .kcard-val) { letter-spacing: normal !important; } html.vds[data-theme] [style*="font-family:'Rajdhani'"], html.vds[data-theme] [style*="font-family: 'Rajdhani'"], html.vds[data-theme] [style*="font-family:'DM Sans'"], html.vds[data-theme] [style*="font-family:'Inter'"] { font-family: var(--vds-font-sans) !important; } /* ── O5. Movimento: os pulsos contínuos saíram do render do card (Bloco C) e o @keyframes morto saiu no Bloco G; skeleton respeita reduced-motion ── */ @media (prefers-reduced-motion: reduce) { html.vds .vds-skeleton { animation: none; } } /* ── O6. Foco visível consistente (teclado) ── */ html.vds[data-theme] :is(button, a, [role="button"], .ni, .kcard, input, select, textarea):focus-visible { outline: 2px solid var(--vds-accent) !important; outline-offset: 2px; box-shadow: none !important; } /* ── C1. Kanban: card neutro; estado = um selo discreto (vale nos dois temas) ── */ .crm-badge { display: inline-flex; align-items: center; gap: 5px; margin: 5px 0 3px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--t2); background: var(--s3); border: 1px solid var(--b1); } .crm-badge i { font-size: 10px; opacity: .85; } .crm-badge--danger { color: #F87171; background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .28); } html.vds[data-theme] .crm-badge { color: var(--vds-text-secondary); background: var(--vds-surface-2); border-color: var(--vds-border-default); } html.vds[data-theme] .crm-badge--danger { color: var(--vds-danger); background: var(--vds-danger-bg); border-color: var(--vds-danger-bd); } .kcard-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; flex: 0 0 auto; } .kcard-recorrente { color: var(--t2); font-weight: 600; } .kcol-vazio { padding: 18px 8px; text-align: center; font-size: 12px; color: var(--t3); } html.vds[data-theme] .kcard-msg { background: var(--vds-surface-2) !important; color: var(--vds-text-secondary) !important; border: 0 !important; border-left: 2px solid var(--vds-border-strong) !important; border-radius: 6px !important; } html.vds[data-theme] .kcard-msg.is-waiting { border-left-color: var(--vds-accent) !important; color: var(--vds-text-primary) !important; } html.vds[data-theme] .kcard-msg i { color: var(--vds-text-tertiary); margin-right: 4px; } /* ── C2. Inbox: item da lista (nos dois temas; dark refina com tokens) ── */ .chat-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--b1); border-left: 2px solid transparent; transition: background .12s; } .chat-item:hover { background: var(--s2); } .chat-item.is-active { background: var(--gbg); border-left-color: var(--gold); } .chat-item-av { position: relative; flex: 0 0 auto; } .chat-item-ini { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--t2); background: var(--s3); border: 1px solid var(--b1); } .chat-item-espera { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sb); } .chat-item-espera.is-danger { background: #F87171; } .chat-item-espera.is-warning { background: #FBBF24; } .chat-item-corpo { flex: 1; min-width: 0; } .chat-item-l1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; } .chat-item-nome { font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .chat-item-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .chat-item-hora { font-size: 11px; color: var(--t3); } .chat-item-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--gold); color: #1A1410; } .chat-item-sub { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-item-l3 { display: flex; align-items: center; gap: 5px; margin-top: 4px; min-width: 0; } .chat-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; padding: 1px 6px; border-radius: 6px; font-size: 10px; color: var(--t2); background: var(--s3); border: 1px solid var(--b1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-chip i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .chat-item-valor { margin-left: auto; font-size: 11px; color: var(--t2); font-weight: 500; flex: 0 0 auto; } html.vds[data-theme] .chat-item { border-bottom-color: var(--vds-border-subtle); } html.vds[data-theme] .chat-item:hover { background: var(--vds-surface-hover); } html.vds[data-theme] .chat-item.is-active { background: var(--vds-surface-selected); border-left-color: var(--vds-accent); } html.vds[data-theme] .chat-item-ini { background: var(--vds-surface-2); border-color: var(--vds-border-default); color: var(--vds-text-secondary); } html.vds[data-theme] .chat-chip { background: var(--vds-surface-2); border-color: var(--vds-border-default); color: var(--vds-text-secondary); } html.vds[data-theme] .chat-item-unread { background: var(--vds-accent); color: var(--vds-on-accent); } html.vds[data-theme] .chat-item-espera.is-danger { background: var(--vds-danger); } html.vds[data-theme] .chat-item-espera.is-warning { background: var(--vds-warning); } /* ── C3. Conversa: cabeçalho que não se desmonta + status de envio por ícone ── */ #chat-content .cc-nome, #chat-content .cc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1024px) { #chat-content .cc-acoes .suggest-btn span { display: none; } #chat-content #cc-stage-badge { display: none; } } .msg-status i { font-size: 10px; } .msg-status.read i { color: var(--blue, #6EA8FF); } .msg-status.failed { color: #F87171; } html.vds[data-theme] .msg-status { color: var(--vds-text-tertiary); } html.vds[data-theme] .msg-status.read i { color: var(--vds-info); } html.vds[data-theme] .msg-status.failed { color: var(--vds-danger); } /* ── CRM ONDA 3 · D1 Meu Dia: KPIs/passos sem glass, sem Rajdhani, prioridade neutra ── */ .md-titulo{font-family:var(--vds-font-sans, 'Geist', sans-serif);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--t1)} .md-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px} .md-kpi,.md-progresso,.md-passo{background:var(--vds-surface-1, rgba(255,255,255,.03));border:1px solid var(--vds-border-default, rgba(255,255,255,.08));border-radius:var(--vds-radius-md, 10px)} .md-kpi{padding:12px 14px} .md-kpi-num{font-size:22px;font-weight:600;color:var(--vds-text-primary, var(--t1));font-variant-numeric:tabular-nums;line-height:1.2} .md-kpi-lbl{font-size:12px;color:var(--vds-text-tertiary, var(--t3));margin-top:2px} .md-kpi-lbl i{width:14px;text-align:center;margin-right:4px;opacity:.8} .md-kpi.is-alerta{border-color:var(--vds-danger-bd, rgba(240,85,119,.45))} .md-kpi.is-alerta .md-kpi-num{color:var(--vds-danger, #F05577)} .md-progresso{margin-bottom:20px;padding:14px 16px} .md-passo{padding:16px;margin-bottom:10px} .md-passo.is-atual{border-color:var(--vds-accent, var(--gold));box-shadow:inset 3px 0 0 var(--vds-accent, var(--gold))} .md-passo.is-feito{opacity:.7} .md-passo.is-travado{opacity:.55} .md-passo.is-feito .md-passo-titulo{text-decoration:line-through} .md-hora{font-weight:600;font-size:14px;color:var(--vds-text-secondary, #B9BFD6);font-variant-numeric:tabular-nums} .md-passo.is-atual .md-hora{color:var(--vds-accent, var(--gold))} .md-passo-titulo{font-size:15px;font-weight:600;color:var(--vds-text-primary, var(--t1));margin-top:10px} .crm-badge.md-prio{margin:0;font-size:10px;letter-spacing:.04em} /* ── CRM ONDA 3 · D2 Tarefas/follow-up: estado por atributo, cor só no atrasado ── */ .fu-ico{width:14px;text-align:center;font-size:12px;color:var(--vds-text-secondary, var(--t2))} .task-col .kcol-head{background:transparent} html.vds .task-col[data-grupo="over"] .kcol-title,html.vds .task-col[data-grupo="over"] .kcol-count,.task-col[data-grupo="over"] .kcol-title,.task-col[data-grupo="over"] .kcol-count{color:var(--vds-danger, #F05577)} html.vds .task-col[data-grupo="today"] .kcol-title,.task-col[data-grupo="today"] .kcol-title{color:var(--vds-accent, var(--gold))} [data-estado="atrasada"]{box-shadow:inset 3px 0 0 var(--vds-danger, #F05577)} .task-item[data-estado="pendente"]{box-shadow:inset 3px 0 0 var(--vds-border-strong, rgba(255,255,255,.18))} .task-item[data-estado="feito"]{opacity:.7} .crm-faixa-alerta{padding:8px 16px;flex-shrink:0;align-items:center;gap:8px;font-size:12px;color:var(--vds-danger, #F05577);background:var(--vds-danger-bg, rgba(240,85,119,.06));border-bottom:1px solid var(--vds-danger-bd, rgba(240,85,119,.25))} .crm-faixa-alerta{flex-wrap:wrap;row-gap:6px}.crm-faixa-alerta .btn{white-space:nowrap} /* ── CRM ONDA 3 · F1 Relatórios: barra neutra (dourado é ação/destaque, não volume) ── */ .crm-barra{height:6px;background:var(--vds-surface-3, rgba(255,255,255,.06));border-radius:99px;overflow:hidden} .crm-barra-fill{height:100%;background:var(--vds-text-tertiary, var(--t3));border-radius:99px;opacity:.75} /* ── CRM ONDA 3 · F2 Dashboard: funil sem fundo colorido por etapa, setas neutras ── */ .dv2-funnel-stage.dv2-stage{min-width:172px} html.vds[data-theme] .dv2-funnel-stage.dv2-stage-vazia, .dv2-funnel-stage.dv2-stage-vazia{flex:0 0 auto;min-width:150px;opacity:.6;background:transparent !important;border-style:dashed !important} .dv2-stage-nome{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--vds-text-secondary, var(--t2));margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dv2-stage-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dv2-stage-num{font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .dv2-stage-valor{font-size:13.5px;font-weight:600;color:var(--vds-text-primary, var(--t1));margin-top:7px;font-variant-numeric:tabular-nums} .dv2-stage-mov{margin-top:8px;padding-top:7px;border-top:1px solid var(--vds-border-subtle, rgba(255,255,255,.06))} .dv2-arrow-ico{font-size:14px;color:var(--vds-text-tertiary, var(--t3))} .dv2-arrow-pct{font-size:15px;font-weight:600;color:var(--vds-text-primary, var(--t1));margin-top:4px;font-variant-numeric:tabular-nums} /* ── CRM ONDA 3 · F3 Navegação: até 1366px as abas viram só ícone (a ativa mantém o rótulo). Antes a .topnav rolava com a barra ESCONDIDA e "+ Novo lead"/Configurações ficavam fora da tela já em 1024–1280px. O rótulo continua no DOM (leitor de tela) e vira tooltip (title, no hover). ── */ @media (max-width: 1366px) { .topnav .ni:not(.on) > span[data-i18n] { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .topnav .ni:not(.on) { padding-left: 10px !important; padding-right: 10px !important; } .topnav .ni:not(.on) .ni-icon { margin-right: 0 !important; } } @media (max-width: 1024px) { [data-embedded="true"] .tab-search input { width: 150px !important; min-width: 0 !important; } } @media (max-width: 900px) { [data-embedded="true"] .tab-search { display: none !important; } /* mesma regra que já valia ≤760: busca do sistema fica na Lupa do Reith */ } @media (max-width: 560px) { /* celular: "+ Novo lead" vira "+" (o texto segue no botão p/ leitor de tela) e o WA fica só a bolinha */ html[data-embedded="true"] .tab-bar-extras .tab-novo-lead { font-size: 0 !important; width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } html[data-embedded="true"] .tab-bar-extras .tab-novo-lead::before { content: '+'; font-size: 18px; font-weight: 600; line-height: 1; } [data-embedded="true"] .tab-wa-status .label { display: none; } [data-embedded="true"] .tab-wa-status { padding: 6px !important; } [data-embedded="true"] .tab-bar-extras { gap: 6px !important; padding-right: 8px !important; } .topnav .ni:not(.on) { padding-left: 8px !important; padding-right: 8px !important; } html.vds[data-theme] .topnav, .topnav { gap: 2px !important; padding: 0 0 0 6px !important; } /* extras presos à direita: "+ Novo lead" e WA SEMPRE visíveis; só as abas rolam por baixo */ [data-embedded="true"] .tab-bar-extras { position: sticky; right: 0; z-index: 2; padding-left: 8px; background: var(--vds-bg-canvas, var(--sb, #060E17)); box-shadow: -12px 0 12px -6px var(--vds-bg-canvas, #060E17); } html[data-theme="light"][data-embedded="true"] .tab-bar-extras { background: #FFFFFF !important; box-shadow: -12px 0 12px -6px #FFFFFF; } [data-embedded="true"] .tab-bar-extras .phone-priv-btn { display: none !important; } /* privacidade p/ gravar vídeo = uso de desktop */ } /* ═══ CRM · KANBAN — remodelação cirúrgica (04/10) ═══════════════════════════════════════ Cabeçalho em 2 linhas: A = funil + KPIs (barra executiva compacta) + atualizar · B = filtros + operação. Controles com UMA medida (32px, raio 8); dourado só no destaque/ativo; Meta em azul próprio. */ .kanban-header.kh { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 10px 16px 9px; } .kh-linha { display: flex; align-items: center; gap: 10px; min-width: 0; } .kh-a #funnel-wrap { flex: none; } .kh-a #funnel-btn { height: var(--vds-h-sm, 32px); border-radius: 8px !important; } .kh-kpis { order: 2; flex: 1 1 auto; min-width: 0; } .kh-kpis:empty { display: none; } .kh-stats { order: 3; font-size: 12px; color: var(--vds-text-secondary, var(--t2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .kh-stats .ks-sep { color: var(--vds-text-tertiary, var(--t3)); } .kh-stats .ks-ganho { color: var(--vds-success, #1DCEA8); } .kh-stats .ks-perdido { color: var(--vds-text-tertiary, var(--t3)); } body[data-vx-exec] .kh-stats .ks-aberto, body[data-vx-exec] .kh-stats .ks-aberto + .ks-sep { display: none; } body:not([data-vx-exec]) .kh-stats { flex: 1 1 auto; } .kh-a .kh-icone { order: 4; margin-left: auto; } .kh .btn-sm, .kh .kh-chip, .kh .kh-alerta, #kh-ops .w2-qbtn { height: var(--vds-h-sm, 32px); min-height: var(--vds-h-sm, 32px) !important; border-radius: 8px !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 500; white-space: nowrap; flex: none; } .kh .kh-icone { width: var(--vds-h-sm, 32px); padding: 0 !important; justify-content: center; } /* KPIs: a barra executiva vira faixa compacta ao lado do funil (detalhe no tooltip, segue no DOM p/ leitor de tela) */ #kh-kpis #vx-crm-exec { margin: 0; gap: 6px; } #kh-kpis #vx-crm-exec .vx-bar { display: flex; background: transparent; border: 0; border-left: 1px solid var(--vds-border-default, var(--b1)); border-radius: 0; overflow-x: auto; scrollbar-width: none; } #kh-kpis #vx-crm-exec .vx-bar::-webkit-scrollbar { display: none; } #kh-kpis #vx-crm-exec .vx-m { flex: none; min-width: 0; gap: 1px; padding: 1px 16px; border-left: 1px solid var(--vds-border-subtle, rgba(255,255,255,.06)); border-radius: 6px; } #kh-kpis #vx-crm-exec .vx-m:first-child { border-left: 0; } #kh-kpis #vx-crm-exec .vx-m-l { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--vds-text-tertiary, var(--t3)); } #kh-kpis #vx-crm-exec .vx-m-v { font-size: 15px; line-height: 1.25; } #kh-kpis #vx-crm-exec .vx-m-pipe .vx-m-v { font-size: 16px; } #kh-kpis #vx-crm-exec .vx-m-s { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #kh-kpis #vx-crm-exec .vx-m-wait .vx-m-v::before { width: 6px; height: 6px; margin: 0 6px 2px 0; } #kh-kpis #vx-crm-exec .vx-m.is-on { box-shadow: inset 0 -2px 0 var(--vds-accent, var(--gold)); } /* Linha B: grupo de filtros + operação (SLA e Minha fila) */ .kh-b { flex-wrap: wrap; row-gap: 6px; } #filter-dot { display: none !important; } /* substituído pela contagem em "Filtros (n)" */ .kh-fcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vds-accent, var(--gold)); color: var(--vds-on-accent, #1A1410); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } #btn-filters.is-on { border-color: var(--vds-accent-bd) !important; color: var(--vds-text-primary, var(--t1)) !important; } .kh-chip { border: 1px solid var(--vds-border-default, var(--b2)); background: transparent; color: var(--vds-text-secondary, var(--t2)); cursor: pointer; font-family: inherit; } .kh-chip:hover { background: var(--vds-surface-2, var(--s2)); color: var(--vds-text-primary, var(--t1)); } .kh-chip i { font-size: 12px; opacity: .85; } .kh-chip.is-on { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd); color: var(--vds-text-primary, var(--t1)); } .kh-chip-toggle.is-on::after { content: '\f00d'; font: 900 11px 'Font Awesome 6 Free'; margin-left: 2px; opacity: .8; } .kh-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } .kh-x:hover { background: rgba(255, 255, 255, .08); } .kh-alerta { border: 1px solid var(--vds-danger-bd, rgba(240,85,119,.35)); background: var(--vds-danger-bg, rgba(240,85,119,.08)); color: var(--vds-danger, #F05577); cursor: pointer; font-weight: 600 !important; } .kh-alerta .ks-sep { color: inherit; opacity: .6; } .kh-ops { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } #kh-ops .w2-bar { order: -1; padding: 0; flex: none; } #kh-ops .v2-exec { padding: 0; flex-wrap: nowrap; gap: 14px; white-space: nowrap; overflow: hidden; min-width: 0; color: var(--vds-text-tertiary, var(--t3)); } body[data-vx-exec] #kh-ops .w2-urgent { display: none; } /* "aguardando resposta" já é KPI da linha de cima */ .kh-b #btn-tag-ai { margin-left: auto; } .kh :is(.btn-sm, .kh-chip, .kh-alerta):focus-visible { outline: 2px solid var(--vds-accent, var(--gold)); outline-offset: 2px; } /* Colunas: título · indicadores · contagem · valor neutro · "+" */ .kcol-head .kcol-title { order: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .kcol-head .vx-kh { order: 1; } .kcol-meta { order: 2; display: flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; } .kcol-valor { font-size: 12px; font-weight: 600; color: var(--vds-text-secondary, var(--t2)); font-variant-numeric: tabular-nums; } .add-card-btn.kcol-add { width: 24px; height: 24px; min-height: 24px !important; padding: 0 !important; margin: 0 -4px 0 0; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent; color: var(--vds-text-tertiary, var(--t3)); display: inline-flex; align-items: center; justify-content: center; font-size: 11px !important; cursor: pointer; } .add-card-btn.kcol-add:hover { background: var(--vds-surface-2, var(--s2)); border-color: var(--vds-border-default, var(--b2)) !important; color: var(--vds-text-primary, var(--t1)); } html.vds[data-theme] .kcol-head { padding: 8px 10px 8px 12px; min-height: 40px; } /* Estado vazio padrão (todas as colunas) */ .kcol .kcol-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 1px dashed var(--vds-border-default, var(--b2)); border-radius: 10px; text-align: center; } .kcol .kcol-vazio i { font-size: 18px; color: var(--vds-text-tertiary, var(--t3)); margin-bottom: 4px; } .kcol .kcol-vazio b { font-size: 12.5px; font-weight: 600; color: var(--vds-text-secondary, var(--t2)); } .kcol .kcol-vazio span { font-size: 11.5px; color: var(--vds-text-tertiary, var(--t3)); } .kcol-vazio-add { margin-top: 8px; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--vds-border-default, var(--b2)); background: transparent; color: var(--vds-text-primary, var(--t1)); font: 600 12px inherit; cursor: pointer; } .kcol-vazio-add:hover { background: var(--vds-surface-2, var(--s2)); } /* Cards: mais respiro, mesma densidade de informação */ html.vds[data-theme] .kcard { padding: 12px 12px 10px !important; } .kcol-body { display: flex; flex-direction: column; gap: 8px; } /* Origem META: azul da marca, legível no escuro e no claro, diferente das demais origens */ .kcard-origin.is-meta { gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0; color: #8DBBFF; background: rgba(24, 119, 242, .16); border: 1px solid rgba(24, 119, 242, .45); } .kcard-origin.is-meta i { font-size: 10px; color: #4C9AFF; } html[data-theme="light"] .kcard-origin.is-meta { filter: none; color: #0B5CD5; background: rgba(24, 119, 242, .08); border-color: rgba(24, 119, 242, .35); } html[data-theme="light"] .kcard-origin.is-meta i { color: #1877F2; } /* Notebook/tablet: KPIs rolam dentro da faixa; no celular a faixa desce abaixo do funil */ @media (max-width: 1100px) { .kh-a { flex-wrap: wrap; row-gap: 8px; } .kh-kpis { flex: 1 1 100%; order: 5; } .kh-stats { flex: 1 1 auto; } } @media (max-width: 760px) { .kanban-header.kh { padding: 8px 10px !important; } .kh-a #funnel-wrap { flex: 1 1 auto; } .kh-a .kh-icone { display: none; } .kh-stats { flex-basis: 100%; order: 6; } #kh-ops .v2-exec { display: none; } .kh-b #btn-tag-ai { margin-left: 0; } } /* Kanban · ajustes pós-captura */ #filter-period-label { display: inline-flex !important; } #silent-count:not([style*="none"]) { display: inline-flex !important; } .kh-ops { overflow: hidden; } #kh-ops .v2-exec { flex: 1 1 0; text-overflow: ellipsis; } #kh-ops .v2-exec > span { flex: none; } html.vds[data-theme] .kcol-title, .kcol-head .kcol-title { letter-spacing: .02em; } .kcol-head .vx-kh { gap: 6px; margin-left: 6px; } .kcol-meta { gap: 6px; margin-left: 6px; } @media (max-width: 760px) { .kh-b { flex-wrap: wrap !important; } .kh-b #btn-filters { flex: none !important; margin-left: 0 !important; height: var(--vds-h-sm, 32px) !important; } .kh-b #silent-count { height: var(--vds-h-sm, 32px) !important; padding: 0 12px !important; border-radius: 8px !important; } .kh-ops { flex: 1 1 100%; order: 9; overflow: visible; } } .kanban-header.kh { align-items: stretch !important; } /* a regra antiga de ≤760 centralizava e as linhas assumiam a largura do conteúdo */ .kh-linha, #kh-kpis #vx-crm-exec, #kh-kpis #vx-crm-exec .vx-bar { min-width: 0; max-width: 100%; } .kh-ops { flex: 1 1 0; } @media (max-width: 760px) { .kh-ops { flex: 1 1 100%; } } .kh-ops { min-width: min-content; } #kh-ops .v2-exec { min-width: 0; } html.vds[data-theme] #panel-funil .kcol-title, #panel-funil .kcol-head .kcol-title { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; } .kh-ops { min-width: auto; overflow: visible; } #kh-ops .v2-exec { width: 0; flex: 1 1 0; overflow: hidden; } #kh-ops .v2-exec { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } @media (max-width: 1100px) and (min-width: 761px) { .kh-kpis { flex: 1 1 0; order: 2; } /* KPIs continuam AO LADO do funil (rolam dentro da faixa) */ .kh-stats { flex: 1 1 100%; order: 5; } /* ganho/perdido desce, discreto */ body:not([data-vx-exec]) .kh-stats { flex: 1 1 auto; order: 3; } } #kh-kpis #vx-crm-exec .vx-bar, #kh-kpis #vx-crm-exec .vx-m { position: relative; } /* Kanban · tema CLARO (visual clássico): os elementos que saíram de caixas escuras para o fundo do cabeçalho */ html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-bar { border-left-color: var(--vds-border-default); } html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-m { border-left-color: var(--vds-border-subtle); } html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-m-l { color: var(--vds-text-tertiary); } html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-m-v { color: var(--vds-text-primary); } html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-m.is-on { background: var(--vds-surface-selected); } html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-filter { background: #FFFFFF; border-color: var(--vds-border-default); color: var(--vds-text-secondary); } html[data-theme="light"] .kh-stats { color: var(--vds-text-secondary); } html[data-theme="light"] .kh-chip { background: #FFFFFF; border-color: var(--vds-border-default); color: var(--vds-text-secondary); } html[data-theme="light"] .kh-chip:hover { background: var(--vds-surface-2); color: var(--vds-text-primary); } html[data-theme="light"] .kh-chip.is-on { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd); color: var(--vds-text-primary); } html[data-theme="light"] #kh-ops .v2-exec { color: var(--vds-text-tertiary); } html[data-theme="light"] #kh-ops .v2-exec b { color: var(--vds-text-primary); } html[data-theme="light"] .kcol-valor { color: var(--vds-text-secondary); } html[data-theme="light"] .add-card-btn.kcol-add { color: var(--vds-text-tertiary); } html[data-theme="light"] .kcol .kcol-vazio { border-color: var(--vds-border-default); } html[data-theme="light"] .kcol .kcol-vazio b { color: var(--vds-text-body); } html[data-theme="light"] .kcol-vazio-add { background: #FFFFFF; border-color: var(--vds-border-default); color: var(--vds-text-primary); } /* ═══ KANBAN v2 — alinhado ao painel de referência "Painel CRM Valiom em Kanban" (04/10) ═══════════════ */ /* Linha A: cartão do funil + faixa de KPIs (60px) */ .kanban-header.kh { gap: 12px; padding: 14px 16px 12px; } .kh-a { gap: 12px; } .kh-a #funnel-btn { height: 60px !important; min-width: 260px; padding: 0 16px !important; border-radius: 10px !important; background: var(--vds-surface-1, var(--s1)) !important; border: 1px solid var(--vds-border-default, var(--b2)) !important; } .kh-a #funnel-btn > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .kh-funil-l { font-size: 11.5px; font-weight: 500; color: var(--vds-text-tertiary, var(--t3)); } .kh-funil-n { font-size: 16px; font-weight: 600; color: var(--vds-text-primary, var(--t1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } #kh-kpis #vx-crm-exec .vx-bar { height: 60px; align-items: stretch; border: 1px solid var(--vds-border-default, var(--b1)); border-radius: 10px; background: var(--vds-surface-1, var(--s1)); } #kh-kpis #vx-crm-exec .vx-m { flex-direction: row; align-items: center; gap: 12px; padding: 0 20px; border-radius: 0; border-left: 1px solid var(--vds-border-subtle, rgba(255,255,255,.06)); } #kh-kpis #vx-crm-exec .vx-m:first-child { border-left: 0; } #kh-kpis #vx-crm-exec .vx-m-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #kh-kpis #vx-crm-exec .vx-m-i { font-size: 18px; width: 22px; text-align: center; color: var(--vds-text-secondary, var(--t2)); flex: none; } #kh-kpis #vx-crm-exec .vx-m-big .vx-m-i, #kh-kpis #vx-crm-exec .vx-m-conv .vx-m-i { color: var(--vds-accent, var(--gold)); } #kh-kpis #vx-crm-exec .vx-m-l { font-size: 11.5px; } #kh-kpis #vx-crm-exec .vx-m-v { font-size: 17px; font-weight: 600; } #kh-kpis #vx-crm-exec .vx-m-big .vx-m-v { order: -1; font-size: 21px; } #kh-kpis #vx-crm-exec .vx-m-big .vx-m-l { font-size: 12px; color: var(--vds-text-secondary, var(--t2)); } #kh-kpis #vx-crm-exec .vx-m-wait .vx-m-v::before { display: none; } #kh-kpis #vx-crm-exec .vx-m.is-on { box-shadow: inset 0 -2px 0 var(--vds-accent, var(--gold)); background: var(--vds-surface-selected); } body[data-vx-exec] .kh-stats { display: none; } /* topo da referência: só funil + KPIs */ /* Linha B: visão (Minha fila · Em atraso · Todos) à esquerda; filtros agrupados + IA + atualizar à direita (40px) */ .kh-b { gap: 10px; } .kh .kh-b .btn-sm, .kh-segbtn, #kh-seg .w2-qbtn { height: 40px !important; min-height: 40px !important; border-radius: 10px !important; padding: 0 16px !important; font-size: 13px !important; font-weight: 500; } .kh .kh-b .kh-icone { width: 40px; padding: 0 !important; } .kh-seg { display: flex; align-items: center; gap: 10px; flex: none; } #kh-seg .w2-bar { padding: 0; gap: 0; } #kh-seg .w2-qbtn { border: 1px solid var(--vds-focus-border) !important; background: var(--vds-surface-selected) !important; color: var(--vds-accent-text, #FDD863) !important; gap: 10px; } #kh-seg .w2-qbtn i { color: var(--vds-accent, var(--gold)); } #kh-seg .w2-count { min-width: 28px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--vds-surface-selected); color: var(--vds-accent-hover, #FDD863); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; } #kh-seg .w2-urgent { display: none; } .kh-segbtn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--vds-border-default, var(--b2)); background: transparent; color: var(--vds-text-secondary, var(--t2)); cursor: pointer; font-family: inherit; white-space: nowrap; } .kh-segbtn:hover { background: var(--vds-surface-2, var(--s2)); color: var(--vds-text-primary, var(--t1)); } .kh-segbtn.is-on { background: var(--vds-surface-2, var(--s2)); border-color: var(--vds-border-strong, var(--b2)); color: var(--vds-text-primary, var(--t1)); } .kh-segbtn[hidden] { display: none !important; } .kh-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--vds-surface-3, var(--s3)); color: var(--vds-text-primary, var(--t1)); } .kh-n--danger { background: var(--vds-danger, #F05577); color: #fff; } .kh-n[hidden] { display: none; } .kh-b .kh-ops { display: none !important; } /* o texto do SLA virou o tooltip de "Em atraso" */ .kh-fgroup { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px; border: 1px solid var(--vds-border-default, var(--b2)); border-radius: 10px; background: var(--vds-surface-1, var(--s1)); min-width: 0; } .kh .kh-fgroup #btn-filters { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; border: 0 !important; background: transparent !important; } .kh .kh-fgroup .kh-chip { height: 28px !important; min-height: 28px !important; padding: 0 9px !important; border-radius: 7px !important; font-size: 12px !important; background: var(--vds-surface-2, var(--s2)); border-color: transparent; } .kh .kh-fgroup .kh-chip.is-on { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd); } .kh .kh-fgroup .kh-chip .kh-n { height: 18px; min-width: 18px; font-size: 10.5px; } .kh-b #silent-count { display: none !important; } /* o número de "nunca respondidos" está no chip "Sem resposta" */ .kh-b #btn-tag-ai { margin-left: 0; } /* Colunas: painel de altura inteira, cabeçalho em 2 linhas, "+" quadrado */ #kanban-board.kanban-board, .kanban-board { align-items: stretch; gap: 14px; } #panel-funil .kcol { width: 290px; background: var(--vds-surface-1, rgba(255,255,255,.02)); border: 1px solid var(--vds-border-subtle, rgba(255,255,255,.06)); border-radius: 12px; padding: 12px; gap: 10px; } #panel-funil .kcol-head, html.vds[data-theme] #panel-funil .kcol-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 4px; align-items: center; background: transparent !important; border: 0 !important; padding: 2px 0 6px !important; margin: 0; min-height: 0; } #panel-funil .kcol-h1 { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; } #panel-funil .kcol-head .kcol-title { text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; font-weight: 700; flex: 0 1 auto; } #panel-funil .kcol-count { font-size: 12.5px; color: var(--vds-text-secondary, var(--t2)); } #panel-funil .kcol-head .vx-kh { grid-column: 2; grid-row: 1; margin: 0; } #panel-funil .kcol-add { grid-column: 3; grid-row: 1 / 3; width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; border: 1px solid var(--vds-border-default, var(--b2)) !important; border-radius: 8px !important; font-size: 13px !important; color: var(--vds-text-primary, var(--t1)); } #panel-funil .kcol-h2 { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vds-text-tertiary, var(--t3)); min-width: 0; white-space: nowrap; } #panel-funil .kcol-h2 i { color: var(--vds-accent, var(--gold)); font-size: 12px; } #panel-funil .kcol-h2 .kcol-valor { color: var(--vds-text-secondary, var(--t2)); font-size: 12.5px; } #panel-funil .kcol-body { flex: 1 1 auto; gap: 10px; } #panel-funil .kcol .kcol-vazio { flex: 1 1 auto; min-height: 340px; justify-content: center; gap: 8px; padding: 24px 16px; border-radius: 10px; } #panel-funil .kcol .kcol-vazio i { font-size: 30px; margin-bottom: 6px; } #panel-funil .kcol .kcol-vazio b { font-size: 14px; color: var(--vds-text-primary, var(--t1)); } #panel-funil .kcol .kcol-vazio span { font-size: 12.5px; line-height: 1.5; max-width: 210px; } #panel-funil .kcol-vazio-add { margin-top: 14px; height: 40px; padding: 0 20px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; } .kcol-add-rodape { width: 100%; height: 44px; border: 1px dashed var(--vds-border-strong, var(--b2)); border-radius: 10px; background: transparent; color: var(--vds-text-primary, var(--t1)); font: 600 13px inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; flex: none; } .kcol-add-rodape:hover { background: var(--vds-surface-2, var(--s2)); } .kcol-add-rodape:focus-visible, .kh-segbtn:focus-visible { outline: 2px solid var(--vds-accent, var(--gold)); outline-offset: 2px; } /* Card: grid com áreas — o V2 (prioridade · SLA · próxima ação) encaixa sem mudar a lógica dele */ #panel-funil .kcard, html.vds[data-theme] #panel-funil .kcard { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; grid-template-areas: "top top top" "svc svc svc" "msg msg msg" "chips chips chips" "who prio sla" "act act act" "sub sub sub"; padding: 14px !important; border-radius: 10px !important; } #panel-funil .kcard > * { grid-column: 1 / -1; } #panel-funil .kcard-top { grid-area: top; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } #panel-funil .kcard-name { font-size: 14.5px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } #panel-funil .kcard-top-r { display: flex; align-items: center; gap: 6px; flex: none; } #panel-funil .kcard-top-r .kcard-val { font-size: 13.5px; font-weight: 600; color: var(--vds-text-primary, var(--t1)); font-variant-numeric: tabular-nums; } #panel-funil .kcard-top-r .kcard-recorrente { font-size: 12.5px; font-weight: 600; color: var(--vds-text-primary, var(--t1)); } #panel-funil .kcard-parado { font-size: 11px; font-weight: 700; } #panel-funil .kcard-service { grid-area: svc; margin-top: 3px; font-size: 12.5px; color: var(--vds-text-secondary, var(--t2)); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-funil .kcard-msg, html.vds[data-theme] #panel-funil .kcard-msg { grid-area: msg; margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; font-size: 12.5px; font-weight: 400; color: var(--vds-text-secondary, var(--t2)); } #panel-funil .kcard-msg i { color: var(--vds-text-tertiary, var(--t3)); font-size: 13px; flex: none; } #panel-funil .kcard-msg.is-waiting i { color: var(--vds-accent, var(--gold)); } #panel-funil .kcard-msg-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-funil .kcard-msg .kcard-date { flex: none; font-size: 11.5px; color: var(--vds-text-tertiary, var(--t3)); } #panel-funil .kcard-chips { grid-area: chips; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } #panel-funil .kcard-chips:empty { display: none; } #panel-funil .kcard-chips > *, #panel-funil .kcard-chips .lead-tag { height: 26px; margin: 0 !important; padding: 0 10px !important; border-radius: 7px !important; display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } #panel-funil .kcard-chip, #panel-funil .kcard-chips .kcard-origin:not(.is-meta):not(.is-wpp) { border: 1px solid var(--vds-border-default, var(--b2)); background: var(--vds-surface-2, var(--s2)); color: var(--vds-text-secondary, var(--t2)) !important; } #panel-funil .kcard-chips .lead-tag { background: var(--vds-surface-2, var(--s2)) !important; border: 1px solid var(--vds-border-default, var(--b2)) !important; color: var(--vds-text-primary, var(--t1)) !important; } #panel-funil .kcard-chips .crm-badge:not(.crm-badge--danger) { background: var(--vds-surface-2, var(--s2)); color: var(--vds-text-primary, var(--t1)); } #panel-funil .kcard-origin.is-wpp { color: var(--vds-text-primary, var(--t1)); background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .30); } #panel-funil .kcard-origin.is-wpp i { color: #25D366; font-size: 13px; } #panel-funil .kcard-origin.is-meta i { font-size: 12px; } #panel-funil .kcard-assignee { grid-area: who; margin-top: 14px; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vds-text-secondary, var(--t2)); } #panel-funil .kcard-assignee span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-funil .kcard .v2-card, #panel-funil .kcard .v2-card > .v2-row:not(.v2-row-sub) { display: contents; } #panel-funil .kcard .v2-prio { grid-area: prio; margin-top: 14px; align-self: center; } #panel-funil .kcard .v2-sla { grid-area: sla; margin-top: 14px; align-self: center; font-size: 12px; } #panel-funil .kcard .v2-na { grid-area: act; margin-top: 12px; justify-self: start; height: 36px; padding: 0 14px; border: 1px solid var(--vds-border-default, var(--b2)); border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--vds-text-primary, var(--t1)); } #panel-funil .kcard .v2-row-sub { grid-area: sub; margin-top: 8px; } /* Tema claro (visual clássico) */ html[data-theme="light"] .kh-a #funnel-btn, html[data-theme="light"] #kh-kpis #vx-crm-exec .vx-bar, html[data-theme="light"] .kh-fgroup { background: #FFFFFF !important; border-color: var(--vds-border-default) !important; } html[data-theme="light"] .kh-funil-n { color: var(--vds-text-primary); } html[data-theme="light"] #panel-funil .kcol { background: var(--vds-surface-2); border-color: var(--vds-border-subtle); } html[data-theme="light"] .kh-segbtn { color: var(--vds-text-secondary); border-color: var(--vds-border-default); background: #FFFFFF; } html[data-theme="light"] .kh-segbtn.is-on { background: var(--vds-surface-3); color: var(--vds-text-primary); } html[data-theme="light"] #kh-seg .w2-qbtn { color: var(--vds-text-primary) !important; background: var(--vds-surface-selected) !important; } html[data-theme="light"] #kh-seg .w2-count { color: var(--vds-text-primary); } html[data-theme="light"] #panel-funil .kcard-chip, html[data-theme="light"] #panel-funil .kcard-chips .lead-tag { background: var(--vds-surface-3) !important; border-color: var(--vds-border-default) !important; color: var(--vds-text-body) !important; } html[data-theme="light"] .kcol-add-rodape { color: var(--vds-text-primary); border-color: var(--vds-border-strong); } /* Notebook: KPIs rolam ao lado do funil; linha B quebra se precisar */ @media (max-width: 1280px) { .kh-a #funnel-btn { min-width: 220px; } #kh-kpis #vx-crm-exec .vx-m { padding: 0 14px; } .kh-b { flex-wrap: wrap; row-gap: 8px; } } @media (max-width: 760px) { .kh-a { flex-wrap: wrap; } .kh-a #funnel-btn { min-width: 0; width: 100%; } .kh-kpis { flex: 1 1 100%; } .kh-seg { flex: 1 1 100%; overflow-x: auto; } .kh-fgroup { margin-left: 0; flex: 1 1 100%; overflow-x: auto; } #panel-funil .kcol { width: 270px; } #panel-funil .kcol .kcol-vazio { min-height: 260px; } } /* coluna: no mínimo a altura do board, cresce com os cards (o board rola, como antes) */ #kanban-board.kanban-board, .kanban-board { align-items: flex-start; } #panel-funil .kcol { min-height: 100%; height: auto; box-sizing: border-box; } html.vds[data-theme] #panel-funil .kcol-head .kcol-title, #panel-funil .kcol-head .kcol-title { text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; font-weight: 700; } #panel-funil .kcol-body { flex: 0 0 auto; } #kh-seg .w2-qbtn { white-space: nowrap; } #panel-funil .kcard .kcard-msg { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #panel-funil .kcol .kcol-vazio .kcol-vazio-add i { font-size: 12px !important; margin: 0 !important; color: inherit !important; } #panel-funil .kcol-body > .kcol-vazio { min-height: max(340px, calc(100vh - 340px)); } @media (max-width: 760px) { #panel-funil .kcol-body > .kcol-vazio { min-height: 260px; } } /* Tema claro: os tokens --vds-* guardam valores do escuro; dentro do Funil eles passam a valer a paleta clássica (Papel) */ html[data-theme="light"] #panel-funil { --v-t1: #111111; --v-t2: #5F6368; --v-t3: #7A8087; --v-bd: #E5E5E5; --v-s1: #FFFFFF; } html[data-theme="light"] #panel-funil .kcard .v2-na, html[data-theme="light"] #panel-funil .kcard .v2-prio { color: var(--vds-text-primary); } html[data-theme="light"] #panel-funil .kcol-add { background: #FFFFFF; } html[data-theme="light"] #panel-funil .kcard-chips .kcard-origin { filter: none; } /* ═══ KANBAN — refino próprio (04/10, feedback do Lucas) ═════════════════════════════════════════ Topo mais baixo; colunas como antes (sem painel em volta, card na largura toda); tags compactas lado a lado. */ .kanban-header.kh { gap: 10px; padding: 10px 16px 10px; } .kh-a #funnel-btn { height: 48px !important; min-width: 240px; } .kh-funil-l { font-size: 10.5px; } .kh-funil-n { font-size: 15px; } #kh-kpis #vx-crm-exec .vx-bar { height: 48px; } #kh-kpis #vx-crm-exec .vx-m { gap: 10px; padding: 0 16px; } #kh-kpis #vx-crm-exec .vx-m-i { font-size: 15px; width: 18px; } #kh-kpis #vx-crm-exec .vx-m-l { font-size: 11px; } #kh-kpis #vx-crm-exec .vx-m-v { font-size: 15px; line-height: 1.2; } #kh-kpis #vx-crm-exec .vx-m-big .vx-m-v { font-size: 17px; } #kh-kpis #vx-crm-exec .vx-m-big .vx-m-l { font-size: 11px; } .kh .kh-b .btn-sm, .kh-segbtn, #kh-seg .w2-qbtn { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 12.5px !important; } .kh .kh-b .kh-icone { width: 36px; } .kh-fgroup { height: 36px; } .kh .kh-fgroup #btn-filters { height: 28px !important; min-height: 28px !important; } .kh .kh-fgroup .kh-chip { height: 26px !important; min-height: 26px !important; } #kh-seg .w2-count { height: 22px; min-width: 26px; } /* colunas: como antes — sem painel; cabeçalho em caixa; cards ocupam a largura da coluna */ #panel-funil .kcol { width: 300px; min-height: 0; background: transparent; border: 0; border-radius: 0; padding: 0; gap: 8px; } #panel-funil .kcol-head, html.vds[data-theme] #panel-funil .kcol-head { background: var(--vds-surface-1, var(--s1)) !important; border: 1px solid var(--vds-border-default, var(--b1)) !important; border-radius: 10px; padding: 9px 10px 9px 12px !important; } #panel-funil .kcol-add { width: 28px !important; height: 28px !important; min-height: 28px !important; } #panel-funil .kcol-body { gap: 8px; } #panel-funil .kcol-body > .kcol-vazio, #panel-funil .kcol .kcol-vazio { min-height: 0; flex: none; padding: 22px 14px; gap: 6px; } #panel-funil .kcol .kcol-vazio i { font-size: 22px; margin-bottom: 2px; } #panel-funil .kcol .kcol-vazio b { font-size: 13px; } #panel-funil .kcol .kcol-vazio span { font-size: 12px; } #panel-funil .kcol-vazio-add { margin-top: 8px; height: 32px; padding: 0 14px; font-size: 12.5px; } .kcol-add-rodape { height: 38px; font-size: 12.5px; } html[data-theme="light"] #panel-funil .kcol { background: transparent; } /* card: um pouco mais compacto */ #panel-funil .kcard, html.vds[data-theme] #panel-funil .kcard { padding: 12px 12px 12px !important; } #panel-funil .kcard-name { font-size: 14px; } #panel-funil .kcard-msg, html.vds[data-theme] #panel-funil .kcard-msg { margin-top: 9px; } #panel-funil .kcard-chips { margin-top: 9px; gap: 5px; } #panel-funil .kcard-assignee, #panel-funil .kcard .v2-prio, #panel-funil .kcard .v2-sla { margin-top: 11px; } #panel-funil .kcard .v2-na { margin-top: 9px; height: 32px; padding: 0 12px; font-size: 12px; } /* chips de estado/origem 24px; tags compactas 22px — cabem lado a lado */ #panel-funil .kcard-chips > *, #panel-funil .kcard-chips .lead-tag { height: 24px; padding: 0 8px !important; font-size: 11.5px !important; gap: 5px; } #panel-funil .kcard-chips .lead-tag { height: 22px; padding: 0 7px !important; border-radius: 6px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #panel-funil .kcard-chips .lead-tag .lead-tag-dot { width: 5px; height: 5px; margin: 0; flex: none; } @media (max-width: 760px) { #panel-funil .kcol { width: 280px; } } /* ═══ TEMA CLARO = MESMO LAYOUT DO ESCURO (04/10) ════════════════════════════════════════════════ O escuro é o oficial. As regras do DS no CRM valem nos dois temas (html.vds[data-theme]); o claro só troca os TOKENS para a paleta Papel. O CSS clássico do claro (index.html) só vale com o DS desligado (html:not(.vds)). */ /* (18/10/2026) tokens claros = TEMA CLARO OFICIAL de valiom-ds.css (html.vds[data-theme="light"]) — o bloco "Papel" saiu */ /* claro: dourado usado como TEXTO (var(--gold), cores fixas) fica mais escuro p/ ler no papel; fundos/botões do DS seguem --vds-gold-500 */ html.vds[data-theme="light"] { --gold: #111111; --g2: #2B2F33; --gb: var(--vds-accent-bd-weak); --gold-border: var(--vds-accent-bd-weak); --gold-dim: var(--vds-surface-selected); } html.vds[data-theme="light"] :is(.task-col[data-grupo="today"] .kcol-title, .md-passo.is-atual .md-hora, #kh-seg .w2-qbtn, #kh-seg .w2-count) { color: var(--vds-text-primary) !important; } html.vds[data-theme="light"] :is([style^="color:#F59E3F"], [style*=";color:#F59E3F"], [style*=" color:#F59E3F"], [style^="color: #F59E3F"]) { color: var(--vds-warning) !important; } html.vds[data-theme="light"] #panel-config [style*="width:44px;height:44px;border-radius:50%"] { filter: brightness(.62) saturate(1.25); } /* iniciais na cor do usuário: legíveis no papel */ /* drawer fechado fica logo além da borda direita: a sombra dele vazava para a tela (visível no claro) */ #lead-drawer:not(.open) { box-shadow: none !important; } html.vds[data-theme="light"] #lead-drawer.open { box-shadow: var(--vds-shadow-drawer) !important; } html.vds[data-theme="light"] .msg-out { background: #F4F4F5 !important; border-color: #E5E5E5 !important; } html.vds[data-theme] .lead-drawer .stage-compact-val { color: var(--vds-text-primary) !important; } html.vds[data-theme="light"] .lead-drawer .stage-compact-label { color: var(--vds-text-tertiary) !important; } html.vds[data-theme="light"] #cc-stage-badge > span { filter: brightness(.62) saturate(1.25); } /* cor da etapa (escolha do usuário) legível no papel */ /* (18/10/2026) --gold é PRETO no claro: inline "background:var(--gold);color:#0A0A0A/#1a1a1a/#1A1410" vira texto branco */ html.vds[data-theme="light"] :is([style*="background:var(--gold)"], [style*="background: var(--gold)"]):not(div[style*="inline-flex"][style*="overflow:hidden"] > button):is([style*="color:#0A0A0A"], [style*="color:#1a1a1a"], [style*="color:#1A1410"], [style*="color:#000"], [style*="color:#111"]) { color: var(--vds-on-accent) !important; } /* status do WhatsApp: cores da paleta (o vermelho/verde neon antigo some no branco) */ html.vds[data-theme="light"] .tab-wa-status { background: var(--vds-success-bg) !important; color: var(--vds-success-fg) !important; border-color: var(--vds-success-bd) !important; } html.vds[data-theme="light"] .tab-wa-status .dot { background: var(--vds-success) !important; box-shadow: none !important; } html.vds[data-theme="light"] .tab-wa-status.offline { background: var(--vds-danger-bg) !important; color: var(--vds-danger-fg) !important; border-color: var(--vds-danger-bd) !important; } html.vds[data-theme="light"] .tab-wa-status.offline .dot { background: var(--vds-danger) !important; } /* (18/10/2026, correção preto-no-preto) var(--on-accent, ) / var(--lx-accent, ): só o CLARO define */ html.vds[data-theme="light"] { --on-accent: #FFFFFF; --lx-accent: #111111; } /* verde do WhatsApp (#25D366) some no branco: no claro, texto/ícone em verde funcional escuro e botão sólido em verde funcional */ html.vds[data-theme="light"] :is([style*="color:#25d366"], [style*="color:#25D366"]) { color: var(--vds-success-fg) !important; } html.vds[data-theme="light"] :is([style*="background:#25d366"], [style*="background:#25D366"]) { background: var(--vds-success) !important; border-color: var(--vds-success) !important; } html.vds[data-theme="light"] #panel-funil .kcard-origin.is-wpp i, html.vds[data-theme="light"] .kcard-origin.is-wpp i { color: var(--vds-success) !important; }