/* Batería DTX KD-12: reutiliza .app / .screen / .banks / .pad de style_samplerkd.css.
   Móvil vertical: controles arriba, batería abajo. PC (ventana ancha): controles a la izquierda, batería a la derecha. */
.dtx{grid-area:p;position:relative;flex:none;container-type:inline-size;width:min(100%,max(240px,calc((100vh - 210px)*1.143)));width:min(100%,max(240px,calc((100dvh - 210px)*1.143)));aspect-ratio:1096/959;margin:0 auto;background:#000 url(../img/FONDO_DTX.webp) center/100% 100% no-repeat;border-radius:2cqw;overflow:hidden}
.drum-pads{position:absolute;left:0;top:0;width:100%;height:83.7%;display:grid;grid-template-columns:repeat(3,32.1%);column-gap:1.85%;grid-template-rows:14.1% 35.6% 32.9% 13.8%;row-gap:1.2%;touch-action:none}
.drum-pads .pad{background:transparent;border:0;border-radius:1.2cqw;box-shadow:none;justify-content:flex-end;padding:0 0 1cqw;margin:0;transition:background .1s,box-shadow .1s}
.drum-pads .pad i{font-size:2.6cqw;color:#fff;opacity:.3}.drum-pads .pad span{font-size:1.5cqw;color:#fff;opacity:.3}
/* Efecto de pad (gris, sin el color del banco): destello circular claro en el centro + pad "hundido" */
.drum-pads .pad.sel{box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.16)}
.drum-pads .pad.down{transform:scale(.995);background:radial-gradient(circle at 50% 50%,rgba(210,214,219,.32) 0,rgba(210,214,219,.12) 40%,transparent 70%);box-shadow:inset 0 .5cqw 1.6cqw rgba(0,0,0,.7)}
.drum-pads .pad.on{background:radial-gradient(circle at 50% 50%,rgba(225,229,233,.55) 0,rgba(205,210,215,.30) 36%,rgba(0,0,0,0) 70%);box-shadow:inset 0 .5cqw 1.6cqw rgba(0,0,0,.7);transition:none}
.drum-pads .pad.on i,.drum-pads .pad.on span{color:#fff;opacity:.85}
/* Pantalla LCD (ancha): izquierda PITCH · VOL PAD · BANCO — derecha MASTER · SONIDO */
.dtx-lcd{position:absolute;left:14.69%;top:85.7%;width:32.2%;height:11.5%;display:grid;grid-template-columns:.78fr 1.22fr;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;gap:.1cqw 1.2cqw;padding:.5cqw 1cqw;color:#1c2400;font-family:"Courier New",monospace;pointer-events:none}
.lc{display:flex;align-items:baseline;justify-content:space-between;gap:.6cqw;min-width:0;border-bottom:.1cqw solid rgba(28,36,0,.22)}
.lc small{font-size:1.15cqw;opacity:.7;letter-spacing:.03em;flex:none}.lc b{font-size:1.9cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtx-knob{position:absolute;left:3.6%;top:85.6%;width:8.8%}.dtx-knob .knob{width:100%;height:auto;aspect-ratio:1}
.dtx .ring{background:none;padding:0}.dtx .cap{background:none;box-shadow:none}.dtx .cap::after{top:6%;height:20%;background:#fff;box-shadow:none}
/* Botones metálicos: fila 1 = pitch (< >), fila 2 = volumen del pad (− +) */
.dtx-btn{position:absolute;width:6.02%;height:6.9%;top:89.47%;display:grid;place-items:center;padding:0;font:800 4.2cqw/1 system-ui,sans-serif;color:#23262b;text-shadow:0 .1cqw 0 rgba(255,255,255,.7);border:.15cqw solid #1a1c1f;border-radius:.6cqw;cursor:pointer;touch-action:manipulation;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 .15cqw,rgba(0,0,0,.05) .15cqw .3cqw),linear-gradient(180deg,#eef0f3 0%,#b9bec4 22%,#8a9097 52%,#6b7077 70%,#a4a9af 100%);
 box-shadow:inset 0 .15cqw .2cqw rgba(255,255,255,.85),inset 0 -.25cqw .4cqw rgba(0,0,0,.45),0 .5cqw .9cqw rgba(0,0,0,.75),0 0 0 .1cqw #000;transition:transform .06s,box-shadow .06s,filter .06s}
.dtx-btn:active,.dtx-btn.dn{transform:translateY(.3cqw);filter:brightness(.82);box-shadow:inset 0 .3cqw .7cqw rgba(0,0,0,.6),0 .15cqw .3cqw #000,0 0 0 .1cqw #000}
#pdn{left:59.67%}#pup{left:67.7%}#vdn{left:79.2%}#vup{left:87.23%}
.drum-hidden{display:none}
.drum .knobs{display:none}
/* Los 4 bancos con el mismo alto y tamaño de letra que 12 VEL / REPETIR / EDITAR */
.drum .banks button{height:clamp(46px,7.5dvh,62px)!important;font-size:14px;letter-spacing:.04em;white-space:nowrap;padding:0 2px}
.drum #vel,.drum #rep,.drum #edit{grid-column:span 4;height:clamp(46px,7.5dvh,62px)!important;font-size:14px;letter-spacing:.04em}
@media (min-aspect-ratio:6/5){
 .drum .app{max-width:1200px;grid-template-columns:minmax(0,.9fr) min(calc((100vh - 24px)*1.143),60%);grid-template-columns:minmax(0,.9fr) min(calc((100dvh - 24px)*1.143),60%)}
 .dtx{width:100%;align-self:center}
}