/* ═══════════════════════════════════════════════════════════════════════════════════════════ Impressão — identidade visual Amigos do Bem (PDFs institucionais via print CSS) ═══════════════════════════════════════════════════════════════════════════════════════════ Fonte canônica: C:\Users\Micka\.claude\skills\amigos-do-bem-pdf\references\design.md + assets/template_onepager.html (relatório da distribuição). Hex e gradientes transpostos SEM alteração. O PDF das equipes (antes `.pdf-eq-*` aqui, página única em paisagem) saiu em 2026-08-12 (Task 8): virou uma rota do servidor (GET /api/equipes/pdf) — este arquivo não descreve mais aquele documento. Namespacing deliberado: tudo aqui usa o prefixo `--pdf-`/`.pdf-` porque o painel já tem seus próprios tokens (--azul: #1D4FA1 em css/estilo.css) com valores DIFERENTES dos da identidade AdB de documento (--azul: #17469E) — reusar o mesmo nome de token silenciosamente trocaria a cor de um pelo outro dependendo da ordem de carga do . `--pdf-azul` nunca colide. Arquitetura de exibição: a vista de impressão do relatório (#impressao-relatorio) é filha direta de , escondida na TELA (`display:none`) e só aparece quando o body ganha a classe de modo correspondente (imprimindo-relatorio) — aplicada por js/relatorio.js logo antes de window.print() e removida no evento afterprint. Nenhuma lib de PDF: o Chromium do usuário renderiza o print CSS e o próprio diálogo "Salvar como PDF" gera o arquivo. */ :root { --pdf-azul: #17469E; --pdf-azul-esc: #0E2E6B; --pdf-azul-claro: #E7EDF8; --pdf-laranja: #F68926; --pdf-amarelo: #FDB71A; --pdf-tinta: #1B2233; --pdf-tinta-2: #47506A; --pdf-tinta-3: #7A8395; --pdf-linha: #DDE2EC; --pdf-papel-3: #F5F7FB; --pdf-branco: #FFFFFF; --pdf-crit: #C0392B; --pdf-crit-bg: #FBEBE8; --pdf-atencao: #B87A0E; --pdf-aten-bg: #FDF3DD; --pdf-verde: #2E7D46; --pdf-sans: "Segoe UI", Roboto, system-ui, sans-serif; --pdf-mono: "Cascadia Mono", Consolas, ui-monospace, monospace; } /* ── Reset local, restrito às vistas de impressão (não vazar para o resto do painel) ── */ #impressao-relatorio, #impressao-panorama { font-family: var(--pdf-sans); color: var(--pdf-tinta); } #impressao-relatorio *, #impressao-panorama * { box-sizing: border-box; } #impressao-relatorio strong, #impressao-panorama strong { font-weight: 700; } .pdf-num { font-variant-numeric: tabular-nums; } /* ── Página one-pager (relatório da distribuição, A4, 1 página) ────────────────────────────── */ .pdf-pagina { width: 210mm; min-height: 297mm; font-size: 9.2pt; line-height: 1.4; display: flex; flex-direction: column; background: var(--pdf-branco); } /* ── Header em gradiente azul + brilho radial amarelo + faixa laranja→amarelo ──────────────── */ .pdf-header { background: radial-gradient(120% 200% at 92% 30%, rgba(253, 183, 26, 0.42), transparent 55%), linear-gradient(120deg, var(--pdf-azul), var(--pdf-azul-esc)); color: var(--pdf-branco); padding: 8mm 11mm 6.5mm; display: flex; align-items: center; gap: 14px; position: relative; } .pdf-header img { width: 58px; height: 58px; } .pdf-header .pdf-tit { flex: 1; } .pdf-eyebrow { font-family: var(--pdf-mono); font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pdf-amarelo); margin-bottom: 3px; } .pdf-header h1 { font-size: 17pt; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .pdf-header .pdf-org { text-align: right; font-size: 8pt; line-height: 1.3; } .pdf-header .pdf-org b { font-size: 9.5pt; } .pdf-faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--pdf-laranja), var(--pdf-amarelo)); } /* `justify-content: space-evenly` (em vez de flex-start): quando o one-pager tem menos dado (poucas inscrições, poucas opções de terrestre usadas), sobrava um vão morto entre o último bloco e o rodapé — o conteúdo inteiro empilhado no topo da página, com o espaço livre do flex:1 acumulado só embaixo. Distribuir o espaço extra ENTRE os grupos (premissa/kpis/blocos/passagens) usa a página inteira em vez de deixar metade dela em branco, sem exigir fonte maior nem inventar conteúdo para preencher. */ .pdf-corpo-pagina { flex: 1; padding: 7mm 11mm 0; display: flex; flex-direction: column; gap: 5.2mm; justify-content: space-evenly; } /* ── Premissa: parágrafo de enquadramento ───────────────────────────────────────────────────── */ .pdf-premissa { background: var(--pdf-azul-claro); border-left: 4px solid var(--pdf-laranja); border-radius: 0 6px 6px 0; padding: 11px 15px; font-size: 10.5pt; line-height: 1.45; } .pdf-premissa b { color: var(--pdf-azul-esc); } /* ── KPIs ────────────────────────────────────────────────────────────────────────────────────── */ .pdf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pdf-kpi { border: 1px solid var(--pdf-linha); border-top: 3px solid var(--pdf-azul); border-radius: 6px; padding: 10px 11px; } .pdf-kpi.lar { border-top-color: var(--pdf-laranja); } .pdf-kpi.cri { border-top-color: var(--pdf-crit); background: var(--pdf-crit-bg); } .pdf-kpi .pdf-n { font-size: 19pt; font-weight: 700; color: var(--pdf-azul-esc); line-height: 1; letter-spacing: -0.02em; } .pdf-kpi.cri .pdf-n { color: var(--pdf-crit); } .pdf-kpi .pdf-r { font-size: 7.2pt; color: var(--pdf-tinta-2); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; } /* ── Blocos (grade temática, cabeçalho azul + corpo branco) ─────────────────────────────────── */ .pdf-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .pdf-bloco { border: 1px solid var(--pdf-linha); border-radius: 7px; overflow: hidden; } .pdf-bloco > .pdf-cab { background: var(--pdf-azul); color: var(--pdf-branco); font-size: 8.6pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 13px; display: flex; align-items: center; gap: 7px; } .pdf-bloco > .pdf-cab .pdf-ic { font-size: 9.5pt; } .pdf-bloco .pdf-corpo { padding: 11px 13px; } .pdf-bloco p { margin: 0 0 6px; } .pdf-bloco p:last-child { margin-bottom: 0; } /* ── Lista rótulo × valor ────────────────────────────────────────────────────────────────────── */ .pdf-dados { list-style: none; margin: 0; padding: 0; } .pdf-dados li { display: flex; justify-content: space-between; gap: 10px; padding: 4.5px 0; border-bottom: 1px dotted var(--pdf-linha); font-size: 9pt; } .pdf-dados li:last-child { border-bottom: none; } .pdf-dados .pdf-rot { color: var(--pdf-tinta-2); } .pdf-dados .pdf-val { font-weight: 700; font-family: var(--pdf-mono); font-size: 8.7pt; white-space: nowrap; } .pdf-dados .pdf-val.c { color: var(--pdf-crit); } /* ── Mini barras horizontais (rótulo + trilho + valor) ──────────────────────────────────────── */ .pdf-mb { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; margin: 4px 0; font-size: 9pt; } .pdf-mb .pdf-trilho { grid-column: 1 / -1; display: block; height: 8px; background: var(--pdf-linha); border-radius: 4px; overflow: hidden; } .pdf-mb .pdf-pr { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pdf-laranja), var(--pdf-amarelo)); } .pdf-mb .pdf-pr.az { background: var(--pdf-azul); } .pdf-mb .pdf-v { font-family: var(--pdf-mono); font-size: 8pt; color: var(--pdf-tinta-2); } .pdf-mb .pdf-rot { color: var(--pdf-tinta); } .pdf-rodape { padding: 4mm 11mm 5mm; font-size: 7pt; color: var(--pdf-tinta-3); border-top: 1px solid var(--pdf-linha); margin-top: 4mm; line-height: 1.45; } .pdf-rodape b { color: var(--pdf-tinta-2); } .pdf-rodape code { font-family: var(--pdf-mono); font-size: 6.4pt; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ Mecânica de exibição — escondido na tela, mostrado só no modo de impressão correspondente ═══════════════════════════════════════════════════════════════════════════════════════════ */ @page { size: A4; margin: 0; } #impressao-relatorio, #impressao-panorama { display: none; } /* Corpo do panorama no PDF: reusa os blocos da tela (.panorama-bloco/.contadores/.funil/…), só achatando sombra/borda e evitando quebra de página no meio de um bloco. Header AdB via .pdf-*. */ #impressao-panorama .pdf-panorama-sub { color: var(--pdf-amarelo); font-size: 8.5pt; margin-top: 4px; } #impressao-panorama .pdf-panorama-corpo { padding: 8mm 11mm; display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; } #impressao-panorama .contadores, #impressao-panorama .funil { grid-column: 1 / -1; } #impressao-panorama .panorama-bloco { box-shadow: none; border: 1px solid var(--pdf-linha); break-inside: avoid; } #impressao-panorama .pdf-panorama-rodape { padding: 4mm 11mm; color: var(--pdf-tinta-3); font-size: 7.5pt; border-top: 1px solid var(--pdf-linha); } @media print { body.imprimindo-relatorio > :not(#impressao-relatorio) { display: none !important; } body.imprimindo-relatorio #impressao-relatorio { display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; } body.imprimindo-relatorio #impressao-relatorio * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } body.imprimindo-panorama > :not(#impressao-panorama) { display: none !important; } body.imprimindo-panorama #impressao-panorama { display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; } body.imprimindo-panorama #impressao-panorama * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }