/* =====================================================================
 * 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; }

/* ---- Ficha do lead no modal. */
.crm-cf__ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); }
.crm-cf__ficha dt { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.crm-cf__ficha dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .crm-cf__ficha { grid-template-columns: minmax(0, 1fr); } }

/* ---- 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; }