/* Contatos (#117) — e base visual das telas do CRM (.ct-*): Contatos da agência e Campos
   personalizados usam as mesmas classes. Só tokens (var(--ds-*), --ink, --line…), nada solto
   em html/body: esta folha entra no app inteiro. */

.ct-tela { display: flex; flex-direction: column; gap: var(--ds-s3); width: 100%; min-width: 0; padding-bottom: var(--ds-s8); }
.ct-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-s3); }
.ct-pergunta h1 { margin: 0; font-size: var(--ds-fs-xl); }
.ct-grita { margin: var(--ds-s1) 0 0; font-size: var(--ds-fs-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-agir { color: var(--ds-warn); }
.ct-sussurro { color: var(--muted); font-size: var(--ds-fs-sm); font-weight: 400; }
.ct-cinza { color: var(--muted-2); }
.ct-mono { font-family: var(--ds-font-mono); font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }
.ct-rotulo { display: block; color: var(--muted); font-size: var(--ds-fs-xs); }

.ct-acoes { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: center; }
.ct-acoes input[type="search"] { min-height: 40px; min-width: 220px; padding: 0 var(--ds-s3); border-radius: var(--ds-r-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }

.ct-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--ds-s4);
  border-radius: var(--ds-r-sm); border: 1px solid var(--ds-pri); background: var(--ds-pri); color: var(--ds-on-pri);
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ct-btn:disabled { opacity: .5; cursor: default; }
.ct-btn-sec { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 600; }
.ct-btn-perigo { background: transparent; color: var(--ds-err); border-color: var(--line); font-weight: 600; }
.ct-btn:focus-visible, .ct-chip:focus-visible, .ct-nome:focus-visible, .ct-valor:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ct-limpar { background: none; border: 0; color: var(--ink-accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0 var(--ds-s1); min-height: 32px; }

/* chips de filtro */
.ct-filtros { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: center; }
.ct-chip-caixa { position: relative; display: inline-flex; align-items: center; }
.ct-chip { min-height: 36px; padding: 0 var(--ds-s3); border-radius: var(--ds-r-pill); border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font: inherit; font-size: var(--ds-fs-sm); cursor: pointer; white-space: nowrap; }
.ct-chip.on { color: var(--ink); border-color: var(--ds-accent); }
.ct-chip b { font-weight: 700; color: var(--ink); }
.ct-chip-mais { border-style: dashed; }
.ct-chip-x { margin-left: -6px; min-width: 28px; min-height: 36px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: var(--ds-fs-lg); }
.ct-addcol { margin-left: auto; }
.ct-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 240px; max-width: 340px; max-height: 360px; overflow: auto;
  padding: var(--ds-s2); border: 1px solid var(--line); border-radius: var(--ds-r); background: var(--panel-2, var(--panel)); box-shadow: var(--ds-shadow-2); }
.ct-pop-dir { left: auto; right: 0; }
.ct-pop ul { list-style: none; margin: 0; padding: 0; }
.ct-pop li button { width: 100%; min-height: 36px; text-align: left; padding: 0 var(--ds-s2); border: 0; border-radius: var(--ds-r-sm);
  background: none; color: var(--ink); font: inherit; cursor: pointer; }
.ct-pop li button:hover, .ct-pop li button.on { background: var(--line-soft); }
.ct-pop form { display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-pop input, .ct-pop select, .cp-campos input, .cp-campos select, .cp-campos textarea, .ct-campos input, .ct-campos select, .ct-mapa select {
  min-height: 36px; padding: 0 var(--ds-s2); border-radius: var(--ds-r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }
.ct-pop-grupo + .ct-pop-grupo { margin-top: var(--ds-s2); border-top: 1px solid var(--line-soft); padding-top: var(--ds-s2); }
.ct-pop-titulo { color: var(--muted); font-size: var(--ds-fs-xs); margin-bottom: var(--ds-s1); }
.ct-pop-rodape { display: block; margin-top: var(--ds-s2); padding-top: var(--ds-s2); border-top: 1px solid var(--line-soft); color: var(--ink-accent); font-size: var(--ds-fs-sm); }
.ct-check { display: flex; gap: var(--ds-s2); align-items: center; min-height: 32px; cursor: pointer; }

/* lista */
.ct-nome { display: inline-flex; gap: var(--ds-s2); align-items: center; max-width: 260px; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-nome:hover { color: var(--ink-accent); }
.ct-pill { display: inline-block; padding: 1px var(--ds-s2); border-radius: var(--ds-r-pill); border: 1px solid var(--line); font-size: var(--ds-fs-xs); color: var(--ink); }
.ct-paginas { display: flex; gap: var(--ds-s3); align-items: center; justify-content: center; }
.ct-skel-lista { display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-skel-lista .ds-skel, .ct-skel-bloco .ds-skel { height: 44px; border-radius: var(--ds-r-sm); }
.ct-skel-bloco { display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-vazio { padding: var(--ds-s6); border: 1px dashed var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.ct-vazio h2 { margin: 0 0 var(--ds-s2); font-size: var(--ds-fs-lg); }
.ct-erro { color: var(--ds-err); }
.ct-ok { color: var(--ds-ok); }

/* painel lateral (ficha, importação, formulário de campo) */
.ct-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(520px, 100vw); overflow-y: auto;
  padding: var(--ds-s4); border-left: 1px solid var(--line); background: var(--bg); box-shadow: var(--ds-shadow-2);
  display: flex; flex-direction: column; gap: var(--ds-s3); overscroll-behavior: contain; }
.ct-painel-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-s2); }
.ct-painel-topo h2 { margin: 0; font-size: var(--ds-fs-xl); overflow-wrap: anywhere; }
.ct-fechar { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--ds-r-sm); background: var(--panel); color: var(--ink); font-size: var(--ds-fs-xl); cursor: pointer; }
.ct-bloco { border-top: 1px solid var(--line-soft); padding-top: var(--ds-s3); }
.ct-bloco h3 { margin: 0 0 var(--ds-s2); font-size: var(--ds-fs-md); }
.ct-tipos { display: flex; flex-wrap: wrap; gap: var(--ds-s1); margin-bottom: var(--ds-s2); }
.ct-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-tempo li { display: grid; grid-template-columns: 76px 1fr auto; gap: 0 var(--ds-s2); padding: var(--ds-s2) 0; border-bottom: 1px solid var(--line-soft); }
.ct-tempo-q { color: var(--muted); font-size: var(--ds-fs-xs); font-variant-numeric: tabular-nums; }
.ct-tempo-t { min-width: 0; }
.ct-tempo-v { font-variant-numeric: tabular-nums; text-align: right; }
.ct-tempo-d { grid-column: 2 / 4; overflow-wrap: anywhere; }
.ct-tempo-f { grid-column: 2 / 4; font-size: var(--ds-fs-xs); }
.ct-campos { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: var(--ds-s2) var(--ds-s3); margin: 0; }
.ct-campos dt { color: var(--muted); font-size: var(--ds-fs-sm); }
.ct-campos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ct-campos form { display: flex; gap: var(--ds-s1); }
.ct-valor { min-height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-bottom: 1px dashed var(--line); }
.ct-conv { list-style: none; margin: var(--ds-s2) 0 0; padding: 0; }
.ct-conv li { display: flex; gap: var(--ds-s2); justify-content: space-between; padding: var(--ds-s1) 0; }
.ct-mapa { display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-mapa label { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-s1) var(--ds-s2); align-items: center; }
.ct-mapa label .ct-sussurro { grid-column: 1 / 3; }

@media (max-width: 720px) {
  .ct-acoes input[type="search"] { min-width: 0; width: 100%; }
  .ct-acoes { width: 100%; }
  .ct-acoes form { flex: 1 1 100%; }
  .ct-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--ds-s1); }
  .ct-addcol { margin-left: 0; }
  .ct-pop { position: fixed; left: var(--ds-s2); right: var(--ds-s2); top: auto; bottom: var(--ds-s2); max-width: none; max-height: 60vh; }
  .ct-painel { width: 100vw; border-left: 0; }
  .ct-nome { max-width: 100%; }
  .ct-btn, .ct-chip, .ct-chip-x { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ct-painel { transition: none; } }

/* #1406: respiro da aba e resumo sempre visível no painel. */
.ct-tela { box-sizing: border-box; padding-inline: var(--ds-s4); }
.ct-negocio { display: flex; flex-direction: column; gap: var(--ds-s1); padding-block: var(--ds-s2); border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .ct-tela { padding-inline: var(--ds-s2); }
}

/* ID completo no tooltip e na ficha; a tabela mantém uma linha por contato. */
.ct-tela .ct-id { display: block; max-width: 11ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* #141: filtros em grupos, sem rolagem que recorta os popovers. */
.ct-filtros { flex-wrap: wrap; overflow: visible; align-items: flex-end; }
.ct-filtro-grupo { display: flex; flex-direction: column; gap: var(--ds-s1); min-width: 0; }
.ct-busca { flex: 1 1 220px; }
.ct-busca input { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--line); border-radius: var(--ds-r-sm); background: var(--panel); color: var(--ink); padding: var(--ds-s2); font: inherit; }
.ct-filtros-avancados { display: flex; flex-wrap: wrap; gap: var(--ds-s3); }
.ct-filtros-avancados fieldset { flex: 1 1 300px; min-width: 0; margin: 0; padding: var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r); }
.ct-filtros-avancados legend { color: var(--muted); font-size: var(--ds-fs-sm); }
.ct-ordem-colunas { list-style: none; margin: 0; padding: 0; }
.ct-ordem-colunas li { display: flex; gap: var(--ds-s1); align-items: center; cursor: grab; }
.ct-ordem-colunas li span { flex: 1; }
.ct-ordem-colunas button { min-width: 44px; min-height: 44px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm); }
.ct-ordem-colunas button:disabled { opacity: .35; }
.ct-tela .ds-tabela td .ct-mono { white-space: nowrap; }

/* Onda 2 da migração DS (#145): lista no molde "lista" e Ficha do contato como aba, no molde
   "ficha" (prancha 07). O molde dá cabeçalho, corpo e painel; aqui só o conteúdo. */
.ct-tela .ds-molde-cab .res .ct-grita { margin: 0; }
.ct-tela .ds-molde-filtros { display: block; }
.ct-filtros-bloco { display: flex; flex-direction: column; gap: var(--ds-s3); width: 100%; min-width: 0; }
.ct-trilha { min-height: 32px; text-decoration: none; padding: 0; }
.ct-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 2px solid var(--ds-accent); color: var(--ink-accent); font-size: var(--ds-fs-md); font-weight: 700; }
.ct-ficha-nome { min-width: 0; overflow-wrap: anywhere; }
.ct-ficha-tela .ds-molde-cab .res .ct-mono { color: var(--muted-2); }
.ct-ficha-tela .ds-molde-corpo > .principal { display: flex; flex-direction: column; gap: var(--ds-s4); }
.ct-estagios { list-style: none; margin: 0; padding: var(--ds-s3) var(--ds-s4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s3);
  border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.ct-estagios li { display: flex; gap: var(--ds-s2); align-items: center; min-width: 0; }
.ct-estagios li + li { border-left: 1px solid var(--line-soft); padding-left: var(--ds-s3); }
.ct-estagios small { display: block; }
.ct-estagio-marca { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); color: var(--bg); font-size: var(--ds-fs-xs); }
.ct-estagios li.feito .ct-estagio-marca { background: var(--ds-accent); border-color: var(--ds-accent); }
.ct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s3); }
.ct-kpis .ds-kpi { min-width: 0; }
.ct-kpis .ds-kpi-val, .ct-kpis .ds-kpi-rot, .ct-kpis .ds-kpi-ref { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
.ct-ficha-corpo { border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); min-width: 0; }
.ct-abas { display: flex; gap: var(--ds-s1); padding: 0 var(--ds-s3); border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.ct-aba { min-height: 44px; padding: 0 var(--ds-s3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ct-aba.on { color: var(--ink); border-bottom-color: var(--ds-accent); }
.ct-aba:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.ct-aba-painel { padding: var(--ds-s3) var(--ds-s4); display: flex; flex-direction: column; gap: var(--ds-s3); min-width: 0; }
.ct-aba-titulo { margin: 0; font-size: var(--ds-fs-md); }
.ct-tempo-filtros { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: center; justify-content: space-between; }
.ct-tempo-filtros .ct-tipos { margin: 0; align-items: center; }
.ct-mais-tipos summary { list-style: none; display: inline-flex; align-items: center; }
.ct-mais-tipos summary::-webkit-details-marker { display: none; }
.ct-mais-tipos[open] > .ct-tipos { margin-top: var(--ds-s2); }
.ct-bloco-aba { display: flex; flex-direction: column; gap: var(--ds-s3); }
.ct-lado-nome { overflow-wrap: anywhere; }
.ct-lado-estagio { display: flex; gap: var(--ds-s2); align-items: center; flex-wrap: wrap; }
.ct-lado-bloco { border-top: 1px solid var(--line-soft); padding-top: var(--ds-s3); }
.ct-lado-titulo { margin: 0 0 var(--ds-s2); color: var(--muted); font-size: var(--ds-fs-xs); font-weight: 700; text-transform: var(--ds-label-case); letter-spacing: .04em; }
.ct-toque { display: inline-flex; flex-wrap: wrap; gap: var(--ds-s1); align-items: center; }
.ct-toque .ct-rotulo { flex-basis: 100%; }
.ct-canais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-canais li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: var(--ds-s2); align-items: center; font-size: var(--ds-fs-sm); }
.ct-canais b { font-variant-numeric: tabular-nums; text-align: right; }
.ct-barra { height: 6px; border-radius: var(--ds-r-pill); background: var(--line-soft); overflow: hidden; }
.ct-barra i { display: block; height: 100%; background: var(--ds-accent); }
.ct-skel-curto { height: 24px; border-radius: var(--ds-r-sm); }
@media (max-width: 1100px) { .ct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* .ds-molde-corpo vira coluna com align-items: flex-start: sem stretch o principal cresce com a tabela */
  .ct-tela .ds-molde-corpo > .principal { align-self: stretch; max-width: 100%; }
  .ct-ficha-tela .ds-painel-lateral { position: static; inset: auto; width: auto; max-height: none; border-radius: var(--ds-r-lg); z-index: auto; }
  .ct-estagios { grid-template-columns: 1fr; }
  .ct-estagios li + li { border-left: 0; padding-left: 0; }
  .ct-aba-painel { padding: var(--ds-s3); }
  .ct-tempo li { grid-template-columns: 64px 1fr auto; }
  .ct-kpis .ds-kpi-val { font-size: var(--ds-fs-lg); }
}
/* #156: ficha no modelo All Matters — origem legível, score com composição, funil do modelo,
   o que falta, públicos/conversões e trecho de ligação. */
.ct-origem-curta, .ct-origem-crua { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ct-origem-crua { color: var(--muted); font-size: var(--ds-fs-xs); max-width: 32ch; }
.ct-copiar { display: inline-flex; gap: var(--ds-s2); align-items: center; min-height: 32px; padding: 0 var(--ds-s2); border: 1px solid var(--line);
  border-radius: var(--ds-r-sm); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.ct-copiar:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ct-bruto summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ct-bruto p { margin: var(--ds-s1) 0 0; overflow-wrap: anywhere; font-size: var(--ds-fs-xs); color: var(--muted); }
.ct-score { display: flex; gap: var(--ds-s2); align-items: baseline; margin-bottom: var(--ds-s2); }
.ct-score > b { font-size: var(--ds-fs-xl); font-variant-numeric: tabular-nums; }
.ct-motivos { list-style: none; margin: 0 0 var(--ds-s2); padding: 0; display: flex; flex-direction: column; gap: var(--ds-s2); }
.ct-motivos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--ds-s2); align-items: start; font-size: var(--ds-fs-sm); }
.ct-motivos li small { display: block; }
.ct-motivo-p { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ds-ok); text-align: right; }
.ct-motivos li.neg .ct-motivo-p { color: var(--ds-err); }
.ct-funil-marcos { list-style: none; margin: 0; padding: var(--ds-s3) var(--ds-s4); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.ct-funil-marcos li { display: flex; gap: var(--ds-s2); align-items: center; min-width: 0; }
.ct-funil-marcos li + li { border-left: 1px solid var(--line-soft); padding-left: var(--ds-s3); }
.ct-funil-marcos small { display: block; }
.ct-funil-marcos li.feito .ct-estagio-marca { background: var(--ds-accent); border-color: var(--ds-accent); }
.ct-funil-marcos li.pulou .ct-estagio-marca { border-color: var(--ds-warn); color: var(--ds-warn); }
.ct-falta { display: flex; flex-wrap: wrap; gap: var(--ds-s1) var(--ds-s3); padding: var(--ds-s2) var(--ds-s3); border: 1px solid var(--ds-warn);
  border-radius: var(--ds-r); background: var(--panel); font-size: var(--ds-fs-sm); }
.ct-trecho { grid-column: 2 / 4; margin: var(--ds-s1) 0 0; padding: var(--ds-s2) var(--ds-s3); border-left: 3px solid var(--ds-accent);
  background: var(--line-soft); border-radius: var(--ds-r-sm); white-space: pre-line; overflow-wrap: anywhere; font-size: var(--ds-fs-sm); }
.ct-trecho small { display: block; margin-bottom: var(--ds-s1); }
.ct-tempo-t .ds-badge { margin-right: var(--ds-s1); }
@media (max-width: 1100px) { .ct-funil-marcos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ct-funil-marcos li + li { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) {
  .ct-funil-marcos { grid-template-columns: 1fr; }
  .ct-origem-crua { max-width: 100%; }
}
.ct-cab-origem { display: flex; gap: var(--ds-s1); align-items: baseline; flex: 1 1 100%; min-width: 0; overflow: hidden; }
.ct-cab-origem .ct-origem-curta { display: block; min-width: 0; flex: 1 1 auto; }
.ct-ficha-tela .ds-molde-cab, .ct-ficha-tela .ds-molde-cab .tt, .ct-ficha-tela .ds-molde-cab .res { min-width: 0; max-width: 100%; }
.ct-fluxo { margin: var(--ds-s3) 0; padding: var(--ds-s3) var(--ds-s4); border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.ct-fluxo .ct-aba-titulo { margin-bottom: var(--ds-s2); }

/* #163 · '+ Contato' (painel lateral, como Importar) e 'Virar oportunidade' na ficha */
.ct-novo-form { display: flex; flex-direction: column; gap: var(--ds-s3); }
.ct-novo-form label { display: flex; flex-direction: column; gap: var(--ds-s1); font-weight: 600; }
.ct-novo-form input { min-height: 40px; padding: 0 var(--ds-s3); border-radius: var(--ds-r-sm); border: 1px solid var(--line);
                      background: var(--panel); color: var(--ink); font: inherit; font-weight: 400; }
.ct-novo-form input:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ct-aviso { color: var(--ink); border: 1px solid var(--ds-warn); border-radius: var(--ds-r-sm); padding: var(--ds-s3); }
.ct-novo .ct-ok, .ct-novo .ct-aviso { display: flex; flex-direction: column; gap: var(--ds-s3); }
.ct-novo .ct-ok p, .ct-novo .ct-aviso p { margin: 0; }
.ct-virar { max-width: 640px; }
@media (max-width: 720px) {
  .ct-novo-form input { min-height: 44px; }
}