/* ==========================================================================
   Teste de Perfil — os GRÁFICOS do material do IBC (pedido 2026-10-07)
   O ALVO dos quatro animais (cada quarto do círculo pintado até o percentual do perfil, com a
   legenda ao lado) e a DOMINÂNCIA CEREBRAL (quatro caixas + eixos com os polos ao redor do SVG).
   Peças COMPARTILHADAS pelo resultado do painel (`filament.app.teste-perfil.resultado`, carregada só
   nas telas dele — AssetsPorPagina) e pela página pública em que o candidato responde (`<link>` do
   layout `components/layouts/app`). Marcação única em `components/teste-perfil/alvo.blade.php` e
   `components/teste-perfil/dominancia.blade.php`.
   Tokens --crh-* (centralrh-tokens.css), sem CSS inline (CLAUDE.md §7).
   ========================================================================== */
/* Cor de cada animal (como no material do IBC: águia verde, gato laranja, tubarão vermelho, lobo azul).
   Classe por LETRA do gabarito; serve ao setor do alvo (fill) e ao quadradinho da legenda (background). */
.crh-tp-cor--i { fill: var(--crh-success); background: var(--crh-success); }
.crh-tp-cor--c { fill: var(--crh-warning); background: var(--crh-warning); }
.crh-tp-cor--a { fill: var(--crh-danger); background: var(--crh-danger); }
.crh-tp-cor--o { fill: var(--crh-primary); background: var(--crh-primary); }
.crh-tp-cor-texto--i { fill: var(--crh-success); }
.crh-tp-cor-texto--c { fill: var(--crh-warning); }
.crh-tp-cor-texto--a { fill: var(--crh-danger); }
.crh-tp-cor-texto--o { fill: var(--crh-primary); }

/* Alvo dos quatro animais — SVG CENTRALIZADO com a legenda embaixo, no mesmo eixo do gráfico da
   dominância (pedido 2026-10-07: com a legenda ao lado, o círculo ficava encostado à esquerda). */
.crh-tp-alvo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.crh-tp-alvo__svg {
    display: block;
    flex: none;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}

.crh-tp-alvo__setor {
    fill-opacity: 0.78;
}

.crh-tp-alvo__anel {
    fill: none;
    stroke: var(--crh-text-subtle);
    stroke-opacity: 0.35;
    stroke-width: 0.75;
}

.crh-tp-alvo__anel--borda {
    stroke-opacity: 0.7;
    stroke-width: 1.25;
}

.crh-tp-alvo__eixo {
    stroke: var(--crh-text-subtle);
    stroke-opacity: 0.7;
    stroke-width: 1;
}

.crh-tp-alvo__escala {
    font-size: 8px;
    fill: var(--crh-text-subtle);
}

.crh-tp-alvo__nome {
    font-size: 13px;
    font-weight: 800;
    fill: var(--crh-text-strong);
}

.crh-tp-alvo__nome--top {
    text-decoration: underline;
}

.crh-tp-alvo__pct {
    font-size: 12px;
    font-weight: 800;
}

.crh-tp-legenda {
    flex: none;
    width: 100%;
    max-width: 360px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crh-tp-legenda__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84375rem;
    color: var(--crh-text-strong);
}

.crh-tp-legenda__item--top {
    font-weight: 800;
}

.crh-tp-legenda__cor {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.crh-tp-legenda__nome {
    flex: 1;
}

.crh-tp-legenda__val {
    font-size: 0.78125rem;
    color: var(--crh-text-muted);
}

.crh-tp-legenda__item--top .crh-tp-legenda__val {
    color: var(--crh-primary);
    font-weight: 800;
}

/* Dominância cerebral — quatro caixas + eixos com os polos ao redor do SVG */
.crh-tp-dom__eixo {
    stroke: var(--crh-text-subtle);
    stroke-opacity: 0.7;
    stroke-width: 1;
}

/* Escala de 10 em 10 em cima dos eixos (2026-10-08, modelo do material): o contorno na cor do fundo
 * (`paint-order: stroke`) abre um respiro na linha do eixo e no polígono, e o número fica legível. */
.crh-tp-dom__escala {
    font-size: 7px;
    font-weight: 600;
    fill: var(--crh-text-muted);
    paint-order: stroke;
    stroke: var(--crh-surface, #fff);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* Cérebro visto de cima, atrás do alvo (img/teste-perfil/cerebro.webp como MÁSCARA): a cor do traço
 * vem do tema; a opacidade deixa anéis, eixos e o polígono mandarem. */
.crh-tp-dom__mascara {
    mask-type: alpha;
}

.crh-tp-dom__cerebro {
    fill: var(--crh-text-muted);
    opacity: 0.42;
}

.crh-tp-dom__zero {
    font-size: 7px;
    font-weight: 800;
    fill: var(--crh-surface, #fff);
}

.crh-tp-dom__caixas {
    display: grid;
    /* 120px: duas por linha no celular (tela do candidato), quatro no modal. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.crh-tp-dom__caixa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--crh-primary-border);
    border-radius: var(--crh-radius-lg);
    padding: 0.5rem 0.75rem;
}

.crh-tp-dom__rotulo {
    font-size: 0.71875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--crh-text-subtle);
}

.crh-tp-dom__valor {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--crh-primary);
}

.crh-tp-dom__soma {
    font-size: 0.71875rem;
    color: var(--crh-text-muted);
}

.crh-tp-dom {
    display: grid;
    /* 340px: o quadro ganhou a margem do cérebro em volta do alvo (2026-10-08). */
    grid-template-columns: auto minmax(0, 340px) auto;
    grid-template-areas:
        ". topo ."
        "esq svg dir"
        ". base .";
    justify-content: center;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.crh-tp-dom__svg {
    grid-area: svg;
    display: block;
    width: 100%;
    height: auto;
}

.crh-tp-dom__polo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--crh-text-strong);
}

.crh-tp-dom__polo small {
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--crh-text-muted);
}

.crh-tp-dom__polo--topo { grid-area: topo; }
.crh-tp-dom__polo--base { grid-area: base; }
.crh-tp-dom__polo--esq { grid-area: esq; }
.crh-tp-dom__polo--dir { grid-area: dir; }

.crh-tp-dom__anel {
    fill: none;
    /* Mais firme desde que o cérebro entrou atrás (2026-10-08): no modelo, os anéis se leem sobre o desenho. */
    stroke: var(--crh-text-muted);
    stroke-opacity: 0.75;
    stroke-width: 0.9;
}

.crh-tp-dom__area {
    fill: var(--crh-primary);
    fill-opacity: 0.22;
    stroke: var(--crh-primary);
    stroke-width: 2;
    stroke-linejoin: round;
}

.crh-tp-dom__ponto {
    fill: var(--crh-primary);
    stroke: var(--crh-surface);
    stroke-width: 1.5;
}

.crh-tp-dom__centro {
    fill: var(--crh-text-strong);
}

@media (max-width: 480px) {
    .crh-tp-dom__polo small {
        display: none;
    }

    /* No celular o quadro encolhe: fica a escala de 20 em 20, sem números atropelados. */
    .crh-tp-dom__escala--menor {
        display: none;
    }

    /* Rótulos laterais menores: o gráfico fica com a largura que sobra. */
    .crh-tp-dom__polo {
        font-size: 0.625rem;
        letter-spacing: 0;
    }

    .crh-tp-dom {
        gap: 0.25rem;
    }
}