/* ============================================================
   Pad — o painel de ajustes (usado na pagina Pad e no modal da
   musica) e o palco com o orbe que "respira" enquanto toca.
   ============================================================ */

/* ---------- palco (so na pagina Pad) ---------- */
.pad-pagina {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: .25rem 1rem 1.5rem;
  display: grid;
  gap: 1rem;
}

.pad-palco {
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: 1.6rem 1rem 1.2rem;
  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, .86) 70%);
}

.pad-orbe {
  --brilho: 0;
  position: relative;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 36, 56, .35);
  background: radial-gradient(circle at 50% 38%, #3a1016 0%, #1b0c0e 55%, #0f0808 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  align-content: center;
  gap: .1rem;
  cursor: pointer;
  box-shadow: 0 0 calc(30px + var(--brilho) * 60px) calc(var(--brilho) * 8px) rgba(255, 36, 56, calc(.15 + var(--brilho) * .35));
  transition: box-shadow .6s ease, border-color .6s ease;
  -webkit-tap-highlight-color: transparent;
}
.pad-orbe:active { transform: scale(.97); }
.pad-orbe.tocando {
  --brilho: 1;
  border-color: rgba(255, 36, 56, .8);
  animation: pad-respirar 5s ease-in-out infinite;
}
.pad-orbe::before,
.pad-orbe::after {
  content: '';
  position: absolute;
  inset: -.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 36, 56, .28);
  opacity: 0;
  pointer-events: none;
}
.pad-orbe.tocando::before { animation: pad-onda 5s ease-out infinite; }
.pad-orbe.tocando::after { animation: pad-onda 5s ease-out 2.5s infinite; }

@keyframes pad-respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes pad-onda {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.pad-orbe-tom {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.pad-orbe-acao {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog);
}
.pad-orbe.tocando .pad-orbe-acao { color: var(--ember-bright); }

.pad-notas-tocando {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--fog);
  min-height: 1.2em;
  text-align: center;
}

/* ---------- painel de ajustes ---------- */
.pad-painel { display: grid; gap: .9rem; }

.pad-bloco {
  display: grid;
  gap: .55rem;
  padding: .9rem;
  background: rgba(21, 17, 13, .86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pad-bloco[hidden] { display: none; }
.pad-bloco h3 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fog);
}
.pad-valor { color: var(--paper); letter-spacing: .04em; text-transform: none; font-size: .85rem; }

.pad-notas { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.pad-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.pad-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.pad-opcoes-pequenas { grid-template-columns: repeat(3, 1fr); }

.pad-painel button[role="radio"] {
  min-height: 2.6rem;
  padding: .45rem .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: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pad-painel button[role="radio"] small { font-size: .7rem; font-weight: 500; color: var(--fog); line-height: 1.2; }
.pad-painel button[role="radio"]:active { transform: scale(.96); }
.pad-painel button[role="radio"].ativo {
  background: rgba(196, 23, 42, .22);
  border-color: var(--ember-bright);
  color: var(--paper);
  box-shadow: var(--shadow-ember);
}
.pad-painel button[role="radio"].ativo small { color: var(--paper-dim); }

.pad-painel input[type="range"] {
  width: 100%;
  accent-color: var(--ember-bright);
  height: 1.6rem;
  margin: 0;
}
.pad-extremos { display: flex; justify-content: space-between; font-size: .7rem; color: var(--fog); }
.pad-ajustes { gap: .9rem; }
.pad-ajuste { display: grid; gap: .1rem; }
.pad-ajuste-rotulo { font-size: .85rem; font-weight: 600; color: var(--paper-dim); }

/* interruptores */
.pad-interruptor {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .55rem .3rem;
  background: transparent;
  border: none;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.pad-interruptor-texto { display: grid; gap: .1rem; }
.pad-interruptor-texto strong { font-size: .9rem; }
.pad-interruptor-texto small { font-size: .74rem; color: var(--fog); font-weight: 500; }
.pad-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;
}
.pad-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;
}
.pad-interruptor.ativo .pad-interruptor-trilho { background: rgba(196, 23, 42, .35); border-color: var(--ember-bright); }
.pad-interruptor.ativo .pad-interruptor-bolinha { left: calc(100% - 1.25rem); background: var(--ember-bright); }

/* ---------- dentro da musica ---------- */
.linha-pad { display: flex; gap: .4rem; align-items: center; }
.linha-pad button { flex: 1; }
#btn-pad-tocar[aria-pressed="true"] {
  background: rgba(196, 23, 42, .25);
  border-color: var(--ember-bright);
  color: var(--paper);
  animation: pad-respirar 5s ease-in-out infinite;
}

/* "display" so com [open]: sem isso o modal aparecia sempre, vazio, no fim da pagina */
dialog.modal-pad { width: min(28rem, 94vw); max-height: 92vh; }
dialog.modal-pad[open] { display: flex; flex-direction: column; }
.modal-pad .modal-corpo { overflow-y: auto; overscroll-behavior: contain; padding: .9rem; }
.modal-pad .modal-acoes { padding: .7rem .9rem; border-top: 1px solid var(--line); justify-content: space-between; }
.modal-pad .modal-acoes button { flex: 1; }
.modal-pad .pad-bloco { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .pad-orbe.tocando, .pad-orbe.tocando::before, .pad-orbe.tocando::after, #btn-pad-tocar[aria-pressed="true"] { animation: none; }
}

/* o estilo global de botao ".ativo" pintava a linha inteira do interruptor */
.pad-painel .pad-interruptor,
.pad-painel .pad-interruptor.ativo {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--paper);
}

/* ---------- estilos worship, meus pads, efeitos, reset ---------- */
.pad-estilos { grid-template-columns: 1fr; }
.pad-estilos button[role="radio"] { text-align: left; justify-items: start; padding: .6rem .75rem; }

.pad-salvos { display: flex; flex-wrap: wrap; gap: .4rem; }
.pad-vazio { margin: 0; font-size: .8rem; color: var(--fog); }
.pad-salvo {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.pad-salvo.ativo { border-color: var(--ember-bright); background: rgba(196, 23, 42, .22); box-shadow: var(--shadow-ember); }
.pad-salvo button {
  background: transparent;
  border: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem .75rem;
  cursor: pointer;
  box-shadow: none;
}
.pad-salvo .pad-salvo-remover { color: var(--fog); padding: .45rem .65rem .45rem .3rem; font-size: .8rem; }
.pad-salvo .pad-salvo-remover:hover { color: var(--ember-bright); }

.pad-salvar { display: flex; gap: .4rem; }
.pad-salvar input { flex: 1; min-width: 0; }
.pad-salvar button { flex: none; padding: .45rem .9rem; }
.pad-aviso { min-height: 1.1em; font-size: .78rem; color: var(--paper-dim); }

.pad-ajuste-rotulo small { display: block; font-size: .7rem; font-weight: 500; color: var(--fog); }

.pad-painel .pad-resetar {
  width: 100%;
  padding: .75rem;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--fog);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.pad-painel .pad-resetar.confirmar {
  border-style: solid;
  border-color: var(--ember-bright);
  color: var(--paper);
  background: rgba(196, 23, 42, .2);
}

.pad-dica { font-size: .74rem; line-height: 1.4; color: var(--fog); }
.pad-dica strong { color: var(--paper-dim); font-weight: 600; }

/* botao "VS" ao lado do Pad na tela da cifra */
.botao-vs {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--paper);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.botao-vs:hover { border-color: var(--ember); color: var(--paper); text-decoration: none; box-shadow: var(--shadow-ember); }