/* Campanhas (campanha única do CRM) — só o que o mockup web/preview/campanhas-v3.html define e a produção não tem.
   Reaproveita o resto: cx-hero/cx-kpis/cx-next/cx-rrow/cx-switch/cx-tl/cx-more/cx-fold/cx-pill, nx-card/nx-head/nx-btn/nx-period,
   mx-bar/mx-base, bd-row/bd-strip/bd-link/bd-actnote, cv-msg, cs-alerta e o `dialog` da foundation.
   Carrega depois da foundation (sobrescreve .cx-kpis.is-3 e o resumo das linhas fechadas no celular). Prefixo ca- (cp- é das Conversas). */

.ca-page { max-width: 1120px; }
.ca-page * { box-sizing: border-box; }
.ca-page > * { min-width: 0; margin: 0; }
.ca-page .nx-card { margin: 0; }

/* voltar pra lista dentro de uma campanha (3º nível: CRM › Campanhas › campanha). Só aparece dentro de uma campanha. */
.ca-back { margin: 0; font-size: var(--fs-foot); }
.ca-back .bd-link { display: inline-flex; align-items: center; min-height: 32px; }

/* topo sem nada acontecendo: nem bom nem ruim, então a cor do estado é neutra */
.cx-hero.ca-idle { --tone: var(--muted); }
/* atenção na linha de próximo passo pinta só o ícone de âmbar (o texto fica neutro) */
.cx-next.is-warn svg { color: var(--warning); }
/* ações do topo: o botão principal e, se houver, o secundário embaixo */
.ca-page .cx-hero__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ca-page .cx-hero__act .bd-actnote { margin: 0; }

/* o caminho de uma campanha no lugar dos números do topo, quando ainda não há números.
   Passo que é seu = tinta azul (estado), nunca azul cheio (o cheio é só do botão). */
.ca-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--separator-soft); counter-reset: passo; }
.ca-steps li { padding-right: 12px; color: var(--muted); font-size: var(--fs-foot); line-height: var(--lh-foot); }
.ca-steps li::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; border-radius: 50%; background: var(--fill-quiet); color: var(--muted); font-size: var(--fs-foot); font-weight: 600; font-variant-numeric: tabular-nums; }
.ca-steps li.is-you::before { background: var(--accent-tint); color: var(--accent-text); }
.ca-steps b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; font-size: var(--fs-body); }
.ca-steps em { font-style: normal; color: var(--accent-text); }

/* título que recebe o foco ao trocar de tela (leitor de tela): é só um título, sem anel de foco */
.ca-page [data-ca-foco]:focus, .ca-page [data-ca-foco]:focus-visible { outline: none; box-shadow: none; }

/* lista: reaproveita .cx-rrow das Réguas; a coluna do estado é mais larga porque "Aprovada · começa 26/10" não cabe em 128px.
   O celular troca o rótulo que o .cx-rrow escreve ("Hoje"/"30 dias") */
@media (min-width: 861px) { .ca-page .cx-rrow.ca-row, .ca-page .cx-rhead.ca-head { grid-template-columns: minmax(0, 2fr) 200px minmax(0, 1.1fr) minmax(0, 1.5fr) 64px; } }
.ca-row > :nth-child(1) a { color: var(--text); font-weight: 600; text-decoration: none; }
.ca-row > :nth-child(1) a:hover { text-decoration: underline; }
.ca-row .cx-meter { margin-top: 6px; }
.ca-row .ca-open { justify-self: end; font-size: var(--fs-foot); }
.ca-row .ca-warn { color: var(--warning); }

/* formulário: o campo já vem da foundation (input/select: fill neutro, raio, foco azul). Aqui só alvo, rótulo e ajuda. */
.ca-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ca-form { display: grid; gap: 16px; margin: 0; }
.ca-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ca-field > label, .ca-field > legend, .ca-lab { padding: 0; font-size: var(--fs-foot); font-weight: 600; color: var(--text); }
.ca-field i { font-style: normal; font-weight: 400; color: var(--dim); }
.ca-in { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.ca-in.is-err { box-shadow: inset 0 0 0 1.5px var(--danger); }
.ca-help { margin: 0; color: var(--dim); font-size: var(--fs-foot); line-height: 1.4; }
.ca-help b { color: var(--text); font-weight: 600; }
.ca-err { margin: 0; display: flex; gap: 6px; color: var(--danger); font-size: var(--fs-foot); font-weight: 600; }
.ca-err::before { content: "✕"; }
.ca-err[hidden] { display: none; }
.ca-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca-var { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.ca-var code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-foot); color: var(--muted); }
.ca-form .nx-period { flex-wrap: wrap; }
.ca-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* balão: é o .cv-msg.is-nossa das Conversas (mensagem nossa, azul, canto de baixo à direita) */
.ca-preview .cv-msg { max-width: 420px; margin-left: auto; }
.ca-preview .cv-msg p { white-space: pre-wrap; }
.ca-preview mark { background: var(--accent-tint); color: var(--text); border-radius: 4px; padding: 0 3px; }

/* diálogo: vale o `dialog` da foundation (C5). O equivalente antigo da produção (.crm-control-dialog) segue como está nas outras telas. */
.ca-dlg { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; }
.ca-dlg[open] { display: grid; gap: 14px; }
.ca-dlg h2 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: 600; }
.ca-dlg .ca-lead { margin: 0; font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 600; }
.ca-dlg ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.ca-dlg ol b { color: var(--text); font-weight: 600; }
.ca-dlg .cs-alerta { margin: 0; }
.ca-dlg-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.ca-dlg-acts .nx-btn { min-height: 44px; }
/* .nx-btn.is-danger (foundation) vence o [disabled]: o botão desligado continuava vermelho, parecendo ativo (só nesta tela) */
.ca-page .nx-btn.is-danger[disabled], .ca-dlg .nx-btn.is-danger[disabled] { background: var(--surface-3); color: var(--dim); }

/* topo com 2 ou 3 números (o .cx-kpis tem 4 colunas fixas e deixava colunas vazias) */
@media (min-width: 861px) {
  .ca-page .cx-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ca-page .cx-kpis.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* "sem dado" é palavra, não número: não pode gritar como KPI */
.ca-page .cx-kpi strong.is-dim { color: var(--dim); font-size: var(--fs-kpi-sm); }
.ca-page .is-dim { color: var(--dim); }

/* carregando: barras do tamanho do conteúdo (o .skeleton-card da produção virou um cartão vazio na foundation) */
.ca-skel { display: grid; gap: 10px; }
.ca-skel i { display: block; height: 14px; border-radius: 7px; background: var(--fill-quiet); }
.ca-skel i:nth-child(1) { width: 40%; height: 26px; }
.ca-skel i:nth-child(2) { width: 85%; }
.ca-skel i:nth-child(3) { width: 65%; }

@media (max-width: 860px) {
  .ca-steps { grid-template-columns: 1fr; gap: 10px; }
  .ca-steps li { display: grid; grid-template-columns: 34px 1fr; padding: 0; }
  .ca-steps li::before { grid-row: span 2; margin: 0; }
  .ca-row > :nth-child(3)::before { content: "Período  "; }
  .ca-row > :nth-child(4)::before { content: "Lista  "; }
  .ca-row .ca-open { display: inline-flex; align-items: center; min-height: 44px; }
  .ca-cols, .ca-pair { grid-template-columns: minmax(0, 1fr); }
  .ca-page .cx-hero__act { align-items: stretch; }
  .ca-acts .nx-btn, .ca-dlg-acts .nx-btn { flex: 1 1 100%; min-height: 44px; }
  .ca-back .bd-link { min-height: 44px; }
  /* alvo de 44px nos links de texto sem mexer na linha (mesmo truque do board.css) */
  .ca-row > :nth-child(1) a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .cx-hero__act .bd-actnote .bd-link { display: inline-flex; align-items: center; min-height: 44px; }
  .ca-page .cx-fold > summary { min-height: 44px; }   /* o .cx-fold de produção fica em 32px no celular */
  /* 16px no campo do celular: abaixo disso o iPhone dá zoom ao tocar */
  .ca-in { font-size: 16px; }
  .ca-dlg { padding: 18px; }
  .ca-page .cx-kpi strong { font-size: 22px; }
  /* a mesma linha fechada da Sala (board.css, só em .bd-page): título em cima, resumo embaixo */
  .ca-page .cx-more > summary { display: block; position: relative; padding-right: 44px; }
  .ca-page .cx-more > summary > span { display: block; margin-top: 2px; }
  .ca-page .cx-more > summary::after { position: absolute; right: 20px; top: 12px; }
}