/* CRM — a bancada de captação (face APP_MODE=crm). Proposta aprovada em
   docs/mockup-crm-c-fichario.html; o índice, em docs/mockup-crm-d-lista.html;
   a ficha enxuta e o painel, em docs/mockup-crm-e-centro.html.

   Uma tela só, em três colunas que se tocam e rolam cada uma por si:

     índice   gelo    captação, clientes ativos e os nunca procurados
     meio     folha   o painel do dia, ou a ficha do município aberto: só
                      leitura, nada se escreve aqui
     agente   gelo    a conversa do município, só com ficha aberta: no
                      painel a coluna fecha

   O município aberto "sai" do índice e entra na ficha: a linha dele fica da
   cor da folha. Todas as classes levam o prefixo crm-, porque este arquivo é
   carregado também nas instâncias de prefeitura (stylesheet_link_tag :app) e
   lá existem .ficha-* e .historico de outro desenho.

   Cor como mecanismo de atenção, uma por etapa (Crm::TONES): azul é
   Demonstração, amarelo é Proposta enviada, verde é Ativo, e o resto é cinza.
   Vale no nome do índice, no selo de etapa e no círculo da etapa de agora.
   O contador de dias do índice tem escala própria (cinza, amarelo,
   vermelho). O título da ficha fica fora dessas cores. */

:root {
  --crm-lateral:   light-dark(var(--slate-175), var(--slate-875));
  --crm-lateral-2: light-dark(var(--slate-200), var(--slate-800));
  /* o nome do município na ficha: entre a tinta e o cinza dos selos */
  --crm-titulo:    light-dark(var(--slate-700), var(--slate-300));
}

/* A tela inteira cabe na janela; quem rola são as colunas. */
.crm-corpo { padding-bottom: 0; overflow: hidden; }

/* A coluna do assistente só existe com ficha aberta. No painel a terceira
   coluna tem largura zero e o chat fica inerte; abrir uma ficha leva a
   coluna à largura de --crm-agente-w, e a transição faz o chat entrar da
   direita. Voltar ao painel faz o caminho de volta.

   A largura acompanha a janela: 30% dela, entre 392px (até 1.300px de
   janela) e 560px (a partir de ~1.870px). */
.crm-bancada {
  --crm-agente-w: clamp(392px, 30vw, 560px);
  block-size: calc(100dvh - var(--barra-h));
  display: grid; grid-template-columns: 264px minmax(0, 1fr) 0px;
  overflow-x: clip;
  transition: grid-template-columns .28s ease;

  @media (prefers-reduced-motion: reduce) { transition: none; }
}

.crm-bancada:where(:has(> .crm-agente:not([inert]))) { grid-template-columns: 264px minmax(0, 1fr) var(--crm-agente-w); }

/* O frame da coluna do meio não tem caixa: a ficha ou o painel dentro dele
   é que ocupa a coluna da grade. */
.crm-meio { display: contents; }

/* ── o índice ──────────────────────────────────────────────────────────── */
.crm-indice {
  background: var(--crm-lateral); color: var(--ink);
  overflow-y: auto; padding: 0 0 32px;
  border-inline-end: 1px solid var(--line-strong);
}

/* A busca fica presa no topo da coluna enquanto a lista rola por baixo. */
.crm-busca {
  display: block; position: sticky; top: 0; z-index: 1;
  background: var(--crm-lateral); padding: 24px 16px 14px;

  & input {
    inline-size: 100%; font-family: var(--sans); font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px;
    &::placeholder { color: var(--ink-faint); }
    &:focus { outline: none; border-color: var(--accent); }
  }
}

/* O nome longo é cortado com reticências numa linha só; o nome inteiro fica
   no title do link. */
.crm-lista {
  list-style: none; margin: 0; padding: 0;

  & a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 5px 20px; color: inherit; font-size: 14px;
    &:hover { background: var(--crm-lateral-2); }
    & > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  /* o nome na cor do status, a mesma do círculo da ficha */
  & [data-tom="out"] { color: var(--ink-muted); }
  & [data-tom="mine"] { color: var(--accent); }
  & [data-tom="wait"] { color: var(--warn); }
  & [data-tom="done"] { color: var(--ok); }

  /* o foco pelo teclado é o fundo do hover, e não o anel azul: a linha vai
     de borda a borda e o anel ficava cortado em dois traços */
  & a:focus-visible { outline: none; background: var(--crm-lateral-2); }

  /* o município aberto: a linha fica da cor da ficha e se liga a ela */
  & [aria-current] a { background: var(--surface); font-weight: 700; }
}

/* Os blocos levam um filete leve em cima. O primeiro, e o bloco sem nada
   visível acima, perdem o filete. */
.crm-secao {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  &[hidden] { display: none; }
}

.crm-secao--sem-filete, .crm-busca + .crm-secao { margin-top: 0; padding-top: 0; border-top: 0; }

/* O título do bloco, em mono caixa-alta apagado, como a section-rule da
   ficha, mas sem régua: o filete do bloco já separa. */
.crm-secao-titulo {
  margin: 4px 0 4px; padding: 0 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Os nunca procurados: tinta apagada, para o olho saber que o mapa é maior
   que o funil sem disputar atenção com quem está nele. */
.crm-secao--inativos {
  & a { color: var(--ink-faint); &:hover { color: var(--ink); } }
  & [aria-current] a { color: var(--ink); }
}

/* Os perdidos: o nome no vermelho do selo de atraso, sem selo ao lado. */
.crm-secao--perdidos {
  & [data-tom] { color: var(--urgent); }
}

/* O selo de etapa, no índice, no histórico e na proposta: letra na cor sobre a
   folha levemente tingida, com contorno fino da mesma cor. O cinza fica sem
   fundo, só com o contorno. Largura fixa, para os selos alinharem em coluna;
   80px é o que "Proposta" pede, e quem mostra o nome inteiro da etapa
   muda --crm-selo-w. */
.crm-selo {
  display: inline-block; inline-size: var(--crm-selo-w, 80px); text-align: start; white-space: nowrap;
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r);
  color: var(--crm-c, var(--ink-muted));
  background: color-mix(in oklch, var(--crm-c, var(--ink-muted)) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--crm-c, var(--ink-muted)) 35%, transparent);
}

.crm-selo--mine { --crm-c: var(--accent); }
.crm-selo--wait { --crm-c: var(--warn); }
.crm-selo--late { --crm-c: var(--urgent); }
.crm-selo--done { --crm-c: var(--ok); }
.crm-selo--out  { background: transparent; }

/* ── a ficha ───────────────────────────────────────────────────────────── */
.crm-ficha { background: var(--surface); overflow-y: auto; padding: 24px 48px 80px; min-inline-size: 0; }

/* Sem o botão de voltar, o título do painel ganha o respiro que o botão dá
   na ficha. */
.crm-ficha--painel { padding-block-start: 62px; }

/* O botão fica no canto da faixa do município, a 24px do topo e da borda,
   na linha toda da grade e sem fundo até o hover. A seta fica mais perto
   da borda que o rótulo do outro lado. */
.crm-voltar {
  grid-column: 1 / -1; justify-self: start; margin: 0 0 12px -24px; --btn-bg: transparent; --btn-pad-start: 12px;

  &:hover { border-color: var(--line-strong); }
}

.crm-mast {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-bottom: 18px;

  /* fora das cores de etapa: o azul é da Demonstração */
  & h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--crm-titulo); }
  & .onde { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }
  & .onde b { color: var(--ink); font-weight: 600; }
  & .desde { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-align: right; line-height: 1.7; }
  & .desde b { color: var(--ink); font-weight: 600; }
}

/* O frame do funil (régua e registros), para trocar de etapa sem levar a
   ficha ao topo. Bloco, para a margem da régua colapsar com a da seção de
   cima como antes. */
.crm-funil { display: block; }

/* Uma parada por etapa: um círculo com quantos
   registros o município tem nela, de diâmetro vindo da view (--q, área
   proporcional à contagem), o nome e o dia em que chegou. Etapa sem
   registro é um ponto vazado. O trilho passa atrás, de centro a centro:
   azul até a etapa de agora (--feito, fração do trilho), cinza depois.
   A etapa de agora tem o miolo tingido. O círculo é link: abre embaixo os
   registros da etapa; o escolhido engrossa e os outros clareiam. Sem
   escolha, vale a etapa de agora. */
.crm-paradas {
  position: relative; display: flex; justify-content: space-between; list-style: none; margin: 28px 0 34px; padding: 0;

  &::before, &::after { content: ""; position: absolute; inset-inline-start: 60px; inset-block-start: 20.25px; block-size: 1.5px; }
  &::before { inset-inline-end: 60px; background: var(--line-strong); }
  &::after { inline-size: calc((100% - 120px) * var(--feito, 0)); background: color-mix(in oklch, var(--ink-faint) 55%, var(--line-strong)); }

  & li { position: relative; z-index: 1; inline-size: 120px; --crm-c: var(--ink-muted); }
  /* a cor de cada etapa, a mesma do selo (.crm-selo--*) */
  & [data-tom="mine"] { --crm-c: var(--accent); }
  & [data-tom="wait"] { --crm-c: var(--warn); }
  & [data-tom="done"] { --crm-c: var(--ok); }
  /* o perdido no vermelho do índice, o pausado em cinza */
  & [data-fora="lost"] { --crm-c: var(--urgent); }
  & .col { display: grid; justify-items: center; gap: 8px; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; text-align: center; }
  & .q {
    display: grid; place-items: center; box-sizing: border-box; inline-size: 32px; block-size: 32px; margin-block: 5px;
    border: 1.5px solid var(--crm-c); border-radius: 50%; background: var(--surface);
    font-family: var(--mono); font-size: 14px; color: var(--crm-c);
  }
  & .vazia .q { inline-size: 12px; block-size: 12px; margin-block: 15px; border-color: var(--line-strong); }
  & .vazia .col { color: var(--ink-faint); font-weight: 500; }
  & .agora .q { background: color-mix(in oklch, var(--crm-c) 12%, var(--surface)); border-width: 2.5px; font-weight: 600; }
  & .agora .col { color: var(--ink); font-weight: 700; }
  & .dt { margin-block-start: -4px; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); }
  & .agora .dt { color: var(--crm-c); font-weight: 600; }

  & a:hover .q { border-width: 2.5px; }
  & [aria-current] .q { border-width: 3px; }
  & [aria-current] .rot { color: var(--crm-c); }
  &:has([aria-current]) a:not([aria-current]) {
    color: var(--ink-faint);
    & .q { border-color: color-mix(in oklch, var(--crm-c) 35%, var(--surface)); color: color-mix(in oklch, var(--crm-c) 45%, var(--surface)); }
  }
}

/* A área dos registros: a altura mínima segura a página parada quando a
   etapa escolhida tem menos registros que a anterior. */
.crm-etapa { min-block-size: 360px; }

/* Os registros da etapa escolhida: uma tabela com a data e o que
   aconteceu, do mais novo ao mais antigo; por onde e com quem, quando
   importa, vai no próprio registro. Na etapa de agora, o próximo passo
   abre a tabela, com a data em vermelho quando venceu. Filete leve entre
   linhas. */
.crm-registros {
  inline-size: 100%; border-collapse: collapse; margin: 0 0 34px; font-size: 14px;

  & th { padding: 10px 12px 8px 0; text-align: start; font-size: 12px; font-weight: 600; color: var(--ink-faint); border-block-end: 1px solid var(--line); }
  & td { padding: 10px 12px 10px 0; vertical-align: baseline; color: var(--ink-muted); border-block-end: 1px solid var(--line); }
  & .dt { inline-size: 72px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  & .fato { color: var(--ink); }
  & .proximo td { color: var(--ink); font-weight: 600; }
  & .proximo .dt { color: var(--ink); }
  & .vencido .dt { color: var(--urgent); }
}

/* A seção do município, acima do funil (docs/mockup-crm-ficha-hub.html,
   alternativa B com o mapa da A). Ocupa a coluna de borda a borda, num
   cinza um tom abaixo da folha: em cima o nome e o mapa, embaixo os fatos
   em colunas com filete entre elas. Fatos novos entram como mais uma
   coluna. */
.crm-hub {
  /* 40px até o funil: a margem colapsa com a de cima da régua, que é menor */
  /* -24px em cima: a faixa encosta no topo, sem o padding da ficha */
  margin: -24px -48px 40px; padding: 24px 48px 0; background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  /* o mapa cede primeiro quando a coluna estreita; o nome guarda 240px */
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 400px); column-gap: 24px; align-items: center;

  /* fora das cores de etapa: o azul é da Demonstração */
  & h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--crm-titulo); }
}

/* O mapa: o estado em cinza com divisa da cor da faixa, e o município da
   ficha por cima na cor da sua faixa de habitantes (o fill vem da view, em
   var(--tN); Crm::Municipality#population_band). Campina Grande é um anel
   com o nome; o traço até a sede só liga os dois, a distância escrita é a
   da estrada. Coordenadas e tamanhos em unidades do viewBox (1000 de
   largura, desenhado a 400px).

   As sete faixas vão do frio (menos habitantes que a média) ao quente
   (mais). O quente para no âmbar porque vermelho é só de prazo. Os tons
   são médios, misturados ao cinza em oklab (em oklch o âmbar gira pelo
   verde a caminho do cinza); a faixa neutra é um cinza escuro, para não
   sumir no cinza do estado. */
.crm-mapa {
  margin: 0; position: relative;
  --t-neutro: light-dark(var(--slate-200), var(--slate-700));
  --t-3: var(--blue-500);
  --t-2: color-mix(in oklab, var(--blue-400) 70%, var(--t-neutro));
  --t-1: color-mix(in oklab, var(--blue-400) 38%, var(--t-neutro));
  --t0:  var(--slate-450);
  --t1:  color-mix(in oklab, var(--amber-400) 38%, var(--t-neutro));
  --t2:  color-mix(in oklab, var(--amber-400) 75%, var(--t-neutro));
  --t3:  color-mix(in oklab, var(--amber-400) 55%, var(--amber-700));

  & svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
  --crm-uf: color-mix(in oklch, var(--line-strong) 55%, var(--surface-2));
  & .uf { fill: var(--crm-uf); stroke: var(--surface-2); stroke-width: 2.5; stroke-linejoin: round; }
  & .este { fill: var(--crm-titulo); stroke: var(--ink-muted); stroke-width: 2; }
  & .rota { stroke: var(--ink-muted); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
  & .cg { fill: var(--surface-2); stroke: var(--ink-muted); stroke-width: 4; }
  & .sede { fill: var(--surface-2); stroke: var(--crm-titulo); stroke-width: 4; }
  & text { font-family: var(--mono); font-size: 30px; fill: var(--ink); paint-order: stroke; stroke: var(--surface-2); stroke-width: 9px; stroke-linejoin: round; }
}

/* A legenda: as sete faixas em fila, a do município maior e contornada. */
.crm-escala {
  margin: 10px 0 0; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap;

  & .faixas { display: flex; align-items: center; gap: 2px; }
  & i { inline-size: 18px; block-size: 9px; border-radius: 2px; }
  & i[aria-current] { block-size: 15px; outline: 1.5px solid var(--ink); outline-offset: 1px; }
}

/* Os fatos: uma coluna por fato, papel apagado em cima, o número grande ou
   o nome em tinta, o telefone em mono. */
.crm-fatos {
  grid-column: 1 / -1; margin: 20px -48px 0; padding: 16px 48px 20px; border-block-start: 1px solid var(--line);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);

  & div { display: grid; gap: 3px; align-content: start; padding-inline: 20px; border-inline-start: 1px solid var(--line); }
  & div:first-child { padding-inline-start: 0; border: 0; }
  & dt { font-size: 12px; color: var(--ink-faint); }
  & dd { margin: 0; font-size: 13.5px; color: var(--ink); }
  & .grande { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .nome { font-weight: 600; }
  & .sub { font-size: 12.5px; color: var(--ink-muted); }
  & .tel { font-family: var(--mono); font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
  & .falta { color: var(--ink-faint); }
}

/* ── o painel ──────────────────────────────────────────────────────────── */

/* A escala das etapas no painel, do pior ao melhor: perdido em vermelho,
   pausado em laranja, contato em âmbar, demonstração em amarelo-verde,
   proposta enviada em verde claro, ativo em verde escuro. Vale para as
   barras e o mapa; o índice e os selos seguem Crm::TONES. Em oklch, com a
   matiz andando de 27 a 152; o claro sobe no meio para o amarelo não virar
   oliva. No escuro, todos sobem de claro. */
:root {
  --crm-e-perdido:  light-dark(oklch(.56 .19 27),  oklch(.64 .18 27));
  --crm-e-pausado:  light-dark(oklch(.66 .17 48),  oklch(.72 .15 48));
  --crm-e-contato:  light-dark(oklch(.76 .15 75),  oklch(.80 .14 75));
  --crm-e-demo:     light-dark(oklch(.78 .16 112), oklch(.82 .15 112));
  --crm-e-proposta: light-dark(oklch(.66 .15 140), oklch(.74 .14 140));
  --crm-e-ativo:    light-dark(oklch(.50 .12 152), oklch(.62 .13 152));
}

/* Barras e mapa na mesma faixa, alinhados pela base. O mapa tem teto de
   largura: na tela larga ele parava de crescer só na borda da coluna. */
.crm-panorama {
  display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 520px); gap: 48px; align-items: end;
  margin: 32px 0 40px;
}

/* O mapa do painel: o estado em cinza e cada município com etapa na cor
   dela. O perdido vai em hachura vermelha, riscado em vez de pintado
   cheio. Com uma etapa escolhida, só os municípios dela ficam na cor; os
   outros voltam ao cinza do estado. */
.crm-mapa--etapas {
  & [data-etapa="paused"]        { --crm-c: var(--crm-e-pausado); }
  & [data-etapa="contact"]       { --crm-c: var(--crm-e-contato); }
  & [data-etapa="demo"]          { --crm-c: var(--crm-e-demo); }
  & [data-etapa="proposal_sent"] { --crm-c: var(--crm-e-proposta); }
  & [data-etapa="active"]        { --crm-c: var(--crm-e-ativo); }
  & [data-etapa="lost"]          { --crm-c: var(--crm-e-perdido); }
  & a use { fill: var(--crm-c); stroke: var(--surface-2); stroke-width: 2; stroke-linejoin: round; }
  & a:hover use { fill: color-mix(in oklab, var(--crm-c), var(--ink) 20%); stroke: var(--ink); }
  & [data-etapa="lost"] use { fill: url(#crm-hachura); stroke: var(--crm-e-perdido); }
  & .fundo { fill: color-mix(in oklch, var(--crm-e-perdido) 14%, var(--surface)); }
  & .risco { stroke: var(--crm-e-perdido); stroke-opacity: .45; stroke-width: 4; }
  &[data-filtro] a:not([aria-current]) use { fill: var(--crm-uf); stroke: var(--surface-2); }
}

/* A travessia entre o painel e a ficha (crm-travel). Só durante ela o mapa
   e a coluna do meio têm nome de view transition. O nome é do <svg>, e não
   da figura: os dois têm o mesmo viewBox, e a legenda da ficha fica de fora
   para não deformar a troca. Na ida o mapa grande vai até o lugar do mapa
   da ficha, trocando de desenho no caminho, e a ficha entra da direita por
   cima do painel, que recua um pouco e esmaece. Na volta é o inverso: a
   ficha sai pela direita e o painel volta do recuo. O índice e o resto da
   tela ficam no retrato do root, parados (controls.css).

   Os retratos da coluna ficam do tamanho em que estavam, presos ao canto
   de cima: sem isso o navegador estica um para a caixa do outro. O recorte
   anda junto com o recuo: o que passa da borda da coluna some, em vez de
   cobrir o índice. */
:root[data-crm-mapa] {
  & .crm-mapa svg { view-transition-name: crm-mapa; }
  & .crm-ficha { view-transition-name: crm-folha; }
}

::view-transition-group(crm-mapa) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
::view-transition-old(crm-mapa), ::view-transition-new(crm-mapa) { animation-duration: .55s; animation-timing-function: ease-in-out; }

::view-transition-group(crm-folha) { animation: none; }
::view-transition-old(crm-folha), ::view-transition-new(crm-folha) {
  animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-fill-mode: both;
  block-size: 100%; object-fit: none; object-position: left top; clip-path: inset(0);
}

:root[data-crm-mapa="ida"]::view-transition-old(crm-folha) { animation-name: crm-painel-sai; }
:root[data-crm-mapa="ida"]::view-transition-new(crm-folha) { animation-name: crm-ficha-entra; }
:root[data-crm-mapa="volta"]::view-transition-old(crm-folha) { animation-name: crm-ficha-sai; }
:root[data-crm-mapa="volta"]::view-transition-new(crm-folha) { animation-name: crm-painel-entra; }

@keyframes crm-painel-sai   { to   { opacity: 0; translate: -12% 0; clip-path: inset(0 0 0 12%); } }
@keyframes crm-painel-entra { from { opacity: 0; translate: -12% 0; clip-path: inset(0 0 0 12%); } }
@keyframes crm-ficha-entra  { from { translate: 100% 0; } }
@keyframes crm-ficha-sai    { to   { translate: 100% 0; } }

/* O balão do mapa, no desenho do [data-tip] (tip.css): tinta escura, letra
   clara, acima do município e centrado nele. O nome em cima; embaixo a
   etapa com a amostra da cor. Abre sem transição. */
.crm-mapa-dica {
  position: absolute; z-index: 5; pointer-events: none; margin: 0;
  translate: -50% calc(-100% - 8px);
  display: grid; gap: 2px; inline-size: max-content;
  font-family: var(--sans); font-size: 12px; line-height: 1.4;
  color: var(--surface); background: var(--ink); border-radius: var(--r); padding: 6px 10px;

  &[hidden] { display: none; }
  & b { font-size: 13px; font-weight: 700; }
  & i { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 2px; margin-inline-end: 6px; background: var(--crm-c); }
}

/* Uma coluna por etapa das barras (Crm::PANEL): a contagem em cima, a barra e o nome na
   base. A altura vem da view em --n (fração da maior etapa); a cor é a da
   etapa na escala do painel (--crm-e-*), a mesma do mapa ao lado. Etapa
   vazia fica sem barra, com o 0 claro.
   A coluna é o link do filtro; com uma escolhida, as outras clareiam. */
.crm-barras {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);

  & [data-etapa="paused"]        { --crm-c: var(--crm-e-pausado); }
  & [data-etapa="contact"]       { --crm-c: var(--crm-e-contato); }
  & [data-etapa="demo"]          { --crm-c: var(--crm-e-demo); }
  & [data-etapa="proposal_sent"] { --crm-c: var(--crm-e-proposta); }
  & [data-etapa="active"]        { --crm-c: var(--crm-e-ativo); }

  & .col { display: grid; grid-template-rows: 160px auto; color: inherit; }
  & .trilho { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; border-block-end: 1px solid var(--line-strong); }
  & .haste { inline-size: 56px; block-size: calc(var(--n) * 130px); border-radius: 4px 4px 0 0; background: var(--crm-c); }
  & .q { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
  & .vazia .q { color: var(--ink-faint); font-weight: 400; margin-block-end: 4px; }
  & .rot { padding-block-start: 10px; font-size: 13px; font-weight: 600; color: var(--ink-muted); text-align: center; }

  & a:hover .haste { background: color-mix(in oklch, var(--crm-c), var(--ink) 15%); }
  & a:hover .rot, & [aria-current] .rot { color: var(--crm-c); }
  &:has([aria-current]) a:not([aria-current]) {
    & .haste { background: color-mix(in oklch, var(--crm-c) 35%, var(--surface)); }
    & .q, & .rot { color: var(--ink-faint); }
  }
}

.crm-fora {
  margin: -14px 0 30px; font-size: 13px; color: var(--ink-faint);
  & b { color: var(--ink-muted); font-weight: 600; }
  /* a amostra da hachura do perdido no mapa */
  & .amostra { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 2px; vertical-align: -1px; margin-inline-start: 2px; }
  & [data-etapa="lost"] {
    background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--crm-e-perdido) 45%, transparent) 0 2px,
      color-mix(in oklch, var(--crm-e-perdido) 14%, var(--surface)) 2px 4px);
  }
}

/* O resumo da etapa escolhida, embaixo das barras. Uma linha por município,
   inteira link para a ficha: o nome e quem decide; o último registro; o
   próximo passo. A data na frente de cada fato, em mono. Vermelho só no
   próximo passo vencido. Sem régua entre linhas. */
.crm-resumo {
  list-style: none; margin: 0 0 34px; padding: 0;

  & a {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline;
    padding: 10px 12px; margin-inline: -12px; border-radius: var(--r); color: var(--ink); font-size: 14px;
    &:hover { background: var(--surface-2); }
  }
  & .nome { font-weight: 700; font-size: 14.5px; }
  & .quem { display: block; margin-block-start: 2px; font-size: 13px; color: var(--ink-muted); }
  & .fato, & .proximo { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; }
  & .fato { color: var(--ink-muted); }
  & .dt { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  & .proximo { color: var(--ink); }
  & .vencido .dt { color: var(--urgent); font-weight: 600; }
}

.crm-nada { margin: 0; padding: 18px 0; color: var(--ink-muted); font-size: 14.5px; }

/* ── o agente ──────────────────────────────────────────────────────────── */
.crm-agente {
  background: var(--crm-lateral); border-inline-start: 1px solid var(--line-strong);
  display: flex; flex-direction: column; min-block-size: 0; overflow: hidden;

  /* o conteúdo fica na largura final enquanto a coluna abre e fecha */
  & > * { min-inline-size: calc(var(--crm-agente-w) - 1px); }

  /* os botões dentro do chat: um degrau menores que os de tela */
  & .btn { min-width: 0; padding: 7px 14px; font-size: 12.5px; }
}

.crm-agente-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--line-strong);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;

  /* o município da conversa, ou "Todos os municípios" no painel */
  & .sobre { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* os botões ao lado do Enviar, um degrau menores */
.crm-agente-acoes {
  display: flex; gap: 6px;

  & .btn { padding: 5px 12px; font-size: 12px; }
}

/* A conversa nasce colada no fim: column-reverse põe a origem da rolagem
   embaixo, e a mensagem nova aparece sem script. Dentro, a ata vem na ordem
   do dia. */
.crm-conversa {
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto;
  display: flex; flex-direction: column-reverse;
  & > * { flex-shrink: 0; }
}

/* A ata: sem balão, a hora na margem e o texto ao lado. O que a pessoa
   escreveu em tinta cheia; o que o assistente diz, apagado. */
.crm-ata { padding: 6px 22px 20px; display: flex; flex-direction: column; }

.crm-ent {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);

  &:first-child { border-top: 0; }
  & .hora { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 2px; }
  & > p { margin: 0; font-size: 14.5px; white-space: pre-line; }
}

.crm-ent--diz > p { color: var(--ink-muted); }

/* O envio antes da resposta (crm-composer): a fala entra subindo, e o
   assistente mostra a roda enquanto o modelo organiza. */
.crm-pendente { animation: crm-entra .2s ease-out; }

.crm-roda {
  display: inline-block; inline-size: 12px; block-size: 12px; margin-inline-end: 8px; vertical-align: -1px;
  border: 2px solid var(--line-strong); border-block-start-color: var(--accent); border-radius: 50%;
  animation: crm-gira .8s linear infinite;
}

@keyframes crm-entra { from { opacity: 0; translate: 0 6px; } }
@keyframes crm-gira { to { rotate: 1turn; } }

@media (prefers-reduced-motion: reduce) {
  .crm-pendente { animation: none; }
  .crm-roda { animation-duration: 2.4s; }
}

/* As imagens de uma fala, em miniatura. Na ata, abrem inteiras noutra aba;
   no campo de escrever, são botões que tiram a imagem antes do envio. */
.crm-miniaturas {
  display: flex; flex-wrap: wrap; gap: 6px;

  &:empty { display: none; }
  & a, & button { display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; cursor: pointer; }
  & button:hover { border-color: var(--accent); }
  & img { display: block; block-size: 72px; inline-size: auto; max-inline-size: 160px; object-fit: cover; }
}

/* O texto que o assistente leu das imagens, fechado: abre para conferir. */
.crm-transcricao {
  margin-top: 8px; font-size: 13px; color: var(--ink-muted);

  & summary { cursor: pointer; color: var(--ink-faint); }
  & p { margin: 6px 0 0; white-space: pre-line; }
}

/* na ata, as duas ficam na coluna do texto, ao lado da hora */
.crm-miniaturas:where(.crm-ent > *), .crm-transcricao:where(.crm-ent > *) { grid-column: 2; align-self: start; }
.crm-miniaturas:where(.crm-ent > p + *) { margin-top: 8px; }

/* A proposta: um formulário na folha, com os campos do app abertos para
   corrigir. Confirmado, fecha em texto, uma linha por lançamento. */
.crm-proposta {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  display: grid;

  & .rot { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
  & .rot span { font-weight: 400; color: var(--ink-muted); font-size: 13px; }
  & .duvida { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
  & .duvida b { font-weight: 600; }
  & .acoes { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-strong); }
  & .acoes .push { margin-left: auto; }
  & .fechada { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--ink-faint); }
}

/* um lançamento aberto: município e etapa na primeira linha, fato e próximo
   passo ocupando a largura */
.crm-lanc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
  padding: 12px 14px 14px; border-top: 1px solid var(--line);

  &:first-of-type { border-top: 0; }
  & .field { margin: 0; }
  & .field > label { font-size: 11px; margin-bottom: 4px; }
  & .field > label span { font-weight: 400; color: var(--ink-faint); }
  & .field input, & .field select { font-size: 14px; padding: 7px 10px; block-size: auto; }
  & .wide { grid-column: 1 / -1; }
  & .troca { display: flex; align-items: center; gap: 8px; }
  & .seta { color: var(--ink-faint); font-size: 12px; }
  & .selectwrap { inline-size: 160px; }
  & .quando { display: grid; grid-template-columns: 1fr 140px; gap: 8px; }
}

/* um lançamento gravado: nome e troca de etapa na primeira linha, o fato e
   o próximo passo embaixo; texto, sem campo */
.crm-lido {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline;
  padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13.5px;

  &:first-of-type { border-top: 0; }
  & b { font-weight: 600; }
  /* fato e próximo passo na largura toda, quebrando linha: passo em nowrap
     numa coluna auto espremia o fato numa palavra por linha */
  & .fato { color: var(--ink-muted); grid-column: 1 / -1; }
  & .passo { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
  & .passo b { color: var(--ink); }
  & .troca { display: inline-flex; align-items: center; gap: 6px; justify-self: end; white-space: nowrap; }
  & .seta { color: var(--ink-faint); font-size: 12px; }
}

/* A leitura do lead: o que o assistente nota no conjunto da ficha. Texto na
   folha, sem caixa e sem cor: é sugestão, não registro. */
.crm-leitura {
  font-size: 13.5px;

  & .rot { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
  & ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
}

/* O campo de escrever: folha sobre o gelo, no rodapé da coluna. */
.crm-compor {
  border-top: 1px solid var(--line-strong); padding: 14px 22px 18px; display: grid; gap: 8px;

  & .field { margin: 0; }
  & .field textarea { background: var(--surface); border-color: var(--line); min-height: 64px; max-height: 40vh; field-sizing: content; resize: none; }
  & .linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  & .crm-dica { margin: 0; font-size: 12px; color: var(--ink-faint); }
  & .btn { padding: 7px 16px; font-size: 13px; }
}

/* Imagem arrastada sobre a coluna: o campo de escrever vira o alvo. */
.crm-compor:where(.is-over *) { outline: 1px dashed var(--accent); outline-offset: -6px; background: var(--surface); }

/* ── o interesse ───────────────────────────────────────────────────────── */

/* Um rosto do interesse, do 1 (nenhum) ao 5 (muito), cada um na sua cor:
   do vermelho ao verde passando pelo âmbar, com os tons do meio misturados.
   Na ata, fica embaixo da fala que o trouxe, em cor cheia. */
.crm-rosto {
  --crm-rc: var(--ink-muted);
  display: grid; place-items: center; color: var(--crm-rc);

  &[data-nivel="1"] { --crm-rc: var(--urgent); }
  &[data-nivel="2"] { --crm-rc: color-mix(in oklch, var(--urgent), var(--warn)); }
  &[data-nivel="3"] { --crm-rc: var(--warn); }
  &[data-nivel="4"] { --crm-rc: color-mix(in oklch, var(--warn), var(--ok)); }
  &[data-nivel="5"] { --crm-rc: var(--ok); }
  & svg { inline-size: 18px; block-size: 18px; }
}
.crm-rosto:where(.crm-ent > *) { grid-column: 2; justify-self: start; margin-top: 6px; }

/* A pergunta no campo de escrever, quando vence: os cinco rostos a 45% da
   cor; o marcado em cor cheia, com a pastilha a 12% da cor dele. O rádio
   fica escondido atrás do rosto, mas é ele que segura o envio. */
.crm-interesse {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; min-inline-size: 0;

  & legend { float: left; font-size: 13px; color: var(--ink-muted); }
  & .rostos { display: flex; gap: 2px; margin-inline-start: auto; }
  & input { position: absolute; opacity: 0; pointer-events: none; }
}
.crm-rosto:where(.crm-interesse *) {
  inline-size: 32px; block-size: 32px; border-radius: var(--r); cursor: pointer;
  color: color-mix(in oklch, var(--crm-rc) 45%, var(--surface));

  &:hover { color: var(--crm-rc); }
  &:has(:checked) { color: var(--crm-rc); background: color-mix(in oklch, var(--crm-rc) 12%, var(--surface)); }
  &:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
  & svg { inline-size: 22px; block-size: 22px; }
}

/* Sem rosto marcado, o Enviar fica apagado. */
.btn--secondary:where(.crm-compor:has(.crm-interesse :invalid) *) { opacity: .45; }