/* css/palco-proximos.css — "A seguir no palco": quem é a próxima vez da fila da festa, GRANDE e
   chamativo na tela de cantar (o dourado da festa + brilho), pra todo mundo já ficar sabendo quem vem.
   O próximo aparece em destaque; os demais, como etiquetas ao lado. Some sozinho quando não tem fila. */
.palco-proximos {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: .35rem 0 .85rem;
  padding: .7rem 1.1rem;
  border-radius: 1rem;
  background: linear-gradient(100deg, rgba(255, 200, 61, 0.2), rgba(255, 200, 61, 0.05) 60%, transparent);
  border: 1px solid rgba(255, 200, 61, 0.45);
  box-shadow: 0 0 24px rgba(255, 200, 61, 0.18);
}
.palco-proximos-vez {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.palco-proximos-rot {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ouro);
}
.palco-proximos-rot .ic { width: .95em; height: .95em; }
.palco-proximos-nome {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 200, 61, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
}
.palco-proximos-mus {
  margin: 0;
  font-size: .95rem;
  color: var(--ouro);
}
.palco-proximos-depois {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.palco-proximos-depois li {
  font-size: .95rem;
  padding: .34rem .74rem;
  border-radius: .7rem;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.palco-proximos-depois li b { color: var(--ouro); margin-right: .2rem; }
.palco-proximos-depois .pp-mus { opacity: .6; font-size: .86rem; }
.palco-proximos-depois .pp-mais { background: rgba(255, 200, 61, .18); color: var(--ouro); font-weight: 700; }

@media (max-width: 560px) {
  .palco-proximos-nome { font-size: 1.4rem; }
  .palco-proximos-depois { margin-left: 0; width: 100%; }
}