/* ENCORE BACKSTAGE — os componentes próprios do CRM interno de vendas (Alex e Ireijo).
   Carrega depois de ds/base/* (a gramática herdada do Encore CRM) e de ds/backstage-tokens.css (o
   mundo do Backstage). Toda cor sai de var(--…): valor novo nasce em backstage-tokens.css. */

/* ── Correções do fork: o que a folha herdada tinha escrito à mão para o fundo claro ─── */
.chip, .tagNeutral { color: var(--text-primary); }
.avatar { color: var(--text-on-dark); }
.avatarAccent { color: var(--text-on-accent); }
.avatarGray, .avatarLight { color: var(--text-primary); }
.discoEscuro { background: var(--palco); color: var(--palco-ink); }

/* A entrada escalonada da .pagina roda UMA vez: sem isto, cada gravação no banco redesenhava a tela
   e todos os blocos subiam de novo (o "glitch" da v01). */
.cm-assentada > * { animation: none !important; }

/* ── Barra do topo, na gramática da casca do produto ─────────────────────── */
.cm-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: calc(var(--z-gaveta) - 1); background: var(--bg-page); }
.cm-barra {
  max-width: var(--page-max); margin: 0 auto;
  padding: 18px var(--page-pad-x) 12px;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.cm-marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cm-marcaNome { display: block; font-size: var(--text-ui); font-weight: var(--weight-medium); line-height: 1.2; }
.cm-marcaSub { font-size: var(--text-micro); color: var(--text-secondary); }
.cm-nav { background: var(--surface-card); padding: 4px; }
.cm-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-capsula {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: var(--control-h); padding: 0 12px 0 5px; border-radius: var(--radius-pill);
  background: var(--surface-card); font-size: var(--text-ui); white-space: nowrap;
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.cm-capsula:active { transform: translateY(1px); }
.cm-capsulaNum { padding-left: 12px; }
.cm-capsulaNum b { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.cm-capsulaSub { font-size: var(--text-micro); color: var(--text-secondary); display: block; line-height: 1.1; }
.cm-capsulaTexto { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.cm-pontoLime { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--lime-soft); }
.cm-topo .iconBtnNeutral { background: var(--surface-card); }
@media (hover: hover) { .cm-capsula:hover { background: var(--gray-50); } }

/* ── O aviso de modo (exemplo, sem banco, erro) ─────────────────────────── */
.cm-modo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 8px 8px 16px; border-radius: var(--radius-pill);
  background: var(--estado-automatico-bg); color: var(--estado-automatico-ink); font-size: var(--text-ui);
}
.cm-modoRisco { background: var(--estado-risco-bg); color: var(--estado-risco-ink); }
.cm-modo .espaco { flex: 1; }

/* ── O cartão de foco (a abertura da tela Hoje) ─────────────────────────── */
.cm-foco { background: var(--palco); color: var(--palco-ink); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 40px; padding: 26px 30px; align-items: center; }
@media (max-width: 980px) { .cm-foco { grid-template-columns: minmax(0, 1fr); } }
.cm-focoRot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--palco-muted); font-weight: var(--weight-medium); }
.cm-focoTitulo { font-size: var(--text-stat-xl); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); line-height: 1.12; margin-top: 10px; text-wrap: balance; }
.cm-focoTitulo b { font-weight: var(--weight-medium); }
.cm-focoAcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.cm-focoLado { display: flex; flex-direction: column; gap: 18px; }
.cm-foco .btnPrimary, .cm-passo .btnPrimary { background: var(--palco-ink); color: var(--palco); }
.cm-foco .btnSecondary, .cm-passo .btnSecondary { background: var(--palco-tile); color: var(--palco-ink); }
.cm-foco :focus-visible, .cm-passo :focus-visible { outline-color: var(--palco-ink); }
.cm-meta { display: flex; flex-direction: column; gap: 8px; }
.cm-metaTopo { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-caption); color: var(--palco-muted); }
.cm-metaTopo b { color: var(--palco-ink); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.cm-metaTrilho { height: 8px; border-radius: var(--radius-track); background: var(--palco-trilho); overflow: hidden; }
.cm-metaTrilho span { display: block; height: 100%; background: var(--palco-ink); border-radius: var(--radius-track); }
.cm-ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* A cor de cada etapa: o papel `forte` da família dela (DESIGN.md, Espectro). */
.cm-e-lista { background: var(--gray-400); }
.cm-e-abordado { background: var(--ambar-500); }
.cm-e-conversa { background: var(--lime-500); }
.cm-e-demo_marcada { background: var(--azul-500); }
.cm-e-demo_feita { background: var(--lime-forte); }
.cm-e-proposta { background: var(--ambar-forte); }
.cm-e-cliente { background: var(--surface-dark); }
.cm-e-pausado { background: var(--violeta-500); }
.cm-e-perdido { background: var(--coral-500); }

/* O gráfico de colunas precisa de corpo para crescer dentro do card. */
.cm-colunas { min-height: 190px; }
.cm-cardGrafico { gap: 4px; }
.cm-cardGrafico .colunas { margin-top: 14px; }

/* ── Listas ──────────────────────────────────────────────────────────────── */
.cm-linhaAbre { cursor: pointer; }
.cm-lista .linha { --colsFim: 128px 34px; }
@media (max-width: 760px) {
  .cm-lista .linha { grid-template-columns: auto minmax(0, 1fr); }
  .cm-lista .linhaFim { grid-column: 1 / -1; display: flex; justify-content: flex-start; }
  .cm-lista .linhaFimGrade .tagCheia { width: auto; }
}
.cm-quem { display: inline-flex; align-items: center; gap: 6px; }

/* ── Funil: raias ────────────────────────────────────────────────────────── */
.cm-raias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: var(--grid-gap); overflow-x: auto; padding-bottom: 10px; align-items: start; scrollbar-width: thin; }
.cm-raia { display: flex; flex-direction: column; gap: 8px; min-height: 320px; padding: 6px; margin: -6px; border-radius: var(--radius-card); transition: background-color var(--dur-cor) linear; }
.cm-raia.cm-alvo { background: var(--sel-bg); }
.cm-raiaTopo { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-size: var(--text-ui); font-weight: var(--weight-medium); }
.cm-raiaTopo .cm-num { margin-left: auto; font-size: var(--text-caption); font-weight: var(--weight-regular); color: var(--text-secondary); background: var(--surface-card); border-radius: var(--radius-pill); padding: 2px 9px; font-variant-numeric: tabular-nums; }
.cm-cartao {
  display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left;
  background: var(--surface-card); border-radius: var(--radius-inset); padding: 14px 14px 12px;
  transition: background-color var(--dur-cor) linear, transform var(--dur-mover) var(--ease);
}
.cm-cartao[draggable="true"] { cursor: grab; }
.cm-cartao:active { transform: translateY(1px); }
@media (hover: hover) { .cm-cartao:hover { transform: translateY(-2px); } }
.cm-cartaoTopo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-cartaoNome { font-size: var(--text-ui); font-weight: var(--weight-medium); min-width: 0; }
.cm-cartaoSub { font-size: var(--text-micro); color: var(--text-secondary); }
.cm-cartaoPe { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-divider); }
.cm-cartaoPasso { font-size: var(--text-caption); color: var(--text-primary); min-width: 0; }
.cm-raiaVazia { border-radius: var(--radius-inset); padding: 18px 14px; font-size: var(--text-caption); color: var(--text-tertiary); background: repeating-linear-gradient(135deg, var(--gray-200) 0 1px, transparent 1px 7px); text-align: center; }
.cm-tagsMini { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-tagsMini .tag { font-size: var(--text-micro); padding: 2px 7px; font-weight: var(--weight-regular); }

/* ── Carteira ────────────────────────────────────────────────────────────── */
.cm-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cm-busca { max-width: 340px; flex: 1 1 220px; }
.cm-th { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; }
.cm-linhaTabela { cursor: pointer; }
@media (hover: hover) { .cm-linhaTabela:hover td { background: var(--surface-inset); } }
.cm-nomeCel { display: flex; align-items: center; gap: 10px; min-width: 200px; }

/* ── A ficha lateral ─────────────────────────────────────────────────────── */
.cm-veu { position: fixed; inset: 0; z-index: var(--z-gaveta); background: color-mix(in srgb, var(--bg-page) 74%, transparent); animation: cm-aparece var(--dur-gaveta) var(--ease); }
.cm-ficha {
  position: fixed; z-index: calc(var(--z-gaveta) + 1);
  top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); right: 12px;
  width: min(660px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-page); border-radius: var(--radius-card); padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  animation: cm-entra 240ms var(--ease);
}
.cm-ficha:focus { outline: none; }
.cm-fichaCab { padding: 22px; gap: 16px; }
.cm-fichaTopo { display: flex; align-items: flex-start; gap: 14px; }
.cm-fichaNome { font-size: var(--text-stat-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: 1.15; overflow-wrap: anywhere; }
.cm-fichaSub { font-size: var(--text-caption); color: var(--text-secondary); margin-top: 4px; }
.cm-fichaFecha { margin-left: auto; }

/* Os marcos do funil: onde a conta está no caminho, sem ser clicável. */
.cm-marcos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.cm-marcos::before { content: ""; position: absolute; left: 7%; right: 7%; top: 8px; height: 2px; background: var(--track); }
.cm-marcosCheio { position: absolute; left: 7%; top: 8px; height: 2px; background: var(--surface-dark); }
.cm-marco { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cm-marcoPonto { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); box-shadow: inset 0 0 0 2px var(--track); display: grid; place-items: center; color: var(--accent); }
.cm-marcoFeito .cm-marcoPonto { background: var(--surface-dark); box-shadow: none; color: var(--text-on-dark); }
.cm-marcoAtual .cm-marcoPonto { background: var(--accent); box-shadow: 0 0 0 4px var(--lime-soft); }
.cm-marcoRot { font-size: var(--text-micro); color: var(--text-tertiary); line-height: 1.25; }
.cm-marcoAtual .cm-marcoRot { color: var(--text-primary); font-weight: var(--weight-medium); }
.cm-marcosFora { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption); color: var(--text-secondary); }

.cm-passo { background: var(--palco); color: var(--palco-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; }
.cm-passoRot { font-size: var(--text-micro); color: var(--palco-muted); font-weight: var(--weight-medium); display: inline-flex; gap: 6px; align-items: center; }
.cm-passoTitulo { font-size: var(--text-card-title); margin-top: 4px; }
.cm-passoSub { font-size: var(--text-caption); color: var(--palco-muted); margin-top: 3px; }
@media (max-width: 520px) { .cm-passo { grid-template-columns: minmax(0, 1fr); } }

.cm-corpo { gap: 18px; }
.cm-grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (max-width: 560px) { .cm-grade2 { grid-template-columns: minmax(0, 1fr); } }
.cm-grade2 .cm-largo { grid-column: 1 / -1; }
.cm-bloco { display: flex; flex-direction: column; gap: 14px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chips .chip { background: var(--surface-control-on-card); }
.cm-chips .chip.chipAtivo { background: var(--palco); color: var(--palco-ink); font-weight: var(--weight-medium); }
.cm-sugestao { background: var(--surface-inset); border-radius: var(--radius-inset); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cm-envolveLargo { display: block; width: 100%; }
.cm-envolveLargo .menuBotao { border: 1px solid var(--border-outline); background: var(--surface-inset); }
.cm-ficha .pop, .cm-ficha .painel { z-index: calc(var(--z-gaveta) + 5); }

/* A linha do tempo: um trilho vertical liga os eventos da conta. */
.cm-tempo { position: relative; display: flex; flex-direction: column; }
.cm-evento { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.cm-evento:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--border-divider); }
.cm-eventoCorpo { padding-top: 5px; min-width: 0; }
.cm-eventoTexto { font-size: var(--text-ui); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; background: var(--surface-inset); border-radius: var(--radius-tile); padding: 10px 12px; }
.cm-eventoMeta { font-size: var(--text-micro); color: var(--text-tertiary); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.cm-eventoMeta b { font-size: var(--text-ui); color: var(--text-primary); font-weight: var(--weight-medium); }

.cm-contato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-divider); align-items: center; }
.cm-contato:first-child { border-top: 0; }
.cm-selecionavel { user-select: all; }

@keyframes cm-aparece { from { opacity: 0; } }
@keyframes cm-entra { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .cm-veu, .cm-ficha { animation: none; } .cm-sug, .cm-cartao { transition: none; } }

/* ── Volume esperado e franquia (na ficha) ──────────────────────────────── */
.cm-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .cm-grade3 { grid-template-columns: minmax(0, 1fr); } }
.cm-volLinhas { display: flex; flex-direction: column; }
.cm-volLinha { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-divider); }
.cm-volLinha:first-child { border-top: 0; }

/* O bloco de destaque do card de resumo também é palco, e o primeiro do ranking também. */
.resumoBloco { background: var(--palco); color: var(--palco-ink); }
.resumoBloco .resumoRotulo, .resumoBloco .resumoSub, .resumoBloco .statRotulo { color: var(--palco-muted); }
.resumoBloco .escalaTrilho { background: var(--palco-trilho); }
.resumoBloco .escalaPreench { background: var(--palco-ink); }
.rankingPrimeiro { background: var(--palco); color: var(--palco-ink); }
/* A meta da linha da agenda fica numa linha só; o que não cabe é cortado. */
.cm-metaUma { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.cm-metaUma .meta { flex-shrink: 0; }
.cm-metaUma .meta.corta { flex-shrink: 1; min-width: 0; display: block; }
/* O gráfico de contatos por dia tem altura própria: esticado pela agenda ao lado, virava parede. */
.cm-cardGrafico .cm-colunas { min-height: 200px; max-height: 240px; }

/* ── Agenda: a malha do Calendário do Encore CRM, no palco escuro ───────── */
.cm-calMoldura { padding: 14px; gap: 10px; }
.cm-calBarra { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 6px 6px 4px; }
.cm-calMes { font-size: var(--text-title); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); white-space: nowrap; margin: 0; }
.cm-calLegenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--text-caption); color: var(--text-secondary); }
.cm-calLeg { display: inline-flex; align-items: center; gap: 6px; }
.cm-calFim { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-calNav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-control); }
.cm-calNav .iconBtnNeutral { background: transparent; }
.cm-calMalha { display: flex; flex-direction: column; gap: 8px; }
.cm-calSemana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cm-calSemanas { grid-template-rows: repeat(var(--semanas, 5), minmax(120px, auto)); }
.cm-calSemRot { font-size: var(--text-caption); color: var(--text-secondary); padding-left: 8px; }
.cm-calCel { border-radius: var(--radius-tile); padding: 10px 8px; background: var(--surface-inset); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-calFora { background: var(--bg-page); opacity: .7; }
.cm-calHoje { outline: 1.5px solid var(--palco); outline-offset: -1.5px; }
.cm-calTopo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cm-calDia { font-size: var(--text-ui); color: var(--text-primary); }
.cm-calPassado { color: var(--text-secondary); }
.cm-calFora .cm-calDia { color: var(--text-quaternary); }
.cm-calPilHoje { font-size: var(--text-micro); font-weight: var(--weight-medium); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--palco); color: var(--palco-ink); }
.cm-calItens { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; min-height: 0; }
.cm-calItem {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 30px; border-radius: var(--radius-celula);
  font-size: var(--text-caption); line-height: 1.2; background: var(--surface-control); color: var(--text-primary); text-align: left; min-width: 0; width: 100%;
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.cm-calItem:active { transform: translateY(1px); }
.cm-calNome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cm-calFeito { background: var(--hatch); color: var(--text-secondary); }
.cm-calEvento { background: var(--surface-dark); color: var(--text-on-dark); font-weight: var(--weight-medium); }
.cm-calEvento .cm-glifo { color: var(--text-on-dark); }
.cm-calAtrasado { box-shadow: inset 0 0 0 1px var(--ambar-soft); }
.cm-calMais { font-size: var(--text-micro); color: var(--text-secondary); padding-left: 8px; }
.cm-glifo { flex-shrink: 0; display: inline-flex; color: var(--text-secondary); }
.cm-gHora { color: var(--azul-forte); }
.cm-gAuto { color: var(--violeta-forte); }
.cm-gFora { color: var(--ambar-forte); }
.cm-calDiaLista { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-calDiaLista .cm-calItem { width: auto; max-width: 280px; }
.cm-tileHoje { background: var(--palco); color: var(--palco-ink); }
@media (hover: hover) {
  .cm-calItem:hover { background: var(--surface-control-hover); }
  .cm-calEvento:hover { background: var(--surface-dark-hover); }
}
@media (max-width: 900px) {
  .cm-calMalha { overflow-x: auto; padding-bottom: 8px; }
  .cm-calMalha > * { min-width: 680px; }
}
.cm-metaNoCard { background: var(--track); }
.cm-metaNoCard span { background: var(--palco); }

/* ── Perfil da conta (levantamento de mercado) ──────────────────────────── */
.cm-avatarImg { background: var(--white); }
.avatar { position: relative; }
.avatar .cm-avatarImg { position: absolute; inset: 0; }
.cm-link { text-decoration: none; }
.cm-perfilLista { display: flex; flex-direction: column; gap: 6px; padding-left: 0; }
.cm-perfilLista li { font-size: var(--text-ui); line-height: 1.45; padding-left: 14px; position: relative; }
.cm-perfilLista li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--palco); }
.cm-fontes summary { cursor: pointer; }
.cm-grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .cm-grade4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Alertas de retomada (v03, 25/09/2026) ──────────────────────────────── */
/* O número na pílula Hoje: quantas contas pararam além do limite da etapa. */
.cm-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: var(--radius-pill); background: var(--palco); color: var(--palco-ink); font-size: 11px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; line-height: 1; }
.cm-alertasCfg { display: flex; flex-direction: column; }
.cm-alertaCfg { display: grid; grid-template-columns: 44px 150px 130px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-divider); }
.cm-alertaPrimeiro { border-top: 0; padding-top: 4px; }
.cm-alertaDias { display: flex; align-items: center; gap: 8px; }
.cm-alertaDias .entrada { width: 72px; }
.cm-alertaMsg { font-size: var(--text-caption); color: var(--text-secondary); }
.cm-alertaOff .cm-alertaMsg, .cm-alertaOff .tag { opacity: .45; }
.cm-alertaCfg .switch { cursor: pointer; background: none; border: 0; padding: 0; }
@media (max-width: 720px) { .cm-alertaCfg { grid-template-columns: 44px minmax(0, 1fr) auto; } .cm-alertaMsg { grid-column: 2 / -1; } }
/* O ícone dentro da opção de menu (o que aconteceu, por onde). */
.popNome > i, .popNome > svg { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
/* O plano da conta: volume, franquia e custo por canal; vazio herda o padrão de Ajustes. */
.cm-plano { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 8px 10px; align-items: center; }
.cm-planoRot { font-size: var(--text-caption); color: var(--text-secondary); }
.cm-plano .entrada { min-width: 0; }
@media (max-width: 560px) { .cm-plano { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-plano > .meta { grid-column: 1 / -1; } .cm-plano > span:first-child { display: none; } }

/* ── Rolagem dentro do card (26/09/2026) ─────────────────────────────────── */
/* Alex: "scroll dentro de container e não tomando a página inteira". Com 458 contas, a tabela da Carteira
   e a raia "Na lista" do Funil tinham a altura da carteira inteira. Agora a lista rola dentro da caixa, o
   cabeçalho fica parado e a barra do topo, os filtros e o título continuam à vista. */
.cm-rolo { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-outline) transparent; }
.cm-tabelaRolo { overflow: auto; max-height: max(360px, calc(100dvh - 318px)); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-outline) transparent; }
.cm-tabelaRolo thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-card); padding-top: 4px; box-shadow: 0 1px 0 var(--border-divider); }
.cm-raias { height: max(440px, calc(100dvh - 212px)); align-items: stretch; }
.cm-raia { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-outline) transparent; }
.cm-raiaTopo { position: sticky; top: 0; z-index: 1; background: var(--bg-page); margin: -6px -6px 0; padding: 12px 14px 8px; }
.cm-raia.cm-alvo .cm-raiaTopo { background: var(--sel-bg); }
.cm-listaRola { max-height: 460px; }
.cm-agendaRola { max-height: max(360px, calc(100dvh - 260px)); }

/* ── Esqueleto de carregamento (26/09/2026) ──────────────────────────────── */
/* Enquanto o banco não responde, a tela desenha a FORMA dela: o mesmo card, a mesma grade, blocos no
   lugar do texto. O brilho corre da esquerda para a direita e para com movimento reduzido. */
.cm-sk { display: block; border-radius: var(--radius-tile); background: var(--surface-inset); position: relative; overflow: hidden; }
.cm-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 7%, transparent), transparent); animation: cm-brilho 1.4s ease-in-out infinite; }
.cm-skPagina { background: var(--surface-card); }
.cm-skPalco { background: color-mix(in srgb, var(--palco) 22%, var(--surface-card)); }
.cm-skNoPalco { background: color-mix(in srgb, var(--palco) 30%, var(--surface-card)); }
.cm-skLinha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-divider); }
.cm-skLinha:first-child { border-top: 0; }
.cm-skTexto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cm-skCel { min-height: 120px; }
.cm-skCapsula { width: 190px; height: var(--control-h); border-radius: var(--radius-pill); }
@keyframes cm-brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cm-sk::after { animation: none; } }
.cm-e-desqualificado { background: var(--bar-hatch); }

/* ── Aviso de rodapé: desfazer a exclusão, link copiado, exportação (26/09/2026) ── */
#cm-aviso { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); z-index: calc(var(--z-gaveta) + 10); width: max-content; max-width: calc(100vw - 32px); }
.cm-aviso { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--radius-pill); background: var(--surface-dark); color: var(--text-on-dark); font-size: var(--text-ui); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); animation: cm-sobeAviso 200ms var(--ease); }
.cm-aviso .btnPrimary { background: var(--palco); color: var(--palco-ink); }
.cm-avisoTexto { white-space: nowrap; }
.cm-avisoCampo { width: min(340px, 52vw); height: 32px; font-size: var(--text-caption); }
@keyframes cm-sobeAviso { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cm-aviso { animation: none; } }

/* ── Topo no celular (26/09/2026): duas linhas no lugar de três ─────────── */
/* Linha 1: marca, meta em %, pessoa, busca, tema, ajustes e o + de conta nova, só com ícone. Linha 2: as telas, que
   rolam de lado. O nome da marca e os rótulos das cápsulas saem abaixo de 760 px. */
@media (max-width: 760px) {
  .cm-barra { padding: 12px 16px 8px; gap: 8px; flex-wrap: wrap; }
  .cm-marca > span:last-child, .cm-soLargo { display: none; }
  .cm-direita { order: 2; margin-left: auto; flex-wrap: nowrap; gap: 6px; }
  .cm-nav { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .cm-nav::-webkit-scrollbar { display: none; }
  .cm-capsula { padding: 0 10px 0 5px; }
  .cm-capsulaNum { padding-left: 10px; }
  .cm-direita .iconBtn { width: 36px !important; height: 36px !important; }
  .cm-novaTopo { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .cm-tabelaRolo { max-height: max(360px, calc(100dvh - 240px)); }
}