/* ==========================================================================
   Auditoria do Sistema — trilha de auditoria

   A tela reaproveita o que já existe (`.metrica`, `.filtros-barra`,
   `.tabela`, `.modal`, `.selo`). Este arquivo só cobre o que não tinha
   equivalente: a ficha do evento e a comparação antes × depois.
   ========================================================================== */

/* --- filtro de período -----------------------------------------------------
   Data inicial e final dividem UMA célula da grade `.filtros`: são um filtro
   só. Separadas, sobrava um campo órfão numa segunda linha com o resto da
   faixa vazio. */
.trilha-periodo {
  display: grid;
  /* `minmax(0, 1fr)`, não `1fr`: o `1fr` puro é `minmax(auto, 1fr)` e deixa a
     coluna crescer até o min-content do filho. `input[type=date]` tem largura
     intrínseca fixa (o navegador reserva espaço para dd/mm/aaaa e o botão do
     calendário), então dois deles estouravam a grade e faziam a PÁGINA rolar
     de lado num viewport de 375px — o que o projeto trata como defeito desde
     o redesenho do menu inferior. Com `minmax(0, …)` a coluna encolhe. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  align-items: end;
}
.trilha-periodo .campo { width: 100%; min-width: 0; }

/* --- ficha do evento -------------------------------------------------------
   Rótulo estreito e fixo à esquerda, valor à direita: os rótulos ("Usuário",
   "Módulo", "Ação") ficam alinhados numa coluna só, e o olho desce por eles
   sem reancorar a cada linha. */
.trilha-ficha {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--e-2) var(--e-4);
  margin: 0;
  align-items: baseline;
}

.trilha-ficha dt {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.trilha-ficha dd {
  margin: 0;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* Abaixo de 640px a grade de duas colunas espremeria o valor em 3–4 palavras
   por linha; empilhado, rótulo e valor continuam legíveis. */
@media (max-width: 639px) {
  .trilha-ficha { grid-template-columns: 1fr; gap: var(--e-1); }
  .trilha-ficha dd { margin-bottom: var(--e-3); }
}

/* --- comparação antes × depois -------------------------------------------- */
.trilha-diff { padding: var(--e-4); }

/* Um campo alterado: leitura vertical, com a seta indicando a direção da
   mudança. É o formato mais direto quando existe UMA resposta para "o que
   mudou" — e é o caso mais comum na trilha. */
.trilha-antes-depois {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
}

.trilha-antes-depois__lado {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3);
  border: 1px solid var(--linha);
  /* Barra lateral colorida em vez de fundo colorido — mesma decisão de
     `.metrica`: o valor precisa continuar legível, e dois blocos com fundo
     forte dentro de um modal branco competiriam entre si. */
  border-left: 3px solid var(--linha-2);
  border-radius: var(--raio);
  background: var(--surface-2);
}

.trilha-antes-depois__lado--novo {
  border-left-color: var(--conforme);
  background: var(--surface);
}

.trilha-antes-depois__marca {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.trilha-antes-depois__valor {
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.trilha-antes-depois__seta {
  font-size: var(--txt-xl);
  line-height: 1;
  color: var(--texto-3);
}

/* Vários campos: tabela, para as colunas "Antes" e "Depois" ficarem lado a
   lado e comparáveis de uma olhada. Repetir o bloco vertical N vezes
   obrigaria a rolar para comparar dois campos. */
.tabela--diff { font-size: var(--txt-sm); }
.tabela--diff td { vertical-align: top; overflow-wrap: anywhere; }
.trilha-diff__antes  { color: var(--texto-2); text-decoration: line-through; }
.trilha-diff__depois { color: var(--texto); font-weight: 600; }

/* No modo cartão do celular (`.tabela` vira lista com `data-label`) o
   tachado sozinho não basta para separar antes de depois: sem as colunas,
   os dois valores viram linhas consecutivas do mesmo bloco. */
@media (max-width: 767px) {
  .trilha-diff__depois { color: var(--conforme); }
}

/* --- payload cru ----------------------------------------------------------- */
.trilha-json {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  line-height: 1.5;
  color: var(--texto-2);
  background: var(--surface);
  /* O JSON é o único conteúdo da tela que legitimamente rola de lado: quebrar
     linha nele destruiria a indentação, que é o que o torna legível. */
  overflow-x: auto;
  max-height: 22rem;
  overflow-y: auto;
}