/* A aba "Histórico de dados" do admin (admin-historico.js): só o que é desta aba, em `hd-*`. A tabela, os
   botões, o modal e os filtros são os do admin (admin.css); aqui o antes × depois e o JSON. */

.hd-apoio { margin: 0 0 12px; max-width: 80ch; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.hd-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-filtros > select, .hd-filtros > input { flex: 1 1 200px; min-width: 0; min-height: var(--alvo); }
.hd-filtros > .hd-curto { flex: 0 1 140px; }
.hd-data { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.hd-data input { min-height: var(--alvo); }
.hd-exportar { display: flex; justify-content: flex-end; gap: 8px; }
.hd-exportar .btn + .btn { margin-left: 0; }
.hd-data .busca { max-width: none; flex: 0 0 auto; }
.hd-cobertura { margin: 0 0 12px; font: 400 var(--t-body-m)/20px var(--ui); }
.hd-cobertura summary { cursor: pointer; padding: 12px 0; line-height: 24px; color: var(--tinta); }   /* 48 px de alvo, mantendo o triângulo do summary */
.hd-fora { margin: 0 0 12px; padding-left: 20px; color: var(--tinta-2); }

.hd-modal { width: min(1040px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
/* o detalhe passa da altura da tela (o contorno de uma área, o laudo inteiro): o CORPO rola, o título e os botões ficam */
.hd-modal > .modal-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hd-modal > .modal-cab, .hd-modal > .modal-pe { flex: none; }
.hd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 16px; }
.hd-meta dt { font: 400 var(--t-label-s)/16px var(--ui); color: var(--tinta-2); }
.hd-meta dd { margin: 0; font: 500 var(--t-body-m)/20px var(--ui); overflow-wrap: anywhere; }

/* antes × depois lado a lado; a linha que mudou ganha o fundo da marca e a palavra "mudou" (não só a cor) */
.hd-comparar th { text-align: left; }
.hd-comparar th[scope="row"] { white-space: nowrap; font: 500 var(--t-body-m)/20px var(--mono); vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--linha); }   /* o mesmo respiro e a mesma linha das células: o nome do campo ficava colado no topo da linha */
.hd-comparar td { width: 45%; vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.hd-mudou { background: var(--ambar-claro, #FBF1DE); }
.hd-marca { font: 600 var(--t-label-s)/16px var(--ui); color: var(--aviso, #8A5A08); }
.hd-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12px/16px var(--mono); max-height: 240px; overflow: auto; }
.hd-bloco { padding: 12px; border: 1px solid var(--linha); border-radius: var(--r-s); background: var(--papel); max-height: 360px; }
.hd-json { margin-top: 16px; }
.hd-json summary { cursor: pointer; padding: 12px 0; line-height: 24px; }
.hd-junto { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font: 400 var(--t-body-m)/20px var(--ui); }

@media (max-width: 700px) {
  .hd-comparar td { width: auto; }
  .hd-pre { max-height: 160px; }
}

/* a prévia do Restaurar/Reverter, campo → valor (QA final, B4) */
.hd-gravar { margin: 8px 0 12px; border-top: 1px solid var(--linha); }
.hd-gravar > div { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 8px 16px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.hd-gravar dt { font: 500 var(--t-body-m)/20px var(--mono); color: var(--tinta); overflow-wrap: anywhere; }
.hd-gravar dd { margin: 0; min-width: 0; }
@media (max-width: 560px) { .hd-gravar > div { grid-template-columns: 1fr; gap: 4px; } }
/* P-12: a linha que MUDOU perdia o âmbar para o listrado da tabela (`.tabela tbody tr:nth-child(even)`) */
.tabela tbody tr.hd-mudou, .tabela tbody tr.hd-mudou:nth-child(even) { background: var(--ambar-claro, #FBF1DE); }
.tabela tbody tr.hd-mudou th[scope="row"] { box-shadow: inset 3px 0 0 var(--aviso, #8A5A08); }