/* KlipTok v111 · BOTONES con el diseño de la plataforma (el mismo degradado azul→violeta→rosa que «Rasguear»).
   Unifica la Grabadora, los instrumentos, el Zoo Sampler y las páginas de Tiempo. Se carga la ÚLTIMA.
   Arregla además el desplazamiento del ▶/■: kt-v65-tiempo.css daba un padding enorme a TODOS los <button>
   y estiraba los iconos redondos de las tomas; aquí cada botón tiene tamaño fijo y centrado.
   Quitar: borrar este archivo y sus <link>. */
:root{--kt-grad:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899);--kt-grad-sh:0 6px 16px rgba(124,58,237,.28);--kt-ring:0 0 0 3px rgba(124,58,237,.38)}

/* ---- botón principal (pastilla) ---- */
.ki-btn,.kim-btn,.zs-chip{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:36px;padding:0 1.05rem;border:0;border-radius:999px;
  background:var(--kt-grad);color:#fff;font:700 .85rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--kt-grad-sh);
  transition:filter .15s,transform .08s,box-shadow .15s}
.ki-btn:hover,.kim-btn:hover,.zs-chip:hover{background:var(--kt-grad);filter:brightness(1.1)}
.ki-btn:active,.kim-btn:active,.zs-chip:active{transform:translateY(1px);box-shadow:none}
.ki-btn:focus-visible,.kim-btn:focus-visible,.kim-ib:focus-visible,.ki-ib:focus-visible,.zs-chip:focus-visible,.zs-sa:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
.ki-btn:disabled,.kim-btn:disabled,.kim-ib:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}
.ki-btn.big{min-height:46px;padding:0 1.8rem;font-size:1rem}
.ki-btn.sm{min-height:28px;padding:0 .75rem;font-size:.75rem}
/* seleccionado: mismo degradado + aro (así se distingue de los demás) */
.ki-btn.on,.kim-btn.on,.zs-chip.on,.zs-bar .ki-btn.on{background:var(--kt-grad);border:0;color:#fff;box-shadow:var(--kt-ring),var(--kt-grad-sh)}
/* grabando / parar: rojo (estado de aviso) */
.kim-btn.rec.live,.ki-btn.rec{background:#dc2626;border:0;color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.3)}
.kim-btn.rec.live:hover,.ki-btn.rec:hover{background:#dc2626}

/* ---- botón redondo de icono (▶ ⬇ 📡 🗑 de las tomas) ---- */
.kim-ib,.zs-sa,.ki-ib{
  box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;min-width:34px;padding:0;margin:0;border:0;border-radius:50%;
  background:var(--kt-grad);color:#fff;font:700 .9rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;box-shadow:var(--kt-grad-sh);transition:filter .15s,transform .08s}
.kim-ib:hover,.zs-sa:hover,.ki-ib:hover{background:var(--kt-grad);filter:brightness(1.12)}
.kim-ib:active,.zs-sa:active,.ki-ib:active{transform:translateY(1px);box-shadow:none}

/* ---- fila de la toma: nada se mueve de sitio al cambiar ▶ por ■ ---- */
.kim-take{display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap}
.kim-take>*{flex:0 0 auto}
.kim-take>.kim-tn{flex:1 1 auto;min-width:0}
.kim-take>small{min-width:2.6rem;text-align:right}
.kim-take>input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#7c3aed}
.kim-recrow{align-items:flex-end;gap:.8rem}
.kim-rec>.kim-btn{margin-top:.2rem}

/* diálogo de publicar: sus pestañas conservan su propio aspecto */
.kim-tabs button:not(.on){background:rgba(255,255,255,.08);box-shadow:none;color:#cbd5e1}

/* ---- mini-botones de pista (silenciar / solo / quitar): tamaño fijo; encendido = degradado + aro ---- */
.zs-mini{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;min-width:32px;height:32px;padding:0;margin:0;border:1px solid rgba(124,58,237,.35);border-radius:10px;
  background:rgba(124,58,237,.08);color:var(--tx,inherit);font:800 .8rem/1 system-ui,sans-serif;cursor:pointer}
.zs-mini:hover{background:rgba(124,58,237,.2);border-color:#7c3aed}
.zs-mini.on{background:var(--kt-grad);border-color:transparent;color:#fff;box-shadow:var(--kt-ring)}