/* ==========================================================================
   Divergências e apuração — GV Auditoria

   Duas ideias governam esta tela:

   · O olho vai primeiro para o impacto. Valores em fonte monoespaçada com
     dígitos tabulares, alinhados à direita, para a comparação entre linhas ser
     visual e não exigir leitura número a número.
   · Falta e sobra têm cores diferentes e opostas. Não é decoração: são
     achados de naturezas distintas, e a RN-25 existe justamente porque somá-los
     sem distinção esconde o problema.
   ========================================================================== */

.metricas--compactas .metrica { padding: var(--e-2) var(--e-3); }
.metricas--compactas .metrica__valor { font-size: var(--txt-lg); }

.metrica--neutro { border-color: var(--linha-2); }

/* --- valores com sinal ---------------------------------------------------- */

.valor--falta { color: var(--falta); }
.valor--sobra { color: var(--atencao-texto); } /* âmbar puro (#D99A2B) não fecha AA como texto */

/* --- resumo no topo do modal de detalhe ------------------------------------ */
/* Repete o que a linha da tabela já mostrava (classificação, criticidade,
   diferença, impacto) — sem isso o auditor perde de vista qual item abriu
   assim que o modal cobre a tabela. */
.detalhe-item__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-2) 0 var(--e-3);
}
.detalhe-item__resumo .mono { font-weight: 600; font-size: var(--txt-sm); }

/* --- o comparativo entre contagens ---------------------------------------- */
/*
   O bloco que responde "por que este produto está com falta de 12?". A conta
   aparece na ordem em que acontece — saldo, movimentações, contagens, resultado
   — porque é assim que alguém a confere: de cima para baixo, uma linha por vez.
*/

.conta {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e-3);
}

.conta__titulo {
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
  margin-bottom: var(--e-2);
}

.conta__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-1) 0;
  font-size: var(--txt-sm);
}

.conta__linha .mono { font-variant-numeric: tabular-nums; }

.conta__linha--total {
  border-top: 1px solid var(--linha-2);
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  font-weight: 600;
  color: var(--azul-900);
}

/* A contagem que prevaleceu precisa ser óbvia: é o número que virou o
   resultado, e todos os outros existem para explicá-lo. */
.conta__linha--destaque {
  background: var(--azul-100);
  border-radius: var(--raio-sm);
  padding-left: var(--e-2);
  padding-right: var(--e-2);
  font-weight: 600;
}

/* --- indicadores no detalhe da auditoria ---------------------------------- */

.indicadores-resumo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
}

@media (min-width: 768px) {
  .indicadores-resumo { grid-template-columns: repeat(4, 1fr); }
}

/* --- evidências no detalhe do item ------------------------------------------ */
/*
   Miniatura de imagem carrega o próprio conteúdo como fundo (blob URL
   autenticado — não dá pra usar <img src> puro, ver tratativaApi.evidencias
   .baixar). PDF e outros formatos mostram um ícone genérico no mesmo
   tamanho de célula, clicável do mesmo jeito.
*/
.evidencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--e-3);
}

.evidencia {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-size: var(--txt-xs);
}

.evidencia__miniatura,
.evidencia__arquivo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}

.evidencia__arquivo {
  display: grid;
  place-items: center;
  font-size: var(--txt-2xl);
}

.evidencia__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}