/* =========================================================
   Mi Piano — reproductor
   ---------------------------------------------------------
   Reproductor de abcjs. Estilos PROPIOS y completos: abcjs pinta sus iconos
   con .abcjs-fill/.abcjs-stroke y currentColor, sin esto salen en blanco.
   ========================================================= */
.abcjs-inline-audio{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
  min-height:50px;padding:6px 12px;border-radius:26px;
  background:rgba(255,255,255,.74);border:1px solid rgba(90,80,60,.13);
  box-shadow:0 6px 26px rgba(60,50,30,.14);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.abcjs-inline-audio .abcjs-btn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:36px;padding:0;margin:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:#4a4a55;cursor:pointer;transition:background .12s,color .12s}
.abcjs-inline-audio .abcjs-btn:hover{background:rgba(200,146,42,.14);color:var(--gold-dk)}
.abcjs-inline-audio .abcjs-btn:active{transform:translateY(1px)}
.abcjs-inline-audio .abcjs-btn svg{width:21px;height:21px;display:block}
.abcjs-inline-audio svg .abcjs-fill{fill:currentColor}
.abcjs-inline-audio svg .abcjs-stroke{stroke:currentColor;stroke-width:1.6;fill:none}
.abcjs-inline-audio .abcjs-midi-start{width:46px;height:46px;background:var(--gold);
  border-color:var(--gold);color:#fff;box-shadow:0 2px 10px rgba(200,146,42,.4);
  display:grid;place-items:center;line-height:0}
/* el triángulo de play tiene el peso a la izquierda: se desplaza un poco
   a la derecha para que quede centrado a la vista dentro del círculo */
.abcjs-inline-audio .abcjs-midi-start svg{grid-area:1/1;transform:translateX(2px)}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed svg{transform:none}
.abcjs-inline-audio .abcjs-midi-start:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed{background:var(--gold-dk);border-color:var(--gold-dk)}
/* El botón contiene los dos iconos superpuestos: se muestra solo el que toca.
   Sin estas reglas se ven play y pausa a la vez, descuadrados. */
.abcjs-inline-audio .abcjs-midi-start .abcjs-pause-svg{display:none}
.abcjs-inline-audio .abcjs-midi-start .abcjs-play-svg{display:block}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play-svg{display:none}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause-svg{display:block}
/* nombres alternativos según la versión de abcjs */
.abcjs-inline-audio .abcjs-midi-start .abcjs-pause{display:none}
.abcjs-inline-audio .abcjs-midi-start .abcjs-play{display:block}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play{display:none}
.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause{display:block}
/* play con cuenta atrás: relojito junto al play, al tamaño de repetir/retroceder */
.abcjs-inline-audio .mp-countbtn{color:var(--gold-dk)}
.abcjs-inline-audio .mp-countbtn:hover{background:rgba(200,146,42,.16);color:var(--gold-dk)}
.abcjs-inline-audio .mp-countbtn svg{width:22px;height:22px}
.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed,
.abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed{background:var(--ink);border-color:var(--ink);color:#fff}
.abcjs-inline-audio .abcjs-midi-progress-background{position:relative;flex:1 1 100px;min-width:80px;
  height:7px;margin:0 4px;background:rgba(90,80,60,.18);border-radius:4px;cursor:pointer}
.abcjs-inline-audio .abcjs-midi-progress-indicator{position:absolute;top:-4px;left:0;
  width:15px;height:15px;margin-left:0;background:var(--gold);border:2px solid #fff;border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.abcjs-inline-audio .abcjs-midi-clock{font-size:.82rem;color:var(--soft);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.abcjs-inline-audio .abcjs-css-warning{display:none!important}
.abcjs-inline-audio button:disabled{opacity:.32;cursor:default}
.abcjs-inline-audio button:disabled:hover{background:#fff;border-color:#d5cfc0}
.abcjs-cursor{stroke:var(--gold);stroke-width:2.6px;opacity:.9;pointer-events:none}
.abcjs-note-hl{fill:var(--gold)!important}
/* el tempo va en la cabecera ABC para que el sonido lo respete, pero no se dibuja */
.abcjs-tempo{display:none}