/* GERADO por ds/scripts/build.mjs a partir de src/ui/ui.module.css, do commit a7ae40a.
   Não edite aqui: edite a fonte e rode o script de novo. */
/* A biblioteca canônica do CRM (v2). Toda tela compõe daqui: não existe cópia de card,
   de linha de lista nem de banda de KPI dentro de pasta de página. */

/* ── Página ──────────────────────────────────────────────────────────────── */

.pagina {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 6px var(--page-pad-x) 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ⭐ A entrada acontece UMA vez, na montagem: cada bloco sobe 8 px com 40 ms de atraso, e o
   escalonamento para no sexto — a página não pode "cair" por partes. `backwards` segura o
   primeiro quadro, senão o bloco pisca no lugar final antes de começar. */
.pagina > * { animation: sobe var(--dur-entrada) var(--ease) backwards; }
.pagina > *:nth-child(2) { animation-delay: 40ms; }
.pagina > *:nth-child(3) { animation-delay: 80ms; }
.pagina > *:nth-child(4) { animation-delay: 120ms; }
.pagina > *:nth-child(5) { animation-delay: 160ms; }
.pagina > *:nth-child(n + 6) { animation-delay: 200ms; }

.paginaCompacta { gap: 12px; padding-top: 12px; padding-bottom: 20px; }

.secao { display: flex; flex-direction: column; gap: 10px; }

/* ⛔ 21/09/2026: `cols` era faixa de largura mínima com `auto-fit`, não número de colunas —
   `cols={2}` com 18 filhos rendia TRÊS colunas em 1.336 px. Ninguém tinha notado porque com
   dois filhos o auto-fit colapsa as trilhas vazias. Agora a contagem é a que se pede. */
.grade { display: grid; gap: var(--grid-gap); }
.g1 { grid-template-columns: minmax(0, 1fr); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gSug { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gLarga { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
/* Card curto ao lado de card alto não estica: a folga não vira buraco no fundo dele. */
.gradeTopo { align-items: start; }

@media (max-width: 1180px) {
  .g4, .gSug { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) { .gLarga { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .g2, .g3, .g4, .gSug, .gLarga { grid-template-columns: minmax(0, 1fr); }
}

/* ── Cabeçalho de página ─────────────────────────────────────────────────── */

.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.cabecaLegenda { font-size: var(--text-ui); color: var(--text-secondary); }
.cabecaTitulo {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-top: 6px;
}
/* ⚠️ `min-width: 0` e `max-width: 100%`: dentro de um `SecHead`, a faixa de pílulas nowrap que
   mora aqui herda o teto e rola, em vez de empurrar o card para fora da tela a 390 px. */
.cabecaAcoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cabecaLinha { align-items: center; min-height: var(--control-h); }
/* O título que só o leitor de tela recebe (caminho C, 21/09/2026). */
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
/* Num layout sem sombra e sem borda o vazio é o único ruído que sobra: ele fica na base,
   nunca entre dois blocos de conteúdo. */
.cardEstica { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.cardEscuro { background: var(--surface-dark); color: var(--text-on-dark); }
.cardInset {
  background: var(--surface-inset);
  border-radius: var(--radius-inset);
  padding: 16px 18px 14px;
}
.cardClicavel { cursor: pointer; text-align: left; width: 100%; transition: background-color var(--dur-cor) linear, transform var(--dur-mover) var(--ease); }

/* ── Cabeçalho de seção dentro do card ───────────────────────────────────── */

.secHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* No estreito o `meta` desce em vez de espremer o título: "A agenda" quebrava em "A / agenda". */
.secHeadEsq { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* ⛔ O TÍTULO QUEBRA QUANDO NÃO CABE. Com `white-space: nowrap`, o nome longo de um disparo
   ("Lembrete na véspera · Tom Jobim Musical") furava o card a 390 px — medido em 21/09/2026 na
   /analytics. Em tela larga nada muda: só quebra quem não cabe. */
.secHeadTitulo { font-size: var(--text-title); font-weight: var(--weight-medium); min-width: 0; overflow-wrap: anywhere; }
.secHeadMeta { font-size: var(--text-caption); color: var(--text-secondary); }

/* ── Botão ───────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-regular);
  transition: background-color var(--dur-cor) linear, color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.btn:disabled { cursor: not-allowed; opacity: .45; }
/* ⛔ 21/09/2026: nenhum controle da casa reagia ao clique. Sem sombra para levantar, a resposta
   é o afundar de 1 px — e ela é imediata, porque resposta atrasada não é resposta. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.chip:active, .pill:active, .opcao:active, .menuBotao:active, .popItem:active { transform: translateY(1px); }
.iconBtn:active { transform: scale(.93); }
.cardClicavel:active { transform: translateY(0); }
.btnMd { height: var(--control-h); padding: 0 16px; font-size: var(--text-ui); gap: 7px; }
.btnSm { height: 32px; padding: 0 14px; font-size: var(--text-caption); gap: 6px; }
.btnXs { height: var(--control-h-xs); padding: 0 12px; font-size: var(--text-caption); gap: 6px; }
/* ⛔ 21/09/2026: a família de 28 px passava invisível na régua da casa, que anuncia 30 e filtra
   `height < 28`. O desenho continua 28; o ALVO vai a 32, com a folga só na vertical. */
.btnXs::before, .chip::before, .pillSm::before, .menuBotaoXs::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  min-height: 32px;
}
.btnPrimary { background: var(--surface-dark); color: var(--text-on-dark); }
.btnSecondary { background: var(--surface-control); color: var(--text-primary); }
.btnOnCard { background: var(--surface-control-on-card); color: var(--text-primary); }
.btnAccent { background: var(--accent); color: var(--text-on-accent); }
.btnGhost { background: transparent; color: var(--text-secondary); padding: 0 6px; }

/* ── Botão de ícone ──────────────────────────────────────────────────────── */

.iconBtn {
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.iconBtnNeutral { background: var(--surface-control); color: var(--text-primary); }
.iconBtnDark { background: var(--surface-dark); color: var(--text-on-dark); }
.iconBtnAccent { background: var(--accent); color: var(--text-on-accent); }
.iconBtnLight { background: var(--surface-inset); color: var(--text-primary); }
.iconBtnPonto {
  position: absolute;
  top: 22%;
  right: 25%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Disco de glifo ─────────────────────────────────────────────────────── */

.disco { border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.discoEscuro { background: var(--surface-dark); color: var(--accent); }
.discoAccent { background: var(--accent); color: var(--text-on-accent); }
.discoClaro { background: var(--surface-control-on-card); color: var(--text-primary); }
.discoQuadrado { border-radius: var(--radius-tile); }

/* ── Etiqueta ────────────────────────────────────────────────────────────── */

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); white-space: nowrap; }
.deltaBase { color: var(--text-tertiary); }

.tag {
  /* O texto de leitor de tela (`soLeitor`) é absoluto: sem âncora aqui, ele escapava da célula. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.tagAccent { background: var(--accent); color: var(--text-on-accent); }
.tagDark { background: var(--surface-dark); color: var(--text-on-dark); }
.tagNeutral { background: var(--gray-250); color: #3A3A3A; }
.tagMuted { background: var(--surface-control-on-card); color: var(--text-secondary); }
.tagOutline { background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-outline); padding: 3px 8px; }
.tagOnDark { background: var(--surface-dark-elevated); color: var(--text-on-dark); }
/* Estado por COR, com o valor em `globals.css`: o que espera você é acento; o que já tem hora é
   azul; o que depende de fora é âmbar; o que caiu é coral; o que roda sozinho é violeta. */
.tagProgramado { background: var(--estado-programado-bg); color: var(--estado-programado-ink); }
.tagEsperaMundo { background: var(--estado-espera-mundo-bg); color: var(--estado-espera-mundo-ink); }
.tagRisco { background: var(--estado-risco-bg); color: var(--estado-risco-ink); }
.tagAutomatico { background: var(--estado-automatico-bg); color: var(--estado-automatico-ink); }
/* Dentro de coluna declarada a etiqueta ocupa a coluna inteira: é assim que todas ficam do
   mesmo tamanho numa lista, que é o que o olho compara. */
.tagCheia { width: 100%; }

/* ── Chip ────────────────────────────────────────────────────────────────── */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: #3A3A3A;
  font-size: var(--text-caption);
  white-space: nowrap;
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.chipOnCard { background: var(--surface-control-on-card); }
.chipAtivo { background: var(--surface-dark); color: var(--text-on-dark); }
.chipIcone { color: var(--text-secondary); }
/* Estados que NÃO dependem de ponteiro moram fora do `@media (hover)`: no toque eles continuam. */
.chipDestaque { background: var(--surface-dark); color: var(--text-on-dark); }

/* ── Grupo de pílulas ────────────────────────────────────────────────────── */

.pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  min-width: 0;
}
.pillsOnCard { background: var(--surface-control-on-card); }
/* ⛔ 21/09/2026: só o grupo do topo rolava; o do card vazava 188 px a 390 px. Pílula é fila:
   ela rola, nunca empurra a página. */
.pills { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pills::-webkit-scrollbar { display: none; }
.pillsRolavel { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pillsRolavel::-webkit-scrollbar { display: none; }
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui);
  white-space: nowrap;
  color: var(--text-nav);
  transition: background-color var(--dur-cor) linear, color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.pillSm { padding: 6px 13px; font-size: var(--text-caption); color: var(--text-secondary); }
.pillAtiva { background: var(--surface-dark); color: var(--text-on-dark); }

/* ── Número ──────────────────────────────────────────────────────────────── */

.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.statDir { text-align: right; }
.statRotulo {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.statDir .statRotulo { justify-content: flex-end; }
.statValor {
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ⛔ 21/09/2026: "terça, 15 de setembro" e "menos de 13.640 pessoas" são TEXTO no lugar do
   número, e `nowrap` a 28 px os fazia furar a coluna. Valor de texto quebra e desce de corpo. */
.statTexto { white-space: normal; line-height: 1.15; font-size: var(--text-title); }
.statXl { font-size: var(--text-stat-xl); }
.statLg { font-size: var(--text-stat-lg); }
.statMd { font-size: var(--text-stat-md); }
.statSm { font-size: var(--text-title); }
.statSub { font-size: var(--text-micro); color: var(--text-quaternary); }
.statEscuro .statRotulo, .statEscuro .statSub { color: var(--text-on-dark-muted); }

.banda { display: grid; gap: 18px 16px; }
.banda2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.banda3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.banda4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.banda5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* ⛔ `auto-fit` deixava o quarto KPI sozinho numa segunda faixa quando o card apertava. A
   contagem é explícita e cai de 5→3→2→1 inteira, nunca com órfã. */
.bandaAuto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
@media (max-width: 1180px) { .banda5, .banda4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .banda2, .banda3, .banda4, .banda5 { grid-template-columns: minmax(0, 1fr); } }

/* ── Barra de progresso ──────────────────────────────────────────────────── */

.trilho {
  height: 3px;
  border-radius: var(--radius-track);
  background: var(--track);
  overflow: hidden;
  flex-shrink: 0;
}
.trilhoElastico { flex-shrink: 1; min-width: 48px; }
.trilhoGrosso { height: 6px; border-radius: var(--radius-track); }
.trilhoPreench { height: 100%; border-radius: var(--radius-track); background: var(--surface-dark); transition: width var(--dur-mover) var(--ease); }
.trilhoAccent { background: var(--accent); }
.trilhoClaro { background: var(--gray-400); }
/* O anel é o trilho fechado em círculo: as mesmas cores, 2 px de traço, e a ponta redonda. */
.anel { display: inline-flex; flex-shrink: 0; }
.anelTrilho { fill: none; stroke: var(--track); stroke-width: 2.5; }
/* ⚠️ O lime de 500 some contra o trilho claro num traço de 2,5 px: o preenchimento é o `forte`, que
   é o par da paleta feito para barra e passa 3:1 contra o fundo. */
.anelPreench { fill: none; stroke: var(--lime-forte); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray var(--dur-mover) var(--ease); }
/* Passagem: a linha do funil, com o traço da conta inteira. */
/* Duas faixas: rótulo e número em cima, a barra na largura inteira embaixo — num card de 200 px
   a barra em linha sobrava com 30 px e não dizia nada (23/09/2026). */
.passagem { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rot val" "trilho trilho"; gap: 6px 10px; align-items: center; padding: 6px 0; }
.passagemRot { grid-area: rot; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--text-secondary); }
.passagemRot svg { color: var(--text-tertiary); }
.passagemTrilho { grid-area: trilho; position: relative; height: 8px; border-radius: var(--radius-track); background: var(--bar-neutral); }
.passagemBarra { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-track); background: var(--surface-dark); }
.passagemAcima { background: var(--accent); }
.passagemConta { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-500); }
.passagemVal { grid-area: val; text-align: right; font-size: var(--text-ui); font-variant-numeric: tabular-nums; }
/* Ranking: posição, nome, número absoluto e a parte do total. */
.ranking { display: flex; flex-direction: column; }
.rankingLinha { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 56px; gap: 12px; align-items: center; min-height: 46px; border-top: 1px solid var(--border-divider); }
.rankingLinha:first-child { border-top: 0; }
.rankingLinha > .tag { justify-self: end; }
.rankingPos { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-caption); color: var(--text-tertiary); background: var(--surface-control-on-card); font-variant-numeric: tabular-nums; }
.rankingPrimeiro { background: var(--surface-dark); color: var(--accent); }
.rankingNome { font-size: var(--text-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankingNum { font-size: var(--text-title); font-weight: var(--weight-light); font-variant-numeric: tabular-nums; }
/* Par: a linha de ficha, rótulo · valor · régua curta. */
.par { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; min-height: 36px; border-top: 1px solid var(--border-divider); }
.parRot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-ui); color: var(--text-secondary); min-width: 0; }
.parRot svg { color: var(--text-tertiary); flex: none; }
.parVal { font-size: var(--text-ui); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.parNota { font-size: var(--text-micro); color: var(--text-tertiary); text-align: right; }

/* ── Barra rotulada (praça, marca, gosto, canal, link) ───────────────────── */

.barras { display: flex; flex-direction: column; gap: 12px; }
/* O número em largura fixa e tabular: sem isso o trilho ao lado começa em x diferente por linha. */
.numFixo { font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
/* A ocupação numa coluna própria da linha, com origem comum e largura de leitura. */
/* ⛔ 21/09/2026 (Alex): a barra e o número TÊM de ter sempre o mesmo tamanho. Coluna fixa nos
   dois: o número não empurra mais a barra, e as barras de seis eventos viram uma comparação. */
.ocupacao { display: grid; grid-template-columns: 112px 104px; gap: 10px; align-items: center; min-width: 0; }
.ocupacaoNum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocupacaoForte { font-size: var(--text-ui); font-weight: var(--weight-medium); }
/* Empilhada: número em cima, barra embaixo, as duas na mesma coluna estreita. A barra continua
   com origem comum — é o que faz seis eventos virarem uma comparação de comprimento. */
.ocupacaoDe { font-size: var(--text-caption); color: var(--text-tertiary); }
.barra {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(90px, 2fr) auto;
  gap: 16px;
  align-items: center;
}
.barraMax { font-size: var(--text-micro); color: var(--text-tertiary); margin-bottom: 10px; }
/* Valor pequeno demais para virar comprimento honesto vira PONTO: presença sem fingir tamanho. */
.barraPonto { width: 4px; height: 6px; border-radius: 2px; background: var(--surface-dark); }
.barraRot { font-size: var(--text-ui); min-width: 0; }
.barraRotIcone { display: flex; align-items: center; gap: 6px; }
.barraSub { font-size: var(--text-micro); color: var(--text-quaternary); margin-top: 2px; }
.barraTrilho { height: 6px; border-radius: var(--radius-track); background: var(--surface-control-on-card); overflow: hidden; }
.barraPreench { height: 100%; border-radius: var(--radius-track); background: var(--surface-dark); transition: width var(--dur-mover) var(--ease); }
.barraValor { font-size: var(--text-ui); font-weight: var(--weight-medium); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Avatar ──────────────────────────────────────────────────────────────── */

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: var(--weight-medium);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--accent);
}
.avatarFoto { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatarAccent { background: var(--accent); color: var(--text-primary); }
.avatarGray { background: var(--gray-400); color: var(--text-primary); }
.avatarLight { background: var(--surface-inset); color: var(--text-primary); }
.avatarBranco { background: var(--surface-dark); color: var(--text-on-dark); }

/* O complemento do nome do disparo: a praça, a cidade, o lote. Vem depois do que ele faz, e
   cede a largura primeiro. */
.oportunidadeComplemento { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.oportunidadeComplemento::before { content: " "; }
.oportunidadeEscura .oportunidadeComplemento { color: var(--text-on-dark-muted); }

/* O selo da recomendação, no lugar da seta: ele diz por que este card é o primeiro. */
.oportunidadeSelo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}
.oportunidadeRodape {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.oportunidadeMotivo { font-size: var(--text-micro); color: var(--text-on-dark-muted); }
.oportunidadeAcao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color var(--dur-cor) linear;
}

/* ── Card de resumo ──────────────────────────────────────────────────────── */

/* A hierarquia é de ÁREA: a métrica que responde a tela ocupa um quarto do card, em tinta, e as
   outras ficam do mesmo tamanho entre si. Quatro colunas seguram de três a cinco métricas sem
   deixar tijolo órfão. */
.resumoCard > .secHead { min-height: var(--control-h); }
.resumoGrade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.resumoBloco {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-inset);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  min-height: 188px;
}
.resumoRotulo { color: var(--text-on-dark-muted); }
.resumoValor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 52px;
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resumoSub { margin-top: 6px; font-size: var(--text-micro); color: var(--text-on-dark-muted); }
.resumoCel {
  background: var(--surface-inset);
  border-radius: var(--radius-inset);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.resumoCelLarga { grid-column: span 2; }
.resumoCelValor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--text-stat-md);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A escala: o preenchimento é onde a conta está, a marca é a referência publicada. */
.escala { display: flex; flex-direction: column; gap: 10px; }
.escalaTrilho { position: relative; height: 10px; border-radius: var(--radius-track); background: rgba(255, 255, 255, .14); }
.escalaPreench { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-track); }
.escala_lime { background: var(--accent); }
.escala_coral { background: var(--coral-500); }
.escala_azul { background: var(--azul-500); }
.escala_ambar { background: var(--ambar-500); }
.escala_violeta { background: var(--violeta-500); }
.escalaMarca { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--white); border-radius: 2px; }
.escalaTexto { font-size: var(--text-caption); color: var(--text-on-dark); }
.escalaMarcaRot { color: var(--text-on-dark-muted); margin-right: 8px; }

@media (max-width: 1100px) {
  .resumoGrade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumoBloco { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .resumoGrade { grid-template-columns: minmax(0, 1fr); }
  .resumoBloco { grid-column: auto; }
  /* ⛔ `span 2` numa grade de uma coluna cria uma coluna implícita e leva o card para fora da
     tela: numa faixa só, o tijolo largo volta a ser um tijolo. */
  .resumoCelLarga { grid-column: auto; }
  .resumoValor { font-size: var(--text-display); }
}

/* ── Pílula de evento ────────────────────────────────────────────────────── */

/* ⛔ 21/09/2026 (Alex): o nome do evento sai do título e vira peça. O avatar entra dentro da
   pílula, encostado na borda, e o nome ocupa o resto: a marca é o essencial e a pílula é o
   tamanho dela. */
.pilulaEvento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 12px 3px 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-control-on-card);
  color: var(--text-primary);
  font-size: var(--text-caption);
}
.pilulaEventoEscura { background: var(--surface-dark-elevated); color: var(--text-on-dark); }
.pilulaEventoNome {
  font-weight: var(--weight-medium);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocupacaoVazio { font-size: var(--text-caption); color: var(--text-tertiary); }

/* ── Linha de lista ──────────────────────────────────────────────────────── */


.linha {
  display: grid;
  grid-template-columns: var(--cols, minmax(0, 1fr) auto);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border-divider);
  min-width: 0;
  width: 100%;
  text-align: left;
}
.linhaPrimeira { border-top: 0; }
/* ⛔ A linha clicável mudava só a COR DO TÍTULO — o Alex não via. Agora a faixa inteira acende,
   e o realce sai 8 px para fora sem empurrar nada: `box-shadow` de espalhamento desenha a folga
   que um `padding` mudaria de lugar. */
.linhaClicavel { cursor: pointer; border-radius: 10px; transition: background-color var(--dur-cor) linear, box-shadow var(--dur-cor) linear; }

/* Escolhida: o mesmo anel e o mesmo fundo da `Opcao`, para a lista e a grade dizerem a mesma
   coisa com o mesmo desenho. O respiro horizontal é o que faz o fundo virar uma peça, e não uma
   faixa colada nas bordas do card.
   ⛔ 21/09/2026 (Alex, "layout quebrado"): este bloco morava ANTES de `.linha`, que declara
   `padding: 12px 0` — mesma especificidade, e quem vem depois vence. O `padding` horizontal daqui
   era apagado e sobrava a margem negativa: a linha escolhida inteira andava 12 px para a esquerda,
   fora do alinhamento das outras. O lugar dele é DEPOIS, e a régua de alinhamento não pega isto
   porque ela mede a grade, não o estado. */
.linhaEscolhida {
  background: var(--sel-bg);
  outline: 1.5px solid var(--sel-anel);
  outline-offset: -1.5px;
  border-radius: var(--radius-inset);
  border-top-color: transparent;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.linhaEscolhida + .linha { border-top-color: transparent; }

.linhaCorpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* A troca de cor do título era a única reação da linha, e não aparecia. */
.linhaTitulo {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms linear;
}
.linhaMeta {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.linhaFim { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.linhaFimGrade {
  display: grid;
  grid-template-columns: var(--colsFim);
  gap: 12px;
  align-items: center;
  justify-items: stretch;
}
.linhaFimGrade > * { min-width: 0; }

/* ── Meta (uma natureza por grupo, glifo à esquerda) ─────────────────────── */

.meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  min-width: 0;
}
/* ⛔ 21/09/2026: `nowrap` no grupo inteiro estourava 186 px a 390 px, porque a regra de um
   segmento é FRASE, não rótulo. Trava a quebra só no que é curto por natureza. */
.metaCurta { white-space: nowrap; }
/* Uma coluna por natureza, declarada pela lista. A coluna vazia SEGURA o lugar: é o que faz o
   glifo de tempo cair no mesmo x em todas as linhas. */
.linhaMetaGrade {
  display: grid;
  gap: 4px 14px;
  align-items: center;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  min-width: 0;
  width: 100%;
}
/* A célula RECORTA: numa coluna declarada, texto que não cabe vira reticências, nunca
   transbordo — e o que se perde está no título ou na tela de detalhe. */
.metaCelula { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.meta > span { min-width: 0; }
.metaForte { color: var(--text-primary); font-weight: var(--weight-medium); }

/* ── Tijolo de data ──────────────────────────────────────────────────────── */

.dataTile {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-tile);
  background: var(--surface-inset);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}
.dataTileDia { font-size: 17px; }
.dataTileSemana { font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 3px; }

/* ── Gráfico de colunas ──────────────────────────────────────────────────── */

/* O gráfico ocupa a altura que o card lhe dá: `flex: 1` nos dois níveis, e o piso vem do `altura`. */
.colunas { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.colunasCorpo { position: relative; display: grid; gap: 10px; align-items: end; flex: 1; }
/* O traço da referência (o setor), de ponta a ponta, por cima das colunas. */
.colunasReferencia { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ambar-forte); pointer-events: none; }
.coluna { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.colunaRot { position: relative; z-index: 1; padding: 0 3px; border-radius: 4px; background: var(--surface-card); font-size: var(--text-micro); color: var(--text-quaternary); }
.colunaRotDestaque {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
}
.colunaBarra { width: 100%; max-width: 48px; border-radius: var(--radius-bar); background: var(--bar-neutral); }
.colunaBarraAccent { background: var(--accent); }
.colunaBarraEscura { background: var(--surface-dark); }
.colunaBarraHachura { background: repeating-linear-gradient(135deg, var(--bar-hatch) 0 1.2px, transparent 1.2px 6px); }
.colunasEixo {
  display: grid;
  gap: 10px;
  text-align: center;
  font-size: var(--text-micro);
  color: var(--text-quaternary);
}

/* ── Nota de rodapé de card ──────────────────────────────────────────────── */

.nota {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 14px;
}
.rodapeCard {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* ── Tabela ──────────────────────────────────────────────────────────────── */

/* Tabela de muitas colunas rola DENTRO do card: a 390 px, cinco colunas não cabem, e
   espremê-las quebraria o número. */
.tabelaRolo { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabelaRolo::-webkit-scrollbar { height: 6px; }
.tabelaRolo::-webkit-scrollbar-thumb { background: var(--border-outline); border-radius: 3px; }
.tabela { font-size: var(--text-ui); min-width: 100%; }
.tabela th {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  text-align: left;
  padding: 0 12px 10px 0;
  white-space: nowrap;
}
/* ⛔ 21/09/2026: cabeçalho à esquerda e valor à direita deixavam 1.164 px entre o rótulo e o
   dado — a coluna parava de existir como coluna. O alinhamento passa a ser da COLUNA. */
.tabela th.colNum, .tabela td.colNum { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.colTexto, .tabela td.colTexto { text-align: left; }
.tabela td { padding: 11px 12px 11px 0; border-top: 1px solid var(--border-divider); vertical-align: middle; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabelaNome { font-weight: var(--weight-medium); }
.tabelaSub { font-size: var(--text-micro); color: var(--text-quaternary); margin-top: 2px; }
/* Nome que é link dentro de tabela: o desenho continua na altura da linha, o ALVO vai a 30 px.
   A folga é só vertical — na horizontal ela viraria transbordo da célula. */
.tabelaLink { display: inline-flex; align-items: center; min-height: 30px; margin: -7px 0; }

/* ── Campo de formulário ─────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campoRotulo { font-size: var(--text-caption); color: var(--text-secondary); }
.campoFalta .entrada,
.campoFalta [data-campo-data] > button,
.campoFalta [aria-haspopup="listbox"] { box-shadow: 0 0 0 1.5px var(--coral-forte); }
.campoFaltaTexto { font-size: var(--text-caption); color: var(--coral-ink); }
/* Sobre a superfície escura o mudo é claro: lá o contraste é contra o preto, não contra o card. */
.cardEscuro .campoRotulo, .cardEscuro .statRotulo, .cardEscuro .statSub, .cardEscuro .nota { color: var(--text-on-dark-muted); }
.entrada {
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-outline);
  background: var(--surface-inset);
  font-size: var(--text-ui);
  width: 100%;
  min-width: 0;
}
.entrada::placeholder { color: var(--text-quaternary); }
.entradaArea { height: auto; padding: 12px 16px; border-radius: var(--radius-inset); line-height: 1.5; resize: vertical; font-family: inherit; }

/* ── Interruptor ─────────────────────────────────────────────────────────── */

.switch {
  width: 40px;
  height: 30px;
  margin: -4px 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.switchTrilho {
  /* O interruptor era o único controle que não dizia nada ao ponteiro: o trilho escurece um
     degrau, que é o bastante para ele parecer clicável antes do clique. */
  width: 40px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--gray-400);
  padding: 3px;
  display: flex;
  align-items: center;
  transition: background-color var(--dur-mover) linear;
}
.switchOn .switchTrilho { background: var(--surface-dark); }
.switchBola {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--dur-mover) var(--ease);
}
.switchOn .switchBola { transform: translateX(18px); background: var(--accent); }

/* ── Balão da régua ("i") ────────────────────────────────────────────────── */

.infoEnvolve {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  /* ⛔ Margem negativa só na VERTICAL: na horizontal ela viraria transbordo de 8 px em toda
     linha que termina com o "i", e a régua de tela mede transbordo por elemento. */
  margin: -7px 0;
  flex-shrink: 0;
  vertical-align: middle;
}
/* O desenho tem 13 px; o ALVO tem 30, que é o piso da casa. */
.infoBotao {
  color: var(--text-quaternary);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.infoBalao {
  animation: abreGaveta var(--dur-gaveta) var(--ease);
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 76vw);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-inset);
  padding: 14px 16px;
  font-size: var(--text-caption);
  line-height: 1.5;
  font-weight: var(--weight-regular);
  text-align: left;
}
.infoBalaoDir { left: auto; right: 0; transform: none; }
.infoFonte { color: var(--text-on-dark-muted); margin-top: 8px; display: block; }

/* ── Gaveta suspensa (sino, busca, troca de conta) ───────────────────────── */

.pop {
  animation: abreGaveta var(--dur-gaveta) var(--ease);
  transform-origin: top center;
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  max-width: min(420px, 92vw);
  background: var(--white);
  border-radius: var(--radius-card-sm);
  padding: 8px;
  /* ⛔ A gaveta é BRANCA e abre sobre card branco, e a casa não tem sombra: quem a separa é a borda,
     no tom do contorno (auditoria de 24/09/2026). Dentro dela o controle volta ao degrau 2 — a
     gaveta do topo herdava o branco da casca, e os botões de Avisos sumiam nela. */
  border: 1px solid var(--border-outline);
  --surface-control: var(--gray-100);
}
.popEsq { right: auto; left: 0; }
.popTitulo { font-size: var(--text-caption); color: var(--text-secondary); padding: 8px 10px 6px; }
.popItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-tile);
  text-align: left;
  min-width: 0;
}
.popCorpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.popNome { font-size: var(--text-ui); font-weight: var(--weight-medium); }
.popSub { font-size: var(--text-micro); color: var(--text-secondary); }
.popDiv { height: 1px; background: var(--border-divider); margin: 6px 10px; }

/* ── Estado vazio ────────────────────────────────────────────────────────── */

.vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 0 8px;
  font-size: var(--text-ui);
  color: var(--text-secondary);
}

/* ── Utilidades ──────────────────────────────────────────────────────────── */

.linhaCtrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.espaco { flex: 1; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.soLeitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Os glifos do canal numa coluna própria: dois canais cabem, e o par fica centrado na faixa. */
.canais { display: flex; gap: 6px; justify-content: center; color: var(--text-tertiary); }

/* ── Menu da casa (no lugar do `<select>` do sistema) ────────────────────── */

.menuEnvolve { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.menuBotao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: var(--text-ui);
  transition: background-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
}
.menuBotaoSm { height: var(--control-h-sm); font-size: var(--text-caption); padding: 0 12px; }
/* 28 px: o mesmo dos botões "Todos ›" da direita do Painel, para o filtro caber ao lado deles. */
.menuBotaoXs { position: relative; height: var(--control-h-xs); font-size: var(--text-caption); padding: 0 12px; }
.menuBotaoAberto { background: var(--surface-dark); color: var(--text-on-dark); }
.menuSeta { margin-left: auto; transition: transform var(--dur-mover) var(--ease); }
.menuSetaAberta { transform: rotate(180deg); }
/* A lista tem a largura do CONTEÚDO, nunca a do gatilho: presa em 100% do botão, "Capital
   Inicial · turnê Música Urbana" quebrava em quatro linhas. */
.menuLista { min-width: 100%; width: max-content; max-width: min(380px, 90vw); max-height: 320px; overflow-y: auto; }
.menuItem { gap: 8px; }
.menuItemOn { background: var(--sel-bg); }
.menuVisto { width: 16px; display: grid; place-items: center; color: var(--lime-ink); flex-shrink: 0; }

/* ── Opção: escolhida e recomendada ──────────────────────────────────────── */

.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--opcao-min, 250px)), 1fr)); gap: 12px; }
.opcoesTopo { margin-top: 10px; }
.opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 44px 16px 16px;
  border-radius: var(--radius-inset);
  background: var(--surface-control);
  text-align: left;
  min-width: 0;
  transition: background-color var(--dur-cor) linear, outline-color var(--dur-cor) linear, transform var(--dur-toque) var(--ease);
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
}
/* ⛔ Escolhida não é "um pouco mais clara": é anel de tinta, fundo de acento e um visto. */
/* A opção de leitura não é controle: sem cursor de mão e sem a reação de ponteiro. */
.opcaoLeitura { cursor: default; }
.opcaoOn { background: var(--sel-bg); outline-color: var(--sel-anel); }
.opcaoTitulo { font-size: var(--text-body); font-weight: var(--weight-medium); display: flex; align-items: center; gap: 8px; }
.opcaoDesc { font-size: var(--text-caption); color: var(--text-secondary); line-height: 1.45; }
.opcaoNum { font-size: var(--text-caption); font-weight: var(--weight-medium); margin-top: 2px; }
.opcaoIcone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-inset);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.opcaoIconeOn { background: var(--accent); color: var(--text-on-accent); }
.opcaoVisto {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sel-selo-bg);
  color: var(--sel-selo-ink);
}
.opcaoRec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  align-self: flex-start;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--rec-bg);
  color: var(--rec-ink);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-align: left;
}

/* ── Card de oportunidade (home, disparos, automações) ───────────────────── */

.oportunidade {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card-sm);
  padding: 20px 20px 18px;
  min-height: 208px;
  background: var(--surface-card);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-cor) linear, transform var(--dur-mover) var(--ease);
}
.oportunidadeEscura { background: var(--surface-dark); color: var(--text-on-dark); }
.oportunidadeTopo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oportunidadeSeta {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-inset);
  color: var(--text-primary);
  flex-shrink: 0;
  transition: transform var(--dur-mover) var(--ease);
}
.oportunidadeEscura .oportunidadeSeta { background: var(--white); }
.oportunidadeTitulo { font-size: var(--text-card-title); line-height: 1.3; margin-top: 14px; }
.oportunidadePorque { font-size: var(--text-ui); line-height: 1.45; margin-top: 6px; color: var(--text-secondary); }
.oportunidadeEscura .oportunidadePorque { color: var(--text-on-dark-muted); }
.oportunidadeNumeros {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

/* ── Recomendação da casa ────────────────────────────────────────────────── */

/* ⛔ O recado da casa é PÍLULA ESCURA de uma linha (lei `linguagem-de-tela.md` §3.1): glifo num
   disco de acento, texto, e a ação em botão de acento. Faixa creme não existe. */
.recomendacao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  min-height: 40px;
  flex-wrap: wrap;
}
.recomendacaoSelo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--text-on-accent);
  flex-shrink: 0;
}
.recomendacaoCorpo { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.recomendacaoTitulo { font-size: var(--text-ui); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recomendacaoTexto { font-size: var(--text-caption); color: var(--text-on-dark-muted); line-height: 1.45; }
.recomendacaoBloco { align-items: flex-start; padding: 14px; border-radius: var(--radius-inset); gap: 12px; }
.recomendacaoBloco .recomendacaoCorpo { min-width: 0; gap: 4px; }
/* Em bloco o título é TEXTO corrido: o "i" segue a última palavra, e não desce sozinho. */
.recomendacaoBloco .recomendacaoTitulo { display: block; line-height: 1.45; padding-top: 3px; }
.recomendacaoBloco .recomendacaoTitulo > * { vertical-align: middle; margin-left: 4px; }
.recomendacaoAcao { display: flex; margin-top: 8px; }

@media (max-width: 720px) {
  /* ⛔ 21/09/2026: a banda vira 2 colunas de 187 px e "R$ 7.356.011" a 28 px furava a célula.
     O número desce de corpo em vez de vazar. */
  .statXl { font-size: var(--text-stat-md); }
  .statLg { font-size: var(--text-stat-md); }
  .ocupacao { grid-template-columns: auto minmax(0, 76px); gap: 8px; }
  .linhaFim { max-width: 100%; }
  /* A linha de lista vira duas faixas: o conteúdo em cima, o que ela oferece embaixo. */
  .linha { grid-template-columns: var(--colsEstreito, auto minmax(0, 1fr)); }
  /* Abaixo de 720 px não há largura para coluna declarada: a grade volta a ser fluxo, e o
     alinhamento por coluna deixa de existir porque a linha inteira virou duas faixas. */
  .linhaMetaGrade { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .linhaFimGrade { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .tagCheia { width: auto; }
  .linhaFim { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .banda3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ⚠️ Abaixo de 480 a coluna de 170 px não cabe "R$ 12.632.024" nem a 22 px: a banda vira uma
     coluna só. Foi o que apareceu quando o período deixou de ser fixo em 30 dias e a home passou
     a poder mostrar 90 — o número cresceu três casas e furou a célula. */

  .pagina { padding: 14px 16px 44px; }
  .cabecaTitulo { font-size: 28px; }
  .card { padding: 18px; }
  .barra { grid-template-columns: minmax(0, 1fr) auto; }
  .barra > :nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* ⛔ `:hover` vive dentro de `@media (hover:hover)` (lei da casa, 19/09/2026): no toque
   o estado fica aceso até o próximo toque em outro lugar. `:focus-visible` e `:active`
   ficam FORA — teclado e dedo não são ponteiro. */
@media (max-width: 480px) {
  /* ⚠️ Abaixo de 480 a coluna de 170 px não cabe "R$ 12.632.024" nem a 22 px: a banda vira uma
     coluna só. Foi o que apareceu quando o período deixou de ser fixo em 30 dias e a home passou
     a poder mostrar 90 — o número cresceu três casas e furou a célula. */
  .banda2, .banda3, .banda4, .banda5, .bandaAuto { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: hover) {
  .cardClicavel:hover { background: var(--surface-control); transform: translateY(-2px); }
  .cardEscuro.cardClicavel:hover { background: var(--surface-dark-hover); }
  .btnPrimary:hover:not(:disabled) { background: var(--surface-dark-hover); }
  .btnSecondary:hover:not(:disabled) { background: var(--gray-250); }
  .btnOnCard:hover:not(:disabled) { background: var(--gray-300); }
  .btnAccent:hover:not(:disabled) { background: var(--accent-hover); }
  .btnGhost:hover:not(:disabled) { color: var(--text-primary); }
  .iconBtnNeutral:hover { background: var(--gray-250); }
  .iconBtnDark:hover { background: var(--surface-dark-hover); }
  .iconBtnAccent:hover { background: var(--accent-hover); }
  /* O claro não tinha resposta nenhuma ao ponteiro (varredura de 24/09/2026). */
  .iconBtnLight:hover { background: var(--surface-control-hover); }
  .chip:hover { background: var(--gray-250); color: var(--text-primary); }
  .chipAtivo:hover { background: var(--surface-dark-hover); color: var(--accent); }
  .chipDestaque:hover { background: var(--surface-dark-hover); color: var(--text-on-dark); }
  .pill:hover { background: var(--gray-250); color: var(--text-primary); }
  /* A pílula ATIVA também responde: sem isso, o item da tela em que a pessoa está era o único
     controle inerte da casa — e é justamente o que ela mais aponta. */
  .pillAtiva:hover { background: var(--surface-dark-hover); color: var(--text-on-dark); }
  .linhaClicavel:hover { background: var(--surface-control-on-card); box-shadow: 0 0 0 8px var(--surface-control-on-card); }
  .linhaClicavel:hover .linhaTitulo { color: var(--ink-900); }
  .tabelaLink:hover { color: var(--ink-400); }
  .infoBotao:hover { color: var(--text-primary); background: var(--surface-control-on-card); }
  .popItem:hover { background: var(--gray-100); }
  .menuBotao:hover { background: var(--gray-250); }
  /* ⚠️ `:hover` tem especificidade maior que a classe de estado: sem repetir o seletor aqui, o
     botão aberto ficava com fundo claro e texto claro — invisível — enquanto o ponteiro estava
     em cima dele, que é exatamente o momento em que ele está aberto. */
  .menuBotaoAberto:hover { background: var(--surface-dark-hover); color: var(--text-on-dark); }
  .menuItemOn:hover { background: var(--sel-bg); }
  /* A opção inteira levanta 1 px: com fundo quase igual ao do card, a cor sozinha não aparecia. */
  .opcao:hover { background: var(--surface-control-hover); transform: translateY(-1px); }
  .opcaoLeitura:hover { background: var(--surface-control); transform: none; }
  .opcaoLeitura.opcaoOn:hover { background: var(--sel-bg); }
  .oportunidade:hover { background: var(--gray-100); transform: translateY(-2px); }
  .oportunidadeEscura:hover { background: var(--surface-dark-hover); }
  .oportunidade:hover .oportunidadeSeta { transform: rotate(45deg); }
  /* O card inteiro é o link, então a ação reage junto com ele. */
  .oportunidadeEscura:hover .oportunidadeAcao { background: var(--accent-hover); }
  .opcaoOn:hover { background: var(--sel-bg); outline-color: var(--sel-anel); }
  /* O interruptor era o único controle mudo ao ponteiro: o trilho escurece um degrau, que é o
     bastante para ele parecer clicável ANTES do clique. */
  .switch:hover .switchTrilho { background: var(--ink-150); }
  .switchOn:hover .switchTrilho { background: var(--surface-dark-hover); }
}

/* ── Logo de marca de terceiro ───────────────────────────────────────────── */

/* Fundo branco: logo de marca é desenhado para ele, e sobre o cinza do card metade deles some. */
.logoMarca {
  border-radius: var(--radius-tile);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-250);
  padding: 5px;
}
.logoMarcaImg { width: 100%; height: 100%; object-fit: contain; display: block; }
.logoMarcaVazia { background: var(--surface-control-on-card); border-color: transparent; font-weight: var(--weight-medium); }

/* ── Tijolo: rótulo, número e a fração que ele ocupa ─────────────────────── */

/* ⛔ 23/09/2026: as colunas saem da largura DO CONTAINER, no máximo `--tijolo-cols` e nunca abaixo de
   170 px. Pela largura da janela, o card de meia coluna a 1024 px ganhava três tijolos de 130 px e
   "R$ 13.523" vazava 17 px. */
.tijolos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - (var(--tijolo-cols, 4) - 1) * 10px) / var(--tijolo-cols, 4))), 1fr));
  gap: 10px;
}
@media (max-width: 460px) { .tijolos { grid-template-columns: minmax(0, 1fr); } }
.tijolo {
  background: var(--surface-inset);
  border-radius: var(--radius-inset);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tijoloRotulo { font-size: var(--text-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tijoloValor { font-size: var(--text-stat-md); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tijoloTrilho { height: 4px; border-radius: 2px; background: var(--surface-control-on-card); overflow: hidden; margin-top: 7px; }
.tijoloPreench { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.tijoloSub { margin-top: 6px; }
/* O primeiro da ordem em tinta, com o trilho um degrau acima dela. */
.tijoloDestaque { background: var(--surface-dark); color: var(--text-on-dark); }
.tijoloDestaque .tijoloRotulo, .tijoloDestaque .tijoloSub { color: var(--text-on-dark-muted); }
.tijoloDestaque .tijoloTrilho { background: var(--surface-dark-elevated); }

/* ── A faixa de leituras (21/09/2026) ────────────────────────────────────────
   Uma leitura por vez no rodapé do card de resumo, com a pilha dizendo que há mais. O degrau de
   cinza é o da casa: a carta na superfície de inset, as duas camadas um e dois passos abaixo.
   ⛔ A troca é de CARTA. As duas cartas ocupam o mesmo lugar, e o que muda é qual delas está na
   frente: trocar o texto dentro de uma caixa parada faz a peça piscar. */
.resumoRodape { margin-top: 16px; }
.leitPilha { position: relative; }
.leitCamada { position: absolute; height: 26px; border-radius: var(--radius-inset); }
/* As cartas de baixo da pilha precisam se separar da PÁGINA, que é onde elas aparecem (24/09/2026). */
.leitCamada1 { left: 18px; right: 18px; bottom: -6px; background: var(--gray-250); }
.leitCamada2 { left: 38px; right: 38px; bottom: -12px; background: var(--gray-400); }
/* ⛔ Quem manda na altura é a carta ATIVA, em fluxo: com as duas absolutas dentro de um container
   de altura fixa, a 390 px a frase de três linhas vazava por baixo e a régua não via — ela mede
   transbordo horizontal, não vertical. A que sai é a única absoluta, e flutua por cima. */
.leitCartas { position: relative; }
.leitCarta {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 13px 14px;
  border-radius: var(--radius-inset);
  background: var(--surface-inset);
}
/* ⛔ Animação, e não transição: a carta que entra nasce agora, e `@keyframes` roda no mount sem
   depender de dois quadros. Com transição em cima do mesmo nó, o React trocava só o texto e a
   peça aparecia pronta. A que sai fica fora do fluxo do ponteiro enquanto se despede. */
.leitCartaEntra { animation: leitEntra 1200ms var(--ease) both; }
/* Entrada desacelera, saída acelera: as duas curvas da casa, e nenhuma terceira. */
.leitCartaSai { position: absolute; inset: 0; animation: leitSai 1200ms var(--ease-saida) both; pointer-events: none; }
@keyframes leitEntra {
  from { transform: translateY(10px) scale(.975); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes leitSai {
  from { transform: none; opacity: 1; }
  to { transform: translateY(-18px) scale(.985); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .leitCartaEntra { animation: leitEntraSuave 120ms linear both; }
  .leitCartaSai { animation: leitSaiSuave 120ms linear both; }
  @keyframes leitEntraSuave { from { opacity: 0; } to { opacity: 1; } }
  @keyframes leitSaiSuave { from { opacity: 1; } to { opacity: 0; } }
}
.leitSelo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: var(--accent);
  flex-shrink: 0;
}
.leitTexto { flex: 1; min-width: 0; font-size: var(--text-body); color: var(--text-secondary); line-height: 1.45; }
.leitForte { font-weight: var(--weight-medium); }
.leitBom { color: var(--lime-ink); }
.leitRisco { color: var(--coral-ink); }
/* O projeto da leitura (23/09/2026): o nome em tinta dentro da frase, e o avatar no lugar do selo,
   com o brilho da casa encolhido para insígnia. O anel é a cor da carta — recorte, não borda.
   ⚠️ A caixa tem 31 px para a insígnia caber DENTRO dela: pendurada para fora, a régua de
   transbordo reprova a faixa inteira. */
.leitNome { color: var(--text-primary); font-weight: var(--weight-medium); }
/* ⛔ O avatar ocupa o lugar do selo, 28 px, e os 3 px da insígnia saem pela margem negativa
   (23/09/2026): com a caixa inteira no fluxo, a carta de evento media 57 px contra 56 da carta sem
   evento, e a frase começava 3 px mais à direita. A insígnia fica DENTRO da caixa — posta para fora
   dela, a régua de tela lê transbordo. */
.leitSeloAvatar { position: relative; flex-shrink: 0; width: 31px; height: 31px; margin: 0 -3px -3px 0; }
.leitInsignia {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--text-on-accent);
  outline: 2px solid var(--surface-inset);
}
/* A forma do dado, na sobra da linha. ⛔ Barra é papel de `forte` no espectro; como texto, esses
   mesmos valores não passariam o piso. */
.leitForma { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; flex-shrink: 0; }
.leitFormaFracao { align-items: center; width: 62px; }
.leitBarra { width: 7px; border-radius: 2px; }
.leitBarraLime { background: var(--lime-forte); }
.leitBarraCoral { background: var(--coral-forte); }
.leitBarraNeutra { background: var(--gray-400); }
.leitFracTrilho { width: 100%; height: 8px; border-radius: var(--radius-track); background: var(--gray-300); overflow: hidden; }
.leitFracCheio { display: block; height: 100%; border-radius: var(--radius-track); }
.leitCurva { overflow: visible; }
.leitCurva polyline { fill: none; stroke: var(--ink-800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.leitCurva circle { fill: var(--lime-forte); stroke: none; }
.leitSinal { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.leitConta { font-size: var(--text-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leitSeta {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background-color var(--dur-cor) linear, color var(--dur-cor) linear;
}
.leitSeta:active { transform: translateY(1px); }
@media (hover: hover) {
  .leitSeta:hover { background: var(--surface-control-on-card); color: var(--text-primary); }
}
@media (max-width: 640px) {
  .leitCarta { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .leitTexto { flex: 1 1 100%; order: 2; }
  .leitForma { order: 3; }
  .leitSinal { order: 4; margin-left: auto; }
}

/* ── Texto e fila: os dois tijolos que apagam o estilo em linha ────────────
   ⛔ 21/09/2026, item (6) da auditoria: eram 191 blocos `style={{…}}` e cerca de 450
   propriedades estáticas espalhadas por 20 telas — a lei do componente canônico quebrada em
   outra forma. Estas duas famílias absorvem o que mais se repetia: texto com token de tamanho e
   de tom, e fila com alinhamento e respiro. */

.texto { margin: 0; }
.textoBloco { display: block; }
.textoMicro { font-size: var(--text-micro); }
.textoCaption { font-size: var(--text-caption); }
.textoUi { font-size: var(--text-ui); }
.textoBody { font-size: var(--text-body); }
.textoCard { font-size: var(--text-card-title); line-height: 1.3; }
.textoSecundario { color: var(--text-secondary); }
.textoTerciario { color: var(--text-tertiary); }
.textoQuaternario { color: var(--text-quaternary); }
.textoForte { font-weight: var(--weight-medium); }
.textoSolto { line-height: 1.5; }
.textoDireita { text-align: right; }

.acima1 { margin-top: var(--space-1); }
.acima2 { margin-top: var(--space-2); }
.acima3 { margin-top: var(--space-3); }
.acima4 { margin-top: var(--space-4); }
.acima5 { margin-top: var(--space-5); }
.acima6 { margin-top: var(--space-6); }
.acima7 { margin-top: var(--space-7); }

.fila { display: flex; align-items: center; }
.filaEmLinha { display: inline-flex; }
.filaTopo { align-items: flex-start; }
.filaBase { align-items: flex-end; }
.filaEntre { justify-content: space-between; }
.filaQuebra { flex-wrap: wrap; }
.fila1 { gap: var(--space-1); }
.fila2 { gap: var(--space-2); }
.fila3 { gap: var(--space-3); }
.fila4 { gap: var(--space-4); }
.fila5 { gap: var(--space-5); }
.fila6 { gap: var(--space-6); }
.fila7 { gap: var(--space-7); }

/* ── Rolo ─────────────────────────────────────────────────────────────────
   O teto vem por `--rolo-teto`, do componente. A barra fica discreta e só aparece no ponteiro,
   e o `tabIndex` no container é o que deixa o teclado rolar a lista. */
.rolo {
  max-height: var(--rolo-teto, 310px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.roloDeitado {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  display: flex;
  gap: 12px;
  padding-bottom: 6px;
}
.roloDeitado > * { flex: 0 0 auto; }
/* O teto vira piso, e o card esticado pela grade dá o resto. */
.roloEnche { flex: 1 1 0; min-height: var(--rolo-teto, 310px); max-height: none; }
.roloDeitado::-webkit-scrollbar { height: 6px; }
.rolo:hover, .rolo:focus-visible { scrollbar-color: var(--gray-400) transparent; }
.rolo::-webkit-scrollbar { width: 6px; }
.rolo::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-pill); }
.rolo:hover::-webkit-scrollbar-thumb, .rolo:focus-visible::-webkit-scrollbar-thumb { background: var(--gray-400); }

/* ── Dica ─────────────────────────────────────────────────────────────────
   ⛔ 21/09/2026 (Alex): "o tooltip está fora do nosso DS". O `title` do HTML abre o balão do
   NAVEGADOR — fonte do sistema, canto quadrado, um segundo de espera. A dica é da casa: mesma
   tinta do balão de régua, mesma curva, e aparece no ponteiro e no foco de teclado.
   ⚠️ O `aria-label` continua no elemento: a dica é decoração, quem diz o nome é ele. */
.comDica { position: relative; }
/* ⛔ O balão NASCE VAZIO, e só ganha texto no ponteiro. Com o texto sempre lá, o `::after`
   absoluto de `white-space: nowrap` entra no `scrollWidth` do botão e a régua de tela acusa
   transbordo em todo botão com dica — medido em 21/09/2026, na tela de Segmentações. */
.comDica::after {
  content: "";
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-size: var(--text-micro);
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-cor) linear, transform var(--dur-cor) var(--ease);
  z-index: 60;
}
@media (hover: hover) {
  .comDica:hover::after { content: attr(data-dica); opacity: 1; transform: translateX(-50%) translateY(0); }
}
.comDica:focus-visible::after { content: attr(data-dica); opacity: 1; transform: translateX(-50%) translateY(0); }

/* A `Dica` (info.tsx): o mesmo desenho do balão acima, fixo na janela para escapar do `Rolo`, e com
   quebra de linha, porque o motivo de um envio parado é frase e não rótulo. Nasce alinhada pela
   direita do elemento, que é onde as etiquetas moram; perto da borda esquerda, alinha por ela. */
/* 7 px de folga: o anel de 16 px chega a 30, e a etiqueta de 24 a 38, sem mexer na linha. O
   invólucro encolhe como a etiqueta encolhia, senão o corte com reticências vira transbordo. */
.dicaAlvo { display: inline-flex; align-items: center; padding-block: 7px; margin-block: -7px; border-radius: 8px; vertical-align: middle; min-width: 0; max-width: 100%; }
.dicaAlvo > * { min-width: 0; }
.dicaAlvo:focus-visible { outline: 2px solid var(--surface-dark); outline-offset: -4px; }
.dica {
  position: fixed;
  z-index: 60;
  transform: translate(-100%, 6px);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  animation: dicaAparece var(--dur-cor) linear;
}
.dicaAcima { transform: translate(-100%, calc(-100% - 6px)); }
.dicaEsquerda { transform: translate(0, 6px); }
.dicaEsquerda.dicaAcima { transform: translate(0, calc(-100% - 6px)); }
@keyframes dicaAparece { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dica { animation: none; } }

/* ── Calor, grupos e a peça com os cliques (calor.tsx) ──────────────────────
   Pintam por ESTADO: lime acima, âmbar e coral abaixo. Sobre soft e 500, o texto é tinta. */
.calorCaixa { flex: 1; display: flex; flex-direction: column; }
.calor { display: grid; gap: 4px; flex: 1; }
.calorLinha { display: contents; }
.calorCol { font-size: var(--text-micro); color: var(--text-tertiary); text-align: center; padding-bottom: 2px; }
.calorRot { font-size: var(--text-caption); color: var(--text-secondary); padding-right: 8px; align-self: center; }
.calorCel { min-height: 34px; border-radius: var(--radius-celula); display: grid; place-items: center; font-size: var(--text-caption); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.calorMuitoAcima { background: var(--lime-500); }
.calorAcima { background: var(--lime-soft); }
.calorAbaixo { background: var(--ambar-soft); }
.calorMuitoAbaixo { background: var(--coral-soft); }
.calorVazia { background: repeating-linear-gradient(135deg, var(--bar-hatch) 0 1.2px, transparent 1.2px 6px); }
.calorMelhor { box-shadow: inset 0 0 0 2px var(--surface-dark); font-weight: var(--weight-medium); }
.calorLegenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--text-micro); color: var(--text-secondary); }
.calorLegenda span { display: inline-flex; align-items: center; gap: 5px; }
.calorLegenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.grupos { display: flex; flex-direction: column; gap: 16px; }
.gruposBarra { display: flex; gap: 3px; height: 10px; }
.gruposBarra span { border-radius: var(--radius-track); flex-basis: 0; }
.gruposCols { display: grid; gap: 12px; }
.grupo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grupoRot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--text-secondary); }
.grupoRot i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.grupoValor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-stat-lg); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.grupoValor svg { color: var(--text-tertiary); }
.grupoValorRisco { color: var(--coral-ink); }
.grupoValorRisco svg { color: var(--coral-ink); }
.grupoSub { font-size: var(--text-micro); color: var(--text-tertiary); }
.grupoSaudavel { background: var(--lime-500); }
.grupoAtencao { background: var(--ambar-500); }
.grupoRisco { background: var(--coral-500); }

.fita { display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 4px; }
.fitaQ { height: 26px; border-radius: 5px; }
/* A barra cresce até a base do card esticado; sozinha, fica nos 58 px (23/09/2026). */
.estados { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.estadosBarra { display: flex; gap: 4px; flex: 1; min-height: 58px; }
.estadosSeg { flex-basis: 0; min-width: 72px; border-radius: var(--radius-tile); padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-primary); }
.estadosSeg b { font-size: var(--text-caption); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estadosSeg em { font-style: normal; font-size: var(--text-title); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.estadosPe { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--text-caption); color: var(--text-secondary); }
.estadosPe span { display: inline-flex; align-items: center; gap: 6px; }
.estadosPe i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.estadosPe b { font-weight: var(--weight-medium); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cliquePeca { border-radius: var(--radius-inset); background: var(--white); overflow: hidden; }
.cliqueDe { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: var(--text-micro); color: var(--text-tertiary); }
/* A capa da peça no mapa de cliques é a MESMA ideia da capa do editor sem arte: fundo de tinta, o
   projeto em tipografia, e a foto no tamanho em que ela é nítida. */
.cliqueCapa { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: var(--surface-dark); color: var(--text-on-dark); }
.cliqueCapaTexto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cliqueCapaNome { font-size: var(--text-card-title); font-weight: var(--weight-medium); }
.cliqueCapaLinha { font-size: var(--text-caption); color: var(--text-on-dark-muted); }
.cliqueCorpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; }
.cliqueAssunto { font-size: var(--text-card-title); font-weight: var(--weight-medium); line-height: 1.3; }
.cliquePre { font-size: var(--text-ui); color: var(--text-secondary); }
.cliqueCta { display: inline-flex; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--surface-dark); color: var(--text-on-dark); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.cliqueRodape { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.cliqueLink { font-size: var(--text-caption); color: var(--text-secondary); text-decoration: underline; }
/* O alvo: o link com um ANEL lime na força da parte dele — nunca preenchendo o link, que mudaria
   a cor do botão —, e a porcentagem num selo de tinta AO LADO, para não cobrir o texto. */
.cliqueAlvo { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border-radius: 12px; }
.cliqueAnel { display: inline-flex; border-radius: 12px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime-500) var(--calor), transparent); }
.cliquePct { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface-dark); color: var(--accent); font-size: var(--text-micro); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
/* A imagem ocupa a largura: o anel vai para dentro dela e o selo, para o canto de cima. */
.cliqueAlvoImagem { position: relative; display: block; align-self: stretch; border-radius: 0; }
.cliqueAlvoImagem .cliqueAnel { position: relative; display: block; border-radius: 0; box-shadow: none; }
.cliqueAlvoImagem .cliqueAnel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lime-500) var(--calor), transparent); pointer-events: none; }
.cliqueAlvoImagem .cliquePct { position: absolute; top: 8px; right: 8px; }

/* ── Conversa: a peça como ela chega no aparelho ──────────────────────────
   WhatsApp e iMessage emulados. ⛔ Sem a cor de marca do canal: mensagem RECEBIDA é balão claro
   nos dois, e é recebida que a pessoa vai ver. */
.conversa { max-width: 340px; }

/* A moldura: bezel escuro, tela de canto redondo, ilha e barra de status. Nenhuma cor de marca —
   o aparelho é preto em qualquer plataforma. */
.aparelho {
  width: 320px;
  padding: 9px;
  border-radius: 38px;
  background: var(--ink-900);
  box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
}
.aparelhoTela { border-radius: 30px; overflow: hidden; background: var(--white); }
.aparelhoBarra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 2px;
  font-size: var(--text-micro); font-weight: var(--weight-medium); color: var(--text-primary);
}
.aparelhoIlha { width: 62px; height: 16px; border-radius: 9px; background: var(--ink-900); }
.aparelhoPilha {
  width: 22px; height: 11px; border-radius: 3px;
  border: 1px solid var(--text-quaternary);
  background: linear-gradient(to right, var(--text-primary) 70%, transparent 70%);
  background-clip: content-box; padding: 1px;
}
.conversaTopo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  background: var(--surface-control);
  border-bottom: 1px solid var(--border-divider);
}
.conversaNome { display: flex; flex-direction: column; font-size: var(--text-ui); font-weight: var(--weight-medium); }
.conversaNome small { font-size: var(--text-micro); font-weight: var(--weight-regular); color: var(--text-secondary); }
.conversaFundo {
  background: var(--gray-150);
  padding: 18px 14px 26px;
  min-height: 180px;
}
/* O rabinho do balão: o triângulo no canto de cima, do lado de quem enviou. */
.balao {
  position: relative;
  background: var(--white);
  border-radius: 0 12px 12px 12px;
  padding: 10px 12px 8px;
  margin-left: 8px;
  max-width: 88%;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.balao::before {
  content: "";
  position: absolute; top: 0; left: -8px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-right: 0;
}
.balaoTexto { font-size: var(--text-ui); line-height: 1.45; white-space: pre-wrap; margin: 0; }
.balaoHora { align-self: flex-end; font-size: var(--text-micro); color: var(--text-quaternary); }
.balaoBotao {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 6px -12px -8px; padding: 9px;
  border-top: 1px solid var(--border-divider);
  font-size: var(--text-ui); color: var(--azul-forte);
}

/* iMessage: cabeça centrada com a foto em cima do nome, separador de data e balão cinza com
   rabinho embaixo à esquerda — recebida. ⛔ Verde e azul são de mensagem ENVIADA e não entram. */
.smsTopo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--border-divider);
}
.smsRemetente { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.smsSinal { font-size: var(--text-micro); color: var(--text-secondary); }
.smsFundo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 14px 26px;
  min-height: 180px;
}
.smsData { align-self: center; font-size: var(--text-micro); color: var(--text-secondary); margin: 0 0 8px; }
.smsBalao {
  position: relative;
  background: var(--gray-200);
  color: var(--text-primary);
  border-radius: 18px;
  padding: 9px 14px;
  margin: 0 0 0 6px;
  max-width: 82%;
  font-size: var(--text-ui);
  line-height: 1.4;
  white-space: pre-wrap;
}
.smsBalao:last-child::after {
  content: "";
  position: absolute; bottom: 0; left: -6px;
  border: 7px solid transparent;
  border-bottom-color: var(--gray-200);
  border-left: 0;
}
.conversaNota { font-size: var(--text-micro); color: var(--text-secondary); line-height: 1.5; margin-top: 10px; }

/* ── O aviso passageiro: canto inferior direito, fora do fluxo, sem sombra ─── */
.avisoZona {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-fixo);
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 10px 12px 14px; border-radius: var(--radius-tile);
  background: var(--surface-dark); color: var(--text-on-dark);
  font-size: var(--text-ui); line-height: 1.45; pointer-events: auto;
  animation: avisoEntra var(--dur-entrada) var(--ease) both;
}
.aviso > svg { margin-top: 2px; color: var(--accent); }
.avisoTexto { flex: 1; min-width: 0; }
.avisoFechar {
  display: grid; place-items: center; width: 30px; height: 30px; margin: -5px 0; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-on-dark-muted); cursor: pointer;
  transition: background var(--dur-cor) var(--ease), color var(--dur-cor) var(--ease);
}
.avisoFechar:active { transform: translateY(1px); }
@media (hover: hover) { .avisoFechar:hover { background: var(--surface-dark-hover); color: var(--text-on-dark); } }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .aviso { animation: none; } }

/* ── Esqueleto: o brilho que corre sobre a forma do que vai chegar ─────────── */
.esqueleto {
  display: block; border-radius: var(--radius-celula);
  background: linear-gradient(90deg, var(--track) 0%, var(--surface-control) 45%, var(--track) 90%);
  background-size: 220% 100%; animation: esqueletoBrilho 1.4s var(--ease) infinite;
}
.esqueletoCard { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius-card); background: var(--surface-card); }
@keyframes esqueletoBrilho { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ── Confete: um leque que sobe do meio da tela e cai ───────────────────────── */
.confete { position: fixed; left: 50%; top: 38vh; width: 0; height: 0; z-index: var(--z-fixo); pointer-events: none; }
.confetePeca {
  position: absolute; width: 7px; height: 12px; border-radius: 2px; background: var(--cor);
  animation: confeteVoa 1.6s cubic-bezier(.18, .72, .3, 1) both;
}
.confeteRedondo { width: 8px; height: 8px; border-radius: 50%; }
@keyframes confeteVoa {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--giro) * .6)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 300px)) rotate(var(--giro)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confete { display: none; } }

/* ── O scroll: o que está abaixo da dobra sobe ao entrar na tela ────────────── */
/* ⭐ 24/09/2026 (Alex: "gostaria que o scroll fosse um pouco mais legal, sem exagerar, mas dando uma
   impressão de diferencial e chique"). Do terceiro bloco em diante, a entrada deixa de ser na
   montagem e passa a ser no scroll: 16 px e a opacidade, presos à posição na tela (sem relógio, então
   rolar para trás desfaz). Navegador sem linha do tempo de scroll fica com a entrada de sempre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pagina > *:nth-child(n + 3) {
      animation: revela linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
      animation-delay: 0s;
    }
  }
}
@keyframes revela { from { opacity: 0; transform: translateY(16px); } }

/* ── Gerar com IA (§55.6): o glifo dentro do campo, e a gaveta das versões ──────────────────── */
.ia { position: relative; display: inline-flex; flex: none; }
.iaBotao {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--lime-ink);
  background: var(--lime-soft);
  transition: background var(--dur-mover) var(--ease), color var(--dur-mover) var(--ease);
}
.iaBotao[aria-expanded="true"] { background: var(--accent); color: var(--text-on-accent); }
/* Na barra de tinta, o glifo é lime sobre a tinta, como o resto dela. */
.iaNaBarra { background: transparent; color: var(--accent); border-radius: 8px; }
@media (hover: hover) {
  .iaBotao:hover { background: var(--accent); color: var(--text-on-accent); }
  .iaNaBarra:hover { background: var(--surface-dark-hover); color: var(--accent); }
}
.iaBotao:active { transform: translateY(1px); }
.ia > [role="dialog"] { min-width: 340px; color: var(--text-primary); text-align: left; }
.iaOpcao { display: flex; align-items: flex-start; gap: 6px; border-radius: 10px; }
.iaOpcao[data-on="true"] { background: var(--sel-bg); }
.iaEscolhe {
  flex: 1; min-width: 0; min-height: 36px;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  font-size: var(--text-ui); line-height: 1.4; text-align: left; color: var(--text-primary);
  transition: background var(--dur-mover) var(--ease);
}
@media (hover: hover) { .iaEscolhe:hover { background: var(--surface-control-on-card); } }
.iaEscolhe:active { transform: translateY(1px); }
.iaVisto { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sel-selo-bg); color: var(--sel-selo-ink); flex: none; margin-top: 1px; }
.iaOpcao > :last-child { margin-top: 8px; }