/* Palco — barra "Voz do cantor" (auxílio contínuo, 0-100%).
   Arquivo próprio (style.css tem outro dono): a barra do canto, acima do Parar, e a mesma barra
   no card de Ajustes. Usa as cores de :root de style.css. */

/* ---------- a barra (as duas) ---------- */
/* trilha ciano (a voz de apoio) em vez do magenta dos outros sliders; o preenchimento vem de --p */
input[type="range"].barra-voz::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, var(--ciano) 0 var(--p, 50%), rgba(255, 255, 255, 0.15) var(--p, 50%) 100%);
}
input[type="range"].barra-voz::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -11px;
  box-shadow: 0 0 0 4px rgba(61, 224, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}
input[type="range"].barra-voz:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--magenta), 0 2px 8px rgba(0, 0, 0, 0.45);
}
input[type="range"].barra-voz::-moz-range-track { height: 8px; }
input[type="range"].barra-voz::-moz-range-progress { height: 8px; background: var(--ciano); }
input[type="range"].barra-voz::-moz-range-thumb {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 4px rgba(61, 224, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.auxilio-dica b { color: var(--ciano); }

/* ---------- a do canto: sempre visível, compacta, logo acima do Parar ---------- */
.aux-vivo {
  display: flex;
  flex-direction: column;
  padding: 7px 12px 5px;
  border-radius: var(--raio-btn, 14px);
  border: 1px solid rgba(61, 224, 255, 0.22);
  background:
    linear-gradient(90deg, rgba(61, 224, 255, 0.07), rgba(61, 224, 255, 0.02)),
    rgba(4, 2, 10, 0.45);
}
.aux-vivo-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}
.aux-vivo-nome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
  color: var(--texto-2);
  cursor: pointer;
}
.aux-vivo-nome .ic { width: 17px; height: 17px; flex: none; color: var(--ciano); }
.aux-vivo-pct {
  font-family: var(--mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  min-width: 4ch;
}
.aux-vivo-vale {
  margin-left: auto;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ciano);
  background: rgba(61, 224, 255, 0.1);
  border: 1px solid rgba(61, 224, 255, 0.28);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* sem voz nenhuma: a nota vale inteira */
.aux-vivo-vale.cheio {
  color: var(--verde);
  background: rgba(61, 255, 168, 0.1);
  border-color: rgba(61, 255, 168, 0.32);
}
.aux-vivo input[type="range"] {
  height: 38px;
  margin: 0;
}
.aux-vivo-pontas {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -7px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--texto-3);
}

/* A barra entra entre a pista e o Parar: num celular de 812 px a pista de 64vh empurrava o Parar
   para fora da tela. Em vez de mexer na altura da pista (style.css), so poe um TETO nela durante o
   canto, do tamanho que sobra para barra + Parar caberem na tela (em tela alta o teto nem pega). */
.tela-palco.cantando .pista-wrap {
  max-height: max(240px, calc(100vh - 340px - var(--safe-b, 0px)));
  max-height: max(240px, calc(100svh - 340px - var(--safe-b, 0px)));
}

/* cantando, a barra do canto é a que vale: a cópia do card de Ajustes some (se o card abrir) */
.tela-palco.cantando .ajuste-auxilio { display: none; }

/* ---------- ajuda automática da voz (js/ajuda-voz.js): a "rodinha de bicicleta" ----------
   Botão "ajuda auto" ao lado do "vale": ligado = verde; desligado = riscado. Enquanto a ajuda está
   tocando (a pessoa travou ou desafinou), a caixa inteira acende de verde e o rótulo ganha
   " · te ajudando". Quando ela firma, apaga sozinho. */
.aux-vivo-ajuda {
  flex: none;
  margin: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--verde);
  background: rgba(61, 255, 168, 0.1);
  border: 1px solid rgba(61, 255, 168, 0.32);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.aux-vivo-ajuda[aria-pressed="false"] {
  color: var(--texto-3);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  text-decoration: line-through;
}
.aux-vivo-ajudando {
  display: none;
  font-weight: 600;
  color: var(--verde);
}
.aux-vivo.ajudando {
  border-color: rgba(61, 255, 168, 0.5);
  box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.18);
  background:
    linear-gradient(90deg, rgba(61, 255, 168, 0.1), rgba(61, 255, 168, 0.03)),
    rgba(4, 2, 10, 0.45);
}
.aux-vivo.ajudando .aux-vivo-nome .ic { color: var(--verde); }
/* (22/10/2026) o " · te ajudando" miúdo deu lugar ao SELO GRANDE perto da letra (abaixo): na caixa da barra ele não
   cabia (no celular encavalava em cima do "0%"; na TV espremia o "Voz do cantor" em 3 linhas). A caixa continua
   acendendo enquanto a ajuda toca */
.aux-vivo.ajudando .aux-vivo-ajudando { display: none; }

/* ---------- o SELO GRANDE da ajuda, perto da letra (js/selo-ajuda.js, 22/10/2026) ----------
   Ideia da revisão da edição Embaixador aprovada pelo dono: o " · te ajudando" acima é miúdo e a câmera não pega.
   Quando a voz do cantor sobe sozinha, aparece "O cantor entrou junto pra te ajudar" logo ACIMA da faixa da letra (o
   pé encosta no --letra-y que o app põe na caixa da pista: só o véu de cima da faixa fica por baixo, nenhuma palavra)
   e some quando a pessoa firma. Não pega toque. Na TV (palco-telao) é bem maior. A edição pinta de arena
   (css/embaixador.css). */
.selo-ajuda {
  position: absolute;
  left: 50%;
  top: var(--letra-y, 70%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  border: 2px solid var(--verde);
  background: rgba(5, 20, 14, 0.88);
  box-shadow: 0 0 0 4px rgba(61, 255, 168, 0.14), 0 10px 28px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px)) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.selo-ajuda.visivel {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 8px)) scale(1);
}
.selo-ajuda-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde);
  color: #04140c;
}
.selo-ajuda-ic .ic { width: 20px; height: 20px; }
/* pausado ou fora do canto: some (o laço do palco para na pausa e não apagaria sozinho) */
.tela-palco.pausada .selo-ajuda.visivel,
.tela-palco:not(.cantando) .selo-ajuda.visivel { opacity: 0; }
/* a TV / o notebook deitado: letra de ver do sofá (e da câmera) */
html.palco-telao .selo-ajuda {
  gap: 16px;
  padding: 10px 30px 10px 10px;
  border-width: 3px;
  font-size: clamp(24px, 2vw, 40px);
  box-shadow: 0 0 0 6px rgba(61, 255, 168, 0.14), 0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, calc(-100% - 12px)) scale(0.92);
}
html.palco-telao .selo-ajuda.visivel { transform: translate(-50%, calc(-100% - 12px)) scale(1); }
html.palco-telao .selo-ajuda-ic { width: 1.55em; height: 1.55em; }
html.palco-telao .selo-ajuda-ic .ic { width: 0.9em; height: 0.9em; }
@media (prefers-reduced-motion: reduce) {
  .selo-ajuda { transition: none; }
}

/* Modelo 4 (Smule): a frase grande ocupa o ALTO da pista, então o balão grande da ajuda tapava a
   letra (dono 28/10). No Smule o selo vira só um ÍCONE pequeno no canto de baixo; o texto continua
   no DOM, escondido, pro leitor de tela. (Vem depois pra vencer a ordem das regras do telão.) */
html.pista-smule .selo-ajuda {
  left: auto;
  right: 14px;
  top: auto;
  bottom: 14px;
  gap: 0;
  padding: 0;
  border-width: 2px;
  font-size: 0;
  box-shadow: 0 0 0 3px rgba(61, 255, 168, 0.18), 0 6px 16px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
}
html.pista-smule .selo-ajuda.visivel { transform: scale(1); }
html.pista-smule .selo-ajuda-ic { width: 30px; height: 30px; }
html.pista-smule .selo-ajuda-ic .ic { width: 18px; height: 18px; }
html.pista-smule .selo-ajuda-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.pista-smule.palco-telao .selo-ajuda { right: 22px; bottom: 22px; }
html.pista-smule.palco-telao .selo-ajuda-ic { width: 46px; height: 46px; }
html.pista-smule.palco-telao .selo-ajuda-ic .ic { width: 27px; height: 27px; }