/* ---------- pedaleira ---------- */
/* canais (VOZ, VIOLÃO… MASTER) no estilo "Linha colorida": o nome do escolhido acende, o traço embaixo tem a cor
   do canal e o número de efeitos ligados aparece num pontinho colorido (com 0 não aparece nada) */
.pb-chs { display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: 12px; border-bottom: 1px solid #ffffff10; }
.pb-ch {
  position: relative; min-width: 0; padding: 11px 2px 13px; border: none; border-radius: 0; background: none; box-shadow: none; cursor: pointer;
  color: #8b909c; font: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: color .25s;
}
.pb-ch .n { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-indent: .14em; white-space: nowrap; }
.pb-ch:hover { color: #c3c7cf; }
.pb-ch.on { color: #fff; }
.pb-ch::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px;
  background: var(--ch); box-shadow: 0 0 8px var(--ch); transform: scaleX(0); opacity: 0; transition: transform .3s, opacity .3s;
}
.pb-ch.on::after { transform: scaleX(1); opacity: 1; }
.pb-ch i { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ch); display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0; line-height: 1; }
.pb-ch i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ch); }
.pb-ch i.z { display: none; }
/* tablet: o número vai para baixo do nome (todos os nomes na mesma altura) */
@media (max-width: 1100px) {
  .pb-ch { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 10px 2px 10px; }
  .pb-ch .n { letter-spacing: .1em; text-indent: .1em; }
  .pb-ch i.z { display: inline-flex; visibility: hidden; }
}
/* celular: duas linhas de 4 canais */
@media (max-width: 700px) { .pb-chs { grid-template-columns: repeat(4, 1fr); } .pb-ch .n { font-size: 10px; letter-spacing: .08em; text-indent: .08em; } }
.pb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  background: #121317; border: 1px solid #2c2f37; border-left: 6px solid var(--ch); margin-bottom: 12px; }
.pb-title b { font-size: 18px; letter-spacing: 1px; margin-right: 10px; }
.pb-title span { font-size: 12px; color: #8b909c; }
.pb-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pb-btn { padding: 9px 12px; border-radius: 8px; border: 1px solid #3a3e48; background: linear-gradient(#30333b, #24262c); color: #e8e9ec; font-weight: 800; font-size: 11px; letter-spacing: .5px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.pb-btn.on { background: #ffd21a; color: #1a1300; border-color: #ffd21a; }
.pb-del { color: #ff9b95; }

/* tábua com cabos entre os pedais */
.board { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 22px 16px; border-radius: 14px;
  background: repeating-linear-gradient(90deg, #1a1b1f 0 2px, #141518 2px 6px), #141518;
  border: 1px solid #2a2c32; box-shadow: inset 0 6px 18px #000c; }
.cable { flex: 0 0 26px; align-self: center; height: 6px; border-radius: 3px; background: linear-gradient(#333, #0c0c0c); box-shadow: 0 2px 2px #0008; }
.jack { flex: none; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 6px; border-radius: 6px;
  background: linear-gradient(90deg, #8a8a8a, #d8d8d8, #8a8a8a); color: #222; font: 900 11px sans-serif; letter-spacing: 2px; }

.pedal-unit { position: relative; flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 88%, #fff) 0%, var(--pc) 35%, color-mix(in srgb, var(--pc) 70%, #000) 100%);
  box-shadow: 0 10px 22px #000b, inset 0 2px 0 #ffffff40, inset 0 -3px 0 #00000055; color: #fff; transition: transform .12s, box-shadow .12s, filter .15s; }
.pedal-unit.mid { flex-basis: 290px; }
.pedal-unit.wide { flex-basis: 380px; }
.pedal-unit.off { filter: saturate(.35) brightness(.7); }
.pedal-unit.darktxt { color: #1a1300; }
.pedal-unit.dragging { opacity: .5; }
.pedal-unit.dropto { transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 14px 26px #000c; }
.pedal-unit.empty { background: transparent; border: 2px dashed #3d414b; box-shadow: none; align-items: center; justify-content: center; min-height: 330px; flex-basis: 180px; }
.pu-plus { font-size: 46px; color: #4a4f5a; font-weight: 200; }
.pedal-unit.empty .pu-type { flex: none; width: 150px; height: auto; }
.pu-top { display: flex; gap: 6px; align-items: center; }
.pu-grip { cursor: grab; opacity: .7; font-weight: 900; letter-spacing: -2px; user-select: none; }
.pu-type { flex: 1; min-width: 0; font-size: 11px !important; padding: 5px 22px 5px 7px !important; background-color: #0008 !important; border-color: #0006 !important; background-position: right 6px center !important; }
.pu-graph { width: 100%; height: 86px; border-radius: 6px; border: 2px solid #0009; display: block; }
.pu-gr { height: 7px; border-radius: 4px; background: #0007; overflow: hidden; }
.pu-gr i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff176, #ff3b30); transition: width .08s; }
.pu-knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px 6px; }
.pu-knobs .mk-dial { width: 46px; height: 46px; background: radial-gradient(circle at 35% 30%, #f2f2f2, #9a9a9a 55%, #3c3c3c); box-shadow: 0 4px 6px #0009; }
.pu-knobs .mk-dial::before { display: none; }
.pu-knobs .mk-cap { background: radial-gradient(circle at 40% 35%, #fafafa, #c8c8c8 60%, #8f8f8f); }
.pu-knobs .mk-cap i { background: #111; box-shadow: none; }
.pu-knobs .mk-val { color: inherit; font-size: 10px; }
.pu-knobs .mk-lbl { color: inherit; opacity: .85; font-size: 8.5px; line-height: 1.15; }
.pu-sels { display: flex; flex-direction: column; gap: 6px; }
.pu-sels label { display: flex; flex-direction: column; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; opacity: .95; }
.pu-sels select { font-size: 11px !important; padding: 5px 22px 5px 7px !important; background-color: #0008 !important; border-color: #0006 !important; }
.pu-name { margin-top: auto; text-align: center; font: italic 900 26px/1 Georgia, serif; letter-spacing: 1px; text-shadow: 0 2px 0 #0005; }
.pu-name small { display: block; font: 700 10px sans-serif; font-style: normal; letter-spacing: .5px; opacity: .8; margin-top: 4px; text-shadow: none; }
.pu-led { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto; background: #3a0d0a; box-shadow: inset 0 1px 2px #000; }
.pedal-unit:not(.off) .pu-led { background: #ff2a1a; box-shadow: 0 0 10px #ff2a1a, 0 0 2px #fff inset; }
.pu-fs { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; border: none; cursor: pointer;
  background: url(../img/pata.svg) center 46% / 52% no-repeat, radial-gradient(circle at 40% 35%, #fff, #c4c4c4 45%, #7a7a7a 75%, #444); box-shadow: 0 6px 10px #000a, 0 0 0 6px #9a9a9a, 0 0 0 8px #444; }
.pu-fs:active { transform: translateY(3px) scale(.97); }
.pb-hint { margin-top: 10px; }

/* ---------- pedal VOZ ao vivo ---------- */
.pedal-unit.pv { flex-basis: 430px; }
.pv-meters { display: flex; flex-direction: column; gap: 6px; background: #0007; border-radius: 8px; padding: 8px 10px; }
.pv-meters label { display: grid; grid-template-columns: 86px 1fr 58px; align-items: center; gap: 8px; font: 800 9px sans-serif; letter-spacing: .6px; }
.pv-meters b { font: 700 11px Menlo, monospace; text-align: right; }
.pv-bar { height: 8px; border-radius: 4px; background: #0009; overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 0; transition: width .06s; background: #3ddc84; }
.pv-gr i { background: linear-gradient(90deg, #fff176, #ff9f1a); }
.pv-knobs { grid-template-columns: repeat(6, 1fr); }
.pv-knobs .mk-dial::after { content: ''; position: absolute; left: 50%; top: -7px; width: 2px; height: 5px; margin-left: -1px; background: #fff9; border-radius: 1px; }
.pv-knobs .mk-dial { position: relative; }
.pv-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
.pv-btn, .pv-mini { padding: 7px 9px; border-radius: 7px; border: 1px solid #0006; background: #0006; color: #fff; font: 800 10px sans-serif; letter-spacing: .5px; cursor: pointer; }
.pv-btn.on { background: #fff; color: #7a1712; }
.pv-mini { padding: 3px 7px; font-size: 9px; }
.pv-sync { display: flex; align-items: center; gap: 4px; font: 800 10px sans-serif; }
.pv-sync select { font-size: 11px !important; padding: 4px 18px 4px 6px !important; background-color: #0008 !important; border-color: #0006 !important; }
.pv-afb { font-size: 10px; text-align: center; opacity: .9; }
.pv-big { gap: 10px; }
.pv-mode { flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #fff; background: #fff; color: #7a1712; font: 900 18px sans-serif; letter-spacing: 2px; cursor: pointer; }
.pv-mode small { display: block; font: 700 9px sans-serif; letter-spacing: .4px; opacity: .8; }
.pv-mode.fala { background: #0006; color: #fff; }
.pv-mute { width: 84px; align-self: stretch; border-radius: 10px; border: 2px solid #0006; background: #0006; color: #fff; font: 900 13px sans-serif; cursor: pointer; }
.pv-mute.on { background: #ff3b30; border-color: #fff; }
/* pedal VIOLÃO (nylon) */
.pedal-unit.pg { flex-basis: 470px; }
.pg .pv-knobs { grid-template-columns: repeat(7, 1fr); }
.pg .pv-btn.on { color: #5a3416; }
.pg-body { background: #0006; border-radius: 8px; padding: 6px; }
.pg-curve { display: block; width: 100%; height: 58px; border-radius: 5px; }
.pg-info { font: 700 9.5px sans-serif; text-align: center; margin-top: 4px; opacity: .9; }
.pg-learnrow { font-size: 10px; }
.pg-learn { background: #1f6b3a; }
.pg-learn.on { background: #fff; color: #1f6b3a !important; animation: pgblink 1s infinite; }
@keyframes pgblink { 50% { opacity: .6; } }
.pg-lprog { opacity: .9; }
.pg-styles { gap: 6px; }
.pg-style { flex: 1; padding: 8px 4px; border-radius: 9px; border: 2px solid #fff6; background: #0005; color: #fff; font: 900 13px sans-serif; letter-spacing: 1px; cursor: pointer; }
.pg-style small { display: block; font: 700 8.5px sans-serif; letter-spacing: .3px; opacity: .8; }
.pg-style.on { background: #fff; color: #5a3416; border-color: #fff; }
.pg-solo { width: 86px; align-self: stretch; border-radius: 10px; border: 2px solid #0006; background: #0006; color: #fff; font: 900 14px sans-serif; cursor: pointer; }
.pg-solo small, .pg-mute small { display: block; font: 700 9px sans-serif; opacity: .85; }
.pg-solo.on { background: #ffd21a; color: #3a2a00; border-color: #fff; }
.pg-soldb { width: 70px; font-size: 11px !important; padding: 4px 16px 4px 6px !important; background-color: #0008 !important; border-color: #0006 !important; }
.pg-tun { flex: 1; position: relative; min-height: 46px; border-radius: 10px; background: #0007; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.pg-note { font: 900 16px sans-serif; }
.pg-cents { font: 700 11px Menlo, monospace; opacity: .85; }
.pg-needle { position: absolute; bottom: 3px; left: 50%; width: 3px; height: 10px; margin-left: -1px; background: #ff9f1a; border-radius: 2px; transition: left .08s; }
.pg-tun::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 1px; height: 14px; background: #fff7; }
.pg-tun.big .pg-note { font-size: 24px; }
.pg-tun.ok { background: #1f6b3a; }
.pg-tun.ok .pg-needle { background: #fff; }

/* pedal da Loja que a conta ainda não tem: aparece ofuscado, não liga; a lista de cima continua para trocar/remover */
.pedal-unit.locked { position: relative; }
.pedal-unit.locked > *:not(.pu-top):not(.pu-lock) { opacity: .25; filter: grayscale(.75) blur(.7px); pointer-events: none; }
.pu-lock {
  position: absolute; left: 10px; right: 10px; top: 52%; transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; color: #fff; text-shadow: 0 1px 3px #000d;
}
.pu-lock b { font-size: 22px; line-height: 1; }
.pu-lock span { font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.pu-lock small { font-size: 11px; opacity: .9; }
.pu-buy { margin-top: 8px; border: 0; border-radius: 999px; padding: 8px 16px; background: #fff; color: #111; font: 700 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 3px 10px #0007; text-shadow: none; }
.pu-buy:hover { background: #ffe9e6; }
.pb-btn.pb-mute.on { background: #e8392c; color: #fff; border-color: #ff6a5a; }