/* ===========================================================================
   MÓDULO CRM — CRM
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   CRM — "Meu dia" (T-B4) e "Funil de vendas" (T-B3)
   Mockups aprovados; os painéis são public/js/panels/crm-{dia,funil}-panel.js.

   Só consome token declarado em sdk-ui/tokens.css — nenhuma cor literal
   (portão: piso-qualidade.test.js, "os primitivos novos não inventam cor").
   Nada aqui anima: o bloco de movimento reduzido desta folha continua sendo
   a cobertura da página.
   ══════════════════════════════════════════════════════════════════════════ */

.crm-cabecalho {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem;
  padding: 0 1rem 0.85rem; border-bottom: 1px solid var(--border);
}

.crm-cabecalho h3 { margin: 0 0 0.15rem; font-size: 1.35rem; letter-spacing: -0.015em; }

.crm-cabecalho-sub { font-size: 0.82rem; color: var(--muted-foreground); }

.crm-cabecalho-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }

.crm-tag--atencao  { background: var(--warning-bg-soft); color: var(--warning-strong); }

.crm-tag--ganho    { background: var(--success-bg-soft); color: var(--success-strong); }

.crm-tag--perdida  { background: var(--error-bg-soft);   color: var(--error-strong); }

.crm-tag--valor    { background: var(--muted); color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }

.crm-tag--contorno { background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }

.crm-conversas-dia {
  font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
  letter-spacing: 0.04em; text-transform: uppercase; margin: 1rem 0 0.5rem; position: relative;
}

.crm-conversas-dia:first-child { margin-top: 0; }

.crm-conversas-item {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.65rem 0.8rem; margin-bottom: 0.55rem;
}

.crm-conversas-item::before {
  content: ""; position: absolute; left: -1.05rem; top: 0.85rem; width: 0.45rem; height: 0.45rem;
  border-radius: 999px; background: var(--background); border: 2px solid var(--muted-foreground);
}

.crm-conversas-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.crm-conversas-item-quando { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; margin-left: auto; }

.crm-conversas-item-texto { margin: 0.45rem 0 0; font-size: 0.85rem; }

.crm-conversas-item-rodape { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--muted-foreground); }

/* ── Meu dia ────────────────────────────────────────────────────────────── */

.crm-dia-corpo { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; }

.crm-fila-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }

.crm-fila-cabecalho h3 { margin: 0; font-size: 0.9rem; font-weight: 600; }

.crm-fila-porque { font-size: 0.78rem; color: var(--muted-foreground); margin-left: auto; }

.crm-contagem {
  font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.45rem; border-radius: 999px;
}

.crm-fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.crm-item {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-md); padding: 0.8rem 0.85rem;
}

.crm-item:focus-within { border-color: var(--ring); }

.crm-item-check { margin-top: 0.15rem; flex-shrink: 0; }

.crm-item-corpo { flex: 1; min-width: 0; }

.crm-item-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.2rem; }

.crm-item-quem { font-size: 0.88rem; font-weight: 600; }

.crm-item-quando { font-size: 0.74rem; color: var(--muted-foreground); margin-left: auto; font-variant-numeric: tabular-nums; }

.crm-item-texto { margin: 0; font-size: 0.85rem; color: var(--card-foreground); }

.crm-item-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted-foreground); }

.crm-item-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }

/* T-F1: link "Ver perfil" no topo do cartão — mesmo tom de `.crm-tag--info`, sem virar etiqueta. */
.crm-item-link { font-size: 0.78rem; color: var(--info-strong); text-decoration: none; }

.crm-item-link:hover { text-decoration: underline; }

/* T-F1: aviso inline de "rascunho vazio" — mesma cor de `.crm-tag--frio`, sem caixa própria (não é um alerta de página, é uma dica de campo). */
.crm-item-aviso { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: var(--error-strong); }

.crm-item-aviso[hidden] { display: none; }

.crm-dia-rodape {
  display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem;
  padding-top: 0.85rem; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted-foreground);
}

.crm-dia-rodape[hidden] { display: none; }

.crm-dia-rodape strong { color: var(--foreground); }

/* ── Funil ──────────────────────────────────────────────────────────────── */

.crm-funil-resumo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--border);
}

.crm-funil-numeros {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-left: auto;
  font-size: 0.76rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}

.crm-funil-numeros strong { color: var(--foreground); }

/* O QUADRO rola na horizontal; a página, nunca (regra do DESIGN.md). */
.crm-funil-quadro {
  display: grid; grid-auto-flow: column; grid-auto-columns: 16.5rem;
  gap: 0.85rem; align-items: start;
  overflow-x: auto; padding: 0.95rem 1rem 1rem;
}

.crm-coluna {
  background: var(--sidebar); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column;
  max-height: 38rem;
}

.crm-coluna-cabecalho { padding: 0.7rem 0.8rem 0.65rem; border-bottom: 1px solid var(--border); }

.crm-coluna-titulo { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.35rem; }

.crm-coluna-titulo h3 {
  margin: 0; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  /* Nome INTEIRO: na ferramenta atual quatro de quatro colunas aparecem
     truncadas, e a etapa é a informação principal da coluna. */
  overflow-wrap: anywhere;
}

.crm-coluna-contagem {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.crm-coluna-soma { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.crm-coluna-apoio { display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; margin-top: 0.15rem; font-size: 0.7rem; color: var(--muted-foreground); }

.crm-coluna-lista { padding: 0.65rem; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; }

.crm-cartao--arrastando { opacity: 0.45; cursor: grabbing; }

.crm-coluna--alvo { outline: 2px dashed var(--primary); outline-offset: -2px; }

.crm-cartao-nome { margin: 0.1rem 0 0.35rem; font-size: 0.83rem; font-weight: 600; line-height: 1.35; }

/* T-G4 — os dois totais da proposta (`valorImplantacao`/`valorMensalidade`),
   só aparecem quando a negociação tem pelo menos um item (ver #htmlDoCartao). */
.crm-cartao-produtos { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.crm-cartao-produtos span { display: inline-flex; align-items: center; gap: 0.25rem; }

.crm-coluna-vazia { margin: 0.65rem; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 1rem 0.8rem; text-align: center; }

.crm-coluna-vazia-titulo { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; }

.crm-coluna-vazia-texto { margin: 0; font-size: 0.74rem; color: var(--muted-foreground); }

@media (max-width: 600px) {
  .crm-cabecalho-acoes { margin-left: 0; }
  .crm-fila-porque { margin-left: 0; width: 100%; }
  .crm-item-quando { margin-left: 0; }
  .crm-funil-numeros { margin-left: 0; }
  .crm-funil-quadro { grid-auto-columns: 14.5rem; }
}

/* Alternância Quadro/Lista — um controle, dois estados, como o zType do
   ZardUI: o ativo usa preenchimento, não uma cor mais forte. */
/* Trocar de funil: uma linha própria entre o cabeçalho e os filtros (Thiago, 20/10/2026). */
.crm-troca-funis-linha { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem 0; }
.crm-troca-funis-linha:has(> .crm-troca-funis[hidden]) { display: none; }
.crm-troca-funis-rotulo { font-size: 0.78rem; font-weight: 500; color: var(--muted-foreground); }
.crm-troca-funis { flex-wrap: wrap; }

.crm-visao[hidden] { display: none; }

.crm-visao {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}

.crm-nav-telas { flex-wrap: wrap; max-width: 100%; } /* cinco telas no alternador: a 390 px quebram em duas linhas em vez de rolar a página de lado */
.crm-visao button {
  appearance: none; background: transparent; border: none;
  font: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--muted-foreground); padding: 0.35rem 0.7rem; cursor: pointer;
}

.crm-visao button:hover { background: var(--secondary); color: var(--foreground); }

.crm-visao button[aria-pressed='true'] { background: var(--primary); color: var(--primary-foreground); }

.crm-visao button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.crm-rel-datas { display: flex; gap: 0.5rem; }

.crm-rel-corpo { padding: 0.85rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

.crm-rel-corpo[aria-busy='true'] { opacity: 0.6; }

.crm-rel-vazio { margin: 0; font-size: 0.82rem; color: var(--muted-foreground); }

.crm-rel-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.6rem; }

.crm-rel-numeros--pequeno { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }

.crm-rel-numero-valor { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

.crm-rel-numero-rotulo { font-size: 0.78rem; color: var(--muted-foreground); }

.crm-rel-numero-apoio { font-size: 0.7rem; color: var(--muted-foreground); }

.crm-rel-numero--ganho .crm-rel-numero-valor { color: var(--success-strong); }

.crm-rel-numero--perda .crm-rel-numero-valor { color: var(--error-strong); }

.crm-rel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; align-items: start; }

.crm-rel-dica { font-size: 0.72rem; color: var(--muted-foreground); }

.crm-rel-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.crm-rel-linha { display: grid; grid-template-columns: minmax(6rem, 1.2fr) minmax(4rem, 2fr) auto auto; align-items: center; gap: 0.6rem; font-size: 0.82rem; }

.crm-rel-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-rel-trilho { height: 0.6rem; background: var(--muted); border-radius: 999px; overflow: hidden; }

.crm-rel-preenchimento { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.crm-rel-preenchimento--perda { background: var(--error-strong); }

.crm-rel-valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.crm-rel-valor small { color: var(--muted-foreground); }

.crm-rel-valor--leve { color: var(--muted-foreground); min-width: 6.5rem; }

.crm-rel-radar h4 { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }

.crm-rel-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }

.crm-rel-tabela-rolagem { overflow-x: auto; }

.crm-rel-filtros .crm-rel-tipo { font-weight: 600; min-width: 14rem; }

.crm-rel-grade--um { grid-template-columns: minmax(0, 1fr); }

.crm-rel-cartao > .crm-rel-dica { display: block; margin: 0 0 0.6rem; }

.crm-rel-meta-input { width: 7rem; min-width: 7rem; padding-inline: 0.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.crm-rel-meta-input[data-campo="ganhas"] { width: 4.25rem; min-width: 4.25rem; }

.crm-rel-meta-progresso { display: flex; flex-direction: column; gap: 0.2rem; min-width: 6.25rem; font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.crm-rel-meta-progresso .crm-rel-trilho { height: 0.45rem; }

.crm-rel-meta--batida .crm-rel-preenchimento { background: var(--success-strong); }

.crm-rel-meta--no-ritmo .crm-rel-preenchimento { background: var(--info-strong); }

.crm-rel-meta--atrasada .crm-rel-preenchimento { background: var(--warning-strong); }

.crm-rel-tabela { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.crm-rel-tabela th { text-align: left; font-weight: 500; font-size: 0.72rem; color: var(--muted-foreground); padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }

.crm-rel-tabela td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }

.crm-rel-tabela tbody tr:last-child td { border-bottom: none; }

.crm-rel-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.crm-rel-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.5rem; font-size: 0.74rem; color: var(--muted-foreground); }

.crm-rel-chave { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-left: 0.4rem; }

.crm-rel-chave--criada, .crm-rel-barra--criada { background: var(--info-strong); }

.crm-rel-chave--ganha, .crm-rel-barra--ganha { background: var(--success-strong); }

.crm-rel-chave--perdida, .crm-rel-barra--perdida { background: var(--error-strong); }

.crm-rel-grafico { display: flex; align-items: flex-end; gap: 0.35rem; height: 11rem; overflow-x: auto; padding-bottom: 0.1rem; }

.crm-rel-coluna { flex: 1 0 1.9rem; min-width: 1.9rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }

.crm-rel-barras { flex: 1; display: flex; align-items: flex-end; gap: 1px; min-height: 0; }

.crm-rel-barra { flex: 1; display: block; border-radius: 2px 2px 0 0; min-height: 0; }

.crm-rel-eixo { font-size: 0.62rem; color: var(--muted-foreground); text-align: center; white-space: nowrap; padding-top: 0.2rem; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .crm-rel-grade, .crm-rel-duas { grid-template-columns: minmax(0, 1fr); }
  .crm-rel-linha { grid-template-columns: minmax(5rem, 1fr) minmax(3rem, 1fr) auto; }
  .crm-rel-linha .crm-rel-valor--leve { display: none; }
}

/* Menu ⋮ — `position: relative` no contêiner, e é ele que o clique-fora
   consulta (`closest('#crm-funil-mais')`). Sem o contêiner, fechar ao clicar
   fora fecharia também ao clicar no próprio botão, que reabriria em seguida. */
.crm-mais { position: relative; display: inline-flex; }

.crm-mais-menu {
  position: absolute; top: calc(100% + 0.25rem); right: 0; z-index: 20;
  min-width: 12rem; display: flex; flex-direction: column;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.25rem;
  /* O design system não tem token de sombra; valor copiado do dropdown do
     sdk-ui/components.css em vez de inventar um `--shadow-*`. */
  box-shadow: 0 8px 24px color-mix(in oklch, black 20%, transparent);
}

/* Regra de autor vence o `[hidden]` nativo — a armadilha do `.zr-alert`. */
.crm-mais-menu[hidden] { display: none; }

.crm-mais-menu button {
  appearance: none; background: transparent; border: none; text-align: left;
  font: inherit; font-size: 0.83rem; color: var(--popover-foreground);
  padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
}

.crm-mais-menu button:hover { background: var(--accent); }

.crm-mais-menu button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.crm-funil-barra {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
  padding: 0.85rem 1rem 0;
}

.crm-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--secondary); color: var(--secondary-foreground);
  border-radius: 999px; font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem;
}

.crm-chip--contagem { font-variant-numeric: tabular-nums; }

.crm-chip-x {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--muted-foreground); font-size: 0.9rem; line-height: 1;
  padding: 0 0 0 0.1rem;
}

.crm-chip-x:hover { color: var(--foreground); }

.crm-chip-x:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 999px; }

.crm-filtros-contagem { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* 🔴 As duas visões usam `display` de autor, então PRECISAM da guarda de
   `[hidden]` — sem ela, alternar Quadro/Lista mostraria as duas ao mesmo
   tempo, com o atributo `hidden` corretamente no DOM e nenhum erro. */
.crm-funil-quadro[hidden] { display: none; }

.crm-funil-lista { padding: 0.95rem 1rem 1rem; }

.crm-funil-lista[hidden] { display: none; }

.crm-lista-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── CRM · tela "Abrir/editar oportunidade" (T-B2b, virou tela cheia na
   sessão 149 — era `.crm-modal--detalhe`) ──────────────────────────────
   Sub-view do MESMO `.logs-panel` do Kanban (`#crmFunilKanbanView` é a
   irmã) — herda `data-largura="cheia"` do painel, não precisa de teto
   próprio. Layout inspirado na tela de negociação do RD Station (só a
   ESTRUTURA — cabeçalho de ações, stepper de etapas, cartões de dado — os
   campos e o dado são só nossos). */
.crm-oport-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.5rem 0.9rem; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.crm-oport-titulo-linha { display: flex; align-items: center; gap: 0.6rem; }

.crm-oport-voltar { background: none; border: none; cursor: pointer; color: var(--muted-foreground); font-size: 1.15rem; padding: 0.2rem; line-height: 1; }

.crm-oport-voltar:hover { color: var(--foreground); }

.crm-oport-titulo { font-size: 1.2rem; font-weight: 700; margin: 0; }

.crm-oport-sub { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted-foreground); }

.crm-oport-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* "Falta salvar": gruda no topo da rolagem enquanto houver mudança não salva na negociação. */
.crm-oport-barra-salvar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0.55rem 0.85rem; background: var(--warning-bg-soft); color: var(--warning-strong); border: 1px solid color-mix(in oklch, var(--warning-strong) 35%, transparent); border-radius: var(--radius); }

.crm-oport-barra-salvar[hidden] { display: none; }

.crm-oport-barra-texto { font-weight: 600; font-size: 0.92rem; }

/* Cartão do funil: a linha da situação (Em andamento / Ganha / Perdida) e o cadastro de motivo de perda ali mesmo. */
.crm-cartao-situacao { margin-bottom: 0.35rem; }

.crm-oport-barra-acoes { display: flex; gap: 0.5rem; }

.crm-oport-etapas { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--secondary); }

.crm-oport-etapas button {
  appearance: none; border: none; border-right: 1px solid var(--border);
  background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.76rem; font-weight: 600;
  padding: 0.6rem 1rem; white-space: nowrap; cursor: pointer;
}

.crm-oport-etapas button.crm-oport-etapa-passada { color: var(--foreground); }

.crm-oport-etapas button[aria-current='true'] { background: var(--primary); color: var(--primary-foreground); }

.crm-oport-etapas button:hover:not([aria-current='true']) { background: var(--accent); color: var(--accent-foreground); }

.crm-oport-corpo { display: grid; grid-template-columns: minmax(280px, 22rem) 1fr; gap: 1.25rem; padding: 1.25rem 1.5rem; align-items: start; }

@media (max-width: 800px) { .crm-oport-corpo { grid-template-columns: 1fr; } }

.crm-oport-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); margin-bottom: 1.1rem; }

.crm-oport-card-titulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); padding: 0.8rem 1rem 0.5rem; }

.crm-oport-card-linhas { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.crm-oport-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 0.75rem; padding: 0.7rem 1rem; border-top: 1px dashed var(--border); font-size: 0.76rem; color: var(--muted-foreground); }

/* T-G4 — "Produtos e serviços", fora do grid de 2 colunas de `.crm-oport-corpo`
   (a tabela precisa da largura inteira). Mesma moldura `.crm-oport-card`, só
   com a margem lateral que o grid dava de graça. */
.crm-oport-card--full { margin: 0 1.5rem 1.25rem; }

.crm-oport-card-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.8rem 1rem 0.5rem; }

.crm-oport-card-titulo-linha .crm-oport-card-titulo { padding: 0; }

.crm-itens-vazio { padding: 0 1rem 1rem; color: var(--muted-foreground); font-size: 0.85rem; }

.crm-itens-tabela-wrap { padding: 0 1rem 1rem; }

/* Documentos da negociação: a lixeira e, depois do clique, "Tirar da negociação? Excluir · Cancelar" na própria linha (quebra em tela pequena). */
.crm-anexo-acoes { display: block; margin-top: 0.2rem; }

.crm-anexo-confirma { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.crm-itens-recorrencia, .crm-itens-desconto { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.15rem; }

.crm-itens-acoes { display: flex; gap: 0.35rem; justify-content: flex-end; }

.crm-oport-rodape { display: flex; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* Busca global (achar e IR até uma negociação) — mockup inspirado no RD
   Station, aprovado nesta sessão. `.crm-modal--busca` reaproveita a moldura
   `.crm-modal`/`.crm-modal-overlay` já genérica; o miolo é próprio porque não
   é formulário (é lista de resultado clicável, sem `.crm-modal-grid`). */
.crm-modal--busca { max-width: 30rem; padding: 0; }

.crm-busca-topo { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem 0.85rem; border-bottom: 1px solid var(--border); }

.crm-busca-topo h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }

.crm-busca-fechar { background: none; border: none; color: var(--muted-foreground); cursor: pointer; font-size: 1.1rem; padding: 0.2rem; line-height: 1; }

.crm-busca-fechar:hover { color: var(--foreground); }

.crm-busca-campo { position: relative; padding: 0.9rem 1.1rem; }

.crm-busca-lupa { position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }

.crm-busca-campo input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--input); background: var(--background); color: var(--foreground);
  border-radius: var(--radius-md); font-size: 0.9rem; padding: 0 2.5rem; height: 2.6rem;
}

.crm-busca-campo input:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent); }

.crm-busca-limpar { position: absolute; right: 1.85rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted-foreground); cursor: pointer; font-size: 0.95rem; padding: 0.2rem; }

.crm-busca-limpar:hover { color: var(--foreground); }

/* Mesma armadilha do `.zr-btn[hidden]` — botão fixa `display` de autor. */
.crm-busca-limpar[hidden] { display: none; }

.crm-busca-secao { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 0 1.1rem 0.5rem; text-transform: uppercase; }

.crm-busca-lista { max-height: 22rem; overflow-y: auto; padding-bottom: 0.6rem; }

.crm-busca-item { display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: left; background: none; border: none; padding: 0.6rem 1.1rem; cursor: pointer; }

.crm-busca-item:hover, .crm-busca-item:focus-visible { background: var(--accent); outline: none; }

.crm-busca-icone { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm); background: var(--info-bg-soft); color: var(--info-strong); display: grid; place-items: center; margin-top: 0.05rem; }

.crm-busca-nome { font-size: 0.88rem; font-weight: 600; }

.crm-busca-meta { font-size: 0.76rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.crm-busca-vazio { padding: 1.5rem 1.1rem; text-align: center; color: var(--muted-foreground); font-size: 0.85rem; }

.crm-busca-item mark { background: color-mix(in oklch, var(--warning) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 0.05rem; }

.crm-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }

.crm-modal-grid .campo--full { grid-column: 1 / -1; }

.crm-modal-contexto {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
  padding: 0.6rem 0.7rem; background: var(--muted); border-radius: var(--radius-md);
}

/* `display:flex` acima é regra de AUTOR — sem este override, `[hidden]` perde
   o empate de especificidade e o elemento "escondido" continua ocupando
   espaço (mesma armadilha documentada no CLAUDE.md para .zr-btn/.zr-badge/
   .zr-empty; achado ao esconder este bloco no modal "Criar tarefa" avulso). */
.crm-modal-contexto[hidden] { display: none; }

.crm-modal-campo-opcional { font-weight: 400; color: var(--muted-foreground); }

/* Link "Cadastrar novo cliente" dentro de "Nova oportunidade" (T-B2b, atalho
   pra Cadastro de Clientes) — só o wrapper ganha o gap extra abaixo do select,
   o `.campo` interno (span+select) fica com o espaçamento normal. */
.crm-modal-campo-com-link { gap: 0.5rem; }

.crm-modal-link-inline {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--info-strong); background: none; border: none; padding: 0;
  cursor: pointer; width: fit-content; text-align: left;
}

.crm-modal-link-inline:hover { text-decoration: underline; }

.crm-modal-link-inline[hidden] { display: none; }

.crm-quick-datas { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }

.crm-quick-data {
  appearance: none; border: 1px solid var(--border); background: var(--background);
  color: var(--muted-foreground); border-radius: 999px; padding: 0.25rem 0.65rem;
  font-size: 0.72rem; font-weight: 500; cursor: pointer;
}

.crm-quick-data:hover { background: var(--accent); color: var(--foreground); }

/* Extensão de cor do `.zr-btn` para as duas ações de fechar negócio — não são
   `zType` do ZardUI (a biblioteca `.zr-*` está congelada em 8 primitivos, ver
   DESIGN.md), só reaproveitam a família success/error já declarada para
   `.crm-tag--ganho`/`.crm-tag--frio`. */
.crm-btn-ganha { background: var(--success-bg-soft); color: var(--success-strong); border-color: color-mix(in oklch, var(--success-strong) 35%, transparent); }

.crm-btn-ganha:hover { background: color-mix(in oklch, var(--success-bg-soft) 70%, var(--success-strong) 15%); }

.crm-btn-perdida { background: var(--background); color: var(--error-strong); border-color: color-mix(in oklch, var(--error-strong) 35%, transparent); }

.crm-btn-perdida:hover { background: var(--error-bg-soft); }

.crm-badge-perdida { background: var(--error-bg-soft); color: var(--error-strong); }

@media (max-width: 600px) {
  .crm-modal-grid { grid-template-columns: 1fr; }
}

/* ---------- CRM › Configurações do funil (T-B1) ----------
 * Classes ESPECÍFICAS da tela — o resto (botão, select, tabela, badge, alerta,
 * abas, empty state) vem de sdk-ui/components.css (.zr-*), nunca duplicado
 * aqui. Prefixo `crm-config-funil-` para não colidir com o `crm-` que o
 * Kanban/"Meu dia" (T-B3/T-B4, PR #178) usa nas próprias classes.
 */
.crm-config-funil-cortes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.crm-config-funil-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.crm-config-funil-campo > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.crm-config-funil-campo-dias {
  display: flex;
  align-items: center;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  overflow: hidden;
}

.crm-config-funil-campo-dias input {
  border: none;
  background: none;
  min-width: 0;
  flex: 1;
}

.crm-config-funil-campo-dias input:focus-visible { outline: none; }

.crm-config-funil-campo-dias:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; }

.crm-config-funil-campo-dias span {
  padding: 0 0.6rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Cor dita duas vezes na etiqueta (ponto + texto do rótulo) — quem não
   distingue cor ainda lê "Atenção"/"Escapando"/"Frio" por extenso. */
.crm-config-funil-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
}

.crm-config-funil-ponto--atencao { background: var(--warning-strong); }

.crm-config-funil-ponto--escapando { background: #ea580c; }

.crm-config-funil-ponto--frio { background: var(--destructive); }

.crm-config-funil-nota {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.crm-config-funil-erro-texto {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--destructive);
}

.crm-config-funil-contagem { font-size: 0.78rem; color: var(--muted-foreground); }

.crm-config-funil-col-ordem { color: var(--muted-foreground); font-variant-numeric: tabular-nums; width: 1%; }

.crm-config-funil-col-acoes { text-align: right; white-space: nowrap; }

.crm-config-funil-vazio-tabela { text-align: center; padding: 1.75rem 0.875rem; color: var(--muted-foreground); }

.crm-config-funil-input-inline { max-width: 220px; }

.crm-config-funil-form-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.crm-config-funil-form-inline input { flex: 1; min-width: 180px; }

/* `display:flex` acima é regra de AUTOR e vence o `[hidden] { display:none }` do navegador —
   sem esta linha o formulário "Nova etapa" fica visível o tempo todo, mesmo com o atributo
   `hidden` no DOM. Achado pelo portão de mecanismo (hidden-vence-display.test.js), não por
   alguém olhando a tela. */
.crm-config-funil-form-inline[hidden] { display: none; }

.crm-config-funil-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-config-funil-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.crm-config-funil-chip-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--muted-foreground);
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}

.crm-config-funil-chip-btn:hover { background: var(--accent); color: var(--foreground); }

/* Único modal do produto além de `.tc-modal` (Termo de Ciência) — reservado
   para uma ação rápida e pontual, não para edição extensa (essa continua
   sendo troca de view lista↔formulário, ver `clientes-panel`). */
.crm-config-funil-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 50;
}

.crm-config-funil-modal-overlay[hidden] { display: none; }

.crm-config-funil-modal {
  width: 100%;
  max-width: 28rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4);
}

.crm-config-funil-rotulo {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.crm-config-funil-checkbox-campo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin: 1rem 0 0.5rem;
  cursor: pointer;
}

/* 🔴 O override NÃO é enfeite: sem ele o `blocoPadrao.hidden = true` de
   `crm-configuracao-funil-panel.js` não esconde nada — a regra de autor acima
   (0,1,0) empata com o `[hidden] { display:none }` do navegador e vence pela
   ordem no arquivo. Medido em produção na sessão 140: com `hidden`, o elemento
   computava `display: flex` e ocupava 20px. É a mesma armadilha do
   `.zr-alert[hidden]`, e a 15ª vez que ela aparece. */
.crm-config-funil-checkbox-campo[hidden] { display: none; }

.crm-config-funil-checkbox-campo input { margin-top: 0.15rem; }

.crm-config-funil-ajuda { color: var(--muted-foreground); }

/* Tela de negociação: tarefas pendentes, abas, histórico e anotação (16/10/2026). Estrutura do RD Station, cores do projeto. */
.crm-abas { display: flex; gap: 0.25rem; margin: 0 1.5rem 0.75rem; border-bottom: 1px solid var(--border); overflow-x: auto; }

.crm-aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.55rem 0.9rem; font: inherit; font-weight: 500; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }

.crm-aba:hover { color: var(--foreground); }

.crm-aba[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }

.crm-aba:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.crm-aba-painel[hidden] { display: none; }

.crm-anotacao-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; }

.crm-hist-lista, .crm-tarefas-lista { list-style: none; margin: 0; padding: 0 1rem 1rem; display: grid; gap: 0.6rem; }

.crm-hist-item { border-left: 3px solid var(--border); padding: 0.15rem 0 0.15rem 0.75rem; }

.crm-hist-titulo { font-weight: 600; }

.crm-hist-detalhe { white-space: pre-wrap; overflow-wrap: anywhere; }

.crm-hist-meta { font-size: 0.8rem; color: var(--muted-foreground); }

.crm-vazio { padding: 0.5rem 0; color: var(--muted-foreground); }

.crm-tarefa-corpo { flex: 1 1 14rem; min-width: 0; }

.crm-tarefa-titulo { font-weight: 600; overflow-wrap: anywhere; }

.crm-tarefa-meta { font-size: 0.8rem; color: var(--muted-foreground); }

.crm-tarefa-acoes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.crm-modal-check { display: flex; align-items: center; gap: 0.5rem; }

/* O valor de cada parcela do setup (modal "produto ou serviço"): um campo por parcela e a linha da soma, que fica vermelha enquanto não fecha com o setup. */
.crm-parcelas-valores { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

.crm-parcelas-valores[hidden] { display: none; }

.crm-parcelas-soma { margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

.crm-parcelas-soma[hidden] { display: none; }

.crm-parcelas-soma--erro { color: var(--error-strong); }

/* CRM · Tarefas (22/10/2026): a lista de todas as tarefas, no formato da lista do funil. */
.crm-tarefas-resumo { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem 0; }
.crm-tarefas-resumo .crm-tag { cursor: pointer; font-size: 0.78rem; padding: 0.25rem 0.6rem; }
.crm-tarefas-resumo .crm-tag[aria-pressed='true'] { outline: 2px solid var(--ring); outline-offset: 1px; }
.crm-tarefas-lista { padding: 0.75rem 1rem 1rem; }
.crm-tarefas-obs { margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted-foreground); }
.crm-tarefas-acoes { white-space: nowrap; }
.crm-tarefas-acoes .zr-btn { margin-right: 0.35rem; }
.crm-tarefas-acoes .crm-tarefa-reagendar { display: inline-flex; gap: 0.35rem; align-items: center; margin-top: 0.35rem; }
.crm-tarefas-acoes .crm-tarefa-reagendar[hidden] { display: none; }

/* A etiqueta da próxima tarefa, no espaço à esquerda do "Criar tarefa": data (e horário) da tarefa que vence primeiro. */
.crm-tarefa-tag { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; max-width: 100%; font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--secondary); color: var(--foreground); cursor: default; white-space: nowrap; }
.crm-tarefa-tag:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.crm-tarefa-tag--atrasada { border-color: var(--destructive); color: var(--destructive); }
/* A dica com tudo da tarefa: posição fixa (o quadro rola e cortaria uma dica absoluta); o JS a põe junto da etiqueta. */
.crm-tarefa-dica { position: fixed; z-index: 60; max-width: min(22rem, calc(100vw - 1rem)); padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); font-size: 0.8rem; pointer-events: none; }
.crm-tarefa-dica[hidden] { display: none; }
.crm-tarefa-dica-titulo { margin: 0 0 0.45rem; font-size: 0.85rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.crm-tarefa-dica dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; }
.crm-tarefa-dica dt { color: var(--muted-foreground); }
.crm-tarefa-dica dd { margin: 0; overflow-wrap: anywhere; }
.crm-tarefa-dica-mais { margin: 0.5rem 0 0; color: var(--muted-foreground); }

/* ── Agenda do Zoho nas tarefas (23/10/2026; mockup docs/specs/crm-tarefa-agenda-zoho-mockup.html) ─────────────────────────────────────────────
   A caixa "ADD Zoho Calendar" (caixa · logo oficial · frase), os participantes, a janela de horário ocupado e os selos da tarefa. */
.crm-agenda { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.85rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
.crm-agenda--marcada { background: var(--accent); }
.crm-agenda-linha { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; width: fit-content; }
.crm-agenda--desligada .crm-agenda-linha { cursor: not-allowed; opacity: 0.55; }
.crm-agenda .zoho-logo { height: 1.25rem; width: auto; display: block; flex: none; }
.crm-agenda-dica { margin: 0; font-size: 0.78rem; color: var(--muted-foreground); }
.crm-agenda-dica[hidden] { display: none; }
.crm-agenda-participantes { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.3rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
.crm-agenda-participantes[hidden] { display: none; }
.crm-agenda-participantes h4 { margin: 0; font-size: 0.82rem; font-weight: 600; }
.crm-agenda-internos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.3rem 0.8rem; }
.crm-agenda-internos small { color: var(--muted-foreground); }
.crm-agenda-externo { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.crm-agenda-externo .zr-input { flex: 1 1 11rem; min-width: 0; }
.crm-agenda-erro { color: var(--destructive); font-size: 0.78rem; }
.crm-agenda-erro[hidden] { display: none; }
.crm-agenda-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.crm-agenda-etiquetas[hidden] { display: none; }
.crm-agenda-etiquetas:empty { display: none; }
.crm-agenda-etiqueta { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.2rem 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; background: var(--background); overflow-wrap: anywhere; }
.crm-agenda-etiqueta button { border: 0; background: none; cursor: pointer; padding: 0 0.35rem; color: var(--muted-foreground); }
.crm-agenda-etiqueta button:hover { color: var(--foreground); }
.crm-agenda-sugestao { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border: 1px dashed var(--input); border-radius: 999px; font-size: 0.78rem; background: none; cursor: pointer; color: var(--foreground); }
.crm-agenda-overlay { z-index: 55; }
.crm-agenda-conflitos { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.crm-agenda-conflito { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
.crm-agenda-conflito-hora { min-width: 5.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-agenda-conflito-oque { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.crm-agenda-conflito-oque small { display: block; color: var(--muted-foreground); }
.crm-tarefa--cancelada .crm-tarefa-titulo { text-decoration: line-through; color: var(--muted-foreground); }
.crm-tarefa-reagendar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.crm-tarefa-reagendar[hidden] { display: none; }
.crm-dia-agenda { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.crm-dia-agenda[hidden] { display: none; }

/* ---------- CRM › E-mail de documentação do contrato (EM6; mockup aprovado em 24/10/2026) ----------
 * O "⋮" do cartão ganho e as duas janelas dele (o envio em dois passos e o histórico). Os primitivos
 * (botão, input, textarea, badge, alerta) vêm de sdk-ui/components.css (.zr-*) e o modal de
 * `.crm-modal`/`.crm-modal-overlay`; aqui só o que é desta função.
 */
/* O "⋮" é absoluto no canto do cartão — o cartão precisa ser o contêiner de posicionamento. */
.crm-cartao { position: relative; }

.crm-cartao-mais {
  position: absolute; top: 0.45rem; right: 0.45rem;
  width: 2rem; padding: 0; justify-content: center; font-size: 1rem; line-height: 1;
}

/* O menu do "⋮": nasce só ao abrir, fixo em relação à janela e posicionado pelo JS embaixo do botão
   (os cartões são refeitos a cada pintura — um menu dentro deles se perderia). */
.crm-doc-menu {
  position: fixed; z-index: 60; min-width: 19rem; max-width: calc(100vw - 1rem);
  /* CM8: o menu ganhou a seção "Contrato" e pode crescer — rola por dentro e nunca passa da janela. */
  max-height: calc(100vh - 1rem); overflow-y: auto;
  padding: 0.25rem; background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.crm-doc-menu[hidden] { display: none; }

.crm-doc-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; background: none; border: 0; padding: 0.45rem 0.6rem;
  font: inherit; font-size: 0.83rem; color: var(--foreground); text-align: left;
  border-radius: var(--radius-sm); cursor: pointer;
}
.crm-doc-menu-item:hover { background: var(--accent); }
.crm-doc-menu-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.crm-doc-menu-item[aria-disabled='true'] { color: var(--muted-foreground); cursor: not-allowed; }
.crm-doc-menu-item[aria-disabled='true']:hover { background: none; }

.crm-doc-menu-motivo { font-size: 0.72rem; color: var(--muted-foreground); text-align: right; }
.crm-doc-menu-nota { font-size: 0.72rem; color: var(--muted-foreground); }
.crm-doc-menu-qtd {
  display: inline-flex; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--secondary); color: var(--secondary-foreground); font-size: 0.72rem; font-weight: 700;
}
.crm-doc-menu-status { padding: 0.5rem 0.65rem; font-size: 0.8rem; color: var(--muted-foreground); }

/* "Para enviar, falta:" — o mesmo tom de atenção do mockup §1a. */
.crm-doc-menu-aviso {
  margin: 0.25rem 0.35rem 0.4rem; padding: 0.55rem 0.6rem;
  background: var(--warning-bg-soft); color: var(--warning-strong);
  border: 1px solid color-mix(in oklch, var(--warning-strong) 35%, transparent);
  border-radius: var(--radius-sm); font-size: 0.8rem;
}
.crm-doc-menu-aviso .zr-icone { margin-right: 0.3rem; vertical-align: -0.125em; }
.crm-doc-pendencias { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.crm-doc-pendencias li { margin: 0.15rem 0; }

/* O link de cada pendência ("abrir a ficha da X" / "abrir a negociação"). */
.crm-doc-link {
  background: none; border: 0; padding: 0; font: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.crm-doc-link[hidden] { display: none; }

/* ── A janela do envio (mockup §2 e §3) ── */
.crm-modal--doc { max-width: 46rem; }
.crm-modal--doc-historico { max-width: 52rem; }

.crm-doc-passos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.75rem; color: var(--muted-foreground); }
.crm-doc-passos b { color: var(--foreground); }

.crm-doc-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 760px) { .crm-doc-duas { grid-template-columns: minmax(0, 1fr); } }

.crm-doc-grupo-cab {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted-foreground);
}
.crm-doc-grupo { margin-bottom: 0.9rem; }

.crm-doc-item {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: start;
  padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 0.3rem; cursor: pointer;
}
.crm-doc-item input { margin: 0.2rem 0 0; }
.crm-doc-item--sem { background: var(--muted); cursor: not-allowed; color: var(--muted-foreground); }
.crm-doc-nome { min-width: 0; overflow-wrap: anywhere; }
.crm-doc-nome small { display: block; color: var(--muted-foreground); font-size: 0.75rem; }
.crm-doc-lado, .crm-doc-setor { font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }

.crm-doc-total { display: flex; justify-content: space-between; padding: 0.4rem 0.1rem 0; border-top: 1px solid var(--border); font-size: 0.8rem; }

.crm-doc-recolhe { border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 0.4rem; }
.crm-doc-recolhe > summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.6rem; cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 600; }
.crm-doc-recolhe > summary::-webkit-details-marker { display: none; }
.crm-doc-recolhe > summary:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }
.crm-doc-recolhe > summary .zr-icone { transform: rotate(-90deg); }
.crm-doc-recolhe[open] > summary .zr-icone { transform: none; }
.crm-doc-recolhe-resumo { margin-left: auto; font-weight: 500; font-size: 0.75rem; color: var(--muted-foreground); }
.crm-doc-recolhe-corpo { padding: 0 0.6rem 0.5rem; }

.crm-doc-email { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.crm-doc-email-cab {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.2rem 0.5rem;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--secondary); font-size: 0.8rem;
}
.crm-doc-email-cab span:nth-child(odd), .crm-doc-email-cab label { color: var(--muted-foreground); }
.crm-doc-email-cab span:nth-child(even) { overflow-wrap: anywhere; }
.crm-doc-email-corpo { padding: 0.8rem; }
.crm-doc-email-corpo .zr-textarea { width: 100%; box-sizing: border-box; font-size: 0.85rem; }
.crm-doc-assinatura { border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.6rem; font-size: 0.78rem; }
.crm-doc-anexos-previa { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--border); }
.crm-doc-anexo {
  display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.15rem 0.5rem; font-size: 0.75rem;
}

/* Rodapé: no passo 1 o "Cancelar" fica à esquerda do "Ver prévia"; no passo 2 o "Voltar" é quem vai para a esquerda. */
.crm-doc-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crm-doc-rodape #crmDocCancelar { margin-right: auto; }
.crm-doc-rodape #crmDocVoltar { margin-right: auto; }
@media (max-width: 600px) { .crm-doc-rodape .zr-btn { flex: 1 1 100%; justify-content: center; } }

.crm-doc-combo { position: relative; display: inline-block; }
/* `.crm-doc-combo` fixa `display` como regra de autor: sem este override o `[hidden]` do navegador perde o empate. */
.crm-doc-combo[hidden] { display: none; }
.crm-doc-teste-menu {
  position: absolute; bottom: calc(100% + 0.3rem); left: 0; z-index: 5; min-width: 17rem; padding: 0.25rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.crm-doc-teste-menu[hidden] { display: none; }
.crm-doc-teste-rot { padding: 0.3rem 0.5rem; font-size: 0.72rem; color: var(--muted-foreground); }

/* ── O histórico (mockup §4) ── */
.crm-doc-tabela-wrap { overflow-x: auto; }
.crm-doc-tabela { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.crm-doc-tabela th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.crm-doc-tabela td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.crm-doc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-doc-fraco { color: var(--muted-foreground); }


/* 🆕 VM3 (item 83; mockup `voltar-ao-mergulho-mockup.html` §5): os dois atalhos do bloco "Herdado
   da negociação" ("ficha ↗" e "abrir ↗" — o "↗" é o arrow-square-out do Phosphor, nunca o
   caractere) e o aviso da VOLTA do mergulho ("Você voltou a Gerar minuta…"), no desenho do toast
   do mockup: sucesso suave, com o check-circle. O `[hidden]` vai junto (a classe fixa display). */
.crm-minuta-atalho { font-size: 0.8rem; margin-left: 0.35rem; color: var(--primary); }
.crm-minuta-atalho .zr-icone { width: 0.85em; height: 0.85em; }
.crm-minuta-toast { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.6rem 1.15rem; padding: 0.5rem 0.8rem; border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); border-radius: var(--radius-md); background: var(--success-bg-soft); color: var(--success-strong); font-size: 0.82rem; }
.crm-minuta-toast[hidden] { display: none; }