/* ==========================================================================
   Encerramento e histórico — T30 (checklist/tratativa), T31 (aprovar),
   T32 (devolver/reprovar), T33 (finalizada), T34 (reabrir), T35 (timeline)

   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
   `.enc-` — sem o prefixo vazaria para as outras telas. Zero cor literal:
   tudo sai de tokens.css. Reusa `.cartao`, `.passos`, `.aviso`,
   `.trat-timeline` (tratativa.css) em vez de recriar.
   ========================================================================== */

/* --- checklist (T30) ------------------------------------------------------- */

.enc-checklist__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.enc-checklist__progresso {
  font-size: var(--txt-sm);
  color: var(--texto-2);
  white-space: nowrap;
}

.enc-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}

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

.enc-checklist__link {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto);
  font-size: var(--txt-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--raio);
}
.enc-checklist__link:hover { color: var(--azul-700); }
.enc-checklist__link:hover .enc-checklist__seta { transform: translateX(2px); }
.enc-checklist__seta {
  margin-left: auto;
  color: var(--texto-3);
  flex-shrink: 0;
  transition: transform .15s ease;
}

/* --- resumo financeiro (T30/T33) ------------------------------------------- */

.enc-resumo-financeiro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-3);
}

/* --- justificativa de encerramento (T30) ------------------------------------ */

.enc-justificativa {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linha);
}

/* --- diálogos (T31/T32/T34) -------------------------------------------------- */

.enc-dialogo__contexto {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--e-1) var(--e-3);
  margin: 0;
  padding: var(--e-3);
  border-radius: var(--raio);
  background: var(--surface-2);
}
.enc-dialogo__contexto dt {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-3);
}
.enc-dialogo__contexto dd {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto);
}

.enc-dialogo__consequencias ul {
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.enc-dialogo__consequencias li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--txt-sm);
}
.enc-dialogo__consequencias li svg { flex-shrink: 0; margin-top: 2px; }

.enc-dialogo__importante {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}
.enc-dialogo__importante p { margin: var(--e-1) 0 0; }

/* --- finalizada / relatório final (T33) -------------------------------------- */

/*
  Elevação declarada uma vez só (borda), sem sombra por cima — o craft floor
  proíbe as duas juntas ("ghost card"). O verde vem do próprio token
  semântico, não decoração nova.
*/
.enc-finalizada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--conforme);
  border-radius: var(--raio-lg);
  background: var(--conforme-100);
}
.enc-finalizada__icone { color: var(--conforme); }
.enc-finalizada__titulo {
  margin: 0;
  font-size: var(--txt-xl);
  font-weight: 700;
  color: var(--texto);
}
.enc-finalizada__detalhe {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.enc-indicadores-congelados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e-3);
}

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

@media (max-width: 560px) {
  .enc-checklist__cabecalho { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
  .enc-dialogo__contexto { grid-template-columns: 1fr; gap: var(--e-1); }
  .enc-dialogo__contexto dd { margin-bottom: var(--e-2); }
  .enc-resumo-financeiro,
  .enc-indicadores-congelados { grid-template-columns: repeat(2, 1fr); }
}