/* ============================================================
   report.css (CommunityRX) — ficheiro completo, substituir.
   Redesenho Agosto 2026 — cartões agrupados em secções nomeadas,
   tamanhos variados consoante a densidade real do conteúdo ("bento
   grid": ver pesquisa de dashboard design — Yellowfin, DataCamp,
   Vizule — hierarquia por tamanho, não só meia-largura/largura-total
   uniforme). Mesma linguagem visual do poster (fundo escuro, acento
   teal via var(--amber), cartões com borda subtil).
   ============================================================ */

.cr-report { max-width: var(--page-max-width); margin: 0 auto; padding: 2rem 1.5rem 0; font-variant-numeric: tabular-nums; }
/* Caixa de selecção ao tocar (Aug 2026, bug real reportado — já
   corrigido nos gráficos SVG, mas voltou a aparecer nas barras da
   "amizade mais forte", que são <div> normais, não SVG) — realce de
   toque por omissão do browser em mobile, não o contorno de foco.
   Regra abrangente em vez de ir corrigindo elemento a elemento outra
   vez: cobre qualquer coisa clicável do relatório, actual ou futura. */
.cr-report [role="button"], .cr-report button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
/* padding-bottom removido (Aug 2026, 2ª leva) — passou a ser gerido
   centralmente por RXScrollContainer (bottomExtraRem:1.5, ver
   scroll-container.js), chamado em report.js. Antes disto tinha sido
   calculado e escrito aqui à mão (1.5rem, com as contas explicadas),
   mas isso ainda era duplicação — o ImóvelRX precisava exactamente do
   mesmo valor, no seu próprio report.css, à parte. Uma só fonte de
   verdade agora, partilhada de propósito, não só por coincidência dos
   números baterem certo. */

/* ── Topo do relatório (Out 2026) ──
   Um cartão: título e números principais em caixas à esquerda, a
   pontuação de saúde à direita (empilha em ecrãs estreitos). */
.cr-header {
  display: grid;
  gap: 1.25rem 1.75rem;
  align-items: start;
  margin-bottom: 1.75rem;
  padding: 1.5rem;
  background: var(--ink-2);
  border: 1px solid var(--wire);
  border-radius: 14px;
  box-shadow: var(--cr-card-shadow);
}
/* Áreas: no telemóvel título → pontuação → factores; no desktop os
   factores ficam por baixo do título, a pontuação à direita. */
.cr-header { grid-template-areas: "id" "score" "factors"; }
.cr-header > .cr-header-id { grid-area: id; }
.cr-header > .cr-overview-score { grid-area: score; }
.cr-header > .cr-factors { grid-area: factors; margin-top: 0; }
@media (min-width: 760px) {
  .cr-header {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas: "id score" "factors score";
    grid-template-rows: auto 1fr;
  }
}
.cr-header-id { min-width: 0; }
.cr-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.625rem;
  margin: 0;
}
.cr-metric {
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--wire);
  border-radius: 10px;
  background: var(--ink);
}
/* Linha inteira (o período é texto comprido) — 1 / -1 e não "span 2",
   que numa grelha de uma só coluna criaria uma coluna a mais. */
.cr-metric--wide { grid-column: 1 / -1; }
.cr-metric dt {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cr-metric dd {
  margin: 0;
  font-family: var(--cr-font-num);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.cr-header .cr-overview-score {
  padding: 1.25rem 1rem;
  border: 1px solid var(--wire);
  border-radius: 12px;
  background: var(--ink);
}

/* ── Menu de anchors sticky (RXReportAnchorNav, rx-core) ──────────────
   Mecanismo extraído para rx-core/report-anchor-nav.css (Aug 2026,
   fonte de verdade do comportamento = ImóvelRX, decisão do
   utilizador — opção C). Isto significa que o CommunityRX passa a
   herdar coisas que nunca teve: quebra para 2ª linha no desktop em
   vez de scroll horizontal, truque de padding nos cantos, focus-ring
   por teclado, resets de :visited/:active. Aqui só ficam as
   variáveis de cor deste produto, mapeadas para os tokens globais
   já existentes.

   Bug real corrigido (Aug 2026): esta secção nunca tinha sido
   substituída de facto — existiam duas cópias deste ficheiro, e a
   extracção só tinha sido aplicada a uma delas. O ficheiro real
   (este) continuou com o mecanismo antigo (sem estas variáveis) até
   agora — causa directa de dois bugs reportados: fundo branco no
   menu colado em tema escuro (a variável --nav-pill-bg-stuck não
   existia, caía no valor de reserva do ficheiro partilhado, #ffffff)
   e altura/padding da caixa diferente do ImóvelRX (o wrap antigo
   tinha o seu próprio padding fixo, nunca herdou o truque dos
   cantos). */
.cr-report {
  --nav-bg: var(--ink);
  --nav-pill-bg: var(--ink-2);
  --nav-pill-bg-stuck: var(--ink-2);
  --nav-pill-border: var(--wire-2);
  --nav-pill-border-stuck: color-mix(in srgb, var(--amber) 40%, var(--wire-2));
  --nav-pill-shadow-stuck: 0 4px 16px rgba(0, 0, 0, 0.3);
  --nav-text: var(--text-3);
  --nav-text-hover: var(--text-2);
  --nav-hover-bg: var(--ghost, rgba(255,255,255,0.05));
  --nav-active-bg: var(--amber);
  --nav-active-text: var(--rx-accent-contrast);
  --nav-focus-ring: var(--amber);
}
html.light .cr-report { --nav-pill-shadow-stuck: none; }

.cr-title {
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* ── Secções nomeadas — agrupam cartões relacionados em vez de uma
   grelha única indiferenciada (pesquisa: 5-9 itens por secção/ecrã,
   não ~17 ao mesmo nível). ── */
.cr-section { margin-bottom: 2.25rem; }
.cr-section:last-child { margin-bottom: 0; }
/* Título de secção (Out 2026): título na fonte de títulos com um
   antetítulo numerado por cima (.cr-sec-num, "02 / 04") — o mesmo
   número da pastilha no menu. A página de comparação (rx-core,
   compare-view.js) usa o mesmo título, sem número. */
.cr-section-title {
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--rx-text-1);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.cr-sec-num {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--rx-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--rx-text-3);
}

/* ── Grelha de cartões — 3 colunas, tamanhos variados (bento):
   small = 1 coluna, medium = 2 colunas, wide = 3 (largura total).
   grid-auto-flow: dense preenche os buracos que tamanhos mistos
   deixariam num fluxo normal (ex.: dois "small" seguidos de um "wide"
   já cabido). Grelha de 12 colunas (não 3): duas cartas "medium"
   (6+6=12) ou três "small" (4+4+4=12) preenchem sempre uma linha
   inteira sem sobra — com 3 colunas, duas "medium" adjacentes deixavam
   sempre 1/3 da linha vazio (bug reportado, ver anexo). ── */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
  align-items: stretch;
}
.cr-card {
  background: var(--ink-2);
  border: 1px solid var(--wire);
  border-radius: 14px;
  box-shadow: var(--cr-card-shadow);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  grid-column: span 6; /* medium = default, metade da largura */
  min-width: 0; /* sem isto, conteúdo nowrap (ex.: .cr-hbar-value) força a
                   célula da grelha a alargar para lá do ecrã em mobile —
                   é o comportamento por defeito de itens de grid/flex
                   (min-width:auto), não intuitivo, mas é a causa real do
                   "quadros saem fora do ecrã" reportado. */
}
.cr-card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.cr-card-small { grid-column: span 4; }
/* 2 por linha, não 3 — só nos mini-cartões dos 7 factores do score
   (Aug 2026, pedido do utilizador). Selector mais específico (2
   classes) do que .cr-card-small sozinho, por isso só afecta quem tem
   as duas classes juntas — só esta secção usa essa combinação. */
.cr-component.cr-card-small { grid-column: span 6; }
.cr-card-wide { grid-column: span 12; }
.cr-card h2 {
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
  margin: 0 0 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cr-card-sub { font-size: 0.8125rem; color: var(--text-3); margin: 0 0 0.875rem; }

/* Ícone de informação dos cartões: RXInfoTip (rx-core, css/rx-core/info-tip.css). */
.cr-card-highlight { font-size: 0.875rem; color: var(--text); background: var(--ghost-2); border-left: 3px solid var(--amber); padding: 0.625rem 0.875rem; border-radius: 6px; margin: 0 0 0.875rem; }
.cr-card-highlight strong { color: var(--rx-accent-text); }
.cr-empty { font-size: 0.8125rem; color: var(--text-3); text-align: center; padding: 1.5rem 0; }
.cr-empty-positive { font-size: 0.8125rem; color: var(--green); text-align: center; padding: 1.5rem 0; }

/* Listas com bullet próprio (losango âmbar em vez do disco por
   omissão do browser) — Aug 2026, pedido do utilizador ("bullets mais
   interessantes e visuais"). Reutilizada nas 3 listas do
   relatório/comparação que ainda usavam <ul> simples: conclusões-chave
   (report-render.js), resumo comparativo e recomendações (compare.js).
   CSS puro (sem SVG por item) — mais barato e fácil de manter que
   injectar um ícone por <li> em cada função de render. */
.cr-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cr-icon-list li { display: flex; align-items: center; gap: 0.625rem; }
.cr-icon-list li::before {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--rx-text-3);
  border-radius: 2px;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .cr-grid { grid-template-columns: repeat(6, 1fr); }
  .cr-card-small { grid-column: span 2; }
  .cr-component.cr-card-small { grid-column: span 3; }
  .cr-card, .cr-card-wide { grid-column: span 6; }
}
@media (max-width: 560px) {
  .cr-grid { grid-template-columns: 1fr; }
  .cr-card-small, .cr-card, .cr-card-wide { grid-column: span 1; }
}

/* Regra de "último card centrado" REMOVIDA (Aug 2026) — os tamanhos dos
   cards já foram corrigidos para somarem sempre 12 exacto em cada secção
   (ver actividade/conteúdo em report-render.js); esta regra defensiva
   tinha ficado esquecida de uma correcção anterior e estava agora a
   FORÇAR um card a centrar-se sozinho mesmo quando já encaixava
   correctamente ao lado do vizinho — partindo um layout que já estava
   bom. Se algum dia voltar a haver um card genuinamente órfão (cards
   condicionais que mudem o total), resolver pelos TAMANHOS na origem
   (report-render.js), não por CSS aqui. */

/* ── Score de saúde ── */
.cr-score-big { font-family: var(--cr-font-num); font-weight: 700; font-size: 3.5rem; letter-spacing: -0.045em; line-height: 1; text-align: center; }
.cr-score-big-max { font-size: 1rem; opacity: 0.6; font-weight: 400; }
.cr-good { color: var(--rx-good); }
.cr-okay { color: var(--rx-warn); }
.cr-bad  { color: var(--rx-bad); }

/* ── Pontuação de saúde (no topo do relatório desde Out 2026; antes
   ficava dentro do cartão "Visão geral") ── */
.cr-overview-score { text-align: center; }
/* Score de saúde (fase 3): número grande em Sora, estado por faixa e
   escala 0–44 · 45–69 · 70–100 (mesmas fronteiras de _scoreClass). */
.cr-score-state {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem;
  padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.cr-score-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-score-state--good { color: var(--rx-good); background: color-mix(in srgb, var(--rx-good) 12%, transparent); }
.cr-score-state--okay { color: var(--rx-warn); background: color-mix(in srgb, var(--rx-warn) 12%, transparent); }
.cr-score-state--bad  { color: var(--rx-bad);  background: color-mix(in srgb, var(--rx-bad) 12%, transparent); }
.cr-score-scale { position: relative; height: 8px; display: grid; grid-template-columns: 45fr 25fr 30fr; gap: 3px; margin: 0.875rem 0 0.25rem; }
.cr-score-scale i { border-radius: 99px; }
.cr-score-scale i:nth-child(1) { background: color-mix(in srgb, var(--rx-bad) 32%, transparent); }
.cr-score-scale i:nth-child(2) { background: color-mix(in srgb, var(--rx-warn) 32%, transparent); }
.cr-score-scale i:nth-child(3) { background: color-mix(in srgb, var(--rx-good) 32%, transparent); }
.cr-score-scale b { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--ink-2); }
.cr-score-ticks { position: relative; height: 14px; font-size: 0.6875rem; color: var(--text-3); }
.cr-score-ticks span { position: absolute; transform: translateX(-50%); }
.cr-score-ticks span:first-child { transform: none; }
.cr-score-ticks span:last-child { transform: translateX(-100%); }
.cr-score-caption { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.375rem; }
.cr-score-explain { font-size: 0.6875rem; color: var(--text-3); line-height: 1.35; margin-top: 0.5rem; opacity: 0.85; }
.cr-score-factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem 0.75rem; margin: 0.625rem auto 0; width: fit-content; text-align: left; }
.cr-score-factor { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--text-2); line-height: 1.3; }
.cr-score-factor::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--rx-text-3); flex-shrink: 0; }
.cr-overview-text { min-width: 0; text-align: left; }

/* ── Conclusões + tags ── */
.cr-style-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.cr-style-tag {
  font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 99px;
  background: color-mix(in srgb, var(--rx-accent) 14%, transparent); color: var(--rx-accent-text);
}
.cr-conclusions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.cr-conclusions-list li {
  background: var(--ink); border: 1px solid var(--wire); border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem; color: var(--text-2); line-height: 1.6;
}

/* ── Componentes do score (secção larga) ── */
/* ── Decisões para melhorar a saúde do grupo ── */
.cr-decisions { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-decision { background: var(--ink); border: 1px solid var(--wire); border-radius: 10px; padding: 0.875rem 1.25rem; }
.cr-decision-header { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 0.375rem; }
.cr-decision-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.cr-decision-title { font-weight: 700; color: var(--text); font-size: 0.9375rem; line-height: 1.35; }
.cr-decision-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 99px; background: var(--ghost-2); flex-shrink: 0; }
.cr-decision-rank {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--amber); color: var(--rx-accent-contrast); font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.0625rem;
}
.cr-decision-body { font-size: 0.8125rem; color: var(--text-3); line-height: 1.5; padding-left: 2.125rem; }

/* ── Temas mais recorrentes — lista própria, sem sobreposição ── */
.cr-topic-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-topic-row { display: flex; align-items: flex-start; gap: 0.625rem; }
.cr-topic-rank {
  flex-shrink: 0; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--ghost-2); color: var(--text-2); font-weight: 700; font-size: 0.6875rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.0625rem;
}
.cr-topic-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.cr-topic-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.cr-topic-row--rest .cr-topic-name { color: var(--text-3); font-weight: 400; font-style: italic; }
.cr-topic-count { font-size: 0.75rem; color: var(--rx-accent-text); font-weight: 600; }

.cr-component { background: var(--ink); border: 1px solid var(--wire); border-radius: 10px; padding: 0.75rem 1.25rem; margin-bottom: 0.375rem; }
.cr-component:last-child { margin-bottom: 0; }
.cr-component-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
.cr-component-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.cr-component-score { font-family: var(--cr-font-num); font-weight: 700; font-size: 1.125rem; }
.cr-component-max { font-size: 0.75rem; opacity: 0.6; font-weight: 400; }
.cr-component-definition { font-size: 0.75rem; color: var(--text-3); line-height: 1.4; margin-bottom: 0.5rem; }
.cr-component-bar { height: 4px; background: var(--wire-2); border-radius: 99px; overflow: hidden; margin-bottom: 0.375rem; }
.cr-component-fill { height: 100%; border-radius: 99px; }
.cr-component-fill.cr-good { background: var(--green); }
.cr-component-fill.cr-okay { background: var(--yellow); }
.cr-component-fill.cr-bad  { background: var(--red); }
.cr-component-explain { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }

/* ── Gráfico de barras verticais (mensagens por ano) ── */
.cr-bar-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 150px; padding: 1rem 0.5rem 0; }
.cr-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.cr-bar-track { flex: 1; width: 55%; margin: 0 auto; display: flex; align-items: flex-end; }
.cr-bar-fill { width: 100%; background: var(--cr-data-1); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.cr-bar-value { font-size: 0.6875rem; color: var(--text-3); margin-top: 0.375rem; font-family: var(--cr-font-num); }
.cr-bar-label { font-size: 0.75rem; color: var(--text-2); margin-top: 0.25rem; overflow-wrap: break-word; word-break: break-word; text-align: center; max-width: 100%; }

/* Interactivo (Aug 2026, pedido do utilizador) — clicar numa barra ou
   na legenda selecciona o PAR inteiro (todos os períodos com o mesmo
   par, não só aquele). Valor escondido por omissão — SEMPRE, não só em
   mobile (bug real reportado: em desktop os 9 valores apareciam todos
   ao mesmo tempo, sobrepondo-se visualmente quando um par estava
   seleccionado). Valor volta a viver DENTRO da própria barra (Aug
   2026, 2ª correcção — a versão anterior tinha-o fixo ao topo da
   COLUNA, nivelado sempre com a barra mais alta do gráfico em vez do
   topo real da SUA barra); position:absolute com bottom:100% acompanha
   sempre o topo real, seja qual for a altura. */
.cr-bar-col[data-pair-idx], .cr-donut-legend-item[data-pair-idx] { cursor: pointer; }
.cr-bar-value {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 700; color: var(--text); font-family: var(--cr-font-num);
}
.cr-bar-col.selected .cr-bar-value { display: block; }
.has-selection .cr-bar-col:not(.selected) .cr-bar-fill { opacity: 0.35; }
.has-selection .cr-donut-legend-item:not(.selected) { opacity: 0.5; }
.cr-bar-fill { transition: filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
/* Sem "crescer" (Aug 2026, pedido do utilizador — a altura É o valor
   real; aumentar a barra podia sugerir visualmente um valor maior do
   que o real). Destaque por contorno em vez de tamanho. */
.cr-bar-col.selected .cr-bar-fill { box-shadow: 0 0 0 2px var(--text), 0 2px 8px rgba(0, 0, 0, 0.4); }

/* Mais espaço entre os pares na legenda (Aug 2026, bug real reportado
   — em desktop, o efeito "lupa" do texto seleccionado (ver
   .cr-donut-legend-item.selected .cr-donut-legend-label) ficava quase
   sempre por cima do item seguinte; nomes de pares tendem a ser mais
   compridos do que os das outras legendas que usam este mesmo
   componente). */
.cr-donut-legend--row { gap: 0.75rem 2.5rem; }
/* Sem "lupa" nesta legenda (Aug 2026, bug real reportado — persistia
   mesmo com mais espaço, porque usa flex-wrap: vários itens cabem na
   mesma linha, e um nome de par comprido a crescer 15% empurrava para
   cima do vizinho independentemente do gap). Mantém-se negrito+cor,
   que já dá destaque suficiente sem arriscar sobrepor nada. */
.cr-donut-legend--row .cr-donut-legend-item.selected .cr-donut-legend-label { transform: none; }

/* ── Barras horizontais (dia da semana, temas, participantes, tipo de
   conteúdo, quem inicia conversas) — etiqueta SEMPRE clara, sobreposta à
   barra (nunca texto escuro que fica ilegível ao sair da zona colorida —
   mesma correcção já validada no poster). Etiqueta agora quebra em até 2
   linhas em vez de cortar com "…" — a página web tem espaço para
   respirar, ao contrário do poster (imagem de tamanho fixo). ── */
.cr-hbar-list { display: flex; flex-direction: column; gap: 0.125rem; }
.cr-hbar-row { position: relative; display: flex; align-items: center; min-height: 30px; padding: 0.0625rem 0; min-width: 0; }
.cr-hbar-track { position: absolute; left: 0; top: 8%; height: 84%; border-radius: 6px; background: var(--cr-data-1); min-width: 4px; }
.cr-hbar-label { position: relative; z-index: 1; padding-left: 0.75rem; padding-right: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); white-space: normal; line-height: 1.25; max-width: 80%; }
/* Tema light (Aug 2026, corrigido — faltava): para barras curtas, o
   texto do label ultrapassa o preenchimento colorido e cai sobre o
   fundo do painel — branco fixo fica invisível num fundo claro. Texto
   escuro mantém-se legível quer sobre o preenchimento (tom médio) quer
   sobre o fundo claro. */
html.light .cr-hbar-label { color: var(--ink); text-shadow: 0 1px 2px rgba(255,255,255,0.7); }
.cr-hbar-value { position: relative; z-index: 1; margin-left: auto; padding-right: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap; align-self: center; }

.cr-hbar-list-plain { display: flex; flex-direction: column; gap: 0.5rem; }

/* Histórico de nomes como lista agrupada por ano (Aug 2026, 3ª versão —
   ver /areas/communityrx.md para o histórico: texto simples "de → para"
   sem vida → timeline vertical sem informação nos marcadores → cadeia
   horizontal que escondia quem/quando em tooltip, ilegível com muitas
   entradas). Padrão real de audit-log confirmado (Wikipedia/Google Docs/
   GitHub): lista cronológica inversa, quem+quando sempre em texto —
   nunca escondido, nunca só implícito na ordem. Reutiliza a mesma
   estrutura visual de .cr-question (fundo/borda/padding). Agrupamento
   por ano passou a pills (Aug 2026, ver .cr-pill-group), substituindo
   os cabeçalhos de ano intercalados que existiam antes. */
/* Lista agrupada por pills (Aug 2026) — "Tudo (N)" + um pill por ano;
   reutiliza .cr-sot-pills/.cr-sot-pill (mesmo visual dos pills do
   Sentimento ao longo do tempo). min-width:0 preventivo, mesmo bug já
   apanhado nas pills de participantes e do Sentimento. */
.cr-pill-group { min-width: 0; }
.cr-pill-group-panel { display: none; }
.cr-pill-group-panel.active { display: block; }
.cr-namehist-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-namehist-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  background: var(--ink); border: 1px solid var(--wire); border-radius: 8px;
  padding: 0.625rem 1rem;
}
.cr-namehist-name { font-family: var(--rx-font-display); font-weight: 700; font-size: 0.875rem; color: var(--text); min-width: 0; }
.cr-namehist-meta {
  font-size: 0.75rem; color: var(--text-3);
  /* Nunca ultrapassa a borda do cartão (Aug 2026, bug real reportado,
     com setas a apontar exactamente para a borda direita) —
     white-space:nowrap + flex-shrink:0 forçava a linha ("Adicionado(a)
     por +351 966 551 387 · 10/11/2025 21:12") a ficar sempre numa linha
     só, sem nunca poder encolher nem quebrar; em cartões estreitos
     (mobile), isso empurrava o texto para fora. min-width:0 (item
     flex) + quebra normal deixa quebrar/encolher como faz falta.
     flex-shrink:0 REMOVIDO de propósito — era a causa. */
  min-width: 0; overflow-wrap: break-word; word-break: break-word;
}

/* Gráfico de anel + legenda (Aug 2026) — participantes mais activos /
   quem inicia mais conversas, top 10 + "Outros". Legenda ao lado em
   ecrãs largos, empilha por baixo quando o cartão fica estreito
   (flex-wrap, sem media query própria — o mesmo comportamento natural
   já usado noutros sítios desta página). */
.cr-donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cr-donut-svg { width: 200px; height: 200px; flex-shrink: 0; }
.cr-donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 0.5rem; }
.cr-donut-legend--row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
.cr-donut-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; min-width: 0; }
.cr-donut-legend-swatch { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; }
.cr-donut-legend-label { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-donut-legend-value { color: var(--text); font-weight: 700; font-family: var(--cr-font-num); font-size: 0.75rem; flex-shrink: 0; }

/* Donuts interactivos (Aug 2026) — fatia seleccionada ganha relevo, as
   restantes esbatem; a legenda mostra sempre a percentagem. O centro
   do anel (.cr-donut-center-value) mostra sempre algo — o total por
   omissão, o valor da fatia seleccionada quando há uma (ver
   _crDonutClick) — nunca fica vazio. "Maior ao seleccionar" é feito via
   stroke-width (atributo SVG, em _crDonutClick), NUNCA CSS
   transform/transform-box aqui — foi essa a causa real do anel ficar
   invisível (bug reportado): transform-box:fill-box num círculo com
   fill="none" tem bounding box degenerada nalguns motores de render, o
   que partia até a rotação (atributo transform="rotate(...)" já
   existente) do círculo inteiro. */
.cr-donut-svg {
  /* Caixa de selecção à volta do SVG inteiro ao tocar numa fatia (Aug
     2026, bug real reportado) — não era o contorno de foco (outline:none
     já tratava disso), era o realce de toque por omissão do browser em
     mobile (-webkit-tap-highlight-color), que em SVG costuma desenhar-se
     à volta da caixa delimitadora inteira em vez de só da forma tocada. */
  -webkit-tap-highlight-color: transparent;
}
.cr-donut-arc {
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease, stroke-width 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.has-selection .cr-donut-arc:not(.selected) { opacity: 0.35; }
.cr-donut-arc.selected { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)); }
.cr-donut-center-value { pointer-events: none; }
.cr-donut-center-num { font-family: var(--cr-font-num); font-weight: 700; font-size: 14px; fill: var(--text); }
.cr-donut-center-unit { font-family: var(--cr-font-num); font-weight: 400; font-size: 9px; fill: var(--text-3); }
.cr-donut-center-unit--long { display: none; }
@media (max-width: 560px) {
  .cr-donut-center-unit--short { display: none; }
  .cr-donut-center-unit--long { display: inline; }
}
.cr-donut-legend-item[data-idx] { cursor: pointer; border-radius: 6px; transition: opacity 0.15s ease; padding: 0.125rem 0.25rem; margin: -0.125rem -0.25rem; }
.cr-donut-interactive.has-selection .cr-donut-legend-item:not(.selected) { opacity: 0.55; }
.cr-donut-legend-label {
  display: inline-block;
  transition: transform 0.15s ease, color 0.15s ease;
}
.cr-donut-legend-item.selected .cr-donut-legend-label {
  font-weight: 700; color: var(--rx-accent-text);
  transform: scale(1.15); transform-origin: left center;
}

/* Temas mais recorrentes — mesma interactividade, mas com a lista
   própria (.cr-topic-row) em vez da legenda genérica do donut. */
.cr-topic-row[data-idx] { cursor: pointer; border-radius: 8px; transition: opacity 0.15s ease; padding: 0.25rem; margin: -0.25rem; }
.cr-topics-interactive.has-selection .cr-topic-row:not(.selected) { opacity: 0.5; }
.cr-topic-name { display: inline-block; transition: transform 0.15s ease, color 0.15s ease; }
.cr-topic-row.selected .cr-topic-name { color: var(--rx-accent-text); transform: scale(1.15); transform-origin: left center; }
/* Em mobile (Aug 2026, bug real reportado) — texto que já ocupa 2+
   linhas (nomes/temas mais longos) ultrapassava a borda do cartão ao
   aumentar 1.15x a partir da esquerda; sem largura livre à direita
   como há no desktop, o "lupa" fica só cor/negrito aqui, sem escala. */
@media (max-width: 560px) {
  .cr-donut-legend-item.selected .cr-donut-legend-label,
  .cr-topic-row.selected .cr-topic-name {
    transform: none;
  }
}
/* Barras horizontais para os emojis (Aug 2026, substituído — o anel
   com etiquetas à volta teve 4 tentativas de ajuste sem resolver as
   colisões de vez; cada linha aqui é independente, nunca colide). */
.cr-emoji-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-emoji-bar-row { display: flex; align-items: center; gap: 0.75rem; }
.cr-emoji-bar-glyph { font-size: 1.375rem; width: 2rem; text-align: left; flex-shrink: 0; line-height: 1; }
.cr-emoji-bar-glyph--muted { font-size: 0.625rem; color: var(--text-3); white-space: nowrap; }
.cr-emoji-bar-track { flex: 1; height: 12px; background: var(--wire-2); border-radius: 99px; overflow: hidden; }
.cr-emoji-bar-fill { height: 100%; border-radius: 99px; }
.cr-emoji-bar-pct { width: 3rem; flex-shrink: 0; text-align: right; font-family: var(--cr-font-num); font-weight: 700; color: var(--text); font-size: 0.8125rem; }
.cr-donut-callout-note { font-size: 0.6875rem; color: var(--text-3); margin: 0.75rem 0 0; }
/* Centrar verticalmente quando o donut é o único conteúdo do cartão
   (Aug 2026, pedido do utilizador — Tipo de conteúdo, ao lado de um
   vizinho mais alto como Métricas de interacção, ficava encostado ao
   topo com espaço vazio por baixo). Âmbito estreito com :has() — só
   quando é mesmo o único filho, não afecta cartões com mais conteúdo
   (ex.: Participantes mais activos, que também usa donut mas dentro
   de um card partilhado com outro elemento). */
.cr-card-body:has(> .cr-donut-wrap:only-child) { justify-content: center; }
.cr-card-body:has(> .cr-stat-tiles--3col:only-child) { justify-content: center; }
/* Pills agrupadas (Aug 2026) — mesmo problema que o antigo botão de
   expandir resolvia (cartão a esticar por um vizinho mais alto,
   conteúdo preso no topo com espaço vazio por baixo), mas sem nenhum
   controlo no fundo para ancorar — centrar verticalmente é o padrão já
   usado nos donuts/stat-tiles para o mesmo problema. */
.cr-card-body:has(> .cr-pill-group:only-child) { justify-content: center; }

/* Temas mais recorrentes — anel de resumo + lista detalhada lado a
   lado (Aug 2026). O anel aqui é só um resumo visual rápido (tamanho
   fixo, sem legenda própria — .cr-topics-chart limita a largura do
   svg, ao contrário do gráfico de interacções que cresce livremente);
   o detalhe todo (descrição completa de cada tema) continua na lista
   ao lado, que precisa de mais espaço do que o anel. */
.cr-topics-layout {
  display: grid; grid-template-columns: 320px minmax(240px, 460px); gap: 1.5rem; align-items: center;
  width: fit-content; max-width: 100%; align-self: center;
}
.cr-topics-chart { width: 320px; }
.cr-topics-chart .cr-donut-svg { width: 100%; height: auto; display: block; }
.cr-topics-layout .cr-topic-list { min-width: 0; }
@media (max-width: 560px) {
  .cr-topics-layout {
    grid-template-columns: 1fr; width: 100%; justify-items: center; text-align: left;
    /* Reset das propriedades pensadas só para o lado-a-lado do desktop
       (Aug 2026, bug real reportado — espaçamento desigual face aos
       outros donuts em mobile): align-items:center/width:fit-content/
       align-self:center/gap maior existiam para centrar o anel FACE À
       LISTA ao lado; empilhados (1 coluna), não fazem sentido nenhum e
       só desalinhavam o espaço à volta do anel. */
    align-items: start; gap: 1.25rem;
  }
  .cr-topics-chart { width: 200px; max-width: 200px; }
  .cr-topics-chart .cr-donut-svg { width: 200px; height: 200px; }
  .cr-donut-wrap { justify-content: center; }
  /* Percentagem a seguir ao título (Aug 2026, pedido do utilizador) —
     nome+percentagem ficavam empilhados (coluna), o que com um nome de
     tema já com 2 linhas dava 3 linhas por entrada. display:block no
     corpo deixa os dois spans fluírem como texto normal; o nome passa
     de inline-block a inline a sério (só precisava de inline-block
     para a "lupa" de transform:scale, já desligada aqui) — sem isso, a
     percentagem cai sempre para a linha seguinte quando o nome quebra
     internamente, em vez de continuar ao lado do fim do texto. Só em
     mobile — desktop mantém-se em coluna com inline-block, como já
     estava. */
  .cr-topic-body { display: block; }
  .cr-topic-name { display: inline; }
  .cr-topic-count { margin-left: 0.375rem; }
}
.cr-plain-row { padding: 0.625rem 1rem; background: var(--ink); border: 1px solid var(--wire); border-radius: 8px; font-size: 0.875rem; color: var(--text); }
.cr-dim { color: var(--text-3); font-size: 0.8125rem; }

/* ── Mapa de calor fundido (dia × hora + barra marginal do total do dia)
   — substitui as antigas secções separadas "dia da semana" e "hora do
   dia": o mapa já combina as duas dimensões, a marginal dá o total sem
   repetir uma secção inteira só para isso. ── */
.cr-heatmap-v2 { display: flex; flex-direction: column; gap: 3px; }
.cr-heat-row { display: grid; grid-template-columns: 28px 1fr 90px 34px; align-items: center; gap: 0.5rem; }
.cr-heat-day-label { font-size: 0.6875rem; color: var(--text-2); text-align: right; }
.cr-heat-cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.cr-heat-cell { aspect-ratio: 1; border-radius: 2px; }
.cr-heat-margin-track { height: 10px; background: var(--wire); border-radius: 99px; overflow: hidden; }
.cr-heat-margin-fill { height: 100%; background: var(--cr-heat); border-radius: 99px; }
.cr-heat-margin-caption { font-size: 0.625rem; color: var(--text-3); text-align: center; }
.cr-heat-row-axis { margin-top: 0.25rem; }
.cr-heatmap-hours { display: grid; grid-template-columns: repeat(24, 1fr); font-size: 0.5625rem; color: var(--text-3); }
.cr-heatmap-legend { display: flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; color: var(--text-3); margin-top: 0.75rem; }
.cr-heatmap-swatch { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--cr-heat) 6%, transparent), var(--cr-heat)); }
.cr-heat-margin-pct { font-size: 0.6875rem; color: var(--text-2); font-family: var(--cr-font-num); text-align: right; }
@media (max-width: 560px) {
  .cr-heat-row { grid-template-columns: 22px 1fr 50px 28px; }
  .cr-bar-chart { gap: 0.25rem; padding: 1rem 0.25rem 0; }
  .cr-bar-label { font-size: 0.625rem; }
}

/* ── Timeline adaptativa (períodos curtos) ── */
.cr-bar-chart-timeline { height: 170px; }
.cr-bar-label-rot { writing-mode: vertical-rl; text-orientation: mixed; font-size: 0.625rem; white-space: nowrap; }

/* ── Sentimento (donut) ── */
.cr-sentiment-row { display: flex; align-items: center; justify-content: center; gap: 1.75rem; padding: 1rem 0; }
.cr-donut { width: 120px; height: 120px; border-radius: 50%; position: relative; flex-shrink: 0; }
.cr-donut-hole { position: absolute; inset: 22px; background: var(--ink-2); border-radius: 50%; }
.cr-sentiment-legend { font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; color: var(--text); }
.cr-sentiment-legend div { display: flex; align-items: center; gap: 0.5rem; }
.cr-sentiment-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cr-sentiment-legend b { margin-left: auto; }

/* ── Sentimento ao longo do tempo ── */
/* Interruptor desktop/mobile (Aug 2026, bug real reportado — o
   redesenho de hoje tinha sido aplicado aos dois ecrãs por engano; o
   problema original era só em mobile, desktop mantém-se exactamente
   como estava). Mesmo breakpoint (560px) já usado no resto do
   relatório — nunca os dois visíveis ao mesmo tempo. */
.cr-sot-mobile-only { display: none; }
@media (max-width: 560px) {
  .cr-sot-desktop-only { display: none; }
  .cr-sot-mobile-only { display: block; }
}
.cr-sot-svg { width: 100%; height: auto; display: block; }
/* Legenda simples (Aug 2026) — usada só no gráfico de DESKTOP
   (_sotDesktopChart); mobile usa .cr-sot-legend-panel, com % e
   movimento incorporados. */
.cr-sot-legend { display: flex; gap: 1.25rem; justify-content: center; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-2); }
.cr-sot-legend span { display: flex; align-items: center; gap: 0.375rem; }
.cr-sot-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
/* Legenda com percentagem incorporada (Aug 2026, substitui os cards de
   resumo) — um painel por pill (Tudo + cada bloco), mostrar/esconder
   como os outros painéis (ver _crSotPillSelect). */
.cr-sot-legend-panel { display: none; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-2); }
.cr-sot-legend-panel.active { display: flex; }
.cr-sot-legend-line { display: flex; align-items: center; gap: 0.375rem; }
.cr-sot-legend-line i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cr-sot-legend-line b { color: var(--text); font-family: var(--cr-font-num); }
.cr-sot-legend-delta { font-family: var(--cr-font-num); font-size: 0.75rem; font-weight: 700; margin-left: 0.125rem; }

/* Pills de navegação temporal (Aug 2026, redesenho — substitui o
   toque em cada ponto) — "Tudo" + um pill por bloco (mês/semestre/
   ano); cada painel já vem pronto do servidor, o clique só troca qual
   está visível (ver _crSotPillSelect). min-width:0 preventivo — mesmo
   bug já apanhado nas pills de participantes (flex-column pai +
   scroll horizontal lá dentro cresce em vez de scrollar, sem isto). */
.cr-sot-wrap { min-width: 0; }
.cr-sot-pills { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 0.75rem; scrollbar-width: none; }
.cr-sot-pills::-webkit-scrollbar { display: none; }
.cr-sot-pill {
  flex-shrink: 0; background: none; border: 1px solid var(--wire-2); color: var(--text-2);
  font-size: 0.75rem; font-family: inherit; padding: 0.375rem 0.75rem; border-radius: 999px; cursor: pointer;
}
.cr-sot-pill:hover { background: var(--ghost, rgba(255, 255, 255, 0.05)); }
.cr-sot-pill.active { background: var(--amber); border-color: var(--amber); color: var(--rx-accent-contrast); font-weight: 700; }
.cr-sot-single {
  padding: 2rem 1rem; text-align: center; border: 1px dashed var(--wire-2); border-radius: 10px;
}
.cr-sot-single-note { font-size: 0.8125rem; color: var(--text-3); margin: 0 0 0.875rem; }
.cr-sot-single-vals {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--cr-font-num); font-size: 0.875rem; font-weight: 700;
}
.cr-sot-panel { display: none; }
.cr-sot-panel.active { display: block; }

/* ── Nuvem de palavras ── */
.cr-word-cloud {
  position: relative;
  padding: 1.25rem 0;
  font-size: 16px;
  /* Proporção FORÇADA a bater certo com o canvas de referência do
     algoritmo (CANVAS_W=1100, CANVAS_H=360 em report-render.js) — Aug
     2026, causa REAL da sobreposição finalmente encontrada, depois de
     2 correcções anteriores (tamanho de letra em em/rem, reforço de
     densidade) que nunca mexeram nisto. As posições são calculadas
     numa proporção larga (~3:1); sem isto, a caixa real só tinha
     min-height, ficando muito mais estreita/alta em mobile (~1.6:1) —
     as palavras, bem espaçadas no cálculo largo, ficavam espremidas e
     sobrepostas ao renderizar na proporção errada. Com aspect-ratio,
     seja qual for a largura real (varia com o ecrã), a altura
     acompanha sempre na MESMA proporção do cálculo — nunca mais
     desalinha.
  */
  aspect-ratio: 1100 / 360;
}
@media (max-width: 600px) {
  /* Tamanhos de letra da nuvem são calculados em "em" relativos a este
     font-size — em ecrãs estreitos, o mesmo cálculo (pensado para um
     canvas de referência largo) ficava desproporcionalmente enorme e
     sobreposto (bug real, reportado). Encolher o font-size base aqui
     encolhe a nuvem inteira, mantendo as posições relativas correctas. */
  .cr-word-cloud { font-size: 9px; }
}
.cr-word { position: absolute; transform: translate(-50%, -50%); font-family: var(--rx-font-display); font-weight: 700; color: var(--cr-data-1); line-height: 1; white-space: nowrap; }

/* ── Métricas simples (lista label/valor) ── */
.cr-metrics-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-metrics-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.625rem 1rem; background: var(--ink); border: 1px solid var(--wire); border-radius: 8px; font-size: 0.875rem; min-width: 0; }
.cr-metrics-label { color: var(--text-2); min-width: 0; }
.cr-metrics-value { color: var(--text); font-weight: 600; font-family: var(--cr-font-num); white-space: nowrap; flex-shrink: 0; }

/* ── KPI tiles (Aug 2026) — ícone + número grande + etiqueta, substitui
   listas de texto label/valor em secções de factos avulsos (Métricas
   de interacção, Recordes de actividade). ── */
.cr-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; }
.cr-stat-tile { position: relative; background: var(--ink); border: 1px solid var(--wire); border-radius: 10px; padding: 0.875rem 1rem; text-align: left; }
.cr-stat-tile-icon { position: absolute; top: 0.75rem; right: 0.75rem; color: var(--rx-text-3); opacity: 0.8; }
.cr-stat-tile-icon svg { width: 18px; height: 18px; display: block; }
.cr-stat-tile-value { font-family: var(--cr-font-num); font-weight: 700; font-size: 1.25rem; color: var(--text); padding-right: 1.5rem; }
.cr-stat-tile-unit { font-size: 0.6875rem; font-weight: 400; color: var(--text-3); }
.cr-stat-tile-label { font-size: 0.6875rem; color: var(--text-3); margin-top: 0.25rem; line-height: 1.3; }

/* Sentimento das mensagens (Aug 2026) — 3 por linha (fixo, não
   auto-fit) e cor demonstrativa por tile. */
.cr-stat-tiles--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) {
  .cr-stat-tiles--3col { grid-template-columns: 1fr; }
}
.cr-stat-tile--negative { border-left: 3px solid var(--rx-bad); }
.cr-stat-tile--negative .cr-stat-tile-value { color: var(--rx-bad); }
.cr-stat-tile--negative .cr-stat-tile-bar-fill { background: var(--rx-bad); }
.cr-stat-tile--neutral { border-left: 3px solid var(--rx-text-3); }
.cr-stat-tile--neutral .cr-stat-tile-value { color: var(--rx-text-2); }
.cr-stat-tile--neutral .cr-stat-tile-bar-fill { background: var(--rx-text-3); }
.cr-stat-tile--positive { border-left: 3px solid var(--rx-good); }
.cr-stat-tile--positive .cr-stat-tile-value { color: var(--rx-good); }
.cr-stat-tile--positive .cr-stat-tile-bar-fill { background: var(--rx-good); }

/* Barra de percentagem por baixo do valor (Aug 2026, pedido do
   utilizador — secção Sentimento das mensagens), reutilizável por
   qualquer stat tile com barPct. */
.cr-stat-tile-bar { height: 4px; background: var(--wire-2); border-radius: 99px; overflow: hidden; margin-top: 0.5rem; }
.cr-stat-tile-bar-fill { height: 100%; border-radius: 99px; background: var(--cr-data-1); }

/* ── Padrões individuais — grupos de mini-barras/destaques ── */
.cr-pattern-group { margin-bottom: 1rem; }
.cr-pattern-group:last-child { margin-bottom: 0; }
.cr-pattern-group-title { font-size: 0.8125rem; color: var(--text-2); font-weight: 600; margin-bottom: 0.5rem; }
.cr-card-highlight + .cr-card-highlight { margin-top: 0.625rem; }

@media (max-width: 560px) {
  /* Em mobile, título e valor lado a lado ficava com o título a quebrar
     (indentado, feio) quando era longo. Empilhado — título em cima, valor
     por baixo, alinhado à esquerda — lê-se sempre bem, seja qual for o
     comprimento do texto. */
  .cr-metrics-row { flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; }
  /* Esta regra tem de vir DEPOIS da base acima (Aug 2026, bug real
     corrigido) — com a mesma especificidade, quem vem depois no
     ficheiro ganha sempre, media query ou não. Estava ao contrário: a
     base (nowrap) vinha depois desta, por isso o texto nunca quebrava
     em mobile, ultrapassando sempre a caixa. */
  .cr-metrics-value { white-space: normal; }
}

/* ── Rede de interacções (SVG, layout calculado no backend via
   networkx) ── */
/* ── Rede de interacções — matriz (linha=quem responde, coluna=a quem),
   mais legível que grafo de nós para redes pequenas com poucos
   participantes (pesquisa confirma: matrizes são a convenção
   estabelecida quando se precisa de números exactos, não estrutura
   global de uma rede grande). ── */
/* 2 colunas — gráfico à esquerda (Aug 2026, pedido do utilizador: muito
   espaço vazio à volta do gráfico pequeno e centrado; agora ocupa toda
   a largura da sua coluna, nomes/interações continuam legíveis porque
   a coluna da lista ao lado já não precisa de espaço nenhum do
   gráfico). Empilha em ecrãs estreitos — o gráfico precisa de largura
   a sério para os nomes não colidirem. */
.cr-chord-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 700px) {
  .cr-chord-layout { grid-template-columns: 1fr; }
}
.cr-chord-svg { width: 100%; height: auto; display: block; -webkit-tap-highlight-color: transparent; }
.cr-chord-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-chord-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-2); padding: 0.375rem 0.25rem; }

/* Rede de interacções interactiva (Aug 2026) — mesmo padrão dos donuts:
   clicar numa curva ou na linha correspondente da legenda destaca as
   duas, esbate o resto. Curvas já têm stroke-opacity inline (intensidade
   da ligação) — o opacity aqui MULTIPLICA sobre isso, por isso o valor
   de esbatimento é mais baixo do que nos donuts (0.15, não 0.35), senão
   ligações já fracas ficavam invisíveis em vez de só esbatidas. */
.cr-chord-ribbon { cursor: pointer; transition: opacity 0.15s ease, filter 0.15s ease; outline: none; -webkit-tap-highlight-color: transparent; }
.has-selection .cr-chord-ribbon:not(.selected) { opacity: 0.15; }
.cr-chord-ribbon.selected { opacity: 1; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); }
.cr-chord-legend-row[data-idx] { cursor: pointer; border-radius: 6px; transition: opacity 0.15s ease, background 0.15s ease; }
.has-selection .cr-chord-legend-row:not(.selected) { opacity: 0.5; }
.cr-chord-legend-row.selected { background: var(--ghost, rgba(255, 255, 255, 0.05)); }
.cr-chord-legend-row.selected b { color: var(--rx-accent-text); }
.cr-chord-legend-row b { color: var(--text); }
.cr-chord-legend-names {
  display: inline-block; transition: transform 0.15s ease;
  /* Nunca esmaga a contagem (Aug 2026, bug real reportado — nomes
     compridos, frequentes aqui porque números de telefone aparecem
     como nome, empurravam ou sobrepunham a coluna da contagem; não era
     o efeito de selecção, que já estava desligado em mobile — a
     legenda em si nunca tinha tido protecção contra nomes longos).
     flex:1 + min-width:0 deixa este span encolher; overflow:hidden +
     ellipsis trunca em vez de espalhar por cima do resto da linha. */
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sem "lupa" ao seleccionar (Aug 2026, 2ª correcção — bug real
   reportado, com imagem a apontar a sobreposição exacta): mesmo com o
   truncamento por ellipsis já corrigido acima, o scale(1.15) crescia a
   PRÓPRIA caixa (já truncada) por cima do vizinho — nome cresce para a
   direita, contagem cresce para a esquerda (ver abaixo), garantindo
   colisão no meio para qualquer nome moderadamente comprido. Mesma
   solução já comprovada na legenda de "A amizade mais forte": tirar o
   scale, manter só negrito/cor (via .cr-chord-legend-row.selected b /
   .cr-chord-count acima), que já dá destaque suficiente sem arriscar
   sobrepor nada.
*/

/* Arco + nome da pessoa (Aug 2026, pedido do utilizador) — as DUAS
   pessoas ligadas pela curva seleccionada ganham relevo: nome maior
   (font-size, não CSS transform — texto SVG é mais seguro com
   transform, mas sem necessidade de arriscar depois do bug real dos
   círculos stroke-only) e o arco/"barra" mais grosso. stroke-width
   aqui é seguro via CSS directamente (ao contrário dos donuts, estes
   arcos não usam stroke-dasharray dependente do raio). */
.cr-chord-arc { transition: stroke-width 0.15s ease, opacity 0.15s ease; }
.has-selection .cr-chord-arc:not(.selected) { opacity: 0.4; }
.cr-chord-arc.selected { stroke-width: 14px; }
.cr-chord-label text { transition: font-size 0.15s ease, font-weight 0.15s ease; }
.cr-chord-label.selected text { font-size: 13px; font-weight: 700; }
.cr-chord-label line { transition: stroke-width 0.15s ease, stroke-opacity 0.15s ease; }
.cr-chord-label.selected line { stroke-width: 2px; stroke-opacity: 1; }
.has-selection .cr-chord-label:not(.selected) text { opacity: 0.4; }
.cr-chord-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cr-chord-arrow { color: var(--rx-accent-text); }
.cr-chord-count {
  margin-left: auto; font-family: var(--cr-font-num); color: var(--text-3);
  display: inline-block; transition: color 0.15s ease;
  flex-shrink: 0; white-space: nowrap;
}
.cr-chord-legend-row.selected .cr-chord-count { color: var(--text); font-weight: 700; }
@media (max-width: 560px) {
  .cr-chord-count-word { display: none; }
}

/* ── Perguntas sem resposta ── */
.cr-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.cr-question { min-width: 0; min-height: 6rem; background: var(--ink); border: 1px solid var(--wire); border-radius: 8px; padding: 0.875rem 1rem; }
@media (max-width: 900px) {
  .cr-questions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cr-questions { grid-template-columns: 1fr; }
}
.cr-question-text {
  font-size: 0.9375rem; color: var(--text-2); font-style: italic; margin-bottom: 0.375rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-question-meta { font-size: 0.75rem; color: var(--text-3); }

/* ── Perfis de participantes ── */
/* ── Perfil comunicacional — mestre-detalhe (Aug 2026, substitui os
   cards empilhados) ── Desktop: lista de nomes à esquerda (~33%) +
   painel de detalhe à direita. Mobile (revisto, mesma sessão): pills
   com scroll horizontal (nomes SEMPRE visíveis, ordem de participação
   já vem do backend), detalhe sempre visível por baixo — sem "voltar",
   sem esconder a lista; scroll nativo do browser, sem JS de
   arrastamento próprio (drag-to-scroll só era necessário para RATO nos
   outros sítios que o usam — em touch, o swipe nativo já funciona). */
.cr-profiles-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.cr-profiles-nav {
  flex: 0 0 33%; max-width: 260px; min-width: 0;
  display: flex; flex-direction: column; gap: 0.125rem;
  max-height: 420px; overflow-y: auto;
}
.cr-profile-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: none; border: none; text-align: left; width: 100%;
  padding: 0.625rem 0.75rem; border-radius: 8px; cursor: pointer;
  color: var(--text-2); font-size: 0.8125rem; font-family: inherit;
}
.cr-profile-nav-item:hover { background: var(--ghost, rgba(255, 255, 255, 0.05)); }
.cr-profile-nav-item.active { background: var(--amber); color: var(--rx-accent-contrast); font-weight: 700; }
.cr-profile-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cr-profile-nav-trend { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; }

.cr-profiles-detail { flex: 1; min-width: 0; }
.cr-profile-detail-panel { display: none; }
.cr-profile-detail-panel.active { display: block; }
.cr-profile-detail-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.cr-profile-name { font-weight: 700; color: var(--text); font-size: 0.9375rem; }
.cr-profile-trend-indicator {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 700; font-family: var(--cr-font-num); white-space: nowrap; flex-shrink: 0;
  padding: 0.1875rem 0.5rem; border-radius: 9999px;
  background: color-mix(in srgb, currentColor 15%, var(--ink));
}
.cr-profile-traits { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cr-profile-summary { font-size: 0.8125rem; color: var(--text-3); line-height: 1.5; margin-top: 0.75rem; }
.cr-profile-history { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--wire); }
.cr-profile-history-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3); margin-bottom: 0.5rem; }
.cr-profile-history-row {
  display: grid; grid-template-columns: 8px auto 1fr; align-items: center; gap: 0.625rem;
  padding: 0.375rem 0; font-size: 0.8125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wire) 60%, transparent);
}
.cr-profile-history-row:last-child { border-bottom: none; }
.cr-profile-history-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cr-profile-history-date { font-family: var(--cr-font-num); font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
.cr-profile-history-event { color: var(--text-2); }
.cr-profile-history-row--inferred .cr-profile-history-event { font-style: italic; color: var(--text-3); }
.cr-trait { font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 99px; background: color-mix(in srgb, var(--rx-accent) 14%, transparent); color: var(--rx-accent-text); border: 1px solid transparent; }

@media (max-width: 560px) {
  .cr-profiles-layout { flex-direction: column; gap: 0.875rem; }
  .cr-profiles-nav {
    flex-direction: row; flex: none; max-width: none; max-height: none;
    width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: visible; gap: 0.5rem;
    padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch;
    /* Scrollbar horizontal escondida (Aug 2026, pedido do utilizador) —
       as próprias pills já são a affordance de "há mais para o lado". */
    scrollbar-width: none;
  }
  .cr-profiles-nav::-webkit-scrollbar { display: none; }
  /* Só o nome nas pills em mobile (Aug 2026, pedido do utilizador) —
     o indicador de tendência (seta) fica reservado à vista de
     desktop/lista. */
  .cr-profile-nav-trend { display: none; }
  .cr-profile-nav-item {
    flex-shrink: 0; width: auto; border-radius: 999px;
    border: 1px solid var(--wire-2); padding: 0.5rem 0.875rem;
    gap: 0.375rem;
  }
  .cr-profile-nav-item.active { border-color: var(--amber); }
  .cr-profile-nav-name { white-space: nowrap; }
  .cr-profiles-detail {
    background: var(--ink); border: 1px solid var(--wire); border-radius: 10px;
    padding: 0.875rem 1rem;
  }
}

/* ── Cabeçalho da página (voltar + título) — agora só no components.css
   partilhado (rx-core), nunca mais duplicado aqui. Tinha divergido do
   valor partilhado (var(--page-max-width) vs 860px directo) — se a
   variável não estivesse definida neste produto, o limite de largura
   desaparecia por completo (bug reportado: seta encostada à borda,
   título centrado no ecrã inteiro). ── */

/* ── Botão de descarregar a imagem-resumo, junto ao botão voltar ── */
.report-download-poster-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--rx-font-body); font-size: 0.8125rem; font-weight: 600;
  color: var(--text-2); background: var(--ghost-2); border: 1px solid var(--wire-2);
  border-radius: 8px; padding: 0.5rem 0.875rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.report-download-poster-btn:hover:not(:disabled) { background: var(--ghost-3); border-color: var(--wire); }
.report-download-poster-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   REVISÃO DO RELATÓRIO (Out 2026)
   Barras horizontais e linhas que abrem: rx-core (report-parts.css).
   ============================================================ */

/* Topo: os 7 factores em barras pequenas, por baixo dos números. */
.cr-factors { margin-top: 1.25rem; }
.cr-factors-head { margin-bottom: 0.625rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.cr-factors-head span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.cr-factors .rx-bar-val { font-family: var(--cr-font-num); font-weight: 700; }
.cr-metric-sub { display: block; margin-top: 0.25rem; font-family: var(--rx-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }

/* Visão geral: lista numerada, tema de cada conclusão em destaque. */
.cr-conclusions-list { counter-reset: crc; gap: 0.875rem; }
.cr-conclusions-list li {
  counter-increment: crc;
  position: relative;
  padding: 0 0 0 2.25rem;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
}
.cr-conclusions-list li::before {
  content: counter(crc);
  position: absolute;
  left: 0;
  top: 0.125rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: var(--cr-font-num);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
  background: var(--rx-surface-2);
}
.cr-conclusions-list li strong { color: var(--text); font-weight: 650; }

/* Como chegámos à pontuação: linhas .rx-dim; a nota no estilo de número. */
.cr-factor-rows .rx-dim-val { font-size: 1.125rem; }
.cr-factor-rows .rx-dim-name svg { margin-right: 0 !important; }

/* Valores sempre visíveis quando há poucas barras (até 8). */
.cr-bar-chart--values .cr-bar-value { display: block; }
.cr-bar-chart--values .cr-bar-col > .cr-bar-value { position: static; transform: none; margin: 0.375rem 0 0; font-weight: 600; color: var(--text-2); }

/* Rankings em barras (participantes, conversas, temas, links, silenciosos). */
.cr-rank-note { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--text-3); }

/* Tipo de conteúdo: uma barra 100% dividida + legenda. */
.cr-stack { display: flex; height: 14px; gap: 2px; border-radius: 99px; overflow: hidden; margin: 0.25rem 0 1rem; }
.cr-stack i { display: block; height: 100%; min-width: 3px; }
.cr-stack-legend { display: grid; gap: 0.5rem; }
.cr-stack-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--text-2); }
.cr-stack-swatch { width: 10px; height: 10px; border-radius: 3px; }
.cr-stack-pct { font-family: var(--cr-font-num); font-weight: 700; color: var(--text); }

/* Entradas e saídas: ícone entrou/saiu; criação do grupo à cabeça. */
.cr-mem-ic { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-right: 0.5rem; border-radius: 50%; vertical-align: -2px; }
.cr-mem-ic--in  { color: var(--rx-good); background: color-mix(in srgb, var(--rx-good) 14%, transparent); }
.cr-mem-ic--out { color: var(--rx-bad);  background: color-mix(in srgb, var(--rx-bad) 14%, transparent); }
.cr-created-line { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--text-2); }
.cr-created-line strong { color: var(--text); }

/* Caixas de números nos cartões de largura total: colunas mais largas
   (a unidade "mensagens" não parte para outra linha). */
@media (min-width: 760px) {
  .cr-card-wide .cr-stat-tiles:not(.cr-stat-tiles--3col) { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* ── Out 2026 — peças novas: níveis de envolvimento, calendário do último
   ano, pessoas activas por mês e evolução entre análises. Paleta de dados
   do produto (--cr-data-*), neutros e semânticas; nunca a cor de destaque. */
#app.report-view .cr-card[hidden] { display: none; }

/* Níveis de envolvimento: mesma cor, intensidade decrescente (é uma escala). */
#app.report-view .cr-tier-bar { display: flex; gap: 3px; height: 0.875rem; border-radius: 999px; overflow: hidden; margin: 0.25rem 0 0.875rem; }
#app.report-view .cr-tier-seg { display: block; min-width: 4px; }
#app.report-view .cr-tier--1 { background: var(--cr-data-1); }
#app.report-view .cr-tier--2 { background: color-mix(in srgb, var(--cr-data-1) 60%, var(--rx-surface-1)); }
#app.report-view .cr-tier--3 { background: color-mix(in srgb, var(--cr-data-1) 30%, var(--rx-surface-1)); }
#app.report-view .cr-tier-legend { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
#app.report-view .cr-tier-legend li { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.625rem; row-gap: 0.125rem; align-items: center; }
#app.report-view .cr-tier-dot { width: 0.75rem; height: 0.75rem; border-radius: 3px; }
#app.report-view .cr-tier-name { font-weight: 600; color: var(--rx-text-1); }
#app.report-view .cr-tier-n { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--rx-text-1); }
#app.report-view .cr-tier-n small { font-weight: 500; color: var(--rx-text-3); }
#app.report-view .cr-tier-desc { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--rx-text-2); }

/* Calendário do último ano */
#app.report-view .cr-cal-scroll, #app.report-view .cr-am-scroll { overflow-x: auto; scrollbar-width: thin; }
#app.report-view .cr-cal { display: block; max-width: none; }
#app.report-view .cr-cal-0 { fill: var(--rx-surface-2); background: var(--rx-surface-2); }
#app.report-view .cr-cal-1 { fill: color-mix(in srgb, var(--cr-data-1) 30%, var(--rx-surface-2)); background: color-mix(in srgb, var(--cr-data-1) 30%, var(--rx-surface-2)); }
#app.report-view .cr-cal-2 { fill: color-mix(in srgb, var(--cr-data-1) 55%, var(--rx-surface-2)); background: color-mix(in srgb, var(--cr-data-1) 55%, var(--rx-surface-2)); }
#app.report-view .cr-cal-3 { fill: color-mix(in srgb, var(--cr-data-1) 80%, var(--rx-surface-2)); background: color-mix(in srgb, var(--cr-data-1) 80%, var(--rx-surface-2)); }
#app.report-view .cr-cal-4 { fill: var(--cr-data-1); background: var(--cr-data-1); }
#app.report-view .cr-cal-month, #app.report-view .cr-cal-day { font-size: 9px; fill: var(--rx-text-3); font-family: var(--rx-font-body); }
#app.report-view .cr-cal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--rx-text-2); }
#app.report-view .cr-cal-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--rx-text-3); }
#app.report-view .cr-cal-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
#app.report-view .cr-cal-legend span:first-child { margin-right: 4px; }
#app.report-view .cr-cal-legend span:last-child { margin-left: 4px; }

/* Pessoas activas por mês (colunas em HTML, ajustam-se à largura) */
#app.report-view .cr-am { display: flex; align-items: flex-end; gap: 4px; height: 10rem; padding-top: 1.25rem; }
#app.report-view .cr-am-col { flex: 1 1 0; min-width: 0; max-width: 3rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
#app.report-view .cr-am-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
#app.report-view .cr-am-stack { position: relative; display: flex; flex-direction: column; min-height: 2px; }
#app.report-view .cr-am-stack i { display: block; min-height: 2px; }
#app.report-view .cr-am-stack i:first-of-type { border-radius: 3px 3px 0 0; }
#app.report-view .cr-am-val { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 2px; font-size: 0.6875rem; font-weight: 650; text-align: center; color: var(--rx-text-2); }
#app.report-view .cr-am-lbl { display: flex; flex-direction: column; align-items: center; height: 1.875rem; padding-top: 0.25rem; font-size: 0.6875rem; line-height: 1.15; color: var(--rx-text-3); white-space: nowrap; }
#app.report-view .cr-am-lbl small { font-size: 0.625rem; }
#app.report-view .cr-am-old { background: var(--cr-data-1); }
#app.report-view .cr-am-new { background: var(--cr-data-2); }
#app.report-view .cr-am-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0.5rem 0 0.75rem; font-size: 0.8125rem; color: var(--rx-text-2); }
#app.report-view .cr-am-legend i { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; border-radius: 2px; }
#app.report-view .cr-am-ret { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rx-border); border-radius: 10px; background: var(--rx-surface-2); font-size: 0.875rem; color: var(--rx-text-2); }
#app.report-view .cr-am-ret strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--rx-text-1); }

/* Evolução entre análises (linhas rx-bars do rx-core, cor pela faixa da pontuação) */
#app.report-view .cr-evo { margin-bottom: 0.5rem; }
#app.report-view .cr-evo-row.is-current .rx-bar-label, #app.report-view .cr-evo-row.is-current .rx-bar-val { font-weight: 700; color: var(--rx-text-1); }
#app.report-view .cr-evo-row small { font-weight: 500; color: var(--rx-text-3); }
#app.report-view .cr-evo-delta { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--rx-text-2); }
#app.report-view .cr-evo-delta strong { font-size: 1.25rem; color: var(--rx-text-1); }
#app.report-view .cr-evo-delta strong.is-up { color: var(--rx-good); }
#app.report-view .cr-evo-delta strong.is-down { color: var(--rx-bad); }