/* ============================================================
   VS — a musica em faixas: palco (acorde grande + transporte),
   ajustes, mixer e linha do tempo dos acordes.
   ============================================================ */
.vs-pagina {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: .5rem 1rem 1.5rem;
  display: grid;
  gap: 1rem;
}

.pagina-vs .toolbar { justify-content: space-between; }
.vs-botao-escolher { font-size: .85rem; padding: .45rem .8rem; }

/* ---------- estado vazio ---------- */
.vs-vazio {
  display: grid;
  justify-items: center;
  gap: .8rem;
  text-align: center;
  padding: 2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(196, 23, 42, .14), rgba(21, 17, 13, .88) 70%);
}
.vs-vazio h1 { margin: 0; font-size: 1.25rem; }
.vs-vazio p { margin: 0; color: var(--fog); font-size: .9rem; line-height: 1.5; }
.vs-vazio-icone { color: var(--ember-bright); filter: drop-shadow(0 0 14px rgba(255, 36, 56, .5)); }
.vs-principal {
  margin-top: .4rem;
  padding: .75rem 1.6rem;
  font-weight: 700;
  background: var(--ember);
  border-color: var(--ember-bright);
  color: var(--paper);
}

/* ---------- cabeca ---------- */
.vs-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.vs-titulos { min-width: 0; }
.vs-titulos h1 { margin: 0; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.vs-titulos p { margin: .15rem 0 0; color: var(--fog); font-size: .85rem; }
.vs-link-cifra {
  flex: none;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--paper-dim);
  font-size: .8rem;
  font-weight: 600;
}
.vs-link-cifra:hover { border-color: var(--ember); color: var(--paper); text-decoration: none; }

/* ---------- palco ---------- */
.vs-palco {
  display: grid;
  gap: .9rem;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(196, 23, 42, .16), rgba(21, 17, 13, .9) 70%);
}
.vs-agora { display: grid; justify-items: center; gap: .15rem; text-align: center; }
.vs-rotulo-secao {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember-bright);
}
.vs-acorde {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  min-height: 1.1em;
}
.vs-acorde.pulsando { animation: vs-pulso .5s ease-out; }
@keyframes vs-pulso {
  0% { transform: scale(1.07); text-shadow: 0 0 26px rgba(255, 36, 56, .8); }
  100% { transform: scale(1); text-shadow: none; }
}
.vs-proximo { font-size: .8rem; color: var(--fog); }
.vs-proximo b { color: var(--paper-dim); font-family: var(--font-mono); font-weight: 600; }

.vs-progresso { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.vs-progresso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-bright)); transition: width .25s linear; }

.vs-transporte { display: flex; align-items: center; gap: .8rem; }
.vs-tocar {
  flex: none;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ember);
  border: 1px solid var(--ember-bright);
  color: var(--paper);
  box-shadow: 0 0 24px -4px rgba(255, 36, 56, .6);
}
.vs-tocar .icone-parar { display: none; }
.vs-tocar.tocando .icone-play { display: none; }
.vs-tocar.tocando .icone-parar { display: block; }
.vs-tocar:active { transform: scale(.95); }

.vs-loop { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }

.vs-secoes { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.vs-secoes::-webkit-scrollbar { display: none; }
.vs-secoes button { flex: none; padding: .4rem .8rem; font-size: .82rem; border-radius: 999px; }
.vs-secoes button.agora { border-color: var(--ember-bright); background: rgba(196, 23, 42, .24); color: var(--paper); }

/* ---------- blocos ---------- */
.vs-bloco {
  display: grid;
  gap: .7rem;
  padding: .9rem;
  background: rgba(21, 17, 13, .86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.vs-bloco h2 {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog);
}
.vs-nota { font-size: .74rem; color: var(--fog); line-height: 1.4; }

.vs-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.vs-chips-pequenos { grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); }
.vs-chips button,
.vs-loop button {
  min-height: 2.5rem;
  padding: .4rem .3rem;
  display: grid;
  align-content: center;
  gap: .1rem;
  background: var(--surface-2);
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.vs-chips button small { font-size: .68rem; font-weight: 500; color: var(--fog); line-height: 1.2; }
.vs-chips button.ativo,
.vs-loop button.ativo {
  background: rgba(196, 23, 42, .22);
  border-color: var(--ember-bright);
  color: var(--paper);
  box-shadow: var(--shadow-ember);
}
.vs-loop button { min-height: 2.2rem; font-size: .72rem; }

.vs-controles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.vs-controle { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.vs-controle-nome { font-size: .78rem; color: var(--fog); font-weight: 600; }
.vs-controle small { font-size: .7rem; color: var(--fog); }
.vs-stepper { display: flex; align-items: center; gap: .3rem; width: 100%; }
.vs-stepper button { flex: none; width: 2.6rem; height: 2.6rem; padding: 0; font-weight: 700; }
.vs-stepper input,
.vs-stepper output {
  flex: 1;
  min-width: 0;
  height: 2.6rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}
.vs-stepper input { -moz-appearance: textfield; }
.vs-stepper input::-webkit-outer-spin-button,
.vs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vs-avancado { display: grid; gap: .6rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.vs-opcao { display: grid; gap: .4rem; font-size: .8rem; color: var(--fog); }

.vs-interruptor {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .4rem .2rem;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.vs-interruptor:hover { border: none; box-shadow: none; }
.vs-interruptor:disabled { opacity: .5; cursor: default; }
/* Mais especifico que a regra generica "button.ativo" (fundo vermelho solido):
   sem isso, a linha inteira do interruptor virava um bloco vermelho identico
   ao botao "Comecar a separar" logo abaixo, dificultando distinguir os dois. */
.vs-interruptor.ativo {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--paper);
}
.vs-interruptor-texto { display: grid; gap: .1rem; }
.vs-interruptor-texto strong { font-size: .88rem; }
.vs-interruptor-texto small { font-size: .72rem; color: var(--fog); font-weight: 500; }
.vs-interruptor-trilho {
  flex: none;
  width: 2.7rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.vs-interruptor-bolinha {
  position: absolute;
  top: 50%;
  left: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--fog);
  transform: translateY(-50%);
  transition: left .2s ease, background .2s ease;
}
.vs-interruptor.ativo .vs-interruptor-trilho { background: rgba(196, 23, 42, .35); border-color: var(--ember-bright); }
.vs-interruptor.ativo .vs-interruptor-bolinha { left: calc(100% - 1.25rem); background: var(--ember-bright); }

/* ---------- mixer ---------- */
.vs-mixer { display: grid; gap: .5rem; }
.vs-faixa {
  display: grid;
  grid-template-columns: 6.4rem 1fr 2.3rem 2.3rem;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cor, var(--ember));
  border-radius: 8px;
  transition: opacity .2s ease;
}
.vs-faixa.apagada { opacity: .45; }
.vs-faixa-nome { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; }
.vs-faixa-nome i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor, var(--ember)); flex: none; }
.vs-faixa input[type="range"] { width: 100%; margin: 0; height: 1.6rem; accent-color: var(--cor, var(--ember-bright)); }
.vs-faixa button {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 8px;
}
.vs-faixa .vs-m[aria-pressed="true"] { background: rgba(196, 23, 42, .3); border-color: var(--ember-bright); color: var(--paper); }
.vs-faixa .vs-s[aria-pressed="true"] { background: rgba(240, 205, 133, .25); border-color: #f0cd85; color: #f0cd85; }

/* ---------- linha do tempo dos acordes ---------- */
.vs-tempo { display: grid; gap: .9rem; }
.vs-tempo-secao h3 {
  margin: 0 0 .4rem;
  font-size: .85rem;
  color: var(--paper-dim);
}
.vs-tempo-secao h3 small { color: var(--fog); font-weight: 500; }
.vs-tempo-acordes { display: flex; flex-wrap: wrap; gap: .35rem; }
.vs-acorde-chip {
  flex: calc(var(--largura, 1) * 1) 0 auto;
  min-width: 3.1rem;
  padding: .45rem .55rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vs-acorde-chip.agora {
  background: rgba(196, 23, 42, .3);
  border-color: var(--ember-bright);
  color: var(--paper);
  box-shadow: var(--shadow-ember);
}

/* ---------- dialogo de busca ---------- */
dialog.vs-dialogo { width: min(30rem, 94vw); max-height: 90vh; padding: 0; }
dialog.vs-dialogo[open] { display: flex; flex-direction: column; }
.vs-dialogo-corpo { display: grid; gap: .6rem; padding: .8rem; overflow-y: auto; overscroll-behavior: contain; }
.vs-dialogo .lista-candidatos { max-height: none; padding: 0; }
.vs-mais { justify-self: center; padding: .5rem 1.2rem; }
.vs-dialogo a.candidato { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .vs-acorde.pulsando { animation: none; }
}

/* "display" das classes acima nao pode ganhar do atributo hidden */
.pagina-vs [hidden] { display: none !important; }

/* ---------- tela "Criar faixas" ---------- */
.vs-texto { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--paper-dim); }
.vs-texto strong { color: var(--paper); }
.vs-texto-fraco { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--fog); }
.vs-ambiente { display: grid; gap: .4rem; padding: .7rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 8px; background: var(--surface-2); }
.vs-ambiente p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--paper-dim); }
.vs-ambiente strong { color: var(--paper); }

.vs-soltar {
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: 1.4rem 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  color: var(--fog);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.vs-soltar strong { color: var(--paper); font-size: .95rem; }
.vs-soltar span { font-size: .75rem; }
.vs-soltar:hover, .vs-soltar:focus-visible, .vs-soltar.sobre { border-color: var(--ember-bright); background: rgba(196, 23, 42, .1); outline: none; }
.vs-acoes-arquivos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

.vs-contagem { color: var(--paper); letter-spacing: .04em; text-transform: none; }
.vs-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vs-item {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: .6rem 2.4rem .6rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--fog);
  border-radius: 8px;
}
.vs-item.estado-pronta { border-left-color: #6fcf97; }
.vs-item.estado-erro { border-left-color: var(--ember-bright); }
.vs-item.estado-sem-par { border-left-color: #f0cd85; }
.vs-item.estado-pulada { opacity: .7; }
.vs-item.estado-separando, .vs-item.estado-codificando, .vs-item.estado-enviando, .vs-item.estado-decodificando { border-left-color: var(--ember-bright); }
.vs-item-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; min-width: 0; }
.vs-item-nome { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vs-item-estado { flex: none; font-size: .72rem; font-weight: 700; color: var(--fog); }
.estado-pronta .vs-item-estado { color: #6fcf97; }
.estado-erro .vs-item-estado { color: var(--ember-bright); }
.vs-item-musica { font-size: .78rem; color: var(--fog); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.vs-item-musica b { color: var(--paper-dim); }
.vs-item-barra { height: 4px; border-radius: 4px; background: var(--void); overflow: hidden; }
.vs-item-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-bright)); transition: width .3s linear; }
.vs-mini { padding: .2rem .55rem; font-size: .72rem; border-radius: 6px; }
.vs-tirar {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fog);
  box-shadow: none;
}
.vs-tirar:hover { color: var(--ember-bright); border: none; box-shadow: none; }
.vs-comando { display: grid; gap: .4rem; }
.vs-comando button:disabled { opacity: .45; cursor: not-allowed; }
.vs-status { display: grid; gap: .45rem; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.vs-status p { margin: 0; font-size: .85rem; }
.vs-resumo { margin: 0; font-size: .8rem; color: var(--paper-dim); text-align: center; }

/* ---------- faixas reais ---------- */
.vs-modos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.vs-modos button {
  min-height: 2.6rem;
  padding: .4rem .5rem;
  background: var(--surface-2);
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.vs-modos button.ativo { background: rgba(196, 23, 42, .22); border-color: var(--ember-bright); color: var(--paper); box-shadow: var(--shadow-ember); }
.vs-relogio { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; color: var(--paper); }
.vs-real-posicao { width: 100%; height: 2.2rem; margin: 0; accent-color: var(--ember-bright); touch-action: none; }
.vs-real-posicao:disabled { opacity: .4; }
.vs-refazer { justify-self: center; font-size: .8rem; color: var(--fog); }
.vs-convite { border-left: 3px solid var(--ember); }
.vs-botao-link { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; padding: .75rem 1.2rem; border-radius: 8px; color: var(--paper); font-weight: 700; }
.vs-botao-link:hover { text-decoration: none; }
.vs-tocar:disabled { opacity: .45; }

/* ---------- importar dentro do VS ---------- */
.vs-importar { border-left: 3px solid var(--ember); }
#vs-importar-inicio { display: grid; gap: .8rem; }
.vs-onde { display: grid; gap: .4rem; }
.vs-lojas { display: flex; flex-wrap: wrap; gap: .4rem; }
.vs-lojas a {
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--paper-dim);
  font-size: .8rem;
  font-weight: 600;
}
.vs-lojas a:hover { border-color: var(--ember); color: var(--paper); text-decoration: none; }
button.vs-refazer { background: transparent; border: none; box-shadow: none; padding: .3rem; }
button.vs-refazer:hover { color: var(--paper); border: none; box-shadow: none; }
.vs-vazio .vs-refazer { margin-top: .2rem; }
.vs-prontas { width: 100%; text-align: left; margin-top: .6rem; }
.vs-prontas h2 { margin: 0 0 .4rem; font-size: .95rem; color: var(--paper-dim); }
.vs-prontas .lista-candidatos { padding: 0; max-height: none; }

/* ---------- guia da banda ---------- */
.vs-guia-agora { display: grid; justify-items: center; gap: .15rem; text-align: center; padding: .3rem 0; }
.vs-guia-agora[hidden] { display: none; }
.vs-guia {
  display: grid;
  gap: .6rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.vs-guia h3 { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.vs-guia-ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; align-items: end; }
.vs-guia-ajustes label { display: grid; gap: .25rem; font-size: .75rem; color: var(--fog); }
.vs-guia-ajuste-largo { grid-column: 1 / -1; }
.vs-guia-ajustes select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: .5rem 1.9rem .5rem .6rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--paper);
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9088' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.vs-guia-ajustes select:hover { border-color: var(--ember); }
.vs-guia-ajustes select:focus-visible { outline: none; border-color: var(--ember-bright); }
.vs-guia-ajustes select option { background: var(--surface-2); color: var(--paper); }
.vs-guia-ajustes input[type="range"] { width: 100%; height: 1.8rem; margin: 0; accent-color: var(--ember-bright); }
.vs-guia-ajustes .vs-mini { grid-column: 1 / -1; justify-self: start; }
.vs-guia-sincronia { border-top: 1px solid var(--line); padding-top: .6rem; }
.vs-guia-sincronia summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--paper-dim); }
.vs-guia-sincronia summary small { font-weight: 500; color: var(--fog); }
.vs-guia-sincronia[open] summary { margin-bottom: .5rem; }
.vs-guia-sincronia > * + * { margin-top: .6rem; }
.vs-guia-acoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.vs-mini.confirmar { border-color: var(--ember-bright); background: rgba(196, 23, 42, .25); color: var(--paper); }
.vs-guia-marcar { display: grid; gap: .35rem; }
.vs-guia-linha { display: flex; gap: .4rem; }
.vs-guia-linha input { flex: 1; min-width: 0; }
.vs-guia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 18rem; overflow-y: auto; }
.vs-guia-lista li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 4.6rem 2rem; gap: .35rem; align-items: center; }
.vs-guia-lista input { min-width: 0; width: 100%; padding: .35rem .45rem; font-size: .82rem; }
.vs-guia-lista button { padding: .35rem .3rem; font-size: .8rem; }

/* ---------- sincronizar os acordes tocando ---------- */
.vs-guia-acordes-tap { display: grid; gap: .3rem; padding: .7rem; border-radius: 8px; background: var(--surface-3, rgba(255, 255, 255, .04)); text-align: center; }
.vs-guia-acordes-tap p { margin: 0; }
#vs-guia-acordes-agora { font-size: 1.3rem; color: var(--ember-bright); }
.vs-mini-grande { padding: .8rem 1rem; font-size: 1rem; font-weight: 800; width: 100%; }
.vs-guia-lista .vs-guia-ir { font-family: var(--font-mono); font-weight: 700; }