/* ==========================================================================
   Tratativa de divergências — T27 (registrar), T28 (avaliar), T29 (evidências)

   Não há import de CSS em JS neste projeto: todo arquivo é <link> no
   index.html e vale em TODA rota. Por isso cada seletor aqui é prefixado
   `.trat-` — sem o prefixo, `.anexo` ou `.conta` vazariam para as outras
   telas. Zero cor literal: tudo sai de tokens.css.
   ========================================================================== */

.trat-painel {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

/* --- resumo da divergência (contexto do que está sendo justificado) ------- */

/*
  Uma borda OU uma sombra, nunca as duas: 1px de borda sob sombra larga é o
  "ghost card" que o craft floor proíbe. Aqui a elevação é a borda, porque
  este bloco é contexto de leitura, não um objeto flutuante.
*/
.trat-resumo {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
  overflow: hidden;
}

.trat-produto {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
}

.trat-produto__texto { min-width: 0; }

.trat-produto__nome {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--texto);
  line-height: 1.3;
}

.trat-produto__codigo {
  margin: 2px 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.trat-produto__local {
  margin: var(--e-1) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.trat-produto__sep { margin: 0 var(--e-2); color: var(--linha-2); }

/*
  A conta em 4 colunas iguais: esperado, contado, diferença, percentual.
  Grid e não flex porque as quatro precisam da MESMA largura para os números
  alinharem verticalmente entre si — com flex, "24 unidades" e "-50,0%"
  produziriam colunas de larguras diferentes.
*/
.trat-conta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trat-conta__celula {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4) var(--e-5);
  border-right: 1px solid var(--linha);
}
.trat-conta__celula:last-child { border-right: none; }

.trat-conta__rotulo {
  font-size: var(--txt-xs);
  color: var(--texto-3);
  font-weight: 600;
}

.trat-conta__valor {
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/*
  A cor sai da classificação, não de "divergência = vermelho". FALTA usa
  `--falta`, SOBRA usa `--sobra` (âmbar): encontrar estoque a mais não é o
  mesmo problema que não encontrar, e pintar os dois de vermelho ensinaria
  que são.
*/
.trat-conta__celula--destaque { background: var(--surface-2); }

[data-tom='falta'].trat-conta__celula--destaque { background: var(--falta-100); }
[data-tom='falta'] .trat-conta__valor,
.trat-conta__celula[data-tom='falta'] .trat-conta__valor { color: var(--falta); }

[data-tom='sobra'].trat-conta__celula--destaque { background: var(--atencao-100); }
[data-tom='sobra'] .trat-conta__valor,
.trat-conta__celula[data-tom='sobra'] .trat-conta__valor { color: var(--atencao-texto); }

/* --- formulário ---------------------------------------------------------- */

.trat-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.trat-campos {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.trat-rotulo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.trat-contador {
  font-size: var(--txt-xs);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.trat-contador[data-estado='alerta'] { color: var(--atencao-texto); font-weight: 600; }

/* Campo com sufixo de unidade acoplado, sem o sufixo parecer um segundo campo. */
.trat-quantidade {
  display: flex;
  align-items: stretch;
  max-width: 18rem;
}
.trat-quantidade__campo {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trat-quantidade__unidade {
  display: flex;
  align-items: center;
  padding: 0 var(--e-3);
  border: 1px solid var(--linha);
  border-left: none;
  border-top-right-radius: var(--raio);
  border-bottom-right-radius: var(--raio);
  background: var(--surface-2);
  color: var(--texto-2);
  font-size: var(--txt-sm);
  white-space: nowrap;
}

.trat-secao {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.trat-secao__titulo {
  margin: 0;
  font-size: var(--txt-md);
  font-weight: 600;
  color: var(--texto);
}

.trat-secao__nota {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.trat-secao__existentes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-bottom: var(--e-2);
}

/* --- uploader ------------------------------------------------------------ */

.trat-uploader {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* Herda `.upload-zona` de importacao.css; só o que muda fica aqui. */
.trat-upload { min-height: 6.5rem; }

.trat-upload__regra {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--txt-xs);
  color: var(--texto-3);
}

.trat-upload--invalido { border-color: var(--falta); }

.trat-upload--bloqueado {
  opacity: .55;
  pointer-events: none;
}

.trat-anexos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trat-anexo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
  min-width: 0;
}

/*
  Miniatura pequena e de proporção fixa: o formulário mostra QUE o arquivo
  está anexado, não o conteúdo dele — para ver a foto existe o visualizador.
  Uma prévia grande aqui empurraria o botão de enviar para fora da tela.
*/
.trat-anexo__previa {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}

.trat-anexo__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio);
  background: var(--azul-100);
  color: var(--azul-700);
  flex-shrink: 0;
}

.trat-anexo__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.trat-anexo__nome {
  font-size: var(--txt-sm);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trat-anexo__meta {
  font-size: var(--txt-xs);
  color: var(--texto-3);
}

.trat-anexo__remover {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.trat-anexo__remover:hover { background: var(--falta-100); color: var(--falta); }
.trat-anexo__remover:disabled { opacity: .5; cursor: default; }

/* --- painel de validações ------------------------------------------------ */

.trat-validacoes {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface-2);
  padding: var(--e-3) var(--e-4);
}
.trat-validacoes[data-estado='ok'] {
  border-color: var(--conforme);
  background: var(--conforme-100);
}

.trat-validacoes__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trat-validacoes__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.trat-validacoes__item[data-estado='ok'] { color: var(--conforme); }
.trat-validacoes__item[data-estado='pendente'] { color: var(--atencao-texto); }
.trat-validacoes__item svg { flex-shrink: 0; }

/* --- T28: revisão (blocos somente-leitura) -------------------------------- */

.trat-revisao__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.trat-revisao__titulo {
  margin: 0;
  font-size: var(--txt-md);
  font-weight: 600;
  color: var(--texto);
}

/*
  `<dl>` rótulo/valor: cada dupla é uma linha, o rótulo com largura fixa para
  os valores alinharem numa coluna só. Evita repetir a estrutura de
  campo-grupo (que é para FORMULÁRIO) numa área que não tem input nenhum.
*/
.trat-revisao__lista {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--e-2) var(--e-4);
  margin: 0;
}
.trat-revisao__lista dt {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-3);
}
.trat-revisao__lista dd {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto);
  white-space: pre-wrap;
}

/* --- T28: galeria de evidências -------------------------------------------- */

.trat-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--e-3);
}

.trat-galeria__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
}

.trat-galeria__miniatura,
.trat-galeria__arquivo {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--azul-700);
  transition: border-color .15s ease;
}
.trat-galeria__miniatura:hover,
.trat-galeria__arquivo:hover { border-color: var(--azul-500); }
.trat-galeria__miniatura:focus-visible,
.trat-galeria__arquivo:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.trat-galeria__nome {
  font-size: var(--txt-xs);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trat-galeria__meta {
  font-size: var(--txt-xs);
  color: var(--texto-3);
}

/* --- T28: histórico da tratativa (timeline compacta) ----------------------- */

/*
  Trilho + marco, não card com borda colorida lateral: o craft floor proíbe
  `border-left` acima de 1px em item de lista, e um trilho contínuo é a forma
  honesta de mostrar sequência sem simular um cartão de alerta.
*/
.trat-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--e-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.trat-timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--e-2) + 3px);
  top: .4rem;
  bottom: .4rem;
  width: 1px;
  background: var(--linha-2);
}

.trat-timeline__item {
  position: relative;
  display: flex;
  gap: var(--e-3);
  padding-left: var(--e-4);
}

.trat-timeline__marco {
  position: absolute;
  left: -1px;
  top: .3rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linha-2);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--linha-2);
}
.trat-timeline__item[data-tom='ok'] .trat-timeline__marco { background: var(--conforme); box-shadow: 0 0 0 1px var(--conforme); }
.trat-timeline__item[data-tom='erro'] .trat-timeline__marco { background: var(--falta); box-shadow: 0 0 0 1px var(--falta); }
.trat-timeline__item[data-tom='atencao'] .trat-timeline__marco { background: var(--sobra); box-shadow: 0 0 0 1px var(--sobra); }

/* --- T35: timeline completa da auditoria (replay + lista com filtros) ------
   `--clicavel`/`--rolavel` são específicos da T35: a timeline de T30/T34
   (cadeia de aprovação, histórico de reabertura) é só leitura, sem cursor de
   ponteiro nem seleção. */

.trat-timeline__item--clicavel {
  cursor: pointer;
  border-radius: var(--raio);
}
.trat-timeline__item--clicavel:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.trat-timeline__item--clicavel[data-atual='true'] .trat-timeline__corpo {
  background: var(--azul-100);
  margin: calc(var(--e-2) * -1) calc(var(--e-2) * -1) calc(var(--e-2) * -1) 0;
  padding: var(--e-2);
  border-radius: var(--raio);
}
.trat-timeline__item--clicavel[data-atual='true'] .trat-timeline__marco {
  background: var(--azul-500);
  box-shadow: 0 0 0 1px var(--azul-500);
}

.trat-timeline--rolavel {
  max-height: 32rem;
  overflow-y: auto;
  padding-right: var(--e-2);
}

.trat-timeline__dia {
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
  padding: var(--e-3) 0 var(--e-1) var(--e-4);
  margin: 0;
}
.trat-timeline__dia:first-child { padding-top: 0; }

.trat-filtros-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-3);
}
.trat-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campo--compacto {
  min-height: 2.25rem;
  width: auto;
  min-width: 11rem;
  font-size: var(--txt-sm);
}

.trat-timeline__corpo { min-width: 0; }
.trat-timeline__titulo {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto);
}
.trat-timeline__quando {
  margin: 2px 0 0;
  font-size: var(--txt-xs);
  color: var(--texto-3);
}
.trat-timeline__detalhe {
  margin: var(--e-1) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

/* --- ações --------------------------------------------------------------- */

.trat-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-3);
  padding-top: var(--e-2);
}

.trat-girando {
  display: inline-grid;
  place-items: center;
  animation: trat-girar 1s linear infinite;
}
@keyframes trat-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .trat-girando { animation: none; }
}

/* --- T29: visualizador de evidências ---------------------------------------- */

.trat-visu {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/*
  Área principal em fundo escuro: foto/PDF respiram melhor sobre um fundo
  neutro escuro do que sobre o creme da UI. Usa `--azul-900`, o próprio
  escuro dominante da marca (o mesmo da topbar/sidebar) — não uma cor nova,
  e não `--negro`, que os tokens documentam como exclusivo do overlay da
  câmera de contagem.
*/
.trat-visu__principal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26rem;
  max-height: 60vh;
  border-radius: var(--raio-lg);
  background: var(--azul-900);
  overflow: hidden;
}

.trat-visu__area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  `width`/`height: 100%`, não `max-*`: uma imagem menor que a área (comum em
  evidência tirada de longe, ou — como no mockup — um SVG com tamanho
  intrínseco pequeno) NUNCA cresce com `max-width/max-height`, porque eles só
  impõem teto, nunca alvo. `object-fit: contain` faz o resto: preenche sem
  distorcer, sobra como barra neutra (o fundo escuro do container) nos dois
  lados quando a proporção não bate exatamente com a área.
*/
.trat-visu__imagem {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trat-visu__pdf {
  width: 100%;
  height: 60vh;
  border: none;
  background: var(--surface);
}

.trat-visu__carregando,
.trat-visu__sem-previa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  color: var(--neutro-300);
  font-size: var(--txt-sm);
  text-align: center;
  padding: var(--e-5);
}

.trat-visu__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--neutro-0);
  cursor: pointer;
  transition: background-color .15s ease;
}
.trat-visu__nav:hover { background: rgba(255, 255, 255, .22); }
.trat-visu__nav:disabled { opacity: 0; pointer-events: none; }
.trat-visu__nav--anterior { left: var(--e-3); }
.trat-visu__nav--proxima { right: var(--e-3); }

.trat-visu__rodape {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.trat-visu__info { min-width: 0; }

.trat-visu__nome-linha {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin: 0 0 var(--e-2);
  flex-wrap: wrap;
}

.trat-visu__nome {
  margin: 0;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28rem;
}

.trat-visu__contador {
  font-size: var(--txt-sm);
  color: var(--texto-3);
  white-space: nowrap;
}

.trat-visu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

.trat-visu__meta-item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--texto-2);
}
.trat-visu__meta-item svg { flex-shrink: 0; color: var(--texto-3); }
.trat-visu__meta-item > span {
  display: flex;
  flex-direction: column;
  font-size: var(--txt-sm);
}
.trat-visu__meta-rotulo {
  font-size: var(--txt-xs);
  color: var(--texto-3);
}

.trat-visu__miniaturas {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-1);
}

.trat-visu__miniatura {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border: 2px solid transparent;
  border-radius: var(--raio);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: var(--azul-700);
  cursor: pointer;
  padding: 0;
}
.trat-visu__miniatura--ativa { border-color: var(--azul-500); }
.trat-visu__miniatura:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* --- mockup: barra do revisor (não vai para produção) -------------------- */

.trat-mockup-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.trat-mockup-barra label {
  font-size: var(--txt-sm);
  color: var(--texto-2);
  font-weight: 600;
}
.trat-mockup-barra select { max-width: 16rem; }

.trat-aviso-permissao {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

/* --- responsivo ---------------------------------------------------------- */

/*
  A conta quebra em 2×2 antes de espremer: quatro colunas num viewport de
  celular dariam ~80px por célula, e "24 unidades" quebraria em duas linhas
  dentro de cada uma.
*/
@media (max-width: 760px) {
  .trat-conta { grid-template-columns: repeat(2, 1fr); }
  .trat-conta__celula:nth-child(2n) { border-right: none; }
  .trat-conta__celula:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
}

@media (max-width: 560px) {
  .trat-produto {
    flex-direction: column;
    gap: var(--e-2);
  }
  .trat-conta__celula { padding: var(--e-3) var(--e-4); }
  .trat-conta__valor { font-size: var(--txt-md); }
  .trat-anexos { grid-template-columns: 1fr; }
  .trat-quantidade { max-width: none; }

  /*
    Rótulo/valor lado a lado presume espaço que 375px não tem — "Durante o
    período da..." quebrava em 4-5 palavras por linha contra uma coluna de
    10rem. Empilha rótulo acima do valor, mesmo padrão que outras telas do
    sistema usam para `<dl>` em viewport estreito.
  */
  .trat-revisao__lista {
    grid-template-columns: 1fr;
    gap: var(--e-1);
  }
  .trat-revisao__lista dd { margin-bottom: var(--e-2); }

  .trat-galeria { grid-template-columns: repeat(2, 1fr); }

  /*
    T29 no celular: a área principal encolhe (60vh de altura de imagem não
    cabe numa tela de 812px de altura TOTAL junto com o resto do modal), o
    rodapé empilha em vez de ficar lado a lado, e o botão de navegação
    encolhe para não competir com a imagem por espaço.
  */
  .trat-visu__principal { min-height: 16rem; max-height: 40vh; }
  .trat-visu__pdf { height: 40vh; }
  .trat-visu__nav { width: 2.25rem; height: 2.25rem; }
  .trat-visu__rodape { flex-direction: column; }
  .trat-visu__rodape .btn { width: 100%; }
  .trat-visu__nome { max-width: none; }

  /*
    No celular os botões ocupam a largura toda e o principal vem PRIMEIRO na
    ordem visual: com o polegar na base da tela, a ação mais provável deve
    ficar no alcance mais fácil. A ordem no DOM não muda (cancelar continua
    antes no foco por teclado), só a ordem visual.
  */
  .trat-acoes {
    flex-direction: column-reverse;
  }
  .trat-acoes .btn { width: 100%; }
}