/* Aviso de ocupação da turma ("x% das vagas preenchidas").
   Sempre sobre fundo escuro (capa do curso, painel final do curso e card do
   curso na home). O conteúdo é escrito por assets/js/vagas-ppia.js; enquanto
   a resposta não chega o espaço fica reservado e invisível, para a página
   não pular quando o aviso aparece. */

.vagas-aviso {
  --vagas-cor: #34d399;
  --vagas-cor-espera: #f0cf86;
  display: grid;
  gap: 0.55rem;
  width: min(100%, 420px);
  min-height: 3.3rem;
  margin-inline: auto;
  text-align: center;
  transition: opacity 400ms ease;
}

.vagas-aviso:not([data-pronto]) {
  visibility: hidden;
  opacity: 0;
}

.vagas-aviso[hidden] {
  display: none;
}

.vagas-aviso--esquerda {
  margin-inline: 0;
  text-align: left;
}

.vagas-aviso .vagas-aviso-texto {
  max-width: none;
  margin: 0;
  color: rgb(238 242 255 / 0.82);
  font: 500 0.95rem / 1.3 var(--font-ui);
}

.vagas-aviso .vagas-aviso-texto strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.vagas-aviso-barra {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
}

.vagas-aviso-barra span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--vagas-cor);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vagas-aviso .vagas-aviso-espera {
  max-width: none;
  margin: 0;
  color: var(--vagas-cor-espera);
  font: 600 0.9rem / 1.35 var(--font-ui);
}

/* Turma cheia: a barra completa muda para o tom quente que o site já usa
   nos estados de atenção, e a linha da lista de espera aparece. */
.vagas-aviso.is-lotada {
  --vagas-cor: #e8bb62;
}