/* ─── THEME VARIABLES ─── */
:root{
  --bg-body-color:#1f1d35;
  --bg-body:radial-gradient(60% 80% at 12% 75%,var(--color-accent) 0%,#3535b8 22%,rgba(31,29,53,0) 60%),#1f1d35;
  --bg-pw-gate:radial-gradient(60% 80% at 12% 75%,var(--color-accent) 0%,#3535b8 22%,rgba(31,29,53,0) 60%),#1f1d35;
  --bg-pw-box:rgba(45,40,75,0.85);
  --bg-pw-input:rgba(35,32,60,0.8);
  --pw-title:#fff; --pw-sub:rgba(180,180,255,0.75);
  --bg-dash:rgba(45,40,75,0.65);
  --bg-metric:rgba(55,48,90,0.75);
  --border-metric:rgba(147,147,255,0.12);
  --color-label:#aaaaff;
  --color-title:#fff;
  --color-sub:rgba(255,255,255,0.6);
  --bg-toggle:rgba(35,32,60,0.6);
  --border-toggle:rgba(147,147,255,0.2);
  --color-toggle-inactive:rgba(180,180,255,0.6);
  --color-toggle-hover:#C3C4FD;
  --bg-tabs:rgba(35,32,60,0.6);
  --border-tabs:rgba(147,147,255,0.2);
  --color-tab-inactive:rgba(180,180,255,0.65);
  --bg-table-wrap:transparent;
  --border-table-wrap:rgba(147,147,255,0.12);
  --bg-thead:#2a2748;
  --border-th:rgba(147,147,255,0.2);
  --color-th:#aaaaff;
  --color-td:rgba(255,255,255,0.88);
  --border-td:rgba(147,147,255,0.12);
  --bg-row-hover:rgba(77,77,255,0.1);
  --color-nome:#fff;
  --color-contact:#fff;
  --color-email:#aaaaff;
  --color-deadline:rgba(255,255,255,0.62);
  --color-passos:rgba(255,255,255,0.62);
  --color-icon-btn:#aaaaff;
  --bg-icon-btn-hover:rgba(77,77,255,0.22);
  --color-icon-btn-hover:#C3C4FD;
  --color-empty:rgba(180,180,255,0.72);
  --bg-input:#302d52;
  --border-input:rgba(147,147,255,0.3);
  --color-input:#d0d0ff;
  --color-placeholder:rgba(180,180,255,0.45);
  --bg-select-opt:#2e2b50;
  --bg-merchant-row:rgba(35,32,60,0.5);
  --border-merchant-row:rgba(147,147,255,0.08);
  --color-merchant-td:rgba(255,255,255,0.72);
  --color-merchant-line:rgba(147,147,255,0.35);
  --divider:rgba(147,147,255,0.2);
  --bg-modal-overlay:rgba(20,18,38,0.78);
  --bg-modal:#2a2748;
  --border-modal:rgba(147,147,255,0.18);
  --bg-field-input:#302d52;
  --border-field-input:rgba(100,95,150,0.7);
  --color-field-input:#d0d0ff;
  --color-field-ph:rgba(180,180,255,0.55);
  --bg-field-select-opt:#2e2b50;
  --color-modal-title:#fff;
  --color-cancel:#aaaaff;
  --border-cancel:rgba(147,147,255,0.28);
  --bg-cancel-hover:rgba(147,147,255,0.12);
  --color-mval:#fff;
}

body.light{
  --bg-body-color:#EEF0FF;
  --bg-body:radial-gradient(60% 70% at 10% 80%,rgba(72,73,251,0.18) 0%,rgba(37,80,190,0.1) 30%,rgba(238,240,255,0) 65%),#EEF0FF;
  --bg-pw-gate:radial-gradient(60% 70% at 10% 80%,rgba(72,73,251,0.18) 0%,rgba(37,80,190,0.1) 30%,rgba(238,240,255,0) 65%),#EEF0FF;
  --bg-pw-box:rgba(255,255,255,0.92);
  --bg-pw-input:rgba(238,240,255,0.8);
  --pw-title:#1A1A3E; --pw-sub:#6060A8;
  --bg-dash:rgba(255,255,255,0.82);
  --bg-metric:#fff;
  --border-metric:rgba(90,90,180,0.14);
  --color-label:#6060A8;
  --color-title:#1A1A3E;
  --color-sub:rgba(26,26,62,0.62);
  --bg-toggle:rgba(220,220,250,0.6);
  --border-toggle:rgba(100,100,200,0.2);
  --color-toggle-inactive:#7070B8;
  --color-toggle-hover:var(--color-accent-dark);
  --bg-tabs:rgba(220,220,250,0.5);
  --border-tabs:rgba(100,100,200,0.2);
  --color-tab-inactive:#6060A8;
  --bg-table-wrap:#fff;
  --border-table-wrap:rgba(100,100,200,0.12);
  --bg-thead:#F3F3FC;
  --border-th:rgba(100,100,200,0.12);
  --color-th:#6060A8;
  --color-td:rgba(26,26,62,0.75);
  --border-td:rgba(100,100,200,0.09);
  --bg-row-hover:rgba(77,77,255,0.04);
  --color-nome:#1A1A3E;
  --color-contact:#1A1A3E;
  --color-email:#5050A0;
  --color-deadline:rgba(26,26,62,0.5);
  --color-passos:rgba(26,26,62,0.5);
  --color-icon-btn:#7070B8;
  --bg-icon-btn-hover:rgba(77,77,255,0.1);
  --color-icon-btn-hover:var(--color-accent-dark);
  --color-empty:rgba(100,100,200,0.72);
  --bg-input:#fff;
  --border-input:rgba(100,100,200,0.3);
  --color-input:#2A2A60;
  --color-placeholder:rgba(100,100,200,0.5);
  --bg-select-opt:#fff;
  --bg-merchant-row:rgba(240,240,255,0.7);
  --border-merchant-row:rgba(100,100,200,0.07);
  --color-merchant-td:rgba(26,26,62,0.6);
  --color-merchant-line:rgba(100,100,200,0.35);
  --divider:rgba(100,100,200,0.14);
  --bg-modal-overlay:rgba(26,26,62,0.55);
  --bg-modal:#fff;
  --border-modal:rgba(100,100,200,0.14);
  --bg-field-input:#F3F3FC;
  --border-field-input:rgba(100,100,200,0.25);
  --color-field-input:#2A2A60;
  --color-field-ph:rgba(100,100,200,0.5);
  --bg-field-select-opt:#fff;
  --color-modal-title:#1A1A3E;
  --color-cancel:#6060A8;
  --border-cancel:rgba(100,100,200,0.3);
  --bg-cancel-hover:rgba(100,100,200,0.08);
  --color-mval:#1A1A3E;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Montserrat',sans-serif;height:100vh;overflow:hidden;padding:0;background:var(--bg-body);transition:background .3s;box-sizing:border-box;}

/* PASSWORD GATE — always dark, independent of theme */
#pw-gate{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:radial-gradient(60% 80% at 12% 75%,var(--color-accent) 0%,var(--color-accent-dark) 22%,rgba(22,15,41,0) 60%),#160f29;}
#pw-box{background:rgba(21,15,41,0.75);border:0.5px solid var(--color-accent-muted);border-radius:16px;padding:2.5rem 2.25rem;width:340px;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;gap:1.25rem;}
#pw-logo{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 12px rgba(77,77,255,0.5));}
/* Aqui os dois são texto no mesmo tamanho — o alinhamento é o do próprio
   fluxo, e "One" só precisa herdar o corpo. */
#pw-title{font-size:22px;font-weight:700;color:#fff;letter-spacing:-0.01em;
  display:flex;align-items:baseline;gap:8px;}
#pw-title .brand-one{font-size:inherit;letter-spacing:inherit;}
#pw-sub{font-size:11px;color:rgba(147,147,255,0.7);text-align:center;}
#pw-err{font-size:11px;color:var(--color-danger-light);display:none;text-align:center;line-height:1.5;}
#pw-google-btn{width:100%;font-size:13px;font-family:'Montserrat',sans-serif;font-weight:600;padding:11px 16px;border-radius:var(--radius-btn);border:0.5px solid var(--color-accent-muted);background:#fff;color:#3c4043;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:box-shadow .2s,opacity .2s;}
#pw-google-btn:hover:not(:disabled){box-shadow:0 2px 12px rgba(0,0,0,0.18);}
#pw-google-btn:disabled{opacity:0.55;cursor:not-allowed;}
#pw-google-btn svg{flex-shrink:0;}
.pw-spin{width:14px;height:14px;border:2px solid rgba(60,64,67,0.25);border-top-color:#4285F4;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.logout-btn{font-size:11px;font-family:'Montserrat',sans-serif;font-weight:600;padding:5px 12px;border-radius:var(--radius-btn);border:0.5px solid var(--border-cancel);background:none;color:var(--color-cancel);cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .2s;}
.logout-btn:hover{background:var(--bg-cancel-hover);}
.logout-btn i{font-size:13px;}
#app{display:none;}

/* DASH — sidebar layout */
.dash{width:100%;height:100vh;border-radius:0;background:var(--bg-dash);backdrop-filter:blur(2px);transition:background .3s;display:flex;overflow:hidden;}

/* SIDEBAR */
.sidebar{width:260px;flex-shrink:0;display:flex;flex-direction:column;padding:1.75rem 1rem 1.75rem 1.5rem;border-right:0.5px solid var(--divider);gap:0;height:100%;overflow-y:auto;box-sizing:border-box;transition:width .22s ease,padding .22s ease;}
.sidebar.collapsed{width:56px;padding:1.75rem 8px;overflow:hidden;}
.sidebar.collapsed .sidebar-logo .brand-logo svg{display:none;}
.sidebar.collapsed .sidebar-item span,.sidebar.collapsed .sidebar-bottom-label,.sidebar.collapsed [data-i18n]:not(.sidebar-toggle-btn){opacity:0;width:0;overflow:hidden;pointer-events:none;}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:9px 0;}
.sidebar.collapsed .sidebar-item i{margin:0;}
.sidebar-collapse-item{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 14px;border:none;background:transparent;width:100%;text-align:left;border-radius:9px;cursor:pointer;color:var(--color-tab-inactive);font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;opacity:.5;transition:opacity .15s,background .15s;}
.sidebar-collapse-item:hover{opacity:1;background:rgba(77,77,255,0.08);}
.sidebar-collapse-item i{font-size:15px;}
.sidebar.collapsed .sidebar-collapse-item{justify-content:center;padding:8px 0;}
.sidebar.collapsed .sidebar-collapse-lbl{display:none;}
.sidebar .sidebar-bottom{margin-top:8px;}
.sidebar.collapsed .sidebar-logo{display:flex;justify-content:center;}
.sidebar-logo{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:0.5px solid var(--divider);}
/* ── Lockup "Transfero One" ────────────────────────────────────────────
   O wordmark é SVG (viewBox 674,25 x 104,02 — 6,482x mais largo que alto) e
   "One" é texto. Pra os dois parecerem a mesma palavra, três amarrações:

   1. `flex:none` no SVG. Sem isso o flex ESPREME a caixa (136px onde o
      natural são 155,6px) e o `preserveAspectRatio` letterboxa: o wordmark
      renderiza a ~21px dentro de uma caixa de 24px, menor que o pedido e
      desalinhado do texto ao lado. Era o que fazia a proporção sair errada.
   2. `align-items:baseline`. A baseline de um SVG em flex é a borda INFERIOR
      da caixa, e a baseline do wordmark está a 103,35 de 104,02 do viewBox —
      0,6% do fim. Ou seja: alinhar pela base encaixa as duas baselines
      sozinho, sem número mágico que quebra se a altura mudar.
   3. Tamanho derivado, não chutado. Cap-height do wordmark = 77,61/104,02 da
      altura renderizada; cap-height do Montserrat 700 = 0,7118 do font-size.
      Com 22px de logo: 22 x 0,7461 = 16,41px de cap → 16,41/0,7118 = 23px.

   Por que 22px e não os 28px originais: "One" proporcional mede 2,17em
   (~50px) e a sidebar só tem 220px úteis. A 28px o par daria 253px e o
   "One" ficaria cortado. A 22px dá ~200px. Mexer numa das duas medidas
   exige refazer esta conta. */
/* 23px: o lockup mede h x 9,117 = 210px e a sidebar de 260px tem 220 úteis.
   A 24px sobrariam 1,6px — apertado demais pra arredondamento de fonte. */
.sidebar-logo{--brand-h:23px;}
/* Tudo derivado de --brand-h, pra o lockup caber em qualquer largura de
   sidebar sem recalcular três números à mão:
     largura total = --brand-h x 9,117
       6,482  wordmark (proporção do viewBox)
     + 0,360  respiro
     + 2,275  "One" (2,17em x 1,0482)
   1,0482 = 0,7461 / 0,7118 — a razão entre o cap-height do wordmark e o do
   Montserrat 700, que é o que faz as duas palavras terem a mesma altura. */
.sidebar-logo .brand-logo{display:flex;align-items:baseline;gap:calc(var(--brand-h) * .36);}
.sidebar-logo .brand-logo svg{height:var(--brand-h);width:auto;flex:none;}
.brand-one{font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:calc(var(--brand-h) * 1.0482);
  line-height:1;letter-spacing:-0.005em;color:var(--color-accent);white-space:nowrap;}
/* Degradê do wordmark oficial (transfero-one-wordmark.svg): horizontal, três
   paradas, com a do meio aos 55% — é ela que segura o azul médio na barriga
   do "n" e impede que o gradiente vire uma passagem lisa de ciano a roxo.

   ⚠️ O `color` acima NÃO é redundante: é o que aparece se o recorte no texto
   falhar. Sem ele, `text-fill-color:transparent` deixaria "One" INVISÍVEL —
   por isso o degradê vem dentro de @supports, e não no bloco de cima.

   Vale nos dois lugares que usam a classe (sidebar e tela de login) e nos dois
   temas: as duas superfícies são escuras, então um degradê só serve aos dois —
   mesma razão pela qual a cor chapada anterior também servia. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-one{
    background-image:linear-gradient(90deg,#63C7FF 0%,#4F7CFF 55%,#6A5CFF 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;}
}
/* Recolhida, o wordmark some e sobra o símbolo — "One" sozinho não é marca. */
.sidebar.collapsed .brand-one{display:none;}
.logo-sym{fill:#fff;}
.logo-txt{fill:#fff;}
body.light .logo-sym{fill:#160f29;}
body.light .logo-txt{fill:#160f29;}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;cursor:pointer;color:var(--color-tab-inactive);font-size:13px;font-weight:600;font-family:'Montserrat',sans-serif;border:none;background:transparent;width:100%;text-align:left;transition:all .2s;letter-spacing:0.02em;}
.sidebar-item:hover{background:rgba(77,77,255,0.1);color:var(--color-toggle-hover);}
.sidebar-item.active{background:rgba(77,77,255,0.15);color:var(--color-toggle-hover);border-left:3px solid var(--color-accent);padding-left:11px;}
.sidebar-item i{font-size:16px;}
.sidebar{--color-tab-inactive:rgba(235,235,255,0.97);}

/* No modo claro, a barra lateral permanece escura para se destacar do
   conteúdo — reaplica as variáveis do tema escuro só dentro do escopo do
   .sidebar, então todo item filho (tabs, ícones, logout, collapse) herda
   contraste correto automaticamente, sem precisar sobrescrever regra por regra. */
body.light .sidebar{
  --color-title:#fff;
  --color-toggle-hover:#C3C4FD;
  --color-cancel:#aaaaff;
  --border-cancel:rgba(147,147,255,0.28);
  --bg-cancel-hover:rgba(147,147,255,0.12);
  --divider:rgba(147,147,255,0.2);
  background:#1f1d35;
  border-right:0.5px solid rgba(147,147,255,0.15);
}
body.light .sidebar .logo-sym,body.light .sidebar .logo-txt{fill:#fff;}

/* ── Modo Viewer: esconde toda ação de escrita da interface ──
   Cobre os pontos de entrada conhecidos (botões de adicionar/editar/
   excluir/salvar/converter/upload/promover, lápis inline, drag-and-drop)
   por classe + por padrão de nome de função no onclick, já que muitas
   dessas ações reaproveitam a mesma classe de botão em telas diferentes. */
body.viewer-mode .add-btn,
body.viewer-mode .adm-add-btn,
body.viewer-mode .mig-merch-add-btn,
/* Viewer não importa campanha (o RLS da 059 já barra no banco; isto é só
   pra não oferecer um botão que vai falhar) */
body.viewer-mode [onclick^="mkcOpenNew"],
body.viewer-mode [onclick^="mkcOpenEditCampanha"],
body.viewer-mode .ld-add-col,
body.viewer-mode .ob-doc-upload-btn,
body.viewer-mode .btn-save,
body.viewer-mode .ld-det-edit,
body.viewer-mode .mig-edit-btn,
body.viewer-mode .det-edit-btn,
body.viewer-mode .ld-card-edit,
body.viewer-mode .ob-card-edit,
body.viewer-mode .kanban-card-edit,
body.viewer-mode .ld-btn-del,
body.viewer-mode #ob-delete-btn,
body.viewer-mode .card-outcome-btn,
body.viewer-mode .ld-det-outcome-btn,
body.viewer-mode .ld-col-add,
body.viewer-mode .ob-col-add,
body.viewer-mode .drag-handle,
body.viewer-mode #ld-btn-convert,
body.viewer-mode .ld-notes-compose,
body.viewer-mode .adm-actions,
body.viewer-mode [onclick*="Delete"],
body.viewer-mode [onclick*="Remove"],
body.viewer-mode [onclick^="rem("],
body.viewer-mode [onclick*="Save"],
body.viewer-mode [onclick*="Convert"],
body.viewer-mode [onclick*="Upload"],
body.viewer-mode [onclick*="Add"],
body.viewer-mode [onclick*="Promote"],
body.viewer-mode [onclick*="Demote"],
body.viewer-mode [onclick*="admToggle"],
body.viewer-mode [onclick*="admSetViewer"],
body.viewer-mode [onclick*="admUnsetViewer"],
body.viewer-mode [onclick*="_colDotEdit"],
body.viewer-mode [onclick*="_notesSend"],
body.viewer-mode [onclick*="_notesStartEdit"],
body.viewer-mode [onclick*="_migCardStartEdit"],
body.viewer-mode [onclick*="_detStartEdit"],
body.viewer-mode [onclick*="openMigEdit"],
body.viewer-mode [onclick*="openMigMerchModal"],
body.viewer-mode [onclick*="openMigAdd"],
body.viewer-mode [onclick*="ldOpenModal"],
body.viewer-mode [onclick*="obOpenModal"],
/* Reativar (tabela de Não-qualificados/Lost/Stand-by) é escrita: devolve o
   lead/card ao funil. Escondido pro viewer igual aos botões NQ/Lost/Stand-by
   — antes aparecia e o clique só falhava na policy do banco (migration 052). */
body.viewer-mode [onclick*="ldOpenReactivateModal"],
body.viewer-mode [onclick*="ldConfirmReactivate"],
body.viewer-mode [onclick*="obReactivate"],
body.viewer-mode [onclick*="admOpenModal"],
body.viewer-mode [onclick*="admOpenTabsModal"],
body.viewer-mode [onclick*="admOpenEditModal"],
body.viewer-mode [onclick*="admBulkOpenTabsModal"],
body.viewer-mode [onclick*="admRowMenu"],
body.viewer-mode .ob-card-email,
body.viewer-mode [onclick*="gmailOpenComposeModal"],
body.viewer-mode [onclick*="gmailConnect"],
body.viewer-mode [onclick*="gmailDisconnect"],
/* Health Score (aba Parceiros): sincronizar e marcar em tratamento */
body.viewer-mode .hs-treat-btn,
body.viewer-mode [onclick*="hsSyncNow"],
body.viewer-mode [onclick*="hsTreat"],
/* Financeiro: definir/salvar meta mensal (finSet*Type são só troca de
   visualização de gráfico — não entram aqui) */
body.viewer-mode [onclick*="finOpenTargetModal"],
body.viewer-mode [onclick*="finSaveTarget"],
/* Marketing — cadências/inscrições/templates/eventos (mktOpenMsgModal é só
   visualização de mensagem, fica de fora) */
body.viewer-mode [onclick*="mktOpenCadModal"],
body.viewer-mode [onclick*="mktOpenInscModal"],
body.viewer-mode [onclick*="mktOpenTplModal"],
body.viewer-mode [onclick*="mktOpenEvtModal"],
body.viewer-mode [onclick*="mktToggle"],
body.viewer-mode [onclick*="mktConfirm"],
body.viewer-mode [onclick*="mktDelete"],
body.viewer-mode [onclick*="mktPause"],
body.viewer-mode [onclick*="mktResume"],
body.viewer-mode [onclick*="mktSelectLeadForInsc"],
body.viewer-mode [onclick*="mktSave"],
body.viewer-mode [onclick*="mktAddEtapa"],
/* Motor de automações (ar2OpenDrawer é só abrir o detalhe — visualização) */
body.viewer-mode [onclick*="autoOpenRuleModal"],
body.viewer-mode [onclick*="autoToggleRule"],
body.viewer-mode [onclick*="autoSaveRule"],
body.viewer-mode [onclick*="autoAddCondRow"],
body.viewer-mode [onclick*="autoAddActRow"],
body.viewer-mode [onclick*="autoRemoveCondRow"],
body.viewer-mode [onclick*="autoRemoveActRow"],
body.viewer-mode [onclick*="ar2NewForStage"],
body.viewer-mode [onclick*="ar2EditFromDrawer"],
body.viewer-mode [onclick*="ar2ToggleFromDrawer"],
body.viewer-mode [onclick*="ar2DuplicateFromDrawer"],
body.viewer-mode [onclick*="ar2DeleteFromDrawer"]{display:none!important;}
body.viewer-mode [draggable="true"]{-webkit-user-drag:none;user-select:none;}
/* Nome da raia (Leads) continua VISÍVEL pro viewer — só perde a edição por
   clique. Antes era escondido junto com o botão de editar, sumindo o texto. */
body.viewer-mode #screen-leads .ld-col-name{pointer-events:none;cursor:default;}
body.viewer-mode #screen-leads .ld-col-name:hover{background:none;}

/* MAIN CONTENT */
.main-content{flex:1;min-width:0;padding:1.75rem 2rem 2.5rem;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}
.main-content>.screen{display:none;}
.main-content>.screen.active{display:flex;flex-direction:column;flex:1;min-height:0;animation:screenIn .18s ease both;}
#screen-leads.active,#screen-onboarding.active{overflow:hidden;}
.main-content>.screen.active:not(#screen-leads):not(#screen-onboarding):not(#screen-mkt){flex:none;width:100%;min-height:100%;}
/* Marketing cresce como as demais telas, EXCETO com o detalhe de campanha
   aberto: aí o topo (hero + métricas + barra de ações) fica travado e só a
   lista de contatos rola, mesmo padrão de #screen-leads/#screen-onboarding. */
.main-content>#screen-mkt.active{flex:none;width:100%;min-height:100%;}
body.mkc-detail-open .main-content>#screen-mkt.active{flex:1;min-height:0;overflow:hidden;}
body.mkc-detail-open #mkt-subtab-campanhas{flex:1;min-height:0;}
body.mkc-detail-open #mkc-detail-view{flex:1;min-height:0;}
body.mkc-detail-open #mkc-detail-view>.mkc-hero,
body.mkc-detail-open #mkc-detail-view>.mkc-metrics,
body.mkc-detail-open #mkc-detail-view>.mkc-actionbar{flex-shrink:0;}
/* Quem rola a lista de contatos é o .mkc-tablewrap, nos DOIS eixos — e não o
   #mkc-table-wrap. Parece detalhe, mas é o que permite o thead sticky: o
   sticky se ancora no contêiner de rolagem mais próximo, e o .mkc-tablewrap
   já era um (por causa do overflow-x). Rolando o pai, o cabeçalho ia junto.
   O #mkc-table-wrap vira só a coluna que segura tabela + rodapé de contagem. */
body.mkc-detail-open #mkc-table-wrap{flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;}
body.mkc-detail-open #mkc-table-wrap>.mkc-tablewrap{flex:1;min-height:0;overflow:auto;}
body.mkc-detail-open #mkc-table-wrap>.mkc-tablefoot{flex-shrink:0;}
/* A MESMA tela de campanha rodando dentro de Leads (botão ABM). #screen-leads
   é overflow:hidden por causa do board, então aqui quem rola é o contêiner —
   sem isto a lista de campanhas ficaria cortada na altura da janela. */
#ld-abm{flex:1;min-height:0;overflow-y:auto;}
body.mkc-detail-open #ld-abm{overflow:hidden;}   /* com o detalhe aberto, quem rola é a tabela */
body.mkc-detail-open #ldabm-detail-view{flex:1;min-height:0;}
body.mkc-detail-open #ldabm-detail-view>.mkc-hero,
body.mkc-detail-open #ldabm-detail-view>.mkc-metrics,
body.mkc-detail-open #ldabm-detail-view>.mkc-actionbar{flex-shrink:0;}
/* No mobile, travar o topo comeria a tela: volta a rolar a página inteira. */
@media(max-width:820px){
  body.mkc-detail-open .main-content>#screen-mkt.active{flex:none;min-height:100%;overflow:visible;}
  body.mkc-detail-open #mkt-subtab-campanhas,
  body.mkc-detail-open #mkc-detail-view,
  body.mkc-detail-open #mkc-table-wrap{flex:none;min-height:0;overflow:visible;}
  /* volta a ser só o scroll horizontal: sem caixa de altura fixa, a lista
     cresce e quem rola é a página (o thead some junto, de propósito) */
  body.mkc-detail-open #mkc-table-wrap>.mkc-tablewrap{flex:none;min-height:0;
    overflow:visible;overflow-x:auto;}
}
@keyframes screenIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.main-content>.screen.active{animation:none;}}
/* números tabulares em todo valor numérico */
.fin-kpi-value,.fin-kpi-delta,.mval,.hs-kpi-val,.hs-score-num,td{font-variant-numeric:tabular-nums;}
/* live indicator */
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--color-success);text-transform:uppercase;letter-spacing:.08em;transition:transform .2s;}
.live-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--color-success);animation:livePulse 2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.5);}50%{opacity:.6;box-shadow:0 0 0 5px rgba(34,197,94,0);}}
@keyframes rowFlash{from{background:rgba(77,77,255,.18);}to{background:transparent;}}
.row-flash{animation:rowFlash 1.2s ease both;}
/* ═══════════════════ HOME (redesign) ═══════════════════ */
.home2-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.home2-greet{font-size:22px;font-weight:800;color:var(--color-title);letter-spacing:-.5px;}
.home2-date{font-size:12.5px;color:var(--color-sub);margin-top:3px;}
.home2-hdr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* Busca da Home: campo de verdade, com o resultado aparecendo logo abaixo.
   Sem modal — quem está na Home quer localizar algo, não abrir uma camada
   por cima do que estava olhando. Mesma pílula das buscas das abas. */
.home2-search-wrap{position:relative;display:inline-flex;align-items:center;min-width:340px;max-width:100%;}
.home2-search-wrap>i{position:absolute;left:15px;font-size:16px;color:var(--color-tab-inactive);pointer-events:none;}
.home2-search{width:100%;box-sizing:border-box;background:var(--bg-field-input);
  border:0.5px solid var(--border-field-input);border-radius:20px;padding:9px 34px 9px 40px;
  font-family:'Montserrat',sans-serif;font-size:13px;color:var(--color-field-input);
  transition:border-color .15s;}
.home2-search::placeholder{color:var(--color-tab-inactive);}
.home2-search:focus{outline:none;border-color:var(--color-accent);}
.home2-search-clear{display:none;position:absolute;right:10px;width:20px;height:20px;border:none;
  background:none;color:var(--color-tab-inactive);cursor:pointer;align-items:center;
  justify-content:center;border-radius:50%;font-size:13px;}
.home2-search-clear:hover{background:rgba(217,79,79,.12);color:var(--color-danger-light);}

.home2-search-res{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:800;
  background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);padding:6px;max-height:min(60vh,460px);overflow-y:auto;}
.home2-search-res.open{display:block;}
.home2-search-sec{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--color-tab-inactive);padding:8px 10px 4px;}
.home2-search-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;transition:background .12s;}
.home2-search-item:hover{background:var(--color-accent-bg);}
.home2-search-item>i{font-size:15px;color:var(--color-accent-light);flex-shrink:0;}
.home2-search-nome{font-size:13px;color:var(--color-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home2-search-sub{font-size:11px;color:var(--color-sub);white-space:nowrap;}
.home2-search-empty{display:flex;align-items:center;gap:8px;padding:14px 12px;font-size:12.5px;color:var(--color-sub);}
@media(max-width:640px){ .home2-search-wrap{min-width:0;flex:1;} }

.home2-btn{border-radius:9px;padding:9px 16px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.home2-btn-primary{background:var(--color-accent);border:none;color:#fff;}
.home2-btn-primary:hover{filter:brightness(1.08);}
.home2-btn-ghost{background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-label);}
.home2-btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent-light);}

.home2-toprow{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-bottom:16px;align-items:stretch;}
.home2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.home2-kpi{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.home2-kpi-lbl{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;flex-wrap:wrap;row-gap:4px;}
.home2-kpi-lbl>span:first-child{min-width:0;word-break:break-word;}
.home2-kpi-delta{font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;gap:2px;white-space:nowrap;flex-shrink:0;}
@media(max-width:420px){.home2-kpi-delta{white-space:normal;}}
.home2-kpi-delta.up{color:var(--color-success);}
.home2-kpi-delta.down{color:var(--color-danger);}
.home2-kpi-val{font-size:26px;font-weight:800;color:var(--color-title);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1;}
.home2-kpi-sub{font-size:11px;color:var(--color-tab-inactive);margin-top:4px;}
.home2-kpi-spark{margin-top:10px;height:36px;flex:1;display:flex;align-items:flex-end;}
.home2-kpi-spark svg{width:100%;height:100%;display:block;}

.home2-alerts-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;min-width:0;}
.home2-alerts-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.home2-alerts-title{font-size:10.5px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;}
.home2-alerts-more{font-size:11px;font-weight:600;color:var(--color-accent-light);cursor:pointer;background:none;border:none;font-family:'Montserrat',sans-serif;}
.home2-alerts-more:hover{text-decoration:underline;}
.home2-alerts-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;}
.home2-alert{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:10px;cursor:pointer;background:var(--home2-ac,var(--color-accent));background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 10%, transparent);transition:background .15s;}
.home2-alert:hover{background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 16%, transparent);}
.home2-alert-ic{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--home2-ac,var(--color-accent));margin-top:1px;}
.home2-alert-title{font-size:12.5px;font-weight:700;color:var(--color-title);line-height:1.35;}
.home2-alert-sub{font-size:11px;color:var(--color-sub);margin-top:2px;line-height:1.3;}
.home2-alert-chev{margin-left:auto;color:var(--color-tab-inactive);font-size:14px;flex-shrink:0;align-self:center;}
.home2-alerts-empty{padding:20px 0;text-align:center;color:var(--color-tab-inactive);font-size:12.5px;}

/* ── Pendências (o que está no nome de quem olha) ──────────────────────
   Faixa própria, largura cheia, entre os KPIs e o resto: é a única caixa da
   Home que pede AÇÃO de uma pessoa específica, e cada linha leva direto ao
   registro. Some inteira quando não há pendência (style inline no HTML). */
.home2-pendrow{margin-bottom:16px;}
/* margin-right:auto empurra só o botão pra direita — o contador precisa
   ficar colado no título, senão parece rótulo de outra coisa */
.home2-pend-n{margin-right:auto;font-size:10.5px;font-weight:800;color:var(--color-warning-dark);
  background:rgba(212,144,10,.16);border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums;}
.home2-pend-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;}
.home2-pend{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;cursor:pointer;
  min-width:0;background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 9%, transparent);transition:background .15s;}
.home2-pend:hover{background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 16%, transparent);}
.home2-pend:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.home2-pend-ic{width:24px;height:24px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--home2-ac,var(--color-accent));background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 14%, transparent);}
.home2-pend-txt{min-width:0;flex:1;}
/* truncar com ellipsis em vez de quebrar: nome de empresa longo não pode
   fazer uma linha ficar com o dobro da altura das vizinhas do grid */
.home2-pend-title{font-size:12.5px;font-weight:700;color:var(--color-title);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home2-pend-sub{font-size:11px;color:var(--color-sub);margin-top:2px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home2-pend-chev{color:var(--color-tab-inactive);font-size:14px;flex-shrink:0;}
.home2-pend-empty{padding:14px 0;text-align:center;color:var(--color-tab-inactive);font-size:12.5px;}

.home2-midrow{display:grid;grid-template-columns:0.85fr 1.15fr;gap:16px;margin-bottom:16px;}
.home2-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:18px 20px;min-width:0;}
.home2-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.home2-card-title{font-size:11px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;}
.home2-card-hint{font-size:9.5px;font-weight:700;color:var(--color-tab-inactive);text-transform:uppercase;letter-spacing:.06em;}

/* Funil da Home: mesma marcação do painel de Funil (.fnx-fn-*), só
   redimensionada — o card da Home é bem mais estreito que a tela cheia da
   aba Leads. Sem contêiner .fnx-funil de propósito: ele traz fundo, raio e
   sombra próprios, que dentro do card virariam cartão dentro de cartão. */
.home2-funil .fnx-fn-row{grid-template-columns:88px 1fr auto 38px;gap:10px;}
.home2-funil .fnx-fn-track{height:26px;}
.home2-funil .fnx-fn-n{font-size:17px;}
.home2-funil .fnx-fn-conn{padding-left:98px;gap:8px;}
.home2-funil-msg{color:var(--color-tab-inactive);font-size:12px;padding:8px 0;}
.home2-pl-total{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:0.5px solid var(--border-metric);font-size:12px;color:var(--color-sub);}
.home2-pl-total b{color:var(--color-title);font-size:14px;}

/* O card estica pra acompanhar a altura do vizinho na .home2-midrow (o
   funil, que é mais alto). Com altura FIXA no gráfico, a diferença virava
   espaço vazio embaixo do rodapé de meta. Agora o gráfico absorve a sobra:
   o card é coluna flex e o wrapper cresce, com 210px de piso pra ele nunca
   ficar espremido se o vizinho encolher. */
.home2-rev-card{display:flex;flex-direction:column;}
.home2-rev-chart-wrap{flex:1;min-height:210px;position:relative;}
.home2-rev-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:12px;border-top:0.5px solid var(--border-metric);font-size:11.5px;color:var(--color-sub);flex-wrap:wrap;}
.home2-rev-meta b{color:var(--color-title);}
.home2-rev-atg{display:flex;align-items:center;gap:8px;flex:1;min-width:160px;}
.home2-rev-atg-bar{flex:1;height:6px;border-radius:4px;background:var(--border-metric);overflow:hidden;max-width:180px;}
.home2-rev-atg-fill{height:100%;border-radius:4px;background:var(--color-success);}

.home2-bottomrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.home2-bottomrow .home2-card{display:flex;flex-direction:column;}
.home2-bottomrow .home2-card-footbtn{margin-top:auto;}
.home2-tp-row{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer;}
.home2-tp-rank{font-size:10px;font-weight:800;color:var(--color-tab-inactive);min-width:14px;}
.home2-tp-name{flex:1;font-size:12.5px;font-weight:600;color:var(--color-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home2-tp-name:hover{color:var(--color-title);}
.home2-tp-val{font-size:11.5px;font-weight:700;color:var(--color-success-dark);font-variant-numeric:tabular-nums;}
.home2-tp-bar{width:70px;height:6px;background:var(--border-metric);border-radius:3px;flex-shrink:0;overflow:hidden;}
.home2-tp-bar-fill{height:100%;border-radius:3px;background:var(--color-success-dark);}
.home2-card-footbtn{display:block;width:100%;text-align:center;margin-top:14px;padding:9px;border-radius:9px;background:var(--bg-dash);border:0.5px solid var(--border-metric);color:var(--color-label);font-size:12px;font-weight:700;cursor:pointer;font-family:'Montserrat',sans-serif;}
.home2-card-footbtn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}

.home2-hs-body{display:flex;align-items:center;gap:18px;}
.home2-hs-donut{position:relative;width:120px;height:120px;flex-shrink:0;}
.home2-hs-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.home2-hs-donut-val{font-size:24px;font-weight:800;color:var(--color-title);line-height:1;}
.home2-hs-donut-lbl{font-size:9px;font-weight:700;color:var(--color-tab-inactive);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.home2-hs-legend{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;}
.home2-hs-leg-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-sub);}
.home2-hs-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.home2-hs-leg-row b{margin-left:auto;color:var(--color-title);font-size:12.5px;}

.home2-act-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.home2-act-ic{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--home2-ac,var(--color-accent));background:color-mix(in srgb, var(--home2-ac,var(--color-accent)) 14%, transparent);}
.home2-act-name{font-weight:700;color:var(--color-sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.home2-act-desc{flex:1;color:var(--color-tab-inactive);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home2-act-time{font-size:10.5px;color:var(--color-tab-inactive);white-space:nowrap;flex-shrink:0;}

@media(max-width:1200px){
  .home2-toprow{grid-template-columns:1fr;}
  .home2-kpis{grid-template-columns:repeat(2,1fr);}
  .home2-midrow{grid-template-columns:1fr;}
  .home2-bottomrow{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .home2-kpis{grid-template-columns:1fr;}
  .home2-hdr-actions{width:100%;}
  .home2-btn{flex:1;justify-content:center;}
}
/* lost reasons bars */
/* concentração de receita */
.fin-conc-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;padding:6px 12px;border-radius:8px;margin-bottom:16px;border:0.5px solid var(--border-metric);background:var(--bg-metric);color:var(--color-sub);}
.fin-conc-badge.warn{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08);color:var(--color-warning);}
/* ── Partner 360 drawer ── */
.p360-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:9000;opacity:0;pointer-events:none;transition:opacity .2s;}
.p360-bg.open{opacity:1;pointer-events:auto;}
/* A sombra só existe com o painel ABERTO. Fechado, ele continua no fluxo
   (display:flex, empurrado pra fora por transform/right negativo) e a
   sombra, que projeta pra esquerda, atravessava a borda da tela: aparecia
   uma faixa cinza vertical na direita em TODAS as telas do dashboard. */
.p360{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:94vw;background:var(--bg-modal);border-left:0.5px solid var(--border-modal);z-index:9001;transform:translateX(100%);transition:transform .25s cubic-bezier(.32,.72,.35,1);display:flex;flex-direction:column;}
.p360.open{transform:none;box-shadow:-12px 0 40px rgba(0,0,0,.25);}
.p360-hdr{padding:20px 22px 16px;border-bottom:0.5px solid var(--divider);display:flex;align-items:flex-start;gap:12px;}
.p360-title{font-size:18px;font-weight:800;color:var(--color-title);letter-spacing:-.01em;line-height:1.2;flex:1;}
.p360-close{background:none;border:none;cursor:pointer;color:var(--color-tab-inactive);font-size:18px;padding:4px;border-radius:6px;}
.p360-close:hover{color:var(--color-title);background:rgba(77,77,255,.1);}
.p360-body{flex:1;overflow-y:auto;padding:18px 22px 28px;display:flex;flex-direction:column;gap:20px;}
.p360-sec-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-tab-inactive);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.p360-kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:12.5px;}
.p360-kv dt{color:var(--color-tab-inactive);font-weight:600;}
.p360-kv dd{color:var(--color-sub);margin:0;word-break:break-word;}
.p360-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.02em;}
.p360-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.p360-stat{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:10px;padding:12px 14px;}
.p360-stat-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-tab-inactive);margin-bottom:4px;}
.p360-stat-val{font-size:19px;font-weight:800;color:var(--color-title);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.p360-stat-sub{font-size:10px;color:var(--color-tab-inactive);margin-top:2px;}
.p360-lead-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:0.5px solid var(--border-metric);font-size:12px;cursor:pointer;}
.p360-lead-row:hover .p360-lead-name{color:var(--color-accent-light);}
.p360-lead-name{flex:1;font-weight:600;color:var(--color-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p360-empty{font-size:12px;color:var(--color-tab-inactive);padding:6px 0;}
.p360-link-name{cursor:pointer;}
.p360-link-name:hover{color:var(--color-accent-light);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:640px){.p360{width:100vw;max-width:100vw;}}
/* ── Onboarding board ── */
#screen-onboarding{padding:4px 0 0 4px;}
#ob-kanban{display:flex;flex-direction:column;flex:1;min-height:0;}
#screen-onboarding .ob-board{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;flex:1;align-items:stretch;scrollbar-width:thin;scrollbar-color:var(--border-metric) rgba(255,255,255,0.06);padding-bottom:6px;}
#screen-onboarding .ob-board::-webkit-scrollbar{height:6px;}
#screen-onboarding .ob-board::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:3px;}
#screen-onboarding .ob-board::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:3px;}
/* min-width:0 — sem isso o min-width:auto do flex item deixa o conteúdo de um
   card (nome longo) esticar a coluna além do flex-basis, e as raias ficam
   desiguais. Repetido em .ob-cards/.ob-card para o mínimo não propagar. */
.ob-col{flex:0 0 260px;min-width:0;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;display:flex;flex-direction:column;}
.ob-col.drag-over{border-color:var(--color-accent-light);background:rgba(147,147,255,0.07);}
/* Altura fixa (e não min-height): cada raia é um flex item independente, e
   com altura livre um nome de duas linhas deixava o header daquela raia
   mais alto que o das vizinhas — o topo do board ficava serrilhado. */
.ob-col-hdr{position:relative;overflow:hidden;padding:10px;display:flex;align-items:center;gap:5px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;height:54px;border-radius:11px 11px 0 0;background:color-mix(in srgb, var(--lane-color) 20%, var(--bg-metric));border-bottom-color:color-mix(in srgb, var(--lane-color) 35%, var(--border-metric));}
body.light .ob-col-hdr{background:color-mix(in srgb, var(--lane-color) 24%, #fff);border-bottom-color:transparent;}
body.light .ob-col{background:#fff;border-color:transparent;}
body:not(.light) .ob-col-hdr{background:linear-gradient(135deg, color-mix(in srgb, var(--lane-color) 32%, #14121f), color-mix(in srgb, var(--lane-color) 6%, #0d0c14));border:1px solid color-mix(in srgb, var(--lane-color) 55%, transparent);border-bottom:1px solid color-mix(in srgb, var(--lane-color) 55%, transparent);}
.ob-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;cursor:pointer;}
/* Cabeçalho de raia: ladrilho de ícone à esquerda, nome, e o selo da área
   responsável à direita. O ladrilho herdou o clique que era da bolinha —
   é por ele que se edita a cor da raia. */
/* A mistura com branco/preto é forte porque a cor da raia PURA sobre o
   próprio fundo tingido dela não passa em AA — as raias âmbar e roxa
   ficavam em ~2:1. Mantém-se o matiz (dá pra dizer de que raia é), com
   luminosidade suficiente pra ler. */
/* Os seletores cobrem os DOIS boards (Onboarding e Leads) — o header é o
   mesmo componente nas duas telas, e duplicar as regras garantiria que uma
   fosse ajustada sem a outra. */
.ob-col-ico,#screen-leads .ld-col-ico{width:23px;height:23px;border-radius:7px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  color:color-mix(in srgb, var(--lane-color) 30%, #fff);
  background:color-mix(in srgb, var(--lane-color) 24%, transparent);
  border:1px solid color-mix(in srgb, var(--lane-color) 34%, transparent);}
body.light .ob-col-ico,body.light #screen-leads .ld-col-ico{color:color-mix(in srgb, var(--lane-color) 42%, #000);
  background:color-mix(in srgb, var(--lane-color) 15%, #fff);
  border-color:color-mix(in srgb, var(--lane-color) 26%, #fff);}
/* Selo tingido pela cor da raia (e não por uma cor fixa da área): é assim
   no mockup — o header inteiro fala numa cor só. */
/* O selo ENCOLHE antes do nome da raia (min-width:min-content acima garante
   que o nome nunca desce abaixo da sua palavra mais longa). Com os cinco
   rótulos de hoje — CS, Compliance, Legal, Sales, FinOps — isto nunca chega a
   acontecer: é rede para o dia em que `onboarding_columns.area` receber um
   rótulo mais longo, e aí quem corta é o selo, não a palavra. */
.ob-col-area,#screen-leads .ld-col-area{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-size:7.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;line-height:1;white-space:nowrap;padding:4px 5px;border-radius:999px;
  color:color-mix(in srgb, var(--lane-color) 26%, #fff);
  background:color-mix(in srgb, var(--lane-color) 26%, transparent);}
body.light .ob-col-area,body.light #screen-leads .ld-col-area{color:color-mix(in srgb, var(--lane-color) 38%, #000);
  background:color-mix(in srgb, var(--lane-color) 17%, #fff);}
/* No máximo 2 linhas, e NUNCA no meio de uma palavra.
   `word-break:normal` sozinho não bastava: `overflow-wrap:break-word` ainda
   parte a palavra quando ela sozinha não cabe na linha, e era isso que
   produzia "DOCUMENTAÇÃ / O COMPLETA". Medido: o nome recebia 84,9px e
   "DOCUMENTAÇÃO" a 10px/700 pede 95px.
   Os 10px vieram do respiro do próprio cabeçalho (padding 12→10, gap 7→5),
   que é exatamente o que o header de Leads já tinha feito pelo mesmo motivo
   ("AGUARDAN/DO") — os dois quadros voltam a usar os mesmos números.
   ⚠️ Palavra ainda mais longa que o espaço agora é CORTADA, não partida: é a
   troca pedida, e o nome inteiro continua no `title`.
   `letter-spacing:0` (era .02em) devolve ~2,4px em "DOCUMENTAÇÃO" — no tema
   ESCURO o cabeçalho ganha 1px de borda de cada lado, e sem esses 2,4px o
   selo de área passava a cortar ("COMPLIAN…") só nesse tema. */
.ob-col-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0;color:var(--color-sub);line-height:1.3;flex:1;min-width:min-content;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:normal;}
/* O "+" voltou pro fluxo, logo depois do nome: fora dele (absoluto, à
   direita) ele entrava por cima do selo da área no hover, e selo é
   informação de leitura — não deve piscar por causa de um botão. Custa
   ~18px de largura do nome, que o clamp de 2 linhas absorve. */
.ob-col-add,#screen-leads .ld-col-add{background:none;border:none;cursor:pointer;padding:0;margin:0 -1px;border-radius:5px;
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;flex-shrink:0;
  color:color-mix(in srgb, var(--lane-color) 30%, #fff);transition:background .15s,color .15s;}
body.light .ob-col-add,body.light #screen-leads .ld-col-add{color:color-mix(in srgb, var(--lane-color) 45%, #000);}
.ob-col-add:hover,#screen-leads .ld-col-add:hover{color:var(--color-accent-light);background:color-mix(in srgb, var(--lane-color) 26%, transparent);}
.ob-col-add:focus-visible,#screen-leads .ld-col-add:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;}
/* Nenhum dos dois quadros tem mais controle fora do fluxo: com a alça de
   reordenar raia removida dos dois, o header não sobrepõe nada e o selo da
   área e o total em R$ ficam visíveis o tempo todo, inclusive no hover. */
/* scrollbar-gutter:stable reserva o espaço da barra mesmo sem ela, senão as
   colunas cheias renderizam cards ~11px mais estreitos que as vazias */
.ob-cards{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;scrollbar-gutter:stable;}
.ob-cards::-webkit-scrollbar{width:3px;}
.ob-cards::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:2px;}
.ob-card{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:10px;padding:12px 14px;cursor:grab;transition:box-shadow .15s,transform .12s,border-color .15s;position:relative;min-width:0;}
.ob-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);border-color:var(--color-accent-border);}
body.light .ob-card{border-color:rgba(90,90,180,.08);box-shadow:0 1px 2px rgba(30,30,90,.05),0 3px 10px rgba(30,30,90,.06);}
body.light .ob-card:hover{transform:translateY(-1px);border-color:rgba(90,90,180,.12);box-shadow:0 2px 4px rgba(30,30,90,.06),0 8px 20px rgba(30,30,90,.10);}
.ob-card.dragging{opacity:.45;transform:scale(.97);cursor:grabbing;}
.ob-card-name{font-size:14px;font-weight:700;color:var(--color-title);line-height:1.3;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-card-owner{font-size:10px;color:var(--color-tab-inactive);margin-top:3px;display:flex;align-items:center;gap:3px;min-width:0;}
.ob-card-owner i{flex-shrink:0;}
/* text-overflow não age em texto solto dentro de flex — precisa do span */
.ob-card-owner>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-card-age{font-size:10px;color:var(--color-tab-inactive);margin-top:5px;}
/* Dias na raia — mesmo badge em Leads e Onboarding (regra 5: um conceito, uma cor) */
.raia-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;line-height:1;padding:3px 7px;border-radius:10px;white-space:nowrap;background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-sub);}
body.light .raia-badge{background:#F2F3FA;border-color:transparent;}
.raia-badge i{font-size:10px;}
.raia-badge.warn{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.38);color:#fbbf24;}
.raia-badge.over{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.38);color:var(--color-danger);}
.ob-phase-strip{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:10px;color:var(--color-tab-inactive);font-weight:600;}
#screen-onboarding .ld-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;flex-shrink:0;}
#screen-onboarding .ld-search{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:240px;}
#screen-onboarding .ld-search::placeholder{color:var(--color-tab-inactive);}
.ob-phase-strip span{display:inline-flex;align-items:center;gap:5px;}
.ob-phase-strip i{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* TOP BAR */
.top-bar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:12px;}
h1.top-title{font-size:24px;font-weight:300;color:var(--color-title);letter-spacing:-0.01em;margin:0;}
.top-title strong{font-weight:700;}
.top-sub{font-size:13px;color:var(--color-sub);margin-top:2px;}
.top-bar-right{display:flex;align-items:center;gap:8px;}

/* THEME TOGGLE */
.theme-btn{width:32px;height:32px;border-radius:8px;border:0.5px solid var(--border-toggle);background:var(--bg-toggle);color:var(--color-toggle-inactive);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all var(--duration-normal);}
.theme-btn:hover{color:var(--color-toggle-hover);border-color:var(--color-accent);}
/* TOP BAR ICON BUTTONS */
.topbar-icon-btn{background:transparent;border:none;cursor:pointer;color:var(--color-label);font-size:16px;padding:6px 8px;border-radius:6px;display:flex;align-items:center;transition:color var(--duration-fast);min-width:32px;min-height:32px;justify-content:center;}
.topbar-icon-btn:hover{color:var(--color-title);}
.density-group{display:flex;gap:4px;align-items:center;}
.notif-clear-btn{background:transparent;border:none;cursor:pointer;color:var(--color-label);font-size:11px;font-family:'Montserrat',sans-serif;transition:color var(--duration-fast);}
.notif-clear-btn:hover{color:var(--color-title);}

/* LANG TOGGLE */
.lang-toggle{display:flex;gap:3px;background:var(--bg-toggle);border:0.5px solid var(--border-toggle);border-radius:8px;padding:3px;}
.lang-btn{font-size:10px;font-weight:700;font-family:'Montserrat',sans-serif;padding:5px 11px;border-radius:6px;border:none;background:transparent;color:var(--color-toggle-inactive);cursor:pointer;letter-spacing:0.06em;transition:all .2s;}
.lang-btn:hover{color:var(--color-toggle-hover);}
.lang-btn.active{background:var(--gradient-brand);color:#fff;}

/* SCREENS — display controlled exclusively by .main-content>.screen rules above */

/* METRICS */
.metrics{display:grid;gap:10px;margin-bottom:1.75rem;}
/* Sem esta linha o .metrics-4 do Audit Log caía no display:grid de uma coluna
   só e cada KPI virava um retângulo de largura inteira, empilhado. */
.metrics-4{grid-template-columns:repeat(4,1fr);}
.metrics-5{grid-template-columns:repeat(5,1fr);}
.metrics-6{grid-template-columns:repeat(6,1fr);}
.metric{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:background .3s;}
.metric .mlabel{font-size:11px;font-weight:600;color:var(--color-label);text-transform:uppercase;letter-spacing:0.12em;}
.metric .mval{font-size:26px;font-weight:700;color:var(--color-mval);line-height:1;}
.sort-ind{color:var(--color-accent);font-size:11px;margin-left:3px;font-weight:700;}
.metric .mval.blue{color:var(--color-accent-dark);} .metric .mval.amber{color:var(--color-warning-dark);}
.metric .mval.peri{color:var(--color-peri);} .metric .mval.green{color:var(--color-success-dark);} .metric .mval.red{color:var(--color-danger-dark);}
body.light .metric .mval.peri{color:#4D4DCC;}
.int-kpi-top{display:flex;align-items:center;gap:10px;}
.int-kpi-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.int-kpi-ic.ic-total{background:rgba(77,77,255,.14);color:var(--color-accent);}
/* ── Donuts de distribuição da aba Integrações (Ambiente / Status) ──
   Classes próprias em vez de reusar .fn2-donut-*: aquelas dependem de vars
   com escopo em #ld-funnel/#ob-funnel e ficariam sem cor aqui. */
/* Primeiro bloco da tela desde que os KPIs saíram — daí margem só embaixo,
   pro divisor não encostar nos cards. */
.int-kpi-ic.ic-cred{background:rgba(212,144,10,.14);color:#C07800;}
.int-kpi-ic.ic-slack{background:rgba(107,107,221,.16);color:var(--color-peri);}
.int-kpi-ic.ic-andamento{background:rgba(74,127,224,.14);color:#4A7FE0;}
.int-kpi-ic.ic-concluido{background:rgba(22,160,114,.14);color:var(--color-success-dark);}
body:not(.light) .int-kpi-ic.ic-cred{color:var(--color-warning-light);}
body:not(.light) .int-kpi-ic.ic-slack{color:#C3C4FD;}
body:not(.light) .int-kpi-ic.ic-andamento{color:var(--color-blue-light);}
body:not(.light) .int-kpi-ic.ic-concluido{color:#34D399;}
.int-kpi-sub{font-size:11.5px;color:var(--color-sub);}
.int-kpi-ic.ic-users{background:rgba(77,77,255,.14);color:var(--color-accent);}
.int-kpi-ic.ic-admin2{background:rgba(212,144,10,.14);color:#C07800;}
.int-kpi-ic.ic-viewer2{background:rgba(107,107,221,.16);color:var(--color-peri);}
.int-kpi-ic.ic-clock{background:rgba(74,127,224,.14);color:#4A7FE0;}
.int-kpi-ic.ic-shield-ok{background:rgba(22,160,114,.14);color:var(--color-success-dark);}
.int-kpi-ic.ic-shield-warn{background:rgba(217,79,79,.14);color:var(--color-danger-dark);}
body:not(.light) .int-kpi-ic.ic-admin2{color:var(--color-warning-light);}
body:not(.light) .int-kpi-ic.ic-viewer2{color:#C3C4FD;}
body:not(.light) .int-kpi-ic.ic-clock{color:var(--color-blue-light);}
body:not(.light) .int-kpi-ic.ic-shield-ok{color:#34D399;}
body:not(.light) .int-kpi-ic.ic-shield-warn{color:var(--color-danger-light);}

/* ─── ADMIN (redesign): header, KPIs, toolbar, tabela, bulk bar, paginação ─── */
.adm2-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.adm2-hdr-icon{width:44px;height:44px;border-radius:12px;background:rgba(77,77,255,.14);color:var(--color-accent-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.adm2-hdr-text{flex:1;min-width:200px;}
.adm2-hdr-sub-row{display:flex;align-items:center;gap:8px;margin:2px 0 4px;}
.adm2-hdr-sub2{font-size:13px;font-weight:600;color:var(--color-sub);}
.adm2-badge-beta{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:rgba(212,144,10,.15);color:var(--color-warning-dark);padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px;}
body:not(.light) .adm2-badge-beta{color:var(--color-warning-light);}
.adm2-hdr-btns{display:flex;gap:8px;flex-shrink:0;}
.adm2-role-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:14px;white-space:nowrap;}
.adm2-role-badge.role-owner{background:rgba(212,144,10,.15);color:#C07800;}
.adm2-role-badge.role-admin{background:rgba(77,77,255,.14);color:var(--color-accent);}
.adm2-role-badge.role-viewer{background:rgba(147,147,255,.12);color:var(--color-tab-inactive);}
.adm2-role-badge.role-none{background:none;color:var(--color-tab-inactive);}
body:not(.light) .adm2-role-badge.role-owner{color:var(--color-warning-light);}
body:not(.light) .adm2-role-badge.role-admin{color:var(--color-accent-light);}
.adm2-lastseen-sub{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--color-tab-inactive);margin-top:2px;}
.adm2-dot{width:5px;height:5px;border-radius:50%;background:var(--color-tab-inactive);flex-shrink:0;}
.adm2-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;gap:10px;}
.adm2-bulkbar{display:none;align-items:center;gap:10px;}
.adm2-bulkbar.active{display:flex;}
.adm2-bulkbar span{font-size:12px;font-weight:600;color:var(--color-sub);}
.adm2-bulk-btn{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:8px;padding:7px 14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--color-label);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s;}
.adm2-bulk-btn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
.adm2-bulk-btn.danger:hover{border-color:var(--color-danger-dark);color:var(--color-danger-dark);}
.adm2-pagination{display:flex;align-items:center;gap:4px;margin-left:auto;}
.adm2-page-btn{background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-label);border-radius:8px;min-width:30px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;transition:background .15s,color .15s;}
.adm2-page-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent-light);}
.adm2-page-btn:disabled{opacity:.4;cursor:default;}
.adm2-page-btn.active{background:rgba(77,77,255,.14);border-color:transparent;color:var(--color-accent-light);font-weight:700;}
body.light .adm2-page-btn.active{color:var(--color-accent);}

/* MIGRAÇÃO — CARD "VISÃO GERAL" */
/* A aba Finders reaproveita a tela de Clientes, mas sem o painel de
   visão geral (KPIs + donut + evolução) — lá é só a lista de finders.
   Feito por classe no <screen>, e não por style inline, porque
   closeMigDetail() reseta o display inline dos elementos da lista e
   traria o painel de volta. */
/* A faixa de status vive nos DOIS escopos desde o funil de finders
   (migration 091) — em Finders ela mostra as 8 raias do funil. */
/* ── Faixa de status (topo de Clientes) ──────────────────────────────────
   Uma célula por estado do ciclo de vida: ladrilho de ícone, rótulo, número
   e participação no total. Cada célula é também um filtro — por isso são
   <button>, e não <div> com onclick: teclado e leitor de tela entendem de
   graça. A cor vem de MIG_STATUS_META, a mesma do badge e da sequência na
   tabela, via a variável --c posta inline em cada célula. */
.mig-stats{display:flex;align-items:stretch;background:var(--bg-metric);
  border:0.5px solid var(--border-metric);border-radius:var(--radius-card);
  margin-bottom:1.25rem;overflow:hidden;}
.mig-stat{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:14px;
  padding:20px 22px;background:none;border:none;border-left:1px solid var(--border-metric);
  font-family:inherit;text-align:left;cursor:pointer;transition:background .15s;}
.mig-stat:first-child{border-left:none;}
.mig-stat:hover{background:color-mix(in srgb, var(--c) 6%, transparent);}
.mig-stat:focus-visible{outline:2px solid var(--color-accent);outline-offset:-3px;}
/* marca da célula ativa: barra na base, na cor do próprio status */
.mig-stat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--c);border-radius:3px 3px 0 0;opacity:0;transition:opacity .15s;}
.mig-stat.is-active::after{opacity:1;}
.mig-stat.is-active{background:color-mix(in srgb, var(--c) 7%, transparent);}
.mig-stat-ico{width:44px;height:44px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  color:color-mix(in srgb, var(--c) 30%, #fff);
  background:color-mix(in srgb, var(--c) 22%, transparent);}
body.light .mig-stat-ico{color:color-mix(in srgb, var(--c) 78%, #000);
  background:color-mix(in srgb, var(--c) 13%, #fff);}
.mig-stat-txt{display:flex;flex-direction:column;gap:4px;min-width:0;}
/* Cores medidas, não escolhidas no olho: --color-sub e --color-tab-inactive
   davam 3.3:1 e 2.2:1 no tema escuro, abaixo do mínimo AA de 4.5:1 pra
   texto pequeno. O número é grande (30px bold) e por isso responde ao
   limite de 3:1, mas a mistura foi puxada até folgar também. */
.mig-stat-lbl{font-size:13px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  color:color-mix(in srgb, var(--color-title) 80%, transparent);}
body.light .mig-stat-lbl{color:var(--color-sub);}
.mig-stat-linha{display:flex;align-items:baseline;gap:8px;}
.mig-stat-n{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--c) 32%, #fff);}
body.light .mig-stat-n{color:color-mix(in srgb, var(--c) 68%, #000);}
.mig-stat-pct{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--color-title) 62%, transparent);}
body.light .mig-stat-pct{color:var(--color-sub);}
/* Em Finders a faixa carrega 9 células (Todos + 8 raias do funil) — versão
   compacta pra caber sem virar sopa de reticências: ladrilho e número
   menores, sem o %, e o rótulo pode quebrar em duas linhas. O title da
   célula (posto no JS) guarda rótulo inteiro + participação. */
.mig-scope-finders .mig-stat{gap:8px;padding:12px 10px;}
.mig-scope-finders .mig-stat-ico{width:30px;height:30px;border-radius:9px;font-size:14px;}
.mig-scope-finders .mig-stat-lbl{font-size:10px;white-space:normal;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mig-scope-finders .mig-stat-n{font-size:17px;}
.mig-scope-finders .mig-stat-pct{display:none;}
/* Abaixo de 5 células por linha o número encosta no rótulo; a faixa vira
   grade de 2 ou 3 colunas em vez de espremer tudo. */
@media(max-width:1150px){
  .mig-stats{flex-wrap:wrap;}
  .mig-stat{flex:1 1 33%;border-top:1px solid var(--border-metric);}
  .mig-stat:nth-child(-n+3){border-top:none;}
  .mig-stat:nth-child(3n+1){border-left:none;}
}
@media(max-width:720px){
  .mig-stat{flex:1 1 50%;padding:15px 16px;gap:11px;}
  .mig-stat:nth-child(-n+2){border-top:none;}
  .mig-stat:nth-child(3n+1){border-left:1px solid var(--border-metric);}
  .mig-stat:nth-child(2n+1){border-left:none;}
  .mig-stat-ico{width:38px;height:38px;font-size:17px;border-radius:11px;}
  .mig-stat-n{font-size:24px;}
}

/* MIGRAÇÃO — PAGINAÇÃO DA LISTA */
.mig-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 4px;flex-wrap:wrap;}
.mig-pagination-info{font-size:12px;color:var(--color-sub);}
.mig-pagination-btns{display:flex;align-items:center;gap:10px;}
.mig-pag-btn{background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-label);border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;font-size:14px;}
.mig-pag-btn:hover:not(:disabled){background:var(--color-accent-bg);color:var(--color-accent-light);}
.mig-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
.mig-pagination-page{font-size:12px;font-weight:600;color:var(--color-title);min-width:44px;text-align:center;}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.25rem;align-items:center;}
.toolbar input,.toolbar select{font-size:13px;font-family:'Montserrat',sans-serif;padding:7px 12px;border:0.5px solid var(--border-input);border-radius:8px;background:var(--bg-input);color:var(--color-input);transition:background .3s,color .3s;}
.toolbar input::placeholder{color:var(--color-placeholder);}
.toolbar input:focus,.toolbar select:focus{border-color:var(--color-accent);}
.toolbar select option{background:var(--bg-select-opt);}
.toolbar input{width:220px;}
.add-btn{font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;padding:7px 16px;border-radius:var(--radius-btn);border:none;background:var(--gradient-brand);color:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .2s;}
.add-btn:hover{opacity:0.88;}
/* Secundário: mesma caixa do primário, sem o azul. Só a AÇÃO PRINCIPAL de
   cada barra fica preenchida — é o padrão da barra de Leads ("Nova Raia"
   fantasma ao lado de "Novo lead"). */
.add-btn.ghost{background:transparent;border:0.5px solid var(--border-metric);color:var(--color-tab-inactive);}
.add-btn.ghost:hover{opacity:1;border-color:var(--color-accent);color:var(--color-accent-light);}

/* ── Filtros no padrão da barra de Leads ──────────────────────────────────
   Os selects viram pílulas (raio 20px) e a busca ganha a mesma caixa
   arredondada com lupa. Vale pra Integrações, Clientes/Finders, Health,
   Admin e Marketing; Leads e Onboarding já eram assim por definição. */
.int2-toolbar select,
#screen-migracao>.toolbar select,
#mig-filter-panel .toolbar-select,
#screen-health .hs-toolbar .hs-sel,
#screen-mkt .mkt-toolbar select,#ld-abm .mkt-toolbar select{
  background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:20px;
  padding:7px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;
  font-size:12px;cursor:pointer;max-width:180px;
  transition:background .15s,color .15s,border-color .15s;
}
.int2-toolbar select:hover,
#screen-migracao>.toolbar select:hover,
#mig-filter-panel .toolbar-select:hover,
#screen-health .hs-toolbar .hs-sel:hover,
#screen-mkt .mkt-toolbar select:hover,#ld-abm .mkt-toolbar select:hover{border-color:var(--color-tab-inactive);}

.int2-toolbar input[type=text],.int2-toolbar .adm-search,
#screen-migracao>.toolbar input[type=text],
#screen-health .hs-toolbar .hs-search,
#screen-mkt .mkt-toolbar .mkt-search,#ld-abm .mkt-toolbar .mkt-search{
  background:var(--bg-field-input);border:0.5px solid var(--border-field-input);
  border-radius:20px;padding:8px 14px;color:var(--color-field-input);
  font-family:'Montserrat',sans-serif;font-size:13px;
}
.int2-search-wrap input{border-radius:20px!important;}
/* Em Clientes/Finders a busca tem a mesma largura das outras abas (240px) e é
   o ÚNICO item que encolhe quando a janela aperta — os quatro filtros e os
   dois botões precisam caber na mesma linha. Sem o flex-shrink:0 nos demais,
   o flexbox reparte a redução entre todos proporcionalmente; como select e
   botão não passam do próprio conteúdo, a linha quebrava do mesmo jeito. */
#screen-migracao>.toolbar>*{flex-shrink:0;}
/* base 0 + max-width, e não uma largura fixa: com flex-basis de 240px o
   navegador conta essa largura ANTES de encolher e a barra quebra em duas
   linhas mesmo havendo espaço. Com base 0 a busca só ocupa o que sobrar
   depois dos filtros e dos botões, e o max-width a segura nos mesmos 240px
   das outras abas quando sobra espaço de mais. */
#screen-migracao>.toolbar .int2-search-wrap{flex:1 1 0;min-width:140px;max-width:240px;}
#screen-migracao>.toolbar .int2-search-wrap input{width:100%;min-width:0;box-sizing:border-box;}
/* botões de filtro na mesma pílula dos selects */
.int2-toolbar .add-btn.ghost,#screen-migracao>.toolbar .add-btn.ghost{border-radius:20px;}
/* Botão só-ícone da barra (sincronizar favicons): quadrado, sem o padding
   horizontal de um botão com rótulo, pra ficar discreto ao lado do botão
   principal. 34px mantém o alvo de toque acima do mínimo. */
/* Cabeçalho da tela de churn — diz onde você está, já que o caminho de ida
   e volta agora é a célula "Churn" da faixa do topo. */
.mig-churn-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 16px;
  border-radius:12px;background:rgba(217,79,79,.07);border:0.5px solid rgba(217,79,79,.22);}
.mig-churn-hd i{font-size:20px;color:var(--color-danger-dark);flex-shrink:0;}
body:not(.light) .mig-churn-hd i{color:#F98080;}
.mig-churn-hd-title{font-size:13px;font-weight:700;color:var(--color-title);}
.mig-churn-hd-sub{font-size:11.5px;color:var(--color-sub);margin-top:2px;}
.mig-icon-btn{padding:0;width:34px;height:34px;justify-content:center;flex-shrink:0;}
.mig-icon-btn i{font-size:15px;}
.mig-icon-btn:disabled{opacity:.6;cursor:default;}
.divider{height:0.5px;background:var(--divider);margin-bottom:1.25rem;}

/* TABLE */
/* overflow-x:auto (e não hidden) porque `table` tem min-width:860px — numa
   janela mais estreita a tabela estourava o wrapper e era CORTADA sem barra de
   rolagem, deixando a última coluna (Ações) inalcançável no desktop. O scroll
   horizontal só existia em @media(hover:none), ou seja, só no touch. */
.table-wrap{border:0.5px solid var(--border-table-wrap);border-radius:12px;overflow-x:auto;overflow-y:hidden;background:var(--bg-table-wrap);}
table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto;min-width:860px;}
thead tr{background:var(--bg-thead);}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--color-th);text-transform:uppercase;letter-spacing:var(--label-spacing);border-bottom:0.5px solid var(--border-th);white-space:nowrap;}
td{padding:12px 14px;vertical-align:middle;border-bottom:0.5px solid var(--border-td);color:var(--color-td);}
tr:last-child td{border-bottom:none;}
tr.prow{transition:background .15s;}
tr.prow:hover{background:var(--bg-row-hover);}
.nome-cell{color:var(--color-nome);font-weight:600;font-size:14px;}
.contact-name{color:var(--color-contact);font-weight:500;font-size:14px;}
.contact-email{font-size:11px;color:var(--color-email);margin-top:2px;display:flex;align-items:center;gap:4px;min-width:0;}
.contact-email-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.copy-email-btn{background:none;border:none;cursor:pointer;color:var(--color-label);padding:0 3px;flex-shrink:0;opacity:0;transition:opacity .15s;font-size:11px;line-height:1;}
.copy-email-btn:hover{color:var(--color-accent-light);}
td:hover .copy-email-btn,.ld-det-val:hover .copy-email-btn,.copy-email-btn:focus{opacity:1;}
.deadline{font-size:13px;font-weight:500;color:var(--color-deadline);}
.passos{font-size:13px;color:var(--color-passos);line-height:1.55;}
.actions-cell{vertical-align:middle;}.actions-cell .btns{display:flex;gap:4px;}
.icon-btn{background:none;border:none;padding:6px;cursor:pointer;color:var(--color-icon-btn);font-size:15px;border-radius:6px;}
.icon-btn:hover{background:var(--bg-icon-btn-hover);color:var(--color-icon-btn-hover);}
.empty{text-align:center;padding:3rem;color:var(--color-empty);font-size:13px;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;font-family:'Montserrat',sans-serif;}
.badge.em-andamento{background:rgba(22,82,240,0.12);color:#4A7FE0;border:0.5px solid rgba(22,82,240,0.4);}
.badge.credenciais-pendentes{background:rgba(212,144,10,0.12);color:#C07800;border:0.5px solid rgba(212,144,10,0.4);}
.badge.slack-pendente{background:rgba(107,107,221,0.12);color:#5050AA;border:0.5px solid rgba(107,107,221,0.3);}
.badge.concluido{background:rgba(22,160,114,0.1);color:var(--color-success-dark);border:0.5px solid rgba(22,160,114,0.35);}
.badge.sim{background:rgba(22,160,114,0.1);color:var(--color-success-dark);border:0.5px solid rgba(22,160,114,0.35);}
.badge.nao{background:rgba(217,79,79,0.1);color:var(--color-danger-dark);border:0.5px solid rgba(217,79,79,0.35);}
.badge.pendente{background:rgba(212,144,10,0.12);color:#C07800;border:0.5px solid rgba(212,144,10,0.4);}
.badge.migrado{background:rgba(22,160,114,0.1);color:var(--color-success-dark);border:0.5px solid rgba(22,160,114,0.35);}
.badge.referral{background:rgba(107,107,221,0.1);color:#5050AA;border:0.5px solid rgba(107,107,221,0.25);}
/* Ciclo de vida do cliente: neutro → verde → âmbar → vermelho. A cor é a
   mesma na tabela, no badge, no kanban e no donut (mesmo conceito, mesma
   cor), e vem toda de MIG_STATUS_META no JS. */
.badge.inativo{background:rgba(77,77,255,0.1);color:var(--color-accent-dark);border:0.5px solid rgba(77,77,255,0.3);}
body:not(.light) .badge.inativo{color:var(--color-accent-light);}
.badge.ativo{background:rgba(22,160,114,0.1);color:var(--color-success-dark);border:0.5px solid rgba(22,160,114,0.35);}
.badge.risco{background:rgba(212,144,10,0.12);color:#C07800;border:0.5px solid rgba(212,144,10,0.4);}
.badge.churn{background:rgba(217,79,79,0.1);color:var(--color-danger-dark);border:0.5px solid rgba(217,79,79,0.35);}
/* finder desativado: cinza de propósito — é ausência de operação, não alerta */
.badge.fnd-desativado{background:rgba(147,147,255,0.08);color:var(--color-sub);border:0.5px solid rgba(147,147,255,0.25);}

/* dark mode badge overrides */
body:not(.light) .badge.em-andamento{color:var(--color-blue-light);}
body:not(.light) .badge.credenciais-pendentes{color:var(--color-warning-light);}
body:not(.light) .badge.slack-pendente{color:#C3C4FD;}
body:not(.light) .badge.concluido,body:not(.light) .badge.sim,body:not(.light) .badge.migrado{color:#34D399;}
body:not(.light) .badge.nao{color:var(--color-danger-light);}
body:not(.light) .badge.pendente{color:var(--color-warning-light);}
body:not(.light) .badge.referral{color:#C3C4FD;}
body:not(.light) .badge.ativo{color:#34D399;}
body:not(.light) .badge.risco{color:var(--color-warning-light);}
body:not(.light) .badge.churn{color:#F98080;}

.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* INTEGRAÇÃO — toolbar, tabela agrupada por status, popovers */
.int2-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;}
.int2-search-wrap{position:relative;display:inline-flex;align-items:center;}
.int2-search-wrap .ti-search{position:absolute;left:11px;font-size:14px;color:var(--color-tab-inactive);pointer-events:none;}
.int2-search-wrap input{width:240px;padding-left:32px!important;}
.int2-toolbar-spacer{flex:1;}
.int2-table-wrap{border:0.5px solid var(--border-table-wrap);border-radius:12px;overflow:hidden;background:var(--bg-table-wrap);overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Sombreado sutil — aplicado nos containers/cards "de quadro" em todo o
   dashboard (KPIs, painéis, colunas de kanban, wrappers de tabela etc.).
   As bordas em si já ficaram mais suaves via --border-metric/--border-
   table-wrap/--border-modal (ver :root/body.light no topo do arquivo) —
   aqui só soma a profundidade da sombra. */
.dash,.home2-kpi,.home2-alerts-card,.home2-card,.metric,.int2-table-wrap,.table-wrap,
#screen-mkt .ar2-kpi,#screen-mkt .ar2-col,
.p360-stat,.ob-col,#screen-leads .ld-col,.mig-stats,.kanban-col,.mig-ds-icard,
.fin-kpi-card,.fin-chart-card,.fin-filter-bar,.adm-table-wrap,.ld-analytics,
.ld-det-card,.ob-doc-section,.pf-header,.pf-stat,.pf-tabs,.pf-card,.hs-triage-col,
.ld-toolbar-box,.mkc-actionbar{
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.10);
}
body.light .dash,body.light .home2-kpi,body.light .home2-alerts-card,body.light .home2-card,body.light .metric,body.light .int2-table-wrap,body.light .table-wrap,
body.light #screen-mkt .ar2-kpi,body.light #screen-mkt .ar2-col,
body.light .p360-stat,body.light .ob-col,body.light #screen-leads .ld-col,body.light .mig-stats,body.light .kanban-col,body.light .mig-ds-icard,
body.light .fin-kpi-card,body.light .fin-chart-card,body.light .fin-filter-bar,body.light .adm-table-wrap,body.light .ld-analytics,
body.light .ld-det-card,body.light .ob-doc-section,body.light .pf-header,body.light .pf-stat,body.light .pf-tabs,body.light .pf-card,body.light .hs-triage-col,
body.light .ld-toolbar-box,body.light .mkc-actionbar{
  box-shadow:0 1px 3px rgba(30,30,90,0.07),0 1px 2px rgba(30,30,90,0.05);
}
.int2-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:920px;}
.int2-table thead tr{background:var(--bg-thead);}
.int2-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--color-th);text-transform:uppercase;letter-spacing:var(--label-spacing);border-bottom:0.5px solid var(--border-th);white-space:nowrap;}
.int2-table td{padding:11px 14px;vertical-align:middle;border-bottom:0.5px solid var(--border-td);color:var(--color-td);}
.int2-table tr.prow:hover{background:var(--bg-row-hover);}
.int2-table td.nome-cell{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.int2-table td .contact-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.int2-menu-popover{position:fixed;z-index:6000;background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:6px;min-width:160px;display:flex;flex-direction:column;}
.int2-menu-item{display:flex;align-items:center;gap:8px;background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--color-title);text-align:left;}
.int2-menu-item:hover{background:var(--bg-icon-btn-hover);}
.int2-menu-item.danger{color:var(--color-danger-dark);}

/* MIGRATION TABLE */
/* table-layout:fixed → quem define as colunas é a PRIMEIRA linha, ou seja o
   <thead>. Largura em <td> aqui não teria efeito nenhum; por isso as regras
   abaixo miram só <th>, e uma coluna com display:none simplesmente sai do
   cálculo (é assim que os dois escopos convivem com o mesmo <thead>).

   Posições: 1 ID · 2 Cliente · 3 Account Owner · 4 Contato · 5 Idioma ·
   6 Clientes (só Finders) · 7 Status (só Clientes) · 8 ações.

   Status precisa de 345px: o .mig-pipeline tem 4 pílulas e é nowrap — medido
   em 343px com "Risco de Churn", a mais larga. Com menos que isso ele pinta
   por cima da coluna vizinha em vez de a tabela rolar.
   min-width = soma das colunas VISÍVEIS em cada escopo (1241 em Clientes,
   1006 em Finders) — pedir 1241 nos dois criaria rolagem horizontal em
   Finders sem nada pra mostrar nela. */
.mig-table{table-layout:fixed;width:100%;min-width:1241px;}
.mig-scope-finders .mig-table{min-width:1006px;}
.mig-table th,.mig-table td{text-align:left;vertical-align:middle;}
.mig-table th:nth-child(1){width:56px;}
.mig-table th:nth-child(2){width:250px;}
.mig-table th:nth-child(3){width:140px;}
.mig-table th:nth-child(4){width:200px;}
.mig-table th:nth-child(5){width:100px;}
.mig-table th:nth-child(6){width:110px;}
.mig-table th:nth-child(7){width:345px;}
.mig-table th:nth-child(8){width:150px;}
tr.client-row{cursor:pointer;}
tr.client-row:hover{background:var(--bg-row-hover);}
.expand-icon{transition:transform .2s;display:inline-block;margin-right:6px;color:var(--color-accent);font-size:12px;}
.expand-icon.open{transform:rotate(90deg);}
tr.merchant-row td{padding:7px 14px 7px 34px;background:var(--bg-merchant-row);border-bottom:0.5px solid var(--border-merchant-row);font-size:13px;color:var(--color-merchant-td);}
tr.merchant-row td:first-child{color:var(--color-merchant-line);padding-left:14px;}
tr.merchant-row.hidden{display:none;}
/* ID do merchant na mesma coluna do ID do cliente, um degrau mais apagado:
   a linha do merchant é subordinada e não deve competir com a do cliente. */
.merchant-id{color:rgba(147,147,255,0.38);font-size:11px;font-variant-numeric:tabular-nums;}
body.light .merchant-id{color:var(--color-tab-inactive);opacity:.75;}
.merchant-name{display:flex;align-items:center;gap:6px;}
.merchant-name::before{content:'';width:8px;height:0.5px;background:var(--color-merchant-line);flex-shrink:0;}
/* o nome abre o detalhe do merchant — precisa parecer clicável, mas sem
   competir com o nome do cliente na linha de cima (que é o dado principal) */
.merchant-name.is-link{cursor:pointer;width:fit-content;transition:color .15s;}
.merchant-name.is-link:hover{color:var(--color-accent-light);}
.merchant-name.is-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:3px;}

/* INT TABLE */
.int-table th:nth-child(1){width:16%;} .int-table th:nth-child(2){width:10%;} .int-table th:nth-child(3){width:14%;}
.int-table th:nth-child(4){width:16%;} .int-table th:nth-child(5){width:10%;} .int-table th:nth-child(6){width:26%;} .int-table th:nth-child(7){width:8%;}

/* PIPELINE DE STATUS */
.mig-pipeline{display:flex;align-items:center;gap:2px;white-space:nowrap;}
.pip-step{font-size:10px;font-weight:600;padding:3px 7px;border-radius:4px;color:var(--color-accent-muted);letter-spacing:0.03em;font-family:'Montserrat',sans-serif;}
/* Etapas já percorridas ficam NEUTRAS, não verdes. No funil de migração
   verde queria dizer "concluído"; aqui a sequência termina em Churn, e
   pintar de verde os degraus atrás de um cliente perdido lê como sucesso.
   Quem carrega o significado é a etapa atual. */
.pip-step.done{color:var(--color-accent-muted);opacity:.55;}
.pip-step.s-current-inativo{background:rgba(77,77,255,0.16);color:var(--color-accent-light);}
.pip-step.s-current-ativo{background:rgba(22,160,114,0.15);color:#34D399;}
.pip-step.s-current-risco{background:rgba(212,144,10,0.14);color:var(--color-warning-light);}
.pip-step.s-current-churn{background:rgba(217,79,79,0.14);color:#F98080;}
.pip-sep{color:rgba(147,147,255,0.18);font-size:8px;margin:0 1px;}
body.light .pip-step.done{color:var(--color-tab-inactive);}
body.light .pip-step.s-current-inativo{color:var(--color-accent-dark);}
body.light .pip-step.s-current-ativo{color:var(--color-success-dark);}
body.light .pip-step.s-current-risco{color:#C07800;}
body.light .pip-step.s-current-churn{color:var(--color-danger-dark);}
/* Sequência clicável (tabela de Clientes): cada etapa é um botão que aplica
   o status. Como os quatro estados já estão à vista, não há dropdown — o
   controle é a própria régua. */
.mig-pipeline.is-clicavel .pip-step{background:none;border:none;font-family:inherit;
  cursor:pointer;transition:background .12s,color .12s,opacity .12s;}
/* a etapa sob o cursor se veste da cor que ela vai aplicar — o hover é a
   prévia do resultado */
.mig-pipeline.is-clicavel .pip-step:hover{opacity:1;
  background:color-mix(in srgb, var(--c) 22%, transparent);
  color:color-mix(in srgb, var(--c) 38%, #fff);}
body.light .mig-pipeline.is-clicavel .pip-step:hover{color:color-mix(in srgb, var(--c) 88%, #000);}
.mig-pipeline.is-clicavel .pip-step:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;}
/* a etapa atual não é alvo: clicar nela não faria nada */
.mig-pipeline.is-clicavel .pip-step[aria-current]{cursor:default;}

/* KANBAN */
/* Raias do kanban de Finders: teto de altura, todas do mesmo tamanho, e o
   scroll acontece DENTRO de cada uma — mesmo comportamento das raias de Leads
   e de Onboarding (.ld-cards/.ob-col-cards).

   Antes era `align-items:flex-start` sem teto nenhum: cada raia tinha a altura
   do próprio conteúdo, então "Recebido" com 12 cards media 1382px num
   viewport de 900 e as vizinhas paravam em 273px. Para ler o fim de uma raia
   era preciso rolar a PÁGINA inteira, o que leva o cabeçalho das outras raias
   embora — num quadro comparativo, justamente o que não pode sumir.

   `align-items:stretch` iguala as alturas; o `max-height` no contêiner é o
   teto. O desconto de 360px é a faixa acima do quadro (topbar + funil +
   alternador + barra de filtros); o `min-height` é o piso pra tela baixa, onde
   é melhor a página rolar um pouco do que a raia virar uma fresta. */
.kanban-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:1rem;align-items:stretch;
  max-height:calc(100dvh - 360px);min-height:300px;}
.kanban-col{flex:0 0 220px;display:flex;flex-direction:column;gap:0;border-radius:12px;background:var(--bg-metric);border:0.5px solid var(--border-metric);overflow:hidden;}
.kanban-col-header{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--divider);}
.kanban-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--label-spacing);color:var(--color-label);}
.kanban-col-count{font-size:11px;font-weight:700;background:var(--color-accent-bg);color:var(--color-label);padding:2px 7px;border-radius:99px;}
/* min-height:0 é o que permite encolher abaixo do conteúdo — sem ele o
   overflow-y nunca entra em ação e a raia volta a crescer. */
.kanban-cards{padding:8px;display:flex;flex-direction:column;gap:6px;
  flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;}
.kanban-cards::-webkit-scrollbar{width:3px;}
.kanban-cards::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:2px;}
.kanban-card{background:var(--bg-dash);border:0.5px solid var(--border-modal);border-radius:var(--radius-btn);padding:10px 12px;cursor:grab;transition:box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:6px;}
.kanban-card:hover{border-color:var(--color-accent);box-shadow:0 4px 16px rgba(77,77,255,0.15);}
.kanban-card.dragging{opacity:0.35;cursor:grabbing;}
.kanban-col.drag-over .kanban-cards{background:rgba(77,77,255,0.07);border-radius:8px;}
.kanban-card-name{font-size:13px;font-weight:700;color:var(--color-nome);line-height:1.3;}
.kanban-card-badges{display:flex;flex-wrap:wrap;gap:4px;}
.kanban-card-meta{font-size:11px;color:var(--color-sub);display:flex;align-items:center;justify-content:space-between;}
.kanban-card-edit{background:none;border:none;color:var(--color-accent-border);cursor:pointer;font-size:13px;padding:0;transition:color .15s;}
.kanban-card-edit:hover{color:var(--color-accent-light);}
/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:var(--bg-modal-overlay);align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px);}
.modal-bg.open{display:flex;}
.modal{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:16px;padding:1.75rem;width:420px;max-width:95%;box-shadow:0 24px 60px rgba(72,73,251,0.15);}
.modal-header{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;}
.modal-header i{color:var(--color-accent);font-size:18px;}
.modal-header h3{font-size:14px;font-weight:700;color:var(--color-modal-title);}
.field{margin-bottom:12px;}
.mig-edit-btn{background:rgba(147,147,255,0.1);border:0.5px solid var(--color-accent-muted);border-radius:var(--radius-btn);color:var(--color-accent-light);cursor:pointer;padding:4px 8px;font-size:13px;transition:all .15s;}
.mig-edit-btn:hover{background:rgba(77,77,255,0.2);border-color:var(--color-accent);color:#fff;}
.mig-expand-btn{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:5px;color:var(--color-tab-inactive);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;vertical-align:middle;margin-right:4px;}
.mig-expand-btn:hover{background:var(--color-accent-bg);color:var(--color-accent-light);}
.mig-expand-btn .expand-icon{transition:transform .2s;font-size:13px;}
.mig-expand-btn .expand-icon.open{transform:rotate(90deg);}
.mig-detail-field{display:flex;flex-direction:column;gap:3px;}
.mig-detail-label{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:var(--label-spacing);}
.mig-detail-value{font-size:13px;color:var(--color-title);line-height:1.5;}
#mig-modal-bg{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:var(--bg-modal-overlay);backdrop-filter:blur(4px);}
#mig-modal-bg.open{display:flex;}
/* CLIENT DETAIL — Geral / Financeiro info cards */
.mig-ds-section-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.mig-ds-section-title span{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;}
.mig-ds-section-title .line{flex:1;height:0.5px;background:var(--border-metric);}
.mig-ds-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start;}
@media(max-width:1024px){.mig-ds-cards{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.mig-ds-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.mig-ds-cards{grid-template-columns:1fr;}}
.mig-ds-icard{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.mig-ds-icard:hover .det-edit-btn{opacity:1;}
.mig-ds-icard i{font-size:14px;color:var(--color-accent-light);}
.mig-ds-icard .lbl{font-size:9px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;}
.mig-ds-icard .val{font-size:13px;font-weight:600;color:var(--color-title);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mig-ds-icard .val.is-empty{color:var(--color-tab-inactive);font-weight:500;}
.mig-ds-icard .val.wrap{white-space:normal;}

/* MERCHANTS — list + detail */
.mig-merch-card{display:flex;align-items:center;gap:12px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.mig-merch-card:hover{border-color:var(--color-accent-light);background:var(--bg-row-hover);}
.mig-merch-card i.ico{font-size:16px;color:var(--color-accent-light);flex-shrink:0;}
.mig-merch-card .body{flex:1;min-width:0;}
.mig-merch-card .name{font-size:13px;font-weight:700;color:var(--color-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mig-merch-card .sub{font-size:11px;color:var(--color-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.mig-merch-card .chev{font-size:14px;color:var(--color-tab-inactive);flex-shrink:0;}
.mig-merch-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:1.5px dashed var(--border-metric);border-radius:12px;padding:12px 14px;color:var(--color-tab-inactive);cursor:pointer;font-size:12px;font-weight:600;font-family:'Montserrat',sans-serif;transition:border-color .15s,color .15s;}
.mig-merch-add-btn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
.mig-merch-empty{background:var(--bg-metric);border:1.5px dashed var(--border-metric);border-radius:12px;padding:24px 20px;text-align:center;}
.mig-merch-empty i{font-size:22px;color:var(--color-tab-inactive);display:block;margin-bottom:8px;}
.mig-merch-empty div{font-size:12px;font-weight:600;color:var(--color-tab-inactive);}
.field label{display:block;font-size:10px;font-weight:600;color:var(--color-label);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;font-size:13px;font-family:'Montserrat',sans-serif;padding:8px 11px;border:0.5px solid var(--border-field-input);border-radius:8px;background:var(--bg-field-input);color:var(--color-field-input);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--color-accent);}
.field input::placeholder,.field textarea::placeholder{color:var(--color-field-ph);}
.field select option{background:var(--bg-field-select-opt);}
.field textarea{resize:vertical;min-height:64px;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:1.25rem;}
.btn-cancel{font-size:13px;font-family:'Montserrat',sans-serif;padding:7px 16px;border:0.5px solid var(--border-cancel);border-radius:var(--radius-btn);background:none;color:var(--color-cancel);cursor:pointer;transition:background .2s;}
.btn-cancel:hover{background:var(--bg-cancel-hover);}
.btn-save{font-size:13px;font-family:'Montserrat',sans-serif;font-weight:700;padding:7px 18px;border:none;border-radius:var(--radius-btn);background:var(--gradient-brand);color:#fff;cursor:pointer;transition:opacity .2s;}
.btn-save:hover{opacity:0.88;}

/* ─── ACTIVITY DRAWER ─── */
#activity-drawer{position:fixed;right:-380px;top:0;width:380px;height:100vh;background:var(--bg-modal);border-left:0.5px solid var(--border-modal);z-index:500;transition:right .3s ease;display:flex;flex-direction:column;}
#activity-drawer.open{right:0;box-shadow:-8px 0 32px rgba(0,0,0,0.25);}
.activity-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:0.5px solid var(--divider);}
.activity-header h3{font-size:14px;font-weight:700;color:var(--color-title);}
.activity-close{background:none;border:none;color:var(--color-sub);cursor:pointer;font-size:18px;padding:4px;}
.activity-list{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:12px;}
.activity-item{display:flex;gap:10px;align-items:flex-start;}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;margin-top:4px;}
.activity-dot.create{background:var(--color-success-dark);}
.activity-dot.delete{background:var(--color-danger-dark);}
.activity-body{flex:1;}
.activity-action{font-size:13px;font-weight:600;color:var(--color-title);}
.activity-time{font-size:11px;color:var(--color-sub);margin-top:2px;}
.activity-empty{font-size:12px;color:var(--color-sub);text-align:center;padding:2rem 0;}
.activity-clear{margin:0 1.5rem 1rem;font-size:12px;font-family:'Montserrat',sans-serif;padding:7px;border-radius:8px;border:0.5px solid var(--border-cancel);background:none;color:var(--color-cancel);cursor:pointer;width:calc(100% - 3rem);}

/* ─── INLINE STATUS SELECT ─── */
/* Espelha as métricas do .badge que este campo substitui em edição inline
   (pílula, mesmo padding/peso/tamanho de fonte). Antes era canto quadrado com
   padding menor, então a célula mudava de forma e altura ao entrar em edição —
   o "desformatado" percebido. A borda em destaque fica, pra sinalizar edição. */
/* Sobrou só para o campo de data em linha (Início, na aba Integrações), onde
   o picker nativo do navegador é de fato o certo. Status e Ambiente deixaram
   de usar <select> — viraram o popover abaixo. */
.inline-status-select{font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;padding:4px 8px;border:1px solid var(--color-accent);border-radius:999px;background:var(--bg-input);color:var(--color-input);cursor:pointer;max-width:100%;vertical-align:middle;}

/* ── Seletor em linha (status / ambiente) ────────────────────────────────
   Mesma moldura do popover de cor de raia. Cada item mostra o badge que a
   linha vai exibir depois — a lista é a prévia do resultado, não uma
   representação diferente dele. */
/* Sombra curta e seta apontando pra célula: flutuando alto e solto, ele
   parecia um painel da tela e não uma extensão da linha clicada. */
.inline-picker{position:fixed;z-index:6000;background:var(--bg-modal);
  border:0.5px solid var(--border-modal);border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 8px 20px -6px rgba(0,0,0,.3);
  padding:5px;min-width:150px;display:flex;flex-direction:column;gap:1px;}
.inline-picker::before{content:'';position:absolute;left:var(--seta,18px);
  width:9px;height:9px;background:var(--bg-modal);
  border-left:0.5px solid var(--border-modal);border-top:0.5px solid var(--border-modal);
  transform:rotate(45deg);}
/* abaixo da célula: seta no topo. Acima (quando não cabe embaixo): seta
   embaixo, girada pro outro lado. */
.inline-picker{--seta:18px;}
.inline-picker.abre-baixo::before{top:-5px;}
.inline-picker.abre-cima::before{bottom:-5px;border:none;
  border-right:0.5px solid var(--border-modal);border-bottom:0.5px solid var(--border-modal);}
.inline-picker-item{display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:none;border-radius:8px;padding:6px 8px;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .12s;}
.inline-picker-item:hover{background:var(--bg-icon-btn-hover);}
.inline-picker-item:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;}
.inline-picker-marca{flex:1;min-width:0;display:flex;align-items:center;}
/* o check ocupa lugar sempre: sem isso os itens dançam na horizontal quando
   o cursor passa de um para o outro */
.inline-picker-check{font-size:13px;flex-shrink:0;color:var(--color-accent-light);visibility:hidden;}
.inline-picker-item.is-current .inline-picker-check{visibility:visible;}
body.light .inline-picker-check{color:var(--color-accent-dark);}
.inline-picker-nulo{font-size:11px;color:var(--color-tab-inactive);font-style:italic;}
.inline-notes-textarea{font-size:12px;font-family:'Montserrat',sans-serif;padding:6px 8px;border:0.5px solid var(--color-accent);border-radius:6px;background:var(--bg-input);color:var(--color-input);width:280px;min-height:60px;resize:vertical;}

/* ─── DRAG AND DROP ─── */
tr.dragging{opacity:0.4;}
tr.drag-over{border-top:2px solid var(--color-accent);}
.drag-handle{color:rgba(147,147,255,0.5);cursor:grab;font-size:16px;padding:0 4px;}
.drag-handle:hover{color:var(--color-accent-light);}
.fin-loading{display:flex;align-items:center;justify-content:center;padding:4rem;gap:12px;color:var(--color-tab-inactive);font-size:13px;}
@keyframes spin{to{transform:rotate(360deg)}}
.tbl-loading{padding:2.5rem;text-align:center;color:var(--color-tab-inactive);font-size:13px;}
.tbl-loading-spinner{width:22px;height:22px;border:2px solid var(--border-metric);border-top-color:var(--color-accent-light);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 10px;}
.tbl-error-msg{padding:2.5rem;text-align:center;color:var(--color-danger-dark);font-size:13px;}
.fin-kpi-delta{font-size:11px;font-weight:700;margin-top:5px;display:flex;align-items:center;gap:4px;}
.fin-kpi-delta.up{color:var(--color-success-dark);}.fin-kpi-delta.down{color:var(--color-danger-dark);}.fin-kpi-delta.flat{color:var(--color-tab-inactive);}
.hs-treat-btn{font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--radius-btn);border:0.5px solid rgba(147,147,255,0.3);background:rgba(147,147,255,0.08);color:var(--color-tab-inactive);cursor:pointer;transition:all .15s;font-family:'Montserrat',sans-serif;}
.hs-treat-btn:hover{background:rgba(77,77,255,0.15);border-color:var(--color-accent-light);color:var(--color-accent-light);}
.hs-treat-btn.treated{background:rgba(22,160,114,0.12);border-color:var(--color-success-dark);color:var(--color-success-dark);}
.fin-section-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;}

/* ── Financial Tab ── */
.fin-type-btn{font-size:12px;padding:4px 9px;border-radius:var(--radius-btn);border:0.5px solid var(--border-field-input);background:transparent;color:var(--color-tab-inactive);cursor:pointer;transition:all .2s;font-family:'Montserrat',sans-serif;}
.chart-snap-btn{background:none;border:0.5px solid var(--border-metric);border-radius:6px;color:var(--color-label);cursor:pointer;padding:3px 7px;font-size:11px;opacity:0;transition:opacity .15s;display:inline-flex;align-items:center;gap:3px;}
.fin-chart-card:hover .chart-snap-btn{opacity:1;}
.chart-snap-btn:hover{color:var(--color-accent-light);border-color:var(--color-accent);}
.fin-type-btn:hover{background:rgba(77,77,255,.1);}
.fin-type-btn.active{background:var(--gradient-brand);color:#fff;border-color:transparent;}
.fin-ma-btn{font-size:10px;font-weight:700;padding:4px 8px;border-radius:var(--radius-btn);border:0.5px solid var(--border-field-input);background:transparent;color:var(--color-tab-inactive);cursor:pointer;transition:all .2s;font-family:'Montserrat',sans-serif;letter-spacing:.02em;}
.fin-ma-btn:hover{background:rgba(77,77,255,.1);}
.fin-ma-btn#fin-revma3-btn.active,.fin-ma-btn#fin-volma3-btn.active{background:rgba(244,160,32,.15);color:#f4a020;border-color:rgba(244,160,32,.4);}
.fin-ma-btn#fin-revma6-btn.active,.fin-ma-btn#fin-volma6-btn.active{background:rgba(155,109,255,.15);color:#9b6dff;border-color:rgba(155,109,255,.4);}
.fin-toolbar-divider{width:0.5px;height:16px;background:var(--border-field-input);margin:0 2px;}
.fin-section{margin-bottom:6px;padding-bottom:0;}
.fin-section-title{display:flex;align-items:center;gap:8px;padding:10px 0 8px;margin-bottom:10px;border-bottom:0.5px solid var(--divider);}
.fin-section-title .fin-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fin-section-title span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-tab-inactive);}
/* Dica ao lado do título da seção: mesma família, um degrau abaixo. Existe
   pra que "OTC" não seja lido como mais um recorte dos números de cima. */
.fin-section-title .fin-section-hint{font-size:10.5px;font-weight:600;letter-spacing:.02em;
  text-transform:none;color:var(--color-tab-inactive);opacity:.75;}
@media(max-width:640px){.fin-section-title .fin-section-hint{display:none;}}
/* KPIs da seção OTC: mesmo cartão do topo, em faixa própria. A variável de
   cor mora em .fin2-kpi-grid, que não é ancestral daqui — sem repetir, o
   ícone rosa ficaria com cor inválida (ou seja, sem cor). */
/* Linha das contrapartes internas: dentro da tabela, mas visivelmente fora
   da lista de clientes — é a diferença entre a soma dos clientes e o total
   da mesa, não mais um cliente. */
.fin-tx-table tr.fin-otc-interna td{color:var(--color-tab-inactive);font-style:italic;
  background:color-mix(in srgb, var(--color-tab-inactive) 6%, transparent);}
.fin-otc-interna-n{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;
  font-weight:800;font-style:normal;background:color-mix(in srgb, var(--color-tab-inactive) 16%, transparent);}
.fin-otc-kpis{--fin-kpi-pink:#b450dc;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px;}
@media(max-width:900px){.fin-otc-kpis{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.fin-otc-kpis{grid-template-columns:1fr;}}
.fin-kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;}
.fin-kpi-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;}
.fin-kpi-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0;}
.fin-kpi-card.green::before{background:var(--color-success-dark);}
.fin-kpi-card.blue::before{background:var(--color-accent);}
.fin-kpi-card.purple::before{background:var(--color-purple);}
.fin-kpi-card.amber::before{background:#f4a020;}
.fin-kpi-label{font-size:11px;font-weight:600;letter-spacing:var(--label-spacing);text-transform:uppercase;color:var(--color-tab-inactive);margin-bottom:6px;}
.fin-kpi-value{font-size:22px;font-weight:700;font-family:'Montserrat',sans-serif;line-height:1;margin-bottom:4px;color:var(--color-title);}
.fin-kpi-sub{font-size:11px;color:var(--color-tab-inactive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-chart-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:16px;}
.fin-chart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.fin-chart-title{font-size:13px;font-weight:700;font-family:'Montserrat',sans-serif;margin-bottom:2px;color:var(--color-title);}
.fin-chart-sub{font-size:11px;color:var(--color-sub);}
.toolbar-select{font-size:13px;font-family:'Montserrat',sans-serif;padding:7px 12px;border:0.5px solid var(--border-input);border-radius:8px;background:var(--bg-input);color:var(--color-input);transition:background .3s,color .3s;}
.toolbar-select option{background:var(--bg-select-opt);}
.toolbar-select:focus{border-color:var(--color-accent);}
.fin-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;margin-bottom:16px;}
.fin-filter-sep{width:0.5px;height:20px;background:var(--divider);margin:0 2px;}
.fin-select{font-size:12px;font-family:'Montserrat',sans-serif;padding:5px 8px;border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);background:var(--bg-field-input);color:var(--color-field-input);}
.fin-partner-banner{display:none;align-items:center;gap:12px;padding:10px 14px;background:rgba(77,77,255,.08);border:0.5px solid rgba(77,77,255,.25);border-radius:10px;margin-bottom:14px;font-size:13px;}
.fin-partner-banner.show{display:flex;}
.fin-partner-banner strong{font-weight:700;color:var(--color-toggle-hover);}
.fin-chip{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;}
.fin-chip.green{background:rgba(16,196,138,.15);color:var(--color-success-dark);}
.fin-chip.blue{background:rgba(77,77,255,.15);color:var(--color-accent);}

/* ─── DESIGN TOKENS ─── */
:root{
  /* Radius */
  --radius-btn:8px;
  --radius-card:12px;
  --radius-input:8px;
  --radius-modal:16px;
  --radius-pill:999px;
  /* Typography */
  --label-spacing:0.08em;
  --label-spacing-lg:0.12em;
  --text-xs:10px;
  --text-sm:12px;
  --text-base:14px;
  --text-lg:18px;
  --text-xl:22px;
  --text-2xl:28px;
  /* Spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  /* Semantic colors */
  --color-accent:#4D4DFF;
  --color-accent-light:#9393ff;
  --color-accent-dark:#2929a6;
  --color-accent-subtle:rgba(77,77,255,0.1);
  --color-success:#22c55e;
  --color-success-subtle:rgba(34,197,94,0.12);
  --color-danger:#ef4444;
  --color-danger-dark:#D94F4F;
  --color-danger-subtle:rgba(239,68,68,0.12);
  --color-warning:#f59e0b;
  --color-warning-subtle:rgba(245,158,11,0.12);
  --color-info:#06b6d4;
  --color-info-subtle:rgba(6,182,212,0.12);
  --color-success-dark:#10c48a;
  --color-accent-bg:rgba(77,120,255,0.16);
  --color-accent-border:rgba(147,147,255,0.4);
  --color-accent-muted:rgba(147,147,255,0.25);
  --color-accent-hover:rgba(77,77,255,0.15);
  --color-accent-active:rgba(77,77,255,0.2);
  --color-danger-light:#F87171;
  --color-warning-dark:#D4900A;
  --color-warning-light:#F0B429;
  --color-purple:#9b6dff;
  /* Azul de verdade, separado do --color-info (#06b6d4, ciano) e do
     --color-accent (#4D4DFF, azul-violeta): é a cor do cartão de Trade,
     que precisa se distinguir do roxo dos cartões vizinhos. */
  --color-blue:#3b82f6;
  /* Violeta dos títulos de seção no tema claro: --color-accent (#4D4DFF) é
     azul-violeta saturado e no cabeçalho puxava atenção demais. Este tom é
     mais suave e ainda passa em AA (4,8:1) sobre a faixa do cabeçalho. */
  --color-violet:#7350ee;
  --color-orange:#f97316;
  --color-peri:#6B6BDD;
  --color-blue-light:#6BA3FF;
  --color-admin:#c4c4ff;
  /* Shadows */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.12);
  --shadow-md:0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg:0 24px 60px rgba(72,73,251,0.15);
  --shadow-drawer:-8px 0 32px rgba(0,0,0,0.25);
  /* Transitions */
  --duration-fast:0.15s;
  --duration-normal:0.2s;
  --duration-slow:0.3s;
  /* Z-index scale */
  --z-dropdown:100;
  --z-drawer:200;
  --z-modal:300;
  --z-overlay:400;
  --z-toast:500;
  --z-gate:9999;
  /* Gradient */
  --gradient-brand:linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
  /* Focus — anel translúcido e colado no elemento: visível pro teclado
     (acessibilidade) sem o contorno duro que aparecia ao clicar em selects */
  --focus-ring:3px solid rgba(77,77,255,.28);
  --focus-offset:0px;
}

/* ─── GLOBAL ACCESSIBILITY ─── */
*:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);}
/* Campos de formulário nunca usam o anel: foco = borda tingida + halo mínimo
   colado (padrão SaaS). O !important garante consistência sobre as regras
   :focus específicas espalhadas pelo arquivo (toolbar, busca do kanban etc.). */
input:focus,select:focus,textarea:focus{outline:none!important;border-color:rgba(77,77,255,.45)!important;box-shadow:0 0 0 2px rgba(77,77,255,.10)!important;}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}

/* ─── TOUCH DEVICE: reveal hover-only controls ─── */
@media(hover:none){
  .ld-card-edit,.ob-card-edit,.kanban-card-edit,.ob-card-email{opacity:1!important;}
}

/* ─── TABLE OVERFLOW FIX ─── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ─── FIREFOX SCROLLBAR ─── */
.ld-board{scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;}
.ld-cards{scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;}
.main-content{scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;}

/* ─── SCORE BADGE: s-yellow usa laranja neutro (não periwinkle) ─── */
.ld-card-score.s-yellow{background:rgba(224,138,0,.15);color:#E08A00;}
.ld-score-badge.s-yellow{background:rgba(224,138,0,.15);color:#E08A00;}

/* ─── SIDEBAR BOTTOM (admin) ─── */
.sidebar-bottom{margin-top:auto;padding-top:12px;border-top:0.5px solid var(--divider);}
.sidebar-item.admin-item{color:var(--color-accent-light);}
.sidebar-item.admin-item:hover{background:rgba(147,147,255,0.12);color:var(--color-admin);}
.sidebar-item.admin-item.active{background:rgba(147,147,255,0.18);color:var(--color-admin);border-left:3px solid var(--color-accent-light);padding-left:11px;}

/* ─── SCREEN ADMIN ─── */
#screen-admin{padding:0;}
.adm-hdr{margin-bottom:24px;}
.adm-title{font-size:20px;font-weight:700;color:var(--color-title);margin-bottom:4px;}
.adm-sub{font-size:12px;color:var(--color-tab-inactive);}
.adm-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.adm-search{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:220px;}
.adm-search::placeholder{color:var(--color-tab-inactive);}
.adm-add-btn{display:flex;align-items:center;gap:6px;background:var(--gradient-brand);border:none;color:#fff;border-radius:var(--radius-btn);padding:8px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;margin-left:auto;}
.adm-add-btn:hover{opacity:.85;}
.adm-table-wrap{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);overflow:hidden;overflow-x:auto;}
.adm-table{width:100%;border-collapse:collapse;min-width:600px;font-size:13px;}
.adm-table thead th{background:var(--bg-thead);padding:10px 16px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--color-th);font-weight:700;border-bottom:0.5px solid var(--border-th);white-space:nowrap;}
.adm-table tbody tr{border-top:0.5px solid var(--border-td);transition:background .15s;}
.adm-table tbody tr:hover{background:rgba(77,77,255,.05);}
.adm-table tbody td{padding:11px 16px;vertical-align:middle;color:var(--color-td);}
.adm-email-cell{font-weight:600;color:var(--color-title);}
.adm-date-cell{font-size:12px;color:var(--color-tab-inactive);}
.adm-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.04em;white-space:nowrap;}
.adm-badge.allowed{background:rgba(34,197,94,.15);color:var(--color-success);border:0.5px solid rgba(34,197,94,.3);}
.adm-badge.blocked{background:rgba(239,68,68,.12);color:var(--color-danger);border:0.5px solid rgba(239,68,68,.3);}
.adm-badge.pending{background:rgba(147,147,255,.12);color:var(--color-accent-light);border:0.5px solid rgba(147,147,255,.3);}
.adm-actions{display:flex;gap:6px;align-items:center;}
.adm-btn{font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-btn);border:0.5px solid;cursor:pointer;font-family:'Montserrat',sans-serif;transition:all .15s;background:transparent;}
.adm-btn.allow{color:var(--color-success);border-color:rgba(34,197,94,.4);}
.adm-btn.allow:hover{background:rgba(34,197,94,.12);}
.adm-btn.block{color:var(--color-warning);border-color:rgba(245,158,11,.4);}
.adm-btn.block:hover{background:rgba(245,158,11,.1);}
.adm-btn.remove{color:var(--color-danger);border-color:rgba(239,68,68,.3);}
.adm-btn.remove:hover{background:rgba(239,68,68,.1);}
.adm-empty{padding:3rem;text-align:center;color:var(--color-tab-inactive);font-size:13px;}
.adm-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;align-items:center;justify-content:center;}
.adm-modal-bg.open{display:flex;}
/* max-height + rolagem: o modal de convite passou a ter área, perfil E a lista
   de abas, e numa tela de notebook ele estourava a viewport — o topo saía por
   cima e os botões Cancelar/Adicionar ficavam abaixo da dobra, sem rolagem
   nenhuma para alcançá-los. Vale para os três modais do Admin. */
.adm-modal{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-modal);padding:28px 32px;width:420px;max-width:95vw;
  max-height:90vh;overflow-y:auto;overscroll-behavior:contain;}
.adm-modal h3{font-size:16px;font-weight:700;color:var(--color-title);margin:0 0 20px;}
.adm-modal label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-label);display:block;margin-bottom:5px;}
.adm-modal input{width:100%;background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);padding:9px 13px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;box-sizing:border-box;}
.adm-modal input:focus{border-color:var(--color-accent);}
.adm-modal-err{font-size:11px;color:var(--color-danger);margin-top:8px;display:none;}
.adm-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}
.adm-modal-cancel{background:transparent;border:0.5px solid var(--border-cancel);color:var(--color-cancel);border-radius:var(--radius-btn);padding:7px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;cursor:pointer;}
.adm-modal-save{background:var(--gradient-brand);border:none;color:#fff;border-radius:var(--radius-btn);padding:8px 18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;}
.adm-modal-save:disabled{opacity:.5;cursor:default;}
/* A lista de abas é a parte que cresce (uma linha por aba da sidebar, e a nav
   só ganha abas com o tempo). Rolando aqui dentro, os botões do rodapé ficam
   sempre à vista — rolar o modal inteiro os empurraria para fora de novo a
   cada aba nova. O teto é generoso: mostra ~5 linhas, o bastante para a
   rolagem ser óbvia sem a lista virar uma fresta. */
.adm-tabs-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;
  max-height:266px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;}
.adm-tab-check{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:0.5px solid var(--border-metric);background:var(--bg-metric);cursor:pointer;transition:border-color .15s;}
.adm-tab-check:hover{border-color:var(--color-accent);}
.adm-tab-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--color-accent);cursor:pointer;flex-shrink:0;}
.adm-tab-check-label{font-size:13px;font-weight:600;color:var(--color-title);display:flex;align-items:center;gap:8px;}
.adm-tab-check-label i{font-size:15px;color:var(--color-accent-light);}
.adm-tabs-badge{font-size:10px;color:var(--color-tab-inactive);background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:4px;padding:2px 7px;font-weight:600;white-space:nowrap;}
/* área que saiu da lista e ainda está gravada em alguém: fica visível e
   marcada, senão a pessoa some do radar e nunca é reatribuída */
.adm-tabs-badge.is-legado{color:var(--color-warning-dark,#b45309);
  background:var(--color-warning-subtle,rgba(245,158,11,.12));
  border-color:color-mix(in srgb, var(--color-warning) 40%, transparent);}
.adm-tabs-badge.is-legado i{font-size:10px;vertical-align:-1px;}
/* área "Default": quem entrou sem convite e ainda não foi classificado. Tom de
   acento, não de alerta — é pendência de cadastro, não erro; o amarelo de
   .is-legado disputaria atenção com problema de verdade. */
.adm-tabs-badge.is-pendente{color:var(--color-accent-light);
  background:color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--color-accent) 38%, transparent);}
body.light .adm-tabs-badge.is-pendente{color:var(--color-accent);}
.adm-tabs-badge.is-pendente i{font-size:10px;vertical-align:-1px;}

/* ─── RESPONSIVE SIDEBAR ─── */
@media(max-width:1280px){.sidebar{width:220px;} .sidebar-logo{--brand-h:19px;}}
@media(max-width:1100px){
  .sidebar{width:56px;padding:1.5rem .5rem;}
  .sidebar-logo{display:none;}
  .sidebar-item span{display:none;}
  .sidebar-item{justify-content:center;padding:10px;}
  .sidebar-item.active{border-left:none;border-bottom:3px solid var(--color-accent);padding:10px;}
  .sidebar-item.admin-item.active{border-left:none;border-bottom:3px solid var(--color-accent-light);}
  .sidebar-item i{font-size:18px;}
}

/* ─── RESPONSIVE BODY ─── */
@media(max-width:768px){
  .main-content{padding:1rem 1rem 1.5rem;}
  .top-title{font-size:18px;}
  .metrics-4,.metrics-5,.metrics-6{grid-template-columns:repeat(3,1fr);}
  .fin-kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .metrics-4,.metrics-5,.metrics-6{grid-template-columns:repeat(2,1fr);}
}

/* ═══════════════════════════════════════════════
   MOBILE OVERRIDES (≤768px)
═══════════════════════════════════════════════ */
@media(max-width:768px){
  body{padding:0;}
  .dash{flex-direction:column;border-radius:0;min-height:100dvh;}
  .main-content{padding:.875rem .875rem 1.5rem;width:100%;box-sizing:border-box;}

  /* Top bar — compacto */
  .top-bar{flex-wrap:nowrap;gap:8px;padding-bottom:8px;align-items:flex-start;}
  .top-title{font-size:16px;}
  .top-sub{font-size:10px;}
  .top-bar-right{gap:6px;flex-shrink:0;margin-left:auto;}

  /* ── KPI grids ── */
  .fin-kpi-grid{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .metrics,.metrics-4,.metrics-5,.metrics-6{display:grid!important;grid-template-columns:1fr 1fr!important;}
  #screen-health .hs-kpi-grid{display:grid!important;grid-template-columns:1fr 1fr!important;}
  #screen-mkt .mkt-kpi-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}

  /* ── Analytics (stack on mobile) ── */
  .ld-analytics{flex-direction:column!important;gap:8px!important;padding:8px 12px!important;}
  .ld-analytics .ld-an-sep{width:100%!important;height:1px!important;align-self:auto!important;}
  .ld-analytics .ld-an-group{flex-wrap:wrap!important;}

  .ld-lifecycle{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:6px;padding-bottom:4px;}
  .ld-lifecycle-btn{font-size:11px;padding:6px 10px;}
  .ld-det-outcome-bar{flex-wrap:wrap;}
  #ld-outcome-table .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* ── Leads toolbar ── */
  #screen-leads .ld-toolbar{flex-wrap:wrap;gap:8px;}
  #screen-leads .ld-search{width:100%!important;flex:none;}
  #screen-leads .ld-toolbar>div{margin-left:0!important;width:100%;display:flex;gap:8px;}
  #screen-leads .ld-toolbar>div .add-btn{flex:1;}
  .ld-filters{flex-wrap:wrap;gap:6px;}
  .ld-filter-sel{flex:1;min-width:calc(50% - 3px);max-width:100%!important;}

  /* ── Leads kanban ── */
  #screen-leads .ld-board{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #ld-history-panel{width:100vw!important;max-width:100vw!important;}
  .ld-det-body{display:grid!important;grid-template-columns:minmax(0,1fr)!important;}
  /* 6 faixas, igual ao desktop: as linhas se posicionam por `span 3`/`span 2`,
     então forçar 2 colunas aqui criava colunas implícitas e desmontava a ficha.
     Quem vira coluna única é o bloco de 720px, mais abaixo. */
  .ld-det-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;}
  /* a classe é .ld-det-hdr — escrito .ld-det-header, esta regra nunca casou
     com nada e o cabeçalho seguia cortado no mobile também */
  .ld-det-hdr{gap:6px;row-gap:6px;}
  .ld-det-name{min-width:120px;}

  /* ── Financial ── */
  /* Sobrescreve inline grids das seções de gráfico */
  .fin-section>div{display:flex!important;flex-direction:column!important;}
  .fin-section>div>div.fin-chart-card{width:100%!important;box-sizing:border-box;}
  #fin-yoy-row{display:flex!important;flex-direction:column!important;}
  .fin-filters{flex-wrap:wrap;gap:6px;}
  .fin-qbtns{flex-wrap:wrap;gap:4px;}
  .fin-partner-banner.show{flex-wrap:wrap;gap:6px;}

  /* ── Tables — scroll horizontal ── */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;}
  #screen-health .hs-table-wrap,#screen-mkt table{overflow-x:auto;-webkit-overflow-scrolling:touch;display:block;}

  /* ── Toolbars (Migração, Integração) ── */
  .toolbar{display:grid!important;grid-template-columns:1fr auto!important;gap:6px;align-items:center;}
  .toolbar input[type="text"]{grid-column:1/2;}
  .toolbar select{grid-column:1/-1;}
  .toolbar .add-btn{white-space:nowrap;}
  /* Agrupa botões de ação numa linha */
  #screen-migracao .toolbar{display:flex!important;flex-wrap:wrap;gap:6px;}
  #screen-migracao .toolbar input{width:100%;flex:none;}

  /* ── Modais — bottom sheet ── */
  .modal-bg,#mig-modal-bg,#lead-modal-bg,.lf-modal-bg,.adm-modal-bg,.mkt-modal-bg{align-items:flex-end!important;}
  .modal,#lead-modal,.lf-modal,.adm-modal{
    width:100vw!important;max-width:100vw!important;
    border-radius:20px 20px 0 0!important;
    max-height:90vh!important;overflow-y:auto!important;
    box-sizing:border-box!important;
  }
  /* Duas colunas em 12rem de largura viram duas colunas espremidas. */
  .ld-form-grid{grid-template-columns:minmax(0,1fr)!important;}
  .ld-field.span2{grid-column:auto!important;}
  /* !important: este bloco vem ANTES das regras da casca no arquivo, e a
     especificidade é a mesma — sem isso o desktop ganharia por ser o último. */
  .lf-hdr{padding:18px 18px 14px!important;}
  .lf-modal .lf-corpo,.ld-tab-pane{padding:16px 18px 6px!important;}
  .lf-sec{padding:16px 15px!important;}
  .ld-modal-footer{padding:14px 18px!important;}
  .mkt-modal{width:100vw!important;max-width:100vw!important;border-radius:20px 20px 0 0!important;max-height:90vh!important;}
  .mkt-confirm-box{width:96vw!important;max-width:96vw!important;}

  /* ── Migração detalhe ── */
  #mig-detail-screen>div:first-child{flex-wrap:wrap;gap:8px;}

  /* ── Marketing ── */
  #screen-mkt .mkt-cad-grid,#ld-abm .mkt-cad-grid,#screen-mkt .mkt-cal-wrap{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  }

  /* ── Health ── */
  #screen-health .hs-charts-grid{display:grid!important;grid-template-columns:1fr!important;}
  #screen-health .hs-toolbar{flex-wrap:wrap;gap:8px;}
  #screen-health .hs-search{width:100%;}
}

/* ── 480px — telas muito pequenas ── */
@media(max-width:480px){
  .main-content{padding:.75rem .625rem calc(68px + env(safe-area-inset-bottom,0px));}
  .fin-kpi-grid{display:grid!important;grid-template-columns:1fr 1fr!important;}
  #screen-leads .ld-analytics .ld-an-sep{display:none!important;}
}

/* ─── HEALTH SCORE SCREEN ─── */
#screen-health{padding:0;}
#screen-health .hs-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
#screen-health .hs-search{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:210px;}
#screen-health .hs-search::placeholder{color:var(--color-tab-inactive);}
#screen-health .hs-sel{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;cursor:pointer;}
#screen-health .hs-chip{font-size:10px;color:var(--color-tab-inactive);background:var(--bg-metric);padding:5px 10px;border-radius:6px;border:0.5px solid var(--border-metric);font-weight:600;letter-spacing:.04em;}
#screen-health .hs-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px;}
@media(max-width:1200px){#screen-health .hs-kpi-grid{grid-template-columns:repeat(3,1fr)}}
#screen-health .hs-kpi{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:16px;position:relative;overflow:hidden;}
#screen-health .hs-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--hskc,var(--color-accent));}
#screen-health .hs-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-tab-inactive);font-weight:600;margin-bottom:8px;}
#screen-health .hs-kpi-val{font-size:26px;font-weight:700;color:var(--hskc,var(--color-accent));line-height:1;letter-spacing:-.02em;}
#screen-health .hs-kpi-sub{font-size:10px;color:var(--color-tab-inactive);margin-top:5px;font-weight:500;}
#screen-health .hs-sec{margin-bottom:24px;}
#screen-health .hs-sec-title{font-size:12px;font-weight:700;color:var(--color-sub);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
#screen-health .hs-sec-title::before{content:'';width:3px;height:13px;background:linear-gradient(135deg,#2929A6,var(--color-accent));border-radius:2px;flex-shrink:0;}
#screen-health .hs-sec-title::after{content:'';flex:1;height:0.5px;background:var(--border-metric);}
#screen-health .hs-formula{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-left:3px solid var(--color-accent);border-radius:8px;padding:10px 14px;font-size:11px;color:var(--color-tab-inactive);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:500;}
#screen-health .hs-formula strong{color:var(--color-title);}
#screen-health .hs-fbadge{background:rgba(77,77,255,.15);border:0.5px solid rgba(77,77,255,.4);border-radius:4px;padding:3px 9px;font-size:10px;color:var(--color-accent-light);font-weight:600;}
#screen-health .hs-tbl-wrap{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);overflow:hidden;overflow-x:auto;}
#screen-health table{width:100%;border-collapse:collapse;min-width:860px;font-size:14px;}
#screen-health thead th{background:var(--bg-thead);padding:10px 14px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--color-th);font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:0.5px solid var(--border-th);}
#screen-health thead th:hover,#screen-health thead th.hs-active{color:var(--color-accent-light);}
#screen-health tbody tr{border-top:0.5px solid var(--border-td);transition:background .15s;}
#screen-health tbody tr:hover{background:rgba(77,77,255,.06);}
#screen-health tbody td{padding:10px 14px;vertical-align:middle;color:var(--color-td);}
#screen-health .hs-pname{font-weight:700;color:var(--color-title);font-size:13px;}
#screen-health .hs-score-cell{display:flex;align-items:center;gap:10px;}
#screen-health .hs-score-num{font-size:19px;font-weight:700;min-width:36px;letter-spacing:-.02em;}
#screen-health .hs-bar-bg{flex:1;height:5px;background:var(--border-metric);border-radius:3px;min-width:60px;}
#screen-health .hs-bar-fill{height:5px;border-radius:3px;}
#screen-health .hs-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.02em;}
#screen-health .hs-nota-row{display:flex;gap:4px;flex-wrap:wrap;}
#screen-health .hs-nota{font-size:10px;color:var(--color-tab-inactive);background:var(--bg-metric);border:0.5px solid var(--border-metric);padding:2px 7px;border-radius:4px;font-weight:500;}
#screen-health .hs-nota b{color:var(--color-title);font-weight:700;}
#screen-health .hs-alerts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
#screen-health .hs-alert-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:12px 14px;}
#screen-health .hs-alert-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
#screen-health .hs-alert-name{font-weight:700;font-size:13px;flex:1;color:var(--color-title);}
#screen-health .hs-alert-reason{font-size:11px;color:var(--color-tab-inactive);line-height:1.6;font-weight:500;}
#screen-health .hs-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:1024px){#screen-health .hs-charts-grid{grid-template-columns:1fr}}
#screen-health .hs-chart-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:18px;}
#screen-health .hs-chart-title{font-size:10px;font-weight:700;color:var(--color-tab-inactive);margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em;}
#screen-health .hs-cw{position:relative;height:320px;}
#screen-health .hs-cw-tall{position:relative;height:500px;}
#screen-health tr.hs-hidden{display:none;}
#screen-health .mono{font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:.02em;}

/* ─── LEADS SCREEN ─── */
#screen-leads{padding:4px 0 0 4px;}
.ld-lifecycle{display:flex;gap:4px;flex-shrink:0;margin-bottom:12px;flex-wrap:wrap;}
.ld-lifecycle-btn{background:var(--bg-metric);border:1px solid var(--border-metric);border-radius:20px;padding:7px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--color-sub);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s,border-color .15s,transform .1s;white-space:nowrap;}
.ld-lifecycle-btn:hover{border-color:var(--color-tab-inactive);}
.ld-lifecycle-btn:active{transform:scale(.96);}
/* Selecionado = tinta suave na cor do próprio chip, sem contorno */
.ld-lifecycle-btn.active{background:rgba(77,77,255,.14);border-color:transparent;color:var(--color-accent-light);font-weight:700;}
/* Mesma armadilha documentada logo abaixo, no .lc-count: sem os :not(), esta
   regra (0,3,1 — o `body` conta) vence a cor de cada chip colorido (0,3,0) e
   pintava de azul o texto do chip selecionado, brigando com o fundo vermelho
   do Lost / âmbar do Stand-by no modo claro. */
body.light .ld-lifecycle-btn:not([data-lc="lost"]):not([data-lc="stand_by"]):not([data-lc="nao_qualificado"]):not([data-lc="opt_out"]).active{color:var(--color-accent);}
.ld-lifecycle-btn .lc-count{background:rgba(147,147,255,.15);color:var(--color-accent-light);border-radius:10px;padding:1px 7px;font-size:10px;font-weight:700;min-width:14px;text-align:center;}
/* Exclui os data-lc coloridos (Lost/Stand-by/Não qualificado/Opt-out) —
   sem isso, esta regra (necessária só pro chip azul "aberto", cuja cor
   ficava clara demais no fundo branco) ganha por especificidade sobre a
   cor de cada chip colorido e apaga o vermelho/âmbar do contador. */
body.light .ld-lifecycle-btn:not([data-lc="lost"]):not([data-lc="stand_by"]):not([data-lc="nao_qualificado"]):not([data-lc="opt_out"]) .lc-count{color:var(--color-accent);}
.ld-lifecycle-btn.active .lc-count{background:rgba(147,147,255,.3);}
.ld-lifecycle-btn[data-lc="lost"]{color:var(--color-danger-dark);} .ld-lifecycle-btn[data-lc="lost"].active{background:rgba(217,79,79,.13);border-color:transparent;color:var(--color-danger-dark);}
.ld-lifecycle-btn[data-lc="lost"] .lc-count{background:rgba(217,79,79,.15);color:var(--color-danger-dark);}
.ld-lifecycle-btn[data-lc="stand_by"]{color:var(--color-warning);} .ld-lifecycle-btn[data-lc="stand_by"].active{background:rgba(245,158,11,.13);border-color:transparent;color:var(--color-warning);}
.ld-lifecycle-btn[data-lc="stand_by"] .lc-count{background:rgba(245,158,11,.15);color:var(--color-warning);}
.ld-lifecycle-btn[data-lc="nao_qualificado"]{color:#8e8eaf;} .ld-lifecycle-btn[data-lc="nao_qualificado"].active{background:rgba(142,142,175,.14);border-color:transparent;color:#8e8eaf;}
.ld-lifecycle-btn[data-lc="nao_qualificado"] .lc-count{background:rgba(142,142,175,.15);color:#8e8eaf;}
.ld-lifecycle-btn[data-lc="opt_out"]{color:var(--color-danger);} .ld-lifecycle-btn[data-lc="opt_out"].active{background:rgba(239,68,68,.13);border-color:transparent;color:var(--color-danger);}
.ld-lifecycle-btn[data-lc="opt_out"] .lc-count{background:rgba(239,68,68,.15);color:var(--color-danger);}
#ld-outcome-table .int-table{border-collapse:separate;border-spacing:0;}
#ld-outcome-table .int-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-sub);padding:10px 12px;border-bottom:1px solid var(--border-metric);}
#ld-outcome-table .int-table td{padding:10px 12px;font-size:12px;color:var(--color-sub);border-bottom:0.5px solid var(--border-metric);}
.ld-outcome-actions{display:flex;gap:6px;}
.ld-outcome-actions button{background:none;border:1px solid var(--border-metric);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--color-label);transition:all .15s;}
.ld-outcome-actions button:hover{border-color:var(--color-accent-light);color:var(--color-accent-light);}
/* Ocupa a linha inteira do grid do detalhe — antes isso vinha do wrapper
   .ld-det-card, removido por arrastar a sombra dele junto. */
.ld-det-outcome-bar{display:flex;gap:6px;margin-top:4px;grid-column:1/-1;}
.ld-det-outcome-btn{background:none;border:1px solid var(--border-metric);border-radius:8px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--color-label);display:flex;align-items:center;gap:5px;transition:all .15s;}
.ld-det-outcome-btn:hover{border-color:var(--color-tab-inactive);color:var(--color-title);}
.ld-det-outcome-btn.danger{color:var(--color-danger-dark);border-color:rgba(217,79,79,.3);}
.ld-det-outcome-btn.danger:hover{background:rgba(217,79,79,.08);border-color:var(--color-danger-dark);}
.ld-det-outcome-btn.warn{color:var(--color-warning);border-color:rgba(245,158,11,.3);}
.ld-det-outcome-btn.warn:hover{background:rgba(245,158,11,.08);border-color:var(--color-warning);}
#screen-leads .ld-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;flex-shrink:0;}
.ld-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;flex-shrink:0;}
.ld-filters>.ti-filter{display:none;}
.ld-filter-sel{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:20px;padding:7px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:12px;cursor:pointer;max-width:180px;transition:background .15s,color .15s,border-color .15s;}
.ld-filter-sel:hover{border-color:var(--color-tab-inactive);}
.ld-filter-sel.active{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent-light);font-weight:600;}
.ld-toolbar-box{border:0.5px solid var(--border-metric);border-radius:14px;padding:12px 14px;margin-bottom:14px;flex-shrink:0;}
body.light .ld-toolbar-box{background:#fff;border-color:transparent;}
.ld-toolbar-box .ld-toolbar{margin-bottom:0!important;}
.ld-toolbar-box .ld-active-filters{margin-top:10px;padding-top:10px;border-top:0.5px solid var(--border-metric);margin-bottom:0;}
.ld-active-filters{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;flex-shrink:0;}
.ld-active-filters.visible{display:flex;}
.ld-active-filters-label{font-size:11px;font-weight:600;color:var(--color-sub);}
.ld-active-chip{display:flex;align-items:center;gap:6px;background:var(--color-accent-bg);border:0.5px solid var(--color-accent);color:var(--color-accent-light);border-radius:20px;padding:5px 8px 5px 12px;font-size:11px;font-weight:600;}
.ld-active-chip button{background:none;border:none;color:inherit;cursor:pointer;display:flex;align-items:center;padding:2px;border-radius:50%;transition:background .15s;}
.ld-active-chip button:hover{background:rgba(0,0,0,.12);}
.ld-clear-all-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--color-danger-light);font-size:11px;font-weight:700;cursor:pointer;padding:5px 8px;border-radius:8px;font-family:'Montserrat',sans-serif;transition:background .15s;}
.ld-clear-all-btn:hover{background:rgba(217,79,79,.1);}
.ld-more-filters-btn{display:flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;}
.ld-more-badge{background:var(--color-accent);color:#fff;border-radius:99px;padding:1px 7px;font-size:10px;font-weight:700;min-width:14px;text-align:center;}
.ld-more-filters-panel{display:none;position:fixed;z-index:5000;background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:10px;flex-direction:column;gap:8px;min-width:200px;}
.ld-more-filters-panel.open{display:flex;}
.ld-more-filters-panel .ld-filter-sel{width:100%;max-width:none;text-align:left;}
.ld-filter-clear{font-size:11px;font-weight:700;color:var(--color-danger-light);background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:8px;font-family:'Montserrat',sans-serif;display:none;margin-left:auto;transition:background .15s;}
.ld-filter-clear:hover{background:rgba(217,79,79,.1);}
.ld-filter-clear.visible{display:inline-flex;align-items:center;}
.ld-search-wrap{position:relative;display:inline-flex;align-items:center;}
.ld-search-wrap .ld-search{padding-right:30px!important;padding-left:32px!important;}
.ld-search-wrap .ld-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--color-tab-inactive);pointer-events:none;}
.ld-filters .ld-filter-clear{display:none;}
.ld-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:none;color:var(--color-tab-inactive);cursor:pointer;display:none;align-items:center;justify-content:center;border-radius:50%;font-size:14px;transition:background .15s,color .15s;}
.ld-search-clear:hover{background:rgba(217,79,79,.12);color:var(--color-danger-light);}
.ld-search-clear.visible{display:flex;}
.ld-card-owner{font-size:10px;color:var(--color-tab-inactive);margin-top:3px;display:flex;align-items:center;gap:3px;min-width:0;}
.ld-card-owner i{flex-shrink:0;}
.ld-card-owner>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-leads .ld-search{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:220px;}
#screen-leads .ld-search::placeholder{color:var(--color-tab-inactive);}
#screen-leads .ld-stats{flex-shrink:0;}
#screen-leads .ld-board{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;flex:1;align-items:stretch;scrollbar-width:thin;scrollbar-color:var(--border-metric) rgba(255,255,255,0.06);}
#screen-leads .ld-board::-webkit-scrollbar{height:6px;}
#screen-leads .ld-board::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:3px;}
#screen-leads .ld-board::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:3px;}
#screen-leads .ld-col{flex:0 0 260px;min-width:0;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;display:flex;flex-direction:column;}
/* Modo claro: coluna vira superfície branca sem borda visível — a separação
   do fundo fica por conta da sombra suave (regra unificada de sombreado). */
body.light #screen-leads .ld-col{background:#fff;border-color:transparent;}
#screen-leads .ld-col.drag-over{border-color:var(--color-accent-light);background:rgba(147,147,255,0.07);}
/* Altura fixa pelo mesmo motivo do Onboarding: com altura livre, a raia de
   nome mais longo fica mais alta e serrilha o topo do board. */
/* gap menor que o do Onboarding (5 contra 7): aqui o header carrega dois
   elementos a mais — o total em R$ e o "+" — e cada pixel de folga vinha do
   nome da raia, que passava a quebrar no meio da palavra ("AGUARDAN/DO"). */
#screen-leads .ld-col-hdr{position:relative;padding:10px 10px;display:flex;align-items:center;gap:5px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;height:54px;border-radius:11px 11px 0 0;background:color-mix(in srgb, var(--lane-color) 20%, var(--bg-metric));border-bottom-color:color-mix(in srgb, var(--lane-color) 35%, var(--border-metric));}
body.light #screen-leads .ld-col-hdr{background:color-mix(in srgb, var(--lane-color) 24%, #fff);border-bottom-color:transparent;}
body:not(.light) #screen-leads .ld-col-hdr{background:linear-gradient(135deg, color-mix(in srgb, var(--lane-color) 32%, #14121f), color-mix(in srgb, var(--lane-color) 6%, #0d0c14));border:1px solid color-mix(in srgb, var(--lane-color) 55%, transparent);border-bottom:1px solid color-mix(in srgb, var(--lane-color) 55%, transparent);}
#screen-leads .ld-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#screen-leads .ld-col-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-sub);line-height:1.3;flex:1;min-width:0;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:break-word;}
/* Soma do valor dos leads da raia — era style inline; virou classe pra
   encolher junto com o resto do header. A cor não é var(--color-label)
   como antes porque ali dava 3.9:1 sobre o header tingido, abaixo de AA;
   é o tom do título aguado, que passa (6:1) sem competir com o nome. */
#screen-leads .ld-col-val{flex-shrink:0;font-size:9px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--color-title) 75%, transparent);}
/* aparência do "+" é compartilhada com o Onboarding lá em cima (.ob-col-add,
   #screen-leads .ld-col-add) — não redeclarar aqui, senão esta regra, por vir
   depois, vence e os dois quadros ficam diferentes */
#screen-leads .ld-cards{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-width:0;scrollbar-gutter:stable;}
#screen-leads .ld-cards::-webkit-scrollbar{width:3px;}
#screen-leads .ld-cards::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:2px;}
#screen-leads .ld-card{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:10px;padding:12px 14px;cursor:grab;transition:box-shadow .15s,transform .12s,border-color .15s;position:relative;min-width:0;}
#screen-leads .ld-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);border-color:var(--color-accent-border);}
/* Modo claro: card branco quase sem borda, flutuando com sombra em duas
   camadas; no hover levanta 1px em vez de escurecer a borda. */
body.light #screen-leads .ld-card{border-color:rgba(90,90,180,.08);box-shadow:0 1px 2px rgba(30,30,90,.05),0 3px 10px rgba(30,30,90,.06);}
body.light #screen-leads .ld-card:hover{transform:translateY(-1px);border-color:rgba(90,90,180,.12);box-shadow:0 2px 4px rgba(30,30,90,.06),0 8px 20px rgba(30,30,90,.10);}
#screen-leads .ld-card.dragging{opacity:.45;transform:scale(.97);cursor:grabbing;}
/* nome + score na mesma linha, score o mais à direita possível. O padding-right
   reserva a faixa do botão de editar (position:absolute, right:8px, ~16px de
   largura, visível só no hover) — sem ele o botão cobriria o score. */
#screen-leads .ld-card-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding-right:14px;}
#screen-leads .ld-card-name{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--color-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-leads .ld-card-contact{font-size:11px;color:var(--color-tab-inactive);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-leads .ld-card-origem{font-size:10px;color:var(--color-tab-inactive);background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:4px;padding:1px 7px;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;}
body.light #screen-leads .ld-card-origem{background:#F2F3FA;border-color:transparent;}
#screen-leads .ld-card-date{font-size:10px;color:var(--color-tab-inactive);}
#screen-leads .ld-card-notes{font-size:10px;color:var(--color-tab-inactive);margin-top:5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#screen-leads .ld-card-edit{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;padding:2px;border-radius:4px;font-size:12px;opacity:0;transition:opacity .15s;}
#screen-leads .ld-card:hover .ld-card-edit{opacity:1;}
#screen-onboarding .ob-card-email{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;padding:2px;border-radius:4px;font-size:12px;opacity:0;transition:opacity .15s;}
#screen-onboarding .ob-card:hover .ob-card-email{opacity:1;}
.ld-card-outcomes,.ob-card-outcomes{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity .15s;}
.ld-card:hover .ld-card-outcomes,.ob-card:hover .ob-card-outcomes{opacity:1;}
.card-outcome-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:3px;background:none;border:0.5px solid var(--border-metric);border-radius:5px;padding:3px 0;font-size:9px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--color-sub);white-space:nowrap;transition:all .12s;letter-spacing:.02em;}
.card-outcome-btn:hover{color:var(--color-title);border-color:var(--color-tab-inactive);background:var(--bg-metric);}
.card-outcome-btn.danger{color:var(--color-danger-dark);border-color:rgba(217,79,79,.25);}
.card-outcome-btn.danger:hover{background:rgba(217,79,79,.08);border-color:var(--color-danger-dark);}
.card-outcome-btn.warn{color:var(--color-warning);border-color:rgba(245,158,11,.25);}
.card-outcome-btn.warn:hover{background:rgba(245,158,11,.08);border-color:var(--color-warning);}
#screen-leads .ld-col-info,#screen-onboarding .ld-col-info{position:relative;color:var(--color-sub);font-size:12px;cursor:help;line-height:1;margin-left:0;flex-shrink:0;}
#ld-col-tip-float{display:none;position:fixed;background:#1a1a2e;color:#e0e0e0;border:1px solid #333;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;line-height:1.5;width:280px;white-space:normal;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:9000;pointer-events:none;}
body.light #ld-col-tip-float{background:#fff;color:#222;border:1px solid #ccc;box-shadow:0 8px 32px rgba(0,0,0,.18);}
#ld-col-tip-float.show{display:block;}
#screen-leads .ld-col-dot{cursor:pointer;}
#screen-leads .ld-col-name{cursor:pointer;border-radius:4px;padding:1px 4px;margin:-1px -4px;}
#screen-leads .ld-col-name:hover{background:rgba(255,255,255,.06);}
body.light #screen-leads .ld-col-name:hover{background:rgba(0,0,0,.04);}
#screen-leads .ld-add-col{flex:0 0 200px;background:transparent;border:1.5px dashed var(--border-metric);border-radius:12px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s;}
#screen-leads .ld-add-col:hover{border-color:var(--color-accent-light);background:rgba(147,147,255,0.05);}
#screen-leads .ld-add-col i{font-size:22px;color:var(--color-tab-inactive);}
#screen-leads .ld-add-col span{font-size:11px;font-weight:700;color:var(--color-tab-inactive);text-transform:uppercase;letter-spacing:.07em;}
#screen-leads .ld-new-col-form{flex:0 0 200px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;align-self:flex-start;}
#screen-leads .ld-new-col-title{font-size:10px;font-weight:700;color:var(--color-sub);text-transform:uppercase;letter-spacing:var(--label-spacing);}
#screen-leads .ld-new-col-input{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:7px;padding:7px 10px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:12px;width:100%;box-sizing:border-box;}
#screen-leads .ld-new-col-input:focus{border-color:var(--color-accent-light);}
#screen-leads .ld-new-col-color-row{display:flex;align-items:center;gap:8px;}
#screen-leads .ld-new-col-color-lbl{font-size:10px;color:var(--color-tab-inactive);font-weight:600;}
#screen-leads .ld-new-col-color-inp{width:38px;height:28px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0;}
#screen-leads .ld-new-col-btns{display:flex;gap:6px;}
#screen-leads .ld-new-col-save{flex:1;background:var(--gradient-brand);border:none;color:#fff;border-radius:var(--radius-btn);padding:7px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:opacity .2s;}
#screen-leads .ld-new-col-save:hover{opacity:0.88;}
#screen-leads .ld-new-col-cancel{flex:1;background:transparent;border:0.5px solid var(--border-metric);color:var(--color-tab-inactive);border-radius:var(--radius-btn);padding:7px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:background .2s;}
.ld-empty{text-align:center;padding:20px 10px;color:var(--color-accent-muted);font-size:11px;font-weight:600;letter-spacing:.04em;}
.ld-analytics{display:flex;gap:12px;margin-bottom:14px;align-items:stretch;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:10px;padding:10px 16px;}
.ld-analytics .ld-an-group{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.ld-analytics .ld-an-group-label{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;}
.ld-analytics .ld-an-sep{width:1px;align-self:stretch;background:var(--border-metric);flex-shrink:0;}
.ld-analytics .ld-an-stages{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.ld-analytics .ld-an-stage{display:inline-flex;align-items:center;gap:3px;padding:2px 0;font-size:11px;color:var(--color-sub);white-space:nowrap;}
.ld-analytics .ld-an-stage-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ld-analytics .ld-an-stage-val{font-weight:800;color:var(--color-title);font-size:12px;}
.ld-analytics .ld-an-stage-sep{color:var(--border-metric);font-size:10px;margin:0 1px;}
.ld-analytics .ld-an-rates{display:flex;gap:14px;align-items:center;}
.ld-analytics .ld-an-rate{display:flex;align-items:baseline;gap:5px;white-space:nowrap;}
.ld-analytics .ld-an-rate-label{font-size:10px;font-weight:600;color:var(--color-sub);}
.ld-analytics .ld-an-rate-pct{font-size:16px;font-weight:800;}
.ld-analytics .ld-an-rate-detail{font-size:9px;color:var(--color-sub);}
.ld-analytics .ld-an-empty{font-size:11px;color:var(--color-sub);}
/* ── View Switcher ── */
.ld-view-switch{display:flex;gap:4px;margin-bottom:12px;}
.ld-view-btn{background:var(--bg-metric);border:1px solid var(--border-metric);border-radius:var(--radius-btn);padding:6px 14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--color-sub);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s,border-color .15s,transform .1s;}
.ld-view-btn:hover{border-color:var(--color-tab-inactive);}
.ld-view-btn:active{transform:scale(.96);}
/* Selecionado = tinta suave, sem contorno (a borda some, o fundo tinge) */
.ld-view-btn.active{background:rgba(77,77,255,.13);border-color:transparent;color:var(--color-accent-light);font-weight:700;}
body.light .ld-view-btn.active{color:var(--color-accent);}

/* ── Funnel Panel ── */
#ld-funnel{display:none;flex-direction:column;flex:1;overflow-y:auto;min-height:0;padding:8px;}
#ld-funnel.open{display:flex;}
#ob-funnel{display:none;flex-direction:column;flex:1;overflow-y:auto;min-height:0;padding:8px;}
#ob-funnel.open{display:flex;}
.fn-empty{text-align:center;padding:40px 20px;color:var(--color-tab-inactive);font-size:13px;}
.fn-empty i{display:block;font-size:32px;margin-bottom:10px;opacity:.4;}

/* ═══ FUNIL V2 — layout mockup "Revenue" (abas Leads e Onboarding → Funil) ═══ */
#ld-funnel,#ob-funnel{
  --fn2-card:var(--bg-metric); --fn2-border:var(--border-metric);
  --fn2-title:var(--color-title); --fn2-sub:var(--color-sub); --fn2-muted:var(--color-tab-inactive);
  --fn2-icobg:rgba(147,147,255,.10);
  --fn2-green:#22C55E; --fn2-red:#F87171; --fn2-indigo:#818CF8;
  --fn2-insight-bg:rgba(99,102,241,.12);
}
body.light #ld-funnel,body.light #ob-funnel{
  --fn2-card:#FFFFFF; --fn2-border:#E5E7EB;
  --fn2-title:#111827; --fn2-sub:#6B7280; --fn2-muted:#9CA3AF;
  --fn2-icobg:#F3F4F6;
  --fn2-green:#16A34A; --fn2-red:#EF4444; --fn2-indigo:#4F46E5;
  --fn2-insight-bg:#EEF2FF;
}
.fn2-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;justify-content:flex-end;}
.fn2-pill{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--fn2-card);border:1px solid var(--fn2-border);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--fn2-title);font-family:'Montserrat',sans-serif;cursor:pointer;user-select:none;}
.fn2-pill:hover{border-color:var(--color-accent-light);}
.fn2-pill>i{font-size:15px;color:var(--fn2-sub);pointer-events:none;}
.fn2-pill .ti-chevron-down{font-size:13px;transition:transform .15s;}
.fn2-pill.fn2-dd-open .ti-chevron-down{transform:rotate(180deg);}
.fn2-pill select{position:absolute;inset:0;opacity:0;pointer-events:none;}
.fn2-dd-label{pointer-events:none;white-space:nowrap;}
.fn2-dd-list{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--bg-modal);border:1px solid var(--fn2-border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:5px;z-index:700;display:none;max-height:280px;overflow-y:auto;}
.fn2-dd-list.open{display:block;}
.fn2-dd-item{padding:8px 12px;border-radius:7px;font-size:13px;font-weight:500;font-family:'Montserrat',sans-serif;color:var(--fn2-title);cursor:pointer;white-space:nowrap;}
.fn2-dd-item:hover{background:var(--color-accent);color:#fff;}
.fn2-dd-item.sel{background:var(--color-accent);color:#fff;font-weight:600;}
.fn2-pill-sm{padding:6px 10px;border-radius:9px;}

/* Dropdown customizado genérico — aplicado a todo <select> do dashboard (ver _ddEnhance) */
.dd-wrap{position:relative;}
/* A transição de cor mora aqui, no gatilho, e não no <select> de origem: o select
   fica com transition:none pra que restyle() leia o valor final da cor (ver
   comentário em _ddEnhance). */
.dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;overflow:hidden;transition:background .15s,color .15s,border-color .15s;}
.dd-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.dd-trigger .ti-chevron-down{font-size:12px;opacity:.6;flex-shrink:0;transition:transform .15s;margin-left:4px;}
.dd-wrap.dd-open .dd-trigger .ti-chevron-down{transform:rotate(180deg);}
.dd-list{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:var(--bg-modal);border:1px solid var(--border-metric);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:5px;z-index:900;display:none;max-height:280px;overflow-y:auto;}
.dd-list.open{display:block;}
.dd-item{padding:7px 11px;border-radius:6px;font-size:13px;font-family:'Montserrat',sans-serif;color:var(--color-title);cursor:pointer;white-space:nowrap;}
/* Hover usa o MESMO azul da opção selecionada: o realce cinza anterior
   não deixava claro qual linha o clique ia pegar. O item já selecionado
   continua distinguível pelo peso da fonte (600), que o hover não muda. */
.dd-item:hover{background:var(--color-accent);color:#fff;}
.dd-item.sel{background:var(--color-accent);color:#fff;font-weight:600;}
.fn2-pill-sm select{font-size:12px;}
.fn2-pill-btn{cursor:pointer;transition:background .15s;}
.fn2-pill-btn:hover{background:var(--fn2-icobg);}
.fn2-icon-btn{background:var(--fn2-card);border:1px solid var(--fn2-border);border-radius:9px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--fn2-sub);cursor:pointer;font-size:15px;}
.fn2-icon-btn:hover{color:var(--fn2-title);}
.fn2-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.fn2-kpi{background:var(--fn2-card);border:1px solid var(--fn2-border);border-radius:14px;padding:16px 18px;position:relative;}
.fn2-kpi-ico{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--fn2-insight-bg);display:flex;align-items:center;justify-content:center;color:var(--fn2-indigo);font-size:17px;}
.fn2-kpi-lbl{font-size:12.5px;font-weight:500;color:var(--fn2-sub);margin-bottom:12px;padding-right:44px;}
.fn2-kpi-val{font-size:28px;font-weight:800;color:var(--fn2-title);letter-spacing:-.02em;margin-bottom:10px;line-height:1;}
.fn2-kpi-delta{font-size:11.5px;font-weight:700;display:flex;gap:5px;align-items:center;}
#ld-funnel .d-up,#ob-funnel .d-up{color:var(--fn2-green);}
#ld-funnel .d-down,#ob-funnel .d-down{color:var(--fn2-red);}
#ld-funnel .d-flat,#ob-funnel .d-flat{color:var(--fn2-muted);font-weight:600;letter-spacing:.1em;}
#ld-funnel .d-vs,#ob-funnel .d-vs{color:var(--fn2-sub);font-weight:500;}
.fn2-card{background:var(--fn2-card);border:1px solid var(--fn2-border);border-radius:14px;padding:18px 20px;margin-bottom:16px;}
.fn2-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.fn2-card-title{font-size:14.5px;font-weight:700;color:var(--fn2-title);display:flex;align-items:center;gap:7px;}
.fn2-card-title i{font-size:14px;color:var(--fn2-muted);}
.fn2-head-ctrls{display:flex;gap:8px;align-items:center;}
.fn2-fhead{display:grid;grid-template-columns:230px 110px 1fr 90px 150px;gap:12px;padding:6px 0 10px;border-bottom:1px solid var(--fn2-border);font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--fn2-muted);text-transform:uppercase;}
.fn2-frow{display:grid;grid-template-columns:230px 110px 1fr 90px 150px;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--fn2-border);}
.fn2-frow:last-child{border-bottom:none;}
.fn2-stage{display:flex;gap:9px;align-items:center;min-width:0;}
.fn2-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fn2-stage-name{font-size:13px;font-weight:600;color:var(--fn2-title);line-height:1.3;}
.fn2-stage-sub{font-size:11px;color:var(--fn2-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:195px;}
.fn2-leads-n{font-size:13.5px;font-weight:700;color:var(--fn2-title);}
.fn2-fbar-track{height:14px;background:var(--fn2-icobg);border-radius:8px;cursor:pointer;overflow:hidden;}
.fn2-fbar-fill{height:100%;min-width:2%;border-radius:8px;transition:width .3s ease;}
.fn2-fbar-track:hover .fn2-fbar-fill{opacity:.85;}
.fn2-conv{font-size:13px;font-weight:600;color:var(--fn2-title);text-align:right;}
.fn2-vs{font-size:12px;text-align:right;}
.fn2-fnote{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--fn2-sub);}
.fn2-fnote i{font-size:15px;color:#EAB308;flex-shrink:0;}
.fn2-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:26px;}
.fn2-bottom .fn2-card{margin-bottom:0;min-width:0;}
.fn2-donut-wrap{display:flex;align-items:center;gap:20px;}
.fn2-donut-box{position:relative;width:150px;height:150px;flex-shrink:0;}
.fn2-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.fn2-donut-total{font-size:23px;font-weight:800;color:var(--fn2-title);line-height:1;}
.fn2-donut-totlbl{font-size:11px;color:var(--fn2-sub);margin-top:3px;}
.fn2-legend{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1;}
.fn2-lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.fn2-lg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.fn2-lg-name{color:var(--fn2-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fn2-lg-val{font-weight:700;color:var(--fn2-title);margin-left:auto;white-space:nowrap;}
.fn2-lg-pct{color:var(--fn2-muted);font-weight:500;}

/* ── Participação por fonte (barras de ênfase) ──────────────────────────
   Uma cor de acento para a fonte que puxa, cinza para o resto. Quem nomeia
   cada linha é o RÓTULO, não a cor — por isso não há legenda: a identidade
   nunca depende de cor aqui. */
.fn2-share-hero{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;
  font-size:12.5px;line-height:1.45;color:var(--fn2-sub);}
.fn2-share-hero i{font-size:15px;color:var(--color-accent);flex:none;margin-top:1px;}
.fn2-share-hero b{color:var(--fn2-title);font-weight:800;}
.fn2-share-rows{display:flex;flex-direction:column;gap:9px;}
.fn2-share-row{display:grid;grid-template-columns:minmax(58px,1.15fr) minmax(0,2.6fr) 38px 30px;
  align-items:center;gap:10px;cursor:pointer;border-radius:7px;padding:3px 5px;margin:0 -5px;
  border:none;background:none;transition:background .15s;}
.fn2-share-row:hover,.fn2-share-row:focus-visible{background:var(--fn2-hover,rgba(127,127,160,.09));}
.fn2-share-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;}
.fn2-share-rot{font-size:12.5px;color:var(--fn2-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fn2-share-row.is-lider .fn2-share-rot{color:var(--fn2-title);font-weight:700;}
.fn2-share-row.is-agg .fn2-share-rot{font-style:italic;color:var(--fn2-muted);}
/* Trilho a um tom da superfície; a barra é fina e arredondada só na ponta
   do dado, quadrada na linha de base (a borda esquerda). */
.fn2-share-track{height:8px;border-radius:4px;background:var(--fn2-border);overflow:hidden;min-width:0;}
.fn2-share-bar{display:block;height:100%;border-radius:0 4px 4px 0;
  background:color-mix(in srgb,var(--fn2-sub) 38%,transparent);transition:width .3s;}
.fn2-share-row.is-lider .fn2-share-bar{background:var(--color-accent);}
.fn2-share-pct{font-size:12.5px;font-weight:700;color:var(--fn2-sub);text-align:right;
  font-variant-numeric:tabular-nums;}
.fn2-share-row.is-lider .fn2-share-pct{color:var(--color-accent);}
.fn2-share-n{font-size:11.5px;color:var(--fn2-muted);text-align:right;font-variant-numeric:tabular-nums;}
@media(max-width:520px){
  /* Estreito, o rótulo ganha a linha inteira e a barra desce — truncar nome
     de fonte a 58px transformaria "LinkedIn Ads" em "Link…". */
  .fn2-share-row{grid-template-columns:minmax(0,1fr) 38px 30px;}
  .fn2-share-rot{grid-column:1/-1;white-space:normal;}
}
.fn2-srctable{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;}
.fn2-srctable th{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fn2-muted);text-align:left;padding:8px 4px;border-bottom:1px solid var(--fn2-border);overflow:hidden;text-overflow:ellipsis;}
.fn2-srctable th:nth-child(1){width:18%;}
.fn2-srctable th:nth-child(2){width:14%;}
.fn2-srctable th:nth-child(3){width:16%;}
.fn2-srctable th:nth-child(4){width:13%;}
.fn2-srctable th:nth-child(5){width:16%;}
.fn2-srctable th:nth-child(6){width:16%;}
.fn2-srctable td{font-size:12.5px;color:var(--fn2-title);padding:10px 4px;border-bottom:1px solid var(--fn2-border);overflow:hidden;text-overflow:ellipsis;}
.fn2-srctable tr:last-child td{border-bottom:none;}
.fn2-srctable .fn2-rate{color:var(--fn2-indigo);font-weight:700;}
.fn2-insight{display:flex;align-items:center;gap:14px;background:var(--fn2-insight-bg);border-radius:12px;padding:14px 18px;flex-wrap:wrap;}
.fn2-insight-title{font-weight:700;font-size:13px;color:var(--fn2-title);display:flex;gap:7px;align-items:center;white-space:nowrap;}
.fn2-insight-txt{font-size:12.5px;color:var(--fn2-sub);flex:1;min-width:200px;}
.fn2-insight-btn{background:var(--fn2-card);border:1px solid var(--fn2-border);border-radius:9px;padding:9px 14px;font-size:12px;font-weight:600;color:var(--fn2-title);cursor:pointer;font-family:'Montserrat',sans-serif;display:inline-flex;gap:6px;align-items:center;}
.fn2-insight-btn:hover{background:var(--fn2-icobg);}
@media(max-width:1200px){ .fn2-kpis{grid-template-columns:repeat(3,1fr);} .fn2-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
@media(max-width:900px){
  .fn2-kpis{grid-template-columns:1fr 1fr;}
  .fn2-bottom{grid-template-columns:minmax(0,1fr);}
  .fn2-fhead,.fn2-frow{grid-template-columns:150px 80px 1fr 70px 100px;gap:8px;}
  .fn2-stage-sub{display:none;}
}

/* ── Lead Detail Sub-screen ── */
#ld-kanban{display:flex;flex-direction:column;flex:1;min-height:0;}
#ld-detail{display:none;flex-direction:column;flex:1;overflow-y:auto;min-height:0;}
#ld-detail.open{display:flex;}
#ld-outcome-table{flex:1;overflow-y:auto;min-height:0;}
#ob-detail{display:none;flex-direction:column;flex:1;overflow-y:auto;min-height:0;}
#ob-detail.open{display:flex;}
/* Quebra de linha é obrigatória aqui: quase todo botão da barra é
   flex-shrink:0, então quando a soma deles passa da largura o excedente
   TRANSBORDA — e como #ld-detail é overflow:auto, o que passou vira rolagem
   horizontal com o botão cortado na ponta (o "Converter" era o sacrificado).
   Com wrap, o que não couber desce pra segunda linha inteiro. */
/* justify-content só age onde sobra espaço: na primeira linha o nome (flex:1)
   já consome tudo, então "Voltar" continua colado à esquerda; na linha que
   quebrou ele empurra os botões pra direita, embaixo dos outros. */
/* A barra é opaca porque é sticky — o conteúdo passa por baixo dela. Sendo
   opaca, ela é um retângulo VISÍVEL sobre o fundo da página, e de cantos
   retos ela destoava de tudo em volta: no tema claro virava um bloco branco
   com as pontinhas quadradas em cima do fundo lavanda (no escuro passava
   batido porque --bg-modal quase se confunde com o fundo). Agora usa o mesmo
   raio e a mesma borda dos cartões da ficha, logo abaixo dela. */
.ld-det-hdr{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;row-gap:8px;padding:12px 18px;border:0.5px solid var(--border-metric);border-radius:16px;margin-bottom:20px;flex-shrink:0;position:sticky;top:0;z-index:20;background:var(--bg-modal);}
.ld-det-back{display:flex;align-items:center;gap:6px;background:none;border:0.5px solid var(--border-cancel);color:var(--color-cancel);border-radius:var(--radius-btn);padding:6px 14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;flex-shrink:0;}
.ld-det-back:hover{background:rgba(147,147,255,0.08);}
/* min-width faz o nome participar da conta de quebra: com flex-basis 0 ele
   encolheria até sumir antes de qualquer botão descer de linha. */
.ld-det-name{font-size:18px;font-weight:700;color:var(--color-title);flex:1;min-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ld-det-stage{font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.05em;flex-shrink:0;white-space:nowrap;}
/* Badge da raia como controle. A cor vem por style inline (é a cor da raia),
   então o que muda no hover é só o realce — sem trocar a cor, que é
   informação. A setinha diz que ali tem uma lista. */
.ld-det-stage.is-clicavel{cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  transition:box-shadow .12s,filter .12s;}
.ld-det-stage.is-clicavel i{font-size:12px;opacity:.7;line-height:1;}
.ld-det-stage.is-clicavel:hover{filter:brightness(1.12);
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);}
.ld-det-stage.is-clicavel:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
body.viewer-mode .ld-det-stage.is-clicavel{cursor:default;pointer-events:none;}
body.viewer-mode .ld-det-stage.is-clicavel::after{display:none;}
.ld-det-edit{display:flex;align-items:center;gap:6px;background:var(--gradient-brand);border:none;color:#fff;border-radius:var(--radius-btn);padding:7px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .2s;flex-shrink:0;}
.ld-det-delete{display:flex;align-items:center;justify-content:center;background:none;border:0.5px solid var(--border-cancel);color:var(--color-danger-light);border-radius:var(--radius-btn);padding:7px 10px;font-size:13px;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;}
.ld-det-delete:hover{background:rgba(217,79,79,.1);color:var(--color-danger-dark);}
.ld-det-edit:hover{opacity:.88;}
.ld-det-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;flex-shrink:0;}
.ld-det-body.full{grid-template-columns:minmax(0,1fr);}
/* Faixa de saída do funil (Não-qualificado / Lost / Stand-by) no topo do
   detalhe. --lc é a cor do estado, vinda do JS. Ocupa a largura toda porque
   .ld-det-body é um grid de 2 colunas. */
.lc-ban{grid-column:1/-1;background:color-mix(in srgb, var(--lc) 10%, transparent);border:0.5px solid color-mix(in srgb, var(--lc) 35%, transparent);border-left:3px solid var(--lc);border-radius:var(--radius-card);padding:14px 18px;}
.lc-ban-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lc-ban-head > i{color:var(--lc);font-size:16px;line-height:1;}
.lc-ban-title{color:var(--lc);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.lc-ban-meta{color:var(--color-sub);font-size:11px;font-weight:600;}
.lc-ban-btn{margin-left:auto;background:none;border:1px solid color-mix(in srgb, var(--lc) 45%, transparent);color:var(--lc);border-radius:6px;padding:5px 12px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s;}
.lc-ban-btn:hover{background:color-mix(in srgb, var(--lc) 14%, transparent);}
/* As linhas reusam .ld-det-row (edição inline); só ajusta o respiro e tira a
   borda divisória, que aqui competiria com a borda da própria faixa. */
.lc-ban-body .ld-det-row{padding:8px 0 0;border-bottom:none;}
.lc-ban-body{margin-top:2px;}
.ld-det-card{--sec-cor:var(--color-violet);--sec-txt:var(--color-violet);
  background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:16px;padding:18px 20px;}
/* Cabeçalho em faixa: sangra até a borda do cartão pelas margens negativas
   (que valem exatamente o padding do .ld-det-card) em vez de overflow:hidden
   no cartão — o cartão hospeda popover de edição inline e clipar cortaria.
   O arredondamento de topo repete o do cartão pra faixa não quadrar o canto. */
/* No escuro o tom cheio é clareado; no claro, o rebaixado (--sec-txt). É a
   mesma cor da seção nos dois temas, só muda de que lado do fundo ela foge.
   62% acerta o #aaaaff que o violeta já usava antes. */
.ld-det-card-title{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--sec-cor) 62%,#fff);text-transform:uppercase;letter-spacing:var(--label-spacing-lg);display:flex;align-items:center;gap:12px;
  margin:-18px -20px 8px;padding:13px 20px;border-radius:16px 16px 0 0;
  background:color-mix(in srgb,var(--sec-cor) 12%,transparent);border-bottom:0.5px solid var(--border-metric);}
body.light .ld-det-card-title{color:var(--sec-txt);background:color-mix(in srgb,var(--sec-cor) 6%,transparent);}
/* O ícone herda a cor do título em vez de ter a sua: seção e selo nunca
   dessincronizam. O seletor é `>i` porque o ícone de Taxas mora dentro de um
   <span> próprio (.tx-section-icon-badge) — pegá-lo aqui criaria selo dentro
   de selo. */
.ld-det-card-title>i{font-size:15px;color:inherit;width:28px;height:28px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  background:color-mix(in srgb,var(--sec-cor) 16%,transparent);}
body.light .ld-det-card-title>i{background:color-mix(in srgb,var(--sec-cor) 11%,transparent);}
/* align-items:stretch (e não start) porque a borda de baixo pertence a cada
   linha: com start, duas linhas lado a lado param cada uma na própria altura
   e os traços caem desencontrados. Basta uma ter botão de editar no rótulo
   (min-height:20px contra 12px do rótulo pelado) ou um valor que quebre em
   duas linhas. Esticando, as duas terminam juntas; o conteúdo continua no
   topo porque .ld-det-row é flex em coluna. */
/* 6 colunas para o mesmo grid aceitar meio (3), inteiro (6) e terço (2)
   sem trocar de contêiner. Visualmente continua sendo duas colunas: o
   padrão é span 3. */
.ld-det-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:0 18px;align-items:stretch;}
.ld-det-row{grid-column:span 3;display:flex;flex-direction:column;gap:8px;padding:19px 0;border-bottom:0.5px solid var(--border-metric);}
/* A última FILEIRA (não só a última célula) fica sem traço embaixo — quem
   marca é _detMarcaColunas, medindo. `:last-child` sozinho deixava o traço
   sob as duas primeiras células de uma fileira de terços. */
.ld-det-row:last-child,.ld-det-row.ultima-linha{border-bottom:none;}
.ld-det-row.full{grid-column:1/-1;}
.ld-det-row.col2{grid-column:4/7;}
.ld-det-row.terco{grid-column:span 2;}
/* Divisória vertical em toda linha que não começa na primeira coluna —
   vale tanto pras de meia largura quanto pras de terço. Quem decide é
   _detMarcaColunas (leads.js), medindo onde a linha caiu no grid: a
   posição depende de linhas condicionais e de largura inteira, então
   nenhum seletor estrutural acerta sozinho. */
.ld-det-row.na-direita{border-left:0.5px solid var(--border-metric);padding-left:18px;}
.ld-det-label{font-size:10px;font-weight:700;color:var(--color-sub);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px;}
/* Ícone do campo: pequeno e apagado — é pista de varredura, não pode
   competir com o rótulo nem com o valor. */
.ld-det-ico{font-size:14px;line-height:1;flex-shrink:0;color:var(--color-tab-inactive);opacity:.85;}
/* No tema claro o ícone fica mais escuro que o rótulo (e não mais claro):
   é o que dá o contraste da referência. No escuro não dá pra fazer o mesmo
   — subir o tom lá viraria branco e o ícone passaria na frente do valor. */
body.light .ld-det-ico{color:rgba(26,26,62,.78);opacity:1;}
/* Valor em pílula (hoje: Prioridade). A cor vem inline, do próprio dado. */
.ld-det-chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1.4;
  background:color-mix(in srgb, currentColor 13%, transparent);}
.det-edit-btn{background:none;border:none;padding:2px 4px;margin:0;cursor:pointer;color:var(--color-tab-inactive);opacity:0;transition:opacity .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:20px;border-radius:4px;line-height:1;position:relative;z-index:2;}
.det-edit-btn i{font-size:12px;pointer-events:none;}
.ld-det-row:hover .det-edit-btn{opacity:1;}
.det-edit-btn:hover{color:var(--color-accent-light);background:rgba(147,147,255,.12);}
.det-edit-input,.det-edit-select,.det-edit-textarea{width:100%;box-sizing:border-box;background:var(--bg-field-input);border:0.5px solid var(--color-accent-light);border-radius:6px;padding:5px 8px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;}
.det-edit-textarea{resize:vertical;min-height:60px;}
.det-edit-actions{display:flex;gap:6px;margin-top:6px;}
.det-edit-actions button{display:inline-flex;align-items:center;justify-content:center;background:none;border:0.5px solid var(--border-metric);border-radius:4px;padding:5px 12px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;cursor:pointer;color:var(--color-tab-inactive);line-height:1;min-height:28px;}
.det-edit-actions button.save{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.det-edit-actions button.save:hover{opacity:.9;}
.det-edit-actions button.cancel:hover{background:var(--bg-metric);color:var(--color-title);}
.det-multi-picker{display:flex;flex-wrap:wrap;gap:4px;}
.det-multi-chip{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;border:0.5px solid var(--border-metric);color:var(--color-tab-inactive);background:transparent;user-select:none;}
.det-multi-chip.on{background:rgba(77,77,255,.12);border-color:var(--color-accent-light);color:var(--color-accent-light);}
.ld-det-val{font-size:14px;font-weight:500;color:var(--color-title);line-height:1.5;word-break:break-word;white-space:pre-wrap;}
/* padding/text-align zerados de propósito: existe um `.empty` global
   (padding:3rem;text-align:center) para estado vazio de tabela, e ele
   pegava esta classe junto — o "—" saía deslocado ~48px pra direita,
   fora do alinhamento do rótulo. */
.ld-det-val.empty{color:var(--color-tab-inactive);font-style:italic;white-space:normal;padding:0;text-align:left;}
.tx-section-card:hover .det-edit-btn{opacity:1;}
/* ── Cor por sub-cartão ─────────────────────────────────────────────────────────
   As SEÇÕES são todas violeta — ter uma cor por seção deixou a ficha
   ruidosa demais. A cor sobrou onde ela distingue irmãos lado a lado:
   Pix/Trade/Taxa mínima em Taxas, Compliance/Contrato em Documentação.
   Duas variáveis por cor, porque uma só não resolve:
     --sec-cor  tom cheio — barra, ícone, tinturas e o texto no tema escuro;
     --sec-txt  o mesmo tom rebaixado para virar TEXTO sobre fundo claro.
   O rebaixamento não pode sair de um color-mix único: o quanto uma cor
   precisa escurecer pra chegar em 4,5:1 depende da luminância dela. O verde
   #10c48a, por exemplo, tem só 2,2:1 sobre branco e precisa cair muito mais
   que o violeta. Por isso cada par é fechado à mão e verificado.
   Contraste de --sec-txt sobre a faixa do cabeçalho: verde 5,0 · azul 4,8 ·
   violeta 4,8 · laranja 4,7 · roxo 4,8. */
.cor-verde  {--sec-cor:#10c48a;--sec-txt:#0a7b59;}
.cor-azul   {--sec-cor:#3b82f6;--sec-txt:#346bce;}
.cor-violeta{--sec-cor:#7350ee;--sec-txt:#7350ee;}
.cor-laranja{--sec-cor:#f97316;--sec-txt:#b5521c;}
.cor-roxo   {--sec-cor:#9b6dff;--sec-txt:#7350ee;}
.tx-section-card>.ld-det-card-title{margin-bottom:12px;}
/* Mesma medida e mesmo tom do selo das outras seções (.ld-det-card-title>i) — o selo
   de Taxas é um <span> separado só porque o título dele tem dois filhos. */
.tx-section-icon-badge{width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--sec-cor) 16%,transparent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
body.light .tx-section-icon-badge{background:color-mix(in srgb,var(--sec-cor) 11%,transparent);}
.tx-section-icon-badge i{font-size:15px!important;}
.tx-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:640px){.tx-grid{grid-template-columns:1fr;}}
/* Barra de destaque à esquerda, na cor do próprio cartão: é o que separa
   "PIX" de "Taxa mínima" num relance, sem depender de ler o título. A cor
   vem da classe .cor-* aplicada ao cartão (ver txSectionSummaryHtml). */
.tx-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:18px 20px;
  border-left:4px solid var(--sec-cor);}
.tx-card-hd{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
/* Ícone e título na cor do próprio cartão (antes o título era sempre roxo, o
   que apagava a distinção que a barra da esquerda faz) — mesmo par de tons
   das seções: cheio no escuro, rebaixado no claro. */
.tx-card-hd i{font-size:16px;color:color-mix(in srgb,var(--sec-cor) 62%,#fff);}
.tx-card-hd span{font-size:10.5px;font-weight:700;color:color-mix(in srgb,var(--sec-cor) 62%,#fff);text-transform:uppercase;letter-spacing:.06em;}
body.light .tx-card-hd i,body.light .tx-card-hd span{color:var(--sec-txt);}
/* Divisória vertical entre Pay-in e Pay-out, igual à da ficha de campos. */
.tx-card-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.tx-card-cols>div+div{border-left:0.5px solid var(--border-metric);padding-left:22px;}
.tx-card-cols label{display:block;font-size:9.5px;font-weight:600;color:var(--color-sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
/* .contact-email-text nasceu pra uma célula de TABELA, onde o pai é flex:
   `flex:1;min-width:0` e o corte por ellipsis dependem disso. Na ficha o pai
   é .ld-det-val, que é `display:inline` — ali as três declarações não valem
   nada, então o e-mail não quebrava linha, não reticenciava e simplesmente
   vazava pra fora do campo (54px medidos), sendo cortado pela borda do card
   sem nenhum aviso de que havia mais texto. Na ficha ele quebra linha, como
   qualquer outro valor. */
.ld-det-row .contact-email-text{white-space:normal;overflow:visible;
  text-overflow:clip;overflow-wrap:anywhere;}

/* Mesma medida e peso de .ld-det-val: é tudo valor digitado pelo usuário e
   precisa ler igual em qualquer cartão da ficha. */
.tx-card-cols .val{font-size:14px;font-weight:500;color:var(--color-title);line-height:1.5;}
.tx-val-big{font-size:14px;font-weight:500;color:var(--color-title);line-height:1.5;}
.tx-val-empty{color:var(--color-tab-inactive);font-size:14px;font-weight:500;line-height:1.5;}
.tx-val-obs{font-size:14px;font-weight:500;color:var(--color-title);line-height:1.5;white-space:normal;}
/* Finder: campo único, sem sub-cartão. O respiro que os cartões davam
   precisa vir daqui, senão o texto encosta no cabeçalho da seção. */
.tx-solo{padding:4px 0 2px;}
.tx-pair-group{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.tx-pair-group:last-child{margin-bottom:0;}
.tx-pair-rows{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.tx-pair-line{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--color-title);}
.tx-pair-line .spread{font-weight:700;white-space:nowrap;}
.tx-kind-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--color-accent-bg);color:var(--color-accent-light);white-space:nowrap;flex-shrink:0;}
.ld-det-val a{color:var(--color-accent-light);text-decoration:none;}
.ld-det-val a:hover{text-decoration:underline;}
body.light .ld-det-val a{color:var(--color-accent);}
/* Seta de "abre em outra aba" pelo CSS, e não no HTML: o mesmo link é montado
   em quatro lugares (leads, onboarding, clientes e o repintar pós-edição) —
   marcar no HTML significaria acertar os quatro e continuar acertando. */
.ld-det-val a[target="_blank"]::after{content:"\ea99";font-family:"tabler-icons";
  font-size:.8em;margin-left:6px;display:inline-block;vertical-align:1px;text-decoration:none;}
.ld-det-score-row{display:flex;align-items:center;gap:10px;grid-column:1/-1;}
.ld-det-score-num{font-size:28px;font-weight:700;flex-shrink:0;}
.ld-det-meta{font-size:11px;color:var(--color-tab-inactive);margin-top:14px;display:flex;gap:20px;flex-shrink:0;padding-top:12px;border-top:0.5px solid var(--border-metric);flex-wrap:wrap;}
/* Coluna única no celular: o `!important` acompanha o do bloco de 768px acima,
   senão aquele venceria por especificidade e a ficha voltaria pra duas colunas.
   Os spans também precisam ser zerados — `span 3` numa grade de 1 coluna
   geraria colunas implícitas e vazaria a largura do cartão. */
@media(max-width:720px){
  .ld-det-body{grid-template-columns:1fr!important;}
  .ld-det-grid{grid-template-columns:minmax(0,1fr)!important;}
  .ld-det-row,.ld-det-row.full,.ld-det-row.col2,.ld-det-row.terco{grid-column:1/-1!important;}
}

/* ── Onboarding Docs ── */
.ob-docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-column:1/-1;}
/* Mesmo fundo dos sub-cartões de Taxas (--bg-metric, branco no tema claro):
   o --bg-field-input deixava o cartão lavanda dentro de um card branco, o
   que na referência não acontece. */
.ob-doc-section{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:12px;padding:18px 20px;border-left:4px solid var(--sec-cor);}
.ob-doc-section-title{font-size:10.5px;font-weight:700;color:color-mix(in srgb,var(--sec-cor) 62%,#fff);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
body.light .ob-doc-section-title{color:var(--sec-txt);}
/* Selo do ícone, igual ao das seções e dos sub-cartões de Taxas. */
.ob-doc-section-title i{font-size:15px;width:28px;height:28px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:9px;color:inherit;
  background:color-mix(in srgb,var(--sec-cor) 16%,transparent);}
body.light .ob-doc-section-title i{background:color-mix(in srgb,var(--sec-cor) 11%,transparent);}
.ob-doc-list{display:flex;flex-direction:column;gap:6px;min-height:40px;}
.ob-doc-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:7px;font-size:12px;color:var(--color-label);}
.ob-doc-item-num{font-size:10px;font-weight:700;color:var(--color-sub);flex-shrink:0;min-width:14px;text-align:right;}
.ob-doc-item i{font-size:14px;color:var(--color-accent-light);flex-shrink:0;}
.ob-doc-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ob-doc-item-size{font-size:10px;color:var(--color-tab-inactive);flex-shrink:0;}
.ob-doc-item-del{background:none;border:none;cursor:pointer;color:var(--color-tab-inactive);padding:2px 4px;border-radius:4px;line-height:1;font-size:13px;flex-shrink:0;transition:color .15s;}
.ob-doc-item-del:hover{color:var(--color-danger);}
.ob-doc-item-dl{background:none;border:none;cursor:pointer;color:var(--color-tab-inactive);padding:2px 4px;border-radius:4px;line-height:1;font-size:13px;flex-shrink:0;transition:color .15s;text-decoration:none;}
.ob-doc-item-dl:hover{color:var(--color-accent-light);}
.ob-doc-item-view{background:none;border:none;cursor:pointer;color:var(--color-tab-inactive);padding:2px 4px;border-radius:4px;line-height:1;font-size:13px;flex-shrink:0;transition:color .15s;}
.ob-doc-item-view:hover{color:var(--color-accent-light);}
/* Doc viewer modal */
#ob-doc-viewer-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;align-items:center;justify-content:center;}
#ob-doc-viewer-bg.open{display:flex;}
#ob-doc-viewer-modal{background:var(--bg-modal);border-radius:14px;border:0.5px solid var(--border-metric);width:90vw;max-width:1000px;height:88vh;display:flex;flex-direction:column;overflow:hidden;}
#ob-doc-viewer-hdr{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
#ob-doc-viewer-title{flex:1;font-size:13px;font-weight:700;color:var(--color-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#ob-doc-viewer-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;position:relative;}
#ob-doc-viewer-body iframe{width:100%;height:100%;border:none;}
#ob-doc-viewer-body img{max-width:100%;max-height:100%;object-fit:contain;padding:16px;}
.ob-doc-viewer-fallback{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:rgba(255,255,255,.75);font-size:11px;padding:5px 12px;border-radius:20px;pointer-events:none;}
.ob-doc-viewer-fallback a{pointer-events:auto;color:#fff;font-weight:700;text-decoration:underline;}
.ob-doc-viewer-unsupported{color:var(--color-sub);font-size:13px;text-align:center;padding:40px;}
/* Estado vazio com selo redondo acima do texto (referência). O ícone vem do
   ::before com o glifo do tabler em vez de uma <i> no HTML: a lista é
   repintada em quatro lugares diferentes e nenhum precisa saber disso. */
.ob-doc-empty{font-size:13px;color:var(--color-tab-inactive);padding:18px 0 6px;font-style:normal;
  display:flex;flex-direction:column;align-items:center;gap:11px;}
.ob-doc-empty::before{content:"\eaa2";font-family:"tabler-icons";font-size:19px;line-height:1;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--sec-cor);background:color-mix(in srgb,var(--sec-cor) 13%,transparent);}
.ob-doc-upload-btn{margin-top:14px;display:flex;align-items:center;gap:8px;background:none;
  border:1px dashed color-mix(in srgb,var(--sec-cor) 38%,transparent);border-radius:9px;padding:11px 12px;
  cursor:pointer;color:color-mix(in srgb,var(--sec-cor) 62%,#fff);font-size:12.5px;
  font-family:'Montserrat',sans-serif;font-weight:700;width:100%;justify-content:center;
  box-sizing:border-box;transition:border-color .15s,color .15s,background .15s;}
body.light .ob-doc-upload-btn{color:var(--sec-txt);}
.ob-doc-upload-btn:hover{border-color:var(--sec-cor);background:color-mix(in srgb,var(--sec-cor) 8%,transparent);}
.ob-doc-upload-btn.loading{pointer-events:none;opacity:.6;}
.ob-doc-section.drag-over{border-color:var(--color-accent-light);background:rgba(77,77,255,.06);}
.ob-doc-section.drag-over .ob-doc-upload-btn{border-color:var(--color-accent-light);color:var(--color-accent-light);}
@media(max-width:720px){.ob-docs-grid{grid-template-columns:1fr;}}

/* ── Lead History & Email ── */
.ld-det-action-btn{display:flex;align-items:center;gap:6px;background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-sub);border-radius:var(--radius-btn);padding:7px 14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;flex-shrink:0;}
.ld-det-action-btn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}

/* History panel */
#ld-history-panel{display:none;position:fixed;right:0;top:0;width:560px;max-width:97vw;height:100vh;background:var(--bg-modal);border-left:0.5px solid var(--border-modal);z-index:700;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.3);overflow:hidden;}
#ld-history-panel.open{display:flex;}
/* ── Cabeçalho ── */
.ld-hist-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.ld-hist-hdr h4{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:700;color:var(--color-title);margin:0;letter-spacing:-.01em;}
.ld-hist-hdr-badge{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--color-accent-light);background:color-mix(in srgb,var(--color-accent) 15%,transparent);}
body.light .ld-hist-hdr-badge{color:var(--color-violet);background:color-mix(in srgb,var(--color-accent) 10%,transparent);}
.ld-hist-close{background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;font-size:24px;line-height:1;padding:4px;border-radius:8px;transition:color .15s,background .15s;}
.ld-hist-close:hover{color:var(--color-title);background:var(--bg-metric);}
/* ── Nome do registro ── */
.ld-hist-lead-name{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--color-title);padding:15px 24px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.ld-hist-lead-name>i{font-size:17px;color:var(--color-tab-inactive);flex-shrink:0;}
/* ── Filtros ── */
.ld-hist-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px 14px;flex-shrink:0;flex-wrap:wrap;}
.ld-hist-pillsel{flex:1;display:flex;align-items:center;gap:9px;padding:9px 6px 9px 13px;border:0.5px solid var(--border-metric);border-radius:11px;background:var(--bg-metric);min-width:0;}
.ld-hist-pillsel>i{font-size:15px;color:var(--color-tab-inactive);flex-shrink:0;}
/* A seta é a do próprio dashboard (regra global de <select>, com !important):
   o select estica até a borda da pílula, então ela cai onde o desenho pede,
   à direita, em vez de colada no texto. Um chevron próprio aqui dava dois. */
.ld-hist-pillsel select{flex:1;border:none;background-color:transparent;outline:none;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:var(--color-title);
  min-width:0;text-overflow:ellipsis;padding-top:0;padding-bottom:0;padding-left:0;}
.ld-hist-pillsel select option{background:var(--bg-modal);color:var(--color-title);}
/* ── Lista, dentro de um cartão ── */
.ld-hist-list{flex:1;overflow-y:auto;padding:0 24px 4px;display:block;}
.ld-hist-card{border:0.5px solid var(--border-metric);border-radius:14px;background:var(--bg-metric);padding:4px 20px;}
.ld-hist-item{display:flex;gap:16px;padding:20px 0;position:relative;}
.ld-hist-item:not(:last-child){border-bottom:0.5px solid var(--border-metric);}
/* linha do tempo ligando os selos, sem sobrar depois do último */
.ld-hist-item:not(:last-child)::after{content:'';position:absolute;left:16px;top:52px;bottom:-1px;width:1.5px;background:var(--border-metric);}
.ld-hist-dot{width:33px;height:33px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:1px;z-index:1;
  color:var(--hist-cor);background:color-mix(in srgb,var(--hist-cor) 15%,transparent);border:1px solid color-mix(in srgb,var(--hist-cor) 38%,transparent);}
/* Uma cor por tipo de evento, num só lugar: selo redondo, pílula e valor novo
   bebem de --hist-cor. Antes cada um repetia a cor e as regras de tema claro
   (mais específicas que .act-move) venciam o laranja da mudança de raia.
   O prefixo `body` nas linhas por tipo é o que empata a especificidade com
   `body.light .ld-hist-item` — empatando, vence quem vem depois. */
.ld-hist-item{--hist-cor:var(--color-accent-light);}
body.light .ld-hist-item{--hist-cor:var(--color-violet);}
body .ld-hist-item.act-move{--hist-cor:var(--color-warning);}
body .ld-hist-item.act-create{--hist-cor:var(--color-success);}
body .ld-hist-item.act-delete{--hist-cor:var(--color-danger-dark);}
.ld-hist-content{flex:1;min-width:0;}
.ld-hist-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.ld-hist-action{font-size:16px;font-weight:700;color:var(--color-title);letter-spacing:-.01em;}
.ld-hist-src{font-size:9.5px;font-weight:700;background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent-light);border-radius:4px;padding:2px 6px;margin-left:7px;vertical-align:2px;}
/* selo do tipo de evento: mesma cor do selo redondo */
.ld-hist-pill{flex-shrink:0;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:8px;white-space:nowrap;
  color:var(--hist-cor);background:color-mix(in srgb,var(--hist-cor) 13%,transparent);}
.ld-hist-user{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--color-accent-light);margin-bottom:5px;word-break:break-all;}
body.light .ld-hist-user{color:var(--color-violet);}
.ld-hist-time{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--color-tab-inactive);}
.ld-hist-user>i,.ld-hist-time>i{font-size:14px;flex-shrink:0;color:var(--color-tab-inactive);}
body.light .ld-hist-user>i{color:var(--color-violet);opacity:.75;}
/* ── Caixa da alteração ── */
.ld-hist-changes{margin-top:13px;display:flex;flex-direction:column;gap:8px;}
.ld-hist-change{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:14px;font-weight:500;line-height:1.5;
  background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:11px;padding:12px 16px;color:var(--color-sub);}
.ld-hist-change b{color:var(--color-title);font-weight:700;}
.ld-hist-change>i{font-size:14px;color:var(--color-tab-inactive);}
.ld-hist-change .old{color:var(--color-tab-inactive);text-decoration:line-through;}
.ld-hist-change .new{color:var(--hist-cor);font-weight:600;}
/* ── Rodapé: contagem + paginação ── */
.ld-hist-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 24px;border-top:0.5px solid var(--border-metric);flex-shrink:0;background:var(--bg-metric);}
.ld-hist-foot:empty{display:none;}
.ld-hist-count{font-size:13px;font-weight:500;color:var(--color-tab-inactive);}
.ld-hist-pgs{display:flex;align-items:center;gap:8px;}
.ld-hist-pg{min-width:38px;height:38px;padding:0 6px;border-radius:10px;border:0.5px solid var(--border-metric);
  background:var(--bg-modal);color:var(--color-sub);font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background .15s;}
.ld-hist-pg:hover:not(:disabled):not(.on){border-color:var(--color-accent);color:var(--color-accent-light);}
.ld-hist-pg.on{border-color:var(--color-accent);color:var(--color-accent-light);background:color-mix(in srgb,var(--color-accent) 11%,transparent);}
body.light .ld-hist-pg.on{color:var(--color-violet);}
.ld-hist-pg:disabled{opacity:.4;cursor:default;}
.ld-hist-pg.seta i{font-size:16px;}
.ld-hist-gap{color:var(--color-tab-inactive);font-size:13.5px;padding:0 2px;user-select:none;}
.ld-hist-empty{padding:40px 22px;text-align:center;color:var(--color-tab-inactive);font-size:13px;}
#ld-hist-overlay{position:fixed;inset:0;z-index:699;display:none;}
#ld-hist-overlay.open{display:block;}

/* ── Notas internas como mensagens (Leads/Onboarding) ── */
.ld-notes-list{display:flex;flex-direction:column;gap:12px;max-height:280px;overflow-y:auto;overflow-x:hidden;padding-right:8px;margin-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--border-metric) transparent;}
.ld-notes-list::-webkit-scrollbar{width:5px;}
.ld-notes-list::-webkit-scrollbar-track{background:transparent;}
.ld-notes-list::-webkit-scrollbar-thumb{background:var(--border-metric);border-radius:3px;}
/* Vazio de Notas: balão na cor da seção antes do texto, na mesma linha. */
.ld-notes-empty{padding:22px 8px 18px;color:var(--color-tab-inactive);font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;}
.ld-notes-empty::before{content:"\eaec";font-family:"tabler-icons";font-size:17px;line-height:1;
  color:var(--sec-cor);flex-shrink:0;}
/* Vazio ilustrado (E-mails / Comunicações). O desenho é background do
   ::before pra ninguém precisar montar SVG no meio de string de HTML. */
.sec-vazio-arte{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 20px;
  font-size:13px;color:var(--color-tab-inactive);text-align:center;}
.sec-vazio-arte::before{content:"";width:216px;max-width:66%;aspect-ratio:220/140;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140' fill='none'><defs><linearGradient id='e' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%237ea6f0'/><stop offset='1' stop-color='%234f7fe0'/></linearGradient></defs><rect x='46' y='8' width='88' height='62' rx='5' fill='%23ffffff' stroke='%23c9dcfa' stroke-width='2'/><g stroke='%23c9dcfa' stroke-width='4' stroke-linecap='round'><path d='M60 26 H120'/><path d='M60 39 H110'/><path d='M60 52 H98'/></g><path d='M40 56 H140 V112 C140 115 137 118 134 118 H46 C43 118 40 115 40 112 Z' fill='url(%23e)'/><path d='M40 56 L90 96 L140 56' fill='%236b98ea'/><path d='M40 118 L90 82 L140 118 Z' fill='%238fb3f3'/><path d='M204 34 L150 66 L172 74 Z' fill='%23a8c6f6'/><path d='M204 34 L172 74 L178 96 Z' fill='%236b98ea'/><path d='M204 34 L172 74 L162 70 Z' fill='%234f7fe0'/><path d='M150 100 C158 96 168 92 178 96' stroke='%23c9dcfa' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='1 7'/><path d='M28 22 C30 28 31 29 37 31 C31 33 30 34 28 40 C26 34 25 33 19 31 C25 29 26 28 28 22 Z' fill='%23c9dcfa'/><path d='M180 8 C181.5 12 182.5 13 186.5 14.5 C182.5 16 181.5 17 180 21 C178.5 17 177.5 16 173.5 14.5 C177.5 13 178.5 12 180 8 Z' fill='%23d8e6fb'/><path d='M156 120 C157.5 124 158.5 125 162.5 126.5 C158.5 128 157.5 129 156 133 C154.5 129 153.5 128 149.5 126.5 C153.5 125 154.5 124 156 120 Z' fill='%23d8e6fb'/><circle cx='18' cy='84' r='4' fill='%23c9dcfa'/><circle cx='200' cy='112' r='3.5' fill='%23d8e6fb'/></svg>") no-repeat center;background-size:contain;}
.ld-note-msg{display:flex;gap:10px;}
.ld-note-avatar{width:28px;height:28px;border-radius:50%;background:var(--color-accent-bg);color:var(--color-accent-light);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.avatar-bubble{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;overflow:hidden;font-family:'Montserrat',sans-serif;}
.avatar-bubble img{width:100%;height:100%;object-fit:cover;display:block;}
.ld-note-content{flex:1;min-width:0;background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:10px;padding:8px 12px;}
.ld-note-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;}
.ld-note-author{font-size:12px;font-weight:700;color:var(--color-title);}
.ld-note-time{font-size:10px;color:var(--color-tab-inactive);}
/* Selo de nota vinda do Zoho. Discreto de propósito (regra 4 dos padrões
   de UX): é procedência, não conteúdo — não pode competir com o texto
   da nota nem com o nome de quem escreveu. */
.ld-note-origem{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px;
  color:var(--color-sub);background:var(--bg-metric);border:0.5px solid var(--border-metric);
  white-space:nowrap;flex:none;}
.ld-note-origem i{font-size:10px;}
.ld-note-body{font-size:12.5px;color:var(--color-sub);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.ld-note-body a{color:var(--color-accent-light);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.ld-note-body a:hover{color:var(--color-toggle-hover);}
.ld-note-actions{display:flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .15s;}
.ld-note-msg:hover .ld-note-actions{opacity:1;}
.ld-note-action-btn{background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;padding:3px;border-radius:5px;display:flex;align-items:center;font-size:11px;transition:background .15s,color .15s;}
.ld-note-action-btn:hover{background:var(--color-accent-bg);color:var(--color-accent-light);}
.ld-note-edit-textarea{width:100%;min-height:52px;font-family:'Montserrat',sans-serif;font-size:12.5px;padding:6px 8px;border:0.5px solid var(--color-accent);border-radius:6px;background:var(--bg-input);color:var(--color-input);resize:vertical;box-sizing:border-box;}
.ld-note-edit-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;}
.ld-note-edit-cancel,.ld-note-edit-save{font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;padding:4px 12px;border-radius:6px;cursor:pointer;}
.ld-note-edit-cancel{background:none;border:0.5px solid var(--border-metric);color:var(--color-label);}
.ld-note-edit-save{background:var(--gradient-brand);border:none;color:#fff;}
.ld-notes-compose{display:flex;gap:8px;align-items:flex-end;}
.mention-input-wrap{position:relative;flex:1;}
.ld-notes-compose textarea{width:100%;background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:12.5px;resize:vertical;min-height:38px;max-height:120px;box-sizing:border-box;}
.mention-drop{position:absolute;bottom:calc(100% + 4px);left:0;right:0;background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:8px;z-index:600;padding:5px;box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;max-height:180px;overflow-y:auto;}
.mention-drop.open{display:block;}
.mention-chip{background:rgba(147,147,255,.14);color:var(--color-accent-light);padding:1px 5px;border-radius:4px;font-weight:600;}
.ld-notes-send-btn{background:var(--sec-cor);border:none;color:#fff;border-radius:9px;padding:11px 18px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;flex-shrink:0;transition:opacity .15s;display:inline-flex;align-items:center;gap:7px;}
.ld-notes-send-btn:hover{opacity:.9;}
.ld-notes-send-btn:disabled{opacity:.5;cursor:default;}

/* Email compose modal */
.ld-email-field{display:flex;flex-direction:column;gap:5px;}
.ld-email-label{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;}
.ld-email-input{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);padding:9px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:100%;box-sizing:border-box;}
.ld-email-textarea{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);padding:9px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:100%;box-sizing:border-box;resize:vertical;min-height:130px;}
.ld-email-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
.ld-email-cancel{background:transparent;border:0.5px solid var(--border-metric);color:var(--color-tab-inactive);border-radius:var(--radius-btn);padding:8px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;}
.ld-email-send{background:var(--color-success);border:none;color:#fff;border-radius:var(--radius-btn);padding:8px 20px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .2s;}
.ld-email-send:hover{opacity:.88;}
/* Casca reaproveitada: Novo Onboarding, Adicionar Cliente e Adicionar Finder
   usam a mesma estrutura do modal de lead (cabeçalho com selo, seções em
   cartão, rodapé fixo). Só o de lead tem os passos — por isso o recuo do
   corpo mora no .ld-tab-pane lá e no próprio .lf-corpo aqui. */
#lead-modal-bg,.lf-modal-bg{display:none;position:fixed;inset:0;background:var(--bg-modal-overlay);backdrop-filter:blur(4px);z-index:500;align-items:center;justify-content:center;}
#lead-modal-bg.open,.lf-modal-bg.open{display:flex;}
.lf-hdr{display:flex;align-items:flex-start;gap:15px;padding:24px 26px 20px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.lf-hdr-ic{width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--color-accent-light);background:color-mix(in srgb,var(--color-accent) 14%,transparent);}
body.light .lf-hdr-ic{color:var(--color-violet);background:color-mix(in srgb,var(--color-accent) 10%,transparent);}
.lf-hdr-txt{flex:1;min-width:0;}
.lf-hdr-txt h3{margin:0 0 3px;font-size:22px;font-weight:700;color:var(--color-title);letter-spacing:-.02em;}
.lf-hdr-txt p{margin:0;font-size:13.5px;font-weight:500;color:var(--color-tab-inactive);}
.lf-hdr-x{background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;font-size:24px;line-height:1;padding:4px;border-radius:9px;flex-shrink:0;transition:color .15s,background .15s;}
.lf-hdr-x:hover{color:var(--color-title);background:var(--bg-metric);}
#lead-modal,.lf-modal{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:20px;padding:0;width:860px;max-width:97vw;max-height:92vh;display:flex;flex-direction:column;}
/* área rolável: o cabeçalho e a barra de baixo ficam fixos, o meio rola */
#lead-modal .lf-corpo,.lf-modal .lf-corpo{flex:1;min-height:0;overflow-y:auto;}
/* sem passos, o recuo do corpo é do próprio corpo (no lead vem do .ld-tab-pane) */
.lf-modal .lf-corpo{padding:22px 26px 6px;}
#lead-modal h3{font-size:15px;font-weight:700;color:var(--color-title);margin:0 0 12px;}
.ld-modal-tabs{display:flex;align-items:center;gap:0;margin:0;padding:0 26px;background:none;border-radius:0;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.ld-modal-tab{flex:1;display:flex;align-items:center;gap:11px;background:none;border:none;border-bottom:2.5px solid transparent;
  padding:16px 4px 14px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:var(--color-tab-inactive);
  border-radius:0;cursor:pointer;letter-spacing:0;transition:color .15s,border-color .15s;position:relative;}
/* traço ligando um passo ao seguinte */
.ld-modal-tab:not(:last-child)::after{content:'';flex:1;height:1px;background:var(--border-metric);margin-left:6px;}
.lf-step-n{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;border:1.5px solid var(--border-metric);color:var(--color-tab-inactive);transition:all .15s;}
.ld-modal-tab.active{color:var(--color-accent-light);border-bottom-color:var(--color-accent);font-weight:700;}
.ld-modal-tab.active .lf-step-n{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.ld-modal-tab.done .lf-step-n{border-color:var(--color-accent);color:var(--color-accent-light);}
body.light .ld-modal-tab.active{color:var(--color-violet);}
body.light .ld-modal-tab.done .lf-step-n{color:var(--color-violet);}
.ld-tab-pane{display:none;overflow-y:auto;flex:1;padding:5px 5px 0;margin:-5px -5px 0;}
.ld-tab-pane.active{display:block;}
/* Notion-like form grid */
/* Quem rola é o modal inteiro, não o passo. Com overflow no passo, a
   lista do dropdown (absoluta, dentro do campo) era CORTADA por ele e
   sumia atrás da barra de baixo — z-index não resolve recorte. */
.ld-tab-pane{padding:22px 26px 6px;overflow:visible;}
.ld-tab-pane:not(.active){display:none;}
/* ── Seções ── */
.lf-sec{border:0.5px solid var(--border-metric);border-radius:16px;background:var(--bg-metric);padding:20px 22px;margin-bottom:18px;}
.lf-sec-hd{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;}
.lf-sec-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--color-accent-light);background:color-mix(in srgb,var(--color-accent) 14%,transparent);}
body.light .lf-sec-ic{color:var(--color-violet);background:color-mix(in srgb,var(--color-accent) 10%,transparent);}
.lf-sec-hd h4{margin:0 0 3px;font-size:16px;font-weight:700;color:var(--color-title);letter-spacing:-.01em;}
.lf-sec-hd p{margin:0;font-size:13px;font-weight:500;color:var(--color-tab-inactive);}
.ld-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
.ld-field{display:flex;flex-direction:column;gap:7px;padding:0;position:relative;}
/* selo do ícone: fica sobre o controle, e o controle ganha recuo à esquerda.
   Absoluto pra não reestruturar cada campo — o rótulo tem altura fixa. */
.lf-ic{position:absolute;left:9px;top:32px;width:30px;height:30px;border-radius:9px;pointer-events:none;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  color:var(--color-accent-light);background:color-mix(in srgb,var(--color-accent) 12%,transparent);}
body.light .lf-ic{color:var(--color-violet);background:color-mix(in srgb,var(--color-accent) 8%,transparent);}
/* Descendente, não filho direto: o _ddEnhance embrulha o <select> num
   .dd-wrap, e o gatilho visível (.dd-trigger) COPIA o padding computado do
   select. Com o seletor de filho direto o recuo não chegava neles e o ícone
   caía por cima do texto. Vale para o multiselect também. */
.ld-field.tem-ic .ld-form-input,
.ld-field.tem-ic .ld-multisel-trigger,
.ld-field.tem-ic .dd-trigger{padding-left:49px!important;}
.ld-field.tem-ic textarea.ld-form-input{padding-top:14px;}
/* Texto de apoio abaixo de um campo (ex.: URL do ícone). */
.lf-hint{font-size:11.5px;line-height:1.45;color:var(--color-tab-inactive);font-weight:500;}
/* Grupo de checkboxes desenhado como o .ld-form-input: mesma caixa, mesmo raio.
   Usado onde o multiselect não cabe (Tipo de Contrato do cliente/finder). */
.lf-chkgroup{display:flex;flex-direction:column;gap:2px;background:var(--bg-modal);
  border:0.5px solid var(--border-field-input);border-radius:11px;padding:8px;}
.lf-chkgroup .ld-multisel-opt{font-size:13.5px;padding:8px 10px;border-radius:8px;}
/* Aviso informativo dentro do corpo do modal. */
.lf-nota{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;
  color:var(--color-tab-inactive);background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:12px;padding:12px 14px;margin-bottom:18px;}
.lf-nota i{font-size:16px;flex-shrink:0;color:var(--color-accent-light);}
body.light .lf-nota i{color:var(--color-violet);}
.ld-field.span2{grid-column:1/-1;}
.ld-field-label{font-size:13px;font-weight:700;color:var(--color-title);display:flex;align-items:center;gap:5px;line-height:1.3;}
.ld-conv-req{color:var(--color-warning);font-size:11px;font-weight:900;cursor:help;}
.ld-opt-tag{font-size:10px;color:var(--color-tab-inactive);font-weight:400;}
.ld-form-input{width:100%;box-sizing:border-box;background:var(--bg-modal);border:0.5px solid var(--border-field-input);border-radius:11px;padding:14px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s;}
.ld-form-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 14%,transparent);}
.ld-form-textarea{resize:vertical;min-height:72px;}
.ld-form-select{appearance:none;}
/* Multi-select */
.ld-multisel{position:relative;}
/* Mesma caixa do .ld-form-input: raio, fundo, borda, altura e tipografia.
   Antes ficava com o desenho antigo ao lado dos campos novos. */
.ld-multisel-trigger{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg-modal);border:0.5px solid var(--border-field-input);border-radius:11px;padding:14px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;color:var(--color-tab-inactive);transition:border-color .15s,box-shadow .15s;user-select:none;}
.ld-multisel-trigger:hover,.ld-multisel-trigger.open{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 14%,transparent);}
.ld-multisel-trigger i{font-size:15px;opacity:.6;flex-shrink:0;transition:transform .15s;}
.ld-multisel-trigger.open i{transform:rotate(180deg);}
.ld-multisel-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:8px;z-index:600;padding:5px;box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;}
.ld-multisel-drop.open{display:block;}
.ld-multisel-opt{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--color-label);}
.ld-multisel-opt:hover{background:var(--bg-metric);}
.ld-multisel-opt input[type=checkbox]{accent-color:var(--color-accent);width:14px;height:14px;flex-shrink:0;cursor:pointer;}
.ld-multisel-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;min-height:0;}
.fonte-cliente-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:8px;z-index:600;padding:5px;box-shadow:0 8px 28px rgba(0,0,0,.25);display:none;max-height:220px;overflow-y:auto;}
.fonte-cliente-drop.open{display:block;}
.fonte-cliente-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--color-title);}
.fonte-cliente-opt:hover,.fonte-cliente-opt.active{background:var(--bg-metric);}
.fonte-cliente-opt .badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px;flex-shrink:0;}
.fonte-cliente-opt .badge.cliente{background:rgba(22,160,114,.14);color:var(--color-success-dark);}
.fonte-cliente-opt .badge.onboarding{background:rgba(147,147,255,.14);color:var(--color-accent-light);}
.fonte-cliente-opt .badge.lead{background:rgba(212,144,10,.14);color:var(--color-warning-light);}
/* Contagem de registros no autocomplete de Setor. SEM pílula, ao contrário
   das três acima: elas nomeiam uma CATEGORIA (é um lead? um cliente?) e a
   pílula é o que as separa do texto; aqui é só um número. Pílula sobre
   pílula também empilharia dois fundos escuros e derrubaria o contraste do
   número abaixo de AA (regra 7 dos padrões de UX). */
.fonte-cliente-opt .badge.contagem{background:none;color:var(--color-sub);font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:0;font-variant-numeric:tabular-nums;}
.fonte-cliente-empty{font-size:11.5px;color:var(--color-tab-inactive);padding:8px 9px;font-style:italic;}
.ld-mchip{display:inline-flex;align-items:center;gap:4px;background:rgba(77,77,255,.1);border:0.5px solid rgba(77,77,255,.28);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;color:var(--color-accent-light);}
.ld-mchip button{background:none;border:none;color:var(--color-accent-light);cursor:pointer;font-size:13px;padding:0;line-height:1;margin-left:2px;}
/* Deprecated form-row kept for score section */
.ld-form-row{margin-bottom:6px;}
.ld-form-label{font-size:11px;font-weight:600;color:var(--color-sub);margin-bottom:3px;}
.ld-score-wrap{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.ld-score-badge{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex-shrink:0;}
.ld-score-badge.s-green{background:rgba(22,160,114,.15);color:var(--color-success-dark);}
.ld-score-badge.s-amber{background:rgba(212,144,10,.15);color:var(--color-warning-dark);}
.ld-score-badge.s-red{background:rgba(217,79,79,.12);color:var(--color-danger-dark);}
.ld-score-badge.s-gray{background:var(--bg-metric);color:var(--color-tab-inactive);}
.ld-card-score{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:11px;font-weight:800;flex-shrink:0;}
.ld-card-score.s-green{background:rgba(22,160,114,.18);color:var(--color-success-dark);}
.ld-card-score.s-amber{background:rgba(212,144,10,.18);color:var(--color-warning-dark);}
.ld-card-score.s-red{background:rgba(217,79,79,.15);color:var(--color-danger-dark);}
.ld-card-score.s-gray{background:var(--bg-metric);color:var(--color-tab-inactive);}
.ld-card-industry{font-size:10px;color:var(--color-tab-inactive);background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:4px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.ld-modal-footer{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0;padding:16px 26px;border-top:0.5px solid var(--border-metric);flex-shrink:0;background:var(--bg-metric);flex-wrap:wrap;}
.lf-foot-dir{display:flex;align-items:center;gap:12px;margin-left:auto;}
.ld-btn-limpar{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0.5px solid var(--border-metric);
  color:var(--color-tab-inactive);border-radius:11px;padding:12px 18px;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:color .15s,border-color .15s;}
.ld-btn-limpar:hover{color:var(--color-danger-dark);border-color:var(--color-danger-dark);}
.ld-btn-limpar i{font-size:16px;}
.ld-modal-footer .ld-btn-del{margin-right:auto;background:rgba(217,79,79,.1);border:0.5px solid rgba(217,79,79,.35);color:var(--color-danger-dark);border-radius:var(--radius-btn);padding:8px 14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s;}
.ld-modal-footer .ld-btn-del:hover{opacity:0.8;}
.ld-modal-footer .ld-btn-cancel{background:transparent;border:0.5px solid var(--border-metric);color:var(--color-sub);border-radius:11px;padding:12px 24px;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .2s;}
.ld-modal-footer .ld-btn-cancel:hover{background:var(--bg-cancel-hover);}
/* borda da mesma espessura do Cancelar: sem ela o botao ficava 1px mais
   baixo que o vizinho e a fileira desalinhava */
.ld-modal-footer .ld-btn-save{display:inline-flex;align-items:center;gap:9px;background:var(--color-accent);border:0.5px solid var(--color-accent);color:#fff;border-radius:11px;padding:12px 26px;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;transition:opacity .2s;}
.ld-modal-footer .ld-btn-save i{font-size:16px;}
.ld-modal-footer .ld-btn-save:hover{opacity:0.88;}
/* Enquanto grava, o botão fica desabilitado (ver _travaSalvar) — sem um
   estado visível, o segundo clique parecia que a tela tinha travado. */
.ld-modal-footer .ld-btn-save:disabled,
.modal-footer .btn-save:disabled{opacity:.55;cursor:progress;}
.ld-modal-footer .ld-btn-save:disabled:hover,
.modal-footer .btn-save:disabled:hover{opacity:.55;}

/* ─── L-06: TEXT OVERFLOW ─── */
.int-table td.nome-cell, .mig-table td.nome-cell { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.int-table td .contact-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.int-table td .contact-email { max-width:180px; }
.int-table td .passos { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* ─── TOAST ─── */
.tpn-toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:99999;font-family:'Montserrat',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .3s;pointer-events:none;}
.tpn-toast.success{background:var(--color-success-dark);color:#fff;}
.tpn-toast.error{background:var(--color-danger-dark);color:#fff;}
.tpn-toast.info{background:var(--color-accent);color:#fff;}

/* ─── MARKETING TAB ─── */
#screen-mkt{padding:0;}
#screen-mkt .mkt-sec-title{font-size:11px;font-weight:700;color:var(--color-sub);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
#screen-mkt .mkt-sec-title::before{content:'';width:3px;height:13px;background:linear-gradient(135deg,#2929A6,var(--color-accent));border-radius:2px;flex-shrink:0;}
#screen-mkt .mkt-sec-title::after{content:'';flex:1;height:0.5px;background:var(--border-metric);}
/* KPIs */
#screen-mkt .mkt-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:1.75rem;}
@media(max-width:1200px){#screen-mkt .mkt-kpi-grid{grid-template-columns:repeat(3,1fr)}}
#screen-mkt .mkt-kpi{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:16px;position:relative;overflow:hidden;}
#screen-mkt .mkt-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--mktkc,var(--color-accent));}
#screen-mkt .mkt-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-tab-inactive);font-weight:600;margin-bottom:8px;}
#screen-mkt .mkt-kpi-val{font-size:26px;font-weight:700;color:var(--mktkc,var(--color-accent));line-height:1;letter-spacing:-.02em;}
#screen-mkt .mkt-kpi-sub{font-size:10px;color:var(--color-tab-inactive);margin-top:5px;font-weight:500;}
/* Cadências */
#screen-mkt .mkt-toolbar,#ld-abm .mkt-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
#screen-mkt .mkt-search,#ld-abm .mkt-search{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;width:220px;}
#screen-mkt .mkt-search::placeholder,#ld-abm .mkt-search::placeholder{color:var(--color-tab-inactive);}
#screen-mkt .mkt-sel{background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:8px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;cursor:pointer;}
#screen-mkt .mkt-btn{background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-btn);padding:9px 18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .2s;}
#screen-mkt .mkt-btn:hover{opacity:.85;}
#screen-mkt .mkt-btn-sm{background:var(--bg-metric);color:var(--color-sub);border:0.5px solid var(--border-metric);border-radius:6px;padding:5px 12px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .2s;}
#screen-mkt .mkt-btn-sm:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
#screen-mkt .mkt-btn-danger{background:none;color:var(--color-danger-dark);border:0.5px solid var(--color-danger-dark);border-radius:6px;padding:5px 10px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;cursor:pointer;}
#screen-mkt .mkt-cad-grid,#ld-abm .mkt-cad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px;margin-bottom:1.75rem;}
@media(max-width:1200px){#screen-mkt .mkt-cad-grid,#ld-abm .mkt-cad-grid{grid-template-columns:1fr}}
#screen-mkt .mkt-cad-card,#ld-abm .mkt-cad-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:16px;}
#screen-mkt .mkt-cad-hdr,#ld-abm .mkt-cad-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
#screen-mkt .mkt-cad-name,#ld-abm .mkt-cad-name{font-size:14px;font-weight:700;color:var(--color-title);flex:1;}
#screen-mkt .mkt-badge-on,#ld-abm .mkt-badge-on{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;background:rgba(34,197,94,.15);color:var(--color-success);border:0.5px solid var(--color-success);}
#screen-mkt .mkt-badge-off,#ld-abm .mkt-badge-off{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--bg-metric);color:var(--color-tab-inactive);border:0.5px solid var(--border-metric);}
#screen-mkt .mkt-cad-meta,#ld-abm .mkt-cad-meta{font-size:11px;color:var(--color-tab-inactive);margin-bottom:12px;}
#screen-mkt .mkt-timeline{display:flex;align-items:center;gap:0;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;}
#screen-mkt .mkt-tl-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
#screen-mkt .mkt-tl-line{flex:1;height:1px;border-top:1px dashed var(--border-metric);min-width:20px;margin-top:-12px;}
#screen-mkt .mkt-tl-dot{width:30px;height:30px;border-radius:50%;background:var(--bg-dash);border:0.5px solid var(--border-metric);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--color-sub);}
#screen-mkt .mkt-tl-day{font-size:9px;font-weight:700;color:var(--color-tab-inactive);letter-spacing:.04em;}
#screen-mkt .mkt-cad-footer,#ld-abm .mkt-cad-footer{display:flex;gap:8px;flex-wrap:wrap;}
/* Contacts */
#screen-mkt .mkt-tbl-wrap{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);overflow:hidden;overflow-x:auto;margin-bottom:1.75rem;}
#screen-mkt table{width:100%;border-collapse:collapse;min-width:860px;font-size:13px;}
#screen-mkt thead th{background:var(--bg-thead);padding:10px 14px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--color-th);font-weight:700;white-space:nowrap;border-bottom:0.5px solid var(--border-th);}
#screen-mkt tbody tr{border-top:0.5px solid var(--border-td);transition:background .15s;}
#screen-mkt tbody tr:hover{background:rgba(77,77,255,.06);}
#screen-mkt tbody td{padding:9px 14px;vertical-align:middle;color:var(--color-td);}
#screen-mkt .mkt-tier{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.04em;}
#screen-mkt .mkt-tier-a{background:rgba(34,197,94,.15);color:var(--color-success);border:0.5px solid var(--color-success);}
#screen-mkt .mkt-tier-b{background:rgba(250,204,21,.12);color:#eab308;border:0.5px solid #eab308;}
#screen-mkt .mkt-tier-c{background:rgba(239,68,68,.12);color:var(--color-danger);border:0.5px solid var(--color-danger);}
#screen-mkt .mkt-contact-name{font-weight:700;color:var(--color-title);cursor:pointer;}
#screen-mkt .mkt-contact-name:hover{color:var(--color-accent-light);}
#screen-mkt .mkt-status-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;}
#screen-mkt .mkt-status-ativo{background:rgba(77,77,255,.12);color:var(--color-accent-light);}
#screen-mkt .mkt-status-convertido{background:rgba(34,197,94,.12);color:var(--color-success);}
#screen-mkt .mkt-status-pausado{background:var(--bg-metric);color:var(--color-tab-inactive);}
#screen-mkt .mkt-status-descartado{background:rgba(239,68,68,.1);color:var(--color-danger);}
/* Mapa visual do pipeline (Motor de Automações) */
/* Nav de sub-abas Marketing (nível 1 e 2): herda o estado "tinta suave"
   de .ld-view-btn.active — um único tratamento de seleção no app todo. */
/* Automações — centro de operações: KPIs, mapa do funil em colunas e drawer.
   O mapa replica o conceito visual do Kanban de Leads/Onboarding (raia com
   cor própria no topo, cards compactos) — progressive disclosure: o card só
   mostra ícone/nome/status/última execução; o resto vive no drawer. */
#screen-mkt .ar2-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px;}
@media(max-width:1200px){#screen-mkt .ar2-kpis{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){#screen-mkt .ar2-kpis{grid-template-columns:repeat(2,1fr);}}
#screen-mkt .ar2-kpi{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:12px 14px;min-width:0;}
#screen-mkt .ar2-kpi .l{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px;}
#screen-mkt .ar2-kpi .l i{font-size:12px;}
#screen-mkt .ar2-kpi .v{font-size:22px;font-weight:800;color:var(--color-title);margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;}
#screen-mkt .ar2-kpi .v.ok{color:var(--color-success-dark);}
#screen-mkt .ar2-kpi .v.warn{color:var(--color-warning-dark);}
#screen-mkt .ar2-kpi .v.err{color:var(--color-danger-dark);}
body:not(.light) #screen-mkt .ar2-kpi .v.ok{color:#34D399;}
body:not(.light) #screen-mkt .ar2-kpi .v.warn{color:var(--color-warning-light);}
body:not(.light) #screen-mkt .ar2-kpi .v.err{color:var(--color-danger-light);}
#screen-mkt .ar2-kpi .s{font-size:10.5px;color:var(--color-tab-inactive);margin-top:4px;}
#screen-mkt .ar2-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border-metric);color:var(--color-sub);background:var(--bg-metric);font-family:'Montserrat',sans-serif;transition:background .15s,color .15s,border-color .15s,transform .1s;}
#screen-mkt .ar2-pill:active{transform:scale(.96);}
#screen-mkt .ar2-pill.active{background:rgba(77,77,255,.13);border-color:transparent;color:var(--color-accent-light);font-weight:700;}
body.light #screen-mkt .ar2-pill.active{color:var(--color-accent);}
#screen-mkt .ar2-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch;align-items:flex-start;}
#screen-mkt .ar2-col{flex:0 0 256px;min-width:0;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;}
#screen-mkt .ar2-col-hdr{padding:11px 13px 9px;border-bottom:0.5px solid var(--border-metric);border-top:3px solid var(--lane-color,var(--color-accent));}
#screen-mkt .ar2-col-name{font-size:12px;font-weight:700;color:var(--color-title);line-height:1.3;}
#screen-mkt .ar2-col-sub{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
#screen-mkt .ar2-cnt{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--color-tab-inactive);font-variant-numeric:tabular-nums;}
#screen-mkt .ar2-cnt::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--color-tab-inactive);}
#screen-mkt .ar2-cnt.on::before{background:var(--color-success);}
#screen-mkt .ar2-cnt.off::before{background:var(--color-warning);}
#screen-mkt .ar2-cnt.err::before{background:var(--color-danger);}
#screen-mkt .ar2-cov{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
#screen-mkt .ar2-cov.full{color:var(--color-success-dark);}
#screen-mkt .ar2-cov.partial{color:var(--color-warning-dark);}
#screen-mkt .ar2-cov.none{color:var(--color-tab-inactive);}
#screen-mkt .ar2-cov.err{color:var(--color-danger-dark);}
body:not(.light) #screen-mkt .ar2-cov.full{color:#34D399;}
body:not(.light) #screen-mkt .ar2-cov.partial{color:var(--color-warning-light);}
body:not(.light) #screen-mkt .ar2-cov.err{color:var(--color-danger-light);}
#screen-mkt .ar2-col-body{padding:10px;display:flex;flex-direction:column;gap:9px;}
#screen-mkt .ar2-card{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:11px;padding:13px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0;}
#screen-mkt .ar2-card:hover{border-color:var(--color-accent);box-shadow:0 4px 14px rgba(77,77,255,.14);}
#screen-mkt .ar2-card-top{display:flex;align-items:center;gap:10px;min-width:0;}
#screen-mkt .ar2-icbox{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
#screen-mkt .ar2-icbox.tg-lead_created{background:rgba(77,77,255,.15);color:var(--color-accent-light);}
#screen-mkt .ar2-icbox.tg-score_changed{background:rgba(147,51,234,.16);color:#B694F5;}
#screen-mkt .ar2-icbox.tg-stage_changed{background:rgba(22,160,114,.15);color:#34D399;}
#screen-mkt .ar2-icbox.tg-meeting_scheduled{background:rgba(212,144,10,.16);color:var(--color-warning-light);}
body.light #screen-mkt .ar2-icbox.tg-lead_created{color:var(--color-accent);}
body.light #screen-mkt .ar2-icbox.tg-score_changed{color:#7C3AED;}
body.light #screen-mkt .ar2-icbox.tg-stage_changed{color:var(--color-success-dark);}
body.light #screen-mkt .ar2-icbox.tg-meeting_scheduled{color:#C07800;}
#screen-mkt .ar2-card-name{flex:1;font-size:12.5px;font-weight:700;color:var(--color-title);line-height:1.3;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#screen-mkt .ar2-card-row2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;}
#screen-mkt .ar2-pillst{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:12px;white-space:nowrap;}
#screen-mkt .ar2-pillst::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
#screen-mkt .ar2-pillst.on{background:rgba(22,160,114,.14);color:#34D399;}
#screen-mkt .ar2-pillst.off{background:rgba(212,144,10,.15);color:var(--color-warning-light);}
#screen-mkt .ar2-pillst.err{background:rgba(217,79,79,.15);color:var(--color-danger-light);}
#screen-mkt .ar2-pillst.draft{background:rgba(147,147,255,.13);color:var(--color-sub);}
body.light #screen-mkt .ar2-pillst.on{color:var(--color-success-dark);}
body.light #screen-mkt .ar2-pillst.off{color:#C07800;}
body.light #screen-mkt .ar2-pillst.err{color:var(--color-danger-dark);}
#screen-mkt .ar2-card-kebab{background:none;border:none;border-radius:6px;color:var(--color-tab-inactive);font-size:15px;padding:3px 5px;cursor:pointer;flex-shrink:0;}
#screen-mkt .ar2-card-kebab:hover{background:var(--bg-icon-btn-hover);color:var(--color-icon-btn-hover);}
#screen-mkt .ar2-card-meta{margin-top:10px;padding-top:10px;border-top:0.5px solid var(--border-metric);font-size:11.5px;color:var(--color-sub);line-height:1.6;}
#screen-mkt .ar2-card-meta b{color:var(--color-title);font-weight:800;}
#screen-mkt .ar2-card-meta .errline{color:var(--color-danger-light);}
body.light #screen-mkt .ar2-card-meta .errline{color:var(--color-danger-dark);}
#screen-mkt .ar2-empty{padding:12px 6px 4px;text-align:center;color:var(--color-tab-inactive);font-size:11px;}
#screen-mkt .ar2-col-add{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 9px 9px;padding:7px;border:1px dashed var(--border-metric);border-radius:8px;background:none;color:var(--color-tab-inactive);font-size:11px;font-weight:600;cursor:pointer;font-family:'Montserrat',sans-serif;}
#screen-mkt .ar2-col-add:hover{color:var(--color-accent-light);border-color:var(--color-accent);}
/* Drawer de detalhe da automação (abas Resumo / Execuções / Histórico) */
.mkt-drawer.ar2-drawer{overflow:hidden;max-width:94vw;}
.ar2-dtabs{display:flex;gap:2px;padding:0 20px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.ar2-dtab{background:none;border:none;padding:10px 12px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--color-tab-inactive);border-bottom:2px solid transparent;cursor:pointer;}
.ar2-dtab.active{color:var(--color-accent-light);border-bottom-color:var(--color-accent);}
.ar2-dbody{flex:1;overflow-y:auto;padding:16px 20px;}
.ar2-dfoot{padding:12px 20px;border-top:0.5px solid var(--border-metric);display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center;}
.ar2-flow{display:flex;flex-direction:column;margin:12px 0;}
.ar2-flow-node{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--color-sub);line-height:1.5;}
.ar2-flow-node .k{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-label);margin-bottom:2px;}
.ar2-flow-arrow{align-self:center;color:var(--color-tab-inactive);font-size:12px;padding:1px 0;line-height:1;}
.ar2-dstats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:12px 0;}
.ar2-dstat{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:8px;padding:8px 10px;min-width:0;}
.ar2-dstat .v{font-size:15px;font-weight:800;color:var(--color-title);font-variant-numeric:tabular-nums;}
.ar2-dstat .l{font-size:9.5px;font-weight:700;color:var(--color-tab-inactive);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.ar2-run{display:flex;gap:9px;padding:9px 0;border-bottom:0.5px solid var(--border-metric);font-size:11.5px;color:var(--color-sub);align-items:flex-start;}
.ar2-run:last-child{border-bottom:none;}
.ar2-run i{font-size:13px;margin-top:1px;flex-shrink:0;}
.ar2-run.success i{color:var(--color-success);}
.ar2-run.error i{color:var(--color-danger);}
.ar2-run.skipped i{color:var(--color-tab-inactive);}
.ar2-run .who{color:var(--color-title);font-weight:600;}
.ar2-run .when{margin-left:auto;flex-shrink:0;color:var(--color-tab-inactive);font-size:10.5px;}
/* Calendário */
#screen-mkt .mkt-cal-wrap{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:1.75rem;}
@media(max-width:1200px){#screen-mkt .mkt-cal-wrap{grid-template-columns:1fr}}
#screen-mkt .mkt-cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#screen-mkt .mkt-cal-title{font-size:14px;font-weight:700;color:var(--color-title);}
#screen-mkt .mkt-cal-nav{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:6px;padding:4px 10px;color:var(--color-sub);cursor:pointer;font-size:14px;font-family:'Montserrat',sans-serif;font-weight:600;}
#screen-mkt .mkt-cal-nav:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
#screen-mkt .mkt-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
#screen-mkt .mkt-cal-dow{text-align:center;font-size:10px;font-weight:700;color:var(--color-tab-inactive);letter-spacing:.06em;padding:4px 0 6px;}
#screen-mkt .mkt-cal-day{min-height:40px;border-radius:6px;padding:4px;cursor:pointer;position:relative;transition:background .15s;display:flex;flex-direction:column;align-items:center;}
#screen-mkt .mkt-cal-day:hover{background:rgba(77,77,255,.08);}
#screen-mkt .mkt-cal-day.today{background:rgba(77,77,255,.15);}
#screen-mkt .mkt-cal-day-num{font-size:11px;font-weight:600;color:var(--color-sub);line-height:1;}
#screen-mkt .mkt-cal-day.other-month .mkt-cal-day-num{color:var(--border-metric);}
#screen-mkt .mkt-cal-dot{width:6px;height:6px;border-radius:50%;margin-top:3px;}
#screen-mkt .mkt-evt-list{display:flex;flex-direction:column;gap:8px;}
#screen-mkt .mkt-evt-item{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:8px;padding:10px 12px;font-size:12px;}
#screen-mkt .mkt-evt-name{font-weight:700;color:var(--color-title);margin-bottom:3px;}
#screen-mkt .mkt-evt-meta{font-size:10px;color:var(--color-tab-inactive);}
#screen-mkt .mkt-evt-actions{display:flex;gap:6px;margin-top:6px;}
/* Empty states */
#screen-mkt .mkt-empty,#ld-abm .mkt-empty{padding:40px;text-align:center;color:var(--color-tab-inactive);font-size:13px;}
#screen-mkt .mkt-empty i,#ld-abm .mkt-empty i{font-size:32px;display:block;margin-bottom:10px;opacity:.4;}
#screen-mkt .mkt-empty-cta,#ld-abm .mkt-empty-cta{margin-top:12px;display:inline-block;color:var(--color-accent-light);cursor:pointer;font-weight:600;font-size:12px;border:none;background:none;font-family:'Montserrat',sans-serif;}
/* Modais mkt */
/* z-index 1400: modal precisa ficar ACIMA da barra de seleção em lote
   (1150) e do drawer da campanha (1200/1201) — em 1000 a barra flutuante
   passava por cima do rodapé do modal de composição. */
.mkt-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:1400;display:none;align-items:center;justify-content:center;}
.mkt-modal-bg.open{display:flex;}
.mkt-modal{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:var(--radius-modal);padding:28px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.4);}
.mkt-modal h3{font-size:15px;font-weight:700;color:var(--color-title);margin-bottom:20px;}
.mkt-modal .mkt-field{margin-bottom:14px;}
.mkt-modal .mkt-field label{display:block;font-size:11px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.mkt-modal .mkt-field input,.mkt-modal .mkt-field select,.mkt-modal .mkt-field textarea{width:100%;box-sizing:border-box;background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);padding:9px 12px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;}
.mkt-modal .mkt-field textarea{resize:vertical;min-height:60px;}
.mkt-modal .mkt-modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.gmail-editor-wrap{border:0.5px solid var(--border-field-input);border-radius:var(--radius-input);overflow:hidden;background:var(--bg-field-input);}
.gmail-editor-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;border-bottom:0.5px solid var(--border-field-input);padding:4px 6px;}
.gmail-editor-toolbar .icon-btn{padding:5px;font-size:13px;}
.gmail-editor-sep{width:0.5px;height:18px;background:var(--border-field-input);margin:0 3px;flex-shrink:0;}
.gmail-editor-body{width:100%;box-sizing:border-box;padding:9px 14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;font-size:13px;min-height:220px;max-height:min(52vh,460px);overflow-y:auto;}
.gmail-editor-body:empty::before{content:attr(data-placeholder);color:var(--color-field-ph);}
.gmail-editor-body ul,.gmail-editor-body ol{padding-left:22px;margin:4px 0;}
/* Assinaturas do Gmail vêm como <table>. As regras globais table/td/tr do
   dashboard (width:100%, min-width:860px, padding e bordas nas células) as
   distorcem — esticam a tabela e afastam o logo do texto. Neutraliza só aqui
   pra a assinatura renderizar como no Gmail. Estilos inline da própria
   assinatura continuam vencendo (têm precedência sobre o stylesheet). */
.gmail-editor-body table{width:auto;min-width:0;table-layout:auto;font-size:inherit;border-collapse:collapse;}
.gmail-editor-body td,.gmail-editor-body th{padding:0;border:none;vertical-align:top;color:inherit;background:none;font-variant-numeric:normal;}
.gmail-editor-body tr,.gmail-editor-body thead tr{background:none;}
.gmail-editor-body img{max-width:100%;height:auto;}
/* Colunas de resultados fora do funil (NQ/Lost/Stand-by), exibidas só durante
   a busca em Leads/Onboarding. Distinção sutil: tracejado + leve opacidade,
   pra deixar claro que não fazem parte do funil ativo. */
.ld-col-offfunnel,.ob-col-offfunnel{border:1px dashed var(--border-metric);border-radius:12px;opacity:.94;background:var(--bg-metric);}
.ld-col-offfunnel .ld-card,.ob-col-offfunnel .ob-card{cursor:pointer;}
.mkt-modal .mkt-etapa-row{display:flex;gap:8px;align-items:flex-start;background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:8px;padding:10px;margin-bottom:8px;}
.mkt-modal .mkt-etapa-row input,.mkt-modal .mkt-etapa-row select{flex:1;min-width:0;}
.mkt-modal .mkt-etapa-row textarea{flex:2;min-width:0;}
.mkt-etapa-rm{background:none;border:none;color:var(--color-danger-dark);cursor:pointer;font-size:16px;padding:4px;flex-shrink:0;}
/* Drawer de contato */
.mkt-drawer{position:fixed;right:-440px;top:0;width:420px;height:100vh;background:var(--bg-modal);border-left:0.5px solid var(--border-modal);z-index:600;transition:right .3s ease;display:flex;flex-direction:column;overflow-y:auto;}
.mkt-drawer.open{right:0;box-shadow:-8px 0 32px rgba(0,0,0,.25);}
.mkt-drawer-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.mkt-drawer-hdr h3{font-size:15px;font-weight:700;color:var(--color-title);}
.mkt-drawer-close{background:none;border:none;color:var(--color-tab-inactive);cursor:pointer;font-size:18px;}
.mkt-drawer-body{padding:16px 20px;flex:1;}
.mkt-drawer-overlay{position:fixed;inset:0;z-index:599;display:none;}
.mkt-drawer-overlay.open{display:block;}
.mkt-hist-item{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border-metric);}
.mkt-hist-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;margin-top:4px;}
.mkt-hist-info{font-size:12px;color:var(--color-sub);}
.mkt-hist-info b{color:var(--color-title);}
/* Confirm modal */
.mkt-confirm-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;}
.mkt-confirm-bg.open{display:flex;}
.mkt-confirm-box{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:var(--radius-modal);padding:24px;width:360px;max-width:94vw;}
.mkt-confirm-box p{font-size:14px;color:var(--color-sub);margin-bottom:20px;line-height:1.5;}
.mkt-confirm-footer{display:flex;gap:10px;justify-content:flex-end;}
/* ─── TAB TRANSITIONS ─── */
@keyframes screenSlideIn{
  from{opacity:0;transform:translateX(18px);}
  to{opacity:1;transform:translateX(0);}
}
.main-content>.screen.active{animation:screenSlideIn 220ms cubic-bezier(.22,.68,0,1.2);}

/* ─── SKELETON SHIMMER ─── */
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@keyframes shimmer-skel{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,var(--bg-metric) 25%,rgba(147,147,255,.07) 50%,var(--bg-metric) 75%);background-size:400px 100%;animation:shimmer-skel 1.3s infinite;border-radius:4px;}
.skel-row td{padding:11px 16px;}
.skel-cell{height:13px;border-radius:3px;display:inline-block;}
.fin-kpi-card.kpi-skeleton .fin-kpi-value,
.fin-kpi-card.kpi-skeleton .fin-kpi-sub,
.fin-kpi-card.kpi-skeleton .fin-kpi-delta{
  color:transparent!important;
  border-radius:5px;
  background:linear-gradient(90deg,rgba(147,147,255,.08) 25%,rgba(147,147,255,.18) 50%,rgba(147,147,255,.08) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  user-select:none;
  min-width:80px;
  display:block;
}
.fin-kpi-card.kpi-skeleton .fin-kpi-label{opacity:.35;}
.tbl-row-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;justify-content:flex-end;white-space:nowrap;}
.tbl-row-actions .tbl-ra-btn{flex:none;}
tr:hover .tbl-row-actions,.prow:hover .tbl-row-actions{opacity:1;}
.tbl-ra-btn{background:none;border:1px solid var(--border-metric);color:var(--color-label);border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:3px;font-family:inherit;}
.tbl-ra-btn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}

/* ─── SHARE BUTTON ─── */
.kpi-share-btn{
  position:absolute;top:10px;right:10px;
  background:none;border:none;cursor:pointer;
  color:var(--color-sub);opacity:0;
  transition:opacity .2s,color .2s;
  padding:3px;border-radius:5px;
  font-size:14px;line-height:1;
}
.fin-kpi-card:hover .kpi-share-btn{opacity:.7;}
.kpi-share-btn:hover{color:var(--color-accent-light);opacity:1!important;}

/* ─── SHARE TOAST ─── */
#kpi-share-toast{
  position:fixed;bottom:28px;right:28px;z-index:9999;
  background:rgba(40,37,70,.97);border:0.5px solid rgba(147,147,255,.35);
  border-radius:10px;padding:11px 18px;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  color:#c3c4fd;box-shadow:0 8px 32px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(12px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
#kpi-share-toast.visible{opacity:1;transform:translateY(0);}

/* Botões globais para modais mkt (fora do #screen-mkt) */
.mkt-modal .mkt-btn,.mkt-confirm-box .mkt-btn,.ar2-drawer .mkt-btn,.pf-gmail-actions .mkt-btn{background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-btn);padding:9px 18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s;}
.mkt-modal .mkt-btn:hover,.mkt-confirm-box .mkt-btn:hover,.ar2-drawer .mkt-btn:hover,.pf-gmail-actions .mkt-btn:hover{opacity:.85;}
.mkt-modal .mkt-btn-sm,.mkt-confirm-box .mkt-btn-sm,.ar2-drawer .mkt-btn-sm,.pf-gmail-actions .mkt-btn-sm{background:var(--bg-metric);color:var(--color-sub);border:0.5px solid var(--border-metric);border-radius:6px;padding:5px 12px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .2s;}
.mkt-modal .mkt-btn-sm:hover,.mkt-confirm-box .mkt-btn-sm:hover,.ar2-drawer .mkt-btn-sm:hover,.pf-gmail-actions .mkt-btn-sm:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
.mkt-modal .mkt-btn-danger,.mkt-confirm-box .mkt-btn-danger{background:none;color:var(--color-danger-dark);border:0.5px solid var(--color-danger-dark);border-radius:6px;padding:9px 18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;}

/* Command Palette */
#cmd-palette-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:10000;display:none;align-items:flex-start;justify-content:center;padding-top:15vh;}
#cmd-palette-overlay.open{display:flex;}
#cmd-palette{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:14px;width:100%;max-width:580px;box-shadow:0 24px 64px rgba(0,0,0,.5);overflow:hidden;}
#cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:0.5px solid var(--border-th);}
#cmd-input-wrap .ti{font-size:18px;color:var(--color-label);}
#cmd-input{flex:1;background:transparent;border:none;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--color-title);caret-color:var(--color-accent);}
#cmd-input::placeholder{color:var(--color-label);}
#cmd-results{max-height:380px;overflow-y:auto;padding:6px;}
.cmd-section{font-size:10px;font-weight:700;color:var(--color-label);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px 4px;}
.cmd-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s;}
.cmd-item:hover,.cmd-item.active{background:rgba(77,77,255,.12);}
.cmd-item .ti{font-size:16px;color:var(--color-label);width:20px;text-align:center;}
.cmd-item-label{flex:1;font-size:13px;color:var(--color-td);font-family:'Montserrat',sans-serif;}
.cmd-item-sub{font-size:11px;color:var(--color-label);}
/* Etiqueta da aba de origem: encostada à direita, discreta. É o que diz PRA
   ONDE o clique leva — dois registros de mesmo nome em abas diferentes só se
   distinguem por ela. */
.cmd-item-tag{margin-left:auto;flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-accent-light);background:var(--color-accent-bg);
  border-radius:999px;padding:3px 9px;}
/* Atalho no botão de busca da Home */

.cmd-item-kbd{font-size:10px;color:var(--color-label);background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:4px;padding:2px 6px;}
#cmd-empty{text-align:center;padding:32px;color:var(--color-label);font-size:13px;}

/* Keyboard shortcuts modal */
#kbd-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:10000;display:none;align-items:center;justify-content:center;}
#kbd-modal-overlay.open{display:flex;}
#kbd-modal{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:14px;padding:28px;width:100%;max-width:480px;max-height:80vh;overflow-y:auto;}
#kbd-modal h3{font-size:15px;font-weight:700;color:var(--color-title);margin:0 0 20px;}
.kbd-section{margin-bottom:18px;}
.kbd-section h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-label);margin:0 0 8px;}
.kbd-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid var(--border-th);}
.kbd-row:last-child{border-bottom:none;}
.kbd-desc{font-size:12px;color:var(--color-td);}
.kbd-keys{display:flex;gap:4px;}
.kbd-key{font-size:10px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:4px;padding:2px 7px;color:var(--color-label);font-family:monospace;}

/* Notifications */
#notif-btn{position:relative;background:transparent;border:none;cursor:pointer;color:var(--color-label);padding:6px 8px;border-radius:6px;display:flex;align-items:center;}
#notif-btn:hover{color:var(--color-title);}
#notif-badge{position:absolute;top:2px;right:2px;background:var(--color-danger-light);color:#fff;font-size:9px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;padding:0 3px;font-family:'Montserrat',sans-serif;}
#notif-badge.show{display:flex;}
#notif-panel{position:fixed;top:52px;right:12px;width:340px;background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:3000;display:none;max-height:480px;overflow:hidden;flex-direction:column;}
#notif-panel.open{display:flex;}
#notif-panel-hdr{padding:14px 16px 10px;border-bottom:0.5px solid var(--border-th);display:flex;justify-content:space-between;align-items:center;}
#notif-panel-hdr h4{font-size:13px;font-weight:700;color:var(--color-title);margin:0;}
#notif-list{overflow-y:auto;flex:1;}
.notif-item{padding:12px 16px;border-bottom:0.5px solid var(--border-th);cursor:pointer;transition:background .12s;}
.notif-item:hover{background:var(--bg-metric);}
.notif-item.unread{border-left:3px solid var(--color-accent);}
.notif-item-title{font-size:12px;font-weight:600;color:var(--color-title);margin-bottom:3px;}
.notif-item-sub{font-size:11px;color:var(--color-label);}
.notif-empty{padding:32px;text-align:center;color:var(--color-label);font-size:12px;}
.col-dot-popover{position:fixed;z-index:6000;background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:12px;display:flex;flex-direction:column;gap:10px;width:184px;}
.col-dot-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.col-dot-swatch{width:32px;height:32px;border-radius:8px;border:1px solid rgba(0,0,0,.08);cursor:pointer;transition:transform .1s;padding:0;}
.col-dot-swatch:hover{transform:scale(1.1);}
.col-dot-custom-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:8px;padding:7px;color:var(--color-title);font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;cursor:pointer;transition:background .15s;}
.col-dot-custom-btn:hover{background:var(--color-accent-bg);}
#profile-btn{padding:2px;border-radius:50%;}
#profile-btn .avatar-bubble{width:26px;height:26px;font-size:11px;}
#profile-panel{position:fixed;top:52px;right:12px;width:280px;background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:3000;display:none;flex-direction:column;padding:16px;gap:10px;}
#profile-panel.open{display:flex;}
#profile-panel-hdr{display:flex;align-items:center;gap:10px;}
#profile-panel-avatar .avatar-bubble{width:44px;height:44px;font-size:16px;}
#profile-panel-name{font-size:13px;font-weight:700;color:var(--color-title);}
#profile-panel-email{font-size:11px;color:var(--color-label);}
.profile-photo-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:8px;padding:8px;color:var(--color-title);font-size:12px;font-family:'Montserrat',sans-serif;cursor:pointer;transition:background .15s;}
.profile-photo-btn:hover{background:var(--color-accent-bg);}
.profile-notif-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-title);cursor:pointer;padding:4px 0;}
.profile-notif-row input{cursor:pointer;flex-shrink:0;}

/* ═══ MEU PERFIL (tela cheia) ═══ */
#screen-perfil{padding:4px 0 0;}
.pf-header{display:flex;align-items:center;gap:20px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:22px 26px;margin-bottom:16px;}
.pf-header-avatar{position:relative;width:76px;height:76px;flex-shrink:0;cursor:pointer;border-radius:50%;}
.pf-header-avatar .avatar-bubble{width:76px!important;height:76px!important;font-size:26px!important;}
.pf-header-avatar-edit{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;border:2px solid var(--bg-metric);}
.pf-header-info{min-width:0;}
.pf-header-name{font-size:19px;font-weight:700;color:var(--color-title);line-height:1.25;}
.pf-header-email{font-size:12px;color:var(--color-sub);margin-top:2px;}
.pf-header-meta{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.pf-role-badge{display:inline-flex;align-items:center;gap:5px;background:var(--color-accent-bg);border:0.5px solid var(--color-accent);color:var(--color-accent-light);border-radius:20px;padding:3px 11px;font-size:11px;font-weight:700;}
.pf-since{display:inline-flex;align-items:center;gap:5px;color:var(--color-tab-inactive);font-size:11px;}

.pf-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:900px){.pf-stats-grid{grid-template-columns:repeat(2,1fr);}}
.pf-stat{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:14px 16px;}
.pf-stat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-label);margin-bottom:8px;}
.pf-stat-val{font-size:24px;font-weight:700;color:var(--color-title);line-height:1;}
.pf-stat-sub{font-size:10px;color:var(--color-tab-inactive);margin-top:6px;font-weight:500;}
.pf-stat-time .pf-stat-val{color:var(--color-accent-light);}

.pf-body{display:flex;gap:18px;align-items:flex-start;}
.pf-tabs{display:flex;flex-direction:column;gap:2px;background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:8px;flex-shrink:0;width:180px;}
.pf-tab{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--color-sub);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s,color .15s;}
.pf-tab:hover{background:var(--color-accent-bg);color:var(--color-title);}
.pf-tab.active{background:var(--color-accent-bg);color:var(--color-accent-light);}
.pf-pane{flex:1;min-width:0;}
.pf-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media(max-width:1100px){.pf-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){.pf-body{flex-direction:column;} .pf-tabs{flex-direction:row;width:100%;overflow-x:auto;} .pf-grid{grid-template-columns:1fr;}}
.pf-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:16px 18px;min-width:0;}
.pf-card-title{font-size:12px;font-weight:700;color:var(--color-title);margin-bottom:12px;}
.pf-field{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid var(--border-th);font-size:12px;}
.pf-field:last-child{border-bottom:none;}
.pf-field-lbl{color:var(--color-sub);}
.pf-field-val{color:var(--color-title);font-weight:600;text-align:right;}
.pf-perm-item{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border-th);}
.pf-perm-item:last-child{border-bottom:none;}
.pf-perm-icon{width:22px;height:22px;border-radius:6px;background:rgba(22,160,114,.12);color:var(--color-success-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;margin-top:1px;}
.pf-perm-name{font-size:12px;font-weight:700;color:var(--color-title);}
.pf-perm-desc{font-size:11px;color:var(--color-tab-inactive);margin-top:2px;line-height:1.4;}
.pf-activity-item{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border-th);}
.pf-activity-item:last-child{border-bottom:none;}
.pf-activity-icon{width:22px;height:22px;border-radius:6px;background:var(--color-accent-bg);color:var(--color-accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;margin-top:1px;}
.pf-gmail-desc{font-size:12px;color:var(--color-sub);line-height:1.5;margin-bottom:14px;}
.pf-gmail-status{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.pf-gmail-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
.pf-gmail-badge-off{background:rgba(147,147,255,.1);color:var(--color-tab-inactive);}
.pf-gmail-badge-on{background:rgba(22,160,114,.12);color:var(--color-success-dark);}
.pf-gmail-badge-error{background:rgba(239,68,68,.12);color:var(--color-danger);}
.pf-gmail-email{font-size:12px;color:var(--color-sub);}
.pf-gmail-actions{display:flex;gap:10px;}
.pf-activity-name{font-size:12px;font-weight:600;color:var(--color-title);}
.pf-activity-time{font-size:10px;color:var(--color-tab-inactive);margin-top:2px;}
.pf-empty{font-size:12px;color:var(--color-tab-inactive);padding:8px 0;}
.pf-card-notif{max-width:520px;}
.pf-card-notif .profile-notif-row{padding:7px 0;font-size:12px;}
.notif-settings-btn{background:transparent;border:none;cursor:pointer;color:var(--color-label);padding:4px;border-radius:6px;display:flex;align-items:center;transition:background .15s,color .15s;}
.notif-settings-btn:hover{color:var(--color-title);background:var(--bg-metric);}
#notif-prefs-panel{display:none;flex-direction:column;padding:10px 16px;border-bottom:0.5px solid var(--border-th);max-height:220px;overflow-y:auto;}
#notif-prefs-panel.open{display:flex;}
#avatar-crop-bg{display:none;position:fixed;inset:0;background:var(--bg-modal-overlay);align-items:center;justify-content:center;z-index:5000;backdrop-filter:blur(4px);}
#avatar-crop-bg.open{display:flex;}
#avatar-crop-box{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;width:300px;}
#avatar-crop-box h4{margin:0;font-size:14px;color:var(--color-title);align-self:flex-start;}
#avatar-crop-viewport{width:240px;height:240px;border-radius:50%;overflow:hidden;background:#111;cursor:grab;touch-action:none;}
#avatar-crop-viewport:active{cursor:grabbing;}
#avatar-crop-zoom{width:100%;}
#avatar-crop-actions{display:flex;gap:8px;width:100%;justify-content:flex-end;}
.avatar-crop-cancel-btn{font-size:12px;font-weight:700;color:var(--color-danger-light);background:none;border:none;cursor:pointer;padding:7px 12px;border-radius:var(--radius-btn);font-family:'Montserrat',sans-serif;transition:background .15s;}
.avatar-crop-cancel-btn:hover{background:rgba(217,79,79,.1);}

/* Presentation Mode */
/* ── Presentation Mode ── */
body.presentation-mode{background:var(--bg-body);}
body.presentation-mode #sidebar{display:none!important;}
body.presentation-mode .top-bar{display:none!important;}
body.presentation-mode .main-content{margin-left:0!important;padding:40px 48px 80px!important;transition:padding .3s ease;}
body.presentation-mode .add-btn{display:none!important;}
body.presentation-mode .icon-btn{display:none!important;}
body.presentation-mode .toolbar{justify-content:center!important;margin-bottom:24px!important;}
body.presentation-mode .fin-kpi-value{font-size:44px!important;letter-spacing:-.03em!important;}
body.presentation-mode .fin-kpi-label{font-size:12px!important;}
body.presentation-mode .metric .mval{font-size:36px!important;}
body.presentation-mode table{font-size:13px!important;}
body.presentation-mode .hs-kpi-val{font-size:36px!important;}
body.presentation-mode .screen-title{font-size:22px!important;}
/* Exit pill */
#pres-exit-btn{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:9999;
  background:rgba(20,20,40,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.8);
  border:0.5px solid rgba(255,255,255,.15);
  border-radius:99px;
  padding:9px 22px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:600;
  cursor:pointer;
  display:none;
  align-items:center;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:opacity .2s,transform .2s;
}
#pres-exit-btn:hover{opacity:1;background:rgba(77,77,255,.9);color:#fff;border-color:transparent;}
body.presentation-mode #pres-exit-btn{display:flex;animation:presExitIn .4s ease;}
@keyframes presExitIn{from{opacity:0;transform:translateX(-50%) translateY(16px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.ld-card.aged-warn{border-left:3px solid #FBBF24;}
.ld-card.aged-over{border-left:3px solid var(--color-danger-light);}
.ld-age-badge{font-size:10px;color:var(--color-danger-light);font-weight:700;margin-top:4px;}
/* era o único botão da barra sem flex-shrink:0 — encolhia e quebrava o
   próprio rótulo em duas linhas antes de a barra inteira quebrar */
.btn-convert{background:rgba(100,100,120,.18);color:var(--color-tab-inactive);border:0.5px solid var(--border-metric);border-radius:var(--radius-btn);padding:8px 18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:not-allowed;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;pointer-events:none;opacity:.5;}
.btn-convert.ready{background:linear-gradient(90deg,#16A072,#34D399);color:#fff;border-color:transparent;cursor:pointer;pointer-events:auto;opacity:1;}
.btn-convert.ready:hover{opacity:.88;}
.hs-triage{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
@media(max-width:768px){.hs-triage{grid-template-columns:1fr;}}
.hs-triage-col{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:var(--radius-card);padding:14px;}
.hs-triage-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;display:flex;align-items:center;gap:6px;}
.hs-triage-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:0.5px solid var(--border-th);font-size:12px;}
.hs-triage-item:last-child{border-bottom:none;}
.hs-triage-item-name{color:var(--color-td);font-weight:600;}
.hs-triage-score{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;}
.hs-triage-empty{color:var(--color-label);font-size:12px;padding:8px 0;}
.mig-avatar{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;margin-right:8px;overflow:hidden;}
/* Variante com favicon. O ladrilho tem tamanho FIXO e a imagem se ajusta
   dentro dele (object-fit:contain) — favicon vem em 16, 32, 64 ou 180px e,
   solto, cada cliente ficaria com um ícone de um tamanho. O fundo neutro
   substitui a cor da sigla: colorido atrás de logo com fundo transparente
   suja o ícone. */
.mig-avatar-img{background:var(--bg-dash)!important;border:0.5px solid var(--border-metric);padding:3px;}
.mig-avatar-img img{width:100%;height:100%;object-fit:contain;display:block;}
body.light .mig-avatar-img{background:#fff!important;}
.mig-name-cell{display:flex;align-items:center;}
/* Ladrilho no cabeçalho da tela de detalhe. Maior que o da lista porque ali
   ele acompanha um título de 18px, e sem margem à direita — quem dá o
   espaçamento é o `gap` do cabeçalho. */
.mig-ds-avatar{display:inline-flex;flex-shrink:0;}
.mig-ds-avatar .mig-avatar{width:34px;height:34px;border-radius:9px;font-size:13px;margin-right:0;}
/* ── Painel de META ANUAL (2 colunas na ponta direita da faixa de KPIs) ──
   Substituiu as barrinhas no rodapé dos cards de Receita e Volume: aquelas
   escalavam pelo nº de meses do filtro, então o alvo mudava a cada clique.
   Meta é do ano inteiro e não se move com filtro nenhum. */
.fin-meta-ano{grid-column:span 2;display:flex;flex-direction:column;gap:9px;justify-content:center;}
.fin-meta-hdr{display:flex;align-items:center;gap:8px;}
.fin-meta-tit{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-label);}
.fin-meta-prog{font-size:10px;font-weight:600;color:var(--color-tab-inactive);margin-left:auto;}
.fin-meta-edit{background:none;border:none;padding:2px;cursor:pointer;color:var(--color-tab-inactive);display:flex;align-items:center;border-radius:5px;}
.fin-meta-edit:hover{color:var(--color-accent);}
.fin-meta-edit i{font-size:14px;}
.fin-meta-linha{display:flex;flex-direction:column;gap:3px;}
.fin-meta-l1{display:flex;justify-content:space-between;align-items:baseline;}
.fin-meta-rot{font-size:11.5px;font-weight:600;color:var(--color-title);}
.fin-meta-pct{font-size:13px;font-weight:700;color:var(--color-title);}
.fin-meta-l2{font-size:10.5px;color:var(--color-tab-inactive);}
.fin-meta-l2 span{opacity:.75;}
.fin-meta-vazio{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--color-tab-inactive);font-size:11.5px;}
.fin-meta-vazio i{font-size:18px;color:var(--color-accent);}
.fin-meta-btn{background:none;border:0.5px solid var(--color-accent);color:var(--color-accent-light);border-radius:7px;padding:5px 12px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;}
body.light .fin-meta-btn{color:var(--color-accent);}
.fin-meta-btn:hover{background:var(--color-accent);color:#fff;}
.fin-meta-edit:focus-visible,.fin-meta-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
/* a barra é do painel agora — os rodapés dos KPIs deixaram de existir */
.fin-kpi-target-bar{height:3px;background:var(--border-metric);border-radius:99px;overflow:hidden;margin-top:3px;}
.fin-kpi-target-fill{height:100%;border-radius:99px;transition:width .6s ease;}
#fin-target-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:4000;display:none;align-items:center;justify-content:center;}
#fin-target-modal-bg.open{display:flex;}
#fin-target-modal{background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:12px;padding:24px;width:320px;}
#fin-target-modal h3{font-size:14px;font-weight:700;color:var(--color-title);margin:0 0 16px;}
.density-btn{background:transparent;border:0.5px solid var(--border-metric);color:var(--color-label);border-radius:6px;padding:5px 10px;font-size:11px;font-family:'Montserrat',sans-serif;cursor:pointer;display:flex;align-items:center;gap:5px;}
.density-btn:hover,.density-btn.active{border-color:var(--color-accent);color:var(--color-accent);}
body.density-compact table td, body.density-compact table th{ padding:5px 10px!important; font-size:11px!important; }
body.density-compact .mig-avatar{ width:22px!important; height:22px!important; font-size:9px!important; }
body.density-comfortable table td, body.density-comfortable table th{ padding:14px 16px!important; }
.hs-score-wrap{position:relative;display:inline-block;cursor:help;}
.hs-score-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-modal);border:0.5px solid var(--border-modal);border-radius:10px;padding:10px 12px;min-width:180px;z-index:100;display:none;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.hs-score-wrap:hover .hs-score-tooltip{display:block;}
.hs-score-tooltip-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:11px;color:var(--color-td);}
.hs-score-tooltip-row span:last-child{font-weight:700;color:var(--color-title);}
.hs-score-tooltip-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-label);margin-bottom:6px;}

/* ═══════════════════ FINANCEIRO V2 (layout do mockup) ═══════════════════ */
/* Topbar */
.fin2-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.fin2-pills{display:flex;gap:4px;flex-wrap:wrap;}
.fin2-partner-wrap{display:flex;align-items:center;gap:6px;}
.fin2-partner-wrap .fin2-lbl{font-size:12px;color:var(--color-sub);}
.fin2-topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
.fin2-ts{font-size:12px;color:var(--color-tab-inactive);white-space:nowrap;}
.fin2-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;transition:all .18s;white-space:nowrap;border:0.5px solid var(--border-field-input);}
.fin2-btn i{font-size:15px;}
.fin2-btn-ghost{background:var(--bg-field-input);color:var(--color-title);}
.fin2-btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent);}
.fin2-btn-primary{background:var(--gradient-brand);color:#fff;border-color:transparent;}
.fin2-btn-primary:hover{opacity:.9;}
.fin2-menu{position:relative;}
.fin2-menu-pop{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:10px;box-shadow:0 10px 32px rgba(0,0,0,.28);padding:5px;min-width:180px;z-index:60;display:none;}
.fin2-menu-pop.open{display:block;}
.fin2-menu-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;font-size:12.5px;color:var(--color-title);cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:'Montserrat',sans-serif;}
.fin2-menu-item:hover{background:var(--bg-metric);}

/* KPI cards v2 */
.fin2-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px;}
.fin2-kpi{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;min-width:0;}
.fin2-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px;}
.fin2-kpi-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-tab-inactive);line-height:1.3;}
.fin2-kpi-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.fin2-kpi-ico.green{background:rgba(16,196,138,.14);color:var(--color-success-dark);}
.fin2-kpi-ico.blue{background:rgba(77,77,255,.14);color:var(--color-accent);}
.fin2-kpi-ico.purple{background:rgba(147,147,255,.16);color:var(--color-accent-light);}
.fin2-kpi-ico.amber{background:rgba(244,160,32,.16);color:#f4a020;}
.fin2-kpi-ico.teal{background:var(--color-info-subtle);color:var(--color-info);}
/* o rosa do 5º KPI vira variável porque a sparkline do mesmo card precisa
   dele — cada card usa o próprio tom no ícone e na linha */
.fin2-kpi-grid{--fin-kpi-pink:#b450dc;}
.fin2-kpi-ico.pink{background:rgba(180,80,220,.15);color:var(--fin-kpi-pink);}
.fin2-kpi-value{font-size:26px;font-weight:700;font-family:'Montserrat',sans-serif;line-height:1.05;color:var(--color-title);}
.fin2-kpi-sub{font-size:11px;color:var(--color-tab-inactive);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Pílula do mês de referência: marca, sem mudar a altura do card, quais KPIs
   são de UM mês em vez do período inteiro. Fica no começo do subtítulo, que é
   a única linha de altura fixa que todos os cinco cards compartilham. */
.fin2-kpi-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  padding:1px 5px;border-radius:5px;margin-right:5px;vertical-align:1px;
  background:rgba(147,147,255,.16);color:var(--color-accent-light);}
body.light .fin2-kpi-tag{background:rgba(77,77,255,.1);color:var(--color-accent);}
.fin2-kpi-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:11px;min-height:24px;}
.fin2-kpi-delta{font-size:12px;font-weight:700;display:flex;align-items:center;gap:3px;white-space:nowrap;}
.fin2-kpi-delta.up{color:var(--color-success-dark);}
.fin2-kpi-delta.down{color:var(--color-danger-dark);}
.fin2-kpi-delta.flat{color:var(--color-tab-inactive);}
.fin2-spark{flex:1;max-width:96px;height:26px;}
.fin2-spark svg{width:100%;height:100%;display:block;overflow:visible;}

/* Tabela "Transações por cliente" — mesmos tokens das outras tabelas do
   dashboard. Rola na horizontal no mobile e na vertical a partir de ~10
   linhas, com cabeçalho e linha de total grudados nas bordas. */
.fin-tx-wrap{border:0.5px solid var(--border-table-wrap);border-radius:12px;background:var(--bg-table-wrap);
  overflow:auto;-webkit-overflow-scrolling:touch;max-height:420px;}
.fin-tx-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px;}
.fin-tx-table th{position:sticky;top:0;z-index:1;background:var(--bg-thead);padding:9px 12px;text-align:left;
  font-size:10.5px;font-weight:600;color:var(--color-th);text-transform:uppercase;
  letter-spacing:var(--label-spacing);border-bottom:0.5px solid var(--border-th);white-space:nowrap;}
.fin-tx-table td{padding:9px 12px;border-bottom:0.5px solid var(--border-td);color:var(--color-td);white-space:nowrap;}
.fin-tx-table th.num,.fin-tx-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.fin-tx-table td.nome{max-width:230px;overflow:hidden;text-overflow:ellipsis;}
.fin-tx-table tbody tr:hover{background:var(--bg-row-hover);}
.fin-tx-table tr.fin-tx-total td{position:sticky;bottom:0;background:var(--bg-thead);
  font-weight:700;color:var(--color-title);border-bottom:none;}
.fin-tx-bar{display:block;height:3px;border-radius:99px;background:var(--color-accent);opacity:.5;margin-top:3px;}
/* cabeçalho clicável: a tabela é o destino dos "Ver todos os parceiros", e
   quem chega do Top 10 de Receita quer reordenar por receita */
.fin-tx-th{cursor:pointer;user-select:none;}
.fin-tx-th:hover{color:var(--color-title);}
.fin-tx-th.ativo{color:var(--color-accent-light);}
.fin-tx-th:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;}
/* pisca ao chegar pelo link, senão a rolagem termina e nada indica onde parou */
@keyframes finTxFlash{from{box-shadow:0 0 0 2px var(--color-accent);}to{box-shadow:0 0 0 2px transparent;}}
.fin-tx-flash{animation:finTxFlash 1.6s ease-out 1;}
@media (prefers-reduced-motion:reduce){.fin-tx-flash{animation:none;}}
.fin-tx-empty{padding:30px 16px;text-align:center;color:var(--color-sub);}
.fin-tx-empty i{font-size:26px;display:block;margin-bottom:7px;opacity:.45;}
.fin-tx-empty b{display:block;font-size:13px;font-weight:600;color:var(--color-title);margin-bottom:3px;}

/* Banner de concentração */
.fin2-conc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;margin-bottom:18px;background:rgba(244,160,32,.09);border:0.5px solid rgba(244,160,32,.35);font-size:13px;color:var(--color-title);}
.fin2-conc .fin2-conc-star{color:#f4a020;font-size:16px;flex-shrink:0;}
.fin2-conc-plat{color:var(--color-sub);font-size:12.5px;}
.fin2-conc-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(244,160,32,.16);color:#c67c10;border:0.5px solid rgba(244,160,32,.4);}
.fin2-conc-link{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--color-accent);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.fin2-conc-link:hover{text-decoration:underline;}

/* Main grid: charts + sidebar */
/* coluna única: a sidebar de insights/filtros rápidos foi removida */
.fin2-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin-bottom:8px;}
.fin2-sec-hdr{display:flex;align-items:center;gap:8px;padding:2px 0 10px;}
.fin2-sec-hdr .fin2-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.fin2-sec-hdr span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-sub);}
.fin2-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-bottom:18px;}
.fin2-card{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:14px;padding:16px;min-width:0;}
.fin2-card-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px;}
.fin2-card-title{font-size:14px;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--color-title);}
.fin2-card-sub{font-size:11.5px;color:var(--color-sub);margin-top:2px;}
.fin2-tools{display:flex;align-items:center;gap:6px;flex-shrink:0;}
/* Segmented Mês / Média Móvel */
.fin2-seg{display:inline-flex;background:var(--bg-field-input);border:0.5px solid var(--border-field-input);border-radius:8px;padding:2px;}
.fin2-seg button{font-size:11px;font-weight:600;font-family:'Montserrat',sans-serif;padding:4px 10px;border:none;background:none;color:var(--color-tab-inactive);cursor:pointer;border-radius:6px;transition:all .15s;}
.fin2-seg button.active{background:var(--gradient-brand);color:#fff;}
.fin2-icobtn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:0.5px solid var(--border-field-input);background:transparent;color:var(--color-tab-inactive);cursor:pointer;font-size:14px;transition:all .15s;}
.fin2-icobtn:hover{background:rgba(77,77,255,.1);color:var(--color-accent);}
.fin2-icobtn.active{background:var(--gradient-brand);color:#fff;border-color:transparent;}
.fin2-ver-todos{font-size:11.5px;font-weight:600;color:var(--color-accent);cursor:pointer;white-space:nowrap;}
.fin2-ver-todos:hover{text-decoration:underline;}

/* Sidebar */
.fin2-insight{display:flex;gap:11px;padding:10px 0;border-top:0.5px solid var(--divider);}
.fin2-insight:first-of-type{border-top:none;padding-top:0;}
.fin2-insight-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(77,77,255,.12);color:var(--color-accent);}
.fin2-insight-ico.green{background:rgba(16,196,138,.14);color:var(--color-success-dark);}
.fin2-insight-ico.amber{background:rgba(244,160,32,.16);color:#f4a020;}
.fin2-insight-tt{font-size:12.5px;font-weight:700;color:var(--color-title);margin-bottom:2px;}
.fin2-insight-tx{font-size:11.5px;color:var(--color-sub);line-height:1.4;}

@media(max-width:820px){
  .fin2-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .fin2-row{grid-template-columns:1fr;}
}

/* Financeiro v2 — seletor de range de datas (topbar + sidebar) */
.fin2-range{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fin2-range .fin2-lbl{font-size:12px;color:var(--color-sub);}
.fin2-range .fin-select{max-width:120px;}

/* ═══════ CAMPANHAS (ABM) — Marketing ═══════ */
.mkc-racional-preview{font-size:11px;color:var(--color-sub);line-height:1.5;margin:6px 0 2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mkc-date{font-size:11px;color:var(--color-tab-inactive);}
.mkc-racional{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:var(--radius-card);padding:14px 16px;font-size:12px;color:var(--color-td);line-height:1.6;white-space:pre-wrap;}
.mkc-racional-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-tab-inactive);margin-bottom:6px;}
.mkc-summary{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.mkc-chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:rgba(147,147,255,0.10);color:var(--color-sub);white-space:nowrap;}
.mkc-chip-ok{background:rgba(22,160,114,0.14);color:var(--color-success-dark);}
.mkc-chip-off{background:rgba(147,147,255,0.10);color:var(--color-tab-inactive);}
.mkc-chip-warn{background:rgba(212,144,10,0.14);color:var(--color-warning-dark);}
.mkc-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.mkc-tag-ok{background:rgba(22,160,114,0.14);color:var(--color-success-dark);}
.mkc-tag-off{background:rgba(147,147,255,0.12);color:var(--color-tab-inactive);}
.mkc-tag-warn{background:rgba(212,144,10,0.14);color:var(--color-warning-dark);}
.mkc-lead-link{color:var(--color-accent-light);text-decoration:none;font-weight:600;}
.mkc-lead-link:hover{text-decoration:underline;}
.mkc-hint{font-size:11px;color:var(--color-tab-inactive);line-height:1.5;margin-top:6px;}
.mkc-warn{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.5;
  background:rgba(212,144,10,0.12);color:var(--color-warning-dark);
  border-radius:var(--radius-input);padding:9px 12px;margin-bottom:10px;}
.mkc-progress{font-size:12px;color:var(--color-sub);margin-top:10px;display:flex;align-items:center;gap:8px;}

/* input de arquivo da campanha — o widget nativo não é estilizável de
   forma confiável, então ele fica fora de vista (não display:none, pra
   continuar focável/acessível) e o label vira o botão */
.mkc-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.mkc-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mkc-file-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:var(--radius-input);
  background:var(--color-accent-bg);color:var(--color-accent-light);
  border:0.5px solid var(--border-metric);
  transition:background .15s,border-color .15s;user-select:none;}
.mkc-file-btn:hover{background:rgba(77,77,255,0.22);}
.mkc-file-btn:focus-visible,.mkc-file-input:focus-visible+.mkc-file-row .mkc-file-btn{
  outline:2px solid var(--color-accent);outline-offset:2px;}
.mkc-file-name{font-size:12px;color:var(--color-sub);word-break:break-all;}
.mkc-file-name.is-empty{color:var(--color-tab-inactive);font-style:italic;}

/* ═══════ <select> nativo: rede de segurança visual ═══════
   Todo select do dashboard normalmente é substituído pelo dropdown
   customizado (_ddEnhance em marketing.js). Mas se esse script não rodar
   — arquivo velho em cache, erro de JS antes dele, extensão do
   navegador — sobra o <select> cru, e aí quem desenha é o sistema
   operacional: no Windows/Firefox vem com moldura e seta nativas que não
   têm nada a ver com o resto da tela. Isto aqui garante que o estado
   "sem JS" ainda pareça o dashboard.

   Os !important existem porque cerca de dez regras antigas definem
   `padding` e `background` (shorthand) nos selects em pontos diferentes
   do arquivo — sem eles a seta ficaria por baixo do texto em metade das
   telas. Só as longhands de background e o padding-right levam
   !important: background-COLOR continua vindo das regras originais, e é
   dela que sai a cor por tema.

   Exceções: .inline-status-select (pílula minúscula de edição em célula,
   que já é nativa de propósito e tem métrica própria), [multiple] e
   [data-dd-enhanced] — este último é o select que o _ddEnhance JÁ
   substituiu: o gatilho copia o padding dele, então padding extra aqui
   abriria um vão antes da seta do gatilho. */
select:not(.inline-status-select):not([multiple]):not([data-dd-enhanced]){
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239393FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 10px center!important;
  background-size:11px 11px!important;
  padding-right:30px!important;
}
body.light select:not(.inline-status-select):not([multiple]):not([data-dd-enhanced]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232929A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
}
/* a lista aberta é desenhada pelo SO; Firefox/Windows respeitam estas
   cores, e sem elas o tema escuro dá texto claro sobre fundo branco */
select:not(.inline-status-select) option{background:var(--bg-select-opt);color:var(--color-input);}

/* atalho "Ver campanha" no lead (detalhe e formulário) */
.ld-det-campanha-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:999px;
  background:var(--color-accent-bg);color:var(--color-accent-light);
  border:0.5px solid var(--border-metric);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .15s,border-color .15s;}
.ld-det-campanha-btn:hover{background:rgba(77,77,255,0.22);border-color:var(--color-accent);}
.ld-det-campanha-btn i{font-size:13px;flex-shrink:0;}

/* Pílula de valor multi (tipo de contrato, solução de interesse) —
   usada no detalhe de Lead, Onboarding, Clientes e Finders via
   _multiChipsHtml. Antes esse estilo era inline no _detFieldRow e as
   telas de Clientes/Finders mostravam o mesmo campo como texto puro. */
.ld-multi-chip{display:inline-block;background:rgba(77,77,255,.1);
  border:0.5px solid rgba(77,77,255,.28);border-radius:5px;padding:4px 9px;
  font-size:10.5px;font-weight:600;color:var(--color-accent-light);margin:2px 6px 2px 0;}
body.light .ld-multi-chip{color:var(--color-accent);}

/* ícone "i" de fit por linha + modal do texto de fit */
.mkc-fit-body{font-size:13px;line-height:1.6;color:var(--color-td);white-space:pre-wrap;
  background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:var(--radius-card);padding:14px 16px;max-height:52vh;overflow-y:auto;}

/* ══════════════════════════════════════════════════════════════════
   CAMPANHA — workspace (hero + métricas + action bar + tabela + drawer)
   A tabela é a protagonista: o topo inteiro cabe em ~200px, o resto é
   lista. Tudo entre 150–250ms, como o resto do dashboard.
   ══════════════════════════════════════════════════════════════════ */
#mkc-detail-view{gap:0;}

/* ── Hero (~64px) ── */
.mkc-hero{display:flex;align-items:center;gap:14px;padding:2px 0 14px;flex-wrap:wrap;}
.mkc-hero-back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  flex-shrink:0;border-radius:9px;border:0.5px solid var(--border-metric);
  background:var(--bg-metric);color:var(--color-label);cursor:pointer;transition:background .15s,color .15s;}
.mkc-hero-back:hover{background:var(--color-accent-bg);color:var(--color-accent-light);}
.mkc-hero-main{flex:1;min-width:220px;}
.mkc-hero-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mkc-hero-name{margin:0;font-size:19px;font-weight:700;color:var(--color-title);letter-spacing:-.01em;}
.mkc-hero-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;color:var(--color-sub);margin-top:3px;}
.mkc-hero-meta b{color:var(--color-td);font-weight:700;}
.mkc-dot{color:var(--color-tab-inactive);}
.mkc-hero-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mkc-act{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  padding:7px 13px;border-radius:9px;background:var(--bg-metric);
  border:0.5px solid var(--border-metric);color:var(--color-label);
  transition:background .18s,border-color .18s,color .18s;}
.mkc-act:hover{background:var(--color-accent-bg);color:var(--color-accent-light);border-color:var(--color-accent);}
.mkc-act i{font-size:14px;}
.mkc-act-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.mkc-act-primary:hover{background:var(--color-accent-dark,var(--color-accent));color:#fff;filter:brightness(1.08);}

/* ── Métricas: faixa horizontal densa ── */
.mkc-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px;}
.mkc-metric{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:12px;padding:10px 13px;transition:border-color .18s,transform .18s;}
.mkc-metric.is-click{cursor:pointer;}
.mkc-metric.is-click:hover{border-color:var(--color-accent);transform:translateY(-1px);}
.mkc-metric.is-click:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.mkc-metric-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--color-tab-inactive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-metric-val{font-size:22px;font-weight:700;color:var(--color-title);line-height:1.15;margin-top:2px;}
.mkc-metric-sub{font-size:10px;color:var(--color-sub);}

/* ── Action bar sticky ──
   Mesmo contêiner dos filtros de Leads (.ld-toolbar-box): borda fechada com
   raio 14px em vez de só um border-bottom. Além de padronizar, o padding
   lateral dá folga pros controles das pontas em vez de encostarem na borda. */
.mkc-actionbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:12px;padding:12px 14px;
  background:var(--bg-body-color,var(--bg-dash));
  border:0.5px solid var(--border-metric);border-radius:14px;}
body.light .mkc-actionbar{background:#fff;border-color:transparent;}
.mkc-search{position:relative;display:flex;align-items:center;flex:1;min-width:220px;max-width:420px;}
.mkc-search i{position:absolute;left:12px;font-size:15px;color:var(--color-tab-inactive);pointer-events:none;}
.mkc-search input{width:100%;box-sizing:border-box;font-family:'Montserrat',sans-serif;font-size:13px;
  padding:9px 12px 9px 34px;border-radius:10px;
  background:var(--bg-field-input);border:0.5px solid var(--border-field-input);
  color:var(--color-field-input);transition:border-color .18s,box-shadow .18s;}
.mkc-search input:focus{border-color:var(--color-accent);}
.mkc-search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5);}
.mkc-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mkc-chip-f{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  background:transparent;border:0.5px solid var(--border-metric);color:var(--color-sub);
  transition:background .18s,color .18s,border-color .18s;}
.mkc-chip-f:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
.mkc-chip-f.on{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.mkc-actionbar-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.mkc-colmenu{position:relative;}
.mkc-colmenu-drop{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;z-index:60;
  background:var(--bg-modal);border:1px solid var(--border-metric);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);padding:6px;display:none;}
.mkc-colmenu-drop.open{display:block;}
.mkc-colmenu-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;
  font-size:12.5px;color:var(--color-title);cursor:pointer;transition:background .15s;}
.mkc-colmenu-item:hover{background:var(--bg-metric);}
.mkc-colmenu-item input{accent-color:var(--color-accent);width:14px;height:14px;cursor:pointer;}

/* ── Tabela ── */
.mkc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mkc-table{width:100%;border-collapse:collapse;font-family:'Montserrat',sans-serif;}
/* Cabeçalho travado na rolagem.
   A tentativa anterior falhou por um detalhe do sticky: ele se ancora no
   ancestral que ROLA, e `overflow-x:auto` no .mkc-tablewrap já faz dele um
   contexto de rolagem. Como quem rolava na vertical era o PAI
   (#mkc-table-wrap), o thead ficava grudado num contêiner que não rolava —
   ou seja, descia junto com as linhas.
   A correção não está aqui, e sim em quem rola: o .mkc-tablewrap passou a
   ser o único contêiner de rolagem dos DOIS eixos (ver a regra
   `body.mkc-detail-open` lá em cima). Com isso o `top:0` tem onde se fixar.
   O box-shadow substitui a borda de baixo porque, com border-collapse,
   borda de célula sticky não acompanha a rolagem no Chrome. */
.mkc-table thead th{background:var(--bg-body-color,var(--bg-dash));
  position:sticky;top:0;z-index:2;
  text-align:left;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-tab-inactive);padding:9px 12px;white-space:nowrap;
  border-bottom:0.5px solid var(--border-metric);
  box-shadow:inset 0 -0.5px 0 var(--border-metric);}
.mkc-th-sort{cursor:pointer;user-select:none;transition:color .15s;}
.mkc-th-sort:hover{color:var(--color-accent-light);}
.mkc-sortind{margin-left:4px;color:var(--color-accent-light);}
.mkc-table tbody td{padding:7px 12px;font-size:12.5px;color:var(--color-td);
  border-bottom:0.5px solid rgba(147,147,255,.07);vertical-align:middle;}
.mkc-row{cursor:pointer;transition:background .15s;}
.mkc-row:hover{background:var(--bg-metric);}
.mkc-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;}
.mkc-row:hover .mkc-td-act i{opacity:1;transform:translateX(0);}
.mkc-td-act{width:34px;text-align:center;color:var(--color-tab-inactive);}
.mkc-td-act i{opacity:0;transform:translateX(-3px);transition:opacity .18s,transform .18s;}
.mkc-tablefoot{padding:10px 2px;font-size:11px;color:var(--color-tab-inactive);}

/* monograma: iniciais + cor derivada do nome, sem logo de terceiro */
.mkc-mono{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#fff;font-weight:700;letter-spacing:.02em;}
.mkc-mono.sm{width:26px;height:26px;border-radius:50%;font-size:9.5px;}
.mkc-mono.sq{width:22px;height:22px;border-radius:6px;font-size:9px;}
.mkc-cell-id{display:flex;align-items:center;gap:9px;min-width:0;}
.mkc-cell-id-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35;}
.mkc-cell-nome{font-weight:600;color:var(--color-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-cell-sub{font-size:10.5px;color:var(--color-tab-inactive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-cell-sub.is-off,.is-off{color:var(--color-empty);}
.mkc-cell-emp{display:flex;align-items:center;gap:8px;min-width:0;}
.mkc-cell-cargo{display:flex;align-items:center;gap:7px;min-width:0;}
.mkc-cell-cargo span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.mkc-sen{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;background:rgba(147,147,255,.14);color:var(--color-accent-light);}
.mkc-badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
/* o badge de LinkedIn leva ícone; os de temperatura não — daí a regra ficar
   no filho e não trocar o display do badge inteiro */
.mkc-badge i{font-size:11px;vertical-align:-1px;margin-right:2px;}
/* seletor de status do LinkedIn: mesmo desenho dos selects da barra de ação,
   um passo menor porque vive dentro de uma linha de detalhe */
.mkc-li-sel{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:8px;background:var(--bg-metric);
  border:0.5px solid var(--border-metric);color:var(--color-label);cursor:pointer;max-width:100%;}
.mkc-li-sel:disabled{opacity:.6;cursor:progress;}
.mkc-b-resp{background:rgba(22,160,114,.16);color:var(--color-success-dark);}
.mkc-b-cont{background:rgba(77,77,255,.14);color:var(--color-accent-light);}
.mkc-b-todo{background:rgba(147,147,255,.12);color:var(--color-sub);}
.mkc-b-off{background:rgba(147,147,255,.08);color:var(--color-tab-inactive);}
.mkc-b-warn{background:rgba(212,144,10,.16);color:var(--color-warning-dark);}
.mkc-score{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;
  border-radius:6px;font-size:11px;font-weight:700;padding:0 6px;}
.mkc-score.hi{background:rgba(22,160,114,.16);color:var(--color-success-dark);}
.mkc-score.mid{background:rgba(212,144,10,.16);color:var(--color-warning-dark);}
.mkc-score.lo{background:rgba(147,147,255,.12);color:var(--color-sub);}

/* ── Drawer ── */
.mkc-drawer-ovl{position:fixed;inset:0;z-index:1200;background:rgba(10,8,25,.42);
  opacity:0;pointer-events:none;transition:opacity .2s;}
.mkc-drawer-ovl.open{opacity:1;pointer-events:auto;}
.mkc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:1201;
  display:flex;flex-direction:column;background:var(--bg-modal);
  border-left:0.5px solid var(--border-metric);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);}
/* sombra só com o painel aberto — fechado ela vazava pra dentro da tela */
.mkc-drawer.open{transform:translateX(0);box-shadow:-18px 0 44px rgba(0,0,0,.28);}
.mkc-drawer-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;
  border-bottom:0.5px solid var(--border-metric);flex-shrink:0;}
.mkc-drawer-hd-txt{flex:1;min-width:0;}
.mkc-drawer-ttl{margin:0;font-size:16px;font-weight:700;color:var(--color-title);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-drawer-sub{font-size:11.5px;color:var(--color-sub);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-drawer-x{flex-shrink:0;width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--color-tab-inactive);transition:background .15s,color .15s;}
.mkc-drawer-x:hover{background:var(--bg-metric);color:var(--color-title);}
.mkc-drawer-body{flex:1;overflow-y:auto;padding:16px 20px 28px;}
.mkc-dr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.mkc-dr-sec{margin-bottom:22px;}
.mkc-dr-t{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-tab-inactive);
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mkc-dr-count{font-size:10px;color:var(--color-sub);letter-spacing:0;}
.mkc-dr-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:0.5px solid rgba(147,147,255,.07);font-size:12.5px;}
.mkc-dr-row>span{color:var(--color-sub);flex-shrink:0;}
.mkc-dr-row>b{color:var(--color-td);font-weight:600;text-align:right;word-break:break-word;}
.mkc-dr-vazio{font-size:12px;color:var(--color-tab-inactive);padding:6px 0;}
.mkc-dr-h{margin:16px 0 6px;font-size:12px;font-weight:700;color:var(--color-accent-light);}
.mkc-dr-h:first-child{margin-top:0;}
.mkc-dr-p{margin:0 0 10px;font-size:12.5px;line-height:1.65;color:var(--color-td);white-space:pre-wrap;}
.mkc-dr-msg{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:10px;padding:11px 13px;margin-bottom:10px;}
.mkc-dr-msg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-tab-inactive);margin-bottom:7px;}
.mkc-dr-copy{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  background:none;border:none;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-light);
  padding:2px 4px;border-radius:5px;transition:background .15s;}
.mkc-dr-copy:hover{background:var(--color-accent-bg);}
.mkc-dr-msg-sub{font-size:12px;font-weight:700;color:var(--color-title);margin-bottom:5px;}
.mkc-dr-msg-body{font-size:12px;line-height:1.6;color:var(--color-td);white-space:pre-wrap;
  max-height:190px;overflow-y:auto;}
.mkc-dr-mail{display:flex;align-items:flex-start;gap:9px;padding:7px 0;
  border-bottom:0.5px solid rgba(147,147,255,.07);}
.mkc-dr-mail i{font-size:14px;margin-top:2px;flex-shrink:0;}
.mkc-dr-mail i.in{color:var(--color-success-dark);}
.mkc-dr-mail i.out{color:var(--color-accent-light);}
.mkc-dr-mail-txt{display:flex;flex-direction:column;min-width:0;}
.mkc-dr-mail-sub{font-size:12px;color:var(--color-td);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkc-dr-tl{display:flex;gap:10px;padding:7px 0;}
.mkc-dr-tl-dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent-light);
  margin-top:6px;flex-shrink:0;}
.mkc-dr-tl-txt{font-size:12px;color:var(--color-td);line-height:1.5;}
.mkc-drawer .ld-notes-list{max-height:none;}

/* ── Responsivo ── */
@media (max-width:1200px){
  .mkc-metrics{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .mkc-metrics{grid-template-columns:repeat(2,1fr);}
  .mkc-actionbar{position:static;}
  .mkc-actionbar-right{margin-left:0;}
  .mkc-search{max-width:none;}
}
@media (max-width:600px){
  /* Mobile: a tabela vira lista — cada linha é um cartão empilhado */
  .mkc-hero-acts{width:100%;}
  .mkc-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .mkc-metric-val{font-size:18px;}
  .mkc-table thead{display:none;}
  .mkc-table,.mkc-table tbody,.mkc-table tr,.mkc-table td{display:block;width:100%;}
  .mkc-row{border:0.5px solid var(--border-metric);border-radius:10px;
    margin-bottom:8px;padding:4px 2px;background:var(--bg-metric);}
  .mkc-table tbody td{border-bottom:none;padding:5px 12px;}
  .mkc-td-act{display:none !important;}
  .mkc-drawer{width:100vw;}
}

#mkt-subtab-campanhas{flex-direction:column;min-height:0;}

/* ── Campanha: seleção em lote e agrupamento ── */
.mkc-th-check,.mkc-td-check{width:38px;padding-left:12px !important;}
.mkc-th-check input,.mkc-td-check input{accent-color:var(--color-accent);width:15px;height:15px;cursor:pointer;
  vertical-align:middle;}
.mkc-row.is-sel{background:var(--color-accent-bg);}
.mkc-row.is-sel:hover{background:rgba(77,77,255,.18);}
.mkc-grp{cursor:pointer;user-select:none;}
.mkc-grp td{background:var(--bg-metric);padding:7px 12px !important;
  border-bottom:0.5px solid var(--border-metric);}
.mkc-grp:hover td{background:var(--color-accent-bg);}
.mkc-grp i{font-size:13px;color:var(--color-tab-inactive);margin-right:6px;vertical-align:-1px;}
.mkc-grp-nome{font-size:11.5px;font-weight:700;color:var(--color-title);}
.mkc-grp-n{margin-left:8px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:rgba(147,147,255,.14);color:var(--color-sub);}
.mkc-group-sel{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  padding:7px 13px;border-radius:9px;background:var(--bg-metric);
  border:0.5px solid var(--border-metric);color:var(--color-label);cursor:pointer;}

.mkc-bulk{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:1150;
  display:flex;align-items:center;gap:16px;padding:10px 12px 10px 18px;
  background:var(--bg-modal);border:0.5px solid var(--border-metric);border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .2s;max-width:calc(100vw - 32px);}
.mkc-bulk.open{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.mkc-bulk-n{font-size:12.5px;font-weight:700;color:var(--color-title);white-space:nowrap;}
.mkc-bulk-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.mkc-bulk-x{width:28px;height:28px;border-radius:8px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--color-tab-inactive);transition:background .15s,color .15s;}
.mkc-bulk-x:hover{background:var(--bg-metric);color:var(--color-title);}
.mkc-act-danger{color:var(--color-danger-light);border-color:rgba(220,80,80,.3);}
.mkc-act-danger:hover{background:rgba(220,80,80,.14);color:var(--color-danger-light);border-color:var(--color-danger-light);}
.mkc-btn-danger{background:var(--color-danger)!important;border-color:var(--color-danger)!important;color:#fff!important;}

.mkc-bulk-ul{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--color-td);line-height:1.7;
  max-height:180px;overflow-y:auto;}
.mkc-bulk-sk{margin-top:14px;padding:10px 12px;border-radius:10px;
  background:rgba(212,144,10,.1);border:0.5px solid rgba(212,144,10,.24);
  font-size:12px;color:var(--color-td);}
.mkc-bulk-sk b{color:var(--color-warning-dark);}
.mkc-bulk-sk ul{margin:6px 0 0;padding-left:16px;line-height:1.7;max-height:150px;overflow-y:auto;}
.mkc-bulk-nota{margin-top:12px;font-size:11.5px;color:var(--color-tab-inactive);line-height:1.5;}
#mkc-bulk-body p{font-size:13px;line-height:1.6;color:var(--color-td);margin:0;}

@media (max-width:600px){
  .mkc-bulk{left:12px;right:12px;bottom:14px;transform:translate(0,140%);
    flex-wrap:wrap;gap:10px;max-width:none;}
  .mkc-bulk.open{transform:translate(0,0);}
}

/* ── Campanha: metadados (tipo, tags, país, LinkedIn) ── */
.mkc-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
@media (max-width:600px){ .mkc-2col{grid-template-columns:1fr;} }
.mkc-tipo{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;
  background:rgba(77,77,255,.14);color:var(--color-accent-light);white-space:nowrap;}
/* "Ativa para Sales" — mesma família visual do badge de status, cor própria
   porque é outro eixo: status é o estado da campanha, isto é a liberação. */
.mkc-badge-sales{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  padding:2px 9px;border-radius:20px;white-space:nowrap;
  background:rgba(115,80,238,.15);color:var(--color-accent-light);
  border:0.5px solid var(--color-accent);}
.mkc-badge-sales i{font-size:11px;}
body.light .mkc-badge-sales{color:var(--color-violet);background:rgba(115,80,238,.09);}
.mkc-hero-tags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:2px;}
.mkc-tag-c{font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:rgba(147,147,255,.14);color:var(--color-sub);white-space:nowrap;}
.mkc-li{display:inline-flex;align-items:center;margin-left:5px;color:var(--color-tab-inactive);
  transition:color .15s;vertical-align:-2px;}
.mkc-li:hover{color:#0A66C2;}
.mkc-li i{font-size:14px;}

/* lista de destinatários do envio em lote (modal de composição) */
.gmail-bulk-list{display:flex;flex-wrap:wrap;gap:6px;max-height:110px;overflow-y:auto;
  padding:9px 11px;border-radius:var(--radius-input);
  background:var(--bg-field-input);border:0.5px solid var(--border-field-input);}
.gmail-bulk-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:rgba(147,147,255,.14);color:var(--color-sub);white-space:nowrap;}
.gmail-bulk-mais{font-size:11px;color:var(--color-tab-inactive);align-self:center;}
.gmail-tpl-vars{font-size:11px;color:var(--color-tab-inactive);line-height:1.6;margin-top:6px;}
.gmail-tpl-vars code{background:rgba(147,147,255,.14);color:var(--color-accent-light);
  padding:1px 5px;border-radius:4px;font-size:10.5px;}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD EXECUTIVO DE LEADS
   Regras que valem pra tela toda:
   · hierarquia vem de TAMANHO e ESPAÇO, não de moldura nem de cor;
   · roxo só em Leads, no funil e em estado ativo — o resto é neutro;
   · verde/vermelho ficam exclusivos de variação;
   · card não tem borda em repouso: fundo sutil + sombra de 1px. A borda
     aparece no hover, como resposta à interação.
   Espaçamentos e tamanhos concentrados nas variáveis abaixo, pra
   calibrar sem caçar valor solto no arquivo.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --fnx-gap-sec:30px;      /* respiro ENTRE seções */
  --fnx-gap-card:14px;     /* entre cards */
  --fnx-r:16px;            /* raio dos cards */
  --fnx-surface:rgba(147,147,255,.055);
  --fnx-surface-hi:rgba(147,147,255,.10);
  --fnx-line:rgba(147,147,255,.14);
  --fnx-shadow:0 1px 2px rgba(16,12,40,.05), 0 8px 24px -18px rgba(16,12,40,.28);
  --fnx-shadow-hi:0 2px 6px rgba(16,12,40,.07), 0 18px 40px -22px rgba(77,77,255,.42);
}
body.light{
  --fnx-surface:rgba(41,41,166,.045);
  --fnx-surface-hi:rgba(41,41,166,.075);
  --fnx-line:rgba(41,41,166,.12);
}

/* ── Hero ── */
.fnx-hero{margin-bottom:14px;}
.fnx-hero-ttl{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--color-title);}
.fnx-hero-resumo{margin-top:5px;font-size:12.5px;color:var(--color-sub);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fnx-hero-resumo b{color:var(--color-title);font-weight:700;}
.fnx-hero-dot{color:var(--color-tab-inactive);}
.fnx-hero-chip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--fnx-surface-hi);color:var(--color-accent-light);
  margin-right:2px;}

/* ── Seção: o título é um divisor que corta a tela ── */
.fnx-sec{margin-bottom:var(--fnx-gap-sec);}
.fnx-sec-hd{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.fnx-sec-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;background:var(--fnx-surface-hi);color:var(--color-sub);
  font-size:9.5px;font-weight:700;flex-shrink:0;}
.fnx-sec-ico{font-size:14px;color:var(--color-tab-inactive);flex-shrink:0;}
.fnx-sec-hd h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em;
  color:var(--color-title);white-space:nowrap;}
.fnx-sec-sub{font-size:11.5px;color:var(--color-tab-inactive);white-space:nowrap;}
.fnx-sec-rule{flex:1;height:1px;min-width:16px;background:var(--fnx-line);}

/* ── Cards ── */
.fnx-cards{display:grid;gap:var(--fnx-gap-card);}
.fnx-cards-aq{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.78fr);}
/* 4 iguais + 1 LARGO: o Volume Semanal Convertido passa a ocupar a largura
   de dois cards, como no mockup. Antes eram 3 grandes + 2 estreitos, e o
   Convertidos ficava espremido junto com ele. */
.fnx-cards-aq5{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.6fr);}
.fnx-cards-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.fnx-card{display:grid;grid-template-rows:auto auto auto auto;gap:0;
  background:var(--fnx-surface);border:1px solid transparent;border-radius:var(--fnx-r);
  box-shadow:var(--fnx-shadow);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;}
.fnx-lg{padding:16px 18px 14px;}
.fnx-sm{padding:15px 16px 13px;}
.fnx-card.is-click{cursor:pointer;}
.fnx-card.is-click:hover{border-color:var(--fnx-line);background:var(--fnx-surface-hi);
  transform:translateY(-2px);box-shadow:var(--fnx-shadow-hi);}
.fnx-card.is-click:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}
/* Nível 1 de tipografia: rótulo do card — leve, nunca compete com o título da seção */
.fnx-card-hd{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:11.5px;font-weight:600;color:var(--color-sub);letter-spacing:0;text-transform:none;}
.fnx-card-hd i{font-size:13px;color:var(--color-tab-inactive);flex-shrink:0;}
.fnx-card-hd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Nível 2: o número. É o elemento com mais peso da tela. */
.fnx-card-val{font-weight:700;color:var(--color-title);letter-spacing:-.03em;line-height:1.05;}
.fnx-lg .fnx-card-val{font-size:30px;margin:7px 0 6px;}
.fnx-sm .fnx-card-val{font-size:22px;margin:7px 0 6px;}
.fnx-card-unit{font-size:.5em;font-weight:600;color:var(--color-tab-inactive);margin-left:2px;
  letter-spacing:0;}
/* Nível 3: variação e legenda */
.fnx-card-meta{display:flex;align-items:center;gap:7px;min-width:0;min-height:17px;}
.fnx-var{font-size:11.5px;font-weight:700;white-space:nowrap;}
.fnx-var.is-up{color:var(--color-success-dark);}
.fnx-var.is-down{color:var(--color-danger);}
.fnx-var.is-flat,.fnx-var.is-none{color:var(--color-tab-inactive);}
.fnx-card-sub{font-size:11px;color:var(--color-tab-inactive);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
/* Slot fixo da sparkline: sempre na mesma altura, em todos os cards */
.fnx-card-spark{height:22px;margin-top:9px;display:flex;align-items:flex-end;}
.fnx-spark{width:100%;height:22px;opacity:.7;transition:opacity .18s ease;}
.fnx-card.is-click:hover .fnx-spark{opacity:1;}
.fnx-spark-vazio{display:block;width:100%;height:1px;background:var(--fnx-line);align-self:center;}
/* Roxo só no card que abre a história */
.fnx-card.is-primary{background:linear-gradient(180deg,rgba(77,77,255,.13),rgba(77,77,255,.05));}
.fnx-card.is-primary .fnx-card-hd,.fnx-card.is-primary .fnx-card-hd i{color:var(--color-accent-light);}
.fnx-card.is-primary.is-click:hover{border-color:var(--color-accent);}

/* ── Timeline de velocidade ── */
.fnx-timeline{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:6px;background:var(--fnx-surface);border-radius:var(--fnx-r);padding:16px 18px 14px;
  box-shadow:var(--fnx-shadow);}
.fnx-tl-track{position:absolute;left:calc(10% + 18px);right:calc(10% + 18px);top:52px;height:2px;
  background:var(--fnx-line);border-radius:2px;}
.fnx-tl-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:6px;flex:1;min-width:0;}
.fnx-tl-val{font-size:17px;font-weight:700;color:var(--color-title);line-height:1;letter-spacing:-.02em;}
.fnx-tl-unit{font-size:11px;font-weight:600;color:var(--color-tab-inactive);margin-left:1px;letter-spacing:0;}
.fnx-tl-dot{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--bg-modal);border:2px solid var(--fnx-line);
  color:var(--color-tab-inactive);transition:border-color .2s ease,color .2s ease,transform .2s ease;}
.fnx-tl-dot i{font-size:15px;}
.fnx-timeline:hover .fnx-tl-dot{border-color:var(--color-accent-light);color:var(--color-accent-light);}
.fnx-tl-rot{font-size:10.5px;color:var(--color-sub);text-align:center;line-height:1.3;
  max-width:96px;}
.fnx-tl-step.is-slow .fnx-tl-dot{border-color:var(--color-warning);color:var(--color-warning-dark);}
.fnx-tl-step.is-slow .fnx-tl-val{color:var(--color-warning-dark);}
.fnx-tl-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(212,144,10,.14);color:var(--color-warning-dark);}

/* ── Funil: o protagonista ── */
.fnx-sec-hero .fnx-sec-hd h3{font-size:15px;}
.fnx-funil{background:var(--fnx-surface);border-radius:var(--fnx-r);padding:18px 24px;
  box-shadow:var(--fnx-shadow);}
.fnx-fn-row{display:grid;grid-template-columns:100px 1fr auto 50px;align-items:center;gap:13px;
  padding:3px 0;border-radius:10px;transition:transform .18s ease;}
.fnx-fn-row.is-click{cursor:pointer;}
.fnx-fn-row.is-click:hover{transform:translateX(3px);}
.fnx-fn-row.is-click:hover .fnx-fn-bar{filter:brightness(1.12);}
.fnx-fn-row.is-click:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}
.fnx-fn-rot{font-size:12.5px;font-weight:600;color:var(--color-sub);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.fnx-fn-track{display:block;width:100%;height:30px;border-radius:9px;
  background:rgba(147,147,255,.07);overflow:hidden;}
/* número FORA da barra: texto sobre gradiente é ruim de ler, e pior no tema claro */
.fnx-fn-bar{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--color-accent),rgba(77,77,255,.55));
  transition:width .45s cubic-bezier(.32,.72,0,1),filter .18s ease;}
/* As linhas se intercalam com os conectores no DOM (row, conn, row, …),
   então as barras caem nas posições ímpares 1,3,5,7,9,11. Rampa do roxo
   do topo ao verde do cliente — cor comunicando avanço no funil. */
.fnx-fn-row:nth-child(3)  .fnx-fn-bar{background:linear-gradient(90deg,#5B5BFF,rgba(91,91,255,.5));}
.fnx-fn-row:nth-child(5)  .fnx-fn-bar{background:linear-gradient(90deg,#6E5CFF,rgba(110,92,255,.48));}
.fnx-fn-row:nth-child(7)  .fnx-fn-bar{background:linear-gradient(90deg,#7A5CFF,rgba(122,92,255,.46));}
.fnx-fn-row:nth-child(9)  .fnx-fn-bar{background:linear-gradient(90deg,#4E8BE0,rgba(78,139,224,.44));}
.fnx-fn-row:nth-child(11) .fnx-fn-bar{background:linear-gradient(90deg,#16A072,rgba(22,160,114,.44));}
.fnx-fn-n{font-size:19px;font-weight:700;color:var(--color-title);letter-spacing:-.02em;
  text-align:right;font-variant-numeric:tabular-nums;}
.fnx-fn-total{font-size:11px;color:var(--color-tab-inactive);text-align:right;
  font-variant-numeric:tabular-nums;}
/* Entre as barras: taxa, perda absoluta e variação */
.fnx-fn-conn{display:flex;align-items:center;gap:10px;padding:4px 0 4px 113px;flex-wrap:wrap;}
.fnx-fn-pass{font-size:12px;font-weight:700;color:var(--color-sub);
  display:inline-flex;align-items:center;gap:5px;}
.fnx-fn-pass::before{content:'↓';color:var(--color-tab-inactive);font-weight:400;}
.fnx-fn-perda{font-size:11.5px;color:var(--color-tab-inactive);}
.fnx-fn-delta{font-size:11px;font-weight:700;color:var(--color-tab-inactive);}
.fnx-fn-delta.is-up{color:var(--color-success-dark);}
.fnx-fn-delta.is-down{color:var(--color-danger);}
.fnx-fn-conn.is-worst .fnx-fn-pass,.fnx-fn-conn.is-worst .fnx-fn-perda{color:var(--color-danger);}
.fnx-fn-worst{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
  background:rgba(220,80,80,.13);color:var(--color-danger);}
.fnx-fn-worst i{font-size:11px;}

/* ── Responsivo ── */
@media(max-width:1200px){
  :root{--fnx-gap-sec:36px;}
  .fnx-cards-aq{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fnx-cards-aq5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fnx-cards-5{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:820px){
  .fnx-cards-aq5,.fnx-cards-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fnx-timeline{flex-wrap:wrap;gap:18px 8px;justify-content:flex-start;}
  .fnx-tl-track{display:none;}
  .fnx-tl-step{flex:0 0 calc(33.333% - 6px);}
  .fnx-fn-row{grid-template-columns:84px 1fr auto;gap:10px;}
  .fnx-fn-total{display:none;}
  .fnx-fn-conn{padding-left:94px;}
}
@media(max-width:600px){
  :root{--fnx-gap-sec:30px;--fnx-gap-card:9px;--fnx-r:13px;}
  .fnx-hero-ttl{font-size:18px;}
  .fnx-cards-aq,.fnx-cards-aq5,.fnx-cards-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fnx-lg{padding:14px 15px 12px;}
  .fnx-lg .fnx-card-val{font-size:25px;}
  .fnx-sm .fnx-card-val{font-size:19px;}
  .fnx-card-spark{height:20px;margin-top:8px;}
  .fnx-spark{height:20px;}
  .fnx-sec-sub{display:none;}
  .fnx-tl-step{flex:0 0 calc(50% - 4px);}
  .fnx-timeline,.fnx-funil{padding:16px 14px;}
  .fnx-fn-row{grid-template-columns:70px 1fr auto;gap:8px;}
  .fnx-fn-track{height:26px;}
  .fnx-fn-n{font-size:16px;}
  .fnx-fn-conn{padding-left:78px;gap:7px;}
}

/* ── BLOCO 5 · tabela de origem ── */
.fnx-srcwrap{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:14px;padding:6px 8px 8px;}
.fnx-srctable{width:100%;border-collapse:collapse;font-family:'Montserrat',sans-serif;}
.fnx-srctable thead th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-tab-inactive);padding:11px 12px;white-space:nowrap;
  border-bottom:0.5px solid var(--border-metric);cursor:pointer;user-select:none;
  transition:color .15s;}
.fnx-srctable thead th:hover{color:var(--color-accent-light);}
.fnx-th.is-num{text-align:right;}
.fnx-sortind{margin-left:4px;color:var(--color-accent-light);}
.fnx-srctable tbody td{padding:9px 12px;font-size:12.5px;color:var(--color-td);
  border-bottom:0.5px solid rgba(147,147,255,.06);}
.fnx-srctable tbody tr:last-child td{border-bottom:none;}
.fnx-srctable tbody tr{transition:background .15s;}
.fnx-srctable tbody tr:hover{background:rgba(147,147,255,.05);}
.fnx-td-src{font-weight:700;color:var(--color-title);white-space:nowrap;}
/* barra de comparação atrás do número */
.fnx-td-bar{position:relative;text-align:right;min-width:88px;}
.fnx-td-bar.is-click{cursor:pointer;}
.fnx-td-bar.is-click:hover .fnx-bar{background:rgba(77,77,255,.30);}
.fnx-bar{position:absolute;right:12px;top:50%;transform:translateY(-50%);height:20px;
  border-radius:5px;background:rgba(77,77,255,.16);transition:width .3s cubic-bezier(.32,.72,0,1),background .15s;
  max-width:calc(100% - 24px);}
.fnx-bar-v{position:relative;font-weight:700;color:var(--color-title);}
.fnx-td-pct{text-align:right;white-space:nowrap;}
.fnx-pct{font-weight:700;color:var(--color-sub);}
.fnx-pct.is-good{color:var(--color-success-dark);}
.fnx-pct.is-zero{color:var(--color-tab-inactive);font-weight:400;}
.fnx-tempo{font-weight:700;color:var(--color-title);}
@media(max-width:700px){
  .fnx-srctable thead th,.fnx-srctable tbody td{padding:8px 7px;font-size:11.5px;}
  .fnx-td-bar{min-width:56px;}
  .fnx-bar{right:7px;max-width:calc(100% - 14px);}
}

/* ── Faixa Qualidade + Velocidade lado a lado ──
   Empilhados, os dois blocos somavam ~320px e empurravam o Funil — que é
   a resposta principal da tela — pra baixo da dobra. Lado a lado ocupam
   ~140px e sobra largura, que era o recurso abundante aqui. */
.fnx-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:22px;margin-bottom:var(--fnx-gap-sec);align-items:start;}
.fnx-duo>.fnx-sec{margin-bottom:0;}
.fnx-duo .fnx-sec-hd{margin-bottom:11px;}

/* Qualidade: uma superfície só com 5 métricas divididas, em vez de 5
   cards com padding próprio */
.fnx-qbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--fnx-surface);border-radius:var(--fnx-r);
  box-shadow:var(--fnx-shadow);overflow:hidden;}
.fnx-qitem{padding:13px 14px;border-right:1px solid var(--fnx-line);min-width:0;
  transition:background .18s ease;}
.fnx-qitem:last-child{border-right:none;}
.fnx-qitem.is-click{cursor:pointer;}
.fnx-qitem.is-click:hover{background:var(--fnx-surface-hi);}
.fnx-qitem.is-click:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;}
.fnx-qitem-hd{display:flex;align-items:center;gap:5px;min-width:0;
  font-size:10.5px;font-weight:600;color:var(--color-sub);}
.fnx-qitem-hd i{font-size:12px;color:var(--color-tab-inactive);flex-shrink:0;}
.fnx-qitem-hd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fnx-qitem-val{font-size:21px;font-weight:700;color:var(--color-title);
  letter-spacing:-.02em;line-height:1.1;margin:5px 0 4px;}
.fnx-qitem-meta{min-height:15px;display:flex;align-items:center;gap:6px;}
.fnx-qitem-meta .fnx-var{font-size:10.5px;}

/* Lado a lado, o bloco de Qualidade fica com ~metade da largura e os 5
   rótulos ("Lead → MQL", "Tempo até MQL"…) não cabem: em 1440px sobravam
   57px pra um texto de 85px e QUATRO dos cinco saíam reticenciados — sem
   tooltip, então o nome do indicador simplesmente sumia. Os 5 itens só
   respiram a partir de ~650px de faixa, o que a coluna estreita só alcança
   perto de 1720px de viewport. Abaixo disso os dois blocos empilham e cada
   um usa a largura toda — de quebra a régua de Velocidade do funil, que
   também é de 5 passos, para de espremer os rótulos dela. */
@media(max-width:1720px){
  .fnx-duo{grid-template-columns:minmax(0,1fr);gap:var(--fnx-gap-sec);}
}
@media(max-width:820px){
  .fnx-qbar{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fnx-qitem:nth-child(3){border-right:none;}
  .fnx-qitem:nth-child(-n+3){border-bottom:1px solid var(--fnx-line);}
}
@media(max-width:600px){
  .fnx-qbar{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fnx-qitem{padding:10px 11px;}
  .fnx-qitem:nth-child(2n){border-right:none;}
  .fnx-qitem:nth-child(3){border-right:1px solid var(--fnx-line);}
  .fnx-qitem-val{font-size:18px;}
}

/* ── Barra de ações da campanha: nada pode empurrar a largura ──
   Item de flex nasce com min-width:auto, ou seja, não encolhe abaixo do
   próprio conteúdo. Basta um grupo que não quebra (Colunas + agrupamento
   + Exportar) pra a linha ficar maior que o contêiner e o overflow:hidden
   da tela cortar o excedente. Aqui cada nível ganha permissão explícita
   de encolher e de quebrar linha. */
#mkt-subtab-campanhas,#mkc-detail-view,#mkc-table-wrap{min-width:0;max-width:100%;}
.mkc-actionbar{max-width:100%;min-width:0;}
.mkc-search{flex:1 1 200px;min-width:0;}
.mkc-chips{min-width:0;}
.mkc-actionbar-right{min-width:0;flex-wrap:wrap;justify-content:flex-end;}
.mkc-act,.mkc-group-sel,.mkc-chip-f{max-width:100%;}
/* mesma blindagem nas outras superfícies do detalhe */
.mkc-metrics,.mkc-hero,.mkc-tablewrap{max-width:100%;min-width:0;}
.mkc-hero-main,.mkc-hero-acts{min-width:0;}

/* Separador do hero vem do CSS, não como <span> próprio: como <span> ele
   era um item de flex e podia terminar a linha sozinho, deixando um "·"
   solto na quebra ("10 empresas ·" / "criada em…"). Como ::before ele
   pertence ao item seguinte e quebra junto com ele. */
.mkc-hero-meta>span+span::before{content:'·';color:var(--color-tab-inactive);margin-right:7px;}
.mkc-hero-meta>.mkc-hero-tags+span::before,
.mkc-hero-meta>span+.mkc-hero-tags::before{content:none;}

/* ══════════════════════════════════════════════════════════════
   CONTÊINER PADRÃO DAS BARRAS DE FILTRO
   Mesmo recipiente de .ld-toolbar-box (Leads/Onboarding) e da barra
   de Campanhas: borda fechada de raio 14px, padding lateral e sombra.
   Além de padronizar, o padding é o que impede busca/botões das pontas
   de encostarem na borda da tela. Fica no fim do arquivo de propósito:
   as definições originais dessas barras vêm antes e precisam perder
   nas propriedades que colidem (margin-bottom).
   Fora daqui de propósito: .fin-filter-bar (já tem contêiner próprio)
   e .fn2-filters (fileira de pills alinhada à direita nos funis, que
   foram compactados justamente pra caber sem peso extra no topo).
   ══════════════════════════════════════════════════════════════ */
.int2-toolbar,
#screen-migracao>.toolbar,
#screen-health .hs-toolbar,
#screen-mkt .mkt-toolbar:not(.mkt-toolbar-plain),#ld-abm .mkt-toolbar:not(.mkt-toolbar-plain){
  padding:12px 14px;border:0.5px solid var(--border-metric);border-radius:14px;
  margin-bottom:14px;box-sizing:border-box;max-width:100%;min-width:0;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.10);
}
body.light .int2-toolbar,
body.light #screen-migracao>.toolbar,
body.light #screen-health .hs-toolbar,
/* O ABM entra aqui junto com Marketing: é a MESMA barra. Deixá-lo de fora
   (foi o que aconteceu quando estendi os seletores) dava fundo transparente,
   borda cinza aparente e a sombra pesada do tema escuro vazando pro claro. */
body.light #screen-mkt .mkt-toolbar:not(.mkt-toolbar-plain),
body.light #ld-abm .mkt-toolbar:not(.mkt-toolbar-plain){
  background:#fff;border-color:transparent;
  box-shadow:0 1px 3px rgba(30,30,90,0.07),0 1px 2px rgba(30,30,90,0.05);
}

/* ══════════ Widget de Taxas: mesma linguagem dos demais campos ══════════
   Ele é usado no modal de lead e nas fichas. Ficava com o desenho antigo
   (rótulo minúsculo, input de raio 6px, fundo cinza) ao lado dos campos
   novos — a diferença saltava. */
.tx-widget .tx-w-grp{font-size:13px;font-weight:700;color:var(--color-title);text-transform:none;letter-spacing:0;margin-bottom:9px;line-height:1.3;}
.tx-widget .tx-w-grp-sep{margin:20px 0 9px;}
.tx-widget .field{margin-bottom:0;}
.tx-widget .field>label{font-size:13px;font-weight:700;color:var(--color-title);text-transform:none;letter-spacing:0;margin-bottom:7px;display:block;}
.tx-widget .ld-form-input,.tx-widget input[type=text],.tx-widget textarea{
  width:100%;box-sizing:border-box;background:var(--bg-modal);border:0.5px solid var(--border-field-input);
  border-radius:11px;padding:14px;color:var(--color-field-input);font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s;}
.tx-widget .ld-form-input:focus,.tx-widget input[type=text]:focus,.tx-widget textarea:focus{
  border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 14%,transparent);}
/* blocos Cripto / Fiat */
.tx-widget .tx-w-box{margin-bottom:12px;padding:16px;border:0.5px solid var(--border-metric);border-radius:14px;background:var(--bg-modal);}
.tx-widget .tx-w-boxttl{font-size:11.5px;font-weight:700;color:var(--color-tab-inactive);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
.tx-widget .tx-w-row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
/* padding 14px igual ao dos inputs: com 12px o <select> ficava 4px mais
   baixo que o campo de spread ao lado, e a linha do par saía desalinhada
   (a regra genérica de input[type=text] vence .tx-w-ctl na especificidade,
   então não adiantava só mudar aqui — os dois valores têm que bater). */
.tx-widget .tx-w-ctl{flex:1;min-width:96px;box-sizing:border-box;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  padding:14px;border:0.5px solid var(--border-field-input);border-radius:11px;background:var(--bg-modal);color:var(--color-field-input);}
.tx-widget .tx-w-spread{flex:0 0 118px;min-width:0;}
.tx-widget .tx-w-seta{color:var(--color-tab-inactive);font-size:15px;flex-shrink:0;}
.tx-widget .tx-w-add{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;background:color-mix(in srgb,var(--color-accent) 11%,transparent);
  border:0.5px solid color-mix(in srgb,var(--color-accent) 30%,transparent);color:var(--color-accent-light);
  border-radius:11px;padding:0 18px;min-height:46px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s;}
.tx-widget .tx-w-add:hover{background:color-mix(in srgb,var(--color-accent) 18%,transparent);}
body.light .tx-widget .tx-w-add{color:var(--color-violet);}
/* o campo de taxa mínima não precisa esticar */
.tx-widget .field[style*="max-width:220px"]{max-width:300px!important;}
.tx-widget-solo textarea{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;}
@media(max-width:640px){ .tx-widget .tx-w-row{gap:8px;} .tx-widget .tx-w-spread{flex:1 1 100%;} .tx-widget .tx-w-add{flex:1 1 100%;justify-content:center;} }

/* Marca de onde o card vai cair ao reordenar dentro da raia (kbMostraLinha).
   pointer-events:none é essencial — a linha fica DENTRO do container que
   escuta o dragover, e sem isso ela roubaria o evento de si mesma, fazendo o
   indicador piscar entre duas posições. */
.kb-drop-line{height:3px;border-radius:3px;margin:3px 0;background:var(--color-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent);pointer-events:none;flex-shrink:0;}
/* O seletor de ordenação é mais largo que os outros filtros: os rótulos
   ("Entrada na raia — mais recente") não cabem na medida padrão. */
.ld-ordem-sel{min-width:212px;}

/* ─── Copiar valor de um campo da ficha (Leads, Onboarding, Clientes, Finders) ─── */
/* Mesmo desenho e mesma revelação-no-hover do botão de editar, ao lado dele:
   dois botões com peso visual diferente na mesma linha competiriam entre si. */
.det-copy-btn{background:none;border:none;padding:2px 4px;margin:0;cursor:pointer;color:var(--color-tab-inactive);
  opacity:0;transition:opacity .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;min-height:20px;border-radius:4px;line-height:1;position:relative;z-index:2;}
.det-copy-btn i{font-size:12px;pointer-events:none;}
.ld-det-row:hover .det-copy-btn,.mig-ds-icard:hover .det-copy-btn,.det-copy-btn:focus{opacity:1;}
.det-copy-btn:hover{color:var(--color-accent-light);background:rgba(147,147,255,.12);}
body.light .det-copy-btn:hover{color:var(--color-violet);}
/* Campo vazio não oferece cópia. O :has lê o estado ATUAL do valor, então a
   linha se ajusta sozinha depois de uma edição em linha — sem isso o botão
   sumiria só no próximo render inteiro da ficha. */
.ld-det-row:has(.ld-det-val.empty) .det-copy-btn{display:none;}
/* O e-mail já trazia um botão de copiar embutido no valor (emailCopy, usado
   também nas tabelas). Na ficha ele viraria um segundo botão, em lugar
   diferente do de todos os outros campos — some aqui, fica nas tabelas. */
.ld-det-row .copy-email-btn{display:none;}

/* ═══════════ FINANCEIRO — cabeçalho e barra de filtros ═══════════ */
.fin3-ts{font-size:12px;color:var(--color-tab-inactive);white-space:nowrap;}
.fin3-menu{position:relative;}
.fin3-btn{display:inline-flex;align-items:center;gap:7px;border-radius:11px;padding:10px 16px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  transition:opacity .15s,background .15s;}
.fin3-btn i{font-size:16px;}
.fin3-btn-ghost{background:var(--bg-modal);border:0.5px solid var(--border-metric);color:var(--color-title);}
.fin3-btn-ghost:hover{background:var(--bg-metric);}
.fin3-btn-primary{background:var(--color-accent);border:0.5px solid var(--color-accent);color:#fff;font-weight:700;}
.fin3-btn-primary:hover{opacity:.88;}
.fin3-filters{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;position:relative;}
/* Grupo que embrulha: os filtros descem uns sob os outros quando não cabem,
   e as ações continuam onde estão. */
.fin3-fgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0;}
/* Cada filtro é uma caixa própria, como no mockup — não uma barra única.
   Assim eles quebram de linha sozinhos no mobile sem espremer nada. */
.fin3-fbox{display:inline-flex;align-items:center;gap:8px;background:var(--bg-modal);
  border:0.5px solid var(--border-metric);border-radius:11px;padding:9px 13px;min-height:40px;box-sizing:border-box;}
.fin3-fbox>i{font-size:15px;color:var(--color-tab-inactive);flex-shrink:0;}
.fin3-flbl{font-size:12.5px;font-weight:500;color:var(--color-tab-inactive);white-space:nowrap;}
.fin3-fdash{font-size:12.5px;color:var(--color-tab-inactive);}
.fin3-fsel{background:none;border:none;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;
  color:var(--color-title);cursor:pointer;padding:0;max-width:230px;}
.fin3-fsel:focus{outline:none;}
/* Rodapé da tela */
.fin3-foot{text-align:center;font-size:12px;color:var(--color-tab-inactive);padding:18px 0 6px;}

/* ═══════════ FINANCEIRO — grid principal e trilho direito ═══════════ */

/* A pilha de insights. Só o PRIMEIRO tem cor cheia: três blocos roxos
   empilhados deixariam de ser destaque e passariam a competir entre si
   (regra 4 do padrão de UX). Os de baixo usam a mesma casca dos cartões
   normais e carregam o mesmo formato — frase, número, rodapé. */
.fin3-insights{display:flex;flex-direction:column;gap:12px;}
.fin3-insight{border-radius:16px;padding:20px 18px;color:#fff;
  background:linear-gradient(135deg,var(--color-accent) 0%,#7b5cff 55%,#9b6dff 100%);
  box-shadow:0 10px 28px color-mix(in srgb,var(--color-accent) 26%,transparent);}
.fin3-insight-top{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;opacity:.92;}
.fin3-insight-top i{font-size:14px;}
.fin3-insight-trend{margin-left:auto;font-size:17px;opacity:.85;}
.fin3-insight-txt{margin-top:16px;font-size:13px;font-weight:500;opacity:.9;line-height:1.4;}
.fin3-insight-num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:2px 0 4px;}
.fin3-insight-foot{font-size:12px;font-weight:500;opacity:.82;}
.fin3-ins2{background:var(--bg-metric);border:0.5px solid var(--border-metric);
  border-radius:16px;padding:15px 17px;}
.fin3-ins2-top{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--color-tab-inactive);}
.fin3-ins2-top i{font-size:14px;}
.fin3-ins2-txt{margin-top:11px;font-size:12.5px;font-weight:500;color:var(--color-sub);line-height:1.35;}
.fin3-ins2-num{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  margin:3px 0 3px;color:var(--color-title);font-variant-numeric:tabular-nums;}
.fin3-ins2-num.up{color:var(--color-success-dark);}
.fin3-ins2-num.down{color:var(--color-danger-dark);}
.fin3-ins2-foot{font-size:11.5px;font-weight:500;color:var(--color-tab-inactive);}

.fin3-alertas .fin2-card-title{display:flex;align-items:center;gap:7px;}
.fin3-alert-list{display:flex;flex-direction:column;gap:12px;}
/* Barra colorida à esquerda em vez de fundo inteiro: o alerta precisa se
   destacar do card sem competir com o Insight logo acima. */
.fin3-alert{border-left:3px solid var(--fin3-alert-cor,var(--color-accent));padding:2px 0 2px 11px;}
.fin3-alert.amber{--fin3-alert-cor:var(--color-warning);}
.fin3-alert.blue{--fin3-alert-cor:var(--color-accent);}
.fin3-alert-tit{font-size:12.5px;font-weight:700;color:var(--color-title);margin-bottom:3px;}
.fin3-alert-txt{font-size:12px;color:var(--color-tab-inactive);line-height:1.45;}
.fin3-alert-link{display:inline-block;margin-top:5px;font-size:12px;font-weight:600;
  color:var(--color-accent-light);cursor:pointer;}
body.light .fin3-alert-link{color:var(--color-violet);}
.fin3-alert-link:hover{text-decoration:underline;}
.fin3-vazio{font-size:12px;color:var(--color-tab-inactive);display:flex;align-items:center;gap:6px;padding:4px 0;}

/* Top 5 em lista — a leitura aqui é "quem são e quanto pesam", que uma barra
   horizontal responde pior que nome + valor + percentual alinhados. */
  padding:9px 6px;border-radius:8px;cursor:pointer;transition:background .15s;}


/* ═══════════ FINANCEIRO — acabamento (mockup) ═══════════ */
/* A linha de Receita ganhou o Top 5, então são três cards e não dois. */

/* Elevação suave nos cards: no tema claro eles já são brancos sobre o fundo
   lavanda, e é a sombra que os separa do plano de fundo — sem ela a tela
   vira uma folha só. No escuro a sombra some (não há o que destacar contra
   um fundo já escuro) e quem separa é a borda. */
body.light .fin2-kpi,
body.light .fin2-card,
body.light .fin-chart-card{box-shadow:0 1px 2px rgba(40,40,90,.05),0 4px 14px rgba(40,40,90,.05);}
body.light .fin3-alertas{box-shadow:0 1px 2px rgba(40,40,90,.05),0 4px 14px rgba(40,40,90,.05);}

.fin2-kpi{border-radius:16px;padding:17px 17px 15px;}
.fin2-kpi-value{font-size:28px;letter-spacing:-.02em;}
.fin2-kpi-label{font-size:10.5px;letter-spacing:.07em;}
.fin2-card{border-radius:16px;padding:17px;}
.fin2-card-title{font-size:14.5px;letter-spacing:-.01em;}
.fin-chart-card{border-radius:16px;}
/* Faixa de concentração: mesma família dos cards (raio 16, respiro maior). */
.fin2-conc{border-radius:16px;padding:13px 17px;}

/* "Ver todos" do Top 5 fica colado no rodapé do card, não solto no meio. */

@media (max-width:1180px){ .fin2-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));} }
@media (max-width:760px){
  .fin3-filters>*{flex:1 1 auto;}
  .fin2-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
  .fin2-kpi-value{font-size:23px;}
  .fin2-row{grid-template-columns:minmax(0,1fr);}
}


/* O trilho acompanha a altura das duas linhas de gráfico, como no mockup.
   Antes ele tinha altura própria (só o conteúdo dos dois cards) e sobrava um
   vão embaixo até a seção seguinte. Quem estica é o card de Alertas: é uma
   lista, então crescer nele é natural — esticar o Insight só afastaria o
   número do rótulo. */
.fin3-alertas{flex:1;display:flex;flex-direction:column;min-height:0;}
.fin3-alert-list{flex:1;}
.fin3-alert-todos{margin-top:14px;align-self:flex-start;}

/* ═══════════ FINANCEIRO — grid principal (conteúdo + trilho) ═══════════
   Os cards do trilho ocupam as MESMAS linhas do grid que as fileiras de
   gráfico. É isso que os alinha: a altura da linha é a mesma para as duas
   colunas, então o Insight começa junto com a fileira de Receita e o card de
   Alertas casa com a de Volume. Um trilho em coluna separada não tem como
   saber onde cada fileira começa — era daí o desencontro. */
/* row-gap no lugar do antigo margin-top do cabeçalho de Volume: os dois
   cabeçalhos internos ("Receita"/"Volume") saíram quando as seções viraram os
   três blocos numerados, e o respiro entre fileiras não podia voltar a ser
   margin-bottom da fileira — era exatamente isso que inflava a LINHA do grid
   sem inflar o card ao lado e desalinhava o Alertas. O gap fica entre as
   linhas, fora das células, então o trilho continua casando. */
.fin3-main{display:grid;grid-template-columns:minmax(0,1fr) 288px;column-gap:16px;row-gap:18px;}
/* O row-gap só separa as fileiras DE DENTRO do grid. Sem margem embaixo, a
   fileira de Transações — que vem logo depois, fora dele — encostava na de
   Volume. Mesma medida do row-gap, pra o respiro ser um só na seção. */
.fin3-main{margin-bottom:18px;}
.fin3-g2{grid-column:1;grid-row:1;}   /* fileira Receita */
.fin3-g4{grid-column:1;grid-row:2;}   /* fileira Volume  */
/* ══════════ Divisórias de seção do Financeiro (mockup) ══════════
   Antes cada seção era só um rótulo cinza com uma bolinha colorida e uma linha
   fina embaixo — cinco deles, todos iguais, sem dizer o que agrupavam. Agora
   são TRÊS blocos numerados: a cor vive numa variável (--fin4-c) e vale pro
   número, pro título e pelo tingimento do contêiner, então trocar de cor é uma
   linha e nada sai do tom.

   O tingimento usa color-mix com `transparent`, ou seja, é translúcido e
   compõe sobre o fundo da página — funciona nos dois temas sem regra separada
   (mesmo recurso que .home2-alert já usa). */
.fin4-sec{--fin4-c:var(--color-accent);
  background:color-mix(in srgb, var(--fin4-c) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--fin4-c) 20%, transparent);
  border-radius:16px;padding:18px 18px 8px;margin-bottom:20px;}
.fin4-sec.is-otc{--fin4-c:#b450dc;}     /* mesma cor que a bolinha do OTC tinha */
.fin4-sec.is-intel{--fin4-c:var(--color-success);}
.fin4-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.fin4-num{width:26px;height:26px;border-radius:50%;background:var(--fin4-c);color:#fff;
  font-size:12px;font-weight:800;font-family:'Montserrat',sans-serif;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fin4-hdr-txt{min-width:0;}
.fin4-t{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fin4-c);line-height:1.2;}
.fin4-sub{font-size:11px;font-weight:500;color:var(--color-sub);margin-top:3px;line-height:1.3;}
.fin4-all{margin-left:auto;flex-shrink:0;background:var(--bg-metric);
  border:0.5px solid var(--border-metric);border-radius:8px;padding:6px 13px;
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--color-label);
  cursor:pointer;transition:border-color .15s,color .15s;}
.fin4-all:hover{border-color:var(--fin4-c);color:var(--fin4-c);}
/* Rótulos das antigas divisórias internas de Inteligência. Continuam no DOM
   porque o finRender escreve o nome do parceiro filtrado neles — some daqui e
   o querySelector estoura. Fora da vista, não fora da árvore. O parceiro
   filtrado continua visível no banner do topo da aba. */
.fin4-legacy-lbl{display:none;}
/* Fileira de DOIS gráficos (Transações e OTC). Eram dois `style=` inline com
   `grid-template-columns:1fr 1fr` — e `1fr` puro tem mínimo automático de
   min-content, então o canvas que o Chart.js dimensiona em px empurrava a
   coluna e a fileira saía pela direita da tela. `minmax(0,1fr)` é a mesma
   trava que .fin2-row e .fin4-grid3 já usavam. */
.fin4-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
@media(max-width:760px){.fin4-grid2{grid-template-columns:minmax(0,1fr);}}
/* Fileira de gráficos da seção Inteligência: 3 colunas, como no mockup. */
.fin4-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px;}
@media(max-width:1180px){.fin4-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){
  .fin4-sec{padding:14px 12px 6px;border-radius:13px;}
  .fin4-grid3{grid-template-columns:minmax(0,1fr);}
  .fin4-sub{display:none;}   /* no celular o título já basta; a legenda roubava duas linhas */
}

/* Insight não estica: ele é um número grande colado no rótulo, e espalhar
   isso por 300px de altura desfaz o próprio destaque. Alinha pelo topo. */
.fin3-insights{grid-column:2;grid-row:1;align-self:start;}
/* Alertas estica: é lista, crescer é natural, e assim a base do trilho casa
   com a da fileira de Volume. */
.fin3-alertas{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-height:0;}
.fin3-alert-list{flex:1;}
.fin3-alert-todos{margin-top:14px;align-self:flex-start;}

@media (max-width:1180px){
  /* Empilhado não há linha pra casar: tudo vira uma coluna só, na ordem do
     documento (os dois cards de resumo caem no fim). */
  .fin3-main{grid-template-columns:minmax(0,1fr);}
  .fin3-main>*{grid-column:1!important;grid-row:auto!important;}
  .fin3-insights{align-self:stretch;}
}
/* A margem inferior da fileira entra na altura da LINHA do grid mas não na do
   card ao lado — então o Alertas, esticado até a linha, terminava 18px abaixo
   da fileira. Hoje o respiro é o row-gap do .fin3-main (fora das células). */
.fin3-main .fin2-row{margin-bottom:0;}
/* Ações na ponta direita da barra de filtros. margin-left:auto empurra pro
   fim da MESMA linha — o cabeçalho desta tela é o global, então uma faixa só
   pra dois botões seria uma linha de altura sem informação nenhuma. */
.fin3-acoes{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;position:relative;}
@media (max-width:760px){ .fin3-acoes{margin-left:0;width:100%;} }
/* Intervalo editável só em "Personalizado" (finSyncPeriodo alterna). */
.fin3-range-edit{display:inline-flex;align-items:center;gap:8px;}
/* Em tela mais estreita os dois botões viram só ícone: o rótulo custa ~190px
   e o ícone já diz o que fazem (o title continua para quem passa o mouse).
   É o que evita a barra quebrar numa segunda linha quase vazia. */
@media (max-width:1080px){
  .fin3-btn span{display:none;}
  .fin3-btn{padding:10px 12px;}
}

/* ══════════ AUDIT LOG (sub-vista do Admin, migration 098) ══════════ */
.aud-hdr-icon{background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--color-accent);}
/* Faixa de data no mesmo desenho das outras caixas de filtro da barra. */
.aud-range{display:inline-flex;align-items:center;gap:7px;background:var(--bg-input);
  border:0.5px solid var(--border-input);border-radius:8px;padding:6px 11px;flex-shrink:0;}
.aud-range i{font-size:14px;color:var(--color-tab-inactive);}
.aud-range input{background:none;border:none;outline:none;color:var(--color-input);
  font-family:'Montserrat',sans-serif;font-size:12px;padding:0;width:104px;}
.aud-range-arrow{color:var(--color-tab-inactive);font-size:12px;}
/* Usuário: avatar + nome em cima, e-mail embaixo (como no mockup). */
.aud-user{display:flex;align-items:center;gap:9px;min-width:0;}
.aud-user-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.aud-user-nome{font-size:12.5px;font-weight:600;color:var(--color-title);white-space:nowrap;}
.aud-user-mail{font-size:11px;color:var(--color-tab-inactive);white-space:nowrap;}
/* Módulo: pílula neutra — a cor da linha é a severidade, e duas escalas de cor
   competindo na mesma linha tiram a força da que importa. */
.aud-mod{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;
  background:var(--bg-metric);border:0.5px solid var(--border-metric);color:var(--color-label);white-space:nowrap;}
/* Detalhes ocupam a maior parte da linha, mas com teto: são o campo que mais
   cresce ("de -> para" em duas linhas) e sem limite empurram IP e severidade
   fora da tela. */
.aud-det{font-size:11.5px;color:var(--color-sub);line-height:1.45;max-width:320px;}
.aud-sev{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.aud-sev-critico{background:rgba(239,68,68,.14);color:var(--color-danger);border:0.5px solid rgba(239,68,68,.32);}
.aud-sev-alto{background:rgba(245,158,11,.14);color:var(--color-warning);border:0.5px solid rgba(245,158,11,.32);}
.aud-sev-medio{background:rgba(245,200,11,.12);color:#d9a520;border:0.5px solid rgba(245,200,11,.3);}
.aud-sev-info{background:rgba(77,120,255,.12);color:var(--color-accent-light);border:0.5px solid rgba(77,120,255,.3);}
body.light .aud-sev-critico{color:var(--color-danger-dark);}
body.light .aud-sev-alto{color:#b8760a;}
body.light .aud-sev-info{color:var(--color-accent);}
.adm2-page-el{font-size:12px;color:var(--color-tab-inactive);padding:0 4px;}
@media(max-width:900px){
  /* IP e módulo são os primeiros a sair: a pergunta principal da trilha é quem
     fez o quê, e essas duas colunas são contexto. */
  .aud-table th:nth-child(4),.aud-table td:nth-child(4),
  .aud-table th:nth-child(6),.aud-table td:nth-child(6){display:none;}
  .aud-det{max-width:none;}
  .aud-range{width:100%;justify-content:space-between;}
}

/* ══════════ ATENDIMENTO (CRM de tickets, migration 115) ══════════ */
.at-hdr-icon{background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--color-accent);}
/* Painel de visualizações + fila. O protótipo tinha três painéis; aqui são
   dois, porque a sidebar global do Transfero One já ocupa a coluna que lá era
   o primeiro. O detalhe substitui a fila em vez de virar um terceiro painel —
   em 1280px, três colunas deixariam a conversa com menos de 400px. */
.at-area{display:grid;grid-template-columns:212px minmax(0,1fr);gap:14px;align-items:start;}
.at-views{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;
  padding:8px;max-height:calc(100vh - 220px);overflow-y:auto;}
.at-v-sec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-tab-inactive);padding:10px 8px 5px;}
.at-v{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;
  font-size:12px;color:var(--color-label);transition:background .15s,color .15s;}
.at-v i{font-size:14px;opacity:.7;flex-shrink:0;}
.at-v span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.at-v:hover{background:var(--bg-dash);}
.at-v.active{background:var(--color-accent-bg);color:var(--color-accent-light);font-weight:600;}
.at-v.active i{opacity:1;}
.at-lista{min-width:0;}
.at-row{cursor:pointer;}
.at-num{font-variant-numeric:tabular-nums;color:var(--color-tab-inactive);white-space:nowrap;}
.at-assunto{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
/* Pílulas de status: mesma escala de cor do resto do produto. */
.at-st{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.at-st-novo{background:rgba(77,120,255,.14);color:var(--color-accent-light);}
.at-st-aberto{background:rgba(239,68,68,.13);color:var(--color-danger);}
.at-st-pendente{background:rgba(245,158,11,.14);color:var(--color-warning);}
.at-st-espera{background:rgba(148,163,184,.16);color:var(--color-tab-inactive);}
.at-st-resolvido{background:rgba(34,197,94,.14);color:var(--color-success);}
.at-st-fechado{background:rgba(148,163,184,.12);color:var(--color-tab-inactive);}
body.light .at-st-resolvido{color:var(--color-success-dark);}
body.light .at-st-aberto{color:var(--color-danger-dark);}
.at-sla{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums;}
.at-sla-ok{background:rgba(34,197,94,.14);color:var(--color-success);}
.at-sla-warn{background:rgba(245,158,11,.16);color:var(--color-warning);}
.at-sla-crit{background:rgba(239,68,68,.16);color:var(--color-danger);}
.at-sla-none{color:var(--color-tab-inactive);}
/* Detalhe: conversa à esquerda, propriedades à direita. */
.at-det-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start;}
.at-det-conv{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:16px 18px;min-width:0;}
.at-det-assunto{font-size:16px;font-weight:700;color:var(--color-title);line-height:1.3;}
.at-det-sub{font-size:11.5px;color:var(--color-tab-inactive);margin-top:3px;margin-bottom:14px;}
.at-conv{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;padding-right:4px;}
.at-cm{border:0.5px solid var(--border-metric);border-radius:10px;padding:10px 12px;background:var(--bg-dash);}
/* Nota interna com faixa âmbar: o risco real aqui é mandar pro cliente algo
   que era pra ser interno, então a diferença tem que ser óbvia à distância. */
.at-cm-nota{border-left:3px solid var(--color-warning);background:color-mix(in srgb, var(--color-warning) 7%, var(--bg-dash));}
.at-cm-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.at-cm-autor{font-size:12.5px;font-weight:600;color:var(--color-title);}
.at-cm-tag{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;background:var(--bg-metric);color:var(--color-tab-inactive);}
.at-cm-nota .at-cm-tag{background:rgba(245,158,11,.18);color:var(--color-warning);}
.at-cm-quando{margin-left:auto;font-size:11px;color:var(--color-tab-inactive);}
.at-reply{margin-top:14px;border-top:0.5px solid var(--divider);padding-top:12px;}
.at-reply-modo{display:flex;gap:6px;margin-bottom:8px;}
.at-modo-btn{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;padding:5px 13px;
  border-radius:20px;border:0.5px solid var(--border-metric);background:var(--bg-dash);
  color:var(--color-tab-inactive);cursor:pointer;transition:all .15s;}
.at-modo-btn.active{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent-light);}
#at-modo-nota.active{background:rgba(245,158,11,.16);border-color:var(--color-warning);color:var(--color-warning);}
.at-reply-txt{width:100%;box-sizing:border-box;background:var(--bg-input);color:var(--color-input);
  border:0.5px solid var(--border-input);border-radius:8px;padding:10px 12px;
  font-family:'Montserrat',sans-serif;font-size:13px;resize:vertical;}
.at-reply-txt.is-nota{border-color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 6%, var(--bg-input));}
.at-reply-foot{display:flex;justify-content:flex-end;margin-top:8px;}
.at-det-props{background:var(--bg-metric);border:0.5px solid var(--border-metric);border-radius:12px;padding:14px;}
.at-prop{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.at-prop label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tab-inactive);}
.at-prop span{font-size:12px;color:var(--color-label);}
.at-prop-sel{width:100%;background:var(--bg-input);border:0.5px solid var(--border-input);border-radius:8px;
  padding:7px 10px;color:var(--color-input);font-family:'Montserrat',sans-serif;font-size:12px;}
.at-tags{display:flex;flex-wrap:wrap;gap:5px;}
.at-tag{font-size:10.5px;padding:2px 8px;border-radius:20px;background:var(--bg-dash);
  border:0.5px solid var(--border-metric);color:var(--color-label);}
@media(max-width:1100px){
  .at-area{grid-template-columns:minmax(0,1fr);}
  /* o painel de visualizações vira uma faixa rolável no topo */
  .at-views{max-height:none;display:flex;gap:6px;overflow-x:auto;}
  .at-v-sec{display:none;}
  .at-v{white-space:nowrap;}
  .at-det-grid{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:900px){
  .at-table th:nth-child(4),.at-table td:nth-child(4),
  .at-table th:nth-child(5),.at-table td:nth-child(5),
  .at-table th:nth-child(6),.at-table td:nth-child(6){display:none;}
  .at-assunto{max-width:none;}
}
/* Configurações do Atendimento (Etapa 2) */
.at-cfg-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.at-cfg-t{font-size:14px;font-weight:700;color:var(--color-title);}
.at-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-label);
  margin-bottom:9px;cursor:pointer;}
.at-chk input{accent-color:var(--color-accent);}
/* Lista de campos do formulário: teto com rolagem porque o catálogo cresce e
   sem limite o modal passaria da altura da tela e o botão Salvar sairia dela. */
.at-cfg-campos{max-height:210px;overflow-y:auto;border:0.5px solid var(--border-metric);
  border-radius:8px;padding:10px 12px;background:var(--bg-dash);}
.at-cfg-campos .at-chk{margin-bottom:6px;}
/* Automação do Atendimento (Etapa 3) */
.at-rep-row{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap;}
.at-rep-row select,.at-rep-row input,.at-rep-row textarea{font-size:12px;padding:6px 9px;}
.at-rep-row .at-rep-val{flex:1;min-width:150px;}
.at-rep-row .at-rep-val>*{width:100%;box-sizing:border-box;}
.at-dica{font-size:11px;color:var(--color-tab-inactive);margin-top:5px;line-height:1.6;}
.at-dica code{background:var(--bg-dash);border:0.5px solid var(--border-metric);border-radius:4px;
  padding:1px 5px;font-size:10.5px;}
.at-macro-btn{margin-left:auto;}
.at-macro-lista{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto;}
.at-macro-item{border:0.5px solid var(--border-metric);border-radius:9px;padding:10px 12px;
  cursor:pointer;background:var(--bg-dash);transition:border-color .15s,background .15s;}
.at-macro-item:hover{border-color:var(--color-accent);background:var(--color-accent-bg);}
.at-macro-t{font-size:13px;font-weight:600;color:var(--color-title);}
.at-macro-d{font-size:11.5px;color:var(--color-tab-inactive);margin-top:2px;}
/* Botões de ação do Atendimento — classe PRÓPRIA de propósito.
   As de Marketing (.mkt-btn-sm/.mkt-btn-danger) existem, mas são escopadas em
   `#screen-mkt` e em `.mkt-modal`: dentro dos modais daqui elas pegavam, nas
   TABELAS não, e os botões saíam sem estilo nenhum. Depender do escopo de
   outro módulo é o mesmo erro que deixou os KPIs do Audit Log empilhados
   (.metrics-4 não existia). Aqui o estilo mora no bloco que esta aba controla. */
.at-btn{background:var(--bg-metric);color:var(--color-sub);border:0.5px solid var(--border-metric);
  border-radius:6px;padding:5px 12px;font-family:'Montserrat',sans-serif;font-size:11px;
  font-weight:600;cursor:pointer;transition:border-color .15s,color .15s;}
.at-btn:hover{border-color:var(--color-accent);color:var(--color-accent-light);}
.at-btn.danger{color:var(--color-danger-dark);border-color:color-mix(in srgb, var(--color-danger-dark) 45%, transparent);}
.at-btn.danger:hover{border-color:var(--color-danger-dark);color:var(--color-danger-dark);}
/* wrapper do iframe de cada comentário: sem regra ele não tinha altura própria */
.at-cm-corpo{min-height:28px;}

/* ── Volume Semanal Convertido: card de destaque do bloco de Aquisição ──
   Fundo preenchido em vez de superfície neutra — é o único card do bloco que
   fala em dinheiro, e o mockup pede que ele salte. Todo o texto interno passa
   a branco, então as regras dos cards comuns (que usam --color-title e
   --color-sub) precisam ser sobrescritas aqui. */
.fnx-card.fnx-volconv{
  background:linear-gradient(135deg,#5b5bf0 0%,#4d4dff 55%,#6a4df5 100%);
  border-color:transparent;color:#fff;padding:16px 18px 14px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 6px 22px rgba(77,77,255,.28);}
.fnx-volconv .fnx-vc-main{min-width:0;}
.fnx-volconv .fnx-card-hd,
.fnx-volconv .fnx-card-hd i{color:rgba(255,255,255,.82);}
.fnx-volconv .fnx-card-val{color:#fff;font-size:30px;margin:7px 0 6px;}
.fnx-volconv .fnx-card-sub{color:rgba(255,255,255,.72);}
/* a tag de variação tem cor de fundo própria por estado; sobre o roxo ela
   sumiria, então vira translúcida branca nos três estados */
.fnx-volconv .fnx-var{background:rgba(255,255,255,.18)!important;color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;}
.fnx-volconv .fnx-card-spark{margin-top:10px;}
/* Funil na ponta direita da fileira de chips do ciclo de vida (aba Leads).
   Modificador de instância: .ld-view-switch é compartilhada com Finders,
   Onboarding e Clientes, que continuam com o switcher à esquerda. */
.ld-view-switch-dir{margin-left:auto;}
@media(max-width:760px){
  /* quando a fileira quebra, o `auto` jogaria o Funil sozinho na direita de
     uma segunda linha vazia — encostado à esquerda ele acompanha os chips */
  .ld-view-switch-dir{margin-left:0;}
}

/* Botão "Métricas": contorno de acento em repouso, preenchido quando a vista
   está aberta. É o destino que a fileira de chips existe pra oferecer, então
   ele precisa se destacar deles — mas por CONTRASTE DE FORMA (contorno contra
   as pílulas chapadas), não por peso.

   Nasceu preenchido com --gradient-brand e sombra colorida, e ficava
   pesado demais para uma navegação: degradê e brilho são a linguagem de
   "Salvar"/"Adicionar", ações que confirmam alguma coisa. Trocar de vista
   não confirma nada.

   ⚠️ Os dois estados agora dizem coisas DIFERENTES, e essa é a melhora real:
   contorno = "vá para lá", preenchido = "você está aqui". Antes os dois eram
   preenchidos e a diferença era um anel, que precisava ser procurado.

   Escopado em .ld-view-switch-dir (Leads e Onboarding): os switchers de
   Finders e Clientes usam a mesma classe de botão e seguem neutros. */
.ld-view-switch-dir .ld-view-btn{
  background:transparent;border:1px solid var(--color-accent);
  color:var(--color-accent-light);
  font-size:12.5px;font-weight:700;padding:8px 17px;letter-spacing:.01em;
  box-shadow:none;}
body.light .ld-view-switch-dir .ld-view-btn{color:var(--color-accent);}
.ld-view-switch-dir .ld-view-btn i{font-size:15px;}
.ld-view-switch-dir .ld-view-btn:hover{
  border-color:var(--color-accent);background:rgba(77,77,255,.12);
  box-shadow:none;transform:none;}
.ld-view-switch-dir .ld-view-btn:active{transform:scale(.97);}
.ld-view-switch-dir .ld-view-btn:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;}
/* Vista aberta: preenchido. O branco vale nos dois temas porque o fundo é a
   cor da marca nos dois — não precisa de override no tema claro. */
.ld-view-switch-dir .ld-view-btn.active,
body.light .ld-view-switch-dir .ld-view-btn.active{
  background:var(--color-accent);border-color:var(--color-accent);color:#fff;
  box-shadow:none;}
.ld-view-switch-dir .ld-view-btn.active:hover{
  background:var(--color-accent);filter:brightness(1.08);}

/* ── Métricas de Finders (modelo do Funil de Leads) — só o que o painel
   de Leads não tem: cabeçalho próprio, inputs de data e o donut de
   saídas. Todo o resto reusa as classes fnx-*/fn2-* compartilhadas. */
.fndmx-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 12px;}
.fndmx-head h2{font-size:22px;font-weight:800;color:var(--color-title);letter-spacing:-.01em;}
.fndmx-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent-light);background:rgba(77,77,255,.12);border:1px solid rgba(77,77,255,.25);
  border-radius:999px;padding:4px 10px;}
body.light .fndmx-badge{color:var(--color-accent);}
.fndmx-resumo{font-size:12px;color:var(--color-sub);}
#fnd-metrics-view .fndmx-date{border:none;background:none;font-family:'Montserrat',sans-serif;
  font-size:12px;color:var(--color-title);color-scheme:dark;}
body.light #fnd-metrics-view .fndmx-date{color-scheme:light;}
.fndmx-loss{display:flex;align-items:center;gap:22px;padding:6px 4px;}
.fndmx-loss-donut{position:relative;width:110px;height:110px;flex-shrink:0;}
.fndmx-loss-donut svg{width:110px;height:110px;}
.fndmx-loss-total{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.1;}
.fndmx-loss-total b{font-size:22px;font-weight:800;color:var(--color-title);}
.fndmx-loss-total span{font-size:10px;color:var(--color-sub);}
.fndmx-loss-legend{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}