/* Karma Tune — estructura nueva (v61). Va al final: manda sobre adapt.css y desktop.css. */
nav.tabs .ks-brand,nav.tabs .ks-foot{display:none}
nav.tabs button span{line-height:1}
nav.tabs button{max-width:120px}

/* encabezado de vista: instrumento + perfil */
.ks-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.ks-inst{display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:5px 12px 5px 5px;border:0;border-radius:999px;background:var(--card-2);color:var(--ink);font:600 15px var(--ui);cursor:pointer;text-align:left}
.ks-inst img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#1c1c1e;flex:none}
.ks-inst span{display:flex;flex-direction:column;min-width:0}
.ks-inst b{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-inst small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-inst small:empty{display:none}
.ks-chev{width:12px;height:12px;flex:none;color:var(--muted)}
.ks-av,.ks-av-s{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font:800 17px var(--ui);cursor:pointer}
.ks-mehead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ks-done{height:40px;padding:0 18px;font-weight:700}

/* sub-secciones como chips (Lecciones · Acordes · Círculos · Escalas / Metrónomo · Pistas · …) */
#learnSeg,#toolSeg{display:flex!important;gap:8px;background:none;padding:2px 0;border-radius:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:10px 0 12px}
#toolSeg[hidden]{display:none!important}
#learnSeg::-webkit-scrollbar,#toolSeg::-webkit-scrollbar{display:none}
#learnSeg button,#toolSeg button{flex:none;height:38px;padding:0 15px!important;border-radius:999px;background:var(--card-2);color:var(--ink);font:600 14px var(--ui)!important;letter-spacing:0;overflow:visible;box-shadow:none}
#learnSeg button[aria-pressed="true"],#toolSeg button[aria-pressed="true"]{background:var(--ink);color:#000;box-shadow:none}

/* ---------- iPad vertical / pantallas medianas: pestañas arriba (como antes, con 4) ---------- */
@media (min-width:760px){
  .ks-bar{margin-top:0}
}

/* ---------- iPad acostado y compu: barra lateral ---------- */
@media (min-width:1000px){
  :root{--side:236px}
  nav.tabs{top:0;bottom:0;left:0;right:auto;transform:none;width:var(--side);height:auto;padding:calc(env(safe-area-inset-top,0px) + 22px) 14px 18px;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:#0b0b0c}
  nav.tabs .ks-brand{display:flex;align-items:baseline;gap:8px;padding:0 10px 22px;color:var(--ink)}
  nav.tabs .ks-brand svg,nav.tabs .ks-brand img{height:22px;width:auto}
  nav.tabs .ks-brand small{font:600 13px var(--ui);color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
  nav.tabs>button{height:46px;justify-content:flex-start;padding:0 12px;gap:12px;border-radius:12px;font:600 15px var(--ui);max-width:none}
  nav.tabs>button svg{width:20px;height:20px}
  nav.tabs>button[aria-selected="true"]{background:var(--card-2);color:var(--ink)}
  nav.tabs .ks-foot{display:flex;flex-direction:column;gap:8px;margin-top:auto}
  nav.tabs .ks-inst{width:100%;height:56px;border-radius:14px;padding:8px 10px;background:var(--card)}
  nav.tabs .ks-inst img{width:38px;height:38px}
  nav.tabs .ks-inst span{flex:1}
  .ks-me{display:flex;align-items:center;gap:10px;height:56px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:var(--ink);cursor:pointer;text-align:left;font:600 14px var(--ui)}
  .ks-me[aria-current="page"]{background:var(--card-2)}
  .ks-me .ks-av-s{width:38px;height:38px;font-size:15px}
  .ks-me span:last-child{display:flex;flex-direction:column}
  .ks-me small{font:500 11.5px var(--ui);color:var(--muted)}
  .app{left:var(--side);top:0;bottom:0}
  .view{padding-top:calc(env(safe-area-inset-top,0px) + 22px);padding-left:32px;padding-right:32px}
  .ks-bar{display:none}
  .install{left:calc(var(--side) + 16px)}
  .k-toast{left:calc(50% + var(--side) / 2)}
  .sheet{left:calc(50% + var(--side) / 2)}
  /* el panel lateral de cada sección se ajusta al espacio que queda */
  .dk{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,400px);gap:24px}
  .dk-hero{min-height:calc(100vh - 210px)}
  .dk-les #hw{height:calc(100vh - 220px);min-height:440px}
  .dk-pistas .k-pstage{min-height:calc(100vh - 210px)}
}
@media (min-width:1000px) and (max-width:1199px){
  :root{--side:208px}
  .dk-pistas .k-pstage-now b#pNow{font-size:110px}
  .dk-metro .bpm output{font-size:140px}
}

/* ---------- Celular acostado: riel de iconos a la izquierda, todo cabe a lo alto ---------- */
@media (max-width:999px) and (max-height:500px) and (orientation:landscape){
  :root{--tabbar:0px;--rail:72px}
  nav.tabs{top:0;bottom:0;left:0;right:auto;transform:none;width:calc(var(--rail) + env(safe-area-inset-left,0px));height:auto;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 0 8px env(safe-area-inset-left,0px);flex-direction:column;justify-content:center;gap:4px;
    border:0;border-right:.5px solid var(--line);border-radius:0;box-shadow:none;background:rgba(10,10,10,.92)}
  nav.tabs>button{flex:none;height:56px;max-width:none;flex-direction:column;gap:3px;padding:0;border-radius:12px;margin:0 6px;font:600 10px var(--ui);background:transparent}
  nav.tabs>button svg{width:22px;height:22px}
  nav.tabs>button[aria-selected="true"]{background:var(--card-2);color:var(--gold)}
  .app{left:calc(var(--rail) + env(safe-area-inset-left,0px));top:0;bottom:0}
  .view{padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-left:16px}
  .ks-bar{margin:0 0 4px}
  .ks-inst{height:38px}
  .ks-inst img{width:28px;height:28px}
  .ks-av{width:38px;height:38px;font-size:15px}
  .ttl{font-size:24px}
  .install{left:calc(var(--rail) + 12px);bottom:10px}
}

/* ---------- ajustes finos: barra lateral y Lecciones a una pantalla ---------- */
@media (min-width:1000px){
  nav.tabs .ks-foot button{flex:none;max-width:none;width:100%;flex-direction:row;justify-content:flex-start}
  nav.tabs .ks-foot .ks-chev{margin-left:auto}
  :is(#view-learn,#view-tools,#view-songs,#view-me) .inner>.ttl{display:inline-block;vertical-align:middle;margin:0 22px 0 0;font-size:34px}
  #learnSeg:not([hidden]),#toolSeg:not([hidden]){display:inline-flex!important;vertical-align:middle;margin:0;max-width:none}
  #view-learn .inner>:nth-child(3),#view-tools .inner>:nth-child(3){margin-top:16px}
  .k-routes{margin:0 0 10px}
  .k-routes button{padding:8px 14px}
  .k-path{padding:0 0 8px}
  .k-node{width:150px;padding:10px 12px;gap:2px}
  .k-node .n{width:22px;height:22px;font-size:12px}
  .dk-les{margin-top:6px}
  .dk-les #hw{height:max(340px,calc(100vh - 360px));min-height:0}
  .dk-les .dk-hero{min-height:0}
  .dk-les .dk-side{max-height:max(340px,calc(100vh - 360px));overflow:auto;padding:18px;gap:10px;scrollbar-width:thin}
  .dk-les .lesson h1{font-size:24px;margin:4px 0}
  .dk-les .lesson p{font-size:14px;margin:4px 0 0}
}

/* ---------- Cómo afinar: sin animación del clavijero, con botón para cerrar siempre visible ---------- */
#how{display:block;padding:0}
#how .k-how-body{margin:0 auto;padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
.k-how-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px;padding:10px 20px;background:linear-gradient(#000 70%,transparent)}
.k-how-x{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.k-how-x svg{width:20px;height:20px}
.k-how-x:hover{background:rgba(255,255,255,.26)}
@media (min-width:760px){ #how{height:fit-content;max-height:92vh;width:min(640px,92vw);background:#121214;border:1px solid var(--line)} #how .k-how-head{background:linear-gradient(#121214 70%,transparent)} #how .k-how-body{padding:18px 28px 26px;max-width:none} .k-how-head{margin:0 -28px;padding:10px 28px} }