/* 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-accent); background: var(--ds-accent); color: var(--bg);
  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-ficha-cabeca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s2) var(--ds-s4); }
.ct-atalhos { display: flex; flex-wrap: wrap; gap: var(--ds-s3); font-size: var(--ds-fs-sm); }
.ct-atalhos a { color: var(--ink-accent); min-height: 32px; display: inline-flex; align-items: center; }
.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; } }