/* ========================================================================== AR SOUZA — Estilo de impressao (PDF via dialogo do navegador) -------------------------------------------------------------------------- Carregar SEMPRE depois de app.css. Todo o arquivo vive dentro de @media print, exceto os utilitarios .nao-imprimir / .apenas-impressao, que precisam existir tambem em tela. Consome exclusivamente as variaveis de tokens.css. Nenhuma cor ou fonte literal. Valores estruturais (mm, 0, 1px, 100%) sao os unicos literais. NUMERACAO DE PAGINA: nao ha, propositalmente, contadores de pagina. CSS puro no navegador nao permite imprimir `counter(page)` no corpo do documento (as margin boxes de @page nao sao suportadas em Chrome/Safari). A numeracao vem do proprio dialogo de impressao do navegador (cabecalho/ rodape do sistema) ou, no caminho Cloudflare Browser Rendering, dos parametros headerTemplate/footerTemplate do PDF. NAO tentar emular aqui. ========================================================================== */ /* Utilitarios que precisam existir tambem em tela. */ .apenas-impressao { display: none; } /* ========================================================================== */ @media print { /* ---------------------------------------------------------- pagina */ @page { size: A4; margin: 18mm 16mm; } html, body { width: 100%; margin: 0; padding: 0; background-color: var(--cor-branco); color: var(--cor-texto); font-size: 10pt; line-height: var(--altura-linha); } /* Mantem as cores da marca no PDF. */ html, body, * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Viuvas e orfas em todo o corpo de texto. */ p, li, td, th, blockquote { orphans: 3; widows: 3; } /* ------------------------------------------------- o que nao imprime */ .nao-imprimir, .cabecalho, .progresso, .autosave, .pular-para-conteudo, .pular-link, .acoes-formulario, .grupo-botoes, .cabecalho-acoes, .btn, button, nav, form .btn, [role="navigation"], [role="alert"], .mensagem, .rodape { display: none !important; } .apenas-impressao { display: block; } /* ------------------------------------------------------------ shell */ /* O shell de tela e um grid de viewport (auto 1fr auto + min-height 100vh). Em midia paginada o Chrome NAO fragmenta conteudo dentro de grid: tudo alem da primeira folha some. Aqui o body vira fluxo normal de blocos. (.pagina e a classe atual do ; .aplicacao e o wrapper legado.) */ body, .pagina, .aplicacao { display: block; min-height: 0; height: auto; } .conteudo, .conteudo-relatorio, .conteudo-estreito { max-width: 100%; width: 100%; margin: 0; padding: 0; } /* Superficies perdem sombra e caixa; a folha ja e a moldura. */ .cartao, .painel, .metrica, .acordeao, .tabela-rolagem { box-shadow: none; border-radius: 0; padding: 0; overflow: visible; background-color: var(--cor-branco); } .cartao, .painel, .metrica { border: 0; border-top: 1px solid var(--cor-borda); padding-top: var(--esp-3); margin-bottom: var(--esp-4); } .cartao-cabecalho, .cartao-rodape { margin: 0 0 var(--esp-3); padding: 0; border: 0; background-color: transparent; border-radius: 0; } .aviso-lgpd, .aviso-metodologia, .nota, .painel { background-color: var(--cor-fundo-alt); padding: var(--esp-3); } /* ------------------------------------------------ blocos indivisiveis */ .cartao, .painel, .metrica, .item-pergunta, .acordeao, .aviso-lgpd, .aviso-metodologia, .nota, .capa, .escala, .figura, .evitar-quebra, tr, thead, tfoot, img, svg { break-inside: avoid; page-break-inside: avoid; } /* Titulos nunca ficam orfaos no fim da pagina. */ h1, h2, h3, h4, .rotulo-secao, .acordeao-cabecalho, caption { break-after: avoid; page-break-after: avoid; break-inside: avoid; } h1 { font-size: 18pt; } h2 { font-size: 14pt; margin-top: var(--esp-5); } h3 { font-size: 11.5pt; margin-top: var(--esp-4); } h4 { font-size: 10.5pt; } p { max-width: 100%; } /* --------------------------------------------------- quebras dirigidas */ .capa { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 0; /* A capa ocupa a primeira pagina inteira. */ height: 100%; padding: 0; border: 0; break-after: page; page-break-after: always; } .quebra-antes { break-before: page; page-break-before: always; } .quebra-depois { break-after: page; page-break-after: always; } /* --------------------------------------- acordeoes sempre abertos no PDF */ details, details.acordeao { display: block !important; } details[open], details:not([open]) { /* Forca o conteudo visivel mesmo com

fechado. */ display: block !important; } details > summary { display: block !important; list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Chrome/Safari: o conteudo de

fechado fica oculto pelo shadow DOM; content-visibility: visible reexibe no fluxo de impressao. */ details > *:not(summary) { display: revert !important; content-visibility: visible !important; } .acordeao-corpo, .acordeao-corpo[hidden], .acordeao-cabecalho[aria-expanded="false"] + .acordeao-corpo { display: block !important; visibility: visible !important; padding: 0; } .acordeao-cabecalho, summary.acordeao-cabecalho { display: block !important; min-height: 0; padding: 0; margin-bottom: var(--esp-2); background-color: transparent; font-size: 11.5pt; color: var(--cor-primaria); border-bottom: 1px solid var(--cor-borda); } .acordeao-cabecalho::after, summary.acordeao-cabecalho::after { content: none; } /* ------------------------------------------------------------ tabelas */ .tabela { width: 100%; min-width: 0; font-size: 9pt; border-collapse: collapse; break-inside: auto; page-break-inside: auto; } /* Repete o cabecalho da tabela em cada pagina. */ .tabela thead { display: table-header-group; } .tabela tfoot { display: table-footer-group; } /* Tabela do manual (pag. 13): SEM chapada azul no cabecalho e SEM zebra. Cabecalhos de coluna em caixa alta espacada cinza sobre filete forte; linhas separadas apenas por hairline horizontal; rotulo de linha em Azul Royal bold e valor de destaque a direita em azul (herdados de app.css). */ .tabela thead th { position: static; background-color: transparent; color: var(--cor-texto-suave); font-size: 7.5pt; text-transform: uppercase; letter-spacing: var(--letra-caixa-alta); border: 0; border-bottom: var(--espessura-divisoria) solid var(--cor-borda); padding: var(--esp-1) var(--esp-2); } .tabela tbody td, .tabela tbody th { padding: var(--esp-1) var(--esp-2); border: 0; border-top: 1px solid var(--cor-borda); } .tabela tbody tr:first-child td, .tabela tbody tr:first-child th { border-top: 0; } .tabela tbody tr, .tabela tbody tr:hover, .tabela tbody tr:nth-child(even), .tabela tbody tr:nth-child(even):hover { background-color: transparent; } .tabela tfoot td, .tabela tfoot th { border-top: var(--espessura-divisoria) solid var(--cor-borda); } /* --------------------------------------------------- selos e formulario */ .badge { border: 1px solid currentColor; padding: 0 var(--esp-2); font-size: 8pt; } /* A escala vira o registro impresso da resposta: so a opcao marcada. */ .escala-opcao input[type="radio"]:not(:checked) + label { display: none; } .escala { display: block; } .escala-opcao > label { display: inline-flex; min-height: 0; padding: 0 var(--esp-2); border: 1px solid var(--cor-opcao, var(--cor-borda)); border-radius: var(--raio-sm); color: var(--cor-opcao, var(--cor-texto)); background-color: var(--cor-opcao-fundo, transparent); font-size: 8.5pt; } .escala-opcao > label::before { display: none; } input, textarea, select { border: 1px solid var(--cor-borda); background-color: transparent; min-height: 0; padding: var(--esp-1) var(--esp-2); font-size: 9.5pt; } textarea { height: auto; min-height: 0; resize: none; overflow: visible; } .item-pergunta { display: block; padding: var(--esp-2) 0; border-top: 1px solid var(--cor-borda); } /* ------------------------------------------------------------- links */ a, a:hover, a:visited { color: var(--cor-texto); text-decoration: none; } /* Nao imprimir a URL entre parenteses depois do link. */ a[href]::after, abbr[title]::after { content: none !important; } /* --------------------------------------------- rodape de impressao */ /* .rodape-impressao: encerramento do documento no padrao do papel timbrado (manual, pag. 17 — "faixa fina azul profundo"): marca, contatos institucionais e a ressalva profissional. Sobre fundo escuro o texto e Branco Puro / Azul Gelo (pag. 11). Fica no fim do fluxo do documento (nao e um footer repetido por pagina — ver a nota sobre numeracao no topo deste arquivo). O display usa !important para vencer o display:none inline que oculta o bloco em tela — print.css carrega com media="print" e nao alcanca a tela. */ .rodape-impressao { display: block !important; margin-top: var(--esp-6); padding: var(--esp-3) var(--esp-4); background-color: var(--cor-fundo-escuro); color: var(--cor-destaque); font-size: 7.5pt; line-height: var(--altura-linha); text-align: left; break-inside: avoid; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rodape-impressao-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-2); } .rodape-impressao-marca { font-family: var(--fonte-titulo); font-size: 8pt; font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: var(--letra-caps); color: var(--cor-branco); } .rodape-impressao-contato { font-family: var(--fonte-titulo); font-size: 7.5pt; letter-spacing: var(--letra-caixa-alta); color: var(--cor-branco); } .rodape-impressao-ressalva { color: var(--cor-destaque); font-size: 7pt; max-width: 100%; } /* Variante fixa: repete a ressalva no rodape de TODAS as paginas. Use com moderacao — position: fixed em impressao e suportado no Chrome e no Firefox, mas encolhe a area util; a margem inferior de @page ja precisa acomodar a altura do bloco. */ .rodape-impressao-fixo { position: fixed; bottom: 0; left: 0; right: 0; font-size: 7pt; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); padding-top: 2mm; text-align: center; } .ressalva { max-width: 100%; font-size: 8pt; break-inside: avoid; page-break-inside: avoid; } /* ------------------------------------------------------------- marca */ .logo, .logo-capa { color: var(--cor-primaria); } .capa-titulo { color: var(--cor-primaria); font-size: 24pt; } .capa-subtitulo { font-size: 12pt; } /* Sem animacao nem transicao no papel. */ *, *::before, *::after { transition: none !important; animation: none !important; } } /* ========================================================================== ACRESCIMO — Relatorio: processo, rastreabilidade e area responsavel -------------------------------------------------------------------------- Bloco @media print separado de proposito: nenhuma regra acima foi alterada. Consome apenas tokens.css; os unicos literais sao estruturais (pt, 1px). ========================================================================== */ @media print { /* --- Agrupamento por processo ---------------------------------------- */ /* Subcabecalho nunca fica orfao no pe da pagina. A regra generica de titulos acima cobre h1..h4 e .rotulo-secao; o subcabecalho de processo e um h5 e precisa ser declarado aqui. */ .grupo-processo-titulo { font-size: 9pt; break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; } /* Um processo e uma unidade de leitura: agrupa controles afins dentro do principio, entao nao deve partir no meio. */ .grupo-processo { break-inside: avoid; page-break-inside: avoid; } /* --- Metadados de rastreabilidade ------------------------------------ */ /* Sai no papel: a referencia ao formulario de origem e o que o revisor procura ao amarrar o relatorio ao papel de trabalho. */ .meta-pergunta { font-size: 8pt; break-inside: avoid; page-break-inside: avoid; } /* Borda em tom forte: --cor-destaque e clara demais para sobreviver a impressao em preto e branco. */ .chip-area { font-size: 8pt; border: 1px solid var(--cor-borda-forte); break-inside: avoid; page-break-inside: avoid; } /* --- Tabela de efetividade por area responsavel ---------------------- */ /* Sai inteira em uma pagina. O seletor descendente (0,2,0) vence de propriedade a regra generica .tabela { break-inside: auto } (0,1,0), que existe para deixar tabelas longas fluirem entre paginas. */ .bloco-areas, .bloco-areas .tabela, .bloco-areas .tabela-rolagem { break-inside: avoid; page-break-inside: avoid; } } /* ========================================================================== ACRESCIMO — Estrutura visual do manual v3.0 no papel -------------------------------------------------------------------------- Capa, cabecalhos de secao no padrao capitulo, callouts e assinaturas. Bloco @media print separado: consome apenas tokens.css; os unicos literais sao estruturais (pt, 0, 1px, 100%). ========================================================================== */ @media print { /* --- Cabecalho de secao no padrao capitulo (pags. 11/13/17) ----------- */ /* O cabecalho institucional sai na PRIMEIRA pagina de cada secao — como o manual faz por "slide". Nao ha cabecalho repetido por pagina de proposito: CSS puro nao repete blocos fora de tabela de forma confiavel e hacks (position: fixed) roubam area util da folha. */ .secao-capitulo { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; } .secao-capitulo h2 { margin-top: 0; } /* Numeral decorativo: reduzido para a folha (em tela e 4.5rem). */ .numero-capitulo { font-size: 30pt; } .kicker { font-size: 7.5pt; break-after: avoid; page-break-after: avoid; } /* --- Callout (pag. 17, "APRESENTACOES E RELATORIOS") ------------------ */ .callout { background-color: var(--cor-fundo-alt); border-left: var(--callout-borda) solid var(--cor-acao); border-radius: 0; padding: var(--esp-3) var(--esp-4); break-inside: avoid; page-break-inside: avoid; } .callout-titulo { break-after: avoid; page-break-after: avoid; } /* --- Capa: cabecalho de marca e pe institucional indivisiveis --------- */ .capa-cabecalho, .capa-pe { break-inside: avoid; page-break-inside: avoid; } /* --- Assinaturas: linhas sobrias, nomes em Azul Profundo -------------- */ .assinatura-nome { color: var(--cor-primaria); } } /* ========================================================================== ACRESCIMO — Seção 04: Plano de implementação priorizado -------------------------------------------------------------------------- Bloco @media print separado: nenhuma regra acima foi alterada. Consome apenas tokens.css; os unicos literais sao estruturais (pt, 0, 1px). ========================================================================== */ @media print { /* --- Cards P1..P4 ------------------------------------------------------ */ /* Lado a lado na folha: a media query de 1200px de app.css (grade-4 em 4 colunas) nao alcanca a largura util do A4, entao a grade e redeclarada aqui. Cada card ja e indivisivel pela regra generica de .metrica. */ .plano-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); } .metrica-horizonte { font-size: 7.5pt; } /* --- Quadro impacto x esforco e fila por area: sem quebra interna ------ */ .quadrante-bloco, .fila-area, .fila-area .tabela, .fila-area .tabela-rolagem { break-inside: avoid; page-break-inside: avoid; } .quadrante-lista { font-size: 8.5pt; } /* --- Tabela mestra ----------------------------------------------------- */ /* A tabela pode quebrar ENTRE grupos de faixa — cada faixa e um indivisivel — e nunca dentro de uma linha (regra generica de tr). Um grupo maior que a folha degrada quebrando entre linhas, que e o comportamento correto de fallback. */ .tabela-plano { break-inside: auto; page-break-inside: auto; } .grupo-faixa { break-inside: avoid; page-break-inside: avoid; } /* Subcabecalho de faixa nunca fica orfao no pe da pagina. */ .linha-grupo-prioridade, .linha-grupo-prioridade th { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; } .marca-revisada { font-size: 7.5pt; } /* --- Memoria de calculo SEMPRE aberta no papel ------------------------- */ /* E a memoria que torna o plano defensavel: o PDF nunca sai sem ela. As regras genericas de

acima ja reexibem conteudo de details fechado; aqui o bloco e declarado explicitamente para nao depender da ordem daquelas regras. */ .memoria-calculo, .memoria-calculo:not([open]) { display: block !important; border: 0; border-top: 1px solid var(--cor-borda); border-radius: 0; padding: var(--esp-3) 0 0; background-color: var(--cor-branco); } .memoria-calculo > summary { display: block !important; list-style: none; margin-bottom: var(--esp-2); font-size: 10.5pt; color: var(--cor-primaria); break-after: avoid; page-break-after: avoid; } .memoria-calculo > summary::-webkit-details-marker { display: none; } .memoria-calculo > *:not(summary) { display: revert !important; content-visibility: visible !important; } /* Linhas de soma compactas; cada soma sai inteira na mesma pagina. */ .memoria-lista { font-size: 8pt; } .memoria-lista li { break-inside: avoid; page-break-inside: avoid; } } /* ===================== Revisao de objetividade do PDF (Secao 03 enxuta) */ @media print { /* Cinto e suspensorio: nenhum controle de formulario jamais imprime. A leitura impressa vem do resumo tipografico, nunca de caixas de tela. */ form, input, select, textarea, button, .painel-editar, .acoes-formulario { display: none !important; } /* Especificidade reforcada: as regras genericas de

logo acima (details:not([open]) etc., 0-1-1) venceriam .painel-editar (0-1-0) e ressuscitariam o "Classificar este item" no papel. Estas ganham (0-2-1). */ details.painel-editar, details.painel-editar[open], details.painel-editar:not([open]), details.painel-editar > summary { display: none !important; } .apenas-impressao-visivel { display: block !important; } /* Resumo da classificacao: linhas compactas rotulo -> valor. */ .classificacao-item { border-top: 0.5pt solid var(--cor-borda); padding-top: 4pt; margin-top: 4pt; } .classificacao-linha { grid-template-columns: 34mm 1fr; gap: 1pt 4mm; } .classificacao-linha dt { font-size: 6.5pt; } .classificacao-linha dd { font-size: 8.5pt; line-height: 1.35; } /* Pontos de atencao densos: o cartao vira um bloco tipografico sem moldura, separado por filete; comentario em corpo menor, sem caixa. */ .cartao { padding: 0; margin: 0 0 6pt; border: 0; border-bottom: 0.5pt solid var(--cor-borda); padding-bottom: 6pt; } .cartao .nota, .cartao blockquote { background: none; border: 0; padding: 0 0 0 4mm; margin: 2pt 0; font-size: 8.5pt; font-style: italic; color: var(--cor-grafite); } /* Detalhamento (Secao 02) denso: itens como linhas, nao como blocos. */ .item-pergunta { padding: 3pt 0; margin: 0; border: 0; border-bottom: 0.5pt dotted var(--cor-borda); } .item-pergunta-texto { font-size: 9pt; line-height: 1.35; } .meta-pergunta, .meta-pergunta-item { font-size: 6.5pt; } /* Corpo geral um ponto menor: mais conteudo por folha sem perder leitura. */ body { font-size: 9.5pt; } } /* ============== Compatibilidade Safari/WebKit: fragmentacao em blocos ==== */ /* O WebKit nao fragmenta contêineres flex/grid entre folhas: uma .capa com height:100% engoliu 62 paginas em branco e pilhas flex sairam com quadros cortados. Regra de ouro desta secao: TUDO que pode exceder uma folha vira fluxo normal de blocos; flex/grid sobrevive apenas em linhas pequenas que comprovadamente cabem numa folha (e protegidas por break-inside: avoid). */ @media print { /* --- capa: sem altura percentual, composicao por espacamentos fixos --- */ .capa { display: block; height: auto; min-height: 0; text-align: center; padding: 24mm 0 0; } .capa-cabecalho { text-align: left; margin-bottom: 18mm; } .capa img { margin-inline: auto; } .capa > * + * { margin-top: 7mm; } /* O empurrao de rodape da capa era margin-top:auto (spacer de flex); em bloco vira um respiro fixo. */ .capa-pe { margin-top: 22mm; } /* --- pilhas verticais (flex-column na tela) viram blocos com ritmo --- */ .pilha, .pilha-apertada, .pilha-larga { display: block; } .pilha > * + * { margin-top: 8pt; } .pilha-apertada > * + * { margin-top: 4pt; } .pilha-larga > * + * { margin-top: 12pt; } /* --- grades de mais de uma folha em potencial: empilhar --- */ .grade-2, .grade-3, .grade-4 { display: block; } .grade-2 > *, .grade-3 > *, .grade-4 > * { margin-bottom: 6pt; } /* Excecao comprovadamente pequena (uma linha de 4 cards, indivisivel): os cards do plano permanecem lado a lado. Reafirmado apos o reset acima. */ .plano-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); break-inside: avoid; page-break-inside: avoid; } .plano-cards > * { margin-bottom: 0; } /* Cards de metrica do sumario (3 em linha, pequenos): inline-block fragmenta com seguranca e preserva o layout lado a lado. */ .grade-3 > .metrica { display: inline-block; width: 31%; vertical-align: top; margin-right: 2%; } /* --- resumo de classificacao: rotulo e valor na mesma linha corrida --- */ .classificacao-resumo { display: block; } .classificacao-linha { display: block; margin-bottom: 2pt; } .classificacao-linha dt { display: inline; margin-right: 4pt; } .classificacao-linha dd { display: inline; margin: 0; } /* --- blocos grandes nunca sao indivisiveis (o WebKit empurra e corta; as LINHAS internas ja sao protegidas individualmente) --- */ tbody.grupo-faixa, .memoria-calculo, .fila-area, .quadrante-bloco { break-inside: auto; page-break-inside: auto; } } /* Estrutura interna dos cards de metrica: valor, rotulo e horizonte sempre empilhados, mesmo com o card em inline-block (spans sao inline por padrao). */ @media print { .metrica-valor, .metrica-rotulo, .metrica-horizonte { display: block; } }