/* Editor do Relatório ILT — folhas A4 com o timbrado da Licarião */

/* ---------- Tela do editor (no visual do site) ---------- */
.rel-barra-superior {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.rel-barra-superior .voltar { margin-bottom: 0; }
.rel-barra-titulo { flex: 1; min-width: 260px; }
.rel-barra-titulo h1 { font-size: 22px; margin: 0; }
.rel-status { font-size: 13px; color: var(--texto-3); }
.rel-status.erro { color: var(--nao); }

/* Aviso: o questionário mudou depois do rascunho */
.rel-aviso-mudou {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 20px;
  padding: 12px 16px;
  font-size: 14px;
  color: #f7c46c;
  background: rgba(245, 165, 36, 0.1);
  border: 1px solid rgba(245, 165, 36, 0.4);
  border-radius: 10px;
}
.rel-aviso-mudou > span:first-child { font-weight: 600; }
.rel-aviso-mudou-detalhe { color: var(--texto-2); }
.rel-aviso-mudou-acoes { display: flex; gap: 10px; margin-left: auto; }
.rel-aviso-mudou-acoes .botao { padding: 8px 16px; font-size: 14px; }
.rel-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
}
.rel-zoom button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}
.rel-zoom button:hover { background: var(--destaque-fundo); }
.rel-zoom span { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.rel-corpo {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.rel-lateral {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 16px;
  background: rgba(10, 21, 53, 0.55);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.rel-lateral-titulo {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--destaque-claro);
}
.rel-lateral-link {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--texto-2);
}
.rel-lateral-link:hover { background: var(--destaque-fundo); color: var(--texto); }
.rel-lateral-itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 4px;
  margin: 4px 0 8px 8px;
}
.rel-lateral-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: none;
  font-size: 11px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.rel-lateral-item { flex-direction: column; align-items: flex-start; gap: 0; }
.rel-lateral-pontos { font-size: 9px; letter-spacing: 1px; color: var(--destaque-claro); line-height: 1.2; }
.rel-lateral-item.rel-falta-print { border-color: rgba(245, 165, 36, 0.5); }
.rel-lateral-item.rel-falta-print .rel-lateral-pontos { color: var(--evolucao); }
.rel-lateral-item:hover { border-color: var(--destaque-claro); color: var(--texto); }
.rel-lateral-contador { margin: 8px 8px 0; font-size: 12px; font-weight: 600; color: var(--texto); }

.rel-historico {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
}
.rel-historico button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 17px;
  line-height: 1;
}
.rel-historico button:hover:not(:disabled) { background: var(--destaque-fundo); }
.rel-historico button:disabled { opacity: 0.35; cursor: default; }

/* Barra de formatação (flutua sobre o texto em edição) */
.rel-barra-formatacao {
  position: fixed;
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--superficie-solida);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
}
.rel-barra-formatacao button {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
}
.rel-barra-formatacao button:hover { background: var(--destaque-fundo); }
.rel-barra-formatacao [hidden] { display: none; }

/* Aviso "Para mudar este dado, edite o questionário" */
.rel-dica-editor {
  position: fixed;
  z-index: 60;
  max-width: 300px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--texto);
  background: var(--superficie-solida);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.rel-icone-aviso { color: var(--evolucao); background: rgba(245, 165, 36, 0.14); border-color: rgba(245, 165, 36, 0.45); }

.rel-botao-previa { padding: 8px 16px; font-size: 14px; }
.rel-botao-previa[aria-pressed="true"] { border-color: var(--destaque-claro); background: var(--destaque-fundo); }

/* Janela "Ajustar print" */
.modal-largo { max-width: 680px; }
.rel-ajuste-moldura {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}
.rel-ajuste-moldura.arrastando { cursor: grabbing; }
.rel-ajuste-moldura.modo-pincel { cursor: crosshair; }
.rel-ajuste-moldura.modo-cortar { cursor: crosshair; }
/* Mesmo encaixe do print na folha (contain + translate/scale sobre a moldura inteira) */
.rel-ajuste-conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  pointer-events: none;
}
.rel-ajuste-conteudo canvas { display: block; user-select: none; }
.rel-ajuste-conteudo canvas.largo { width: 100%; height: auto; }
.rel-ajuste-conteudo canvas.alto { width: auto; height: 100%; }
/* Área escolhida no corte: o resto da imagem fica escurecido */
.rel-ajuste-selecao {
  position: absolute;
  border: 2px dashed #fff;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 9999px rgba(6, 13, 36, 0.55);
  pointer-events: none;
}
.rel-ajuste-selecao[hidden] { display: none; }

.rel-ajuste-modos {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
}
.rel-ajuste-modos button {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font-size: 14px;
}
.rel-ajuste-modos button:hover { background: var(--destaque-fundo); }
.rel-ajuste-modos button[aria-pressed="true"] { background: var(--destaque); color: #fff; }

.rel-ajuste-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.rel-ajuste-barra[hidden] { display: none; }
.rel-ajuste-barra .botao { padding: 8px 14px; font-size: 14px; }
.rel-ajuste-barra .botao:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.rel-ajuste-cores { display: flex; gap: 8px; margin-right: auto; }
.rel-ajuste-cor {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--borda-forte);
  border-radius: 50%;
}
.rel-ajuste-cor[data-cor="vermelho"] { background: #E53935; }
.rel-ajuste-cor[data-cor="verde"] { background: #2E9E4F; }
.rel-ajuste-cor[data-cor="amarelo"] { background: #FFC107; }
.rel-ajuste-cor[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--destaque); }

.rel-ajuste-zoom { display: flex; align-items: center; gap: 12px; width: 100%; font-size: 14px; color: var(--texto-2); }
.rel-ajuste-zoom[hidden] { display: none; }
.rel-ajuste-zoom input { flex: 1; accent-color: var(--destaque); }
.rel-ajuste-zoom output { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--texto); }

/* Área do documento: fundo cinza claro, como num editor de textos */
.rel-documento {
  min-width: 0;
  overflow-x: auto;
  padding: 32px 24px;
  background: #d9dde3;
  border-radius: var(--raio);
}
.rel-paginas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: max-content;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .rel-corpo { grid-template-columns: 1fr; }
  .rel-lateral { display: none; }
}

/* ---------- Final do documento: botão do PDF (não vai para o PDF) ---------- */
.rel-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 0 12px;
}
.rel-botao-pdf {
  padding: 16px 36px;
  border: 0;
  border-radius: 12px;
  font: 700 17px/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #fff;
  background: #008EB4;
  box-shadow: 0 12px 28px -12px rgba(0, 142, 180, 0.9);
  transition: background 0.2s, transform 0.2s;
}
.rel-botao-pdf:hover:not(:disabled) { background: #007a9b; transform: translateY(-1px); }
.rel-botao-pdf:disabled { opacity: 0.75; cursor: progress; }
.rel-final-dica { margin: 0; font-size: 13px; color: #4a5560; }

/* Conferência antes de baixar */
.rel-conferencia {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
}
.rel-conferencia-secao h3 { margin: 0 0 4px; font-size: 15px; }
.rel-conferencia-secao p { margin: 0 0 8px; font-size: 13px; color: var(--texto-2); }
.rel-conferencia-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-conferencia-item {
  padding: 4px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rel-conferencia-item:hover { border-color: var(--destaque-claro); background: var(--destaque-fundo); }

/* Destaque ao chegar numa ficha pela conferência */
@keyframes rel-piscar { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 142, 180, 0); } 30% { box-shadow: 0 0 0 3px rgba(0, 142, 180, 0.8); } }
.rel-destaque { animation: rel-piscar 1.6s ease 2; }

/* ---------- Folha A4 ---------- */
.rel-pagina {
  position: relative;
  flex: none;
  width: 210mm;
  height: 297mm;
  background-color: #fff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.16);
  /* Só desenha as folhas visíveis na tela: o relatório tem 25–30 folhas com o timbrado */
  content-visibility: auto;
  contain-intrinsic-size: 210mm 297mm;
  color: #1A1A1A;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.42;
  text-align: left;
}
/* Área útil: topo 42,5 mm, base 25 mm, esquerda 30 mm; tabelas e fichas vão até 165 mm */
.rel-area {
  position: absolute;
  top: 42.5mm;
  left: 30mm;
  width: 165mm;
  height: 229.5mm;
  overflow: hidden;
}
/* Bloco maior que a folha: aviso só no editor (não vai para o PDF) */
.rel-area.rel-estouro { outline: 2px dashed #A83232; outline-offset: 2px; }
.rel-area.rel-estouro::after {
  content: 'Este bloco não cabe numa folha';
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1mm 2mm;
  font-size: 8pt;
  color: #fff;
  background: #A83232;
}

.rel-numero {
  position: absolute;
  left: 173mm;
  top: 274.3mm;
  width: 12.4mm;
  text-align: center;
  font-size: 9pt;
  color: #1A1A1A;
}

.rel-pagina p { margin: 0; }
.rel-pagina .rel-bom { color: #2E7D4F; }
.rel-pagina .rel-medio { color: #B8860B; }
.rel-pagina .rel-ruim { color: #A83232; }
.rel-centro { text-align: center !important; }
.rel-negrito { font-weight: 700; }

/* Títulos e texto corrido (150 mm de largura, como no modelo) */
.rel-h1 {
  width: 150mm;
  margin: 0 0 8pt;
  padding: 17pt 0 3pt;
  border-bottom: 1pt solid #008EB4;
  font-size: 13pt;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0;
}
.rel-h1-numero { color: #008EB4; }
.rel-h2 {
  width: 150mm;
  margin: 0;
  padding: 11pt 0 6pt;
  font-size: 10.5pt;
  font-weight: 700;
  color: #008EB4;
}
.rel-area > :first-child.rel-h1, .rel-area > :first-child.rel-h2 { padding-top: 0; }
.rel-p {
  width: 150mm;
  margin-bottom: 7.5pt !important;
  text-align: justify;
}
.rel-topico {
  padding-left: 7.4mm;
  text-indent: -4.6mm;
  margin-bottom: 4.5pt !important;
  line-height: 1.35;
}
.rel-topico::before { content: '—\00a0\00a0'; }

/* Textos livres (Introdução e Considerações Finais) */
.rel-texto-livre { width: 150mm; }
.rel-texto-livre p, .rel-texto-livre li { margin: 0 0 7.5pt !important; text-align: justify; }
.rel-texto-livre ul, .rel-texto-livre ol { margin: 0 0 7.5pt; padding-left: 7mm; }

/* ---------- Edição ---------- */
.rel-editavel { position: relative; border-radius: 1mm; outline: 1px dashed transparent; outline-offset: 1mm; transition: outline-color 0.15s, background 0.15s; }
.rel-editavel:hover { outline-color: rgba(0, 142, 180, 0.45); }
.rel-editavel:focus { outline: 1.5px solid #008EB4; background: rgba(0, 142, 180, 0.04); }
.rel-plano-texto.rel-vazio::after { content: 'Digite aqui…'; color: #9aa4ae; }
.rel-plano-bloco { position: relative; }
span.rel-editavel { outline-offset: 0.5mm; }
.rel-bloqueado { cursor: default; }

/* Ferramentas do Plano de Ação: ficam na margem, sem ocupar altura na folha */
.rel-plano-bloco .rel-plano-ferramentas {
  position: absolute;
  top: 0;
  left: 151mm;
  display: flex;
  gap: 0.8mm;
  text-indent: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.rel-plano-bloco:hover .rel-plano-ferramentas, .rel-plano-bloco:focus-within .rel-plano-ferramentas { opacity: 1; }
.rel-plano-ferramentas button, .rel-plano-barra button {
  border: 0;
  border-radius: 1mm;
  font: 600 7.5pt/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #fff;
  background: rgba(20, 30, 50, 0.82);
  cursor: pointer;
}
.rel-plano-ferramentas button { width: 5.5mm; height: 5.5mm; padding: 0; }
.rel-plano-ferramentas button:hover, .rel-plano-barra button:hover { background: #008EB4; }
.rel-h1 { position: relative; }
.rel-plano-barra {
  position: absolute;
  right: 0;
  bottom: 2.5pt;
  display: flex;
  align-items: center;
  gap: 1mm;
  font-weight: 400;
}
.rel-plano-barra button { padding: 1mm 2mm; }
.rel-plano-alerta:not(:empty) {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 1mm;
  padding: 0.8mm 2mm;
  border-radius: 1mm;
  white-space: nowrap;
  font: 600 7.5pt/1.3 'Inter', 'Segoe UI', sans-serif;
  color: #fff;
  background: #A83232;
}
.rel-disclaimer { font-style: italic; font-size: 9pt; }

/* Capa */
.rel-capa { padding-top: 4.8mm; margin-bottom: 3mm; text-align: center; }
.rel-capa-titulo { font-size: 15pt; font-weight: 700; line-height: 1.25; margin-bottom: 1.5mm !important; }
.rel-capa-subtitulo { font-size: 11pt; font-weight: 700; color: #008EB4; margin-bottom: 3.5mm !important; }
.rel-capa-quadro {
  padding: 2.8mm 3.5mm;
  border: 1px solid #D8DCDE;
  border-top: 1.5pt solid #008EB4;
  text-align: left;
  font-size: 9.5pt;
}
.rel-capa-quadro p { margin-bottom: 0.7mm !important; }
.rel-rotulo { font-weight: 700; color: #5B6570; }
.rel-capa-orgao { font-weight: 700; }

.rel-sumario { width: 150mm; margin-bottom: 3mm; line-height: 1.22; }
.rel-sumario p { margin-bottom: 3.5pt !important; }

/* Indicadores do Diagnóstico */
.rel-indicadores {
  display: flex;
  justify-content: center;
  gap: 16mm;
  width: 150mm;
  padding: 4mm 0 7mm;
}
.rel-indicador {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 55mm;
  padding: 2.5mm 2mm;
  border: 1px solid #D8DCDE;
  border-top: 1.25pt solid currentColor;
  text-align: center;
}
.rel-indicador-rotulo { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.04em; color: #5B6570; }
.rel-indicador-valor { font-size: 18pt; font-weight: 700; line-height: 1.25; }
.rel-indicador-sub { font-size: 7.5pt; color: #5B6570; }

/* Tabelas */
.rel-tabela {
  width: 165mm;
  margin-bottom: 4mm;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9pt;
  line-height: 1.3;
}
.rel-tabela th, .rel-tabela td {
  padding: 1.2mm 1.8mm;
  border: 1px solid #D8DCDE;
  vertical-align: middle;
  text-align: left;
}
.rel-tabela th { font-weight: 700; color: #fff; }
.rel-tabela tbody tr:nth-child(even) td { background: #F2F5F6; }
.rel-tabela-dimensoes th { background: #1A1A1A; border-color: #1A1A1A; }
.rel-tabela-dimensoes th:nth-child(1) { width: 62%; }
.rel-tabela-dimensoes th:nth-child(2) { width: 12.8%; }
.rel-tabela-dimensoes td:first-child { font-size: 8.5pt; }
.rel-tabela-nc th { background: #A83232; border-color: #A83232; }
.rel-tabela-nc th:nth-child(1) { width: 7%; }
.rel-tabela-nc th:nth-child(2) { width: 46%; }
.rel-tabela-nc th:nth-child(3) { width: 7.5%; }
.rel-pequeno { font-size: 7.5pt; }

/* Ficha de critério */
.rel-ficha {
  width: 165mm;
  margin-bottom: 5mm;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 8.5pt;
  line-height: 1.35;
}
.rel-ficha td { border: 1px solid #D8DCDE; vertical-align: top; }
.rel-ficha-topo td { padding: 1.4mm 2.1mm; background: #F2F5F6; font-size: 9.5pt; }
.rel-ficha-topo td:first-child { width: 55%; }
.rel-ficha-numero { font-weight: 700; color: #008EB4; }
.rel-ficha-pct { font-weight: 700; text-align: center; }
.rel-ficha-detalhes { padding: 1.8mm 2.1mm; }
.rel-ficha-detalhes p { margin-bottom: 1mm !important; }
.rel-ficha-links { overflow-wrap: anywhere; }
.rel-link { font-style: italic; font-size: 6.5pt; color: #5B6570; text-decoration: none; }
a.rel-link:hover { text-decoration: underline; }
.rel-obs { font-style: italic; font-size: 8pt; color: #A83232; }
.rel-sim { font-weight: 700; color: #2E7D4F; }
.rel-nao { font-weight: 700; color: #A83232; }
.rel-vazio { font-weight: 700; color: #5B6570; }
.rel-ficha-prints { padding: 1.8mm; }

/* ---------- Prints ---------- */
.rel-prints { position: relative; display: flex; flex-direction: column; gap: 3mm; }

/* Moldura padrão, igual para todos: 16:9 na largura da coluna, imagem inteira (contain) */
.rel-print {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
  border: 1px solid #D8DCDE;
}
.rel-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

/* Controles aparecem ao passar o mouse (ou com o foco do teclado) */
.rel-print-controles {
  position: absolute;
  inset: auto 1mm 1mm 1mm;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1mm;
  opacity: 0;
  transition: opacity 0.15s;
}
.rel-print:hover .rel-print-controles, .rel-print:focus-within .rel-print-controles { opacity: 1; }
.rel-print-botao {
  padding: 0.8mm 2mm;
  border: 0;
  border-radius: 1mm;
  font: 600 7.5pt/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #fff;
  background: rgba(20, 30, 50, 0.82);
  cursor: pointer;
}
.rel-print-botao:hover { background: #008EB4; }
.rel-print-limite {
  position: absolute;
  top: 1mm;
  left: 1mm;
  padding: 0.5mm 1.5mm;
  border-radius: 1mm;
  font: 600 7pt/1.2 'Inter', 'Segoe UI', sans-serif;
  color: #5B6570;
  background: rgba(255, 255, 255, 0.9);
}

/* Quadro vazio: botão "Enviar print" e arrastar e soltar */
.rel-quadro-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;
  aspect-ratio: 16 / 9;
  border: 1px dashed #b8c0c8;
  border-radius: 1.5mm;
  background: #fafbfc;
  color: #8a949e;
}
.rel-quadro-vazio svg { width: 8mm; height: 8mm; }
.rel-enviar-print, .rel-adicionar-print {
  border: 0;
  font: 600 8pt/1.2 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
}
.rel-enviar-print {
  padding: 1.5mm 4mm;
  border-radius: 999px;
  color: #fff;
  background: #008EB4;
}
.rel-enviar-print:hover { background: #007a9b; }
.rel-quadro-dica { font-size: 7pt; }
.rel-adicionar-print {
  padding: 1.5mm;
  border: 1px dashed #b8c0c8;
  border-radius: 1.5mm;
  color: #008EB4;
  background: #fafbfc;
}
.rel-adicionar-print:hover { background: #eef7fa; border-color: #008EB4; }
.rel-soltar { outline: 2px solid #008EB4; outline-offset: 1px; background: #eef7fa; }
/* Quadro selecionado (clicado): pronto para colar com Ctrl+V */
@media screen {
  .rel-quadro-vazio:focus, .rel-print:focus { outline: 2px solid #008EB4; outline-offset: 1px; }
  .rel-quadro-vazio:focus { background: #eef7fa; }
}
.rel-print-erro {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  padding: 1.5mm 2mm;
  border-radius: 1mm;
  font: 600 7.5pt/1.3 'Inter', 'Segoe UI', sans-serif;
  color: #fff;
  background: #A83232;
}

/* Pré-visualização (e, na etapa 9, o PDF): esconde o que é só do editor sem mudar as quebras de folha */
.rel-previa .rel-so-editor { visibility: hidden; }
.rel-previa .rel-editavel { outline: none !important; background: none !important; }
.rel-previa .rel-plano-texto.rel-vazio::after { content: none; }
.rel-previa .rel-area.rel-estouro { outline: none; }
.rel-previa .rel-area.rel-estouro::after { display: none; }

/* Considerações finais: assinatura */
.rel-assinatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150mm;
  padding-top: 12mm;
  text-align: center;
}
.rel-assinatura img { width: 45mm; height: auto; }
.rel-assinatura-linha { width: 115mm; margin: 1mm 0 2.5mm; border-top: 0.75pt solid #1A1A1A; }
.rel-assinatura strong { font-size: 11pt; }
.rel-assinatura span:not(.rel-assinatura-linha) { font-size: 9pt; color: #5B6570; }

/* Área do cliente: cartão "Baixar relatório em PDF" */
.cliente-relatorio { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cliente-relatorio .grafico-sub { margin-bottom: 8px; }
.cliente-relatorio .rel-botao-pdf[hidden] { display: none; }
.cliente-relatorio-dica { margin: 0; font-size: 13px; color: var(--texto-3); }

/* Área do cliente: folhas montadas fora da tela só para gerar o PDF */
html.rel-montando-cliente:not(.rel-imprimindo) #etapa-relatorio {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1200px;
  visibility: hidden;
  pointer-events: none;
}
/* Ao baixar o PDF direto, as folhas continuam fora da tela, mas visíveis para serem fotografadas */
html.rel-montando-cliente.rel-exportando #etapa-relatorio { visibility: visible; }

/* ---------- Impressão / PDF ---------- */
/* Folha A4 sem margens só para o relatório (o resto do site imprime normalmente) */
@page relatorio { size: A4; margin: 0; }

/* Enquanto o relatório é impresso: só as folhas, sem nada do editor */
html.rel-imprimindo, html.rel-imprimindo body { background: #fff !important; }
html.rel-imprimindo body::before { display: none; }
html.rel-imprimindo .topo,
html.rel-imprimindo .rodape,
html.rel-imprimindo .etapa:not(#etapa-relatorio),
html.rel-imprimindo .rel-barra-superior,
html.rel-imprimindo .rel-aviso-mudou,
html.rel-imprimindo .rel-lateral,
html.rel-imprimindo .rel-final,
html.rel-imprimindo .rel-barra-formatacao,
html.rel-imprimindo .rel-dica-editor,
html.rel-imprimindo .dica,
html.rel-imprimindo dialog { display: none !important; }
html.rel-imprimindo .conteudo { max-width: none; margin: 0; padding: 0; }
html.rel-imprimindo .etapa { animation: none !important; }
html.rel-imprimindo .rel-corpo { display: block; }
html.rel-imprimindo .rel-documento { padding: 0; background: none; border-radius: 0; overflow: visible; }
html.rel-imprimindo .rel-paginas { display: block; width: auto; zoom: 1 !important; }
html.rel-imprimindo .rel-pagina { box-shadow: none; content-visibility: visible; margin: 0; }
/* As regras abaixo valem também para o PDF baixado direto (html.rel-exportando, em js/relatorio.js):
   cada folha é fotografada como está na tela, então precisa ficar igual à impressa */
html.rel-exportando .rel-pagina { box-shadow: none; content-visibility: visible; }
html.rel-imprimindo .rel-so-editor,
html.rel-exportando .rel-so-editor { visibility: hidden !important; }
html.rel-imprimindo .rel-editavel,
html.rel-exportando .rel-editavel { outline: none !important; background: none !important; }
html.rel-imprimindo .rel-plano-texto.rel-vazio::after,
html.rel-exportando .rel-plano-texto.rel-vazio::after { content: none; }
html.rel-imprimindo .rel-area.rel-estouro,
html.rel-exportando .rel-area.rel-estouro { outline: none; }
html.rel-imprimindo .rel-area.rel-estouro::after,
html.rel-exportando .rel-area.rel-estouro::after { display: none; }
html.rel-imprimindo .rel-destaque,
html.rel-exportando .rel-destaque { animation: none; }
html.rel-imprimindo .rel-pagina * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media print {
  html.rel-imprimindo .rel-pagina {
    page: relatorio;
    /* 0,5 mm abaixo da A4: arredondamentos do navegador não empurram a folha para uma página extra */
    height: 296.5mm;
    break-inside: avoid;
    break-after: page;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html.rel-imprimindo .rel-pagina:last-child { break-after: auto; }
}