/* =========================================================
   Mi Piano — partitura
   ---------------------------------------------------------
   Escenario: pentagrama, línea guía, nombres en las notas, barra de enfoque.
   ========================================================= */
.stage{display:flex;flex-direction:column;gap:10px}
.eyebrow{color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}
h2.title{margin:3px 0 2px;font-size:1.45rem}
.goal{color:var(--soft);font-size:.92rem;margin:0}
.fbar{display:none;align-items:baseline;gap:10px;padding:0 62px}
.fbar .fnum{color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.8px;white-space:nowrap}
.fbar .ftitle{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:0 14px;height:var(--tap);cursor:pointer;
  font-family:inherit;font-size:.85rem;color:var(--soft);white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.seg.vert{flex-direction:column;width:100%}
.seg.vert button{border-left:0;border-top:1px solid var(--line);text-align:left}
.seg.vert button:first-child{border-top:0}
.tempo{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--soft);
  height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.tempo input{width:110px;height:26px;accent-color:var(--gold)}
.tempo.wide{width:100%;justify-content:space-between}
.tempo.wide input{width:96px}
.btn{border:1px solid var(--line);background:#fff;border-radius:11px;height:var(--tap);padding:0 15px;
  cursor:pointer;font-family:inherit;font-size:.85rem;color:var(--soft);white-space:nowrap}
.btn:hover{background:#faf7ef}
.btn.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}
.btn.done{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.btn.big{font-size:.95rem;padding:0 22px;height:50px;border-radius:13px}
.btn.small{height:34px;padding:0 13px;font-size:.8rem;border-radius:9px}
.btn.wide{width:100%}

#sheetwrap{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:10px 6px 4px;overflow:auto;-webkit-overflow-scrolling:touch}
#sheet{width:100%;--notebold:0}
/* abcjs en modo responsive envuelve el SVG en un div; los dos deben ocupar el ancho */
#sheet > div{width:100%!important}
#sheet svg{display:block;width:100%;height:auto}
/* grosor extra de las notas, ajustable desde el panel de vista */
#sheet .abcjs-note,#sheet .abcjs-rest{stroke:currentColor;stroke-width:var(--notebold,0)}
/* nombre de la nota escrito dentro de la cabeza.
   El halo (stroke por debajo del relleno) lo hace legible tanto sobre la
   cabeza negra como sobre las blancas y redondas, que son huecas. */
#sheet .mp-nombre{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:700;
  pointer-events:none;user-select:none;paint-order:stroke fill;
  fill:#fff;stroke:#15151b;stroke-linejoin:round}
#sheet .mp-nombre.abierta{fill:#15151b;stroke:#fff}
/* Reproductor flotante, siempre visible, discreto hasta que se usa */
.audiobox{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;
  width:min(540px,calc(100vw - 170px));
  opacity:.66;transition:opacity .18s ease}
.audiobox:hover,.audiobox:focus-within{opacity:1}
body.sonando .audiobox{opacity:1}