/* ==========================================================
   DECKA · ESTUDIO IA · LAS SEIS TECLAS
   ----------------------------------------------------------
   Una máquina de discos de verdad no tiene un botón: tiene una
   botonera de selección. Aquí esa botonera elige qué le pides
   al estudio —una idea, la pista entera, alargarla, retocar un
   tramo, un efecto o separarla en pistas— y todo lo de debajo
   cambia con ella.
   ========================================================== */

.jb-teclas{flex:0 0 auto;position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:max(4px,.5cqw);margin:.3cqh 0 .1cqh}
.jb-tecla{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:.08cqh;cursor:pointer;border:0;text-align:left;
  padding:max(4px,.55cqh) max(7px,.7cqw);border-radius:max(6px,.7cqw);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06),
             0 max(2px,.3cqh) max(4px,.5cqh) -2px rgba(0,0,0,.6);
  color:#93A2B8;transition:transform .12s ease, box-shadow .16s ease, color .16s ease}
.jb-tecla:hover{color:var(--crema);transform:translateY(-1px)}
.jb-tecla:active{transform:translateY(1px)}
.jb-tecla b{font-family:var(--mono,var(--dato));font-size:max(7px,.72cqw);letter-spacing:.14em;
  color:#6C7A90}
.jb-tecla span{font-size:max(9px,1.02cqw);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.jb-tecla small{font-size:max(7px,.76cqw);color:#6C7A90;line-height:1.15;
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-tecla[data-on="1"]{color:#0B0D12;
  background:linear-gradient(180deg,#A8E9FF,#12A7D8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 0 max(10px,1.4cqh) -2px rgba(0,200,255,.75)}
.jb-tecla[data-on="1"] b,.jb-tecla[data-on="1"] small{color:rgba(11,13,18,.62)}
/* la muesca de la tecla, como en las de verdad */
.jb-tecla::after{content:"";position:absolute;left:50%;bottom:max(2px,.25cqh);
  transform:translateX(-50%);width:26%;height:max(2px,.22cqh);border-radius:2px;
  background:rgba(255,255,255,.1)}
.jb-tecla[data-on="1"]::after{background:rgba(11,13,18,.28)}

/* ---------- la fuente: de dónde sale el audio ---------- */
.jb-fuente{flex:1 1 auto;display:flex;flex-direction:column;gap:.5cqh;min-height:0}
.jb-fuente-op{flex:1 1 0;min-height:0;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6cqw;
  align-items:center;cursor:pointer;border:0;text-align:left;color:#A9B7C8;
  padding:max(5px,.6cqh) max(7px,.7cqw);border-radius:max(5px,.6cqw);
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.jb-fuente-op:hover{color:var(--crema);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.jb-fuente-op[data-on="1"]{color:var(--crema);
  background:rgba(0,200,255,.14);box-shadow:inset 0 0 0 1px rgba(0,200,255,.5)}
.jb-fuente-op i{width:max(6px,.6cqw);aspect-ratio:1;border-radius:50%;background:#2C3446}
.jb-fuente-op[data-on="1"] i{background:var(--ambar);box-shadow:0 0 8px var(--ambar)}
.jb-fuente-op > span{display:flex;align-items:baseline;gap:.55cqw;min-width:0}
.jb-fuente-op strong{flex:0 0 auto;font-size:max(9px,.98cqw);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-fuente-op em{flex:1 1 auto;min-width:0;font-style:normal;
  font-family:var(--mono,var(--dato));font-size:max(7px,.74cqw);color:#6C7A90;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- el tramo que se retoca ---------- */
.jb-tramo{flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6cqw}
.jb-tramo label{display:flex;flex-direction:column;gap:.2cqh}
.jb-tramo span{font-family:var(--mono,var(--dato));font-size:max(7px,.74cqw);
  letter-spacing:.1em;color:#6C7A90;text-transform:uppercase}
.jb-tramo input{width:100%;border:0;outline:0;color:var(--crema);
  font-family:var(--mono,var(--dato));font-size:max(9px,1cqw);
  padding:max(4px,.5cqh) max(6px,.6cqw);border-radius:max(5px,.6cqw);
  background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.jb-tramo input:focus{box-shadow:inset 0 0 0 1px var(--ambar)}

/* ---------- los stems ---------- */
.jb-stems{flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:.45cqw}
.jb-stem{min-height:0;overflow:hidden;display:flex;align-items:center;gap:.5cqw;cursor:pointer;border:0;color:#93A2B8;
  padding:max(5px,.55cqh) max(6px,.6cqw);border-radius:max(5px,.6cqw);text-align:left;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:max(8px,.92cqw)}
.jb-stem[data-on="1"]{color:var(--crema);background:rgba(127,212,255,.14);
  box-shadow:inset 0 0 0 1px rgba(127,212,255,.5)}
.jb-stem i{width:max(7px,.7cqw);aspect-ratio:1;border-radius:2px;background:#2C3446;flex:0 0 auto}
.jb-stem[data-on="1"] i{background:var(--hielo);box-shadow:0 0 7px var(--hielo)}

/* ---------- la línea que cuenta el modo ---------- */
.jb-nota{flex:0 0 auto;margin:.1cqh 0 .3cqh;padding:0 .3cqw;
  font-size:max(8px,.88cqw);line-height:1.3;color:#7F8DA3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-nota b{color:var(--ambar);font-weight:600;font-family:var(--mono,var(--dato));
  letter-spacing:.06em;margin-right:.5cqw}

/* ---------- el modelo que se va a usar ---------- */
.jb-modelo{flex:0 0 auto;display:flex;align-items:center;gap:.5cqw;margin-top:auto;
  padding-top:.45cqh;border-top:1px solid rgba(255,255,255,.07)}
.jb-modelo i{width:max(6px,.55cqw);aspect-ratio:1;border-radius:50%;
  background:var(--hielo);box-shadow:0 0 8px var(--hielo);flex:0 0 auto}
.jb-modelo span{font-family:var(--mono,var(--dato));font-size:max(7px,.74cqw);
  letter-spacing:.06em;color:#8E9CB2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* la ruta por la que sale la llamada */
.jb-ruta{font-family:var(--mono,var(--dato));font-size:max(7px,.7cqw);letter-spacing:.08em;
  text-transform:uppercase;padding:.2cqh .5cqw;border-radius:99px;flex:0 0 auto;
  color:var(--ambar);background:rgba(0,200,255,.13);
  box-shadow:inset 0 0 0 1px rgba(0,200,255,.32)}
.jb-ruta[data-via="servidor"]{color:var(--verde);background:rgba(75,224,160,.13);
  box-shadow:inset 0 0 0 1px rgba(75,224,160,.32)}

@media (max-width:900px){
  .jb-teclas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jb-tecla small{display:none}
}

/* ---------- la tira de duraciones ---------- */
.jb-grupo.ancho{grid-column:1/-1}
.jb-botones.paradas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:max(2px,.3cqw);padding:max(3px,.3cqh);border-radius:max(7px,.85cqw);
  background:rgba(0,0,0,.42);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),
             inset 0 0 0 1px rgba(255,255,255,.05)}
.jb-parada{cursor:pointer;border:0;padding:max(3px,.48cqh) 0;border-radius:max(5px,.6cqw);
  font-family:var(--mono,var(--dato));font-weight:600;font-size:max(8.5px,1.02cqw);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-inline:2px;color:#8FA0B6;background:transparent;
  transition:color .14s, background .14s, box-shadow .14s}
.jb-parada:hover{color:var(--crema);background:rgba(255,255,255,.06)}
.jb-parada[data-on="1"]{color:#04121A;
  background:linear-gradient(180deg,#EAF9FF,var(--hielo) 65%,#3FA3D6);
  box-shadow:0 0 max(8px,1.1cqh) -1px rgba(127,212,255,.7),
             inset 0 1px 0 rgba(255,255,255,.6)}

/* tres en fila: que no se estiren hasta parecer columnas de un templo */
.jb-tiras.tres{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;
  grid-auto-rows:minmax(max(22px,4cqh),max(34px,5.6cqh))}