/* ==========================================================================
   Vertex Radar — sistema visual
   Tinta azul-cobalto (marca), rosa-ateliê para "quente" (sinais de compra),
   verde do WhatsApp só no que é conversa. Sem dependências externas.
   ========================================================================== */

/* ---------- tokens: claro (padrão) */
:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eef0f5;
  --line: #e2e5ee;
  --line-2: #d3d8e4;
  --text: #141829;
  --muted: #5b6278;
  --faint: #868da3;
  --brand: #2b44c8;
  --brand-hover: #2238a8;
  --brand-soft: #e9ecfb;
  --brand-ink: #ffffff;
  --ui-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-mix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --accent: var(--brand);
  --heat: #c92a62;
  --heat-soft: #fce8ef;
  --ok: #0f7b55;
  --ok-bg: #e2f4ea;
  --warn: #8f5500;
  --warn-bg: #fdf0da;
  --bad: #c02b2b;
  --bad-bg: #fce8e8;
  --neutral-bg: #eef0f5;
  --wa: #00a884;
  --wa-ink: #ffffff;
  --side-bg: #121833;
  --side-ink: #c3c9e2;
  --side-ink-2: #8a92b4;
  --side-hover: rgba(255, 255, 255, .07);
  --side-ativo: rgba(255, 255, 255, .12);
  --focus: #4c6bff;

  --shadow-1: 0 1px 2px rgba(20, 24, 41, .05), 0 1px 1px rgba(20, 24, 41, .03);
  --shadow-2: 0 4px 12px rgba(20, 24, 41, .08), 0 1px 3px rgba(20, 24, 41, .06);
  --shadow-3: 0 18px 48px rgba(20, 24, 41, .18), 0 4px 12px rgba(20, 24, 41, .08);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 36px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif;

  --topo: 56px;
  --side-w: 236px;
  --side-mini: 68px;
  --lado: 0px;
  --baixo: calc(62px + env(safe-area-inset-bottom));

  /* WhatsApp (claro) */
  --wa-bg: #efeae2; --wa-dots: rgba(20, 24, 41, .05); --wa-out: #d9fdd3; --wa-in: #ffffff; --wa-txt: #111b21;
  --wa-meta: #667781; --wa-panel: #ffffff; --wa-panel2: #f0f2f5; --wa-line: #e9edef; --wa-green: #008069; --wa-blue: #027eb5;
  color-scheme: light;
}

/* ---------- tokens: escuro (sistema, a menos que o usuário escolha claro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1019; --surface: #141926; --surface-2: #1a2030; --surface-3: #212839; --line: #262e42; --line-2: #333c54;
    --text: #e7eaf3; --muted: #a0a7bc; --faint: #737b95;
    --brand: #8c9dff; --brand-hover: #a3b1ff; --brand-soft: #1f2650; --brand-ink: #0c1019; --ui-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230c1019' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ui-mix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%230c1019' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --heat: #ff7aa5; --heat-soft: #3b1a29; --ok: #4fd39a; --ok-bg: #11301f; --warn: #f3b955; --warn-bg: #33270f;
    --bad: #ff8e8e; --bad-bg: #3a1818; --neutral-bg: #212839; --wa: #00a884;
    --side-bg: #090d17; --focus: #8c9dff;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 18px 48px rgba(0, 0, 0, .55);
    --wa-bg: #0b141a; --wa-dots: rgba(255, 255, 255, .03); --wa-out: #005c4b; --wa-in: #202c33; --wa-txt: #e9edef;
    --wa-meta: #8696a0; --wa-panel: #111b21; --wa-panel2: #202c33; --wa-line: #2a3942; --wa-green: #00a884; --wa-blue: #53bdeb;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1019; --surface: #141926; --surface-2: #1a2030; --surface-3: #212839; --line: #262e42; --line-2: #333c54;
  --text: #e7eaf3; --muted: #a0a7bc; --faint: #737b95;
  --brand: #8c9dff; --brand-hover: #a3b1ff; --brand-soft: #1f2650; --brand-ink: #0c1019; --ui-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230c1019' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ui-mix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%230c1019' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --heat: #ff7aa5; --heat-soft: #3b1a29; --ok: #4fd39a; --ok-bg: #11301f; --warn: #f3b955; --warn-bg: #33270f;
  --bad: #ff8e8e; --bad-bg: #3a1818; --neutral-bg: #212839; --wa: #00a884;
  --side-bg: #090d17; --focus: #8c9dff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 18px 48px rgba(0, 0, 0, .55);
  --wa-bg: #0b141a; --wa-dots: rgba(255, 255, 255, .03); --wa-out: #005c4b; --wa-in: #202c33; --wa-txt: #e9edef;
  --wa-meta: #8696a0; --wa-panel: #111b21; --wa-panel2: #202c33; --wa-line: #2a3942; --wa-green: #00a884; --wa-blue: #53bdeb;
  color-scheme: dark;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.5 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh;
}
a { color: var(--brand); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-lg); font-weight: 650; }
h3 { font-size: var(--fs-md); font-weight: 650; margin: var(--s-4) 0 var(--s-2); }
kbd {
  font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--muted); box-shadow: inset 0 -1px 0 var(--line-2); white-space: nowrap;
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); overflow-wrap: anywhere; margin-top: 4px; }
.mt { margin-top: var(--s-3); }
.ok-txt, .txt-ok { color: var(--ok); }
.txt-bad { color: var(--bad); }
.num, .kpi-valor, .meta-valor, .score, .count, .badge { font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.pular-conteudo { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--brand-ink); padding: 8px 14px; border-radius: var(--r-md); }
.pular-conteudo:focus { top: 12px; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* ícones */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-quente { color: var(--heat); }

/* ---------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 8px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: var(--fs-md); line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap;
  box-shadow: var(--shadow-1); transition: background .12s, border-color .12s, color .12s;
}
.btn .ico { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: var(--wa-ink); }
.btn.wa:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.sm { min-height: 32px; padding: 5px 11px; font-size: var(--fs-sm); border-radius: 8px; }
.btn.block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn.tem-filtro { border-color: var(--brand); color: var(--brand); }
.btn .count, .seg .count, .tab .count {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 18px;
  background: var(--brand); color: var(--brand-ink); font-weight: 700; text-align: center;
}
.count.quente { background: var(--heat); color: #fff; }
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--r-md); border: 0; background: transparent; color: var(--muted); text-decoration: none;
  transition: background .12s, color .12s;
}
.btn-ico:hover { background: var(--surface-3); color: var(--text); }
.btn-ico.ativo { color: var(--brand); background: var(--brand-soft); }
.btn-ico .ico { width: 19px; height: 19px; }
.linkbtn {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0;
  color: var(--brand); font-weight: 600; text-decoration: none;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn .ico { width: 16px; height: 16px; }
.btnrow { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.btnrow.fim { justify-content: flex-end; }

/* ---------- campos */
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=tel], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: var(--fs-md);
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select[multiple] { background-image: none; padding-right: 11px; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer;
  display: inline-grid; place-content: center; vertical-align: middle; border: 1.5px solid var(--line-2); background: var(--surface) center / 14px no-repeat;
  border-radius: 5px; transition: background-color .12s, border-color .12s, box-shadow .12s; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--brand); }
input[type=checkbox]:checked { background-color: var(--brand); border-color: var(--brand); background-image: var(--ui-check); }
input[type=checkbox]:indeterminate { background-color: var(--brand); border-color: var(--brand); background-image: var(--ui-mix); }
input[type=radio]:checked { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--surface); background-color: var(--brand); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
input[type=radio]:checked:focus-visible { box-shadow: inset 0 0 0 4px var(--surface), 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=color] { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
label.field { display: block; margin-bottom: var(--s-3); }
label.field > span { display: block; font-size: var(--fs-sm); font-weight: 550; color: var(--muted); margin-bottom: 5px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); }
.grid-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--s-3); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 var(--s-3); }
.checks label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); cursor: pointer; }
.checks.col { flex-direction: column; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.check-inline input[type=date], .check-inline select { width: auto; min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input[type=checkbox] { width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); border: 0; position: relative; transition: background-color .15s; }
.switch input[type=checkbox]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input[type=checkbox]:checked { background: var(--brand); background-image: none; }
.switch input[type=checkbox]:checked::before { transform: translateX(16px); }
.error { color: var(--bad); font-size: var(--fs-md); min-height: 20px; margin: 6px 0; }

/* ---------- cartões */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); margin-bottom: var(--s-4); box-shadow: var(--shadow-1); min-width: 0;
}
.card > h2 { margin: 0 0 var(--s-4); }
.card h2 .ico { margin-right: 6px; vertical-align: -3px; }
.card-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-topo h2 { margin: 0; display: flex; align-items: center; }

/* ---------- chips e selos */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: var(--r-pill); background: var(--neutral-bg); color: var(--muted); white-space: nowrap;
}
.chip .ico { width: 13px; height: 13px; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.pot-alto { background: var(--ok-bg); color: var(--ok); }
.chip.pot-medio { background: var(--warn-bg); color: var(--warn); }
.chip.etapa { background: transparent; border: 1px solid var(--line-2); color: var(--text); padding: 4px 8px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; display: inline-block; }
.chip.tag { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) { .chip.tag { background: var(--neutral-bg); color: var(--text); } }
.score {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 8px;
  border-radius: 8px; font-weight: 750; font-size: var(--fs-md); background: var(--neutral-bg); color: var(--muted);
}
.score.hi { background: var(--ok-bg); color: var(--ok); }
.score.mid { background: var(--warn-bg); color: var(--warn); }
.score.grande { min-width: 56px; height: 44px; font-size: 22px; border-radius: 12px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: var(--r-pill); font-size: 10.5px; font-weight: 750; line-height: 1; background: var(--wa); color: #fff;
}
.badge.laranja { background: #f59e0b; color: #1b1300; }
.banner { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-sm); margin: 0 0 var(--s-3); font-weight: 550; }
.banner .ico { width: 16px; height: 16px; margin-top: 1px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- avatar */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.avatar.big { width: 64px; height: 64px; }
.avatar.ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--brand); background: var(--brand-soft); }
.avatar.big.ini { font-size: 22px; }

/* ---------- estados: vazio, carregando, esqueleto */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--s-6) var(--s-4); color: var(--muted); }
.vazio b { color: var(--text); font-size: var(--fs-md); }
.vazio p { margin: 0 0 6px; font-size: var(--fs-sm); max-width: 42ch; }
.vazio-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); color: var(--faint); margin-bottom: 4px; }
.vazio-ico .ico { width: 22px; height: 22px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: var(--s-6); font-size: var(--fs-sm); }
.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.esqueleto { display: flex; flex-direction: column; gap: 12px; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.esq-linha { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: brilho 1.3s ease-in-out infinite; }
.esq-linha:nth-child(3n) { width: 62%; } .esq-linha:nth-child(3n+2) { width: 84%; }
.tabela-esq .esq-linha { height: 36px; width: 100% !important; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- progresso */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 10px 0 12px; }
.bar.fina { height: 5px; margin: 6px 0 0; }
.bar > span { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); width: 0; transition: width .5s ease; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.goal-value { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.stat b { display: block; font-size: var(--fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.stat span { font-size: var(--fs-xs); color: var(--muted); }

/* ================================================================ shell */
body:not(.sem-shell) { padding-bottom: 0; }
.sidebar { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: calc(var(--topo) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--s-4) 0;
  display: flex; align-items: center; gap: var(--s-3);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.sem-shell .topbar, body.sem-shell .sidebar, body.sem-shell .tabbar { display: none !important; }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); flex: none; }
.logo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: inline-flex; text-decoration: none; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--faint); display: inline-flex; }
.crumb-sep .ico { width: 14px; height: 14px; }
.top-acoes { display: flex; align-items: center; gap: 4px; }
.top-ico { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); }
.top-ico:hover { background: var(--surface-3); color: var(--text); }
.top-ico .ico { width: 20px; height: 20px; }
.top-ico .badge { position: absolute; top: 3px; right: 2px; margin: 0; background: var(--heat); }
.top-user { border: 0; background: transparent; padding: 3px; border-radius: 50%; }
.user-ini { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 750; font-size: 12.5px; }
.user-ini.grande { width: 40px; height: 40px; font-size: 15px; }

/* busca global */
.busca-global { position: relative; width: min(440px, 38vw); display: none; }
.busca-campo { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid transparent; color: var(--muted); }
.busca-campo:focus-within { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.busca-ico { display: inline-flex; }
.busca-campo input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0; padding: 0; flex: 1; color: var(--text); }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.bg-grupo + .bg-grupo { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.bg-titulo { display: block; font-size: var(--fs-xs); font-weight: 650; color: var(--faint); padding: 8px 10px 4px; }
.bg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.bg-item .avatar { width: 32px; height: 32px; font-size: 12px; }
.bg-item.ativo, .bg-item:hover { background: var(--brand-soft); }
.bg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bg-txt b, .bg-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-tipo { font-size: var(--fs-xs); color: var(--faint); }
.bg-vazio { padding: 12px; margin: 0; }

/* painéis flutuantes */
.notif-painel, .user-menu {
  position: fixed; top: calc(var(--topo) + env(safe-area-inset-top) + 6px); right: 12px; z-index: 45; width: min(380px, calc(100vw - 24px)); max-height: 72vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 8px;
}
.notif-topo { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; }
.notif-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-md); text-decoration: none; color: var(--text); font-size: var(--fs-md); }
.notif-item:hover { background: var(--surface-2); }
.notif-ponto { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; flex: none; }
.notif-item.nova .notif-ponto { background: var(--heat); }
.user-menu { width: 280px; }
.um-topo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-topo b { display: block; font-size: var(--fs-md); overflow-wrap: anywhere; }
.um-secao { padding: 6px 8px 10px; }
.um-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; padding: 3px; background: var(--surface-3); border-radius: var(--r-md); }
.um-tema button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px; font-size: var(--fs-xs); color: var(--muted); }
.um-tema button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: 650; }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: var(--r-md); color: var(--text); text-decoration: none; font-size: var(--fs-md); text-align: left; }
.um-item:hover { background: var(--surface-2); }
.um-item kbd { margin-left: auto; }
.um-item.perigo { color: var(--bad); }

/* conteúdo */
main { display: block; padding: var(--s-4) var(--s-4) calc(var(--baixo) + var(--s-6)); min-width: 0; }
main:focus { outline: none; }
.pagina { width: 100%; min-width: 0; }
.pagina.estreita { max-width: 1040px; margin: 0 auto; }

.pag-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: 4px 0 var(--s-5); }
.pag-titulo { min-width: 0; }
.pag-titulo h1 { overflow-wrap: anywhere; }
.pag-titulo p { margin: 4px 0 0; font-size: var(--fs-md); max-width: 75ch; }
.pag-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.back { margin: 0 0 var(--s-3); }

/* tab bar (celular) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: var(--baixo); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border-top: 1px solid var(--line); }
.tab-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted);
  font-size: 11px; font-weight: 550; background: none; border: 0; position: relative; }
.tab-link .nav-ico { display: inline-flex; }
.tab-link .ico { width: 22px; height: 22px; }
.tab-link.ativo { color: var(--brand); font-weight: 700; }
.tab-link.ativo .nav-ico { background: var(--brand-soft); border-radius: var(--r-pill); padding: 2px 14px; margin: -2px 0; }
.tab-link .badge { position: absolute; top: 5px; left: calc(50% + 8px); margin: 0; }
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(8, 11, 20, .45); display: flex; align-items: flex-end; }
.sheet-in { width: 100%; background: var(--surface); border-radius: 18px 18px 0 0; padding: 14px 12px calc(18px + var(--baixo));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mais-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: var(--r-lg); text-decoration: none;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 550; position: relative; }
.mais-link .ico { width: 22px; height: 22px; color: var(--muted); }
.mais-link.ativo { border-color: var(--brand); color: var(--brand); }
.mais-link .badge { position: absolute; top: 8px; right: 10px; }

/* toast */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--baixo) + 12px); z-index: 60; max-width: 480px; margin: 0 auto;
  background: #161b2e; color: #fff; border-radius: var(--r-lg); padding: 12px 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-3);
  animation: sobe .18s ease-out;
}
.toast span { flex: 1; font-size: var(--fs-md); }
.toast button { background: #fff; color: #161b2e; border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 700; }
@keyframes sobe { from { transform: translateY(8px); opacity: 0; } }

/* desktop: menu lateral */
@media (min-width: 900px) {
  :root { --lado: var(--side-w); --baixo: 0px; }
  body.side-mini { --lado: var(--side-mini); }
  .tabbar, .sheet { display: none !important; }
  .brand { display: none; }
  .busca-global { display: block; }
  .so-mobile { display: none !important; }
  .sidebar {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: var(--lado); z-index: 30;
    background: var(--side-bg); color: var(--side-ink); padding: 0 10px 10px; transition: width .18s ease; overflow: hidden;
  }
  .side-topo { height: var(--topo); display: flex; align-items: center; padding: 0 4px; flex: none; }
  .side-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 16px; white-space: nowrap; }
  .side-brand .logo { background: #fff; color: #121833; }
  .side-brand-txt b { font-weight: 750; }
  .side-links { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; padding-top: 10px; }
  .side-grupo { display: flex; flex-direction: column; gap: 2px; }
  .side-titulo { font-size: var(--fs-xs); font-weight: 650; color: var(--side-ink-2); padding: 0 10px 4px; white-space: nowrap; }
  .side-link { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: var(--r-md); color: var(--side-ink); text-decoration: none; font-size: var(--fs-md); font-weight: 520; white-space: nowrap; position: relative; }
  .side-link .nav-ico { display: inline-flex; }
  .side-link .ico { width: 19px; height: 19px; }
  .side-link:hover { background: var(--side-hover); color: #fff; }
  .side-link.ativo { background: var(--side-ativo); color: #fff; font-weight: 650; }
  .side-link.ativo::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; }
  .side-link .badge { margin-left: auto; }
  .side-link:focus-visible, .side-colapsar:focus-visible { outline-color: #fff; }
  .side-rodape { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
  .side-colapsar { display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--side-ink-2); white-space: nowrap; font-size: var(--fs-sm); }
  .side-colapsar:hover { background: var(--side-hover); color: #fff; }
  body.side-mini .nav-txt, body.side-mini .side-brand-txt, body.side-mini .side-titulo { display: none; }
  body.side-mini .side-grupo + .side-grupo { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; }
  body.side-mini .side-link { justify-content: center; padding: 0; }
  body.side-mini .side-link .badge { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: 9.5px; }
  body.side-mini .side-colapsar { justify-content: center; padding: 0; }
  body.side-mini .side-topo { justify-content: center; }
  body:not(.sem-shell) .topbar, body:not(.sem-shell) main { margin-left: var(--lado); transition: margin-left .18s ease; }
  .topbar { padding: 0 var(--s-6); }
  main { padding: var(--s-6) var(--s-8) var(--s-8); }
  .toast { bottom: 20px; left: calc(var(--lado) + 16px); }
}

/* celular: busca aberta cobre o topo */
@media (max-width: 899px) {
  body.busca-aberta .busca-global { display: block; position: absolute; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 9px); width: auto; z-index: 3; }
  body.busca-aberta .busca-campo { background: var(--surface); border-color: var(--brand); }
  .busca-kbd { display: none; }
  .so-largo { display: none; }
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=date], input[type=datetime-local], select, textarea { font-size: 16px; }
  h1 { font-size: 22px; }
  .card { padding: var(--s-4); }
}

/* ================================================================ login */
body.sem-shell main { padding: 0; margin: 0; }
.acesso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.acesso-marca { display: none; }
.acesso-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-6) var(--s-4); }
.acesso-logo-m { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.acesso-logo-m .logo .ico, .acesso-logo .logo .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.login { width: min(400px, 100%); margin: 0; padding: var(--s-8) var(--s-6); box-shadow: var(--shadow-2); }
.login h1 { font-size: var(--fs-xl); margin-bottom: 4px; }
.login > p { margin: 0 0 var(--s-5); }
.login .btn.block { min-height: 44px; margin-top: 4px; }
@media (min-width: 900px) {
  .acesso { grid-template-columns: minmax(380px, 5fr) 6fr; }
  .acesso-marca {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8); padding: 48px 56px; color: #fff;
    background: var(--side-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0); background-size: 22px 22px;
  }
  .acesso-logo-m { display: none; }
  .acesso-logo { display: flex; align-items: center; gap: 12px; font-size: 18px; }
  .acesso-logo .logo { background: #fff; color: #121833; }
  .acesso-logo .logo .ico { width: 18px; height: 18px; stroke-width: 2.2; }
  .acesso-frase h2 { font-size: 40px; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; max-width: 13ch; }
  .acesso-frase p { color: var(--side-ink); font-size: var(--fs-lg); max-width: 38ch; margin: 14px 0 0; }
  .acesso-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: e; border-left: 1px solid rgba(255, 255, 255, .15); }
  .acesso-etapas li { counter-increment: e; position: relative; padding: 8px 0 8px 22px; color: var(--side-ink); }
  .acesso-etapas li::before { content: counter(e); position: absolute; left: -11px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--side-bg); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
  .acesso-etapas li:last-child { color: #fff; font-weight: 650; }
  .login { box-shadow: none; border: 0; background: transparent; }
}

/* ================================================================ segmentos, filtros */
.segmento { scrollbar-width: none; display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: var(--r-md); margin-bottom: var(--s-4); max-width: 100%; overflow-x: auto; }
.seg { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; border-radius: 8px; padding: 7px 14px; font-size: var(--fs-md); font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg:hover { color: var(--text); }
.seg.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.alterna { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: var(--r-md); }
.alterna button { display: grid; place-items: center; width: 34px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--muted); }
.alterna button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
/* compatibilidade: abas antigas */
.tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.tab { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 8px; font-weight: 600; color: var(--muted); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

.filtrobar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); margin-bottom: var(--s-4); box-shadow: var(--shadow-1); }
.filtrobar-l1 { display: flex; gap: var(--s-2); }
.campo-busca { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.campo-busca > .ico { position: absolute; left: 11px; color: var(--faint); pointer-events: none; width: 17px; height: 17px; }
.campo-busca input { padding-left: 36px; }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.fchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: var(--fs-sm); font-weight: 550; color: var(--muted); white-space: nowrap; }
.fchip:hover { border-color: var(--faint); color: var(--text); }
.fchip.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); font-weight: 650; }
.fchip .ico { width: 14px; height: 14px; }
.filtros-painel { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.minirow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.minichip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill);
  padding: 5px 11px; font-size: var(--fs-sm); color: var(--muted); font-weight: 550; white-space: nowrap; }
.minichip:hover { color: var(--text); border-color: var(--faint); }
.minichip:disabled { opacity: .5; cursor: not-allowed; }
.minichip b { color: var(--text); }
.minichip.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.minichip .ico { width: 14px; height: 14px; }
.filterbar { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 10px; gap: 8px; flex-wrap: wrap; }

/* ================================================================ prospecção */
.lista-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin: 0 2px var(--s-2); min-height: 32px; flex-wrap: wrap; }
.lista-topo b { color: var(--text); }
.tabela-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; box-shadow: var(--shadow-1); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tabela th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs);
  padding: 0 10px; height: 38px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela th.ordenavel button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; }
.tabela th.ordenavel .ico { width: 13px; height: 13px; opacity: .45; }
.tabela th.ordenavel.ativo { color: var(--text); }
.tabela th.ordenavel.ativo .ico { opacity: 1; color: var(--brand); }
.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tabela tbody tr { cursor: pointer; transition: background .08s; }
.tabela tbody tr:hover { background: var(--surface-2); }
.tabela tbody tr.selecionado { background: var(--brand-soft); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; }
.tabela th.num button { flex-direction: row-reverse; }
.tabela .col-sel { width: 36px; padding-right: 0; }
.tabela .col-acoes { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .25); }
.tabela th.col-acoes { z-index: 2; background: var(--surface-2); }
.tabela tbody tr:hover .col-acoes { background: var(--surface-2); }
.tabela tbody tr.selecionado .col-acoes { background: linear-gradient(var(--brand-soft), var(--brand-soft)), var(--surface); }
.tabela .col-loja { min-width: 240px; max-width: 360px; white-space: normal; }
.loja-cel { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.loja-cel .avatar { width: 34px; height: 34px; font-size: 12px; }
.loja-txt { display: flex; flex-direction: column; min-width: 0; }
.loja-txt b { font-size: var(--fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.loja-txt .muted { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38ch; }
.loja-cel:hover b { color: var(--brand); }
.sinais { display: inline-flex; gap: 4px; align-items: center; }
.sinal { display: inline-flex; align-items: center; gap: 2px; height: 24px; min-width: 24px; justify-content: center; padding: 0 4px; border-radius: 7px; font-weight: 700; font-size: var(--fs-xs); background: var(--surface-3); color: var(--muted); }
.sinal .ico { width: 14px; height: 14px; }
.sinal.ok { color: var(--ok); background: var(--ok-bg); }
.sinal.quente { color: var(--heat); background: var(--heat-soft); }
.sinal.wa { color: #fff; background: var(--wa); }
.prox { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.prox .ico { width: 14px; height: 14px; }
.tabela .col-acoes { text-align: right; width: 1%; }
.tabela .col-acoes > * { vertical-align: middle; }
.tabela .col-acoes .btn-ico { width: 32px; height: 32px; }
.tabela tbody tr .col-acoes .btn { opacity: .0; transition: opacity .1s; }
.tabela tbody tr:hover .col-acoes .btn, .tabela tbody tr:focus-within .col-acoes .btn, .tabela tbody tr.selecionado .col-acoes .btn { opacity: 1; }
@media (hover: none) { .tabela tbody tr .col-acoes .btn { opacity: 1; } }
.mais-itens { margin-top: var(--s-3); }

.cards-leads { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.lead {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; color: var(--text); text-decoration: none; box-shadow: var(--shadow-1); min-width: 0; transition: border-color .12s;
}
.lead:hover { border-color: var(--line-2); }
.lead:active { background: var(--surface-2); }
.lead-top { display: flex; gap: 10px; align-items: center; }
.lead-name { flex: 1; min-width: 0; }
.lead-nome { display: block; font-weight: 650; font-size: var(--fs-md); overflow-wrap: anywhere; }
.lead-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; font-weight: 400; }
.reasons { font-size: var(--fs-xs); color: var(--faint); margin-top: 8px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
ul.reasons { display: block; -webkit-line-clamp: unset; }
.lead.selecionavel { cursor: pointer; }
.lead.selecionado { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.sel-box { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-2); flex: none; }
.sel-box.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.sel-box .ico { width: 14px; height: 14px; stroke-width: 3; }
.site-ind { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.site-ind .ico { width: 15px; height: 15px; }
.site-ind.viu { color: var(--heat); font-weight: 650; }

/* ações em massa */
.massa-slot:empty { display: none; }
.massa-slot { position: sticky; bottom: calc(var(--baixo) + 12px); z-index: 15; }  /* o slot gruda (a barra dentro dele não tinha como) */
.massa {
  margin-top: var(--s-3);
  background: var(--side-bg); color: #fff; border-radius: var(--r-lg); padding: 10px 12px; box-shadow: var(--shadow-3);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.massa-topo { display: flex; align-items: center; gap: 10px; }
.massa-topo .linkbtn { color: #b9c4ff; }
.massa-topo .btn-ico { color: #c3c9e2; width: 30px; height: 30px; }
.massa-topo .btn-ico:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.massa .muted { color: #c3c9e2; }
.massa-acoes { display: flex; gap: 6px; overflow-x: auto; margin-left: auto; }
.massa-acoes .btn { min-height: 34px; padding: 6px 12px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.massa-acoes .btn:hover { background: rgba(255, 255, 255, .18); }

/* ================================================================ lead */
.lead-hero { padding: var(--s-5); }
.lead-hero-top { display: flex; align-items: center; gap: var(--s-4); }
.lead-hero-txt { flex: 1; min-width: 0; }
.lead-hero-txt h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.lead-hero-txt .lead-sub a { color: var(--muted); font-weight: 600; }
.lead-hero-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.acoes-lead { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.motivos { margin-top: var(--s-3); }
.motivos summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; width: fit-content; }
.motivos ul { margin-top: 8px; }
.lead-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
.lead-col { min-width: 0; }
.lead-col > .esqueleto { margin-bottom: var(--s-4); }
@media (min-width: 1100px) {
  .lead-grid { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); align-items: start; }
}
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; font-size: var(--fs-md); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { position: relative; padding: 8px 0 8px 18px; font-size: var(--fs-md); border-left: 1px solid var(--line); margin-left: 4px; }
.hist li::before { content: ""; position: absolute; left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.hist li:first-child::before { background: var(--brand); }
.hist time { display: block; font-size: var(--fs-xs); color: var(--faint); }
ul.plain { margin: 0; padding-left: 18px; font-size: var(--fs-md); }
ul.plain li { overflow-wrap: anywhere; }
.savebar { position: sticky; bottom: var(--baixo); padding: 10px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--surface) 75%, transparent); }
.tags-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tags-editor .tag-add { width: auto; min-height: 30px; padding: 3px 28px 3px 10px; font-size: var(--fs-sm); border-radius: var(--r-pill); }
.tag-x { background: none; border: 0; color: inherit; padding: 0 0 0 4px; font-size: 14px; line-height: 1; }

/* ================================================================ início */
.dash { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.dash > .card { margin: 0; }
.dash-esq { min-height: 200px; }
@media (min-width: 1000px) {
  .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dash > * { grid-column: span 4; }
  .dash > .meta-card { grid-column: span 7; }
  .dash > .agora-card { grid-column: span 5; }
  .dash > .kpis-linha { grid-column: 1 / -1; }
  .dash > .pipe-card { grid-column: span 7; }
  .dash > .conv-card { grid-column: span 5; }
  .dash > .dash-esq { grid-column: span 6; }
}
.meta-card { display: flex; flex-direction: column; gap: var(--s-4); }
.meta-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.meta-valor { font-family: var(--font-num); font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; margin-top: 2px; }
.meta-de { font-size: var(--fs-lg); font-weight: 550; color: var(--muted); letter-spacing: -.01em; }
.meta-pct { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 700; color: var(--brand); }
.regua-barra { position: relative; height: 22px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.regua-fechado, .regua-pago { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.regua-fechado { background: var(--brand); opacity: .35; }
.regua-pago { background: var(--brand); }
.regua-tiques { position: absolute; inset: 0; }
.regua-tiques span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.regua-tiques span:first-child, .regua-tiques span:last-child { display: none; }
.regua-legenda { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; }
.meta-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.meta-stats > div { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta-stats span { font-size: var(--fs-xs); color: var(--muted); }
.meta-stats b { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.meta-stats b.destaque { color: var(--brand); }
@media (min-width: 640px) { .meta-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meta-longa { font-size: var(--fs-sm); }
.meta-longa .bar > span { background: var(--muted); }

.fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fila-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--surface); transition: border-color .12s, background .12s; }
.fila-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.fila-n { font-size: var(--fs-xs); font-weight: 700; color: var(--faint); width: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.fila-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-3); color: var(--muted); flex: none; }
.fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fila-txt b { font-size: var(--fs-md); font-weight: 650; }
.fila-txt span { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-seta { color: var(--faint); width: 16px; height: 16px; }
.fila-item.wa .fila-ico { background: color-mix(in srgb, var(--wa) 16%, transparent); color: var(--wa); }
.fila-item.quente .fila-ico { background: var(--heat-soft); color: var(--heat); }
.fila-item.quente { border-color: color-mix(in srgb, var(--heat) 30%, var(--line)); }
.fila-item.bad .fila-ico { background: var(--bad-bg); color: var(--bad); }
.fila-item.warn .fila-ico { background: var(--warn-bg); color: var(--warn); }
.fila-item.marca .fila-ico { background: var(--brand-soft); color: var(--brand); }

.kpis-linha { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-4); }
.dash > .kpis-linha { margin: 0; }
@media (min-width: 700px) { .kpis-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpis-linha { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kpis-linha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text); min-width: 0; transition: border-color .12s; }
a.kpi:hover { border-color: var(--line-2); }
.kpi-ico { position: absolute; top: 12px; right: 12px; color: var(--faint); }
.kpi-ico .ico { width: 17px; height: 17px; }
.kpi-valor { font-family: var(--font-num); font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.kpi-rotulo { font-size: var(--fs-sm); font-weight: 600; }
.kpi-sub { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi.quente .kpi-ico, .kpi.quente .kpi-valor { color: var(--heat); }
.kpi.wa .kpi-ico { color: var(--wa); }
.kpi.marca .kpi-ico { color: var(--brand); }
.kpi.bad .kpi-sub { color: var(--bad); font-weight: 600; }

.funil-barras { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-3); }
.fb-linha { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 40px 84px; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.fb-linha:hover { background: var(--surface-2); }
.fb-rot { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-trilho { height: 10px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.fb-barra { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.fb-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-soma { text-align: right; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .fb-linha { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 34px; } .fb-soma { display: none; } }
.conversao { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cv-topo { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.cv-topo b { font-variant-numeric: tabular-nums; }
.cv-trilho { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 4px 0 2px; }
.cv-barra { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.conversao li:last-child .cv-barra { background: var(--ok); }
.cv-taxa { font-size: var(--fs-xs); }

.lista-mini { display: flex; flex-direction: column; }
.mini { display: flex; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.mini:first-child { border-top: 0; }
.mini:hover .mini-txt b { color: var(--brand); }
.mini .avatar { width: 36px; height: 36px; font-size: 12.5px; }
.mini-txt { min-width: 0; flex: 1; }
.mini-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: var(--fs-sm); }
.feed li:first-child a { border-top: 0; }
.feed-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.feed-ponto.nova { background: var(--heat); }
.feed time { white-space: nowrap; }
.grafico { width: 100%; height: auto; display: block; }
.g-barra { fill: var(--brand); opacity: .85; }
.g-rot { fill: var(--muted); font-size: 14px; }
.g-val { fill: var(--text); font-size: 13.5px; font-weight: 600; }
.metas { display: grid; gap: 14px; }

/* ================================================================ tarefas */
ul.tarefas { list-style: none; margin: 0; padding: 0; }
ul.tarefas li { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 10px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
ul.tarefas li:first-child { border-top: 0; }
ul.tarefas label { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; cursor: pointer; font-weight: 550; }
ul.tarefas input { width: 18px; height: 18px; flex: none; }
ul.tarefas li.feita label span { text-decoration: line-through; color: var(--muted); }
.tarefa-meta { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
.tarefa-quando { display: inline-flex; align-items: center; gap: 4px; }
.tarefa-quando .ico { width: 14px; height: 14px; }
.tarefa-quando.atrasada { color: var(--bad); font-weight: 650; }
.form-tarefa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
@media (min-width: 600px) { .form-tarefa { grid-template-columns: minmax(0, 1fr) 210px auto; } }

/* ================================================================ funil (Kanban) */
.funil-pagina { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .funil-pagina { height: calc(100dvh - var(--topo) - var(--s-6) - var(--s-4)); }
  .funil-pagina .pag-topo { margin-bottom: var(--s-3); }
}
.kb-topo { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.kb-topo > .campo-busca { flex: 1 1 240px; max-width: 360px; }
.kb-extras { flex: 1 1 100%; }
.kb-extras > summary { cursor: pointer; color: var(--brand); font-weight: 600; padding: 4px 2px; width: fit-content; }
.kb-filtros { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }
.kb-filtros select { width: auto; flex: 0 1 180px; }
@media (min-width: 900px) { .kb-topo > .campo-busca { flex: 0 1 300px; } .kb-extras { flex: 1 1 0; min-width: 0; } .kb-extras[open] { flex-basis: 100%; }
  .kb-extras > summary { padding: 9px 2px; } }
.kb-extras[open] { max-height: 55vh; overflow-y: auto; }
.kb-board { min-height: 360px; }
.kb-mais.btn.block { flex: none; }
.kb-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); scroll-snap-type: x proximity; align-items: stretch; flex: 1; min-height: 0; }
.kb-col {
  flex: 0 0 min(290px, 84vw); width: min(290px, 84vw); min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  max-height: calc(100dvh - var(--topo) - var(--baixo) - 190px); min-height: 200px;
}
@media (min-width: 900px) { .kb-col { max-height: none; } }
.kb-col > .esqueleto { border: 0; background: transparent; }
.kb-col.alvo { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-soft); }
.kb-col-topo { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; font-size: var(--fs-md);
  border-top: 3px solid var(--c); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2); }
.kb-col-topo b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.kb-n { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 8px; font-variant-numeric: tabular-nums; }
.kb-total { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-cards { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 10px; flex: 1; min-height: 60px; }
.kb-card {
  position: relative; display: block; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 10px 10px;
  text-decoration: none; color: var(--text); box-shadow: var(--shadow-1); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  min-width: 0; overflow: hidden; cursor: grab; transition: border-color .12s, box-shadow .12s;
}
.kb-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.kb-card.arrastando { opacity: .35; }
.kb-ghost { position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none; box-shadow: var(--shadow-3); opacity: .96; cursor: grabbing; }
.kb-card-topo { display: flex; gap: 9px; align-items: center; }
.kb-card-topo .avatar { width: 32px; height: 32px; font-size: 12px; }
.kb-card-topo .score { height: 22px; min-width: 32px; font-size: var(--fs-sm); }
.kb-card-nome { flex: 1; min-width: 0; }
.kb-card-nome b { display: block; font-size: var(--fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card-nome .small { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card .chips { margin-top: 8px; }
.kb-card-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-xs); flex-wrap: wrap; }
.kb-card-rodape .ico { width: 13px; height: 13px; }
.kb-card-rodape .badge { margin-left: auto; }
.kb-valor { font-weight: 750; color: var(--ok); font-size: var(--fs-sm); }
.kb-prazo, .kb-site { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 600; }
.kb-prazo.atrasada { color: var(--bad); }
.kb-site { color: var(--heat); }
.kb-acoes { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-2); opacity: 0; transition: opacity .1s; }
.kb-acoes .btn-ico { width: 28px; height: 28px; }
.kb-acoes .ico { width: 16px; height: 16px; }
.kb-card:hover .kb-acoes, .kb-card:focus-within .kb-acoes, .kb-card:focus-visible .kb-acoes { opacity: 1; }
@media (hover: none) { .kb-acoes { opacity: 1; position: static; box-shadow: none; background: none; justify-content: flex-end; margin-top: 6px; } }
.kb-vazio { color: var(--faint); font-size: var(--fs-sm); text-align: center; padding: 18px 6px; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.kb-mais.btn.block { margin: 0 10px 10px; width: calc(100% - 20px); min-height: 32px; font-size: var(--fs-sm); }

/* ================================================================ sites */
.linhas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av txt n" "av ind ind"; gap: 2px 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.linha:first-child { border-top: 0; }
.linha:hover { background: var(--surface-2); }
.linha > .avatar { grid-area: av; }
.linha-txt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; }
.linha-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.linha > .chip.etapa { display: none; }
.linha-ind { grid-area: ind; min-width: 0; }
.linha-ind .site-ind { margin: 0; }
.linha-n { grid-area: n; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-xs); color: var(--muted); min-width: 56px; }
.linha-n b { font-size: var(--fs-xl); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.linha-n.quente b { color: var(--heat); }
@media (min-width: 900px) {
  .linha { grid-template-columns: 40px minmax(200px, 1.2fr) 160px minmax(0, 2fr) 80px; grid-template-areas: "av txt st ind n"; }
  .linha > .chip.etapa { display: inline-flex; grid-area: st; justify-self: start; }
}

/* ================================================================ fluxos e ajustes */
.fluxo.inativo { opacity: .72; }
.fluxo-passos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; align-items: center; }
.passo-f { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-3); font-weight: 550; }
.passo-f .ico { width: 14px; height: 14px; }
.passo-f.gatilho { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.passo-f.acao { background: var(--ok-bg); color: var(--ok); }
.passo-edit { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 8px; background: var(--surface-2); }
.passo-edit select[multiple] { min-height: 120px; }
.etapa-linha, .tag-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.etapa-linha input[type=color], .tag-linha input[type=color] { width: 42px; height: 38px; padding: 3px; flex: none; }
.etapa-linha input[type=text] { flex: 1 1 160px; width: auto; }
.etapa-linha select { width: auto; flex: 0 0 130px; }
.tag-linha input[type=text] { flex: 1 1 130px; width: auto; }
.tag-linha select { width: auto; flex: 0 1 180px; }

/* ================================================================ modais */
.wa-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(8, 11, 20, .86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wa-lightbox > img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.wa-lightbox.modal { background: rgba(8, 11, 20, .5); backdrop-filter: blur(2px); animation: aparece .15s ease-out; }
.wa-previa { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; margin: 0; box-shadow: var(--shadow-3); }
.wa-previa > h2, .wa-previa > b { display: block; margin-bottom: 8px; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -6px var(--s-4) 0; }
.modal-topo h2 { margin: 0; }
.wa-previa .btnrow { margin-top: var(--s-2); }
@keyframes aparece { from { opacity: 0; } }
.atalhos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: var(--fs-md); align-items: center; }
.atalhos dt { display: flex; gap: 4px; }
.atalhos dd { margin: 0; color: var(--muted); }

/* ================================================================ log do WhatsApp */
.timeline { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: var(--fs-xs); }
.passo { color: var(--faint); }
.passo.ok { color: var(--ok); font-weight: 600; }
.passo.lido { color: var(--wa-blue); font-weight: 700; }
.passo.falha { color: var(--bad); font-weight: 700; }
.erro-box { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bad-bg); color: var(--bad); font-size: var(--fs-sm); }
.erro-box .muted { color: var(--bad); opacity: .85; }
.logitem { padding: var(--s-4); margin-bottom: var(--s-2); }
.logitem.destaque { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.logitem.falhou { border-left: 3px solid var(--bad); }
.logcorpo { margin-top: 6px; max-height: 6.5em; overflow: hidden; color: var(--text); }
.evento { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); }
.evento summary { cursor: pointer; font-size: var(--fs-sm); overflow-wrap: anywhere; }
pre.json { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; max-height: 360px; overflow: auto; margin: 8px 0 0; padding: 10px; background: var(--surface-2); border-radius: var(--r-md); }
.loglink { color: inherit; }
details.card > summary { cursor: pointer; font-weight: 650; }

/* ================================================================ Conversas (WhatsApp Web) */
body.modo-wa { overflow: hidden; }
body.modo-wa main { padding: 0; }
.wa-app {
  position: fixed; top: calc(var(--topo) + env(safe-area-inset-top)); left: var(--lado); right: 0; bottom: var(--baixo);
  display: grid; grid-template-columns: minmax(0, 1fr); background: var(--wa-panel); color: var(--wa-txt); transition: left .18s ease;
}
body.wa-chat-aberto { --baixo: 0px; }
body.wa-chat-aberto .tabbar { display: none; }
.wa-lista, .wa-chat, .wa-info { min-width: 0; min-height: 0; }
.wa-lista { display: flex; flex-direction: column; background: var(--wa-panel); border-right: 1px solid var(--wa-line); }
.wa-chat, .wa-info { display: none; }
.wa-app.com-chat .wa-lista { display: none; }
.wa-app.com-chat .wa-chat { display: flex; }
.wa-app.com-chat.com-info .wa-info { display: block; position: fixed; inset: calc(var(--topo) + env(safe-area-inset-top)) 0 0 0; z-index: 5; }
.wa-lista-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 8px 16px; }
.wa-lista-top h1 { font-size: var(--fs-xl); }
.wa-top-acoes { display: flex; gap: 2px; align-items: center; }
.wa-top-acoes .btn-ico { color: var(--wa-meta); }
.wa-extra { padding: 0 12px; }
.wa-extra .card { margin: 6px 0; padding: var(--s-3); }
.wa-extra .card h2 { font-size: var(--fs-md); margin-bottom: 6px; }
.wa-extra .banner { margin: 4px 0 6px; }
.wa-busca-box { padding: 4px 12px 6px; }
.wa-busca-box .campo-busca input { background: var(--wa-panel2); border-color: transparent; min-height: 36px; border-radius: 8px; }
.wa-busca-box .campo-busca input:focus { background: var(--wa-panel); border-color: var(--wa-green); box-shadow: none; }
.wa-filtros { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; flex: none; scrollbar-width: none; }
.wa-filtros .minichip { background: var(--wa-panel2); border-color: transparent; color: var(--wa-meta); }
.wa-filtros .minichip.active { background: color-mix(in srgb, var(--wa-green) 18%, transparent); color: var(--wa-green); border-color: transparent; font-weight: 650; }
.wa-itens { overflow-y: auto; flex: 1; border-top: 1px solid var(--wa-line); }
.wa-item { display: flex; gap: 12px; align-items: center; padding: 0 0 0 14px; text-decoration: none; color: inherit; height: 72px; }
.wa-item-txt { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 14px; border-bottom: 1px solid var(--wa-line); }
.wa-item:hover { background: var(--wa-panel2); }
.wa-item.ativo { background: var(--wa-panel2); }
.wa-item .avatar { width: 48px; height: 48px; }
.wa-item-l1, .wa-item-l2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa-item-l1 b { font-weight: 550; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-hora { font-size: 12px; color: var(--wa-meta); flex: none; }
.wa-hora.nova { color: var(--wa-green); font-weight: 650; }
.wa-prev { font-size: 13.5px; color: var(--wa-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-janela { color: var(--wa-green); font-size: 10px; }
.wa-item .badge, .wa-chat .badge { background: var(--wa-green); color: #fff; }
.wa-itens .vazio { padding-top: 48px; }

.wa-chat { flex-direction: column; background: var(--wa-bg); min-width: 0; }
.wa-vazio { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--wa-panel2);
  border-bottom: 6px solid var(--wa-green); }
.wa-vazio-in { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wa-vazio-in h2 { font-size: 26px; font-weight: 300; color: var(--wa-txt); letter-spacing: -.01em; }
.wa-vazio-in p { margin: 0; color: var(--wa-meta); font-size: var(--fs-md); }
.wa-vazio-ico { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--wa-green) 14%, transparent); color: var(--wa-green); margin-bottom: 8px; }
.wa-vazio-ico .ico { width: 40px; height: 40px; stroke-width: 1.4; }
.wa-head { display: flex; align-items: center; gap: 6px; height: 60px; padding: 0 12px 0 8px; background: var(--wa-panel2); border-bottom: 1px solid var(--wa-line); flex: none; }
.wa-head-quem { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: none; padding: 4px; border-radius: var(--r-md); text-align: left; color: inherit; }
.wa-head-quem:disabled { cursor: default; }
.wa-head .avatar { width: 40px; height: 40px; }
.wa-head-txt { display: flex; flex-direction: column; min-width: 0; }
.wa-head-txt b { font-weight: 550; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-estado { font-size: 12.5px; color: var(--wa-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-estado.aberta { color: var(--wa-green); }
.wa-head-acoes { display: flex; gap: 2px; }
.wa-head .btn-ico { color: var(--wa-meta); }
.wa-head .btn-ico:hover { background: color-mix(in srgb, var(--wa-meta) 16%, transparent); color: var(--wa-txt); }
.wa-head .btn-ico.ativo { color: var(--wa-green); background: color-mix(in srgb, var(--wa-green) 14%, transparent); }
.wa-voltar { margin-right: -4px; }
.wa-msgs-wrap { position: relative; flex: 1; min-height: 0; }
.wa-msgs { position: absolute; inset: 0; overflow-y: auto; padding: 16px 7% 20px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--wa-bg);
  background-image: radial-gradient(var(--wa-dots) 1.2px, transparent 1.6px), radial-gradient(var(--wa-dots) 1.2px, transparent 1.6px);
  background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.wa-dia { align-self: center; margin: 10px 0 8px; position: sticky; top: 4px; z-index: 1; }
.wa-dia span { background: var(--wa-panel); color: var(--wa-meta); font-size: 12px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-linha { display: flex; margin: 1px 0; }
.wa-linha.out { justify-content: flex-end; }
.wa-linha.in + .wa-linha.out, .wa-linha.out + .wa-linha.in { margin-top: 8px; }
.wa-bolha { max-width: min(72%, 600px); padding: 6px 8px 4px 9px; border-radius: 8px; background: var(--wa-in); color: var(--wa-txt);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); position: relative; font-size: 14.2px; line-height: 1.42; overflow-wrap: anywhere; }
.wa-bolha.out { background: var(--wa-out); }
.wa-linha.in:not(.in + .in) .wa-bolha { border-top-left-radius: 0; }
.wa-linha.out:not(.out + .out) .wa-bolha { border-top-right-radius: 0; }
.wa-bolha.modelo { border: 1px dashed var(--wa-meta); }
.wa-txt { white-space: pre-wrap; }
.wa-txt a, .wa-doc { color: var(--wa-blue); }
.wa-meta { font-size: 11px; color: var(--wa-meta); text-align: right; margin-top: 2px; white-space: nowrap; }
.wa-meta .loglink { color: inherit; text-decoration: none; }
.tk { letter-spacing: -3px; margin-left: 3px; }
.tk.read { color: var(--wa-blue); }
.tk.failed { color: #e5534b; letter-spacing: 0; font-weight: 800; }
.wa-item-l2 .tk { margin-left: 0; margin-right: 4px; }
.wa-img { display: block; max-width: 100%; max-height: 320px; border-radius: 6px; cursor: zoom-in; margin-bottom: 4px; }
.wa-sticker { width: 140px; height: 140px; object-fit: contain; cursor: zoom-in; }
.wa-bolha audio { width: 260px; max-width: 100%; display: block; }
.wa-doc { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; text-decoration: none; }
.wa-midia-off { font-size: 13px; color: var(--wa-meta); font-style: italic; }
.wa-modelo { font-size: 13.5px; }
.wa-citada { border-left: 4px solid var(--wa-green); background: rgba(0, 0, 0, .05); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; font-size: 13px; }
.wa-citada.out { border-left-color: var(--wa-blue); }
.wa-citada div { color: var(--wa-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.wa-reacoes { position: absolute; bottom: -12px; right: 8px; background: var(--wa-panel); border-radius: 12px; padding: 0 5px; font-size: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wa-bolha:has(.wa-reacoes) { margin-bottom: 12px; }
.nota-teste { font-size: 11px; font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.erro-msg { font-size: 12px; color: var(--bad); margin-top: 4px; }
.wa-pular { position: absolute; right: 18px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 20px; padding: 8px 14px;
  background: var(--wa-panel); color: var(--wa-green); font-weight: 650; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.wa-composer { flex: none; background: var(--wa-panel2); padding: 8px 12px max(10px, env(safe-area-inset-bottom)); position: relative; border-top: 1px solid var(--wa-line); }
.wa-teste { display: inline-flex; font-size: 11.5px; font-weight: 700; color: var(--warn); background: var(--warn-bg); padding: 3px 8px; border-radius: 6px; margin: 0 0 6px; }
.wa-rapidas { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.wa-rapidas .minichip { background: var(--wa-panel); border-color: var(--wa-line); color: var(--wa-txt); }
.wa-rapidas .minichip:first-child:not(:disabled) { color: var(--wa-green); border-color: color-mix(in srgb, var(--wa-green) 40%, transparent); font-weight: 650; }
.wa-linha-comp { display: flex; align-items: flex-end; gap: 4px; }
.wa-ico { display: grid; place-items: center; width: 42px; height: 42px; background: none; border: 0; border-radius: 50%; color: var(--wa-meta); flex: none; }
.wa-ico:hover { background: color-mix(in srgb, var(--wa-meta) 14%, transparent); }
.wa-ico .ico { width: 23px; height: 23px; }
.wa-input { flex: 1; min-height: 42px !important; max-height: 140px; resize: none; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
  background: var(--wa-panel) !important; color: var(--wa-txt) !important; padding: 10px 14px !important; font-size: 15px !important; line-height: 1.4; }
.wa-enviar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--wa-green); color: #fff; }
.wa-enviar .ico { width: 20px; height: 20px; }
.wa-pop { position: absolute; left: 12px; right: 12px; bottom: 100%; background: var(--wa-panel); border: 1px solid var(--wa-line); color: var(--wa-txt);
  border-radius: 12px; box-shadow: 0 -6px 24px rgba(0, 0, 0, .16); max-height: 260px; overflow-y: auto; z-index: 4; padding: 4px; }
.wa-pop > button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; color: inherit; border-radius: 8px; }
.wa-pop > button:hover, .wa-pop > button:focus-visible { background: var(--wa-panel2); }
.wa-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 8px; }
.wa-emojis > button { text-align: center; font-size: 22px; padding: 6px 0; }
.wa-fechada { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-md); color: var(--wa-meta); padding: 4px 2px; }
.wa-fechada > span { display: flex; align-items: center; gap: 8px; }
.wa-fechada-acoes { display: flex; gap: 8px; }
.wa-fechada-acoes select { flex: 1; background-color: var(--wa-panel); }
.wa-info { background: var(--wa-panel); border-left: 1px solid var(--wa-line); overflow-y: auto; }
.wa-info-in { padding: 16px 18px 24px; }
.wa-info-topo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--wa-line); }
.wa-info-topo > b { font-size: var(--fs-lg); margin-top: 6px; }
.wa-info-topo .chips { justify-content: center; }
.wa-info-fechar { align-self: flex-end; margin-bottom: -20px; }
.wa-info h2 { font-size: var(--fs-md); margin: 18px 0 8px; }
.wa-info .kv { grid-template-columns: 100px minmax(0, 1fr); margin-top: 12px; font-size: var(--fs-sm); }
.wa-info .tags-editor { justify-content: center; }
@media (min-width: 900px) {
  .wa-app { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .wa-app .wa-chat, .wa-app.com-chat .wa-chat { display: flex; }
  .wa-app .wa-lista, .wa-app.com-chat .wa-lista { display: flex; }
  .wa-app.com-chat.com-info { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) 340px; }
  .wa-app.com-chat.com-info .wa-info { position: static; display: block; }
  .wa-voltar, .wa-info-fechar { display: none !important; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .wa-app.com-chat.com-info { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .wa-msgs { padding-left: 4%; padding-right: 4%; }
}
@media (max-width: 899px) { .wa-head-acoes a[target] { display: none; } .wa-bolha { max-width: 86%; } .wa-msgs { padding: 12px 10px 16px; } }


/* ================================================================ vendas: empresa, contatos, negócios */
.btn.perigo, .btn.ghost.perigo { color: var(--bad); }
.rotulo-campo { display: block; font-size: var(--fs-sm); font-weight: 550; color: var(--muted); margin-bottom: 5px; }
.linha-form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.linha-form > input { flex: 1 1 180px; width: auto; }
.empresa { margin-top: var(--s-2); }
.empresa-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.empresa-nome { display: flex; flex-direction: column; min-width: 0; }
.empresa-nome b { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.empresa.vazia { padding: var(--s-3); border: 1px dashed var(--line-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-2); }
.empresa.vazia > p { margin: 0; }
.candidatos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.candidatos li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); background: var(--brand-soft); }
.candidatos .cnpj { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.candidatos .btn { margin-left: auto; }
.socios, .trocar-cnpj { margin-top: var(--s-3); }
.socios summary, .trocar-cnpj summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--muted); width: fit-content; }
.socios[open] summary, .trocar-cnpj[open] summary { margin-bottom: 8px; }
.contatos { list-style: none; margin: 0; padding: 0; }
.contatos li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.contatos li:first-child { border-top: 0; }
.contatos li.destino .contato-num b { color: var(--ok); }
.contato-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contato-num b { font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.contato-num .chips { margin: 0; }
.contato-acoes { display: flex; gap: 4px; align-items: center; }
.form-contato { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 560px) { .form-contato { grid-template-columns: minmax(140px, 1fr) 110px minmax(120px, 1fr) auto; } }
.negocios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.negocio { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); background: var(--surface-2); }
.negocio-topo { display: flex; justify-content: space-between; gap: var(--s-2); align-items: flex-start; }
.negocio-nome { display: flex; flex-direction: column; min-width: 0; }
.negocio-nome b { overflow-wrap: anywhere; }
.negocio-valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--s-3) 0; }
@media (min-width: 520px) { .negocio-valores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.negocio-valores div { display: flex; flex-direction: column; }
.negocio-valores span { font-size: var(--fs-xs); color: var(--muted); }
.negocio-valores b { font-variant-numeric: tabular-nums; }
.negocio-form { border: 1px solid var(--brand); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface); margin-bottom: var(--s-3); box-shadow: 0 0 0 3px var(--brand-soft); }
.status-neg { display: flex; flex-wrap: wrap; margin-bottom: var(--s-3); }
.status-neg .seg { padding: 6px 10px; font-size: var(--fs-sm); }
.requisitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.anexos .linha-form { margin-top: 6px; }
.anexos ul { margin-bottom: 4px; }

/* modo prospecção */
.mp { max-width: 880px; margin: 0 auto; }
.mp .banner { margin-bottom: var(--s-2); }
.mp-topo { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--s-4); margin-top: var(--s-3); }
.mp-prog { flex: 1 1 320px; min-width: 0; }
.mp-prog-txt b { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mp-prog-txt span { color: var(--muted); }
.mp-prog .bar { margin: 6px 0 8px; }
.mp-prog .bar > span { background: var(--brand); }
.mp-cont { display: flex; gap: 14px; flex-wrap: wrap; }
.mp-filtros { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mp-filtros select { width: auto; min-width: 150px; }
.mp-card { padding: var(--s-6); }
.mp-card.quente { border-color: color-mix(in srgb, var(--heat) 45%, var(--line)); box-shadow: 0 0 0 3px var(--heat-soft), var(--shadow-1); }
.mp-lead { display: flex; align-items: center; gap: var(--s-4); }
.mp-lead .avatar.big { width: 80px; height: 80px; }
.mp-lead-txt { flex: 1; min-width: 0; }
.mp-lead-txt h2 { font-size: 24px; font-weight: 750; overflow-wrap: anywhere; }
.mp-lead-txt .lead-sub a { color: var(--muted); font-weight: 600; }
.mp-quente { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); padding: 10px 12px; border-radius: var(--r-md); background: var(--heat-soft); color: var(--heat); font-weight: 650; }
.mp-motivos { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--muted); }
.mp-motivos li.sub { color: var(--faint); }
.mp-links { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-top: var(--s-3); }
.mp-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.mp-acao { min-height: 52px; font-size: var(--fs-lg); justify-content: center; }
.mp-acao kbd { margin-left: 6px; }
.mp-acao.wa kbd, .mp-acao.primary kbd { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.mp-acao.ghost { border-color: var(--line-2); background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.mp-acoes .mp-acao:first-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .mp-acoes { grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr; }
  .mp-acoes .mp-acao:first-child { grid-column: auto; }
}
@media (max-width: 699px) {
  .mp-acoes { position: sticky; bottom: var(--baixo); z-index: 3; background: var(--surface); margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--r-lg) var(--r-lg); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mp-acoes .mp-acao { min-height: 46px; font-size: var(--fs-sm); padding: 6px; flex-direction: column; gap: 2px; }
  .mp-acoes .mp-acao .ico { width: 18px; height: 18px; }
  .mp-filtros select { flex: 1 1 40%; min-width: 0; }
  .mp-acoes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px var(--s-3); }
  .mp-acoes .mp-acao:first-child { grid-column: auto; }
  .mp-acoes .btn { min-height: 48px; padding: 4px 2px; font-size: 11px; line-height: 1.1; white-space: normal; flex-direction: column; gap: 2px; }
  .mp-acoes kbd { display: none; }
  .mp-card { padding-bottom: calc(var(--s-4) + 8px); }
  .mp-acao kbd { display: none; } .mp-card { padding: var(--s-4); } .mp-lead .avatar.big { width: 64px; height: 64px; } .mp-lead-txt h2 { font-size: 20px; } }
.mp-prox { margin: var(--s-3) 0 0; text-align: right; }

/* prospecção: fila de CNPJ */
.fila-cnpj:empty { display: none; }

/* início: receita, campanha, nichos */
.banner-acao { align-items: center; margin-bottom: var(--s-4); }
.banner-acao > span { flex: 1; }
.banner-acao .btn { margin-left: auto; }
@media (min-width: 1200px) { .kpis-linha.receita { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpis-linha.receita .kpi-valor { font-size: 24px; }
.nichos-mini { display: flex; flex-direction: column; gap: 2px; }
.nicho-linha { display: grid; grid-template-columns: minmax(80px, 1.3fr) minmax(0, 1fr) 44px 68px; align-items: center; gap: 10px; padding: 5px 2px; font-size: var(--fs-sm); }
.fb-trilho.duplo { position: relative; }
.fb-trilho.duplo .fb-barra { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--brand) 30%, var(--surface-3)); }
.fb-trilho.duplo .fb-barra.andamento { background: var(--brand); }
.legenda { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 30%, var(--surface-3)); }
.leg.b { background: var(--brand); margin-left: 8px; }

/* ajustes */
.aj-nav { position: sticky; top: calc(var(--topo) + env(safe-area-inset-top)); z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; margin: -8px 0 var(--s-3);
  background: var(--bg); scrollbar-width: none; }
.aj-nav a { flex: none; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
.aj-nav a:hover { color: var(--text); border-color: var(--line-2); }
.ajustes .card { scroll-margin-top: calc(var(--topo) + 64px); }
.tabela-wrap.plana { box-shadow: none; }
.tabela.editavel td { padding: 6px 8px; }
.tabela.editavel tbody tr { cursor: default; }
.tabela.editavel tbody tr:hover { background: transparent; }
.tabela.editavel input, .tabela.editavel select { min-height: 34px; padding-top: 5px; padding-bottom: 5px; min-width: 90px; }
.tabela.editavel td:first-child input { min-width: 200px; }
.tabela .centro { text-align: center; }
.limites { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* ================================================================ movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ================================================================ leads quentes (topo do "Faça agora") */
.quentes { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quente-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--heat) 45%, var(--line)); background: var(--heat-soft);
  animation: pulsa-quente 1.6s ease-out 2; }
.quente-ico { color: var(--heat); display: inline-flex; }
.quente-item .avatar { width: 36px; height: 36px; }
.quente-txt { min-width: 0; display: flex; flex-direction: column; }
.quente-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quente-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.quentes { container-type: inline-size; }
@container (min-width: 620px) { .quente-item { grid-template-columns: auto auto minmax(0, 1fr) auto; } .quente-acoes { grid-column: auto; } }
@keyframes pulsa-quente { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--heat) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .quente-item { animation: none; } }

/* ================================================================ demo: cartão e prévia no celular */
.demo-card { display: flex; flex-direction: column; gap: 8px; }
.demo-og-btn { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); overflow: hidden; }
.demo-og { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--surface-2); border-radius: var(--r-md); }
.demo-link { display: flex; align-items: center; gap: 6px; min-width: 0; }
.demo-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-card { container-type: inline-size; }
.demo-acoes { display: flex; flex-direction: column; gap: 6px; }
.demo-acoes .btn { width: 100%; }
.demo-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.demo-sec .btn { padding-inline: 4px; gap: 4px; min-width: 0; font-size: 12.5px; }
.demo-sec .btn .ico { width: 15px; height: 15px; }
@container (max-width: 205px) { .demo-sec .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.vazio-demo { flex-direction: row; align-items: center; color: var(--muted); }
.previa-demo { display: flex; flex-direction: column; gap: 10px; max-height: 100%; align-items: center; }
.previa-demo .modal-topo { width: min(420px, 100%); margin: 0; color: #fff; }
.previa-demo .modal-topo .btn, .previa-demo .modal-topo .btn-ico { color: #fff; }
.previa-demo .muted { color: rgba(255, 255, 255, .7); text-align: center; }
.celular { width: 390px; max-width: 100%; height: min(780px, calc(100dvh - 140px)); border-radius: 28px; border: 10px solid #111;
  overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.celular iframe { width: 100%; height: 100%; border: 0; display: block; }
.wa-previa.largo { width: min(640px, 100%); }
.msg-opcoes { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.msg-grupo h3 { font-size: 12.5px; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.modal-texto { width: 100%; min-height: 120px; }

/* ================================================================ objeções no chat */
.obj-pop { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.obj-grupo h4 { margin: 8px 8px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-meta, var(--muted)); }
.obj-pop .obj-grupo > button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; color: inherit;
  border-radius: 8px; font-size: 13.5px; line-height: 1.35; }
.obj-pop .obj-grupo > button:hover, .obj-pop .obj-grupo > button:focus-visible { background: var(--wa-panel2); }

/* ================================================================ proposta no negócio */
.proposta-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  margin: 8px 0; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line); }
.proposta-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proposta-info b, .proposta-linha > span { display: inline-flex; align-items: center; gap: 6px; }
.chip.quente { background: var(--heat-soft); color: var(--heat); border-color: color-mix(in srgb, var(--heat) 40%, transparent); }
.versoes { flex-basis: 100%; font-size: 13px; }
.objecao-linha { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }

/* ================================================================ modo prospecção: meta, sequência e ritmo */
.mp-meta { display: flex; flex-direction: column; gap: 8px; }
.mp-meta-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mp-hoje { font-variant-numeric: tabular-nums; line-height: 1; }
.mp-hoje b { font-size: 36px; letter-spacing: -.02em; }
.mp-hoje span { font-size: 18px; color: var(--muted); }
.mp-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-selos .chip { display: inline-flex; align-items: center; gap: 4px; }
.mp-ritmo { color: var(--muted); }
.mp-ritmo.ok { color: var(--ok); font-weight: 650; }
.bar.completa > span { background: var(--ok); }
.mp-grafico { width: 100%; max-width: 360px; height: auto; display: block; }
.mp-barra { fill: color-mix(in srgb, var(--brand) 35%, var(--surface-2)); }
.mp-barra.bateu { fill: var(--ok); }
.mp-barra.hoje { stroke: var(--brand); stroke-width: 1.5; }
.mp-meta-linha { stroke: var(--heat); stroke-dasharray: 3 3; stroke-width: 1; }
.mp-eixo { fill: var(--muted); font-size: 9px; }

/* ================================================================ lead: área de trabalho */
.lead-ws { display: flex; flex-direction: column; gap: var(--s-4); }
.lw-head { position: sticky; top: calc(var(--topo) + env(safe-area-inset-top)); z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px; box-shadow: var(--shadow-1); }
.lw-id { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; }
.lw-id .avatar { width: 48px; height: 48px; flex: none; }
.lw-nome { min-width: 0; flex: 1; }
.lw-nome h1 { margin: 0; font-size: var(--fs-lg); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-nome .lead-sub { font-size: var(--fs-sm, 13px); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-voltar { flex: none; }
.lw-salvo { font-size: 12px; color: var(--ok); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.lw-salvo.visivel { opacity: 1; }
.lw-salvo.erro { color: var(--bad); }
.lw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lw-meta select { width: auto; min-width: 0; max-width: 200px; }
.lw-tags { min-width: 0; }
.lw-acoes { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-width: 0; }
.lw-acoes .btn { flex: none; }
.lw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.lw-resumo, .lw-lado { display: none; }
.lw-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.lw-col > .card { margin: 0; }
.lw-centro { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lw-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.lw-abas::-webkit-scrollbar { display: none; }
.lw-aba { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; font-weight: 550; white-space: nowrap; cursor: pointer; }
.lw-aba .ico { width: 17px; height: 17px; }
.lw-aba:hover { color: var(--text); }
.lw-aba.ativa { color: var(--brand); border-bottom-color: var(--brand); }
.lw-aba .badge { margin-left: 2px; }
.lw-painel { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.lw-painel > .card, .lw-site > .card, .lw-notas > .card { margin: 0; }
.lw-site, .lw-notas, .lw-resumo-movel { display: flex; flex-direction: column; gap: var(--s-4); }
.lw-chat { display: flex; flex-direction: column; height: min(72vh, 760px); min-height: 420px; border-radius: var(--r-lg, 14px); overflow: hidden; border: 1px solid var(--line); }
.lw-chat .wa-head { height: 52px; }
.lw-contatos { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lw-contatos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lw-fone { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lw-fone .ico { width: 16px; height: 16px; color: var(--muted); }
.lw-empresa { display: flex; flex-direction: column; gap: 4px; }
.lw-filtros { margin-bottom: 12px; }
.lw-negs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lw-neg { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.lw-neg-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.lw-neg-topo b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-neg-valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; font-size: var(--fs-sm); }
.lw-neg-valores span { color: var(--muted); }
.lw-funil .btnrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lw-funil .btnrow .btn { min-width: 0; }
.lw-proxima { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.lw-proxima h3 { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.lw-proxima .form-tarefa { margin-top: 0; }
.timeline-lead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.tl-ico .ico { width: 15px; height: 15px; }
.tl-item.mensagens .tl-ico { background: var(--wa-bg, var(--ok-bg)); color: var(--wa-green, var(--ok)); }
.tl-item.site .tl-ico { background: var(--heat-soft); color: var(--heat); }
.tl-item.propostas .tl-ico { background: var(--brand-soft); color: var(--brand); }
.tl-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tl-corpo { overflow-wrap: anywhere; white-space: pre-wrap; }
.tl-corpo.msg { background: var(--surface-2); border-radius: 10px; padding: 6px 10px; width: fit-content; max-width: 100%; }
.tl-item.entrada .tl-corpo.msg { background: var(--ok-bg); }
.import-res { margin-top: 8px; }
.txt-bad { color: var(--bad); }
.so-estreito { display: inline-flex; }
@media (max-width: 1099px) {
  .lw-head { top: calc(var(--topo) + env(safe-area-inset-top)); padding: 10px 12px; }
  .lw-meta select { max-width: 150px; }
  .lw-abas { position: sticky; top: calc(var(--topo) + env(safe-area-inset-top)); z-index: 11; background: var(--bg); }
  .lw-head { position: static; }
  .lw-chat { height: calc(100dvh - var(--topo) - var(--baixo) - 110px); min-height: 380px; }
}
@media (min-width: 1100px) {
  .lw-grid { grid-template-columns: 270px minmax(0, 1fr); }
  .lw-resumo { grid-column: 1; grid-row: 1; }
  .lw-lado { grid-column: 1; grid-row: 2; }
  .lw-centro { grid-column: 2; grid-row: 1 / span 2; }
  .lw-resumo, .lw-lado { display: block; }
  .so-estreito { display: none; }
  .lw-contatos li { flex-wrap: wrap; }
}
@media (min-width: 1400px) {
  .lw-grid { grid-template-columns: 260px minmax(0, 1fr) 280px; }
  .lw-lado { grid-column: 3; grid-row: 1; }
  .lw-centro { grid-row: 1; }
  .lw-resumo, .lw-lado { position: sticky; top: calc(var(--topo) + 130px); max-height: calc(100vh - var(--topo) - 150px); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 1100px) and (max-width: 1699px) { .lw-aba { padding: 10px 8px; font-size: 13.5px; } .lw-aba .ico { display: none; } }
@media (min-width: 1700px) { .lw-grid { grid-template-columns: 300px minmax(0, 1fr) 330px; } }

/* ================================================================ controles próprios (ui.js) */
.ui-nativo { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-sel, .ui-data { position: relative; display: inline-flex; width: 100%; min-width: 0; vertical-align: middle; }
.ui-sel-btn { width: 100%; min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 11px; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: var(--fs-md); cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
.ui-sel-btn:hover { border-color: var(--faint); }
.ui-sel-btn:focus-visible, .ui-sel.aberto .ui-sel-btn { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.ui-sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-sel-btn.ui-placeholder .ui-sel-txt { color: var(--muted); }
.ui-sel-btn[aria-invalid=true] { border-color: var(--bad); }
.ui-sel-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-seta { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ui-sel.aberto .ui-seta { transform: rotate(180deg); }
.ui-sel-btn[style*="--c"] { border-color: color-mix(in srgb, var(--c) 55%, var(--line-2)); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.ui-camada { position: fixed; z-index: 95; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; max-width: min(420px, calc(100vw - 16px)); animation: ui-in .12s ease-out; }
@keyframes ui-in { from { opacity: 0; transform: translateY(-4px); } }
.ui-painel-sel .ui-lista { overflow-y: auto; overscroll-behavior: contain; padding: 4px; outline: none; flex: 1; min-height: 0; }
.ui-filtro { margin: 6px 6px 2px; width: auto !important; min-height: 34px !important; }
.ui-op { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: var(--fs-md); line-height: 1.3; }
.ui-op.ui-foco { background: var(--surface-3); }
.ui-op.ui-on { color: var(--brand); font-weight: 600; }
.ui-op.ui-vazio .ui-op-txt { color: var(--muted); }
.ui-op[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.ui-marca { width: 16px; height: 16px; flex: none; background: center / 14px no-repeat; }
.ui-op.ui-on .ui-marca { background-color: var(--brand); border-radius: 4px; background-image: var(--ui-check); }
.ui-multi + .ui-camada .ui-marca, .ui-camada [aria-multiselectable] .ui-marca { border: 1.5px solid var(--line-2); border-radius: 4px; }
.ui-lista[aria-multiselectable] .ui-op.ui-on .ui-marca { border-color: var(--brand); }
.ui-grupo-rot { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ui-nada { padding: 12px; color: var(--muted); font-size: var(--fs-sm); }
.ui-fundo { position: fixed; inset: 0; z-index: 94; background: rgba(8, 11, 20, .5); animation: ui-fade .15s; }
@keyframes ui-fade { from { opacity: 0; } }
.ui-camada.ui-folha { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; max-height: 72vh !important; min-width: 0 !important;
  border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: ui-sobe .18s ease-out; }
@keyframes ui-sobe { from { transform: translateY(40px); opacity: .4; } }
.ui-folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: var(--fs-lg); }
.ui-ok { border: 0; background: var(--brand); color: var(--brand-ink); border-radius: var(--r-md); padding: 6px 14px; font-weight: 600; }
.ui-folha .ui-op { padding: 13px 12px; font-size: 16px; }
.ui-folha .ui-filtro { margin: 0 12px 6px; font-size: 16px; }
/* data */
.ui-data { align-items: stretch; border-radius: var(--r-md); }
.ui-data .ui-data-txt { flex: 1; min-width: 0; padding-right: 40px; font-variant-numeric: tabular-nums; }
.ui-data.com-hora .ui-data-txt { padding-right: 11px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-data .ui-hora-txt { width: 88px; flex: none; padding-right: 40px; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; font-variant-numeric: tabular-nums; }
.ui-data.invalido input[type=text] { border-color: var(--bad); }
.ui-cal-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.ui-cal-btn:hover, .ui-cal-btn[aria-expanded=true] { background: var(--surface-3); color: var(--text); }
.ui-cal-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ui-cal-btn svg, .ui-cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-cal { padding: 10px; width: 292px; }
.ui-cal.ui-folha { width: auto; padding: 12px 16px 16px; }
.ui-cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.ui-cal-tit { margin: 0; font-size: var(--fs-md); font-weight: 650; text-transform: capitalize; }
.ui-cal-nav { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.ui-cal-nav:hover { background: var(--surface-3); }
.ui-grade { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-grade th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding: 4px 0; text-align: center; }
.ui-grade td { padding: 1px; text-align: center; }
.ui-dia { width: 100%; aspect-ratio: 1; max-height: 40px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.ui-dia:hover { background: var(--surface-3); }
.ui-dia.ui-fora { color: var(--faint); }
.ui-dia.ui-hoje { box-shadow: inset 0 0 0 1.5px var(--brand); }
.ui-dia.ui-on { background: var(--brand); color: var(--brand-ink); font-weight: 650; }
.ui-dia:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ui-dia:disabled { opacity: .3; cursor: not-allowed; }
.ui-cal-rodape { display: flex; justify-content: space-between; margin-top: 2px; }
.ui-cal-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ui-cal-atalhos .ui-cal-acao { background: var(--surface-2); text-align: center; }
.ui-cal-acao:disabled { opacity: .45; cursor: not-allowed; }
.ui-data-atalhos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ui-atalho { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 550;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ui-atalho:hover { border-color: var(--brand); color: var(--brand); }
.ui-menu { display: flex; flex-direction: column; padding: 4px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.18)); overflow-y: auto; }
.ui-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--text);
  font: inherit; font-weight: 550; text-align: left; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--surface-3); outline: none; }
.ui-menu-item .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ui-menu-item.perigo, .ui-menu-item.perigo .ico { color: var(--bad); }
.ui-folha.ui-menu { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.ui-folha .ui-menu-item { padding: 13px 12px; }
.ui-cal-acao { border: 0; background: none; color: var(--brand); font-weight: 600; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.ui-cal-acao:hover { background: var(--brand-soft); }
/* contextos que usavam select/date com largura automática */
.check-inline .ui-sel, .check-inline .ui-data, .kb-filtros .ui-sel, .lw-meta .ui-sel, .etapa-linha .ui-sel, .tag-linha .ui-sel, .mp-filtros .ui-sel { width: auto; }
.check-inline .ui-sel-btn, .check-inline .ui-data input, .tabela.editavel .ui-sel-btn, .tabela.editavel .ui-data input { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.check-inline .ui-data { width: 150px; }
.kb-filtros .ui-sel { flex: 0 1 180px; }
.etapa-linha .ui-sel { flex: 0 0 130px; }
.tag-linha .ui-sel { flex: 0 1 180px; }
.wa-fechada-acoes .ui-sel { flex: 1; }
.wa-fechada-acoes .ui-sel-btn { background-color: var(--wa-panel); }
.mp-filtros .ui-sel { min-width: 150px; }
.tabela.editavel .ui-sel { min-width: 90px; }
.lw-meta .ui-sel { max-width: 200px; }
@media (max-width: 1099px) { .lw-meta .ui-sel { max-width: 150px; } }
@media (max-width: 899px) { .mp-filtros .ui-sel { flex: 1 1 40%; min-width: 0; } .ui-sel-btn, .ui-data input { font-size: 16px; } }

/* ================================================================ preços flexíveis */
.cond { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-3); }
.cond-modelos { flex-wrap: wrap; }
.cond-dica { margin: 0; }
.cond-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.cond { container-type: inline-size; }
@container (min-width: 620px) { .cond-corpo { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); } }
.cond-campos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cond-desc { display: flex; gap: 6px; }
.cond-desc input { flex: 1; min-width: 0; }
.cond-desc .ui-sel { width: 68px; flex: none; }
.cond-previa { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--surface-2); min-height: 120px; transition: opacity .15s; }
.cond-previa.carregando { opacity: .6; }
.cond-texto { font-weight: 700; font-size: var(--fs-lg); color: var(--brand); line-height: 1.3; margin-bottom: 8px; }
.cond-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 8px; }
.cond-kpis div { display: flex; flex-direction: column; }
.cond-kpis span { font-size: var(--fs-xs); color: var(--muted); }
.cond-kpis b { font-variant-numeric: tabular-nums; }
.cond-crono { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cond-crono th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); padding: 4px 0; border-bottom: 1px solid var(--line); }
.cond-crono td:first-child { white-space: nowrap; }
.cond-crono td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cond-crono tr:last-child td { border-bottom: 0; }
.cond-crono .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.cond-crono small { color: var(--muted); margin-left: 2px; }
.planos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plano-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-2); }
.plano-item.inativo { opacity: .6; }
.plano-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plano-preco { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.negocio-preco { display: block; font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.opcoes-ed { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s-3); }
.opcoes-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opcao-ed { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px; background: var(--surface-2); }
.opcao-ed.destaque { border-color: var(--brand); }
.opcao-ed-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.opcao-ed-topo .btn-ico { margin-left: auto; }

/* ================================================================ abordagens */
.ab-filtros { display: flex; flex-direction: column; gap: 10px; }
.ab-grade { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.ab-secao h2 { font-size: var(--fs-lg); margin: 0 0 8px; }
.ab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.ab-card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ab-card h3 { margin: 0; font-size: var(--fs-md); }
.ab-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: var(--fs-sm); line-height: 1.5; flex: 1; }
.ab-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.ab-texto-rodape { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin: -6px 0 var(--s-3); }
.ab-vars .minichip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.ab-previa { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 8px 10px; white-space: pre-wrap; margin: 0 0 8px; }
.obj-pop { width: min(460px, calc(100vw - 24px)); max-height: min(60vh, 460px); overflow: hidden; display: flex; flex-direction: column; }
.obj-pop.hidden { display: none; }
.ab-painel { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; padding: 8px; }
.ab-painel input[type=search] { min-height: 34px; }
.ab-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ab-cats .minichip { flex: none; }
.ab-lista { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; min-height: 0; flex: 1; }
.ab-item { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ab-item:hover, .ab-item:focus-visible { background: var(--surface-3); outline: none; }
.ab-item-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ab-item-txt { font-size: var(--fs-sm); color: var(--muted); }
.ab-gerenciar { align-self: flex-start; margin-top: 4px; }
.ab-nada { padding: 8px; }
.wa-atalhos { display: contents; }
.obj-pop .ab-item:hover, .obj-pop .ab-item:focus-visible { background: var(--wa-panel2); }
.obj-pop .ab-item-txt, .obj-pop .muted { color: var(--wa-meta); }
.obj-pop input[type=search] { background: var(--wa-panel2); border-color: var(--wa-line); color: var(--wa-txt); }

/* ================================================================ Google Maps */
.banner .btn { margin-left: auto; flex: none; }
.maps-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 90px 130px; gap: 0 var(--s-3); }
@media (max-width: 699px) { .maps-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .maps-campos > :first-child { grid-column: 1 / -1; } }
.maps-buscas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.maps-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.maps-buscas li:last-child .maps-busca { border-bottom: 0; }
.maps-busca:hover { background: var(--surface-2); }
.maps-busca-txt { display: flex; flex-direction: column; min-width: 0; }
.maps-barra { display: flex; flex-direction: column; gap: 10px; }
.maps-barra-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.maps-barra-2 .ui-sel { width: auto; min-width: 150px; }
.maps-barra-2 .btnrow { margin-left: auto; }
.maps-lista { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.maps-res { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
.maps-res.apagado { opacity: .72; }
.maps-res-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.maps-res-topo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.maps-res-acoes { display: flex; gap: 6px; align-items: center; }
.maps-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maps-res .chip .ico { width: 13px; height: 13px; }
@media (max-width: 599px) { .maps-res { grid-template-columns: 24px minmax(0, 1fr); } .maps-res-acoes { grid-column: 2; } .maps-barra-2 .btnrow { margin-left: 0; width: 100%; } }
.wa-bloqueado { color: var(--bad); }
.wa-bloqueado .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* ================================================================ modelos da Meta */
.modelos-meta { margin: var(--s-3) 0; }
.modelos-lista li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.modelos-lista li:last-child { border-bottom: 0; }
.modelo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modelo-corpo { margin: 4px 0 0; white-space: pre-wrap; }
.bolha-previa { background: var(--wa-out); color: var(--wa-txt); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; white-space: pre-wrap; }
.bolha-previa p { margin: 0; }
.botoes-previa { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid rgba(0,0,0,.1); padding-top: 8px; }
.botao-previa { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; color: var(--wa-blue, #027eb5); font-weight: 600; text-align: center; }
.botao-previa small { flex-basis: 100%; font-weight: 400; color: var(--wa-meta); font-size: 11px; overflow-wrap: anywhere; }
.botao-previa .ico { width: 14px; height: 14px; }

/* ================================================================ decisor */
.lw-decisor { margin: -4px 0 8px; }
.lw-contatos li { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lw-contatos li:last-child { border-bottom: 0; }
.lw-contatos li.decisor .lw-fone b { color: var(--ok); }
.lw-contato-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-contato-papel { display: flex; align-items: center; gap: 6px; }
.lw-contato-papel .ui-sel { flex: 1; min-width: 0; }
.lw-contato-papel .ui-sel-btn { min-height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: var(--fs-sm); }
.mp-modelo { margin: 4px 0 0; }
.saude-uso { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.saude-uso .barra { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.saude-uso .barra span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.saude-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saude-sug { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.saude-sug .ico { width: 14px; height: 14px; }

/* ================================================================ Resultados */
.res-funil { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.res-passo-topo { display: flex; flex-direction: column; gap: 2px; }
.res-passo-topo b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.res-passo-topo span:first-child { font-size: var(--fs-xs); color: var(--muted); }
.res-barra { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.res-barra span { display: block; height: 100%; background: var(--brand); }
.res-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-tabela th[scope=row] { font-weight: 550; }
.ab-res { margin: 8px 0; }
.ab-form { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.cobrancas { border-top: 1px dashed var(--line-2); margin-top: 8px; padding-top: 8px; }
.cob-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.asaas-status code { font-size: 12px; overflow-wrap: anywhere; }
/* tarefas e campos nas colunas estreitas do lead (não vazar do cartão) */
.lw-col .form-tarefa, .lw-resumo-movel .form-tarefa { grid-template-columns: minmax(0, 1fr) !important; }
.lw-col .form-tarefa > *, .lw-col .ui-data { min-width: 0; max-width: 100%; }
.lw-col .ui-data.com-hora .ui-hora-txt { width: 84px; }
.lw-site-url a { overflow-wrap: anywhere; }

/* ================================================================ Sites segmentado */
.sites-filtros { display: flex; flex-direction: column; gap: 8px; }
.sites-filtros-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sites-filtros-linha input[type=search] { flex: 1 1 220px; width: auto; }
.sites-filtros .grid-campos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sites-ordem { display: flex; gap: 10px; align-items: center; margin: var(--s-3) 0 6px; flex-wrap: wrap; }
.sites-ordem .ativo { color: var(--brand); font-weight: 650; }
.sites-grupo { margin: 0 0 var(--s-3); padding: 0; overflow: hidden; }
.sites-grupo > summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 12px 14px; cursor: pointer; }
.sites-grupo .linhas { border-top: 1px solid var(--line); }
.seg-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-seg-box { padding: 0 12px 8px; }
.wa-seg-box .ui-sel-btn { min-height: 32px; background: var(--wa-panel2); border-color: var(--wa-line); color: var(--wa-txt); font-size: var(--fs-sm); }

/* ================================================================ painel de filtros unificado */
.pf { display: flex; flex-direction: column; gap: 10px; }
.pf-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-topo .ui-sel { width: auto; min-width: 200px; }
.pf-grade { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pf-faixa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.pf-checks { margin: 0; }
.pf-fonte { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px 4px; margin: 0; }
.pf-fonte legend { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); padding: 0 4px; }
.kb-extras .pf { margin-top: 10px; }
.mp-filtros-det { margin-top: 8px; }
.mp-filtros-det > summary { cursor: pointer; font-weight: 600; }
.mp-filtros-det .pf { margin-top: 8px; }
.wa-seg-box { display: flex; gap: 6px; }
.wa-seg-box .ui-sel { flex: 1; min-width: 0; }

/* ================================================================ aba Google do lead */
.g-nota { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.g-nota > b { font-size: var(--fs-2xl); }
.g-estrelas { color: #e3a008; letter-spacing: 1px; }
.g-hist { display: flex; flex-direction: column; gap: 4px; max-width: 360px; margin-bottom: 10px; }
.g-hist-linha { display: grid; grid-template-columns: 28px 1fr 40px; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.g-hist-barra { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.g-hist-barra span { display: block; height: 100%; background: #e3a008; }
.g-avaliacoes li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.g-avaliacoes li:last-child { border-bottom: 0; }
.g-av-topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.g-avaliacoes p { margin: 6px 0 0; }
.g-resposta { background: var(--surface-2); border-left: 3px solid var(--brand); padding: 6px 10px; border-radius: 6px; font-size: var(--fs-sm); }
.g-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.g-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-3); }
.maps-limites > summary { cursor: pointer; padding: 2px 0; }

/* ================================================================ sugestões de CNPJ */
.cnpj-sugestoes { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.sug-lista { display: flex; flex-direction: column; gap: 8px; }
.sug { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sug.destaque { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent); }
.sug-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ================================================================ busca no Instagram (coletor) */
.ig-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1000px) { .ig-topo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ig-topo > .card { margin: 0; }
.ig-form h2, .ig-coletor h2 { margin-top: 0; }
.ig-passos { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ig-token-novo { border: 1px dashed var(--brand); border-radius: var(--r-md); padding: 8px 10px; margin: 8px 0; }
.ig-token-linha { display: flex; gap: 6px; }
.ig-token-linha input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12.5px; }
.ig-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ig-job { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ig-job:last-child { border-bottom: 0; }
.ig-job.ativo { box-shadow: inset 3px 0 0 var(--brand); padding-left: 10px; }
.ig-job-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ig-bio { margin: 4px 0 0; white-space: pre-line; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-perfis .chips[role=group] { margin: 8px 0; }

/* ================================================================ site em tempo real */
.chip-agora { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--heat, #e8590c); color: #fff;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; animation: pulso-agora 2s ease-in-out infinite; }
@keyframes pulso-agora { 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .chip-agora { animation: none; } }
.lw-acesso { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-acesso .ico { width: 14px; height: 14px; flex: none; color: var(--heat, #e8590c); }
.lw-acesso.agora { color: var(--heat, #e8590c); }
.site-ind .chip-agora { margin-right: 4px; }

/* dicas de teclado não fazem sentido no toque */
@media (pointer: coarse) { .mp kbd, .um-item kbd, .busca-kbd { display: none; } }

/* tela ao vivo do worker do Instagram */
.igv { max-width: min(1060px, 96vw); }
.igv-area { margin: 10px 0; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: #000; outline: none; }
.igv-area:focus-visible { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); }
.igv-tela { display: block; width: 100%; aspect-ratio: 1000 / 760; object-fit: contain; cursor: pointer; user-select: none; }

/* dossiê */
.dos-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: var(--fs-sm); border-bottom: 1px dashed var(--line); }
.dos-linha:last-child { border-bottom: 0; }
.dos-linha > span:last-child { overflow-wrap: anywhere; }
.dos-aval { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--line-2); color: var(--muted); }
@media (max-width: 600px) { .dos-linha { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Raio-X da loja */
.raiox-linha { font-weight: 600; background: var(--surface-2); padding: 8px 12px; border-radius: var(--r-md); }
.raiox-pontos { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.raiox textarea { width: 100%; }
.raiox h3 { font-size: var(--fs-sm); margin: 12px 0 6px; color: var(--muted); }
.raiox-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.raiox-ads figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.raiox-ads img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); }
.raiox-ads figcaption { padding: 6px 8px; }
.motores .chip { margin: 0 6px 4px 0; }