/* ============================================================
   rx-core — compare-view.css
   6ª correcção (Aug 2026). .cr-section/.cr-grid/.cr-card/
   .cr-component* vêm do report.css (global), sem redefinir nada.
   Layout de tabela standard (NN/Group, Baymard) — colunas = opções,
   cabeçalho uma única vez (barra sticky), sem repetir identificação
   em cada linha. Barra sticky copiada estrutura a estrutura do
   report-anchor-nav.css real (ver comentário mais abaixo).

   Tamanhos de texto desta página (Aug 2026, 4ª e definitiva correcção
   — as 3 anteriores inventavam valores/tectos artificiais em vez de
   simplesmente copiar o que já existe): copiados literalmente do
   relatório real, sem inventar hierarquia nova — .cr-card h2 real =
   0.9375rem (subtítulo, ex. "Números gerais"), .cr-card-sub real =
   0.8125rem (subsubtítulo, ex. "Plataforma"), .cr-conclusions-list li
   real = 0.875rem (conteúdo/corpo, ex. "WhatsApp"). Confirmados por
   grep directo ao report.css antes de aplicar, não adivinhados.
   ============================================================ */

.rx-compare-view { max-width: var(--page-max-width, 980px); margin: 0 auto; padding: 0 1.25rem 3rem; }

/* .transaction-badge (dashboard.css) reutilizado aqui — mas essa
   classe é position:absolute, desenhada para o canto de um card de
   listagem. Aqui só anulamos o posicionamento (position:static,
   border-radius simétrico); a cor de cada plataforma continua a vir
   das regras reais (.whatsapp/.telegram/etc), nunca inventada —
   border:currentColor reaproveita a MESMA cor já definida lá para
   "color", só a aplica ao contorno todo em vez de 2 lados. */
.rx-compare-view .transaction-badge {
  position: static; display: inline-block; border-radius: 6px;
  border: 1px solid currentColor; opacity: 0.95;
}

/* Etiquetas para listas de termos curtos (temas, estilo do grupo) —
   Aug 2026. Construídas com os tokens já usados em toda a página
   (--ghost-2, --wire-2, --text-2), não uma classe reaproveitada de
   outro sítio (não encontrei nenhuma confirmada nos ficheiros
   disponíveis). Padrão comum a produtos de referência (GitHub
   topics, LinkedIn skills, Notion) para este tipo de conteúdo. */
.rx-compare-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; }
.rx-compare-row-prose .rx-compare-tags { justify-content: flex-start; }
.rx-compare-tag {
  display: inline-block; font-size: 0.8125rem; color: var(--text-2);
  background: var(--ghost-2); border: 1px solid var(--wire-2); border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}

/* Nuvem de palavras — Aug 2026, redesenhado por completo. Já não
   depende de nenhum font-size de CSS "adivinhado" — RXWordCloud
   (rx-core/word-cloud.js, componente partilhado) mede a largura real
   do contentor e escreve cada palavra já com o seu tamanho em pixels
   reais, calculado para essa largura específica. .rx-word-cloud-mount
   só precisa de ocupar a largura da coluna; o resto (position, altura,
   .cr-word-cloud) é aplicado pelo próprio componente em runtime. */
.rx-word-cloud-mount { display: block; width: 100%; }

/* Diagrama de par ligado (Aug 2026) — 2 nós (iniciais em círculo) +
   linha de ligação, pensado para exactamente 2 pessoas. */
.rx-compare-pair-diagram { display: flex; align-items: flex-start; justify-content: center; gap: 0.25rem; }
.rx-compare-pair-node { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; min-width: 0; }
.rx-compare-pair-initial {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ghost-2); border: 1px solid var(--wire-2);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.8125rem; color: var(--text);
  flex-shrink: 0;
}
.rx-compare-pair-name { font-size: 0.75rem; color: var(--text-2); text-align: center; max-width: 6rem; }
.rx-compare-pair-link {
  width: 1.25rem; flex-shrink: 0; margin-top: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--amber); opacity: 0.85; line-height: 1;
}

/* Classe própria do cabeçalho (Aug 2026, corrigido — partilhava
   .rx-compare-view com o resto do conteúdo, e o padding-bottom:3rem
   dela, pensado para o FIM da página, estava a aplicar-se a meio,
   entre o título e a barra sticky, por o cabeçalho agora viver no seu
   próprio wrapper via wrapperClass). Mesma largura/margem, respiro só
   em cima (afasta o botão voltar da topbar), sem padding de baixo. */
.rx-compare-header-wrap { max-width: var(--page-max-width, 980px); margin: 0 auto; padding: 1.5rem 1.25rem 0; }

.rx-compare-empty {
  text-align: center; color: var(--text-3); font-size: 0.9375rem;
  padding: 4rem 1rem; max-width: 480px; margin: 2rem auto 0;
}

/* Barra sticky — nomes LADO A LADO (alinhados com as colunas do
   conteúdo abaixo, esquerda=A/direita=B), "vs" numa coluna própria ao
   centro (grid 1fr auto 1fr). Cada nome pode quebrar para 2ª linha
   DENTRO da sua própria coluna quando não couber (Aug 2026, corrigido
   — a versão anterior empilhava as duas comunidades uma sobre a
   outra, perdendo o alinhamento com as colunas de conteúdo; o pedido
   real era manter as posições e só permitir 2 linhas por nome). */
/* Barra sticky — o respiro por baixo (Aug 2026, 5ª e definitiva
   correcção) NÃO é margem nem um espaçador a seguir — um elemento
   sticky, quando cola, pinta a SUA PRÓPRIA caixa (fundo incluído)
   sobre o que estiver por baixo nesse ponto do ecrã; qualquer coisa
   DEPOIS dele no HTML já não ajuda, porque o conteúdo real da página
   já passou para debaixo da posição onde a barra colou antes de
   alguma vez chegar a esse espaçador. A técnica real (confirmada no
   report-anchor-nav.js: "o wrapper dos pills já inclui algum
   padding-bottom como respiro natural") é dar padding-bottom generoso
   ao PRÓPRIO elemento sticky — a caixa fica maior, o fundo dela cobre
   mais espaço, cria o buffer a sério, sem depender de mais nada. */
/* Barra sticky — ESTRUTURA IDÊNTICA ao nav-pills-wrap/nav-pills real
   dos relatórios (Aug 2026, 6ª correcção — copiado do
   report-anchor-nav.css real, não inventado): DOIS elementos, não um.
   .rx-compare-names-wrap é o elemento STICKY — fundo igual ao da
   página (var(--ink), "invisível"), com o seu próprio padding e
   margin-bottom. .rx-compare-names-bar é a caixa VISÍVEL (fundo,
   borda, arredondado) DENTRO do wrap, position:relative normal (não
   sticky). O respiro vem do padding do wrap + margin-bottom do wrap
   — a técnica comprovada, já em produção nos relatórios de ambos os
   produtos, não uma reinvenção minha. */
.rx-compare-names-wrap {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  padding: 0.625rem 4px 0.875rem;
  margin-left: -4px; margin-right: -4px;
  margin-bottom: 1.25rem;
}
.rx-compare-names-bar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: var(--ink-2); border: 1px solid var(--wire-2); border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rx-compare-names-wrap.is-stuck .rx-compare-names-bar {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--wire-2));
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.rx-compare-names-item {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.9375rem; color: var(--text);
  text-align: center; line-height: 1.3; white-space: normal; min-width: 0;
}
.rx-compare-names-vs {
  color: var(--text-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Títulos dos cartões CENTRADOS — só nesta página (âmbito
   .rx-compare-view, nunca o relatório em si). */
.rx-compare-view .cr-card h2 { text-align: center; font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.75rem; }

.rx-compare-summary-intro { margin: 0 0 0.875rem; font-size: 0.875rem; color: var(--text-2); line-height: 1.6; }
.rx-compare-summary ul { margin: 0; padding-left: 1.125rem; }
.rx-compare-summary li { margin-bottom: 0.625rem; font-size: 0.875rem; color: var(--text-2); line-height: 1.6; }
.rx-compare-summary li:last-child { margin-bottom: 0; }

/* Lista de recomendações — mesma cor/tamanho/altura de linha já
   usada nos outros blocos de texto corrido desta página. */
.rx-compare-recs { margin: 0; padding-left: 1.125rem; }
.rx-compare-recs li { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; margin-bottom: 0.375rem; }
.rx-compare-recs li:last-child { margin-bottom: 0; }

/* Linha dentro de um cartão — label ("Recomendações de melhoria",
   "Plataforma", etc.) SEMPRE se confundia com texto/título por perto,
   por mais que se mexesse só em cor/tamanho (Aug 2026, 2ª correcção —
   utilizador continuava a não distinguir à primeira vista). Resolvido
   trocando de FORMA, não só de cor: chip com fundo/borda arredondada
   (mesma linguagem já usada em .rx-compare-tag mais acima) — lê-se
   como etiqueta, nunca como frase/título, sem perder a informação. */
.rx-compare-row {
  padding-top: 2rem;
  text-align: center;
}
.rx-compare-row:first-child { padding-top: 0; }
.rx-compare-row-label {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-2);
  background: var(--ghost-2); border: 1px solid var(--wire-2); border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
}
/* Fundo a dividir as 2 colunas — UM gradiente contínuo atrás de todo o
   conteúdo do cartão (Aug 2026, sugestão do utilizador, avaliada e
   confirmada como boa prática — NN/Group recomenda sombrear
   ligeiramente o fundo de cada coluna). Aplicado ao .rx-compare-pair
   de CADA linha (não ao subsubtítulo, corrigido — o fundo estava a
   cobrir os labels também) — como todas as linhas têm a mesma
   largura, os gradientes alinham-se perfeitamente entre si, dando o
   efeito de coluna contínua só na zona dos valores. Usa --ghost (já
   existente, ~5% opacidade) — subtil de propósito, nunca chocante. */
.rx-compare-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: stretch;
  border-radius: 6px; margin: 0 -0.5rem; padding: 0.375rem 0.5rem;
}
/* Empilhar só faz sentido para texto corrido genuíno (temas, estilo,
   recomendações — .rx-compare-row-prose): esses ganham espaço a sério
   (1 coluna) em vez de se apertarem para metade da largura do cartão.
   Conteúdo curto/visual (números, nuvem de palavras) fica sempre lado
   a lado — já cabe bem apertado, e RXWordCloud adapta-se sozinho a
   qualquer largura de contentor (Aug 2026), não precisa de mais
   espaço. Ao empilhar, perde-se o alinhamento lado-a-lado com a barra
   sticky de nomes lá em cima — por isso cada bloco ganha a sua própria
   etiqueta de nome (.rx-compare-pair-name-tag), escondida em ecrãs
   largos onde a posição já basta. */
@media (max-width: 560px) {
  .rx-compare-row-prose .rx-compare-pair { grid-template-columns: 1fr; gap: 1.25rem; }
}
.rx-compare-pair-name-tag {
  display: none;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.75rem;
  color: var(--amber); text-align: left; margin-bottom: 0.375rem;
}
@media (max-width: 560px) {
  .rx-compare-row-prose .rx-compare-pair-name-tag { display: block; }
}
/* Divisória entre as 2 colunas de listas (temas/estilo/recomendações) —
   Aug 2026, pedido do utilizador: com pouco espaço entre colunas,
   ficava ambíguo a quem pertencia cada linha perto do meio. Só em
   ecrãs largos — em mobile já empilha (ver acima), uma borda vertical
   não faria sentido nenhum. */
@media (min-width: 561px) {
  .rx-compare-row-prose .rx-compare-pair { column-gap: 2rem; }
  .rx-compare-row-prose .rx-compare-pair-item + .rx-compare-pair-item {
    border-left: 1px solid var(--wire-2);
    padding-left: 2rem;
  }
}
/* Padding reduzido ao mínimo (Aug 2026, corrigido — causa real
   confirmada: 1rem de padding aqui sempre existiu nos dois lados,
   mas ficava invisível sem borda; a borda do destaque "revelava"
   esse espaço só do lado vencedor, criando uma segunda caixa visível
   por fora do .cr-component só ali — via-se como margem desigual,
   mas era o MESMO padding, só que exposto de um lado e escondido do
   outro). Com o padding quase nulo, não há quase nada para revelar. */
.rx-compare-pair-item { min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); text-align: center; padding: 0; display: flex; flex-direction: column; }
/* Nunca tinha regra própria — dependia do comportamento por omissão
   do elemento (agora div, era span) para esticar. Explícito agora,
   garante largura igual nas duas colunas independentemente do
   conteúdo (texto simples vs bloco .cr-component). */
.rx-compare-pair-value { display: flex; flex-direction: column; width: 100%; flex: 1; }
.rx-compare-view .cr-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Barra sempre no fundo do cartão (Aug 2026, pedido do utilizador) —
   com align-items:stretch acima, os 2 cartões de um par já ficam com a
   mesma altura; sem isto, a barra ficava logo a seguir ao texto,
   deixando um espaço vazio estranho por baixo no cartão mais curto. */
.rx-compare-view .cr-component-bar { margin-top: auto; }

/* Participante mais activo — nome+percentagem numa linha, nº de
   mensagens à parte por baixo (Aug 2026, pedido do utilizador — antes
   vinha tudo espremido em .cr-component-header, partilhada por todo o
   relatório; ilegível aqui em mobile, onde a coluna fica só a metade
   da largura do cartão. Classes próprias, não mexem em mais nada). */
.rx-compare-active-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.rx-compare-active-count {
  font-size: 0.75rem; color: var(--text-3); margin-bottom: 0.5rem;
}
/* Linhas de texto corrido (temas, conclusão) — à esquerda, texto
   longo centrado lê-se mal (o olho perde a margem a cada linha). */
.rx-compare-row-prose .rx-compare-pair-item { text-align: left; font-weight: 400; line-height: 1.6; }
.rx-compare-muted { color: var(--text-3); }

/* Destaque do melhor valor — dois casos distintos:
   1) .rx-compare-pair-best — para valores de TEXTO simples (sem
      .cr-component), ex. "Tempo médio de resposta". Borda subtil à
      volta do próprio valor.
   2) .cr-component-best — para valores que JÁ são um bloco
      .cr-component (score/sentimento). Recolore o bloco DIRECTAMENTE
      (fundo claro + borda ligeiramente mais clara que esse fundo),
      em vez de o embrulhar noutra caixa por fora — evitar "caixa
      dentro de caixa" (Aug 2026, corrigido: a versão anterior criava
      uma segunda borda à volta da borda já existente do
      .cr-component, com um espaço estranho lá no meio). */
.rx-compare-pair-best {
  background: var(--ghost-2); border: 1px solid var(--wire-2); border-radius: 6px;
  margin: -0.375rem; padding: 0.375rem;
}
.rx-compare-view .cr-component.cr-component-best {
  background: var(--ghost-2); border-color: var(--wire-2);
}
/* Barras sem sentido bom/mau (participantes, mensagens, idade do
   grupo) — cinzento neutro, nunca as cores semânticas good/okay/bad
   já usadas nas restantes barras (não há "melhor" aqui). */
.rx-compare-view .cr-component-score.cr-neutral { color: var(--text); }
.rx-compare-view .cr-component-fill.cr-neutral { background: var(--text-3); }