/* ========================================================================= relatorio.css — folha A4 e os 3 modos de saída ------------------------------------------------------------------------- Um único DOM. O modo (atributo data-modo no ) governa por CSS o que aparece, a ordem e o tamanho. Nenhum bloco é re-renderizado. ========================================================================= */ .relatorio { width: 210mm; min-height: 297mm; max-width: 100%; padding: 14mm 15mm; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda); box-shadow: var(--sombra); font-size: 10.5pt; line-height: 1.5; } /* ---------------- Cabeçalho ---------------- */ .rel-cabeca { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--esp-4); padding-bottom: var(--esp-3); border-bottom: 3px solid var(--acento); } .rel-logo { height: auto; width: auto; max-height: 16mm; max-width: 42mm; object-fit: contain; } .rel-cabeca-centro { text-align: center; } .rel-titulo { font-size: 15pt; font-weight: 800; margin: 0; line-height: 1.2; } .rel-subtitulo { font-size: 8.5pt; color: var(--tinta-fraca); margin: 2px 0 0; text-transform: uppercase; letter-spacing: .08em; } .rel-banner { width: 100%; height: auto; max-height: 26mm; object-fit: contain; /* banner institucional nunca é cortado */ object-position: center; display: block; margin-bottom: var(--esp-3); border-radius: var(--raio-p); } /* ---------------- Faixa de metadados ---------------- */ .rel-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borda); border: 1px solid var(--borda); margin: var(--esp-4) 0; } .rel-meta div { background: var(--superficie); padding: 6px 8px; } .rel-meta dt { font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); font-weight: 700; } .rel-meta dd { margin: 1px 0 0; font-size: 9.5pt; font-weight: 600; } /* ---------------- Blocos de seção ---------------- */ .rel-secao { margin: var(--esp-5) 0; break-inside: avoid; } .rel-secao > h3 { font-size: 10.5pt; text-transform: uppercase; letter-spacing: .07em; border-left: 5px solid var(--acento); padding: 3px 0 3px var(--esp-3); background: var(--superficie-2); margin-bottom: var(--esp-3); } .rel-texto { white-space: pre-wrap; text-align: justify; } .rel-vazio { color: var(--tinta-fraca); font-style: italic; } /* ---------------- Selo de criticidade ---------------- */ .rel-criticidade { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--raio-p); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 9pt; color: #FFFFFF; border: 2px solid transparent; } .rel-criticidade[data-nivel="baixa"] { background: var(--ok); } .rel-criticidade[data-nivel="media"] { background: var(--atencao); } .rel-criticidade[data-nivel="alta"] { background: var(--perigo); } .rel-criticidade[data-nivel="critica"] { background: var(--critico); } .rel-criticidade[data-nivel=""] { background: var(--superficie-2); color: var(--tinta-fraca); border-color: var(--borda); } /* ---------------- KPIs ---------------- */ .rel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--esp-3); } .kpi { border: 1px solid var(--borda); border-top: 4px solid var(--acento); border-radius: var(--raio-p); padding: var(--esp-3); text-align: center; background: var(--superficie); } .kpi-valor { font-size: 20pt; font-weight: 800; line-height: 1; color: var(--acento); } .kpi-unidade { font-size: 9pt; font-weight: 600; color: var(--tinta-fraca); } .kpi-rotulo { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); margin-top: 4px; } .kpi-meta { font-size: 7.5pt; color: var(--tinta-fraca); } /* ---------------- Tabelas do relatório ---------------- */ .rel-tabela { width: 100%; border-collapse: collapse; font-size: 9pt; } .rel-tabela th, .rel-tabela td { border: 1px solid var(--borda); padding: 5px 7px; text-align: left; vertical-align: top; } .rel-tabela th { background: var(--superficie-2); font-size: 7.5pt; text-transform: uppercase; letter-spacing: .05em; } .rel-tabela tr { break-inside: avoid; } /* ---------------- RACs no relatório ---------------- */ .rel-racs { display: flex; flex-wrap: wrap; gap: 6px; } .rel-rac { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 8.5pt; font-weight: 600; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie-2); } .rel-rac.ativo { background: var(--critico); color: #fff; border-color: var(--critico); } .rel-rac b { font-family: var(--fonte-mono); } /* ---------------- Fotos ---------------- */ .rel-fotos { display: grid; gap: var(--esp-3); align-items: start; } .rel-foto { border: 1px solid var(--borda); break-inside: avoid; background: var(--superficie); } /* Registro fotográfico é EVIDÊNCIA: cortar a imagem pode remover justamente o que se quer provar. Por isso 'contain' + altura natural em todos os modos. O max-height limita retratos (1200x1600) sem distorcer nem cortar. */ .rel-foto img { width: 100%; height: auto; object-fit: contain; object-position: center; background: var(--superficie-2); display: block; } .rel-foto figcaption { font-size: 8pt; padding: 5px 7px; color: var(--tinta-fraca); border-top: 1px solid var(--borda); } /* ---------------- Assinaturas ---------------- */ .rel-assinaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); margin-top: var(--esp-6); break-inside: avoid; } .rel-assinatura { text-align: center; font-size: 8.5pt; } .rel-assinatura .linha { border-top: 1px solid var(--tinta); margin-bottom: 4px; height: 42px; } .rel-assinatura small { display: block; color: var(--tinta-fraca); font-size: 7.5pt; } .rel-rodape { margin-top: var(--esp-5); padding-top: var(--esp-2); border-top: 1px solid var(--borda); font-size: 7.5pt; color: var(--tinta-fraca); display: flex; justify-content: space-between; gap: var(--esp-3); } /* ========================================================================= MODO EXECUTIVO — KPIs, resumo, impacto. Sem detalhe técnico. ========================================================================= */ [data-modo="executivo"] .so-operacional, [data-modo="executivo"] .so-administrativo { display: none; } [data-modo="executivo"] .rel-kpis { margin-bottom: var(--esp-5); } [data-modo="executivo"] .rel-fotos { grid-template-columns: repeat(3, 1fr); } [data-modo="executivo"] .rel-foto img { max-height: 48mm; } [data-modo="executivo"] .rel-secao-resumo { background: var(--superficie-2); border-left: 6px solid var(--acento); padding: var(--esp-4); font-size: 11pt; } /* ========================================================================= MODO OPERACIONAL — passo a passo, fotos grandes, detalhe técnico. ========================================================================= */ [data-modo="operacional"] .so-executivo, [data-modo="operacional"] .so-administrativo { display: none; } [data-modo="operacional"] .rel-fotos { grid-template-columns: repeat(2, 1fr); } [data-modo="operacional"] .rel-foto img { max-height: 95mm; } [data-modo="operacional"] .rel-kpis { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } [data-modo="operacional"] .kpi-valor { font-size: 14pt; } /* ========================================================================= MODO ADMINISTRATIVO — conformidade, assinaturas, metadados. ========================================================================= */ [data-modo="administrativo"] .so-executivo, [data-modo="administrativo"] .so-operacional { display: none; } [data-modo="administrativo"] .relatorio { font-size: 9.5pt; } [data-modo="administrativo"] .rel-fotos { grid-template-columns: repeat(4, 1fr); } [data-modo="administrativo"] .rel-foto img { max-height: 30mm; } [data-modo="administrativo"] .rel-kpis { display: none; } [data-modo="administrativo"] .rel-meta { grid-template-columns: repeat(2, 1fr); } [data-modo="administrativo"] .rel-secao > h3 { background: transparent; border-left-width: 3px; } /* Bloco de metadados de conformidade — só no administrativo */ .rel-conformidade { font-family: var(--fonte-mono); font-size: 8pt; } .rel-conformidade div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--borda); padding: 3px 0; } /* ---------------- Ajuste de tela pequena ---------------- */ @media (max-width: 860px) { .relatorio { width: 100%; padding: var(--esp-4); } .rel-meta { grid-template-columns: repeat(2, 1fr); } .rel-assinaturas { grid-template-columns: 1fr; } }