/* KlipTok v168 · DJ Virtual — consola neón. Lienzo fijo de 1600×900 que se escala al ancho disponible (ver fitIt en el JS).
   Cian = plato A · magenta = plato B. Quitar: este archivo y su <link> en instrumentos/index.html. */

/* la página de instrumentos deja de ser una caja estrecha cuando hay consola */
body:has(.djx){background:radial-gradient(ellipse at 50% 0,#14103a 0,#07071a 55%,#04040e 100%)}
.ki:has(.djx){max-width:1680px;padding:.6rem}
.ki-stage:has(.djx){background:transparent;border:0;box-shadow:none;padding:0}
.ki:has(.djx) h1,.ki:has(.djx) .ki-say{color:#b9b4ff}

.djx-fit{position:relative;width:min(calc(100vw - 1.2rem),1600px);margin:0 auto;overflow:hidden;border-radius:26px}
.djx-rot{display:none;margin:.4rem auto;padding:.5rem .9rem;border-radius:999px;background:#1b1450;color:#d8d4ff;font:700 .8rem system-ui;text-align:center}
@media (max-width:700px) and (orientation:portrait){.djx-rot{display:block}}

.djx{--cya:#19c8ff;--cyb:#0b6fb0;--mag:#ff3cd8;--mgb:#8a1b86;--pur:#8b5cf6;--ink:#f2f4ff;--dim:#8f93c4;
  position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;box-sizing:border-box;padding:8px;
  display:grid;grid-template-columns:1fr 330px 1fr;grid-template-rows:56px 150px 1fr 128px;gap:8px;
  color:var(--ink);font:800 14px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;
  background:linear-gradient(180deg,#0a0b1e,#05050f);border-radius:26px;border:2px solid #2a2370;
  box-shadow:inset 0 0 60px rgba(98,64,255,.18),0 0 40px rgba(98,64,255,.35);user-select:none;-webkit-user-select:none}
.djx *{box-sizing:border-box}
.djx button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.djx select{font:inherit;color:var(--ink);background:#0b0d22;border:1px solid #3b3a8a;border-radius:8px;padding:5px 8px}
.djx :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- cabecera ---------- */
.djx-hd{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 10px;border-radius:14px;
  background:linear-gradient(180deg,#14153a,#0a0b22);border:1px solid #2d2a80}
.djx-brand{display:flex;align-items:center;gap:10px;font-size:24px;white-space:nowrap}
.djx-brand .lg{width:38px;height:38px;display:block}.djx-brand svg{width:100%;height:100%}
.djx-brand em{font-style:normal;font-size:22px;padding-left:14px;border-left:1px solid #3b3a8a}
.djx-brand .hp{margin-left:10px;font-size:22px;opacity:.9}
.djx-spec{flex:1;height:48px;min-width:0}
.hbtn{display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;border:1px solid #4a3fc0;background:linear-gradient(180deg,#1d1b52,#0f0f33);font-size:16px;letter-spacing:.04em}
.hbtn:hover{filter:brightness(1.25)}
.hbtn.rec{border-color:#b02a3c;background:linear-gradient(180deg,#4a0f1c,#220810)}
.hbtn .rd{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#e0212b 60%,#8d0d14);box-shadow:0 0 10px #ff2d3d}
.hbtn.rec.on .rd{animation:djxb 1s infinite}
.hbtn.auto{border-color:#7b4dff;box-shadow:0 0 14px rgba(123,77,255,.5)}.hbtn.auto.on{background:#6a3dff}
@keyframes djxb{50%{opacity:.35}}

.djx-cfg{display:none;position:absolute;right:14px;top:66px;width:380px;z-index:30;padding:14px 16px;border-radius:14px;background:#0d0f2c;border:1px solid #5b4be0;box-shadow:0 18px 40px rgba(0,0,0,.6);font-weight:600;font-size:13px;line-height:1.5;display:none}
.djx-cfg.on{display:block}.djx-cfg b{font-size:15px}.djx-cfg p{margin:.5em 0;color:#c9c8f5}
.djx-cfg kbd{padding:1px 6px;border-radius:5px;background:#24235e;border:1px solid #4d49b8;font:700 12px ui-monospace,monospace}
.djx-cfg label{display:block;margin-top:8px}

/* ---------- panel de información de cada plato ---------- */
.djx-info{grid-row:2;display:grid;grid-template-rows:50px 1fr 28px;gap:4px;padding:8px 10px 6px;border-radius:14px;background:linear-gradient(180deg,#05060f,#0a0b1c);border:1px solid #23236a;min-width:0}
.djx-info.a{grid-column:1;border-color:#0f5f86;box-shadow:inset 0 0 22px rgba(25,200,255,.12)}
.djx-info.b{grid-column:3;border-color:#7c2078;box-shadow:inset 0 0 22px rgba(255,60,216,.12)}
.djx-info .it{display:flex;align-items:center;gap:10px;min-width:0}
.djx-info .bdg{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;border:2px solid}
.djx-info.a .bdg{border-color:var(--cya);color:var(--cya);box-shadow:0 0 12px var(--cya)}
.djx-info.b .bdg{border-color:var(--mag);color:var(--mag);box-shadow:0 0 12px var(--mag)}
.djx-info .art{flex:none;width:50px;height:50px;border-radius:7px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#1d2b78,#0a0b25)}
.djx-info.b .art{background:linear-gradient(135deg,#6a1c70,#1a0a25)}
.djx-info .tt{flex:1;min-width:0;display:grid;gap:4px}
.djx-info .tt b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.djx-info .tt small{font-size:13px;font-weight:600;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.djx-info .bp{flex:none;text-align:right;display:grid;gap:2px}
.djx-info .bp b{font:800 26px/1 ui-monospace,"SF Mono",Menlo,monospace}.djx-info .bp small{font-size:12px;color:var(--dim)}
.djx-info .bp .pc{font-size:13px}.djx-info.a .pc{color:var(--cya)}.djx-info.b .pc{color:var(--mag)}
.djx-info .ww{position:relative;min-height:0}.djx-info .wv{width:100%;height:100%;display:block;cursor:pointer;border-radius:6px}
.djx-info .rem{position:absolute;right:6px;bottom:3px;font:800 16px ui-monospace,monospace;text-shadow:0 0 6px #000,0 0 6px #000}
.djx-info .ac{display:flex;gap:6px;align-items:center;min-width:0}
.pill{height:24px;padding:0 11px;border-radius:999px;border:1px solid #3b3a8a;background:#12143a;font-size:12px;white-space:nowrap}
.pill:hover{background:#1d2062}.pill.on{background:#5b3df0;border-color:#9b86ff}.pill[hidden]{display:none}.pill:disabled{opacity:.5}
.djx-info .ac select{height:24px;padding:0 6px;font-size:12px;max-width:130px}

/* ---------- plato ---------- */
.djx-deck{grid-row:3;position:relative;display:grid;gap:8px;padding:10px 10px 12px;border-radius:22px 22px 14px 14px;min-width:0;
  grid-template-columns:76px 1fr 58px;grid-template-rows:52px 1fr 124px;
  grid-template-areas:"tr tr tr" "lp jg fd" "tb pd pd";
  background:linear-gradient(180deg,#171a36,#0a0b1c 40%,#0b0c1f);border:2px solid}
.djx-deck.a{grid-column:1;border-color:#1478b3;box-shadow:inset 0 0 40px rgba(25,200,255,.15),0 0 22px rgba(25,200,255,.3)}
.djx-deck.b{grid-column:3;grid-template-columns:58px 1fr 76px;grid-template-areas:"tr tr tr" "fd jg lp" "pd pd tb";border-color:#a02a9c;box-shadow:inset 0 0 40px rgba(255,60,216,.15),0 0 22px rgba(255,60,216,.3)}
.djx-deck .tr{grid-area:tr;display:flex;justify-content:space-between;gap:12px;padding:0 14px}
.tbtn{flex:1;max-width:170px;height:48px;border-radius:12px;border:2px solid #343a72;background:linear-gradient(180deg,#232650,#0e1028);font-size:19px;letter-spacing:.03em;box-shadow:0 3px 0 #05060f}
.tbtn:active{transform:translateY(2px);box-shadow:none}
.tbtn.play{flex:1.25;font-size:20px}
.djx-deck.a .tbtn.play{border-color:var(--cya);box-shadow:0 0 14px rgba(25,200,255,.55)}.djx-deck.b .tbtn.play{border-color:var(--mag);box-shadow:0 0 14px rgba(255,60,216,.55)}
.tbtn.on{background:linear-gradient(180deg,#2b3f9c,#142060)}.djx-deck.b .tbtn.on{background:linear-gradient(180deg,#8a2c86,#40104a)}
.djx-deck .lp{grid-area:lp;display:flex;flex-direction:column;gap:6px;align-items:stretch;justify-content:center;padding:6px;border-radius:12px;background:#0a0b1c;border:1px solid #23236a}
.djx-deck .cap{text-align:center;font-size:13px;color:#d6d8ff}
.lbtn{height:34px;border-radius:8px;border:1px solid #343a72;background:#0e1028;font-size:15px}
.lbtn.on{background:#1a8f5a;border-color:#4ade80}
.djx-deck.a .lbtn{border-color:#1478b3}.djx-deck.b .lbtn{border-color:#a02a9c}.djx-deck .lbtn.on{border-color:#4ade80}

.djx-deck .jg{grid-area:jg;position:relative;height:100%;aspect-ratio:1;max-width:100%;justify-self:center;align-self:center;touch-action:none;cursor:grab}
.djx-deck .jg.hold{cursor:grabbing}
.jg .ring{position:absolute;inset:0;border-radius:50%;border:7px solid;background:radial-gradient(circle,transparent 62%,rgba(0,0,0,.6) 100%)}
.djx-deck.a .ring{border-color:var(--cya);box-shadow:0 0 26px var(--cya),inset 0 0 22px var(--cya)}
.djx-deck.b .ring{border-color:var(--mag);box-shadow:0 0 26px var(--mag),inset 0 0 22px var(--mag)}
.djx-deck.playing .ring{animation:djxp 1.6s ease-in-out infinite}
@keyframes djxp{50%{filter:brightness(1.35)}}
.jg .disc{position:absolute;inset:16px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#1a1c30 0 2px,#0c0d1c 2px 4px),conic-gradient(from 20deg,#3a3d58,#0c0d1c 25%,#4a4e70 50%,#0c0d1c 75%,#3a3d58);
  background-blend-mode:overlay;box-shadow:inset 0 0 30px #000,0 0 0 3px #05060f}
.jg .disc .mk{position:absolute;left:50%;top:6px;width:5px;height:26px;margin-left:-2.5px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff}
.djx-deck.a .disc .mk{background:var(--cya);box-shadow:0 0 12px var(--cya)}.djx-deck.b .disc .mk{background:var(--mag);box-shadow:0 0 12px var(--mag)}
.jg .cen{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;font-size:clamp(14px,2.2vw,34px);background:radial-gradient(circle,#0b0d24 55%,#05060f);border:3px solid;pointer-events:none}
.djx-deck.a .cen{border-color:var(--cya);color:var(--cya);box-shadow:0 0 14px var(--cya)}.djx-deck.b .cen{border-color:var(--mag);color:var(--mag);box-shadow:0 0 14px var(--mag)}
.djx-deck .cen{font-size:30px}

.djx-deck .fdw{grid-area:fd;display:flex;justify-content:center;padding:6px 0;border-radius:12px;background:#0a0b1c;border:1px solid #23236a}
.djx-deck .tb{grid-area:tb;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.tab{flex:1;max-height:34px;border-radius:7px;border:2px solid;background:#0a0c22;font-size:13px;letter-spacing:.03em}
.djx-deck.a .tab{border-color:#1478b3;color:#b6ecff}.djx-deck.b .tab{border-color:#a02a9c;color:#ffc9f4}
.tab.on{color:#fff}.djx-deck.a .tab.on{background:#0f4f78;box-shadow:0 0 12px var(--cya)}.djx-deck.b .tab.on{background:#6e1c6a;box-shadow:0 0 12px var(--mag)}
.djx-deck .pd{grid-area:pd;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:9px}
.pad{border-radius:10px;border:3px solid;background:linear-gradient(180deg,#10163d,#080b22);font-size:15px;color:#fff;min-width:0;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.djx-deck.a .pad{border-color:#1b9cd9;box-shadow:inset 0 0 14px rgba(25,200,255,.25)}.djx-deck.b .pad{border-color:#d63fc4;box-shadow:inset 0 0 14px rgba(255,60,216,.25);background:linear-gradient(180deg,#2a0f3a,#12081e)}
.pad.hot.set{background:var(--hc);border-color:#fff;color:#000;box-shadow:0 0 16px var(--hc)}
.pad.sam,.pad.fx,.pad.sli{font-size:14px}
.pad.hit,.pad:active{filter:brightness(1.6);transform:scale(.96)}

/* ---------- mezclador ---------- */
.djx-logo{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:26px;
  background:linear-gradient(180deg,#0e1030,#070818);border:1px solid #3a2fa0;border-radius:14px 14px 40px 40px;box-shadow:0 8px 20px rgba(139,92,246,.35)}
.djx-logo .lg{width:54px;height:54px;display:block}.djx-logo svg{width:100%;height:100%}
.djx-mixer{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 78px 1fr;grid-template-rows:1fr 96px;gap:6px;padding:10px 8px;border-radius:14px;background:linear-gradient(180deg,#10122c,#080918);border:1px solid #2d2a80}
.djx-mixer .kc{display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.dk{display:grid;justify-items:center;gap:5px;touch-action:none}
.dk-b{position:relative;width:50px;height:50px;border-radius:50%;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 35% 28%,#5c6088,#1a1c34 55%,#07081a);box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.35),0 0 0 3px #090a1c,0 0 0 4px #3b3f8a}
.dk-b::after{content:"";position:absolute;left:50%;top:5px;width:4px;height:15px;margin-left:-2px;border-radius:2px;background:#fff;transform-origin:50% 20px;transform:rotate(var(--a,0deg));box-shadow:0 0 6px #fff}
.kc.a .dk-b::after{background:var(--cya);box-shadow:0 0 6px var(--cya)}.kc.b .dk-b::after{background:var(--mag);box-shadow:0 0 6px var(--mag)}
.dk-l{font-size:12px;letter-spacing:.03em;color:#e4e6ff}
.dk.big .dk-b{width:62px;height:62px}.dk.big .dk-b::after{transform-origin:50% 26px;height:18px}

.djx-mixer .vu{display:flex;justify-content:center;gap:10px;padding:8px 0}
.vm{display:flex;flex-direction:column-reverse;gap:4px;width:16px}
.vm i{flex:1;border-radius:2px;background:#1a1c30;opacity:.55}
.vm i.on{opacity:1}.vm i.g.on{background:#2de04a;box-shadow:0 0 6px #2de04a}.vm i.y.on{background:#f5d417;box-shadow:0 0 6px #f5d417}.vm i.r.on{background:#ff3b2f;box-shadow:0 0 6px #ff3b2f}
.djx-mixer .xrow{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:4px 12px;border-radius:12px;background:#070818;border:1px solid #23236a}
.xrow b{font-size:18px}.xrow b:first-child{color:var(--cya)}.xrow b:last-child{color:var(--mag)}

/* ---------- faders ---------- */
.fd{position:relative;touch-action:none;cursor:pointer}
.fd::before{content:"";position:absolute;border-radius:3px;background:#020208;box-shadow:inset 0 0 4px #000,0 0 0 1px #2f3270}
.fd.v{width:30px;height:100%;min-height:50px}.fd.h{height:34px;width:100%}
.fd.v::before{left:50%;top:6px;bottom:6px;width:6px;margin-left:-3px}
.fd.h::before{top:50%;left:8px;right:8px;height:6px;margin-top:-3px}
.fd.v::after{content:"";position:absolute;left:2px;right:2px;top:6px;bottom:6px;background:repeating-linear-gradient(180deg,#6d72b8 0 1px,transparent 1px 10px);opacity:.5;-webkit-mask:linear-gradient(90deg,#000 0 22%,transparent 22% 78%,#000 78%);mask:linear-gradient(90deg,#000 0 22%,transparent 22% 78%,#000 78%)}
.fd.h::after{content:"";position:absolute;top:2px;bottom:2px;left:8px;right:8px;background:repeating-linear-gradient(90deg,#6d72b8 0 1px,transparent 1px 12px);opacity:.5;-webkit-mask:linear-gradient(180deg,#000 0 22%,transparent 22% 78%,#000 78%);mask:linear-gradient(180deg,#000 0 22%,transparent 22% 78%,#000 78%)}
.fd-h{position:absolute;z-index:2;border-radius:6px;border:1px solid #c9b8ff;background:linear-gradient(180deg,#7c5cff,#3a1f9e 55%,#241270);box-shadow:0 3px 8px rgba(0,0,0,.7),0 0 12px rgba(139,92,246,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.fd.v .fd-h{left:50%;width:28px;height:18px;transform:translate(-50%,-50%)}
.fd.h .fd-h{top:50%;width:20px;height:44px;transform:translate(-50%,-50%)}
.fd.v .fd-h::after,.fd.h .fd-h::after{content:"";position:absolute;background:#fff;opacity:.85}
.fd.v .fd-h::after{left:3px;right:3px;top:50%;height:2px;margin-top:-1px}.fd.h .fd-h::after{top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px}
.fd.pitch{width:20px;height:100%;min-height:0}.fd.pitch .fd-h{width:20px;height:11px}
.fd.chv{width:46px}
.fd.xf{flex:1;width:auto;height:70px}
.fd.mvol{width:100%;max-width:300px;height:30px}.fd.mvol::before{background:linear-gradient(90deg,#19c8ff,#8b5cf6);box-shadow:0 0 10px rgba(25,200,255,.6)}.fd.mvol::after{display:none}.fd.mvol .fd-h{height:30px;width:16px}

/* ---------- barra inferior ---------- */
.djx-bot{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1.55fr 1.1fr 1.35fr 1.1fr 1.1fr;gap:8px}
.bp2{display:flex;flex-direction:column;padding:10px 14px;border-radius:14px;min-width:0;background:linear-gradient(180deg,#11133a,#090a20);border:1px solid #3a2fa0;box-shadow:inset 0 0 20px rgba(98,64,255,.15)}
.bp2 .bt{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.03em}.bp2 .bt span{font-size:20px;color:#8b5cf6}
.bp2 .bb{flex:1;display:flex;align-items:center;justify-content:space-around;gap:10px;min-height:0}
.bp2 .dk-b{width:44px;height:44px}.bp2 .dk-b::after{transform-origin:50% 17px;height:13px;top:4px}
.bp2 .dk-b{box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.35),0 0 0 3px #090a1c,0 0 0 4px #4a46c2}
.onb{height:40px;min-width:62px;border-radius:9px;border:2px solid #3b4cc8;background:#0b0e2c;color:#7a86d8;font-size:16px}
.onb.on{border-color:var(--cya);color:var(--cya);box-shadow:0 0 14px rgba(25,200,255,.6)}
.rtime{font:800 22px ui-monospace,monospace;padding:8px 14px;border-radius:8px;background:#020208;border:1px solid #2f3270}
.rbig{width:58px;height:58px;border-radius:50%;border:3px solid #7a1020;background:radial-gradient(circle at 35% 30%,#ff8a8a,#e0212b 55%,#7a0a12);box-shadow:0 0 14px rgba(255,45,61,.6),inset 0 -4px 8px rgba(0,0,0,.4)}
.rbig.on{animation:djxb 1s infinite}
.djx-recout{display:flex;gap:10px;align-items:center;justify-content:center;margin:.6rem 0;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){.djx-deck.playing .ring,.rbig.on,.hbtn.rec.on .rd{animation:none}}
/* ajustes: pestañas dentro de su fila, sin paneles genéricos alrededor de la consola */
.tab{max-height:none;min-height:0}.djx-deck .tb{gap:4px}
.ki:has(.djx) .ki-dock{display:none}
.ki:has(.djx) .ki-head,.ki:has(.djx) .ki-head h2,.ki:has(.djx) .ki-head *{color:#d8d4ff}
.ki:has(.djx) .ki-head .ki-btn{color:#fff}
/* pestañas de pads: caben en su columna de 76 px */
.djx-deck .tab{font-size:10.5px;letter-spacing:0;padding:0 2px;min-width:0;white-space:nowrap;overflow:hidden}