/**
 * Estilos do fluxo de resgate: trilha de etapas (wt-staps), rótulos das etapas,
 * campo de upload de arquivo, indicador de carregamento e faixa de status.
 *
 * Responsabilidades:
 * - Estilizar a trilha de etapas do resgate e seus estados (ativo, concluído).
 * - Estilizar o envio de arquivo e o indicador de processamento.
 *
 * CSS puro, editado à mão: o portal não tem Sass nem build do Tailwind. Depois
 * de editar, rode build-css.sh e comite o public/css/app.css gerado.
 *
 * @package Portal\Recursos\CSS
 * @llmdoc Último bloco de estilo de tela do app.css; depois dele só entram as
 *         variantes de utilitário (utilitarios-variantes.css).
 */
.wt-staps {
  border: 1px solid #C5C5C5;
  box-sizing: border-box;
  color: #C5C5C5;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  border-radius: 100px;
  height: 26px;
  width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wt-staps.active {
  background: #232323;
  border: 1px solid #3A3A3A;
  box-sizing: border-box;
  color: #FFFFFF;
}

.wt-staps.success {
  background: #02CE6A;
  border: 1px solid #02CE6A;
  box-sizing: border-box;
  color: #FFFFFF;
}

.wt-staps-txt {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
  color: #AEAEAE;
}

.wt-staps-txt.active {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #232323;
}

.wt-staps-txt.success {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #02CE6A;
}

.input-file {
  background: #EFEFEF;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader {
  opacity: 1;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  padding: 3px;
  height: 12px;
  display: flex;
  flex-direction: column;
  transition: all 500ms ease-in-out;
}

.status {
  background: #02CE6A;
  border-radius: 40px;
  height: 6px;
  transition: all 1.3s ease-in-out;
}