.transport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:112px;align-items:end}.metal-button{position:relative;height:104px;border:1px solid #666;border-radius:8px;color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.09),transparent 25%,rgba(255,255,255,.05) 50%,transparent 75%),linear-gradient(#555 0%,#2a2a2a 40%,#070707 100%);box-shadow:inset 0 1px 0 #e2e2e2,inset 0 -12px 16px #000,0 3px 0 #030303,0 0 0 1px rgba(0,0,0,.85);cursor:pointer;overflow:hidden;text-shadow:0 1px 2px #000;transition:transform .08s ease,filter .12s ease,box-shadow .12s ease}.metal-button::before{content:"";position:absolute;inset:7px 7px 29px;border-radius:5px;background:linear-gradient(#f6f6f6,#8a8a8a 44%,#171717 45%,#070707);opacity:.25;border:1px solid rgba(255,255,255,.22)}.metal-button::after{content:"";position:absolute;left:8px;right:8px;top:9px;height:15px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}.metal-button:hover{filter:brightness(1.12);box-shadow:inset 0 1px 0 #fff,inset 0 -12px 16px #000,0 0 14px rgba(255,133,0,.25),0 3px 0 #030303}.metal-button:active,.metal-button.is-active{transform:translateY(2px);box-shadow:inset 0 1px 24px #000,0 1px 0 #050505}.metal-button small{position:absolute;top:8px;left:0;right:0;font-size:10px;font-weight:900;letter-spacing:.05em}.icon{position:relative;display:block;margin:32px auto 0;width:30px;height:30px;z-index:1}.play{clip-path:polygon(10% 0,100% 50%,10% 100%);background:#efefef;filter:drop-shadow(0 2px 1px #000)}.stop{background:#efefef;width:25px;height:25px;box-shadow:0 2px 1px #000}.pause:before,.pause:after{content:"";display:inline-block;width:8px;height:31px;background:#efefef;margin:0 3px;box-shadow:0 2px 1px #000}.speaker{background:linear-gradient(90deg,#eee 0 45%,transparent 45%);clip-path:polygon(0 35%,35% 35%,80% 0,80% 100%,35% 65%,0 65%);filter:drop-shadow(0 2px 1px #000)}.led{position:absolute;left:50%;bottom:10px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#111;border:1px solid #777;box-shadow:inset 0 1px 3px #000}.led.green.is-on{background:var(--green);box-shadow:0 0 13px var(--green),inset 0 1px 3px rgba(255,255,255,.65)}.led.red.is-on{background:var(--red);box-shadow:0 0 13px var(--red),inset 0 1px 3px rgba(255,255,255,.65)}.led.amber.is-on{background:var(--amber);box-shadow:0 0 13px var(--amber),inset 0 1px 3px rgba(255,255,255,.65)}.led.is-on{background:#fff;box-shadow:0 0 12px #fff}.volume-module{text-align:center}.knob-wrap{position:relative;height:112px;padding-top:10px}.volume-range{position:absolute;opacity:.001;z-index:4;inset:auto 10px 4px 10px;width:calc(100% - 20px);height:20px;cursor:pointer}.pot-scale,.knob-wrap::before{content:"";position:absolute;left:50%;top:6px;width:88px;height:88px;transform:translateX(-50%);border-radius:50%;background:repeating-conic-gradient(from -135deg,rgba(255,154,38,.95) 0deg 2deg,transparent 2deg 12deg);-webkit-mask:radial-gradient(circle,transparent 0 35px,#000 36px 43px,transparent 44px);mask:radial-gradient(circle,transparent 0 35px,#000 36px 43px,transparent 44px);opacity:.95}.potentiometer{position:relative;width:64px;height:64px;border-radius:50%;margin:14px auto 0;background:radial-gradient(circle at 32% 25%,#d7d7d7 0 4%,#6a6a6a 13%,#242424 46%,#070707 74%,#000 100%),conic-gradient(from 180deg,#101010,#777,#151515,#666,#101010);border:2px solid #0b0b0b;box-shadow:0 0 0 3px #2b2b2b,0 0 0 5px rgba(255,133,0,.55),inset 0 2px 4px rgba(255,255,255,.35),inset 0 -10px 18px #000,0 7px 12px rgba(0,0,0,.75);transform:rotate(var(--knob-rotation,-135deg));transition:transform .045s linear;cursor:grab;touch-action:none;user-select:none;z-index:2}.potentiometer::before{content:"";position:absolute;left:50%;top:6px;width:6px;height:24px;transform:translateX(-50%);border-radius:4px;background:#ff9b1f;box-shadow:0 0 9px rgba(255,133,0,.9),inset 0 1px 1px rgba(255,255,255,.8)}.potentiometer::after{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#4d4d4d,#090909 72%);box-shadow:inset 0 2px 8px #000}.potentiometer:active{cursor:grabbing;box-shadow:0 0 0 3px #2a2a2a,0 0 0 5px rgba(255,133,0,.85),inset 0 2px 4px rgba(255,255,255,.35),inset 0 -10px 18px #000,0 0 22px rgba(255,133,0,.45)}.knob span{display:none}.volume-value{display:block;color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.05em;margin-top:6px;text-shadow:0 0 8px rgba(255,133,0,.55)}.vol-marks{position:absolute;left:12px;right:12px;bottom:17px;display:flex;justify-content:space-between;color:#ddd;font-size:13px;pointer-events:none}.vol-marks em{font-style:normal}.vol-marks strong{font-weight:normal}


/* === AJUSTE 2026-07: controles con presencia broadcast y alineación superior === */
.controls-module{padding-top:18px;}
.controls-module .module-title{height:24px;line-height:24px;letter-spacing:.08em;}
.transport-grid{
  height:116px;
  gap:7px;
  align-items:stretch;
  padding-top:6px;
}
.metal-button{
  height:104px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 18%,transparent 38%),
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 28%,rgba(255,255,255,.06) 50%,transparent 74%),
    linear-gradient(#555 0%,#1e1e1e 43%,#050505 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -16px 18px rgba(0,0,0,.92),
    0 3px 0 #030303,
    0 0 0 1px rgba(0,0,0,.9),
    0 8px 14px rgba(0,0,0,.45);
}
.metal-button::before{
  inset:27px 8px 31px;
  border-radius:4px;
  opacity:.78;
  background:
    linear-gradient(180deg,#fafafa 0%,#bfbfbf 22%,#5a5a5a 48%,#141414 49%,#050505 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -7px 10px rgba(0,0,0,.82);
}
.metal-button small{
  position:static;
  display:block;
  width:100%;
  height:22px;
  line-height:21px;
  margin:0 0 3px;
  font-size:10px;
  color:#f6f6f6;
  background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);
  z-index:2;
}
.icon{
  margin:17px auto 0;
  width:30px;
  height:30px;
  z-index:3;
}
.play{width:31px;height:31px;}
.stop{width:24px;height:24px;margin-top:20px;}
.pause{height:31px;margin-top:17px;white-space:nowrap;}
.pause:before,.pause:after{height:31px;width:8px;margin:0 3px;}
.speaker{width:32px;height:30px;margin-top:18px;}
.led{bottom:9px;width:12px;height:12px;margin-left:-6px;border-color:#7b7b7b;}
.metal-button:hover{filter:brightness(1.08);}
.metal-button:active,.metal-button.is-active{transform:translateY(1px);}

/* Potenciómetro: área de arrastre amplia, respuesta precisa con mouse y rueda */
.knob-wrap{height:116px;padding-top:10px;}
.volume-range{display:none;}
.knob-hit-area{position:absolute;left:50%;top:4px;width:106px;height:106px;transform:translateX(-50%);border-radius:50%;z-index:5;cursor:grab;touch-action:none;}
.knob-hit-area:active{cursor:grabbing;}
.potentiometer{width:68px;height:68px;margin-top:16px;pointer-events:none;}
.pot-scale,.knob-wrap::before{top:5px;width:98px;height:98px;-webkit-mask:radial-gradient(circle,transparent 0 37px,#000 38px 48px,transparent 49px);mask:radial-gradient(circle,transparent 0 37px,#000 38px 48px,transparent 49px);}
.volume-value{margin-top:4px;font-size:11px;}
.vol-marks{bottom:14px;}

/* =========================================================
   SRK Broadcast v3 - Mejora exclusiva de CONTROLES
   Objetivo: botones broadcast mejor alineados, con presencia
   tipo rack físico, sin alterar el resto del reproductor.
   ========================================================= */
.controls-module{
  padding:10px 8px 8px !important;
  overflow:hidden;
}
.controls-module .module-title{
  position:relative;
  display:block;
  height:25px;
  line-height:25px;
  margin:0 0 8px;
  border:1px solid #343434;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.15) 45%,rgba(0,0,0,.55)),
    linear-gradient(90deg,#0b0b0b,#202020 50%,#0b0b0b);
  color:#e8e8e8;
  text-align:center;
  font-size:12px;
  letter-spacing:.13em;
  text-shadow:0 1px 2px #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.75);
}
.transport-grid{
  height:107px !important;
  padding:0 !important;
  gap:7px !important;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch !important;
}
.metal-button{
  height:107px !important;
  min-width:0;
  position:relative;
  display:block !important;
  padding:0 !important;
  border-radius:7px;
  border:1px solid #5f5f5f;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.23),transparent 18%),
    linear-gradient(180deg,#5f5f5f 0%,#2e2e2e 18%,#131313 55%,#050505 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -14px 18px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 3px 0 #010101,
    0 8px 12px rgba(0,0,0,.46);
  transform:translateY(0);
}
.metal-button::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:9px;
  height:53px;
  border-radius:5px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.70),rgba(255,255,255,.12) 24%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.72)),
    linear-gradient(180deg,#e9e9e9 0%,#898989 37%,#222 38%,#060606 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -9px 12px rgba(0,0,0,.82),
    0 1px 1px rgba(0,0,0,.9);
  opacity:.94;
}
.metal-button::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:11px;
  height:18px;
  border-radius:5px 5px 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06),transparent);
  pointer-events:none;
}
.metal-button .icon{
  position:absolute;
  left:50%;
  top:25px;
  margin:0 !important;
  transform:translateX(-50%);
  z-index:4;
  filter:drop-shadow(0 2px 1px #000) drop-shadow(0 0 4px rgba(255,255,255,.15));
}
.metal-button .play{
  width:34px !important;
  height:34px !important;
  clip-path:polygon(8% 0,100% 50%,8% 100%);
  background:#f7f7f7;
}
.metal-button .stop{
  width:26px !important;
  height:26px !important;
  top:30px;
  background:#f3f3f3;
}
.metal-button .pause{
  top:27px;
  width:33px !important;
  height:33px !important;
  white-space:nowrap;
}
.metal-button .pause:before,
.metal-button .pause:after{
  content:"";
  display:inline-block;
  width:9px !important;
  height:33px !important;
  margin:0 3px !important;
  background:#f4f4f4;
  box-shadow:0 2px 1px #000;
}
.metal-button .speaker{
  top:29px;
  width:34px !important;
  height:28px !important;
  background:#f5f5f5;
  clip-path:polygon(0 35%,34% 35%,78% 4%,78% 96%,34% 65%,0 65%);
}
.metal-button small{
  position:absolute !important;
  left:0;
  right:0;
  top:66px !important;
  height:17px !important;
  line-height:17px !important;
  margin:0 !important;
  z-index:5;
  color:#fff;
  font-size:10px !important;
  font-weight:900;
  letter-spacing:.05em;
  text-align:center;
  text-shadow:0 1px 2px #000,0 0 4px #000;
  background:none !important;
}
.metal-button .led{
  position:absolute;
  left:50%;
  bottom:9px !important;
  width:12px !important;
  height:12px !important;
  margin-left:-6px !important;
  border-radius:50%;
  border:1px solid #858585;
  background:radial-gradient(circle at 35% 30%,#404040,#050505 65%);
  box-shadow:inset 0 1px 3px #000,0 0 0 1px rgba(0,0,0,.9);
}
.metal-button .led.is-on,
.metal-button .led.green.is-on,
.metal-button .led.red.is-on,
.metal-button .led.amber.is-on{
  animation:controlLedBreath 1.8s ease-in-out infinite;
}
.metal-button:hover{
  filter:brightness(1.13) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -14px 18px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 3px 0 #010101,
    0 0 13px rgba(255,133,0,.28),
    0 8px 12px rgba(0,0,0,.46);
}
.metal-button:active,
.metal-button.is-active{
  transform:translateY(2px);
  box-shadow:
    inset 0 3px 20px rgba(0,0,0,.95),
    inset 0 -8px 14px rgba(0,0,0,.95),
    0 1px 0 #010101,
    0 0 10px rgba(255,133,0,.18);
}
.metal-button:active::before,
.metal-button.is-active::before{
  top:11px;
  filter:brightness(.88);
}
.metal-button:active .icon,
.metal-button.is-active .icon{
  transform:translateX(-50%) translateY(2px);
}
.metal-button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
@keyframes controlLedBreath{
  0%,100%{filter:brightness(.92)}
  50%{filter:brightness(1.35)}
}

/* =========================================================
   SRK Broadcast v3.1 - CONTROLES METÁLICOS TIPO HARDWARE
   Inspirado en el mockup aprobado: panel oscuro, botones
   de acero cepillado, LED inferiores y mejor alineación.
   Solo afecta el bloque .controls-module.
   ========================================================= */
.controls-module{
  padding:8px 9px 9px !important;
  min-height:150px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.05) 16%,rgba(0,0,0,.58) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#252525 0%,#111 62%,#070707 100%) !important;
  border-color:#4b4b4b !important;
  box-shadow:
    inset 0 0 0 1px #050505,
    inset 0 16px 22px rgba(255,255,255,.045),
    inset 0 -18px 22px rgba(0,0,0,.75),
    0 2px 8px rgba(0,0,0,.72) !important;
}
.controls-module .module-title{
  height:22px !important;
  line-height:22px !important;
  margin:0 0 7px !important;
  border:1px solid #3f3f3f !important;
  border-radius:4px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 40%,rgba(0,0,0,.65)),
    linear-gradient(90deg,#080808,#262626 50%,#080808) !important;
  color:#eee !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-shadow:0 1px 2px #000, 0 0 6px rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 1px 2px #000 !important;
}
.controls-module .module-title::before,
.controls-module .module-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:35px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}
.controls-module .module-title::before{left:8px;}
.controls-module .module-title::after{right:8px;}
.transport-grid{
  height:110px !important;
  gap:8px !important;
  padding:0 !important;
  align-items:stretch !important;
}
.metal-button{
  height:110px !important;
  border-radius:8px !important;
  border:1px solid #2f2f2f !important;
  background:
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.13),transparent 22%),
    linear-gradient(180deg,#2a2a2a 0%,#161616 45%,#080808 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -12px 18px rgba(0,0,0,.88),
    0 0 0 1px #060606,
    0 4px 0 #020202,
    0 8px 14px rgba(0,0,0,.55) !important;
}
.metal-button::before{
  left:8px !important;
  right:8px !important;
  top:30px !important;
  height:45px !important;
  border-radius:8px !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 52% 6%,rgba(255,255,255,.95),rgba(255,255,255,.30) 15%,transparent 33%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(210,210,210,.82) 14%,rgba(115,115,115,.55) 42%,rgba(39,39,39,.92) 67%,rgba(8,8,8,.98) 100%) !important;
  border:1px solid rgba(255,255,255,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -9px 12px rgba(0,0,0,.84),
    0 0 0 3px rgba(0,0,0,.65),
    0 4px 7px rgba(0,0,0,.92),
    0 0 10px rgba(255,133,0,.11) !important;
}
.metal-button::after{
  left:11px !important;
  right:11px !important;
  top:32px !important;
  height:16px !important;
  border-radius:8px 8px 14px 14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.12),transparent) !important;
}
.metal-button small{
  top:7px !important;
  height:17px !important;
  line-height:17px !important;
  color:#f4f4f4 !important;
  font-size:10px !important;
  letter-spacing:.075em !important;
  text-shadow:0 1px 1px #000,0 0 5px rgba(255,255,255,.15) !important;
}
.metal-button .icon{
  top:40px !important;
  z-index:4 !important;
  background:#050505 !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.55))
    drop-shadow(0 2px 1px rgba(0,0,0,.92)) !important;
}
.metal-button .play{
  width:30px !important;
  height:31px !important;
  clip-path:polygon(12% 0,100% 50%,12% 100%);
}
.metal-button .stop{
  width:25px !important;
  height:25px !important;
  top:43px !important;
}
.metal-button .pause{
  top:40px !important;
  width:31px !important;
  height:31px !important;
  background:transparent !important;
}
.metal-button .pause::before,
.metal-button .pause::after{
  width:8px !important;
  height:31px !important;
  margin:0 3px !important;
  background:#050505 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 1px rgba(0,0,0,.92) !important;
}
.metal-button .speaker{
  top:43px !important;
  width:31px !important;
  height:27px !important;
  clip-path:polygon(0 35%,34% 35%,76% 5%,76% 95%,34% 65%,0 65%);
}
.metal-button .speaker::after{
  content:"";
  position:absolute;
  right:-9px;
  top:7px;
  width:12px;
  height:12px;
  border-right:3px solid #050505;
  border-top:3px solid #050505;
  transform:rotate(45deg);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.38));
}
.metal-button .led{
  bottom:9px !important;
  width:13px !important;
  height:13px !important;
  margin-left:-6.5px !important;
  border:1px solid #8a8a8a !important;
  background:radial-gradient(circle at 38% 28%,#5c5c5c 0 8%,#1b1b1b 45%,#040404 80%) !important;
  box-shadow:inset 0 1px 4px #000,0 0 0 2px #090909,0 1px 2px #000 !important;
}
.metal-button .led.green.is-on{
  background:radial-gradient(circle at 38% 28%,#ecffd8 0 10%,#6cff33 24%,#159000 58%,#062100 100%) !important;
  box-shadow:0 0 10px rgba(88,255,52,.98),0 0 18px rgba(88,255,52,.35),inset 0 1px 4px rgba(255,255,255,.72),0 0 0 2px #092009 !important;
}
.metal-button .led.red.is-on{
  background:radial-gradient(circle at 38% 28%,#ffe1d8 0 10%,#ff4838 24%,#9a0900 60%,#220200 100%) !important;
  box-shadow:0 0 10px rgba(255,50,33,.98),0 0 18px rgba(255,50,33,.35),inset 0 1px 4px rgba(255,255,255,.72),0 0 0 2px #230806 !important;
}
.metal-button .led.amber.is-on{
  background:radial-gradient(circle at 38% 28%,#fff2ce 0 10%,#ffb32a 24%,#a65e00 60%,#251200 100%) !important;
  box-shadow:0 0 10px rgba(255,178,34,.98),0 0 18px rgba(255,178,34,.35),inset 0 1px 4px rgba(255,255,255,.72),0 0 0 2px #261603 !important;
}
.metal-button .led.is-on:not(.green):not(.red):not(.amber){
  background:radial-gradient(circle at 38% 28%,#fff 0 10%,#dedede 24%,#707070 58%,#151515 100%) !important;
  box-shadow:0 0 10px rgba(255,255,255,.8),inset 0 1px 4px rgba(255,255,255,.72),0 0 0 2px #171717 !important;
}
.metal-button:hover{
  filter:brightness(1.10) contrast(1.05) !important;
}
.metal-button:hover::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -9px 12px rgba(0,0,0,.84),
    0 0 0 3px rgba(0,0,0,.65),
    0 4px 7px rgba(0,0,0,.92),
    0 0 16px rgba(255,133,0,.22) !important;
}
.metal-button:active,
.metal-button.is-active{
  transform:translateY(2px) !important;
  filter:brightness(.96) !important;
}
.metal-button:active::before,
.metal-button.is-active::before{
  top:32px !important;
  filter:brightness(.88) contrast(1.08) !important;
}
.metal-button:active .icon,
.metal-button.is-active .icon{
  transform:translateX(-50%) translateY(2px) !important;
}


/* =========================================================
   Ajuste solicitado: botones de control con color del logo
   La Pipol Online: naranja/ámbar sobre base metálica.
   ========================================================= */
.controls-module .metal-button::before{
  background:
    radial-gradient(circle at 50% 7%,rgba(255,247,205,.95),rgba(255,190,62,.45) 16%,transparent 34%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.20) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,#ffcf58 0%,#ff9c13 26%,#ff8200 52%,#9a4300 78%,#281000 100%) !important;
  border:1px solid rgba(255,202,88,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,225,.95),
    inset 0 -10px 13px rgba(61,20,0,.72),
    0 0 0 3px rgba(0,0,0,.70),
    0 4px 8px rgba(0,0,0,.95),
    0 0 15px rgba(255,132,0,.24) !important;
}
.controls-module .metal-button::after{
  background:linear-gradient(180deg,rgba(255,245,190,.65),rgba(255,185,58,.18),transparent) !important;
}
.controls-module .metal-button .icon,
.controls-module .metal-button .pause::before,
.controls-module .metal-button .pause::after,
.controls-module .metal-button .speaker::after{
  background:#101010 !important;
  color:#101010 !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,218,130,.55))
    drop-shadow(0 2px 1px rgba(0,0,0,.95)) !important;
}
.controls-module .metal-button .speaker::after{
  background:transparent !important;
  border-color:#101010 !important;
}
.controls-module .metal-button small{
  color:#ffb13a !important;
  text-shadow:0 1px 2px #000,0 0 9px rgba(255,133,0,.55) !important;
}
.controls-module .metal-button:hover::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,225,1),
    inset 0 -10px 13px rgba(61,20,0,.72),
    0 0 0 3px rgba(0,0,0,.70),
    0 4px 8px rgba(0,0,0,.95),
    0 0 22px rgba(255,132,0,.45) !important;
  filter:saturate(1.08) brightness(1.06);
}
.controls-module .metal-button:active::before,
.controls-module .metal-button.is-active::before{
  background:
    radial-gradient(circle at 50% 8%,rgba(255,234,166,.80),rgba(255,160,25,.35) 16%,transparent 34%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.14) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,#d98500 0%,#ff8a00 34%,#bd5600 68%,#210c00 100%) !important;
}

/* =========================================================
   Ajuste final: iconos metálicos plateados sobre botones Pipol
   ========================================================= */
.controls-module .metal-button .icon,
.controls-module .metal-button .play,
.controls-module .metal-button .stop,
.controls-module .metal-button .speaker{
  background:
    radial-gradient(circle at 34% 22%, #ffffff 0 7%, #e6e6e6 18%, #9b9b9b 42%, #d7d7d7 64%, #5d5d5d 100%) !important;
  color:#dedede !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.75))
    drop-shadow(0 2px 2px rgba(0,0,0,.95))
    drop-shadow(0 0 4px rgba(255,214,145,.20)) !important;
}
.controls-module .metal-button .pause{
  background:transparent !important;
}
.controls-module .metal-button .pause::before,
.controls-module .metal-button .pause::after{
  background:
    linear-gradient(90deg,#555 0%,#eeeeee 22%,#a4a4a4 48%,#f7f7f7 72%,#696969 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -2px 3px rgba(0,0,0,.58),
    0 2px 2px rgba(0,0,0,.95),
    0 0 4px rgba(255,214,145,.20) !important;
}
.controls-module .metal-button .speaker::after{
  background:transparent !important;
  border-right-color:#d8d8d8 !important;
  border-top-color:#f1f1f1 !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.75))
    drop-shadow(0 2px 2px rgba(0,0,0,.95)) !important;
}
.controls-module .metal-button:active .icon,
.controls-module .metal-button.is-active .icon{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.55))
    drop-shadow(0 1px 1px rgba(0,0,0,1)) !important;
}

/* SRK FINAL: microinteracción de controles y knob ALPS refinado */
.metal-button{will-change:transform,filter;}
.metal-button .icon{transition:filter .12s ease, transform .12s ease;}
.metal-button:hover .icon{filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 5px rgba(255,255,255,.32));}
.metal-button:active .icon,.metal-button.is-active .icon{transform:translateX(-50%) translateY(1px) scale(.98)}
.knob-hit-area{outline:none;}
.knob-hit-area:focus-visible,.potentiometer:focus-visible{box-shadow:0 0 0 2px rgba(255,177,61,.78);}
.potentiometer{
  background:
    radial-gradient(circle at 32% 24%,#f5f5f5 0 3%,#a5a5a5 11%,#404040 34%,#101010 66%,#000 100%),
    repeating-conic-gradient(from 0deg,#202020 0deg 6deg,#696969 6deg 8deg,#151515 8deg 14deg);
}
.potentiometer::before{height:26px;background:linear-gradient(180deg,#ffd083,#ff8500 58%,#9e4100);}
.volume-value{min-height:13px;}


/* =========================================================
   SRK v3.1: controles más compactos, dentro del botón naranja
   ========================================================= */
.controls-module .transport-grid{
  height:104px !important;
  gap:7px !important;
  align-items:center !important;
}
.controls-module .metal-button{
  height:100px !important;
  min-width:0 !important;
}
.controls-module .metal-button::before{
  left:10px !important;
  right:10px !important;
  top:31px !important;
  height:39px !important;
  border-radius:7px !important;
}
.controls-module .metal-button::after{
  left:13px !important;
  right:13px !important;
  top:33px !important;
  height:12px !important;
}
.controls-module .metal-button small{
  top:6px !important;
  font-size:9px !important;
}
.controls-module .metal-button .icon{
  margin-top:0 !important;
  top:39px !important;
  width:25px !important;
  height:25px !important;
}
.controls-module .metal-button .play{width:26px !important;height:27px !important;}
.controls-module .metal-button .stop{width:22px !important;height:22px !important;top:41px !important;}
.controls-module .metal-button .pause{width:27px !important;height:27px !important;top:38px !important;}
.controls-module .metal-button .pause::before,
.controls-module .metal-button .pause::after{width:7px !important;height:27px !important;margin:0 2px !important;}
.controls-module .metal-button .speaker{width:27px !important;height:24px !important;top:41px !important;}
.controls-module .metal-button .speaker::after{right:-8px;top:6px;width:10px;height:10px;border-right-width:2px;border-top-width:2px;}
.controls-module .metal-button .led{bottom:7px !important;width:11px !important;height:11px !important;margin-left:-5.5px !important;}

/* Potenciómetro: zona de manipulación más amplia y clara */
.knob-hit-area{width:126px !important;height:126px !important;top:-6px !important;}
.potentiometer{cursor:grab;}
.potentiometer:active,.knob-hit-area:active{cursor:grabbing;}
.volume-range{height:28px !important;bottom:0 !important;}