/* Card 1057297 — Comparar soluções v4. Carregado DEPOIS do MudBlazor e do favoritos.css: herda
   os tokens de .fv-pagina e a faixa .ph-*. Regra do card: nenhuma célula ou card com altura fixa,
   max-height ou overflow: hidden.
   Cabeçalho fixo x rolagem horizontal (decisão 8, 07/10): um elemento com overflow-x: auto prende
   o position: sticky dentro de si, e o card não rola na vertical, então o cabeçalho deixaria de
   ficar fixo. Por isso o card só vira área de rolagem quando as N colunas NÃO cabem (container
   query sobre .cp-caixa); quando cabem, overflow fica visível e o th sticky usa a página. */

.cp-caixa { container: cp / inline-size; }
.cp-card { background: var(--white); border-radius: var(--r); box-shadow: var(--sombra-barra); overflow-x: auto; }
/* Largura mínima da tabela = 190 + N x 260 (design). Cabendo, o card não rola. */
.cp-n2 .cp-tabela { min-width: 710px; }
.cp-n3 .cp-tabela { min-width: 970px; }
.cp-n4 .cp-tabela { min-width: 1230px; }
/* --cp-topo: dentro de um card que rola, o sticky conta a partir do topo do CARD, e 64px empurrariam
   o cabeçalho para cima da primeira linha. Por isso o deslocamento da barra superior (64px) só vale
   quando o card não rola. */
.cp-card { --cp-topo: 0px; }
@container cp (min-width: 710px)  { .cp-n2 { overflow-x: visible; --cp-topo: 64px; } }
@container cp (min-width: 970px)  { .cp-n3 { overflow-x: visible; --cp-topo: 64px; } }
@container cp (min-width: 1230px) { .cp-n4 { overflow-x: visible; --cp-topo: 64px; } }

/* separate + spacing 0: com collapse, a borda do th sticky não acompanha a rolagem.
   fixed: as colunas das soluções dividem o espaço por igual (design: repeat(N, minmax(260px, 1fr))),
   em vez de crescerem conforme o texto; o mínimo de 260px vem do min-width da tabela. */
.cp-tabela { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cp-col-rotulo { width: 190px; }

/* ── Cabeçalho das colunas (fica abaixo da barra superior fixa de 64px) ── */
.cp-tabela thead th, .cp-tabela thead td { position: sticky; top: var(--cp-topo); z-index: 2; background: var(--white);
    border-bottom: 2px solid var(--line); vertical-align: top; }
.cp-tabela thead td.cp-canto { border-top-left-radius: var(--r); }
.cp-tabela thead th:last-child { border-top-right-radius: var(--r); }
/* Faixa de 6px do pilar = fundo do próprio th (sem elemento extra nem overflow). Seletor mais
   específico que o de cima, que pinta o fundo de branco. */
.cp-tabela thead th.cp-col { text-align: left; font-weight: 400; min-width: 260px; padding: 22px 20px 18px;
    border-left: 1px solid var(--line); background: linear-gradient(var(--cp-cor) 0 6px, var(--white) 6px); }
.cp-col-topo { display: flex; align-items: center; gap: 10px; }
.cp-pilar { font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px;
    background: var(--cp-pilar-bg); color: var(--cp-pilar-fg); overflow-wrap: anywhere; }
.cp-estrela { margin-left: auto; margin-right: -8px; }
.cp-nome { display: block; margin-top: 10px; font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -.01em;
    color: var(--ink); text-decoration: none; text-wrap: balance; overflow-wrap: anywhere; }
.cp-nome:hover { color: var(--teal-700); text-decoration: underline; }

/* ── Linhas ── */
.cp-tabela tbody tr > * { background: var(--white); border-bottom: 1px solid var(--line); vertical-align: top; }
.cp-tabela tbody tr.cp-par > * { background: #fafbfd; }
.cp-tabela .cp-rotulo-cel { text-align: left; padding: 16px 20px; font-weight: 400; }
.cp-rotulo { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ink-soft); }
.cp-igual { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: #eef1f8; color: var(--ink-soft); }
.cp-cel { padding: 16px 20px; border-left: 1px solid var(--line); min-width: 0; }
/* #646e8c em vez do #8a94ad do card: #8a94ad dá 3,0:1 sobre branco (2,9:1 na linha par), abaixo
   dos 4,5:1 que o próprio card exige (mesmo tipo de desvio da pílula do XP no Favoritos v4). */
.cp-vazio { color: #646e8c; }
.cp-texto { font-size: 14.5px; line-height: 1.55; text-wrap: pretty; overflow-wrap: anywhere; }
.cp-forte { font-weight: 700; }
.cp-kpi { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 600; padding: 4px 11px;
    border-radius: 999px; background: #f4f6fa; color: var(--ink); border: 1px solid var(--line); overflow-wrap: anywhere; }
.cp-tag.cp-tag-comum { background: #e6f5f3; color: #06352f; border-color: #7ed0c7; }
.cp-sn { display: inline-flex; font-size: 13.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.cp-sn-sim { background: #e6f5f3; color: #06352f; }
.cp-sn-nao { background: #eef1f8; color: var(--ink-soft); }

/* ── Rodapé ── */
.cp-rodape td { padding: 18px 20px; border-left: 1px solid var(--line); }
.cp-rodape td:first-child { border-left: none; }
.cp-rodape a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; font-weight: 800;
    letter-spacing: .06em; color: var(--teal-700); text-decoration: none; }
.cp-rodape a:hover { color: var(--teal-600); }

/* ── Legenda e voltar ── */
.cp-legenda-linha { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 13px; color: var(--ink-soft); }
.cp-legenda { display: inline-flex; align-items: center; gap: 6px; }
.cp-legenda .cp-tag { font-size: 12px; padding: 2px 9px; }
.cp-voltar { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal-700); text-decoration: none; }
.cp-voltar:hover { text-decoration: underline; }

/* ── Coluna de rótulos fixa à esquerda quando o card rola na horizontal (decisão 8) ──
   Vale em qualquer largura: com 4 soluções e o menu aberto, o card rola também no desktop.
   Quando o card não rola (overflow visível), o sticky não tem efeito: a página não rola na horizontal. */
.cp-tabela tbody tr > th.cp-rotulo-cel, .cp-tabela thead td.cp-canto, .cp-tabela .cp-rodape td:first-child {
    position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.cp-tabela .cp-rodape td:first-child { background: var(--white); border-bottom-left-radius: var(--r); }
/* Ao focar por teclado, o navegador rola o card até o elemento; sem isto ele pararia ATRÁS da coluna
   de rótulos fixa (WCAG 2.4.11). A largura é a da coluna de rótulos. */
.cp-caixa .cp-card { scroll-padding-left: 190px; }
.cp-tabela thead td.cp-canto { z-index: 3; }

/* Seletores com o mesmo peso dos de cima: @media não acrescenta especificidade. */
@media (max-width: 759.98px) {
    .cp-tabela .cp-col-rotulo { width: 150px; }
    .cp-caixa .cp-card { scroll-padding-left: 150px; }
}