/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/relatorios.css — #/relatorios e #/relatorios/:codigo (js/telas/relatorios.js)
 * Documento A4 sempre claro: use só os tokens --doc-* (design-system.md, seção 14).
 * Regras básicas de impressão já estão em layout.css (@page A4, esconder a moldura); completadas aqui.
 * Classes próprias: .relatorios- (lista), .relatorio- (prévia) e .doc- (documento).
 */

/* =========================================================================
   LISTA — tabela (desktop/notebook) e lista tocável (celular/tablet)
   ========================================================================= */
.relatorios-tabela .relatorios-col-codigo { width: 132px; }
.relatorios-tabela .relatorios-col-tipo { width: 120px; }
.relatorios-tabela .relatorios-col-func { width: 0; }
.relatorios-tabela .relatorios-col-data { width: 104px; }
.relatorios-tabela .relatorios-col-resultado { width: 156px; }
.relatorios-tabela .relatorios-col-doc { width: 176px; }
.relatorios-tabela .relatorios-col-acoes { width: 112px; }
/* Abaixo de 1440 a coluna Funcionário some (largura 0); o nome continua na busca e no filtro. */
.relatorios-tabela .relatorios-td-func { padding: 0; visibility: hidden; }

@media (min-width: 1440px) {
  .relatorios-tabela .relatorios-col-func { width: 148px; }
  .relatorios-tabela .relatorios-col-doc { width: 196px; }
  .relatorios-tabela .relatorios-td-func { padding: 0 10px; visibility: visible; }
}

.relatorios-tipo { display: inline-flex; align-items: center; gap: var(--esp-2); max-width: 100%; min-width: 0; vertical-align: middle; }
.relatorios-tipo > .icone { flex: none; color: var(--cor-texto-2); }
.relatorios-tipo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.relatorios-dupla { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.relatorios-dupla__sec { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }

.relatorios-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
.relatorios-linha-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.relatorios-resultado .linha__lado { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .relatorios-linha-data { display: none; } }

/* Ordenação no toque (a tabela tem os cabeçalhos clicáveis) */
.relatorios-ordem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  min-height: var(--alvo-minimo); padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-4);
  border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.relatorios-ordem__texto { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto); }
.relatorios-ordem__texto .icone { flex: none; color: var(--cor-destaque); stroke-width: var(--traco-icone-status); }
.relatorios-ordem__texto strong { font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relatorios-ordem .btn { flex: none; }

/* =========================================================================
   PRÉVIA — página, ferramentas e painel lateral
   ========================================================================= */
.relatorio-titulo { display: flex; align-items: center; gap: var(--esp-3); }
.relatorio-titulo > .icone { flex: none; width: 24px; height: 24px; color: var(--cor-texto-2); }
.relatorio-titulo > span { min-width: 0; }

.relatorio-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
@media (min-width: 1200px) {
  .relatorio-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .relatorio-lateral { position: sticky; top: calc(var(--altura-barra-superior) + var(--esp-4)); }
}
.relatorio-principal { display: flex; flex-direction: column; min-width: 0; }
.relatorio-lateral { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }

.relatorio-ferramentas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4);
  background: var(--cor-superficie-1); border: var(--borda-largura) solid var(--cor-borda-sutil); border-bottom: 0;
  border-radius: var(--raio-3) var(--raio-3) 0 0;
}
.relatorio-ferramentas__info { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.relatorio-ferramentas__info .icone { flex: none; }
.relatorio-ferramentas__info strong { font-weight: var(--peso-forte); color: var(--cor-texto); }
.relatorio-escala { display: inline-flex; gap: var(--esp-1); }
.relatorio-escala .btn[aria-pressed="true"] { background: var(--cor-destaque-fundo); color: var(--cor-texto); }

/* Área da prévia: "mesa" em superfície 3 para o papel claro se destacar sem sombra. */
.relatorio-previa {
  padding: var(--esp-6); overflow: hidden;
  background: var(--cor-superficie-3); border: var(--borda-largura) solid var(--cor-borda-sutil); border-radius: 0 0 var(--raio-3) var(--raio-3);
}
.relatorio-previa--real { overflow-x: auto; }
.relatorio-previa .doc { margin: 0 auto; }

.relatorio-simulacao { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-processo-texto); }
.relatorio-simulacao .icone { flex: none; margin-top: 1px; }

@media (max-width: 1023px) {
  .relatorio-ferramentas__info { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .relatorio-previa { padding: var(--esp-4); }
  .relatorio-simulacao { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
}
@media (max-width: 767px) {
  .relatorio-escala .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .relatorio-previa { padding: var(--esp-2); }
}

/* =========================================================================
   DOCUMENTO A4 — folhas de 210 × 297 mm, sempre claras (só --doc-*)
   ========================================================================= */
.doc { display: flex; flex-direction: column; align-items: center; gap: var(--esp-6); width: 210mm; }
.doc--medicao { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }

.doc-folha {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; flex: none;
  width: 210mm; height: 297mm; padding: 14mm 15mm 9mm; overflow: hidden;
  background: var(--doc-papel); color: var(--doc-texto);
  font-family: var(--fonte-texto); font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo);
  font-weight: var(--peso-normal); font-variant-numeric: tabular-nums; text-align: left;
}
.doc-folha .icone, .doc-folha svg { display: inline-block; vertical-align: middle; }
.doc-folha__corpo { grid-row: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Linhas fixas da grade: a folha 1 não tem cabeçalho corrido, mas o corpo continua na linha flexível. */
.doc-folha__cab { grid-row: 1; }
.doc-folha__rodape { grid-row: 3; }

/* Cabeçalho corrido (folhas 2+) */
.doc-folha__cab {
  display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-4); padding-bottom: var(--esp-2);
  border-bottom: var(--borda-largura) solid var(--doc-regra);
  font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2);
}
.doc-folha__cab-titulo { font-weight: var(--peso-forte); color: var(--doc-texto); }
.doc-folha__cab-codigo { margin-left: var(--esp-1); font-family: var(--fonte-mono); font-weight: var(--peso-medio); }
.doc-folha__cab-cliente { margin-left: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rodapé de cada folha */
.doc-folha__rodape {
  display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-3); padding-top: var(--esp-2);
  border-top: var(--borda-largura) solid var(--doc-regra);
  font-size: var(--fs-doc-rodape); line-height: var(--lh-doc-rodape); color: var(--doc-texto-3);
}
.doc-folha__rodape > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-folha__demo { margin-left: auto; padding: 0 var(--esp-1); border: var(--borda-largura) dashed var(--doc-texto-3); border-radius: var(--raio-1); white-space: nowrap; }
.doc-folha__pagina { flex: none; font-weight: var(--peso-forte); color: var(--doc-texto-2); }

/* Peças: o espaçamento fica DENTRO da peça (padding) para a medição ser exata. */
.doc-peca { padding-top: var(--esp-3); min-width: 0; }
.doc-peca--secao { padding-top: var(--esp-6); }
.doc-peca--subsecao { padding-top: var(--esp-4); }
.doc-peca--tabela { padding-top: var(--esp-2); }
.doc-peca--fotos { padding-top: var(--esp-3); }
.doc-peca--nc { padding-top: var(--esp-2); }
.doc-peca--nota { padding-top: var(--esp-5); }
.doc-folha__corpo > .doc-peca:first-child { padding-top: 0; }
.doc-medicao__inicio { height: 0; }

/* Tipografia do documento */
.doc-rotulo { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); font-weight: var(--peso-forte); letter-spacing: 0.02em; text-transform: uppercase; color: var(--doc-texto-3); }
.doc-titulo { font-family: var(--fonte-titulo); font-size: var(--fs-doc-titulo); line-height: var(--lh-doc-titulo); font-weight: var(--peso-forte); letter-spacing: -0.01em; color: var(--doc-texto); }
.doc-subtitulo { margin-top: var(--esp-1); font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); color: var(--doc-texto-2); }
.doc-secao {
  padding-bottom: var(--esp-1); border-bottom: var(--borda-marcador) solid var(--doc-regra-forte);
  font-size: var(--fs-doc-secao); line-height: var(--lh-doc-secao); font-weight: var(--peso-forte); letter-spacing: 0.02em; text-transform: uppercase; color: var(--doc-texto);
}
.doc-secao__contagem { font-weight: var(--peso-normal); letter-spacing: 0; text-transform: none; color: var(--doc-texto-2); }
.doc-subsecao { display: flex; align-items: baseline; gap: var(--esp-1); font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); font-weight: var(--peso-forte); color: var(--doc-texto); }
.doc-subsecao__num { font-variant-numeric: tabular-nums; color: var(--doc-texto-2); }
.doc-paragrafo { font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); color: var(--doc-texto); white-space: pre-line; }
.doc-paragrafo--sec { color: var(--doc-texto-2); }
.doc-lista { margin: 2px 0 0; padding-left: 18px; list-style: disc; }
.doc-lista li { font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); }
.doc-vazio { color: var(--doc-texto-3); }
.doc-nota { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2); }

/* Capa (início da folha 1) */
.doc-capa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-6); padding-bottom: var(--esp-4); border-bottom: var(--borda-largura) solid var(--doc-regra); }
.doc-capa__marca { display: flex; flex-direction: column; gap: var(--esp-1); }
.doc-capa__marca .marca__logotipo { display: block; }
.doc-capa__empresa { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2); }
.doc-capa__id { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.doc-capa__codigo { font-family: var(--fonte-mono); font-size: var(--fs-doc-codigo); line-height: var(--lh-doc-codigo); font-weight: var(--peso-forte); font-variant-numeric: normal; color: var(--doc-texto); }
.doc-capa__versao { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2); }
.doc-capa__titulo { padding-top: var(--esp-5); }

/* Resultado + faixa de contagem */
.doc-resultado { border: var(--borda-largura) solid var(--doc-regra); border-left: var(--borda-marcador) solid var(--doc-sucesso); border-radius: var(--raio-1); }
.doc-resultado--pendencias { border-left-color: var(--doc-perigo); }
.doc-resultado__principal { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-3) var(--esp-4); }
.doc-resultado__valor { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-doc-secao); line-height: var(--lh-doc-secao); font-weight: var(--peso-forte); color: var(--doc-sucesso); }
.doc-resultado--pendencias .doc-resultado__valor { color: var(--doc-perigo); }
.doc-resultado__valor .icone { flex: none; stroke-width: var(--traco-icone-status); }
.doc-contagens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--doc-cabecalho); border-top: var(--borda-largura) solid var(--doc-regra); }
.doc-contagens > div { padding: var(--esp-2) var(--esp-3); }
.doc-contagens > div + div { border-left: var(--borda-largura) solid var(--doc-regra); }
.doc-contagens dt { font-size: var(--fs-doc-rodape); line-height: var(--lh-doc-rodape); color: var(--doc-texto-2); }
.doc-contagens dd { margin: 0; font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); font-weight: var(--peso-forte); color: var(--doc-texto); }
.doc-contagens .doc-contagens__nc { color: var(--doc-perigo); }

/* Dados (identificação e encerramento) */
.doc-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-6); padding-top: var(--esp-1); }
.doc-dados--uma { grid-template-columns: minmax(0, 1fr); }
.doc-dados__item { display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--esp-2); border-bottom: var(--borda-largura) solid var(--doc-regra); }
.doc-dados__item--largo { grid-column: 1 / -1; }
.doc-dados dt { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-3); }
.doc-dados dd { margin: 0; font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); color: var(--doc-texto); white-space: pre-line; }

/* Não conformidades */
.doc-nc { padding: var(--esp-2) var(--esp-3); background: var(--doc-perigo-fundo); border-left: var(--borda-marcador) solid var(--doc-perigo); border-radius: var(--raio-1); }
.doc-nc__cab { display: flex; gap: var(--esp-2); font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); font-weight: var(--peso-forte); color: var(--doc-texto); }
.doc-nc__num { flex: none; color: var(--doc-perigo); font-weight: var(--peso-negrito); }
.doc-nc__obs { margin-top: 2px; font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); color: var(--doc-texto); }
.doc-nc__fotos { margin-top: 2px; font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2); }

/* Tabela do checklist */
.doc-tabela { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: var(--borda-largura) solid var(--doc-regra-forte); }
.doc-tabela th {
  padding: var(--esp-1) var(--esp-2); background: var(--doc-cabecalho); border-bottom: var(--borda-largura) solid var(--doc-regra);
  font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); font-weight: var(--peso-forte); color: var(--doc-texto-2); text-align: left;
}
.doc-tabela td { padding: 5px var(--esp-2); border-bottom: var(--borda-largura) solid var(--doc-regra); vertical-align: top; font-size: var(--fs-doc-tabela); line-height: var(--lh-doc-tabela); color: var(--doc-texto); }
.doc-tabela .doc-linha__num { width: 48px; white-space: nowrap; padding-right: 0; font-variant-numeric: tabular-nums; color: var(--doc-texto-2); }
.doc-tabela .doc-linha__resp { width: 118px; }
.doc-linha--nc td { background: var(--doc-perigo-fundo); }
.doc-item__texto { color: var(--doc-texto); }
.doc-item__registro { margin-top: 2px; color: var(--doc-texto); font-weight: var(--peso-medio); white-space: pre-line; }
.doc-item__obs { margin-top: 2px; color: var(--doc-texto-2); white-space: pre-line; }
.doc-item__obs > span { font-weight: var(--peso-forte); color: var(--doc-texto); }
.doc-item__obs--nc, .doc-item__obs--nc > span { color: var(--doc-perigo); }
.doc-item__fotos { margin-top: 2px; font-size: var(--fs-doc-rodape); line-height: var(--lh-doc-rodape); color: var(--doc-texto-3); }
.doc-resp { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--doc-texto); }
.doc-resp .icone { flex: none; stroke-width: var(--traco-icone-status); }
.doc-resp--conforme { color: var(--doc-sucesso); font-weight: var(--peso-forte); }
.doc-resp--nc { color: var(--doc-perigo); font-weight: var(--peso-negrito); }
.doc-resp--na, .doc-resp--vazia { color: var(--doc-texto-3); }

/* Fotografias: três por linha, 4:3 */
.doc-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.doc-foto { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.doc-foto__midia { aspect-ratio: 4 / 3; overflow: hidden; background: var(--doc-cabecalho); border: var(--borda-largura) solid var(--doc-regra); border-radius: var(--raio-1); }
.doc-foto__midia img { width: 100%; height: 100%; object-fit: cover; }
.doc-foto__vazia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1); height: 100%; font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-3); text-align: center; }
.doc-foto__legenda { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-2); }
.doc-foto__codigo { margin-right: 6px; font-family: var(--fonte-mono); font-weight: var(--peso-forte); font-variant-numeric: normal; color: var(--doc-texto); }
.doc-foto__item { display: block; color: var(--doc-texto-3); }

/* =========================================================================
   IMPRESSÃO — só as folhas, uma por página A4
   ========================================================================= */
@media print {
  .relatorio, .relatorio-layout, .relatorio-principal { display: block !important; gap: 0 !important; }
  .relatorio-previa { padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; border-radius: 0 !important; }
  .doc { display: block !important; width: 210mm !important; gap: 0 !important; zoom: 1 !important; margin: 0 !important; }
  .doc-folha { break-after: page; page-break-after: always; }
  .doc-folha:last-child { break-after: auto; page-break-after: auto; }
}

/* Manual Técnico 1.0: severidade, interrupção/ressalvas, perfil da etapa e assinaturas */
.doc-resp--ne { color: var(--doc-texto-2); font-weight: var(--peso-forte); }
.doc-nc__cab { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: baseline; }
.doc-nc__sev { margin-left: auto; font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); font-weight: var(--peso-negrito); text-transform: uppercase; letter-spacing: .04em; color: var(--doc-perigo); }
.doc-nc--menor { background: var(--doc-cabecalho); border-left-color: var(--doc-processo); }
.doc-nc--menor .doc-nc__num, .doc-nc--menor .doc-nc__sev { color: var(--doc-processo); }
.doc-nc__obs + .doc-nc__obs { margin-top: 2px; }
.doc-aviso--ressalvas { background: var(--doc-cabecalho); border-left-color: var(--doc-processo); }
.doc-aviso--ressalvas .doc-nc__num { color: var(--doc-processo); }
.doc-item__perfil { color: var(--doc-texto-3); font-weight: var(--peso-normal); }
.doc-assinaturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); padding-top: var(--esp-3); }
.doc-assinatura { min-width: 0; }
.doc-assinatura__area { display: flex; align-items: center; justify-content: center; height: 64px; border-bottom: var(--borda-largura) solid var(--doc-regra-forte); }
.doc-assinatura__area img { max-width: 100%; max-height: 60px; }
.doc-assinatura__demo { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-3); font-style: italic; }
.doc-assinatura__nome { margin-top: var(--esp-1); font-size: var(--fs-doc-corpo); line-height: var(--lh-doc-corpo); font-weight: var(--peso-forte); color: var(--doc-texto); overflow-wrap: anywhere; }
.doc-assinatura__papel { font-size: var(--fs-doc-rotulo); line-height: var(--lh-doc-rotulo); color: var(--doc-texto-3); }