/* ── Captação de leads (prefixo cp-) ──
   Reaproveita crm-metricas.css (mx-*: KPIs, cartões, tabelas, barras) e o filtro com seleção
   múltipla mf-* de css/pages/crm/filtros.css. Cores dos gráficos: captados e convertidos (paleta validada para daltonismo). */
:root {
  --cp-cap: #00909a;      /* captados */
  --cp-conv: #c95b10;     /* convertidos */
  --cp-gap: #eceae4;      /* período sem dados importados */
}

.cp-toolbar { flex-wrap: wrap; row-gap: 10px; }

.cp-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.cp-filters .mx-clear { margin-left: 2px; }

/* Cobertura dos dados */
.cp-cover { padding: 12px 16px 12px; margin-bottom: 14px; }
.cp-cover-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-cover-h b { font-size: 12.5px; }
.cp-cover-h span { font-size: 12px; color: var(--muted); }
.cp-track { position: relative; height: 30px; border-radius: 8px; background: #f6f5f1; overflow: hidden; display: flex; }
.cp-track > div { height: 100%; display: flex; align-items: center; padding: 0 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid #fff; min-width: 0; }
.cp-track .leg { background: color-mix(in srgb, var(--cp-cap) 18%, #fff); color: #0b5d63; }
.cp-track .gap { background: repeating-linear-gradient(135deg, var(--cp-gap) 0 6px, #f7f6f2 6px 12px); color: #8a857b; }
.cp-track .crm { background: color-mix(in srgb, var(--primary) 26%, #fff); color: var(--primary); }
.cp-track .fut { background: transparent; color: #b5b0a5; font-weight: 500; }
.cp-sel { position: absolute; top: 0; bottom: 0; border: 2px solid var(--primary); border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 2px #fff inset; }
.cp-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 5px; font-size: 10.5px; color: #a29e94; }
.cp-months span { padding-left: 2px; }

/* KPIs: 6 colunas */
.cp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cp-kpis .kpi .m b { color: var(--text); font-weight: 600; }

/* Canais */
.cp-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cp-ch { appearance: none; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 13px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; position: relative; }
.cp-ch:hover { border-color: #c9c4b9; }
.cp-ch.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.cp-ch.off { opacity: .55; }
.cp-ch-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.cp-ch-h .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.cp-ch-h small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ghost); }
.cp-ch-n { display: flex; align-items: baseline; gap: 8px; }
.cp-ch-n b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cp-ch-n span { font-size: 12px; color: var(--muted); }
.cp-ch-m { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); gap: 8px; }
.cp-ch-m b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; background: #f1efea; }
.cp-split i { display: block; height: 100%; }
.cp-split-l { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.cp-split-l span { display: inline-flex; align-items: center; gap: 5px; }
.cp-split-l i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.cp-split-l b { color: var(--text); font-weight: 600; }
.cp-ch .cp-none { font-size: 12px; color: var(--ghost); }

/* Gráfico no tempo */
.cp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.cp-sw.cap { background: var(--cp-cap); }
.cp-sw.conv { background: var(--cp-conv); }
.cp-sw.gap { background: repeating-linear-gradient(135deg, #dcd8cf 0 3px, #f3f1ec 3px 6px); }
.mx-wrap.cp-time { height: 250px; }

/* Abas da tabela de origem */

.cp-table tbody tr { cursor: pointer; }
.cp-table tbody tr:hover td { background: #faf9f6; }
.cp-table tbody tr.sel td { background: var(--primary-soft); }
.cp-table td.who { max-width: 380px; }
.cp-table td.who .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-table td.who small { display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-table td.who small code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #9a958a; overflow: hidden; text-overflow: ellipsis; }
.cp-table td.who .vid { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #fbe9e7; color: #b23a2b; }
.cp-table td.who .src { flex: none; font-size: 10.5px; font-weight: 600; color: var(--ghost); }
.cp-table tr.none td.who .t { color: #9a958a; font-style: italic; font-weight: 500; }
.cp-table .mx-cellbar.conv i b { background: color-mix(in srgb, var(--cp-conv) 70%, transparent); }
.cp-table .mx-cellbar.cap i b { background: color-mix(in srgb, var(--cp-cap) 70%, transparent); }
.cp-tfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px 0; font-size: 12px; color: var(--muted); }
.cp-tfoot button { appearance: none; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary); cursor: pointer; padding: 0; }

/* Funil */
.cp-funnel { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cp-fs { display: grid; grid-template-columns: 150px 1fr 190px; gap: 12px; align-items: center; }
.cp-fs .l { font-size: 12.5px; font-weight: 600; }
.cp-fs .l small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ghost); }
.cp-fs .b { height: 22px; background: #f3f1ec; border-radius: 5px; overflow: hidden; }
.cp-fs .b i { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--cp-cap) 78%, transparent); }
.cp-fs.last .b i { background: color-mix(in srgb, var(--cp-conv) 85%, transparent); }
.cp-fs .v { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.cp-fs .v b { font-weight: 700; }
.cp-fs .v small { display: block; font-size: 11.5px; color: var(--muted); }
.cp-fs .v small.drop { color: #a13544; }

.cp-delay-hero { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 10px; }
.cp-delay-hero b { white-space: nowrap; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.cp-delay-hero span { font-size: 12.5px; color: var(--muted); }

/* Matriz de classificação (patrimônio × aporte) */
.cp-matrix { display: grid; grid-template-columns: 118px repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.cp-mx-corner { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--ghost); padding: 0 6px 4px 0; }
.cp-mx-corner span:first-child { align-self: flex-end; }
.cp-mx-col, .cp-mx-row { font-weight: 800; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.cp-mx-col { align-items: center; justify-content: flex-end; padding-bottom: 4px; }
.cp-mx-row { justify-content: center; align-items: center; text-align: center; padding: 0 6px; }
.cp-mx-col small, .cp-mx-row small { font-size: 10.5px; font-weight: 500; color: var(--ghost); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cp-mx-cell { border-radius: 10px; min-height: 76px; padding: 9px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--text); font-variant-numeric: tabular-nums; text-align: center; min-width: 0; }
.cp-mx-cell .k { font-size: 11px; font-weight: 800; letter-spacing: .06em; opacity: .7; }
.cp-mx-cell b { font-size: 17px; font-weight: 700; line-height: 1.2; }
.cp-mx-cell small { font-size: 11.5px; color: var(--muted); }
.cp-mx-cell.dark { color: #fff; }
.cp-mx-cell.dark small, .cp-mx-cell.dark .k { color: rgba(255, 255, 255, .85); opacity: 1; }
.cp-mx-cell.empty b { color: var(--ghost); font-weight: 500; }
.cp-mx-cell.small { outline: 1px dashed rgba(0, 0, 0, .18); outline-offset: -4px; }

/* Popover de filtro */
#cpPop.mf-pop { width: 360px; }
.cp-pop-foot { gap: 12px; }
.cp-pop-foot .c-btn--link { white-space: nowrap; }
.cp-pop-foot span { flex: 1; text-align: right; white-space: nowrap; }
.cp-pop-foot .mf-done[disabled] { opacity: .5; cursor: not-allowed; }
#cpContent.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }
.cp-table tbody tr:focus-visible td { outline: none; background: var(--primary-soft); }

@media (max-width: 1200px) {
  .cp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cp-matrix { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .cp-mx-col small, .cp-mx-row small { display: none; }
  .cp-mx-corner { visibility: hidden; }
  .cp-mx-cell { min-height: 58px; padding: 6px 2px; border-radius: 8px; }
  .cp-mx-cell b { font-size: 13px; }
  .cp-mx-cell small { font-size: 10px; }
  .cp-fs .v small { white-space: normal; }
  .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-seg-label { display: none; }
  .cp-channels { grid-template-columns: 1fr; }
  .cp-fs { grid-template-columns: 96px 1fr 84px; gap: 8px; }
  .cp-track > div { font-size: 0; padding: 0; }
  .mx-head { flex-wrap: wrap; gap: 10px; }
}

.cp-q .mx-alert b { font-size: 13.5px; font-weight: 700; }
.cp-q .mx-alert small { font-size: 12px; }