/* === DESIGN TOKENS V2 (novo layout) — Fase 1 do plano 2026-04-25-145000 === */
/* Coexistem com os tokens antigos (--cor-*) sem substituí-los.              */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  --brand-hue: 155;
  --brand-fg: oklch(0.42 0.10 var(--brand-hue));
  --brand-fg-strong: oklch(0.32 0.10 var(--brand-hue));
  --brand-on-fg: oklch(0.98 0.02 var(--brand-hue));
  --brand-bg: oklch(0.96 0.04 var(--brand-hue));

  --bg: oklch(0.985 0.005 90);
  --bg-2: oklch(0.97 0.005 90);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.985 0.005 90);
  --border: oklch(0.92 0.005 90);
  --border-strong: oklch(0.86 0.005 90);
  --text: oklch(0.22 0.01 240);
  --text-dim: oklch(0.52 0.01 240);
  --text-mute: oklch(0.65 0.01 240);

  --c-blue: oklch(0.55 0.15 240);
  --c-blue-bg: oklch(0.95 0.04 240);
  --c-amber: oklch(0.65 0.15 60);
  --c-amber-bg: oklch(0.96 0.05 60);
  --c-emerald: oklch(0.55 0.13 155);
  --c-emerald-bg: oklch(0.95 0.04 155);
  --c-cyan: oklch(0.62 0.12 200);
  --c-cyan-bg: oklch(0.95 0.04 200);
  --c-yellow: oklch(0.7 0.15 90);
  --c-yellow-bg: oklch(0.97 0.05 90);
  --c-red: oklch(0.58 0.18 25);
  --c-red-bg: oklch(0.95 0.04 25);

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.04);
  --shadow-md: 0 4px 16px oklch(0.2 0.01 240 / 0.06), 0 1px 2px oklch(0.2 0.01 240 / 0.04);

  --gap: 14px;
  --pad: 16px;
  --row-h: 48px;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --bg: oklch(0.16 0.012 240);
  --bg-2: oklch(0.19 0.012 240);
  --surface: oklch(0.21 0.012 240);
  --surface-2: oklch(0.235 0.012 240);
  --border: oklch(0.28 0.012 240);
  --border-strong: oklch(0.34 0.012 240);
  --text: oklch(0.96 0.005 240);
  --text-dim: oklch(0.72 0.01 240);
  --text-mute: oklch(0.55 0.01 240);
  --brand-fg: oklch(0.78 0.12 var(--brand-hue));
  --brand-fg-strong: oklch(0.86 0.10 var(--brand-hue));
  --brand-bg: oklch(0.28 0.05 var(--brand-hue));
  --brand-on-fg: oklch(0.18 0.02 var(--brand-hue));
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
  --c-blue-bg: oklch(0.32 0.06 240);
  --c-amber-bg: oklch(0.32 0.06 60);
  --c-emerald-bg: oklch(0.30 0.06 155);
  --c-cyan-bg: oklch(0.32 0.06 200);
  --c-yellow-bg: oklch(0.34 0.06 90);
  --c-red-bg: oklch(0.32 0.06 25);
}

[data-density="compact"] { --gap: 10px; --pad: 12px; --row-h: 38px; }
[data-density="comfy"]   { --gap: 14px; --pad: 16px; --row-h: 48px; }
[data-density="roomy"]   { --gap: 20px; --pad: 22px; --row-h: 60px; }

[data-card="shadow"] .card { border-color: transparent; box-shadow: var(--shadow-md); }
[data-card="flat"] .card   { border-color: transparent; box-shadow: none; background: var(--surface-2); }

/* === HEADER V2 (Fase 2 do plano 2026-04-25-145000) === */

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ih-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 26px auto 0;
  padding: 4px 20px 18px;
  gap: 24px;
  background: transparent;
  box-shadow: none;
}
.ih-header-left { display: flex; align-items: center; gap: 14px; }
.ih-logo {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-bg);
  border-radius: 12px;
  color: var(--brand-fg);
}
.ih-header-title {
  font-weight: 600; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ih-header-sub {
  font-size: 11px; color: var(--text-mute);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; margin-top: 2px;
}
.ih-header-right { display: flex; align-items: center; gap: 18px; }

.ih-status {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 12px;
}
.ih-status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--c-emerald);
  box-shadow: 0 0 0 3px var(--c-emerald-bg);
  display: inline-block;
}
.ih-status.is-offline .ih-status-dot {
  background: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-red-bg);
}
.ih-date {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 12px;
}
.ih-date svg { color: var(--text-mute); }
.ih-user { display: inline-flex; }
.ih-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: oklch(0.92 0.06 var(--avatar-hue, 155));
  color: oklch(0.32 0.10 var(--avatar-hue, 155));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

/* Theme toggle (dark mode) */
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.theme-toggle-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 200ms, border-color 200ms;
}
.theme-toggle:hover .theme-toggle-track { border-color: var(--border-strong); }
.theme-toggle:focus-visible .theme-toggle-track {
  outline: 2px solid var(--brand-fg);
  outline-offset: 2px;
}
.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px oklch(0.2 0.01 240 / 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms, color 200ms;
}
.theme-toggle[aria-checked="true"] .theme-toggle-track {
  background: var(--brand-bg);
  border-color: var(--brand-fg);
}
.theme-toggle[aria-checked="true"] .theme-toggle-thumb {
  transform: translateX(20px);
  background: var(--brand-fg);
  color: var(--brand-on-fg);
}
.theme-icon { display: none; }
.theme-toggle[aria-checked="false"] .theme-icon-sun { display: inline; }
.theme-toggle[aria-checked="true"] .theme-icon-moon { display: inline; }

/* === FIM DO HEADER V2 === */

/* === PIPELINE / KPIs V2 (Fase 3 do plano 2026-04-25-145000) === */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad) 12px;
  gap: 16px;
}
.card-title { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.card-title h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-title svg { color: var(--brand-fg); }
.card-meta { font-size: 12px; }
.muted { color: var(--text-dim); }

.pipeline { padding-bottom: 4px; }

.kpi-grid {
  display: grid;
  gap: 10px;
  padding: 4px var(--pad) var(--pad);
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
.kpi-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex-shrink: 0;
}
.kpi-suffix { color: var(--text-mute); font-weight: 400; }
.kpi-value { display: flex; align-items: baseline; gap: 4px; }
.kpi-currency { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.kpi-num {
  font-family: var(--font-mono); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
}
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-count { font-size: 11px; color: var(--text-mute); }

/* Trend (▲ X% / ▼ X% / — 0%) */
.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  font-weight: 600; font-family: var(--font-mono);
  flex-shrink: 0;
}
.kpi-trend-zero {
  color: var(--text-dim); font-weight: 500;
}
.kpi-trend-zero::before {
  content: ""; display: inline-block; width: 8px; height: 1px;
  background: currentColor; margin-right: 4px;
}
.kpi-trend-up   { color: var(--c-emerald); }
.kpi-trend-down { color: var(--c-red); }

/* Sparkline mini-svg dentro do KPI */
.kpi-spark { overflow: visible; flex-shrink: 0; }
.kpi-spark .spark-area { fill: var(--accent-bg); }
.kpi-spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark .spark-dot  { fill: var(--accent); }

.month-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin: 0 var(--pad) var(--pad);
  padding: 14px 16px;
  background: linear-gradient(0deg, var(--brand-bg), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.month-bar-l { flex: 1; min-width: 0; }
.month-bar-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.month-bar-label svg { color: var(--brand-fg); }
.month-bar-track {
  position: relative;
  height: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.month-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-fg), var(--brand-fg-strong));
  border-radius: 999px;
  transition: width 0.3s;
}
.month-bar-marks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); }
.month-bar-r { text-align: right; }
.month-bar-pct { font-family: var(--font-mono); font-size: 11px; color: var(--brand-fg); font-weight: 600; letter-spacing: 0.04em; }
.month-bar-val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }

/* === FIM DO PIPELINE V2 === */

/* === FILTERS V2 (Fase 4 do plano 2026-04-25-145000) === */

.filters { padding: 12px var(--pad); }
.filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters-row + .filters-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

.filters-search {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; height: 32px;
  flex: 1; min-width: 200px; max-width: 320px;
  color: var(--text-dim);
}
.filters-search svg { color: var(--text-mute); flex-shrink: 0; }
.filters-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; color: var(--text); padding: 0;
}
.filters-search .ih-x {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-dim); display: inline-flex; padding: 4px;
  border-radius: 6px;
}
.filters-search .ih-x:hover { background: var(--bg-2); color: var(--text); }
.filters-search .ih-x[hidden] { display: none; }

.filters-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.filters .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; height: 28px;
  font: inherit; font-size: 12px;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: 120ms;
}
.filters .chip:hover { color: var(--text); border-color: var(--border-strong); }
.filters .chip.is-active,
.filters .chip.ativo {
  background: var(--text); color: var(--surface);
  border-color: var(--text);
}

.filters-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.filters-dates .muted { color: var(--text-mute); font-size: 12px; }
.filters .date-input {
  font: inherit; font-size: 12px; font-family: var(--font-mono);
  height: 28px; padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  width: 130px;
}

.filters-row-views { justify-content: space-between; }
.view-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px;
}
.view-switch .view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; height: 28px;
  font: inherit; font-size: 12px;
  background: transparent; color: var(--text-dim);
  border: 0; border-radius: 6px;
  cursor: pointer; transition: 100ms;
}
.view-switch .view-btn:hover { color: var(--text); }
.view-switch .view-btn.is-active,
.view-switch .view-btn.ativo {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}

.actions-inline { display: inline-flex; gap: 6px; align-items: center; }

.actions-inline .btn,
.filters .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; height: 30px;
  font: inherit; font-size: 12px; font-weight: 500;
  border-radius: 8px; cursor: pointer;
  transition: 120ms;
  border: 1px solid transparent;
}
.actions-inline .btn-ghost,
.filters .btn-ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
.actions-inline .btn-ghost:hover,
.filters .btn-ghost:hover {
  background: var(--bg-2); border-color: var(--border-strong);
}
.actions-inline .btn-primary,
.filters .btn-primary {
  background: var(--brand-fg); color: var(--brand-on-fg); border-color: var(--brand-fg);
}
.actions-inline .btn-primary:hover,
.filters .btn-primary:hover {
  background: var(--brand-fg-strong); border-color: var(--brand-fg-strong);
}

.filters .icon-btn,
.actions-inline .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; color: var(--text-dim);
}
.filters .icon-btn:hover,
.actions-inline .icon-btn:hover {
  background: var(--bg-2); color: var(--text);
}

/* === FIM DO FILTERS V2 === */

/* === NEW-LEAD V2 (Fase 5 do plano 2026-04-25-145000) === */

.new-lead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad);
  width: 100%;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit; color: var(--text);
  transition: 150ms;
  text-align: left;
}
.new-lead:hover { border-color: var(--brand-fg); background: var(--brand-bg); }
.new-lead:focus-visible {
  outline: 2px solid var(--brand-fg);
  outline-offset: 2px;
}
.new-lead-l { display: inline-flex; align-items: center; gap: 12px; }
.new-lead-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand-bg); color: var(--brand-fg);
  flex-shrink: 0;
  transition: 150ms;
}
.new-lead:hover .new-lead-icon { background: var(--brand-fg); color: var(--brand-on-fg); }
.new-lead-text { display: inline-flex; flex-direction: column; }
.new-lead-title { display: block; font-weight: 600; font-size: 14px; }
.new-lead-sub {
  display: block; font-size: 11px; color: var(--text-dim);
  margin-top: 2px; font-family: var(--font-mono);
}
.new-lead-sub kbd {
  display: inline-block;
  padding: 1px 5px; margin-left: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  min-width: 16px; text-align: center;
}
.new-lead-r { color: var(--text-dim); transition: transform 150ms; }
.new-lead.is-open .new-lead-r,
.new-lead[aria-expanded="true"] .new-lead-r {
  transform: rotate(90deg);
}

/* === FIM DO NEW-LEAD V2 === */

/* === STAGE TABLE V2 (Fase 6 do plano 2026-04-25-145000) === */

.stages-stack { display: flex; flex-direction: column; gap: 8px; }

/* O .painel também ganha .stage-card (mantém compat com .painel). */
.painel.stage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 200ms ease, border-color 200ms ease;
  /* Fase 1 fix: sobrescreve `.painel { overflow: hidden }` (linha ~1927)
     p/ que o popover .row-menu (z-index 200) não seja recortado quando
     transborda a última linha do painel. */
  overflow: visible;
}
.painel.stage-card.is-closed { background: var(--surface-2); }

.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px var(--pad);
  font: inherit; color: var(--text);
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  border-radius: var(--radius) var(--radius) 0 0;
}
.painel.stage-card.is-closed .stage-head { border-radius: var(--radius); }
.stage-head:hover { background: var(--accent-bg); }
.stage-head-l { display: inline-flex; align-items: center; gap: 12px; }
.stage-chev {
  display: inline-flex; transition: transform 200ms ease; color: var(--text-dim);
}
.stage-chev[data-open="true"]  { transform: rotate(0deg); }
.stage-chev[data-open="false"] { transform: rotate(-90deg); }
.stage-name { font-weight: 600; font-size: 14px; }
.stage-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex-shrink: 0;
}
.stage-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  background: var(--accent-bg); color: var(--accent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  border-radius: 6px;
}
.stage-head-r { display: inline-flex; align-items: center; gap: 14px; }
.stage-head-r .muted { color: var(--text-mute); font-size: 12px; }
.stage-total { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text); }
.stage-card.is-closed .stage-total { color: var(--text-dim); }

.painel.stage-card .stage-body {
  border-top: 1px solid var(--border);
}
/* Quando colapsado, .painel-content.collapsed (regra antiga) já esconde. */

.painel.stage-card .thead,
.painel.stage-card .trow {
  display: grid;
  /* Fase 10: 8 colunas — adicionada a coluna "C" (comissão, 36px) entre Há e Valor.
     # | Lead | Parceiro | Vendedor | Há | C | Valor | ⋮ */
  grid-template-columns: 36px minmax(160px, 2fr) 1.4fr 1.4fr 60px 36px 130px 36px;
  gap: 12px;
  padding: 0 var(--pad);
  align-items: center;
  font-size: 13px;
  font-family: var(--font-sans);
}
.painel.stage-card .thead {
  height: 32px; min-height: 32px;
  background: var(--surface-2);
  font-size: 11px; color: var(--text-mute);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.painel.stage-card .trow {
  min-height: var(--row-h);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 100ms ease;
}
.painel.stage-card .trow:last-child { border-bottom: 0; }
.painel.stage-card .trow:hover { background: var(--accent-bg); }
.painel.stage-card .trow-empty {
  cursor: default;
  color: var(--text-mute);
  padding-top: 14px; padding-bottom: 14px;
  display: flex; justify-content: center;
  grid-template-columns: 1fr;
}
.painel.stage-card .trow-empty:hover { background: transparent; }

.painel.stage-card .lead-name { font-weight: 500; color: var(--text); }
.painel.stage-card .lead-sub  { font-size: 11px; margin-top: 2px; }

.painel.stage-card .cell-partner,
.painel.stage-card .cell-seller {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.painel.stage-card .cell-partner > span:last-child,
.painel.stage-card .cell-seller > span:last-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.painel.stage-card .parc-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-mute);
  flex-shrink: 0;
}
/* Mapeamento de cor para os 5 parceiros — reusa tokens --cor-* já existentes. */
.painel.stage-card .parc-dot-grupo-ide { background: var(--cor-grupo-ide, #9bc13c); }
.painel.stage-card .parc-dot-alma9     { background: var(--cor-alma9,     #3a7fc1); }
.painel.stage-card .parc-dot-bioma     { background: var(--cor-bioma,     #e8861a); }
.painel.stage-card .parc-dot-eloi      { background: var(--cor-eloi,      #9b59b6); }
.painel.stage-card .parc-dot-vargas    { background: var(--cor-vargas,    #d4b800); }

.painel.stage-card .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: oklch(0.92 0.06 var(--hue, 155));
  color: oklch(0.32 0.10 var(--hue, 155));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.painel.stage-card .avatar.no-seller {
  background: var(--bg-2);
  color: var(--text-mute);
}

.painel.stage-card .value { font-weight: 600; font-size: 13px; color: var(--text); }
.painel.stage-card .ta-right { text-align: right; }
.painel.stage-card .tabular {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.painel.stage-card .muted { color: var(--text-mute); }

.painel.stage-card .trow-actions {
  display: inline-flex; justify-content: flex-end; align-items: center;
  position: relative; /* ancora .row-menu (Fase 5) */
  overflow: visible;
  min-width: 36px;            /* Fase 1 fix: reserva espaço p/ o icon-btn (26px) */
  z-index: 1;                 /* acima do background :hover da linha */
}

/* Fase 10: célula da coluna "C" (Comissão) — checkbox compacto centralizado.
   Só aparece nos painéis Fechados e Jobs Ativos. */
.painel.stage-card .cell-com {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.painel.stage-card .ta-center { text-align: center; }
.painel.stage-card .trow-com-check {
  width: 14px; height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--verde-militar, #5b6f3a);
}
/* Permite o popover .row-menu transbordar a linha .trow. */
.painel.stage-card .trow { overflow: visible; }
.painel.stage-card .trow .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; color: var(--text-dim);
  position: relative;          /* Fase 1 fix: cria contexto p/ z-index */
  z-index: 2;                  /* acima do :hover bg da linha (.trow) */
}
.painel.stage-card .trow .icon-btn:hover { background: var(--bg-2); color: var(--text); }
/* Fase 1 fix: estado ativo (menu ⋮ aberto) — mantém contraste do botão
   sobre o background :hover (var(--accent-bg)) da linha. */
.painel.stage-card .trow .icon-btn.is-active {
  background: var(--bg-2);
  color: var(--text);
}

@media (max-width: 1080px) {
  .painel.stage-card .thead,
  .painel.stage-card .trow { grid-template-columns: 32px 2fr 1.2fr 1.2fr 50px 32px 110px 36px; }
}
@media (max-width: 720px) {
  /* Mobile: 7 colunas — esconde Vendedor (4ª) mas mantém Comissão (6ª).
     # | Lead | Parceiro | Há | C | Valor | ⋮
     Fase 1 fix: última coluna 32px → 36px p/ não espremer o icon-btn. */
  .painel.stage-card .thead,
  .painel.stage-card .trow { grid-template-columns: 28px 1.4fr 1fr 50px 32px 90px 36px; }
  .painel.stage-card .thead > *:nth-child(4),
  .painel.stage-card .trow  > *:nth-child(4) { display: none; } /* esconde Vendedor */
  /* Fase 1 fix: em mobile reduz min-width p/ caber confortavelmente. */
  .painel.stage-card .trow-actions { min-width: 32px; }
}

/* === FIM DO STAGE TABLE V2 === */

/* === KANBAN V2 (Fase 7 do plano 2026-04-25-145000) === */

#secao-kanban { width: 100%; }

.kanban {
  display: grid;
  grid-template-columns: repeat(8, minmax(180px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 1280px) {
  .kanban { grid-template-columns: repeat(8, minmax(180px, 220px)); }
}

.kcol {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  min-height: 320px;
}
.kcol-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.kcol-head-l {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1;
}
.kcol .stage-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex-shrink: 0;
}
.kcol-name {
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kcol-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--accent-bg); color: var(--accent);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  border-radius: 5px;
  flex-shrink: 0;
}
.kcol-total {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
  flex-shrink: 0;
}
.kcol-body {
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}

.kcard {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  font: inherit; text-align: left; cursor: pointer;
  transition: 120ms;
  font-family: var(--font-sans);
  color: var(--text);
}
.kcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kcard-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.kcard-name {
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
.kcard-val {
  font-size: 12px; font-weight: 600; color: var(--text);
  flex-shrink: 0;
}
.kcard-mid { font-size: 11px; }
.kcard-bot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.kcard-partner {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.kcard-partner .muted {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kcol .tabular {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.kcol .muted { color: var(--text-mute); }
.kcol .tiny { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.kcol .parc-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-mute);
  flex-shrink: 0;
}
.kcol .parc-dot-grupo-ide { background: var(--cor-grupo-ide, #9bc13c); }
.kcol .parc-dot-alma9     { background: var(--cor-alma9,     #3a7fc1); }
.kcol .parc-dot-bioma     { background: var(--cor-bioma,     #e8861a); }
.kcol .parc-dot-eloi      { background: var(--cor-eloi,      #9b59b6); }
.kcol .parc-dot-vargas    { background: var(--cor-vargas,    #d4b800); }

.kcol .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: oklch(0.92 0.06 var(--hue, 155));
  color: oklch(0.32 0.10 var(--hue, 155));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.kcol .avatar.no-seller {
  background: var(--bg-2);
  color: var(--text-mute);
}

.kcol-empty {
  text-align: center;
  padding: 20px 8px;
  font-size: 12px;
}

.kcol-add {
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font: inherit; font-size: 12px;
  color: var(--text-mute);
  cursor: pointer;
  margin-top: auto;
  font-family: var(--font-sans);
  transition: 120ms;
}
.kcol-add:hover {
  color: var(--text);
  border-color: var(--brand-fg);
  background: var(--brand-bg);
}

/* SortableJS — visuais durante drag (compat com classes legadas). */
.kanban-card-ghost {
  opacity: 0.45;
  border: 2px dashed var(--border-strong);
  background: var(--surface-2);
}
.kanban-card-drag {
  box-shadow: var(--shadow-md);
  transform: rotate(1.5deg);
}

/* === FIM DO KANBAN V2 === */

  /* ======= DASHBOARD ======= */
  #secao-dashboard {
    background: #1a1a1a;
    border-radius: 14px;
    padding: 28px 24px;
    min-height: 400px;
  }

  .dash-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 10px;
  }
  .dash-header h2 {
    color: #4ade80; font-size: 18px; font-weight: 700;
    letter-spacing: .5px; display: flex; align-items: center; gap: 8px;
  }
  .dash-header-sub {
    color: rgba(255,255,255,0.4); font-size: 12px;
  }

  .dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
  /* Fase 6: alinhado ao token --bp-sm (720px) em vez de 600px. */
  @media (max-width: 720px)  { .dash-grid { grid-template-columns: 1fr; gap: var(--esp-sm); } }

  .dash-card {
    background: #242424;
    border-radius: 12px;
    padding: 22px 20px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform .15s, box-shadow .15s;
  }
  .dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  }
  .dash-card-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4); font-weight: 700;
  }
  .dash-card-valor {
    font-size: 28px; font-weight: 800; color: #ffffff;
    line-height: 1.1; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .dash-card-valor.verde  { color: #4ade80; }
  .dash-card-valor.amarelo{ color: #facc15; }
  .dash-card-valor.vermelho{ color: #f87171; }
  .dash-card-sub {
    font-size: 11px; color: rgba(255,255,255,0.35);
  }

  /* Card semáforo */
  .dash-semaforo-wrap {
    display: flex; align-items: center; gap: 16px;
  }
  .dash-semaforo-circulo {
    width: 52px; height: 52px; border-radius: 50%;
    flex-shrink: 0; box-shadow: 0 0 18px 4px rgba(0,0,0,0.4);
    transition: background .4s;
  }
  .dash-semaforo-circulo.verde   { background: #4ade80; box-shadow: 0 0 18px 4px rgba(74,222,128,.4); }
  .dash-semaforo-circulo.amarelo { background: #facc15; box-shadow: 0 0 18px 4px rgba(250,204,21,.35); }
  .dash-semaforo-circulo.vermelho{ background: #f87171; box-shadow: 0 0 18px 4px rgba(248,113,113,.4); }
  .dash-semaforo-circulo.neutro  { background: #4a4a4a; }
  .dash-semaforo-texto { display: flex; flex-direction: column; gap: 3px; }
  .dash-semaforo-pct {
    font-size: 26px; font-weight: 800; color: #fff; line-height: 1;
  }
  .dash-semaforo-desc {
    font-size: 11px; color: rgba(255,255,255,0.4);
  }

  /* Card dias restantes */
  .dash-dias-num {
    font-size: 56px; font-weight: 900; color: #4ade80; line-height: 1;
  }
  .dash-dias-label {
    font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 600;
  }

  /* ======= DASHBOARD — GRÁFICO ACUMULADO ======= */
  .dash-chart-wrap {
    background: #242424;
    border-radius: 12px;
    padding: 20px 20px 14px;
    margin-top: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .dash-chart-titulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
    margin-bottom: 14px;
  }
  .dash-chart-canvas-wrap {
    position: relative;
    height: 260px;
  }
  #chart-acumulado {
    height: 100%;
    width: 100%;
    display: block;
  }
  #secao-dashboard:fullscreen,
  #secao-dashboard:-webkit-full-screen {
    overflow-y: auto;
    border-radius: 0;
    height: 100%;
    box-sizing: border-box;
  }
  :fullscreen .dash-chart-canvas-wrap,
  :-webkit-full-screen .dash-chart-canvas-wrap {
    height: 320px;
  }

  /* ======= DASHBOARD — RANKING E FEED ======= */
  .dash-secoes-inferiores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
  }
  @media (max-width: 900px) { .dash-secoes-inferiores { grid-template-columns: 1fr; } }
  /* Fase 6: em <=720px economiza padding do wrapper inferior. */
  @media (max-width: 720px) {
    .dash-secoes-inferiores {
      gap: var(--esp-md);
      margin-top: var(--esp-md);
    }
    .dash-bloco-header { padding: 10px var(--esp-md); }
    .dash-bloco-body { padding: var(--esp-md); }
  }

  .dash-bloco {
    background: #242424;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
  }

  .dash-bloco-header {
    padding: 13px 18px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .dash-bloco-header.verde-header  { background: linear-gradient(90deg, #1a4a2a, #2d7a3a); }
  .dash-bloco-header.azul-header   { background: linear-gradient(90deg, #1a2a4a, #2a4a8a); }
  .dash-bloco-header h3 {
    color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .4px;
  }
  .dash-bloco-header .dash-bloco-icon { font-size: 16px; }

  .dash-bloco-body { padding: 16px 18px; }

  /* Ranking */
  .dash-ranking-lista {
    display: flex; flex-direction: column; gap: 10px;
  }

  .dash-ranking-item {
    display: flex; align-items: center; gap: 12px;
  }

  .dash-ranking-pos {
    font-size: 20px; line-height: 1; flex-shrink: 0; width: 28px; text-align: center;
  }
  .dash-ranking-pos.num {
    font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.5);
  }

  .dash-ranking-info {
    flex: 1; min-width: 0;
  }
  .dash-ranking-nome {
    font-size: 13px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
  }
  .dash-ranking-barra-wrap {
    height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
  }
  .dash-ranking-barra-fill {
    height: 100%; border-radius: 3px; background: #4ade80;
    transition: width .4s ease;
  }
  .dash-ranking-barra-fill.pos-2 { background: #94a3b8; }
  .dash-ranking-barra-fill.pos-3 { background: #cd7f32; }
  .dash-ranking-barra-fill.pos-n { background: rgba(255,255,255,0.25); }

  .dash-ranking-valores {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;
  }
  .dash-ranking-valor {
    font-size: 13px; font-weight: 800; color: #4ade80; white-space: nowrap;
  }
  .dash-ranking-contratos {
    font-size: 10px; color: rgba(255,255,255,0.35);
  }

  /* Feed */
  .dash-feed-lista {
    display: flex; flex-direction: column; gap: 0;
    max-height: 340px; overflow-y: auto;
  }
  .dash-feed-lista::-webkit-scrollbar { width: 4px; }
  .dash-feed-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

  .dash-feed-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .dash-feed-item:last-child { border-bottom: none; }

  .dash-feed-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  }
  .dash-feed-dot.fechado    { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.4); }
  .dash-feed-dot.job-ativo  { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,.4); }
  .dash-feed-dot.job-ok     { background: #a3e635; box-shadow: 0 0 6px rgba(163,230,53,.4); }
  .dash-feed-dot.encerrado  { background: #94a3b8; box-shadow: 0 0 6px rgba(148,163,184,.4); }
  .dash-feed-dot.negociacao { background: #fb923c; box-shadow: 0 0 6px rgba(251,146,60,.4); }
  .dash-feed-dot.prospeccao { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,.4); }
  .dash-feed-dot.perdido    { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.4); }

  .dash-feed-texto {
    flex: 1; min-width: 0;
  }
  .dash-feed-msg {
    font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.4;
  }
  .dash-feed-msg.fechado    { color: #86efac; }
  .dash-feed-msg.job-ativo  { color: #67e8f9; }
  .dash-feed-msg.job-ok     { color: #bef264; }
  .dash-feed-msg.encerrado  { color: #cbd5e1; }
  .dash-feed-msg.negociacao { color: #fdba74; }
  .dash-feed-msg.prospeccao { color: #93c5fd; }
  .dash-feed-msg.perdido    { color: #fca5a5; }

  .dash-feed-data {
    font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px;
  }

  .dash-vazio {
    color: rgba(255,255,255,0.3); font-size: 13px;
    font-style: italic; text-align: center; padding: 20px 0;
  }

  /* ======= DASHBOARD FASE 5 — CONTROLES ======= */
  .dash-header-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .btn-dash {
    padding: 6px 14px; border: none; border-radius: 7px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: opacity .2s, transform .1s; letter-spacing: .3px;
  }
  .btn-dash:hover { opacity: .85; transform: translateY(-1px); }
  .btn-dash:active { transform: translateY(0); }
  .btn-dash-fullscreen {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .btn-dash-config {
    background: rgba(74,222,128,0.18); color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
  }
  .btn-dash-pdf {
    background: #2a3a5a;
    border-color: rgba(96, 165, 250, 0.35);
    color: #e0ecff;
  }
  .btn-dash-pdf:hover {
    background: #345080;
    border-color: rgba(96, 165, 250, 0.6);
  }
  .dash-mes-seletor {
    background: #242424;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, background .15s;
  }
  .dash-mes-seletor:hover {
    border-color: rgba(74,222,128,0.5);
    background: #2a2a2a;
  }
  .dash-mes-seletor:focus {
    border-color: #4ade80;
  }
  .dash-mes-seletor option {
    background: #242424;
    color: rgba(255,255,255,0.85);
  }
  #dash-countdown {
    font-size: 11px; color: rgba(255,255,255,0.35);
    font-weight: 600; letter-spacing: .5px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    min-width: 90px; text-align: center;
  }

  /* ======= DASHBOARD FASE 5 — OVERLAY CONFIG ======= */
  #dash-config-overlay {
    display: none;
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 200;
    align-items: center; justify-content: center;
    border-radius: 14px;
  }
  #dash-config-overlay.open { display: flex; }

  .dash-config-box {
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 28px 30px;
    width: 100%; max-width: 480px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    max-height: 90vh; overflow-y: auto;
  }
  .dash-config-box::-webkit-scrollbar { width: 4px; }
  .dash-config-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

  .dash-config-titulo {
    font-size: 16px; font-weight: 700; color: #4ade80;
    margin-bottom: 22px; display: flex; align-items: center; gap: 8px;
  }

  .dash-cfg-field {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px;
  }
  .dash-cfg-field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.45); font-weight: 700;
  }
  .dash-cfg-field input[type="number"],
  .dash-cfg-field select {
    padding: 10px 13px;
    background: #2a2a2a; border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: #fff; font-size: 14px; outline: none;
    transition: border-color .2s;
  }
  .dash-cfg-field input[type="number"]:focus,
  .dash-cfg-field select:focus {
    border-color: rgba(74,222,128,0.5);
  }
  .dash-cfg-field select option { background: #2a2a2a; }

  .dash-cfg-metricas-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.45); font-weight: 700; margin-bottom: 10px;
  }
  .dash-cfg-metricas-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 22px;
  }
  .dash-cfg-chk {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: #2a2a2a; border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 8px; cursor: pointer;
    transition: border-color .2s;
  }
  .dash-cfg-chk:hover { border-color: rgba(74,222,128,0.35); }
  .dash-cfg-chk input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: #4ade80; cursor: pointer; flex-shrink: 0;
  }
  .dash-cfg-chk span {
    font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600;
  }

  .dash-cfg-btns {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px;
  }
  .btn-cfg-salvar {
    padding: 10px 22px;
    background: linear-gradient(135deg, #2d7a3a, #4ade80);
    color: #0d1f0d; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 800; cursor: pointer;
    transition: opacity .2s;
  }
  .btn-cfg-salvar:hover { opacity: .88; }
  .btn-cfg-cancelar {
    padding: 10px 20px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .2s;
  }
  .btn-cfg-cancelar:hover { background: rgba(255,255,255,0.14); }

  /* ======= DASHBOARD — Fase 6 (mobile <=720px) =======
     - Padding interno reduzido para ganhar largura útil.
     - Cards dashboard com padding menor e valor menor.
     - Canvas do gráfico acumulado: 260px -> 200px.
     - Header do dashboard: botões fullscreen/config e countdown
       mantêm ordem legível (flex-wrap já ativo); tap target >=40px.
     - Ranking: avatares/barras já fluem (flex: 1) — apenas
       proteger o nome contra overflow e reduzir gap vertical.
  */
  @media (max-width: 720px) {
    #secao-dashboard {
      padding: var(--esp-md) var(--esp-md);
      border-radius: 12px;
    }
    .dash-header {
      margin-bottom: var(--esp-md);
      gap: var(--esp-sm);
    }
    .dash-header h2 { font-size: 16px; }
    .dash-header-actions {
      width: 100%;
      justify-content: space-between;
      gap: var(--esp-xs);
    }
    .btn-dash {
      min-height: 40px;
      padding: 8px 12px;
      font-size: 11px;
    }
    #dash-countdown {
      min-width: 0;
      flex: 0 1 auto;
      padding: 6px 10px;
    }
    .dash-card { padding: var(--esp-md); }
    .dash-card-valor { font-size: 22px; }
    .dash-semaforo-circulo { width: 42px; height: 42px; }
    .dash-semaforo-pct { font-size: 22px; }
    .dash-dias-num { font-size: 42px; }

    .dash-chart-wrap {
      padding: var(--esp-md) var(--esp-md) 10px;
      margin-top: var(--esp-md);
    }
    .dash-chart-canvas-wrap { height: 200px; }

    /* Ranking/feed: garante que nome/valor não estourem o card. */
    .dash-ranking-item { gap: var(--esp-sm); }
    .dash-ranking-pos { width: 22px; font-size: 16px; }
    .dash-ranking-pos.num { font-size: 12px; }
    .dash-ranking-nome { font-size: 12px; }
    .dash-ranking-valor { font-size: 12px; }
    .dash-ranking-contratos { font-size: 10px; }
    .dash-ranking-valores { min-width: 0; }

    .dash-feed-item { gap: var(--esp-sm); padding: 8px 0; }
    .dash-feed-msg { font-size: 11px; }

    /* Overlay de configurações: caixa respira melhor em mobile. */
    .dash-config-box {
      padding: var(--esp-lg) var(--esp-md);
      max-height: 85vh;
    }
    .dash-cfg-metricas-grid { grid-template-columns: 1fr; }
  }

/* === DRAWER V2 (Fase 9 do plano 2026-04-25-145000) === */

.drawer-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 240 / 0.4);
  z-index: 100;
  animation: drawer-fade 150ms ease-out;
}
.drawer-backdrop[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  animation: drawer-slide 200ms ease-out;
  height: 100%;
  overflow-y: auto;
  z-index: 101;
  font-family: var(--font-sans);
  color: var(--text);
}
.drawer[hidden] { display: none; }

@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.drawer-stage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.drawer-stage-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex-shrink: 0;
}
.drawer-name {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.drawer-sub { font-size: 12px; margin-top: 4px; }
.drawer .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; color: var(--text-dim);
  flex-shrink: 0;
}
.drawer .icon-btn:hover { background: var(--bg-2); color: var(--text); }

.drawer-body {
  padding: 20px 24px;
  display: flex; flex-direction: column;
  gap: 24px; flex: 1;
}
.drawer-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.drawer-grid .big {
  font-size: 18px; font-weight: 600;
  margin-top: 4px; letter-spacing: -0.01em;
}
.drawer-section { display: flex; flex-direction: column; gap: 12px; }
.drawer-dl {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.dl-row { display: flex; flex-direction: column; gap: 2px; }
.dl-row dt { margin: 0; }
.dl-row dd { margin: 0; font-size: 13px; color: var(--text); white-space: pre-wrap; }

.timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.timeline::before {
  content: ""; position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border);
}
.timeline li {
  display: flex; gap: 12px; align-items: flex-start;
  position: relative;
}
.t-dot {
  width: 11px; height: 11px;
  border-radius: 999px;
  background: var(--border-strong);
  border: 2px solid var(--surface);
  margin-top: 2px; flex-shrink: 0;
  z-index: 1;
}

.seller-inline { display: inline-flex; align-items: center; gap: 6px; }

.drawer-actions {
  display: flex; gap: 8px;
  margin-top: auto;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--border);
  /* Sticky no rodapé do drawer (Fase 6): garante que Salvar/Cancelar
     fiquem sempre visíveis enquanto o usuário rola o formulário. */
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 2;
}
.drawer-actions .btn { flex: 1; justify-content: center; height: 36px; }
.drawer-actions .btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
}
.drawer-actions .btn-ghost:hover { background: var(--bg-2); border-color: var(--border-strong); }
.drawer-actions .btn-primary {
  background: var(--brand-fg); color: var(--brand-on-fg);
  border: 1px solid var(--brand-fg);
}
.drawer-actions .btn-primary:hover { background: var(--brand-fg-strong); border-color: var(--brand-fg-strong); }
/* Excluir: ação destrutiva secundária — ocupa só o necessário p/ não
   competir visualmente com Mover/Editar, mantendo o rodapé equilibrado. */
.drawer-actions .btn-danger {
  flex: 0 1 auto;
  background: var(--row-menu-item-bg-danger-hover, #fbf2f2);
  color: var(--row-menu-item-fg-danger, #a81a1a);
  border: 1px solid color-mix(in srgb, var(--row-menu-item-fg-danger, #a81a1a) 28%, transparent);
}
.drawer-actions .btn-danger:hover {
  background: var(--row-menu-item-fg-danger, #a81a1a);
  color: #fff;
  border-color: var(--row-menu-item-fg-danger, #a81a1a);
}

.drawer .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: oklch(0.92 0.06 var(--hue, 155));
  color: oklch(0.32 0.10 var(--hue, 155));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.drawer .avatar.no-seller {
  background: var(--bg-2); color: var(--text-mute);
}

/* === Drawer modes (Fase 2): alterna entre Visualização e Edição === */
.drawer.is-mode-view .drawer-edit-mode { display: none; }
.drawer.is-mode-edit .drawer-view-mode { display: none; }

/* As seções de modo ocupam a mesma área (toda a altura do drawer) e
   reutilizam .drawer-head / .drawer-body / .drawer-actions já estilizados. */
.drawer-view-mode,
.drawer-edit-mode {
  display: flex; flex-direction: column;
  flex: 1; min-height: 100%;
}

/* Header do edit-mode: botão Voltar à esquerda + título.
   Reutiliza .drawer-head; só ajusta o alinhamento porque aqui
   queremos os elementos centralizados verticalmente, com o botão
   Voltar como ícone (mesma estética do .icon-btn já existente). */
.drawer-edit-mode .drawer-head {
  align-items: center;
}
.drawer-edit-mode .drawer-head > div:first-child {
  flex-shrink: 0;
}

/* ============================================================
   FASE 6 — DRAWER RESPONSIVO (tablet + mobile bottom-sheet)
   ------------------------------------------------------------
   Estratégia:
     - Desktop (>=1081px): mantém a regra-base (440px lateral).
     - Tablet (721-1080px): drawer um pouco mais largo (520px),
       ainda lateral à direita, para aproveitar a tela.
     - Mobile (<=720px): drawer vira BOTTOM-SHEET ocupando 100%
       da largura e 90vh de altura, ancorado na borda inferior,
       com cantos superiores arredondados e uma "alça" visual
       (::before) no topo indicando que é um sheet.

   O footer .drawer-actions (sticky, definido na regra base) já
   garante que os botões Salvar/Cancelar nunca somem com scroll;
   este bloco apenas ajusta layout, tap-targets e empilhamento.
   ============================================================ */

/* --- Tablet: 721px-1080px --- */
@media (max-width: 1080px) and (min-width: 721px) {
  .drawer {
    width: min(520px, 90vw);
  }
}

/* --- Mobile: <=720px (bottom-sheet) --- */
@media (max-width: 720px) {
  .drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    max-height: 90vh;
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    /* Animação ajustada: sheet sobe de baixo para cima. */
    animation: drawer-slide-up 220ms ease-out;
  }

  /* Alça (handle) visual no topo do sheet. Pseudo-elemento — não
     altera o HTML. Centralizada e levemente afastada da borda. */
  .drawer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    opacity: 0.6;
    z-index: 3;
    pointer-events: none;
  }

  /* Header recebe pequeno padding extra no topo para não colidir
     com a alça. */
  .drawer-head {
    padding-top: 22px;
  }

  /* Body rola internamente (já era flex: 1, mas reforça). */
  .drawer-body {
    overflow-y: auto;
  }

  /* Footer no mobile: empilhado, full-width, com Salvar acima
     e Cancelar abaixo (mesmo padrão dos modais antigos). */
  .drawer-actions {
    flex-direction: column-reverse;
    gap: 10px;
    padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 4px) 0;
  }
  .drawer-actions .btn {
    width: 100%;
    min-height: 44px;
    height: auto;
  }

  /* Tap targets >=44px nos campos de edição em mobile, e
     font-size 16px para evitar o zoom automático do iOS Safari
     ao focar input/select/textarea. */
  .drawer-edit-mode .field input,
  .drawer-edit-mode .field select,
  .drawer-edit-mode .field textarea {
    min-height: 44px;
    font-size: 16px;
  }
}

@keyframes drawer-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* === FIM DO DRAWER V2 === */

/* === KPI MODAL V2 (clique nos cards do Resumo do pipeline) === */

.kpi { cursor: pointer; transition: transform 100ms, box-shadow 100ms; }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.kpi-modal-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 240 / 0.5);
  z-index: 200;
  animation: kpi-modal-fade 150ms ease-out;
}
.kpi-modal-backdrop[hidden] { display: none; }

.kpi-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 95vw);
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.25);
  display: flex; flex-direction: column;
  z-index: 201;
  overflow: hidden;
  animation: kpi-modal-pop 180ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
  color: var(--text);
}
.kpi-modal[hidden] { display: none; }

@keyframes kpi-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kpi-modal-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.kpi-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kpi-modal-stage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.kpi-modal-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.kpi-modal-title {
  margin: 0; font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text);
  font-family: var(--font-mono);
}
.kpi-modal-sub { font-size: 12px; margin-top: 4px; }

.kpi-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 24px;
}

.kpi-modal-section { display: flex; flex-direction: column; gap: 10px; }
.kpi-modal-section-title {
  font-size: 11px; color: var(--text-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
}

/* Stats mini */
.kpi-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.kpi-stat-mini {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-stat-mini-label {
  font-size: 10px; color: var(--text-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.kpi-stat-mini-value {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.kpi-stat-mini-foot {
  font-size: 11px; color: var(--text-dim);
}

/* Big sparkline */
.kpi-big-spark { width: 100%; height: 140px; display: block; }
.kpi-big-spark text { font-family: var(--font-mono); }

/* Bar lists (vendedor, parceiro) */
.kpi-bar-list {
  display: flex; flex-direction: column; gap: 8px;
}
.kpi-bar-row {
  display: flex; align-items: center; gap: 10px;
}
.kpi-bar-name {
  min-width: 130px; flex-shrink: 0;
  font-size: 12px; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-bar-name .avatar { width: 20px; height: 20px; font-size: 9px; }
.kpi-bar-track {
  flex: 1; height: 6px;
  background: var(--bg-2);
  border-radius: 999px; overflow: hidden;
}
.kpi-bar-fill {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s;
}
.kpi-bar-val {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text);
  min-width: 80px; text-align: right;
  flex-shrink: 0;
}

.kpi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Lista compacta de leads dentro do modal */
.kpi-modal-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.kpi-modal-list-item {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.6fr) minmax(80px, 1fr) 60px 100px;
  gap: 10px;
  padding: 9px 12px;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  transition: 100ms;
  border-bottom: 1px solid var(--border);
}
.kpi-modal-list-item:last-child { border-bottom: 0; }
.kpi-modal-list-item:hover { background: var(--accent-bg); }
.kpi-modal-list-item .kml-name { font-weight: 500; color: var(--text); }
.kpi-modal-list-item .kml-sub { font-size: 10px; color: var(--text-mute); }
.kpi-modal-list-item .kml-num { color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; }
.kpi-modal-list-item .kml-val { font-family: var(--font-mono); font-weight: 600; text-align: right; color: var(--text); }
.kpi-modal-list-empty {
  font-size: 12px; color: var(--text-mute);
  padding: 16px; text-align: center;
}

@media (max-width: 700px) {
  .kpi-grid-2 { grid-template-columns: 1fr; }
  .kpi-modal { width: 100vw; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
  .kpi-modal-list-item { grid-template-columns: 24px 1fr 70px; }
  .kpi-modal-list-item .kml-partner, .kpi-modal-list-item .kml-num { display: none; }
}

/* === FIM DO KPI MODAL V2 === */

/* === FIM DOS TOKENS V2 === */

    :root {
      --verde-militar: #3b5c3a;
      --verde-escuro:  #2a4229;
      --verde-claro:   #4e7a4d;
      --chumbo:        #2c2c2c;
      --cinza-escuro:  #3a3a3a;
      --cinza-medio:   #5a5a5a;
      --cinza-claro:   #9a9a9a;
      --cinza-fundo:   #f0f0f0;
      --branco:        #ffffff;
      --sombra:        rgba(0,0,0,0.15);

      --cor-grupo-ide: #9bc13c;
      --cor-alma9:     #3a7fc1;
      --cor-bioma:     #e8861a;
      --cor-eloi:      #9b59b6;
      --cor-vargas:    #d4b800;

      /* =========================================================
         TOKENS DE LAYOUT (Fase 1) - breakpoints e espaçamentos
         ---------------------------------------------------------
         Propósito:
           Padronizar pontos de quebra e espaçamentos usados em
           todo o projeto, eliminando valores mágicos espalhados.

         Princípio "base = mobile, media queries = desktop":
           Os estilos padrão (fora de @media) devem ser escritos
           pensando em celular/tablet pequeno. Ao subir em
           largura, @media (min-width: ...) adiciona ajustes para
           tablets maiores e desktop. Isso dá um mobile-first
           progressivo nas próximas fases.

         Atenção (limitação do CSS nativo):
           Não é possível usar var(--bp-sm) dentro da condição de
           um @media (ex.: @media (max-width: var(--bp-sm)) não
           funciona). As variáveis --bp-* servem como REFERÊNCIA
           documental; os @media continuarão escrevendo o valor
           literal (720px, 1024px, 1280px) - mas todos devem
           bater com os valores definidos aqui.

         Breakpoints:
           --bp-sm  720px  -> limite superior de celular
           --bp-md  1024px -> limite superior de tablet
           --bp-lg  1280px -> entrada em desktop amplo

         Espaçamentos (paddings, margins, gaps):
           --esp-xs  4px   -> micro-gaps (ex: ícone + texto, chips)
           --esp-sm  8px   -> gaps curtos em listas/linhas densas
           --esp-md  14px  -> gap padrão de grids/cards
           --esp-lg  22px  -> espaçamento entre blocos do main
           --esp-xl  28px  -> respiros grandes / separações de seção
         ========================================================= */
      --bp-sm: 720px;
      --bp-md: 1024px;
      --bp-lg: 1280px;

      --esp-xs: 4px;
      --esp-sm: 8px;
      --esp-md: 14px;
      --esp-lg: 22px;
      --esp-xl: 28px;

      /* =========================================================
         COMPACT ROW (lista universal) - Fase 2
         ---------------------------------------------------------
         Tokens portados de "Ideal Hub Design System/colors_and_type.css"
         (bloco "COMPACT ROW", linhas 98-152). NÃO link o arquivo do DS
         no index.html - este bloco é a fonte de verdade no app.

         Mecânica de linha (--row-*): altura, paddings, hover, expand.
         Cores de parceiro (--parc-*): re-exposição com escopo de linha.
         Estágios (--stage-*): já existem no projeto - reutilizamos.
         ========================================================= */
      --row-h-compact:        36px;
      --row-pad-x:            12px;
      --row-pad-y:            6px;
      --row-border:           #ececec;
      --row-bg-hover:         #f5f8f5;
      --row-bg-expanded:      #fafbf8;
      --row-fg:               var(--chumbo);
      --row-fg-muted:         var(--cinza-medio);
      --row-fg-empty:         var(--cinza-claro);

      /* Partner dot */
      --row-dot-size:         9px;
      --row-dot-radius:       50%;
      --row-dot-empty:        var(--cinza-claro);

      --parc-grupoide:        var(--cor-grupo-ide);
      --parc-alma9:           var(--cor-alma9);
      --parc-bioma:           var(--cor-bioma);
      --parc-eloi:            var(--cor-eloi);
      --parc-vargas:          var(--cor-vargas);

      /* Stage colors (espelhando o que o app usa hoje em literais) */
      --stage-prospeccao:           #3a7fc1;
      --stage-negociacao:           #e07b00;
      --stage-fechados:             #2d9e2d;
      --stage-nutricao:             #d4b800;
      --stage-perdidos:             #cc2222;
      /* Fase 3: estágios faltantes — cores do README (Jobs/Encerrados chumbo/cinza). */
      --stage-jobs-ativos:          #2d9e2d;   /* verde, mesmo do header "verde" */
      --stage-jobs-concluidos:      #2c2c2c;   /* chumbo */
      --stage-contratos-encerrados: #6b7685;   /* cinza */
      /* Fase 4: comissão — verde mais escuro, derivado dos fechados mas distinto. */
      --stage-comissao:             #1e7a1e;
      /* Fase 5: estágios das views Vendedores e SDR — não pertencem ao funil
         de leads, mas reusam a estrutura da linha compacta (dot/expand).
         Vendedor → verde-militar (entidade humana, time comercial).
         SDR     → slate-blue (azul-acinzentado, distinto de chumbo dos Jobs
                   Concluídos e do cinza de Contratos Encerrados). */
      --stage-vendedores:           #2a4229;   /* verde-militar (mesmo do header verde) */
      --stage-sdr:                  #5a6478;   /* slate-blue/cinza-azul */

      /* Inline icon buttons (ℹ e ⋮) */
      --row-icon-size:        18px;
      --row-icon-glyph:       16px;
      --row-icon-radius:      6px;
      --row-icon-fg:          var(--cinza-medio);
      --row-icon-fg-hover:    var(--chumbo);
      --row-icon-bg-hover:    #eef1ec;
      --row-icon-fg-active:   var(--verde-militar);
      --row-icon-bg-active:   #e3ebe1;

      /* Expand area */
      --row-expand-bg:         #fafbf8;
      --row-expand-border:     5px;
      --row-expand-pad-x:      22px;
      --row-expand-pad-y:      16px;
      --row-expand-gap-x:      28px;
      --row-expand-gap-y:      10px;
      --row-expand-transition: 240ms ease;

      /* Dropdown menu (⋮) */
      --row-menu-bg:           #ffffff;
      --row-menu-border:       #e4e6e1;
      --row-menu-radius:       10px;
      --row-menu-shadow:       0 6px 18px rgba(0,0,0,0.14);
      --row-menu-item-pad-x:   12px;
      --row-menu-item-pad-y:   8px;
      --row-menu-item-fg:      var(--chumbo);
      --row-menu-item-bg-hover:#f3f4f1;
      --row-menu-item-fg-danger:#a81a1a;
      --row-menu-item-bg-danger-hover:#fbf2f2;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      /* font-family substituída por var(--font-sans) — Fase 2 plano 2026-04-25-145000 */
      /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
      /* background e color substituídos por var(--bg)/var(--text) — Fase 2 (contraste/dark mode) */
      /* background: #dfe0e0; */
      /* color: var(--chumbo); */
      min-height: 100vh;
    }

    /* ======= HEADER ======= */
    /* Regra removida: o seletor de elemento `header` aplicava fundo verde
       escuro em qualquer <header>, incluindo o do KPI modal. O header real
       da app é estilizado por `.ih-header` (Fase 2). Mantido como comentário. */
    /*
    header {
      background: linear-gradient(135deg, var(--verde-escuro) 0%, var(--verde-militar) 55%, var(--chumbo) 100%);
      padding: 16px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 3px 14px rgba(0,0,0,0.3);
    }
    */

    .logo-area { display: flex; align-items: center; gap: 14px; }

    .logo-icon {
      width: 50px; height: 50px;
      background: var(--verde-claro);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      border: 2px solid rgba(255,255,255,0.15);
    }

    .logo-text h1 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
    .logo-text span { color: var(--cor-grupo-ide); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; }

    .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    /* color removido: V2 usa var(--text-dim) via .ih-date — Fase 2/extras */
    .header-data { /* color: rgba(255,255,255,0.55); */ font-size: 12px; }
    /* background/color removidos: V2 usa .ih-status com var(--text-dim) — Fase 2/extras */
    .db-status {
      display: flex; align-items: center; gap: 5px;
      /* background: rgba(255,255,255,0.08); */
      padding: 4px 10px; border-radius: 20px;
      font-size: 11px; /* color: rgba(255,255,255,0.7); */
    }
    /* background removido: V2 usa .ih-status-dot com var(--c-emerald) — Fase 2/extras */
    .db-dot { width: 7px; height: 7px; border-radius: 50%; /* background: #5bdb5b; */ animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    /* ======= HEADER — mobile (<=720px) =======
       Objetivos:
         - economizar altura de tela em celular
         - ocultar subtítulo do logo e o texto "Banco de dados ativo"
         - preservar o dot verde animado como indicador compacto
         - manter a data visível e alinhada à direita
       Truque do .db-status: font-size:0 esconde o text node "Banco de
       dados ativo" (que não está envelopado em span), enquanto o
       .db-dot não depende de font-size (tem width/height em px),
       então o dot continua visível e animado. */
    @media (max-width: 720px) {
      /* header { padding: var(--esp-sm) var(--esp-md); } -- removido junto com o seletor base */
      .logo-area { gap: var(--esp-sm); }
      .logo-icon {
        width: 40px; height: 40px;
        border-radius: 10px;
        font-size: 20px;
      }
      .logo-text h1 {
        font-size: 17px;
        letter-spacing: .5px;
      }
      .logo-text span { display: none; }
      .header-right { gap: var(--esp-xs); }
      .db-status {
        font-size: 0;
        gap: 0;
        padding: var(--esp-xs);
      }
      .header-data { font-size: 11px; }
    }

    /* ======= MAIN ======= */
    main { max-width: 1320px; margin: 26px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 22px; }

    /* ======= RESUMO DO PIPELINE — V2 (regras antigas .painel-resumo /
       .resumo-* removidas na Fase 3; substituídas pelo bloco
       "PIPELINE / KPIs V2" no topo do arquivo). */

    /* ======= PAINEL CADASTRO ======= */
    .painel { background: var(--branco); border-radius: 12px; box-shadow: 0 2px 10px var(--sombra); overflow: hidden; }

    .painel-header {
      padding: 13px 20px;
      display: flex; align-items: center; gap: 9px;
    }
    .painel-header.verde   { background: linear-gradient(90deg, var(--verde-escuro), var(--verde-claro)); }
    .painel-header.chumbo  { background: linear-gradient(90deg, var(--chumbo), var(--cinza-escuro)); }
    .painel-header.azul    { background: linear-gradient(90deg, #1a508a, #3a7fc1); }
    .painel-header.laranja { background: linear-gradient(90deg, #8a5200, #e07b00); }
    .painel-header.amarelo { background: linear-gradient(90deg, #8a7a00, #d4b800); }
    .painel-header.vermelho{ background: linear-gradient(90deg, #7a1a1a, #cc2222); }
    .painel-header.cinza   { background: linear-gradient(90deg, #4a5560, #6b7685); }
    .painel-header h2 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .5px; }
    .painel-header .icon { font-size: 17px; }

    .painel-body { padding: 20px; }

    .form-grid {
      display: grid;
      grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr auto;
      gap: 12px; align-items: end;
    }
    /* Fase 3: breakpoints alinhados aos tokens --bp-sm (720px) e --bp-md (1024px).
       - >1024px: 5 colunas (padrão acima).
       - 721-1024px: 2 colunas (tablet).
       - <=720px: 1 coluna (mobile). */
    @media (max-width: 1024px) { .form-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 720px)  { .form-grid { grid-template-columns: 1fr; } }

    /* Fase 3: tap target >=44px em mobile para botões e campos do form. */
    @media (max-width: 720px) {
      .form-grid .btn-primary {
        min-height: 44px;
        padding: 12px 22px;
        width: 100%;
      }
      .field input,
      .field select,
      .field textarea {
        min-height: 44px;
        padding: 12px 13px;
      }
    }

    .field { display: flex; flex-direction: column; gap: 5px; }
    .field label { font-size: 11px; font-weight: 700; color: var(--cinza-medio); text-transform: uppercase; letter-spacing: .5px; }
    .field input, .field select {
      padding: 10px 13px; border: 2px solid #ddd; border-radius: 8px;
      font-size: 14px; color: var(--chumbo); background: #fafafa; transition: border-color .2s;
    }
    .field input:focus, .field select:focus { outline: none; border-color: var(--verde-militar); background: #fff; }
    .field textarea {
      padding: 10px 13px; border: 2px solid #ddd; border-radius: 8px;
      font-size: 14px; color: var(--chumbo); background: #fafafa;
      resize: vertical; transition: border-color .2s; font-family: inherit;
    }
    .field textarea:focus { outline: none; border-color: var(--verde-militar); background: #fff; }
    .form-field-full { grid-column: 1 / -1; }
    .label-opcional { font-weight: 400; font-size: 10px; text-transform: none; color: var(--cinza-claro); letter-spacing: 0; }

    .btn-primary {
      padding: 10px 22px;
      background: linear-gradient(135deg, var(--verde-militar), var(--verde-claro));
      color: #fff; border: none; border-radius: 8px;
      font-size: 14px; font-weight: 700; cursor: pointer;
      letter-spacing: .4px; white-space: nowrap;
      transition: opacity .2s, transform .1s;
    }
    .btn-primary:hover { opacity: .88; transform: translateY(-1px); }
    .btn-primary:active { transform: translateY(0); }

    /* ======= TOOLBAR DA TABELA ======= */
    .tabela-toolbar {
      padding: 12px 20px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
      background: linear-gradient(90deg, var(--chumbo), var(--cinza-escuro));
    }
    .tabela-toolbar h2 { color: #fff; font-size: 14px; font-weight: 600; }

    .toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

    .btn-icon {
      padding: 5px 11px; border-radius: 7px; border: none;
      font-size: 12px; font-weight: 600; cursor: pointer;
      transition: opacity .2s;
    }
    .btn-icon:hover { opacity: .8; }
    .btn-pdf    { background: #c0392b; color: #fff; }
    .btn-export { background: #2d9e2d; color: #fff; }
    .btn-import { background: #d4b800; color: #222; }

    /* ======= TABELA ======= */
    .tabela-container { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    thead tr { background: var(--cinza-fundo); border-bottom: 2px solid #ddd; }
    thead th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--cinza-medio); }
    thead th:last-child { text-align: center; }
    tbody tr { border-bottom: 1px solid #eee; transition: background .15s; }
    tbody tr:hover { background: #f5f8f5; }
    tbody td { padding: 11px 14px; color: var(--chumbo); vertical-align: middle; }

    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 11px; border-radius: 20px;
      font-size: 12px; font-weight: 700; letter-spacing: .2px;
    }
    .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.2); }
    .badge-grupo-ide { background: rgba(155,193,60,.16); color: #4e6e0a; border: 1px solid var(--cor-grupo-ide); }
    .badge-alma9     { background: rgba(58,127,193,.14); color: #1a508a; border: 1px solid var(--cor-alma9); }
    .badge-bioma     { background: rgba(232,134,26,.14); color: #8c4200; border: 1px solid var(--cor-bioma); }
    .badge-eloi      { background: rgba(155,89,182,.14); color: #5e1a8c; border: 1px solid var(--cor-eloi); }
    .badge-vargas    { background: rgba(212,184,0,.18);  color: #6b5a00; border: 1px solid var(--cor-vargas); }

    .valor-txt { font-weight: 700; color: var(--verde-escuro); }

    .acoes { display: flex; align-items: center; justify-content: center; gap: 4px; }

    .check-comissao {
      width: 18px; height: 18px; cursor: pointer;
      accent-color: var(--verde-militar);
      margin-right: 2px;
      vertical-align: middle;
    }

    .btn-del, .btn-edit, .btn-action {
      background: none; border: none;
      cursor: pointer; font-size: 15px;
      padding: 5px 7px; border-radius: 6px; transition: background .15s;
    }
    .btn-del  { color: #bb2222; }
    .btn-del:hover  { background: #fde; }
    .btn-edit { color: #2a6ab5; }
    .btn-edit:hover { background: #e4eefa; }
    .btn-action { color: #2d9e2d; }
    .btn-action:hover { background: #e4fae4; }
    .btn-action.orange { color: #e07b00; }
    .btn-action.orange:hover { background: #fff3e0; }
    .btn-action.blue { color: #3a7fc1; }
    .btn-action.blue:hover { background: #e4eefa; }
    .btn-action.red { color: #cc2222; }
    .btn-action.red:hover { background: #fde; }
    .btn-action.yellow { color: #8a7a00; }
    .btn-action.yellow:hover { background: #fffde0; }

    .duracao-txt { font-size: 11px; color: var(--cinza-medio); font-style: italic; }

    .linha-vazia td { text-align: center; padding: 38px; color: var(--cinza-claro); font-size: 14px; }

    /* ======= FOLLOW-UP 30 DIAS ======= */
    .row-followup { background: #fffde0 !important; }
    .badge-followup {
      background: #d4b800; color: #222;
      padding: 2px 8px; border-radius: 10px;
      font-size: 10px; font-weight: 700;
      white-space: nowrap;
    }

    /* ======= LEGENDA ======= */
    .legenda {
      display: flex; gap: 14px; flex-wrap: wrap;
      padding: 10px 20px; border-top: 1px solid #eee; background: #fafafa;
    }
    .leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cinza-medio); font-weight: 600; }
    .leg-cor { width: 11px; height: 11px; border-radius: 3px; }

    /* ======= FOOTER TOTAIS ======= */
    .tabela-footer {
      background: var(--cinza-fundo); border-top: 2px solid #ddd;
      padding: 13px 20px;
      display: flex; justify-content: flex-end; align-items: center;
      gap: 28px; flex-wrap: wrap;
    }
    .footer-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
    .footer-item label { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--cinza-medio); font-weight: 700; }
    .footer-item .tot { font-size: 20px; font-weight: 800; color: var(--verde-escuro); }
    .footer-item .com { font-size: 20px; font-weight: 800; color: #1e7a1e; }

    /* ======= MODAL ======= */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.55); z-index: 100;
      align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--branco); border-radius: 14px;
      padding: 26px 28px; max-width: 420px; width: 90%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      max-height: 90vh; overflow-y: auto;
      box-sizing: border-box;
    }
    .modal h3 { font-size: 16px; color: var(--verde-escuro); margin-bottom: 14px; }
    .modal textarea {
      width: 100%; height: 160px; border: 2px solid #ddd;
      border-radius: 8px; padding: 10px; font-size: 12px;
      font-family: monospace; resize: none; background: #f8f8f8;
    }
    .modal textarea:focus { outline: none; border-color: var(--verde-militar); }
    .modal-btns {
      display: flex; gap: 10px; justify-content: flex-end;
      position: sticky; bottom: 0;
      background: var(--branco);
      margin: 14px -28px -26px;
      padding: 12px 28px 26px;
      border-top: 1px solid #ececec;
      z-index: 2;
    }
    .btn-cancel { padding: 8px 18px; background: #ddd; color: #444; border: none; border-radius: 7px; cursor: pointer; font-weight: 600; }
    .btn-confirm { padding: 8px 18px; background: var(--verde-militar); color: #fff; border: none; border-radius: 7px; cursor: pointer; font-weight: 700; }
    .modal p { font-size: 13px; color: var(--cinza-medio); margin-bottom: 12px; }

    /* ======= TOAST ======= */
    #toast {
      position: fixed; bottom: 28px; right: 28px;
      background: var(--verde-escuro); color: #fff;
      padding: 11px 20px; border-radius: 8px;
      font-size: 14px; font-weight: 600;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      opacity: 0; transform: translateY(10px);
      transition: all .3s; pointer-events: none; z-index: 999;
    }
    #toast.show { opacity: 1; transform: translateY(0); }
    #toast.err  { background: #cc2222; }

    /* ======= TOGGLE EXPANDIR/RECOLHER ======= */
    .btn-toggle {
      background: none; border: none; color: rgba(255,255,255,0.8);
      font-size: 14px; cursor: pointer; padding: 2px 8px;
      border-radius: 4px; transition: background .15s;
      margin-left: auto;
    }
    .btn-toggle:hover { background: rgba(255,255,255,0.15); }
    .painel-content { transition: max-height .3s ease; overflow: hidden; }
    .painel-content.collapsed { display: none; }

    /* ======= FASE 5 — ELEMENTOS MOBILE (ocultos no desktop) =======
       - .filtros-select-mobile: <select> equivalente aos 6 botões-pílula.
       - .acoes-menu-mobile: botão "⋮" com dropdown das 3 ações globais.
       Ambos só aparecem em <=720px (ver @media adiante). */
    .filtros-select-mobile { display: none; }
    .acoes-menu-mobile { display: none; position: relative; }
    .btn-acoes-menu {
      min-width: 44px; min-height: 44px;
      padding: 6px 10px; border: none; border-radius: 8px;
      background: rgba(255,255,255,0.15); color: #fff;
      font-size: 22px; font-weight: 800; line-height: 1;
      cursor: pointer; transition: background .2s;
    }
    .btn-acoes-menu:hover { background: rgba(255,255,255,0.28); }
    .acoes-dropdown {
      display: none;
      position: absolute; right: 0; top: calc(100% + 6px);
      background: #fff; border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.22);
      padding: var(--esp-sm);
      z-index: 50; min-width: 180px;
      flex-direction: column; gap: var(--esp-xs);
    }
    .acoes-dropdown.open { display: flex; }
    .acoes-dropdown .btn-icon {
      width: 100%; text-align: left;
      padding: 10px 12px; min-height: 44px;
      font-size: 13px;
    }

    /* ======= LISTA DE SEÇÕES ======= */
    #secao-lista { display: flex; flex-direction: column; gap: 18px; }

    /* Kanban legado removido — substituído pelo Kanban V2 (Fase 7). */

  /* ======= OVERLAY DE SENHA (V2) ======= */
  #senha-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    font-family: var(--font-sans);
  }
  #senha-overlay.oculto { display: none; }
  .senha-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 28px;
    width: 100%; max-width: 360px;
    display: flex; flex-direction: column;
  }
  .senha-brand {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
  }
  .senha-logo {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-bg);
    border-radius: 12px;
    color: var(--brand-fg);
    flex-shrink: 0;
  }
  .senha-brand-text { display: flex; flex-direction: column; min-width: 0; }
  .senha-title {
    font-weight: 600; font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
  }
  .senha-sub {
    font-size: 10px; color: var(--text-mute);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 500; margin-top: 4px;
  }
  .senha-label {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
  }
  .senha-box input {
    width: 100%; padding: 10px 12px; height: 38px;
    background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-size: 14px; color: var(--text);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    margin-bottom: 14px;
  }
  .senha-box input::placeholder { color: var(--text-mute); }
  .senha-box input:focus {
    border-color: var(--brand-fg);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--brand-bg);
  }
  .senha-btn {
    width: 100%; padding: 10px 14px; height: 38px;
    background: var(--brand-fg); color: var(--brand-on-fg);
    border: 1px solid var(--brand-fg); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .15s, border-color .15s;
  }
  .senha-btn:hover { background: var(--brand-fg-strong); border-color: var(--brand-fg-strong); }
  .senha-btn:focus-visible { outline: 2px solid var(--brand-fg); outline-offset: 2px; }
  .senha-erro {
    margin-top: 10px; font-size: 12px;
    color: var(--c-red); min-height: 16px;
    text-align: center;
  }

  /* ======= VENDEDORES — tabela de performance (Fase 6) =======
     Estilos desktop da tabela dentro de .vendedores-tabela. Em mobile
     a tabela vira card por reutilização do bloco Fase 4 em 720px. */
  .vendedores-tabela { overflow-x: auto; }
  .vendedores-tabela table {
    width: 100%; border-collapse: collapse; font-size: 14px;
  }
  .vendedores-tabela thead tr.v-thead {
    background: linear-gradient(90deg, var(--verde-escuro), var(--verde-claro));
  }
  .vendedores-tabela thead th {
    padding: 10px 14px; text-align: left; color: #fff;
    font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  }
  .vendedores-tabela thead th.v-th-center { text-align: center; }
  .vendedores-tabela thead th.v-th-right  { text-align: right; }
  .vendedores-tabela tbody tr.v-row { border-bottom: 1px solid #eee; }
  .vendedores-tabela tbody td { padding: 10px 14px; }
  .vendedores-tabela .v-td-nome   { font-weight: 600; color: var(--chumbo); }
  .vendedores-tabela .v-td-leads  { text-align: center; color: var(--cinza-medio); }
  .vendedores-tabela .v-td-fech   { text-align: center; color: #2d9e2d; font-weight: 700; }
  .vendedores-tabela .v-td-valor  { text-align: right; font-weight: 700; color: var(--verde-escuro); }
  .vendedores-tabela .v-td-com    { text-align: right; font-weight: 700; color: #1e7a1e; }
  .vendedores-tabela tfoot tr.v-tfoot {
    background: var(--cinza-fundo); border-top: 2px solid #ddd;
  }
  .vendedores-tabela tfoot td { padding: 10px 14px; font-weight: 800; }
  .vendedores-tabela .v-td-total-label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--verde-escuro);
  }
  .vendedores-tabela .v-td-total-leads { text-align: center; color: var(--verde-escuro); }
  .vendedores-tabela .v-td-total-fech  { text-align: center; color: #2d9e2d; }
  .vendedores-tabela .v-td-total-valor { text-align: right; font-size: 15px; color: var(--verde-escuro); }
  .vendedores-tabela .v-td-total-com   { text-align: right; font-size: 15px; color: #1e7a1e; }

  /* ======= VENDEDORES — Fase 6 (mobile <=720px) =======
     Form de adicionar vendedor: input acima, botão abaixo full-width
     com min-height 44px. Tabela de performance vira card (Fase 4). */
  @media (max-width: 720px) {
    .vendedor-add-row {
      flex-direction: column;
      align-items: stretch !important;
      gap: var(--esp-sm);
    }
    .vendedor-add-row .field { min-width: 0 !important; width: 100%; }
    .vendedor-add-btn {
      width: 100%;
      min-height: 44px;
      padding: 12px 22px;
      align-self: stretch !important;
    }

    /* Scroll horizontal desligado no container da tabela — já usamos
       o padrão card da Fase 4 (abaixo). */
    .vendedores-tabela { overflow-x: visible; }

    /* Reset de alinhamento/tamanho nas células convertidas em card.
       Mantém cor/peso originais (v-td-*) mas alinha à direita igual
       ao padrão Fase 4 e remove padding lateral. */
    .vendedores-tabela tbody td,
    .vendedores-tabela tfoot td {
      text-align: right;
      padding: 6px 0;
    }
    .vendedores-tabela tbody td.v-td-nome {
      text-align: left;
    }
    /* Oculta a linha "Total" no rodapé mobile: os dados já aparecem
       por card (um card por vendedor); total agregado é ruído. */
    .vendedores-tabela tfoot { display: none; }

    /* Lista de vendedores (#lista-vendedores) — cada item mais alto
       para tap confortável e botões edit/del com min 40px. */
    #lista-vendedores li {
      padding: 12px 14px !important;
      gap: 8px !important;
    }
    #lista-vendedores .btn-edit,
    #lista-vendedores .btn-del {
      min-width: 40px;
      min-height: 40px;
      font-size: 16px;
      padding: 8px 10px;
    }
  }

  /* ======= DASHBOARD ANTIGO — Mobile (Fase 6) REMOVIDO na Fase 10.
     Tudo dentro do bloco @media (<=720px) referenciava classes do
     dashboard antigo (.dash-header*, .dash-card, .dash-semaforo*,
     .dash-chart-wrap, .dash-ranking-*, .dash-feed-*, .dash-config-box,
     .dash-cfg-metricas-grid, .btn-dash, #dash-countdown). O Dashboard
     V2 (Fase 8) tem o proprio mobile via tokens em .dash. */

  /* ======= SDR — view ======= */
  #view-sdr .painel-header.chumbo {
    background: linear-gradient(135deg, var(--chumbo) 0%, var(--cinza-escuro) 100%);
  }
  .btn-copiar-link-sdr {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
  }
  .btn-copiar-link-sdr:hover { background: rgba(255,255,255,0.28); }

  /* ======= Modal SDR — info grid ======= */
  .modal-sdr {
    max-width: 560px;
    width: 100%;
  }

  .sdr-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin: 14px 0 4px;
  }

  .sdr-info-full {
    grid-column: 1 / -1;
  }

  .sdr-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .sdr-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--cinza-claro);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .sdr-info-valor {
    font-size: 13px;
    color: var(--chumbo);
    background: var(--cinza-fundo);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 10px;
    min-height: 32px;
    word-break: break-word;
  }

  .sdr-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 16px 0;
  }

  /* ======= SDR — Fase 6 (mobile <=720px) =======
     - sdr-info-grid: 1 coluna para não estourar em telas estreitas.
     - Modal SDR: padding reduzido e max-height para evitar que o
       card do lead extrapole a viewport em celular. (Mínimo
       necessário; Fase 7 formaliza o padrão de modal mobile.) */
  @media (max-width: 720px) {
    .sdr-info-grid {
      grid-template-columns: 1fr;
      gap: var(--esp-sm) var(--esp-md);
    }
    .modal-sdr {
      padding: var(--esp-md) var(--esp-md);
      max-height: 90vh;
      overflow-y: auto;
      width: 94%;
    }
    .sdr-info-valor {
      font-size: 13px;
      padding: 8px 10px;
    }
  }

  /* ============================================================
     FASE 4 — TABELAS DE LISTAGEM EM CARD VERTICAL (mobile <=720px)
     ------------------------------------------------------------
     Aplica-se aos 8 painéis da view Lista (Prospecção, Negociação,
     Fechados, Jobs Ativos, Nutrição, Perdidos, Jobs Concluídos e
     Contratos Encerrados). Em desktop a tabela tradicional continua
     igual (este bloco está inteiramente dentro da media query).
     Os labels vêm do atributo data-label aplicado em cada <td>
     gerado dinamicamente em app.js, derivado do <th> correspondente.
  ============================================================ */
  @media (max-width: 720px) {
    /* Desliga o scroll horizontal; a tabela deixa de ser grid. */
    .tabela-container { overflow-x: visible; }

    /* Oculta o cabeçalho; cada célula já traz seu próprio label. */
    .tabela-container thead { display: none; }

    /* Table/tbody/tr/td viram blocos (não-tabelados) no mobile. */
    .tabela-container table,
    .tabela-container tbody,
    .tabela-container tr,
    .tabela-container td { display: block; width: 100%; }

    /* Cada <tr> vira um card. */
    .tabela-container tbody tr {
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      margin-bottom: var(--esp-md);
      padding: 10px 12px;
    }
    /* Desliga o hover (não faz sentido em touch) — preserva estado
       do follow-up/linha-vazia abaixo. */
    .tabela-container tbody tr:hover { background: #fff; }

    /* Cada célula ocupa uma linha; label à esquerda, valor à direita. */
    .tabela-container tbody td {
      border: none;
      padding: 6px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      text-align: right;
    }

    /* Label derivado de data-label do <th>. */
    .tabela-container tbody td::before {
      content: attr(data-label);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--cinza-medio);
      flex-shrink: 0;
      text-align: left;
    }

    /* Coluna "#": ruído no card — oculta. */
    .tabela-container tbody td[data-label="#"] { display: none; }

    /* Nome destacado como título do card (sem label, com separador). */
    .tabela-container tbody td[data-label="Nome do Cliente"] {
      font-size: 15px;
      font-weight: 700;
      padding-bottom: 8px;
      margin-bottom: 4px;
      border-bottom: 1px solid #f0f0f0;
      justify-content: flex-start;
      text-align: left;
    }
    .tabela-container tbody td[data-label="Nome do Cliente"]::before { display: none; }
    .tabela-container tbody td[data-label="Nome do Cliente"] strong { font-size: inherit; }

    /* Linha de ação: faixa inferior horizontal, centralizada,
       tap-target grande (>=40px) e label oculto. */
    .tabela-container tbody td[data-label="Ação"] {
      justify-content: center;
      padding-top: 10px;
      margin-top: 4px;
      border-top: 1px solid #eee;
    }
    .tabela-container tbody td[data-label="Ação"]::before { display: none; }
    .tabela-container tbody td[data-label="Ação"] .acoes {
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }
    .tabela-container tbody td[data-label="Ação"] .btn-edit,
    .tabela-container tbody td[data-label="Ação"] .btn-del,
    .tabela-container tbody td[data-label="Ação"] .btn-action {
      min-width: 40px;
      min-height: 40px;
      font-size: 17px;
      padding: 8px 10px;
    }
    .tabela-container tbody td[data-label="Ação"] .check-comissao {
      width: 22px; height: 22px;
      margin-right: 4px;
    }

    /* Follow-up (Nutrição >=30 dias): realce preservado + borda lateral. */
    .tabela-container tbody tr.row-followup {
      border-left: 4px solid #d4b800;
      background: #fffde0 !important;
    }
    .tabela-container tbody tr.row-followup:hover { background: #fffde0 !important; }

    /* Linha vazia (tabela sem dados ou sem filtro): vira bloco único. */
    .tabela-container tbody tr.linha-vazia {
      background: #fff;
      box-shadow: none;
      border: 1px dashed #e0e0e0;
    }
    .tabela-container tbody tr.linha-vazia td {
      display: block;
      text-align: center;
      padding: 20px 10px;
      justify-content: center;
    }
    .tabela-container tbody tr.linha-vazia td::before { display: none; }

    /* Badge de parceiro: quebra/contenção controlada. */
    .tabela-container tbody td .badge { flex-shrink: 1; }

    /* Valor: mantém destaque (já herda .valor-txt), apenas alinha. */
    .tabela-container tbody td.valor-txt { font-size: 14px; }

    /* Duracao-txt segue itálico padrão — nada a ajustar. */

    /* ======= FOOTER TOTAIS (mobile) =======
       Empilha em coluna, label acima do valor, alinhado à esquerda. */
    .tabela-footer {
      flex-direction: column;
      align-items: stretch;
      gap: var(--esp-sm);
      padding: var(--esp-md) var(--esp-md);
    }
    .tabela-footer .footer-item {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      width: 100%;
    }
    .tabela-footer .footer-item label { font-size: 11px; }
    .tabela-footer .footer-item .tot,
    .tabela-footer .footer-item .com { font-size: 18px; }

    /* ======= LEGENDA (Fechados) em 2 colunas no mobile ======= */
    .legenda {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 12px;
      padding: 10px var(--esp-md);
    }
    .legenda #db-info {
      grid-column: 1 / -1;
      margin-left: 0 !important;
      text-align: right;
    }
  }

  /* ============================================================
     FASE 5 — FILTROS / AÇÕES / VIEW-TOGGLE MOBILE (<=720px)
     ------------------------------------------------------------
     Metas:
       1. Nenhum botão cortado em <=720px.
       2. View-toggle SEMPRE visível: sticky suave no mobile para
          ficar acessível durante o scroll.
       3. Filtros de parceiro viram <select>; botões-pílula somem.
       4. Ações globais (PDF / Backup / Importar) colapsam em "⋮".
       5. Filtro de data: 2 inputs empilhados com labels acima e
          botão limpar alinhado à direita.
     Zero impacto no desktop — todo o comportamento vive nesta MQ.
  ============================================================ */
  @media (max-width: 720px) {
    /* Pílulas de parceiro são trocadas pelo <select> mobile. */
    .filters-chips { display: none; }
    .filtros-select-mobile {
      display: block;
      width: 100%;
      min-height: 40px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-2);
      color: var(--text);
      font-size: 13px; font-weight: 500;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23666' d='M2 4l4 4 4-4z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 34px;
    }
    .filtros-select-mobile:focus { border-color: var(--border-strong); }

    /* Ações inline somem; o "⋮" assume. */
    .actions-inline > .btn { display: none; }
    .acoes-menu-mobile { display: block; }
  }

  /* ============================================================
     FASE 7 — MODAIS, TOAST E POLIMENTO FINAL (mobile <=720px)
     ------------------------------------------------------------
     Meta: todos os modais (.modal e variantes) cabem em qualquer
     viewport sem estourar a tela, scroll interno quando o conteúdo
     excede 85vh, botões de ação com tap-target >=40-44px, toast
     stretch horizontal para não cobrir conteúdo e não vazar.

     Regras:
       - .modal base: padding reduzido (18px), 94% de largura,
         max-height 85vh + overflow-y:auto, box-sizing:border-box.
       - Modal de importação: textarea 160px -> 110px para caber
         com os botões em telas curtas.
       - Modal de edição de lead: removido na Fase 5. O fluxo de
         edição vive no drawer-edit, com regras próprias.
       - Modal SDR: já estava ajustado na Fase 6 (sdr-info-grid
         1 coluna + max-height 90vh). Mantido; apenas alinha
         max-height à nova base (85vh) e largura 94%.
       - Toast: stretch horizontal (left/right 14px) e max-width
         para garantir que não vaze e não empilhe sobre botões
         críticos do rodapé.
       - Tap targets remanescentes (.btn-acao, .btn-cancel,
         .btn-confirm, <th> clicáveis nas poucas tabelas que
         permanecem em modo tabela).
     Zero impacto no desktop — tudo vive dentro desta media query.
  ============================================================ */
  @media (max-width: 720px) {
    /* Modal base ---------------------------------------------- */
    .modal {
      padding: 18px 18px;
      width: 94%;
      max-width: 94%;
      max-height: 85vh;
      overflow-y: auto;
      box-sizing: border-box;
      border-radius: 12px;
    }
    /* Overlay com um respiro lateral para o modal não grudar
       nas bordas quando max-width é a tela toda. */
    .modal-overlay {
      padding: var(--esp-sm);
    }
    .modal h3 {
      font-size: 15px;
      margin-bottom: var(--esp-sm);
    }
    .modal p {
      font-size: 12px;
      margin-bottom: var(--esp-sm);
    }

    /* Modal de importação: textarea menor + monospace 11px
       para caber conteúdo sem cortar os botões do rodapé. */
    #modal-import .modal textarea,
    .modal textarea {
      height: 110px;
      font-size: 11px;
    }

    /* Botões do rodapé do modal: empilhados full-width com a
       ação primária (confirmar) no topo e o cancelar abaixo.
       Full-width evita corte horizontal em telas curtas e
       garante tap-target >=44px. Ajusta margens negativas do
       sticky para casar com o padding 18px do modal mobile. */
    .modal-btns {
      flex-direction: column;
      gap: var(--esp-sm);
      margin: var(--esp-md) -18px -18px;
      padding: 12px 18px 18px;
    }
    .modal-btns .btn-cancel,
    .modal-btns .btn-confirm {
      width: 100%;
      min-height: 44px;
      padding: 12px 18px;
      font-size: 14px;
    }
    /* Primário acima do cancelar (ordem visual comum em mobile). */
    .modal-btns .btn-confirm { order: 1; }
    .modal-btns .btn-cancel  { order: 2; }

    /* Modal de edição: removido na Fase 5 — o fluxo de Edição agora
       vive 100% no drawer-edit, cujo CSS já garante tap-targets
       adequados em mobile. */

    /* Modal SDR: Fase 6 já cobria; realinha ao padrão Fase 7. */
    .modal-sdr {
      max-height: 85vh;
      width: 94%;
      max-width: 94%;
    }

    /* Dash-config: overlay removido na Fase 10 (sem markup). */

    /* Toast --------------------------------------------------- */
    /* Em mobile o toast estica horizontalmente (14px dos dois
       lados) para não colidir com o ⋮ nem vazar off-screen. */
    #toast {
      left: 14px;
      right: 14px;
      bottom: 14px;
      max-width: calc(100vw - 28px);
      text-align: center;
      font-size: 13px;
      padding: 10px 14px;
    }

    /* Tap targets remanescentes ------------------------------- */
    /* <th> com ordenação: em mobile a tabela vira card (Fase 4),
       então o <thead> já está display:none. Esta regra cobre o
       único caso que não é tabela-container convertida (se algum
       dia for adicionada): garante min-height e área tocável. */
    thead th[onclick],
    thead th[style*="cursor:pointer"] {
      min-height: 40px;
    }

    /* Botão genérico de ação dentro da tabela de cards: já
       coberto pela Fase 4 (40x40). Reforço defensivo para
       qualquer .btn-action/.btn-edit/.btn-del solto fora do
       padrão data-label="Ação". */
    .tabela-container .btn-action,
    .tabela-container .btn-edit,
    .tabela-container .btn-del {
      min-height: 40px;
    }

    /* Botões menores (ex: .btn-limpar-data já 36px; ok para
       ação secundária). Não alteramos. */

    /* Polimento: badges dentro dos cards da tabela não devem
       quebrar horizontalmente — já usa white-space nowrap no
       ponto .badge-followup. Aqui reforça o genérico. */
    .tabela-container tbody td .badge {
      white-space: nowrap;
    }

    /* Transitions críticas (btn-primary, dash-card hover) são
       inofensivas em touch — mantidas. */
  }

  /* ============================================================
     COMPACT ROW (lista universal) - Fase 2
     ------------------------------------------------------------
     Estrutura grid-based espelhando o specimen do Design System
     (preview/comp-row-compact.html). Aplicada inicialmente no
     painel Prospecção como prova de conceito; demais painéis
     migram em fases futuras.

     Container esperado: <div class="lista-compacta"> envelopando
     <div class="row-head-compact"> (cabeçalho enxuto) e múltiplos
     <div class="row-compact"> (linhas). A linha expand é injetada
     dinamicamente como <div class="row-expand"> abaixo da linha
     ativa, com modificador de cor (.stage-prospeccao etc.) na
     borda esquerda.
  ============================================================ */
  .lista-compacta {
    /* background: #fff; -- removido: V2 (Fase 6) usa --surface no .painel.stage-card; quebrava o dark mode */
    background: var(--surface);
    border-top: 1px solid var(--row-border);
    overflow: visible;
  }

  /* --- HEADER enxuto (4 colunas de dado + 2 de ícone) --- */
  .row-head-compact {
    display: grid;
    grid-template-columns: 36px minmax(160px, 2fr) 130px 130px 110px 36px 36px;
    align-items: center;
    height: 30px;
    padding: 0 var(--row-pad-x);
    background: #f7f8f5;
    border-bottom: 1px solid var(--row-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--cinza-medio);
  }
  .row-head-compact .num,
  .row-head-compact .acts { text-align: center; }
  .row-head-compact .valor-h { text-align: right; }
  .row-head-compact .sortable {
    cursor: pointer;
    user-select: none;
  }
  .row-head-compact .sortable:hover { color: var(--chumbo); }

  /* --- LINHA compacta universal --- */
  .row-compact {
    display: grid;
    grid-template-columns: 36px minmax(160px, 2fr) 130px 130px 110px 36px 36px;
    align-items: center;
    min-height: var(--row-h-compact);
    padding: var(--row-pad-y) var(--row-pad-x);
    border-bottom: 1px solid var(--row-border);
    font-size: 13.5px;
    color: var(--row-fg);
    transition: background var(--row-expand-transition);
  }
  .row-compact:last-child { border-bottom: 0; }
  .row-compact:hover { background: var(--row-bg-hover); }
  .row-compact.is-expanded { background: var(--row-bg-expanded); }

  .row-compact .num {
    text-align: center;
    color: var(--row-fg-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .row-compact .nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .row-compact .parc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .row-compact .parc .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .row-compact .vend {
    color: var(--row-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .row-compact .valor {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--verde-escuro);
  }
  .row-compact .acts {
    display: flex;
    justify-content: center;
  }

  /* --- DOT DE PARCEIRO --- */
  .row-dot {
    width: var(--row-dot-size);
    height: var(--row-dot-size);
    border-radius: var(--row-dot-radius);
    flex-shrink: 0;
    background: var(--row-dot-empty);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  }
  .row-dot.parc-grupoide { background: var(--parc-grupoide); }
  .row-dot.parc-alma9    { background: var(--parc-alma9); }
  .row-dot.parc-bioma    { background: var(--parc-bioma); }
  .row-dot.parc-eloi     { background: var(--parc-eloi); }
  .row-dot.parc-vargas   { background: var(--parc-vargas); }

  /* --- BOTÕES INLINE (ℹ e ⋮) --- */
  .row-iconbtn {
    width: var(--row-icon-size);
    height: var(--row-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: var(--row-icon-radius);
    color: var(--row-icon-fg);
    font-size: var(--row-icon-glyph);
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .row-iconbtn:hover {
    background: var(--row-icon-bg-hover);
    color: var(--row-icon-fg-hover);
  }
  .row-iconbtn.is-active {
    background: var(--row-icon-bg-active);
    color: var(--row-icon-fg-active);
  }
  /* Fase 6 — foco visível por teclado (não interfere em mouse).
     Outline em verde-militar com offset 2px para destacar do background. */
  .row-iconbtn:focus { outline: none; }
  .row-iconbtn:focus-visible {
    outline: 2px solid var(--verde-militar);
    outline-offset: 2px;
  }

  /* --- ÁREA DE EXPAND --- */
  .row-expand {
    background: var(--row-expand-bg);
    border-bottom: 1px solid var(--row-border);
    border-left: var(--row-expand-border) solid var(--stage-prospeccao);
    padding: var(--row-expand-pad-y) var(--row-expand-pad-x);
  }
  .row-expand.stage-prospeccao           { border-left-color: var(--stage-prospeccao); }
  .row-expand.stage-negociacao           { border-left-color: var(--stage-negociacao); }
  .row-expand.stage-fechados             { border-left-color: var(--stage-fechados); }
  .row-expand.stage-nutricao             { border-left-color: var(--stage-nutricao); }
  .row-expand.stage-perdidos             { border-left-color: var(--stage-perdidos); }
  /* Fase 3: variantes adicionais (jobs ativos = verde, jobs concluídos = chumbo,
     contratos encerrados = cinza). Cores canônicas vindas do README do DS. */
  .row-expand.stage-jobs-ativos          { border-left-color: var(--stage-jobs-ativos); }
  .row-expand.stage-jobs-concluidos      { border-left-color: var(--stage-jobs-concluidos); }
  .row-expand.stage-contratos-encerrados { border-left-color: var(--stage-contratos-encerrados); }
  /* Fase 5: views Vendedores e SDR */
  .row-expand.stage-vendedores           { border-left-color: var(--stage-vendedores); }
  .row-expand.stage-sdr                  { border-left-color: var(--stage-sdr); }

  .row-expand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--row-expand-gap-x);
    row-gap: var(--row-expand-gap-y);
  }
  .par {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .par-rot {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--cinza-medio);
  }
  .par-val {
    font-size: 13.5px;
    color: var(--chumbo);
    line-height: 1.4;
    word-break: break-word;
  }
  .par-val.is-empty { color: var(--row-fg-empty); }
  .par.is-wide { grid-column: 1 / -1; }

  .row-expand-vazio {
    grid-column: 1 / -1;
    color: var(--row-fg-empty);
    font-style: italic;
    font-size: 13px;
  }

  /* --- DROPDOWN ⋮ --- */
  .row-compact .acts.has-menu {
    position: relative;
    overflow: visible;
  }
  .row-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--row-menu-bg);
    border: 1px solid var(--row-menu-border);
    border-radius: var(--row-menu-radius);
    box-shadow: var(--row-menu-shadow);
    padding: 4px;
    z-index: 200;
    display: flex;
    flex-direction: column;
  }
  .row-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: var(--row-menu-item-pad-y) var(--row-menu-item-pad-x);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--row-menu-item-fg);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .row-menu-item:hover { background: var(--row-menu-item-bg-hover); }
  /* Fase 6 — foco visível dentro do dropdown ⋮ (navegação por setas/Tab). */
  .row-menu-item:focus { outline: none; }
  .row-menu-item:focus-visible {
    outline: 2px solid var(--verde-militar);
    outline-offset: -2px;
    background: var(--row-menu-item-bg-hover);
  }
  .row-menu-item .glyph {
    font-size: 14px;
    line-height: 1;
    width: 16px;
    text-align: center;
  }
  .row-menu-sep {
    height: 1px;
    background: var(--row-menu-border);
    margin: 4px 2px;
  }
  .row-menu-item.is-danger { color: var(--row-menu-item-fg-danger); }
  .row-menu-item.is-danger:hover { background: var(--row-menu-item-bg-danger-hover); }

  /* Linha-vazia dentro da lista compacta. */
  .lista-compacta .linha-vazia-compacta {
    padding: 38px;
    text-align: center;
    color: var(--cinza-claro);
    font-size: 14px;
  }

  /* ============================================================
     COMPACT ROW - Mobile (<=720px)
     Em telas estreitas, oculta colunas Parceiro e Vendedor (que
     ficam disponíveis no expand) e reduz paddings. O grid passa a
     ter 4 colunas: # | Nome | Valor | ℹ ⋮ (ℹ e ⋮ ficam lado a lado).
  ============================================================ */
  @media (max-width: 720px) {
    .row-head-compact,
    .row-compact {
      grid-template-columns: 28px minmax(0, 1fr) 90px 32px 32px;
      padding: 0 8px;
    }
    .row-compact { padding: var(--row-pad-y) 8px; }
    .row-head-compact .col-parc,
    .row-head-compact .col-vend,
    .row-compact .parc,
    .row-compact .vend {
      display: none;
    }
    /* has-comissao removido na Fase 10 (a coluna Comissão agora vive
       na .trow do Stage Table V2, painel.stage-card; não em .row-compact). */
    .row-expand { padding: 14px 16px; }
    .row-expand-grid { grid-template-columns: 1fr; }
    .par.is-wide { grid-column: auto; }
  }

  /* ============================================================
     COMPACT ROW — Variantes Fase 5 (Vendedores e SDR)
     ------------------------------------------------------------
     Vendedores: 6 colunas — # | Nome | Meta | Atingido | ℹ | ⋮
     SDR:        6 colunas — # | Nome | Parceiro | Valor | ℹ | ⋮
     (sem coluna Vendedor — leads SDR ainda não foram atribuídos).

     Reusa todos os estilos base de .row-compact / .row-head-compact
     (cores, hover, expand, dot, ícones). Apenas redefine o grid via
     classe modificadora aplicada no container .lista-compacta.
  ============================================================ */
  .lista-compacta.lista-vendedores .row-head-compact,
  .lista-compacta.lista-vendedores .row-compact {
    grid-template-columns: 36px minmax(160px, 2fr) 130px 160px 36px 36px;
  }
  .lista-compacta.lista-sdr .row-head-compact,
  .lista-compacta.lista-sdr .row-compact {
    grid-template-columns: 36px minmax(160px, 2fr) 130px 110px 36px 36px;
  }

  /* ============================================================
     COMPACT ROW — Variante has-comissao REMOVIDA (Fase 10).
     Os 8 painéis de funil (incluindo Fechados/Jobs Ativos) deixaram
     de usar .row-compact e migraram pro Stage Table V2 (.painel.stage-card
     .trow). A coluna "C" (Comissão) agora vive lá; veja as regras de
     .cell-com / .trow-com-check / .ta-center no bloco do Stage Table V2.
     Variantes .lista-compacta.has-comissao, .comissao-cell, .comissao-h
     e .comissao-check ficaram órfãs e foram excluídas.
  ============================================================ */

  /* Coluna Meta / Atingido: alinhamento à direita (numérico). */
  .lista-vendedores .row-compact .meta,
  .lista-vendedores .row-compact .atingido {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .lista-vendedores .row-compact .meta {
    color: var(--row-fg);
    font-weight: 600;
  }
  .lista-vendedores .row-compact .atingido {
    color: var(--verde-escuro);
    font-weight: 700;
  }
  .lista-vendedores .row-compact .atingido .pct {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cinza-medio);
  }
  .lista-vendedores .row-head-compact .meta-h,
  .lista-vendedores .row-head-compact .atingido-h {
    text-align: right;
  }

  /* Mobile (<=720px): vendedores → # | Nome | Atingido | ℹ ⋮  (esconde Meta).
     SDR → # | Nome | Valor | ℹ ⋮ (esconde Parceiro). */
  @media (max-width: 720px) {
    .lista-compacta.lista-vendedores .row-head-compact,
    .lista-compacta.lista-vendedores .row-compact {
      grid-template-columns: 28px minmax(0, 1fr) 110px 32px 32px;
    }
    .lista-vendedores .row-head-compact .meta-h,
    .lista-vendedores .row-compact .meta {
      display: none;
    }
    .lista-compacta.lista-sdr .row-head-compact,
    .lista-compacta.lista-sdr .row-compact {
      grid-template-columns: 28px minmax(0, 1fr) 90px 32px 32px;
    }
  }

  /* ============================================================
     COMPACT ROW — Mobile estreito (<=360px)
     Refina layout para iPhone SE / Galaxy Fold (largura útil ~320–360px).
     - Reduz padding e largura da coluna numérica/valor
     - Garante ellipsis no Nome e (vendedores) Atingido
     - Mantém tap target de 32×32px nos botões ℹ e ⋮
     - Ainda preserva ocultação de Parceiro e Vendedor (vem do bloco 720px)
  ============================================================ */
  @media (max-width: 360px) {
    .row-head-compact,
    .row-compact {
      /* Adiciona mini-coluna de 14px para o DOT do parceiro entre # e Nome.
         Mantém Vendedor oculto (vem do bloco 720px) e exibe só o dot
         (sem texto) da coluna Parceiro — atende critério de "dot ainda
         visível em 360px" (Fase 6). */
      grid-template-columns: 22px 14px minmax(0, 1fr) 70px 32px 32px;
      padding: 0 6px;
      column-gap: 4px;
    }
    /* has-comissao removido na Fase 10 (vide bloco principal). */
    .row-compact { padding: var(--row-pad-y) 6px; }
    /* Re-exibe a coluna .parc (oculta no bloco 720px) apenas para mostrar
       o dot — o texto continua escondido. NÃO se aplica a Vendedores
       (sem coluna parc) nem SDR (parc é empresa, sem dot). */
    .lista-compacta:not(.lista-vendedores):not(.lista-sdr) .row-head-compact .col-parc,
    .lista-compacta:not(.lista-vendedores):not(.lista-sdr) .row-compact .parc {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 0;
    }
    .lista-compacta:not(.lista-vendedores):not(.lista-sdr) .row-head-compact .col-parc {
      /* Header da coluna parceiro fica vazio (só o dot na linha). */
      font-size: 0;
    }
    .lista-compacta:not(.lista-vendedores):not(.lista-sdr) .row-compact .parc .label {
      display: none;
    }
    .row-compact .num,
    .row-compact .nome,
    .row-compact .valor {
      min-width: 0;
    }
    .row-compact .nome {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .row-compact .valor {
      font-size: 12.5px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Vendedores em 360px: # | Nome | Atingido | ℹ | ⋮ (Meta segue oculta). */
    .lista-compacta.lista-vendedores .row-head-compact,
    .lista-compacta.lista-vendedores .row-compact {
      grid-template-columns: 24px minmax(0, 1fr) 96px 32px 32px;
    }
    .lista-vendedores .row-compact .atingido {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .lista-vendedores .row-compact .atingido .pct {
      margin-left: 4px;
      font-size: 10px;
    }
    /* SDR em 360px: # | Nome | Recebido | ℹ | ⋮ */
    .lista-compacta.lista-sdr .row-head-compact,
    .lista-compacta.lista-sdr .row-compact {
      grid-template-columns: 24px minmax(0, 1fr) 78px 32px 32px;
    }
    /* Botão tap target garantido — não encolhe abaixo de 32×32. */
    .row-iconbtn {
      min-width: 32px;
      min-height: 32px;
    }
    /* Header compacto: fonte um pouco menor para caber em 360px. */
    .row-head-compact { font-size: 10px; letter-spacing: .3px; }
    /* Expand: padding lateral reduzido para aproveitar a largura útil. */
    .row-expand { padding: 12px 12px; }
    /* Dropdown ⋮ — menos largo, sem invadir a viewport. */
    .row-menu { min-width: 160px; }
  }

/* ============================================================
   FASE 3 — DOCUMENTOS POR IA
   Botões "Gerar proposta" / "Gerar contrato" no drawer-edit,
   modal de briefing e stub temporário de revisão (substituído
   pela Fase 4).
============================================================ */

/* --- Botões dentro do drawer-edit --- */
.drawer-docs {
  /* drawer-section já dá espaçamento e gap; só rotulamos. */
}
.drawer-docs-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}
.drawer-docs-actions .btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 130px;
  justify-content: center;
  height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  transition: background .15s, border-color .15s, color .15s;
  font-family: var(--font-sans);
}
.drawer-docs-actions .btn:hover {
  background: var(--accent-bg);
  border-color: var(--border-strong);
  color: var(--brand-fg);
}
.drawer-docs-actions .btn svg { flex-shrink: 0; }

/* --- Modal de briefing --- */
.brief-modal-backdrop {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 240 / 0.55);
  z-index: 250;
  animation: brief-modal-fade 150ms ease-out;
}
.brief-modal-backdrop[hidden] { display: none; }

.brief-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 95vw);
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.30);
  display: flex; flex-direction: column;
  z-index: 251;
  overflow: hidden;
  animation: brief-modal-pop 180ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
  color: var(--text);
}
.brief-modal[hidden] { display: none; }

@keyframes brief-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes brief-modal-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.brief-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brief-modal-stage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.brief-modal-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--brand-fg);
  box-shadow: 0 0 0 3px var(--bg-2);
}
.brief-modal-title {
  margin: 0; font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text);
  font-family: var(--font-mono);
}
.brief-modal-sub { font-size: 12px; margin-top: 4px; color: var(--text-dim); }

.brief-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}

.brief-modal-foot {
  border-top: 1px solid var(--border);
  padding: 12px 22px;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.brief-modal-premium {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 12px; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.brief-modal-premium input[type="checkbox"] {
  width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: var(--brand-fg);
}
.brief-modal-premium:hover { color: var(--text); }
.brief-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.brief-modal-actions .btn {
  height: 36px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s;
}
.brief-modal-actions .btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.brief-modal-actions .btn-ghost:hover {
  background: var(--bg-2); border-color: var(--border-strong);
}
.brief-modal-actions .btn-primary {
  background: var(--brand-fg); color: var(--brand-on-fg, #fff);
  border: 1px solid var(--brand-fg);
}
.brief-modal-actions .btn-primary:hover {
  background: var(--brand-fg-strong); border-color: var(--brand-fg-strong);
}
.brief-modal-actions .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.brief-modal-loading {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.brief-modal-loading[hidden] { display: none; }
.brief-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-fg);
  border-radius: 999px;
  animation: brief-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes brief-spin { to { transform: rotate(360deg); } }

/* --- Form interno do modal de briefing --- */
.brief-form { display: flex; flex-direction: column; gap: 14px; }
.brief-field { display: flex; flex-direction: column; gap: 5px; }
.brief-field[hidden] { display: none; }
.brief-field label {
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.brief-field label .req { color: var(--c-red); margin-left: 2px; }
.brief-field label .opt {
  color: var(--text-mute); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  margin-left: 6px; font-size: 10px;
}
.brief-field input[type="text"],
.brief-field input[type="date"],
.brief-field input[type="number"],
.brief-field select,
.brief-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.brief-field textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.brief-field input:focus,
.brief-field select:focus,
.brief-field textarea:focus {
  outline: none;
  border-color: var(--brand-fg);
  background: var(--surface);
}
.brief-field.has-error input,
.brief-field.has-error select,
.brief-field.has-error textarea {
  border-color: var(--c-red);
}
.brief-form-erro {
  font-size: 11px; color: var(--c-red);
  margin-top: 2px; line-height: 1.3;
}
.brief-form-erro:empty { display: none; }

.brief-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* Radios horizontais (modo de valor) */
.brief-radio-group {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 6px 0;
}
.brief-radio-group label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
}
.brief-radio-group input[type="radio"] {
  accent-color: var(--brand-fg);
  width: 14px; height: 14px;
}

/* Lista dinâmica de opções de pacote */
.brief-opcoes-list {
  display: flex; flex-direction: column; gap: 8px;
}
.brief-opcao-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 8px; align-items: end;
  padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.brief-opcao-row .brief-field { gap: 4px; }
.brief-opcao-row .brief-field label { font-size: 9px; }
.brief-opcao-row .brief-field input { padding: 6px 9px; font-size: 12px; }
.brief-opcao-remover {
  background: transparent; border: 1px solid var(--border);
  color: var(--c-red);
  width: 30px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.brief-opcao-remover:hover { background: var(--c-red-bg); }
.brief-add-opcao {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
  padding: 8px;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s, color .15s;
}
.brief-add-opcao:hover {
  background: var(--bg-2);
  border-color: var(--brand-fg);
  color: var(--brand-fg);
}

/* Dica/info inline (preview do nome do lead etc.) */
.brief-hint {
  font-size: 11px; color: var(--text-mute);
  font-style: italic;
  margin-top: -4px;
}

/* Mobile / tablet — full-screen */
@media (max-width: 700px) {
  .brief-modal {
    width: 100vw; max-height: 100vh;
    border-radius: 0;
    top: 0; left: 0; transform: none;
  }
  @keyframes brief-modal-pop {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .brief-row-2 { grid-template-columns: 1fr; }
  .brief-opcao-row { grid-template-columns: 1fr 1fr; }
  .brief-opcao-row .brief-field:first-child { grid-column: 1 / -1; }
  .brief-opcao-remover { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   Fase 4 — Tela de revisão do documento (.docrev-*)
   Overlay full-screen, editor markdown + preview ao vivo +
   sidebar de versões. Reusa variáveis de tema (auto dark/light).
============================================================ */
.docrev-modal {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9500;
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text);
  animation: brief-modal-fade 150ms ease-out;
}
.docrev-modal[hidden] { display: none; }

.docrev-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.docrev-head-left { min-width: 0; flex: 1; }
.docrev-head-right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

.docrev-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.docrev-tag-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--brand-fg);
  box-shadow: 0 0 0 3px var(--bg-2);
}
.docrev-title {
  margin: 0; font-size: 18px; font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docrev-sub {
  font-size: 12px; margin-top: 4px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.docrev-status {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
}
.docrev-status[data-status="rascunho"] {
  background: var(--c-amber-bg, var(--bg-2));
  color: var(--c-amber, var(--text-dim));
  border-color: var(--c-amber, var(--border));
}
.docrev-status[data-status="finalizado"] {
  background: var(--c-emerald-bg);
  color: var(--c-emerald);
  border-color: var(--c-emerald);
}

.docrev-head .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s;
}
.docrev-head .btn-ghost:hover {
  background: var(--bg-2); border-color: var(--border-strong);
}

.docrev-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  font-size: 13px; color: var(--text-dim);
  font-family: var(--font-mono);
  flex: 1;
}
.docrev-loading[hidden] { display: none; }

/* Fase 8 — overlay durante geração + upload de PDF persistido. */
.docrev-pdf-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  backdrop-filter: blur(2px);
}
.docrev-pdf-overlay[hidden] { display: none; }
.docrev-pdf-overlay-card {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  font-size: 13px; font-weight: 500; color: var(--text);
  font-family: var(--font-mono);
}

/* Fase 8 — botão "Tentar novamente" (erro de upload do PDF) em vermelho discreto. */
#docrev-tentar-pdf {
  color: var(--c-red, #c52727);
  border-color: var(--c-red, #c52727);
}
#docrev-tentar-pdf:hover {
  background: var(--c-red-bg, rgba(197, 39, 39, 0.08));
  border-color: var(--c-red, #c52727);
}

/* Fase 8 — botão "Baixar" na linha da aba Documentos (mesmo estilo dos demais). */
.docs-row .d-acts button.act-baixar:hover {
  color: var(--c-emerald, #167d4f);
  border-color: var(--c-emerald, #167d4f);
}

/* Layout principal: editor | preview | versões */
.docrev-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  min-height: 0;
  overflow: hidden;
}

.docrev-pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-right: 1px solid var(--border);
}
.docrev-pane-preview { border-right: 1px solid var(--border); }

.docrev-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.docrev-pane-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.docrev-pane-hint {
  font-size: 11px; color: var(--text-mute);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.docrev-textarea {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 18px 22px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.docrev-textarea:focus { background: var(--surface); }
.docrev-textarea[readonly] {
  background: var(--bg-2);
  cursor: default;
  color: var(--text-dim);
}

.docrev-preview {
  flex: 1;
  padding: 18px 24px;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.docrev-preview h1,
.docrev-preview h2,
.docrev-preview h3,
.docrev-preview h4 {
  margin: 1.2em 0 0.5em;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.docrev-preview h1:first-child,
.docrev-preview h2:first-child,
.docrev-preview h3:first-child { margin-top: 0; }
.docrev-preview h1 { font-size: 22px; }
.docrev-preview h2 { font-size: 18px; }
.docrev-preview h3 { font-size: 16px; }
.docrev-preview p { margin: 0.6em 0; }
.docrev-preview ul,
.docrev-preview ol { padding-left: 22px; margin: 0.6em 0; }
.docrev-preview li { margin: 0.25em 0; }
.docrev-preview strong { color: var(--text); font-weight: 600; }
.docrev-preview em { font-style: italic; }
.docrev-preview code {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.docrev-preview pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
}
.docrev-preview pre code { background: transparent; border: 0; padding: 0; }
.docrev-preview blockquote {
  border-left: 3px solid var(--brand-fg);
  margin: 0.8em 0;
  padding: 0.2em 0 0.2em 14px;
  color: var(--text-dim);
}
.docrev-preview hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 1.2em 0;
}
.docrev-preview table {
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 13px;
}
.docrev-preview th,
.docrev-preview td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.docrev-preview th { background: var(--surface-2); font-weight: 600; }
.docrev-preview a { color: var(--brand-fg); text-decoration: underline; }

/* Sidebar de versões */
.docrev-versions {
  background: var(--surface-2);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 0;
}
.docrev-versions-collapse {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.docrev-versions-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
  flex-shrink: 0;
}
.docrev-versions-head::-webkit-details-marker { display: none; }
.docrev-versions-head::after {
  content: "▾";
  font-size: 10px;
  color: var(--text-mute);
  margin-left: 4px;
  transition: transform .15s;
}
.docrev-versions-collapse:not([open]) .docrev-versions-head::after {
  transform: rotate(-90deg);
}
.docrev-versions-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0;
  margin-left: auto;
}
.docrev-versions-list {
  list-style: none;
  margin: 0; padding: 8px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.docrev-version {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: var(--font-sans);
}
.docrev-version:hover {
  border-color: var(--brand-fg);
  background: var(--bg-2);
}
.docrev-version-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.docrev-version-origem {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.docrev-version-origem[data-origem="ia"] {
  background: var(--c-blue-bg, var(--bg-2));
  color: var(--c-blue, var(--text-dim));
  border-color: var(--c-blue, var(--border));
}
.docrev-version-origem[data-origem="manual"] {
  background: var(--c-emerald-bg);
  color: var(--c-emerald);
  border-color: var(--c-emerald);
}
.docrev-version-data {
  font-size: 11px;
  color: var(--text);
  font-family: var(--font-mono);
}
.docrev-version-hint {
  font-size: 10px; color: var(--text-mute);
  font-style: italic;
}
.docrev-version.is-current {
  border-color: var(--brand-fg);
  background: var(--bg-2);
  cursor: default;
}
.docrev-version.is-current:hover {
  background: var(--bg-2);
}
.docrev-version.is-current .docrev-version-hint {
  color: var(--brand-fg); font-style: normal; font-weight: 600;
}
.docrev-versions-empty {
  padding: 14px;
  font-size: 11px; color: var(--text-mute);
  font-style: italic;
  text-align: center;
}

/* Action bar (rodapé) */
.docrev-foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.docrev-foot-info {
  font-size: 11px; color: var(--text-mute);
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docrev-foot-actions {
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.docrev-foot-actions .btn {
  height: 36px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s;
}
.docrev-foot-actions .btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
}
.docrev-foot-actions .btn-ghost:hover {
  background: var(--bg-2); border-color: var(--border-strong);
}
.docrev-foot-actions .btn-primary {
  background: var(--brand-fg); color: var(--brand-on-fg, #fff);
  border: 1px solid var(--brand-fg);
}
.docrev-foot-actions .btn-primary:hover {
  background: var(--brand-fg-strong); border-color: var(--brand-fg-strong);
}
.docrev-foot-actions .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Mobile / tablet — empilha colunas, sidebar vira details colapsada */
@media (max-width: 900px) {
  .docrev-main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    overflow: auto;
  }
  .docrev-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .docrev-pane-preview { border-bottom: 1px solid var(--border); }
  .docrev-versions {
    border-bottom: 0;
  }
  .docrev-versions-collapse:not([open]) .docrev-versions-list { display: none; }
}
@media (max-width: 700px) {
  .docrev-head { padding: 12px 14px; flex-wrap: wrap; }
  .docrev-head-right { width: 100%; justify-content: space-between; }
  .docrev-foot { padding: 10px 14px; flex-wrap: wrap; }
  .docrev-foot-info { width: 100%; }
  .docrev-foot-actions { width: 100%; justify-content: flex-end; }
  .docrev-textarea { padding: 14px 16px; font-size: 12px; }
  .docrev-preview { padding: 14px 16px; font-size: 13px; }
}

/* ============================================================
   FASE 7 — ABA "DOCUMENTOS"
   Listagem centralizada de propostas + contratos.
   Reusa --surface, --border, --row-* etc. para herdar dark mode.
============================================================ */
.secao-documentos { display: block; }

.docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.docs-head-l {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.docs-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-bg);
  color: var(--brand-fg);
}
.docs-head-l h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.docs-head-sub { font-size: 12px; }
.docs-head-r .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Linha de filtros */
.docs-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-2, var(--surface));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.docs-filters-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
}
.docs-filters-search svg { color: var(--text-mute); flex-shrink: 0; }
.docs-filters-search input {
  border: 0;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.docs-filters-search .ih-x {
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.docs-filters-search .ih-x:hover { color: var(--text); background: var(--bg-2); }

.docs-filters-selects {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.docs-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.docs-filter-item label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
}
.docs-filter-item select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.docs-filters-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.docs-filters-dates .muted { font-size: 12px; }
.docs-filters-dates .date-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
}

.docs-filtros-limpar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Tabela de documentos */
.docs-lista {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.docs-row-head {
  display: grid;
  grid-template-columns: minmax(220px, 2.4fr) minmax(180px, 1.6fr) 110px 130px 150px 160px;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  background: var(--bg-2, #f7f8f5);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.docs-row-head .d-acts { text-align: right; }

.docs-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.4fr) minmax(180px, 1.6fr) 110px 130px 150px 160px;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  transition: background 0.15s;
}
.docs-row:last-child { border-bottom: 0; }
.docs-row:hover { background: var(--row-bg-hover, var(--bg-2)); }

.docs-row .d-titulo {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
.docs-row .d-lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: 12px;
}
.docs-row .d-lead-nome {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-row .d-lead-etapa {
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.docs-row .d-lead-nome.is-removed {
  color: var(--text-mute);
  font-style: italic;
}

/* Pílula de tipo */
.docs-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.docs-pill[data-tipo="proposta"] {
  color: var(--c-blue);
  background: var(--c-blue-bg);
  border-color: var(--c-blue-bg);
}
.docs-pill[data-tipo="contrato"] {
  color: var(--c-emerald);
  background: var(--c-emerald-bg);
  border-color: var(--c-emerald-bg);
}
.docs-pill[data-status="rascunho"] {
  color: var(--c-amber);
  background: var(--c-amber-bg);
  border-color: var(--c-amber-bg);
}
.docs-pill[data-status="finalizado"] {
  color: var(--c-emerald);
  background: var(--c-emerald-bg);
  border-color: var(--c-emerald-bg);
}

.docs-row .d-data {
  font-size: 12.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.docs-row .d-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.docs-row .d-acts button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-dim, var(--text));
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.docs-row .d-acts button:hover {
  background: var(--bg-2);
  color: var(--text);
}
.docs-row .d-acts button.act-pdf:hover { color: var(--c-blue); border-color: var(--c-blue); }
.docs-row .d-acts button.act-del:hover { color: var(--c-red); border-color: var(--c-red); }
.docs-row .d-acts button[disabled] { opacity: 0.4; cursor: not-allowed; }

.docs-vazio {
  padding: 32px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
}
.docs-loading {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
}

@media (max-width: 980px) {
  .docs-row-head, .docs-row {
    grid-template-columns: minmax(160px, 2fr) minmax(120px, 1.2fr) 86px 110px 130px;
  }
  /* Esconde a coluna data em widths intermediários para sobrar espaço pra ações;
     no fim do header/row data fica como title attribute. */
  .docs-row-head .d-data, .docs-row .d-data { display: none; }
  .docs-row .d-acts button span { display: none; }
  .docs-row .d-acts button { padding: 6px 8px; }
}
@media (max-width: 720px) {
  .docs-head { padding: 12px 14px; }
  .docs-filters { padding: 10px 14px; }
  .docs-row-head { display: none; }
  .docs-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .docs-row .d-titulo { white-space: normal; }
  .docs-row .d-data { display: block; font-size: 12px; }
  .docs-row .d-acts {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .docs-row .d-acts button span { display: inline; }
}

/* ============================================================
   FASE 7 — Modal "Novo documento"
============================================================ */
.modal-docs-novo {
  width: min(680px, 96vw);
  max-width: 680px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.docs-novo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.docs-novo-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.docs-novo-head .icon-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--text-mute);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.docs-novo-head .icon-btn:hover { background: var(--bg-2); color: var(--text); }

.docs-novo-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.docs-novo-pane[hidden] { display: none; }

.docs-novo-filtros {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.docs-novo-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
}
.docs-novo-search svg { color: var(--text-mute); flex-shrink: 0; }
.docs-novo-search input {
  border: 0;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.docs-novo-filtros select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  color: var(--text);
}

.docs-novo-lista {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  min-height: 220px;
  max-height: 50vh;
}
.docs-novo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0;
  cursor: pointer;
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s;
}
.docs-novo-card:hover {
  background: var(--bg-2);
  border-color: var(--brand-fg);
}
.docs-novo-card-l {
  flex: 1;
  min-width: 0;
}
.docs-novo-card-nome {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-novo-card-meta {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
}
.docs-novo-card-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--bg-2);
  color: var(--text-mute);
}
.docs-novo-vazio {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}

/* Painel B (escolher tipo) */
.docs-novo-pane-tipo { padding: 18px; }
.docs-novo-lead-resumo {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}
.docs-novo-tipos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.docs-novo-tipo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  color: var(--text);
}
.docs-novo-tipo-btn:hover {
  background: var(--bg-2);
  border-color: var(--brand-fg);
}
.docs-novo-tipo-btn:active { transform: scale(0.98); }
.docs-novo-tipo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-bg);
  color: var(--brand-fg);
  margin-bottom: 4px;
}
.docs-novo-tipo-titulo {
  font-size: 15px;
  font-weight: 700;
}
.docs-novo-tipo-sub {
  font-size: 11.5px;
  color: var(--text-mute);
  text-align: center;
}
.docs-novo-pane-tipo-foot {
  display: flex;
  justify-content: flex-start;
}
.docs-novo-pane-tipo-foot .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 520px) {
  .docs-novo-tipos { grid-template-columns: 1fr; }
}