/* =====================================================================
 * CRM de interessados — quadro Kanban (pages/interessados.js) e o modal
 * "Configurar CRM" (components/crmConfig.js).
 *
 * So tokens SEMANTICOS: vale nos dois temas sem override. A cor da etapa
 * (--etapa-cor, escolhida pelo admin) so pinta ELEMENTO GRAFICO — ponto e
 * faixa —, nunca fundo de texto: nao ha contraste garantido em cima dela.
 * ===================================================================== */

/* `display` do autor vence [hidden] do navegador (ja aconteceu aqui). */
.crm-cf [hidden], .crm-cfg [hidden] { display: none !important; }

.crm-cf__barra { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.crm-cf__funil { width: auto; min-width: 200px; }
.crm-cf__busca { flex: 1 1 260px; max-width: 420px; }

/* O quadro rola de lado DENTRO de si; a pagina nunca. */
.crm-cf__quadro {
  display: flex; gap: var(--space-4); align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: var(--space-3);
}
.crm-coluna {
  flex: 0 0 280px; min-width: 0;
  display: flex; flex-direction: column;
  min-height: 240px;
  max-height: calc(100dvh - var(--header-height, 64px) - 220px);
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--etapa-cor, var(--serie-neutra));
  border-radius: var(--radius-md);
}
.crm-coluna__cabeca { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
.crm-coluna__ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--etapa-cor, var(--serie-neutra)); }
.crm-coluna__nome {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .9375rem; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-coluna__conta { font-size: .8125rem; font-weight: 700; color: var(--text-secondary); }
.crm-coluna__lista {
  flex: 1 1 auto; overflow-y: auto;
  list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start;
}
.crm-coluna__vazia {
  padding: var(--space-4) var(--space-3);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .875rem; text-align: center;
}
.crm-coluna--alvo { outline: 2px solid var(--color-primary); outline-offset: 2px; background: var(--bg-surface-hover); }

/* minmax(0, 1fr): a coluna implicita (auto) do grid crescia ate o nome do
   contato, e o rodape vazava do card mesmo com nowrap + ellipsis. */
.crm-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.crm-card[draggable="true"] { cursor: grab; }
.crm-card--arrastando { opacity: .45; }
.crm-card--salvando { opacity: .65; }
.crm-card__abrir {
  display: grid; gap: 2px; min-width: 0; min-height: 44px; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.crm-card__abrir:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); }
.crm-card__escolinha { font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.crm-card__local { font-size: .8125rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.crm-card__meta {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-2);
  font-size: .8125rem; color: var(--text-secondary);
}
.crm-card__faixa { font-weight: 600; }
.crm-card__obs {
  margin: 0; font-size: .8125rem; color: var(--text-secondary); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crm-card__rodape { display: flex; align-items: center; gap: var(--space-1); }
.crm-card__contato {
  flex: 1 1 auto; min-width: 0; font-size: .8125rem; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Celular: uma etapa por vez (abas + a etapa em largura cheia). */
.crm-cf__abas {
  display: flex; gap: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-bottom: var(--space-3); padding-bottom: var(--space-1);
}
.crm-aba {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border-color); border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--text-primary);
  font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.crm-aba[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.crm-cf__quadro--uma { overflow: visible; }
.crm-cf__quadro--uma .crm-coluna { flex: 1 1 100%; max-height: none; }
/* O nome ja esta na aba: o cabecalho some da vista, mas fica para o leitor de tela. */
.crm-cf__quadro--uma .crm-coluna__cabeca {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- "Mover para..." (bottom sheet no celular, dialogo no desktop). */
.crm-mover { display: grid; gap: var(--space-2); }
.crm-mover__grupo {
  margin: var(--space-2) 0 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.crm-mover__opcao {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.crm-mover__opcao:hover { background: var(--bg-surface-hover); }
.crm-mover__opcao[aria-current="true"] { border-color: var(--color-primary); }
.crm-mover__opcao small { margin-left: auto; color: var(--text-muted); font-weight: 500; }

/* ---- Configurar CRM. */
.crm-cfg { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); }
@media (max-width: 767.98px) { .crm-cfg { grid-template-columns: minmax(0, 1fr); } }
.crm-cfg__lista { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.crm-cfg__funil {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer;
}
.crm-cfg__funil[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.crm-cfg__selo { margin-left: auto; }
.crm-cfg__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.crm-cfg__form .form-control { flex: 1 1 160px; }
.crm-cfg__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.crm-cfg__etapa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: var(--space-2); align-items: center; }
.crm-cfg__cor {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--etapa-cor); cursor: pointer;
}
.crm-cfg__paleta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.crm-cfg__amostra { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; background: var(--amostra); cursor: pointer; }
.crm-cfg__amostra[aria-pressed="true"] { border-color: var(--text-primary); }
.crm-cfg__personalizada { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .875rem; color: var(--text-secondary); }
.crm-cfg__personalizada input { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }

/* ---- Selos do card (Etapa G). Status leva a PALAVRA (badge-cf), nunca so a cor. */
.crm-card__novo { flex: none; }
.crm-card__tarefa {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-size: .8125rem; color: var(--text-secondary);
}

/* ---- Contador de leads novos no menu (app.js). Texto sobre a primaria = on-primary. */
.nav-contador-cf {
  margin-left: auto; flex: none;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.bottom-nav__tab[data-route="interessados"] { position: relative; }
.bottom-nav__tab .nav-contador-cf { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }

/* ---- Popup do lead (components/crmLead.js). Vive no <body> (promoverModais). */
.crm-lead [hidden] { display: none !important; }
.crm-lead .modal-content { border-radius: var(--radius-panel); }
@media (max-width: 767.98px) { .crm-lead .modal-content { border-radius: 0; } }
.crm-lead__cabeca { align-items: flex-start; gap: var(--space-3); }
.crm-lead__identidade { flex: 1 1 auto; min-width: 0; }
.crm-lead .modal-title { overflow-wrap: anywhere; }
.crm-lead__contato { margin: var(--space-1) 0 0; font-size: .875rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.crm-lead__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.crm-lead__etapa { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.crm-lead__acoes { display: flex; gap: var(--space-1); margin-left: auto; }
.crm-lead__acoes .is-desabilitado { opacity: .45; pointer-events: none; }
.crm-lead__excluir { color: var(--color-danger); }
.crm-lead__abas { margin: var(--space-3) var(--space-4) 0; }
.crm-lead__conta:empty { display: none; }
.crm-lead__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 575.98px) { .crm-lead__grade { grid-template-columns: minmax(0, 1fr); } }
.crm-lead__campo { min-width: 0; }
.crm-lead__campo--largo { margin-top: var(--space-3); }
.crm-lead__mensagem { margin: var(--space-3) 0 0; font-size: .875rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.crm-lead__rodape { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.crm-lead__linha-form { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.crm-lead__linha-form--tarefa { grid-template-columns: minmax(0, 1fr) minmax(12rem, auto) auto; }
@media (max-width: 575.98px) { .crm-lead__linha-form, .crm-lead__linha-form--tarefa { grid-template-columns: minmax(0, 1fr); } }

.crm-linha { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.crm-linha__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); }
.crm-linha__icone {
  width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.crm-linha__item--aviso_falhou .crm-linha__icone,
.crm-linha__item--aviso_sem_destino .crm-linha__icone { background: var(--color-danger-soft); color: var(--color-danger-ink); }
:root[data-theme='dark'] .crm-linha__item--aviso_falhou .crm-linha__icone,
:root[data-theme='dark'] .crm-linha__item--aviso_sem_destino .crm-linha__icone { background: rgba(255, 255, 255, 0.07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .crm-linha__item--aviso_falhou .crm-linha__icone,
  :root:not([data-theme='light']) .crm-linha__item--aviso_sem_destino .crm-linha__icone { background: rgba(255, 255, 255, 0.07); }
}
.crm-linha__titulo { margin: 0; font-weight: 700; color: var(--text-primary); }
.crm-linha__texto { margin: 2px 0 0; color: var(--text-primary); overflow-wrap: anywhere; white-space: pre-wrap; }
.crm-linha__meta, .crm-linha__vazia { margin: 2px 0 0; font-size: .8125rem; color: var(--text-muted); }

.crm-tarefas { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.crm-tarefa {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-2);
  padding: var(--space-2); background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-card);
}
.crm-tarefa__check { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.crm-tarefa__titulo { margin: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.crm-tarefa--feita .crm-tarefa__titulo { text-decoration: line-through; color: var(--text-muted); }
.crm-tarefa__prazo { margin: 2px 0 0; font-size: .8125rem; color: var(--text-secondary); }

/* ---- Cabecalho de Interessados: Tarefas e Configurar lado a lado. */
.crm-cf__acoes-topo { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Faixa de metricas (components/crmMetricas.js). */
.crm-metricas { margin-bottom: var(--space-4); }
.crm-metricas [hidden] { display: none !important; }
.crm-metricas__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.crm-metricas__titulo { flex: 1 1 auto; margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.crm-metricas__periodo { flex: none; max-width: 100%; }
.crm-metricas__etapas {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
:root[data-theme='dark'] .crm-metricas__etapas { box-shadow: none; border: 1px solid var(--card-border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .crm-metricas__etapas { box-shadow: none; border: 1px solid var(--card-border); }
}

/* ---- Painel de tarefas (components/crmTarefasPainel.js). */
.crm-painel-tarefas { display: grid; gap: var(--space-3); }
.crm-painel-tarefas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.crm-painel-tarefas__item {
  display: grid; gap: 2px; width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3);
  background: var(--bg-surface); color: var(--text-primary); text-align: left; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-control); font: inherit;
}
.crm-painel-tarefas__item:hover { background: var(--bg-surface-hover); }
.crm-painel-tarefas__titulo { font-weight: 700; overflow-wrap: anywhere; }
.crm-painel-tarefas__lead, .crm-painel-tarefas__prazo { font-size: .8125rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.crm-painel-tarefas__vazio { padding: var(--space-4); text-align: center; color: var(--text-muted); }

/* ---- Tipo da etapa no Configurar CRM: linha propria, abaixo do nome. */
.crm-cfg__tipo { grid-column: 2 / -1; }

/* ---- Modal "Avisos de novos interessados" (components/crmAvisos.js). */
.crm-avisos .modal-content { border-radius: var(--radius-panel); }
@media (max-width: 767.98px) { .crm-avisos .modal-content { border-radius: 0; } }
.crm-avisos__bloco { padding: var(--space-4); background: var(--bg-muted); border-radius: var(--radius-card); }
.crm-avisos__bloco + .crm-avisos__bloco { margin-top: var(--space-4); }
.crm-avisos__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.crm-avisos__titulo { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.crm-avisos__icone {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.crm-avisos__chave { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; }
.crm-avisos__sub { margin: var(--space-4) 0 var(--space-2); }
.crm-avisos__atalho { margin: var(--space-2) 0 0; }
.crm-avisos__add { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.crm-avisos__add .form-control { flex: 1 1 220px; min-width: 0; }
.crm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crm-chips:empty { display: none; }
.crm-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%;
  padding-left: var(--space-3); background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-full);
}
.crm-chip__texto { min-width: 0; overflow-wrap: anywhere; font-size: .875rem; color: var(--text-primary); }
.crm-chip__remover {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-full); background: none; color: var(--text-secondary); cursor: pointer;
}
.crm-chip__remover:hover { color: var(--color-danger); }
.crm-chip__remover:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }