/* =========================================================
   Mi Piano — enfoque
   ---------------------------------------------------------
   Modo enfoque: solo el pentagrama, a pantalla completa.
   ========================================================= */
body.focus{overflow:hidden}
body.focus header,body.focus nav,body.focus .card,body.focus .navbtns,
body.focus .goal,body.focus .warnbox,body.focus .sharenote,
body.focus .eyebrow,body.focus h2.title,body.focus .toolbar{display:none!important}
body.focus .layout{display:block}
body.focus main{padding:0;max-width:none}
body.focus .stage{position:fixed;inset:0;z-index:60;background:var(--paper);
  padding:8px 14px calc(78px + env(safe-area-inset-bottom));gap:8px}
body.focus .fbar{display:flex}
/* flex-direction column + «safe center»: centra en vertical pero,
   si el contenido no cabe, no recorta la primera línea al desplazar */
body.focus .sheetzone{flex:1;min-height:0}
body.focus #sheetwrap{flex:1;min-height:0;border-radius:14px;padding:4px 12px 4px;
  display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
body.focus #sheet{width:100%;flex:0 0 auto}
/* el reproductor flota igual en los dos modos; en enfoque solo un poco mayor */
body.focus .abcjs-inline-audio .abcjs-btn{width:44px;height:40px}
body.focus .abcjs-inline-audio .abcjs-midi-start{width:50px;height:50px}
body.focus .abcjs-inline-audio .abcjs-btn svg{width:22px;height:22px}

/* botón flotante */
.fab{display:none;position:fixed;top:calc(10px + env(safe-area-inset-top));right:14px;z-index:80;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.16);cursor:pointer;font-size:1.25rem;color:var(--soft)}
.fab:hover{background:#faf7ef}
body.focus .fab{display:block}
body.panel #fab{background:var(--ink);color:#fff;border-color:var(--ink)}
.fabsalir{left:14px;right:auto;font-size:1.15rem}
.fabsalir:hover{background:#fdeceb;color:var(--red);border-color:#f2cfcc}

/* panel lateral deslizante */
.drawer{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:88vw;z-index:78;
  background:#fff;border-left:1px solid var(--line);box-shadow:-8px 0 26px rgba(0,0,0,.12);
  transform:translateX(102%);transition:transform .22s ease;
  display:flex;flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
body.panel .drawer{transform:translateX(0)}
.drawer .dhead{padding-right:50px}
.drawer .btn.wide{height:40px;font-size:.84rem}
.drawer .seg.vert button{height:40px;font-size:.84rem}
.drawer .tempo.wide{height:40px}
.drawer .fnum2{color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.drawer .fhead{font-size:1rem;font-weight:700;line-height:1.3;margin-top:2px}
.dspacer{flex:1;min-height:10px}
.drow{display:flex;gap:8px}
.drow .btn{flex:1;font-size:1.05rem}

/* sección de ajustes de vista dentro del panel */
.dsec{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fbfaf6;
  display:flex;flex-direction:column;gap:9px}
.dsec h5{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--soft)}
.dfield{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.82rem;color:var(--soft)}
.dfield.col{flex-direction:column;align-items:stretch;gap:2px}
.dfield b{color:var(--ink);font-variant-numeric:tabular-nums}
.dfield select{font-family:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);min-width:86px}
.dfield input[type=range]{width:100%;height:24px;accent-color:var(--gold);margin:0}
.dcheck{display:flex;gap:9px;align-items:center;font-size:.83rem;color:var(--ink);
  cursor:pointer;min-height:32px}
.dcheck input{width:19px;height:19px;accent-color:var(--gold);flex:0 0 auto;margin:0}
.dcheck.activo span{font-weight:700;color:var(--gold-dk)}
.dsec .btn{height:38px;font-size:.83rem}
.scrim{position:fixed;inset:0;z-index:77;background:rgba(20,20,26,.22);opacity:0;
  pointer-events:none;transition:opacity .2s}
body.panel .scrim{opacity:1;pointer-events:auto}
/* el panel también sirve fuera del modo enfoque, pero no se abre solo */