/**
 * Página Portfólio da Coleção — PRD-004
 * Nenhum token novo (variables.css intocado) — só regras de composição desta tela.
 */

/* Paleta própria do gráfico (RF-02/RF-03) — variáveis dedicadas, não os tokens
   globais direto, para trocar por tons seguros na impressão sem afetar
   --accent/--text-primary usados no resto do app (variables.css intocado,
   mesma convenção já registrada pela PRD-004). */
:root {
    --pf-neutral-1: #9ea1ab;
    --pf-neutral-2: #858995;
    --pf-neutral-3: #6c707f;
}

/* Toolbar de modo (§3, RF-05) */
.pf-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.pf-toolbar-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rosca/Pizza (RF-03) */
.pf-dist-grafico { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.pf-dist-svg { flex: 0 0 auto; overflow: visible; }
.pf-fatia { stroke-linecap: butt; }
.pf-seg-destaque { stroke: var(--accent); }
.pf-seg-n1 { stroke: var(--pf-neutral-1); }
.pf-seg-n2 { stroke: var(--pf-neutral-2); }
.pf-seg-n3 { stroke: var(--pf-neutral-3); }
.pf-svg-centro-num { font-size: 12px; font-weight: var(--font-bold); fill: var(--text-primary); }
.pf-svg-centro-label { font-size: 6px; fill: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.pf-dist-legenda { list-style: none; margin: 0; padding: 0; flex: 1 1 140px; min-width: 140px; }
.pf-swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); flex-shrink: 0; }
.pf-swatch.pf-seg-destaque { background: var(--accent); }
.pf-swatch.pf-seg-n1 { background: var(--pf-neutral-1); }
.pf-swatch.pf-seg-n2 { background: var(--pf-neutral-2); }
.pf-swatch.pf-seg-n3 { background: var(--pf-neutral-3); }
.pf-swatch.pf-seg-mercado { background: var(--accent); }
.pf-swatch.pf-seg-investido { background: var(--text-primary); }

/* Linha do Tempo (RF-02, PRD-006) */
.pf-timeline-legenda { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pf-timeline-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--font-normal); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
/* Correção do achado 🔴 C1 (michelangelo, ciclo 1): escalar o SVG só por CSS
   encolhia o font-size dos rótulos de eixo junto com a geometria — em mobile
   (~340-360px de área útil) o texto de 10px caía a ~5px reais, ilegível. O
   container agora rola horizontalmente abaixo de 640px em vez de encolher o
   texto — mesmo padrão de scroll horizontal já usado em .tabs e .crs-track. */
.pf-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pf-timeline svg {
    display: block;
    width: 100%;
    min-width: 640px; /* piso = W do viewBox (const W = 640 em _timeline()) — o
                          SVG nunca escala abaixo de 1:1, então .pf-timeline-eixo
                          (10px) nunca renderiza menor que 10px reais */
    height: auto;
}
.pf-timeline-linha { stroke-width: 2.5; }
.pf-timeline-linha.pf-seg-mercado { stroke: var(--accent); }
.pf-timeline-linha.pf-seg-investido { stroke: var(--text-primary); }
.pf-timeline-ponto.pf-seg-mercado { fill: var(--accent); }
.pf-timeline-ponto.pf-seg-investido { fill: var(--text-primary); }
.pf-timeline-grade { stroke: var(--border-color); stroke-width: 1; }
.pf-timeline-eixo { font-size: 10px; fill: var(--text-secondary); }

/* Tabela acessível oculta (RF-02, alternativa textual do gráfico de linha) */
.pf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Vitrine somente leitura (§7, RF-04) — Card.render() sempre desenha .card-footer com o botão
   "+1 uso"; aqui ele nunca deve aparecer. .card-footer hoje só contém esse botão — se ganhar
   outro conteúdo no futuro, revisitar esta regra. */
.pf-vitrine .card-footer {
    display: none;
}

/* Título só-impressão (§2/§8) — escondido em tela; TASK-004 acrescenta o @media print que o
   exibe e oculta o chrome da página. */
.pf-print-title {
    display: none;
}

/* Achado próprio (execução): .section-title usa --text-muted globalmente (components.css),
   correto sobre --bg-primary/--bg-secondary (4.96:1, onde a maioria dos usos do app vive) —
   mas o modo Vitrine desta tela reaproveita .section-title DENTRO do accordion .fb-grupo, cujo
   fundo é --bg-card. --text-muted sobre --bg-card é o mesmo par reprovado que o DT-015 já
   corrigiu em outros lugares (4.42:1, abaixo do mínimo 4.5:1). Não alterar a regra global
   (quebraria os usos corretos no resto do app) — override escopado ao contexto novo que esta
   PRD introduziu. */
.fb-grupo-body-inner .section-title {
    color: var(--text-secondary);
}

/* Impressão (§8, RF-07) — primeiro @media print do projeto. Esconde chrome (header/sidebar/
   bottom-nav/toolbars), força paleta clara (tema escuro desperdiça tinta/é ilegível impresso)
   e expande o accordion "Números do acervo" independente do estado em tela — imprimir com o
   resumo financeiro escondido só porque o accordion estava fechado contradiz "documento
   apresentável" (RF-07). .pf-print-title já é escondido em tela pela regra acima; aqui só
   reaparece no papel. */
@media print {
    .header, .sidebar, .sidebar-overlay, .bottom-nav, .pf-toolbar, .cm-toggle {
        display: none !important;
    }
    .pf-print-title {
        display: block !important;
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: #000;
        margin-bottom: var(--space-4);
    }
    /* Accordion sempre expandido no papel, independente do estado .aberto em tela */
    .fb-grupo-body { grid-template-rows: 1fr !important; }
    .fb-grupo-body-inner { padding: var(--space-4) !important; }
    .main-content { margin-left: 0 !important; padding-bottom: 0 !important; }
    .page-content { max-width: none !important; padding: 0 !important; }
    body, .page-content { background: #fff !important; color: #000 !important; }
    /* Achado do Codex (review dupla-cega, ciclo 1): .fb-grupo-header tem fundo escuro próprio
       (--bg-secondary, components.css) não coberto aqui — combinado com .fb-grupo-title forçado
       a preto (linha abaixo), o título do accordion ficava ilegível (texto preto sobre fundo
       escuro) no papel. Incluído na mesma lista de fundo branco. */
    .stat-card, .card, .fb-grupo, .fb-grupo-header { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; }
    .stat-value, .card-title, .section-title, .fb-grupo-title, .fb-grupo-num { color: #000 !important; }
    .card-chip, .badge { border: 1px solid #999 !important; background: #f2f2f2 !important; color: #000 !important; }
    .card:hover { transform: none !important; box-shadow: none !important; }

    /* RF-02/RF-03 (PRD-006): dourado claro e cinzas claros somem no papel — versões
       escuras equivalentes, todas >=3:1 sobre branco (objetos gráficos, WCAG 1.4.11).
       Diferente do resto do print (que zera tudo pra preto — .stat-value etc., acima),
       aqui as DUAS séries/tons precisam continuar distinguíveis entre si: não há
       rótulo adjacente a cada ponto como há nos stat-cards. */
    :root {
        --pf-neutral-1: #2d3348;
        --pf-neutral-2: #575c6d;
        --pf-neutral-3: #818591;
    }
    .pf-seg-destaque, .pf-timeline-linha.pf-seg-mercado, .pf-timeline-ponto.pf-seg-mercado {
        stroke: #7a5b12 !important;
    }
    .pf-swatch.pf-seg-destaque, .pf-swatch.pf-seg-mercado { background: #7a5b12 !important; }
    .pf-seg-investido, .pf-timeline-linha.pf-seg-investido, .pf-timeline-ponto.pf-seg-investido {
        stroke: #1a1d29 !important;
    }
    .pf-swatch.pf-seg-investido { background: #1a1d29 !important; }
    .pf-svg-centro-num, .pf-svg-centro-label, .pf-timeline-eixo, .pf-timeline-legenda-item { fill: #000 !important; color: #000 !important; }
    .pf-timeline-grade { stroke: #ccc !important; }
}