/* Nueva escena basada en FondoArmonio.png (1448 × 968) y referencia Completo.jpg.
 * Coordenadas fijas verificadas sobre Completo.jpg. */
#photoStage,#photoStage #armonium{aspect-ratio:1448 / 968!important;height:auto;}
#photoStage #armonium{width:100%;max-width:none;margin:0;position:relative;isolation:isolate;background:transparent;overflow:hidden;}
#photoStage #armonium .case-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:0;}
#armonium .floating-element{
 position:absolute!important;
 left:var(--x)!important;top:var(--y)!important;
 width:var(--w)!important;height:var(--h)!important;
 margin:0!important;padding:0!important;border:0!important;
 transform:none;transform-origin:center center;
 box-sizing:border-box;border-radius:0;background:transparent;
 z-index:10;display:block;cursor:pointer;
 user-select:none;-webkit-user-select:none;touch-action:none;
}
#armonium .floating-element>img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
#armonium .floating-element.control:focus-visible{outline:2px solid #fff3b7;outline-offset:1px}
#armonium .floating-element.mode{border-radius:0;}

#armonium .display-layer{z-index:9;cursor:default}
#armonium .display-layer .digital-screen{
 position:absolute!important;z-index:1;left:3.5%!important;top:6.5%!important;
 width:93%!important;height:86%!important;background:transparent!important;
 border:0;box-shadow:none!important;border-radius:0;color:#ecffe9;
 container-type:inline-size;overflow:hidden;
}
#armonium .digital-screen .screen-score-header{color:#e7fff5;text-shadow:0 1px 2px #17352b}
#armonium .digital-screen .screen-lyrics-area{background:#113e2d23;border-color:#e1fff07a}
#armonium .digital-screen .screen-lyrics-caption{color:#d4f6de}
#armonium .display-layer #screenZoomButton{cursor:zoom-in}
#armonium .floating-element.tempo-handle{z-index:12;pointer-events:none;--tempo-shift:0%;transform:translateX(var(--tempo-shift));transition:transform .08s ease;}
#armonium .tempo-input{position:absolute;left:79.42%!important;top:49.6%!important;width:8.55%!important;height:6.5%!important;z-index:13;cursor:ew-resize;touch-action:none;}
#armonium .keyboard{position:absolute;inset:0;z-index:6;pointer-events:none}
#armonium .piano-key{z-index:6;}
#armonium .piano-key.black{z-index:7}
#armonium .led-indicator{pointer-events:none;}
#armonium .layout-resize-handle{display:none;}

/* REVISION 3 — mandos mecánicos y pantalla legible. */
#photoStage, #photoStage #armonium {aspect-ratio:1448 / 968!important; height:auto!important;}
#photoStage #armonium {width:100%;max-width:none;margin:0;overflow:hidden!important;background:transparent!important;}
#armonium .floating-element.control,
#armonium .floating-element.control:hover,
#armonium .floating-element.control:active,
#armonium .floating-element.control.pressed,
#armonium .floating-element.mode.active,
#armonium .floating-element.mode:not(.active) {
  filter:none!important;box-shadow:none!important;
}
#armonium .floating-element.control{transition:transform 180ms cubic-bezier(.2,.7,.2,1)!important;transform-origin:center center!important;}
#armonium .floating-element.control.latched {transform:scale(.915)!important;}
/* Los dos mandos correderos desplazan las imágenes en el eje de sus ranuras. */
#armonium .floating-element.toggle-note.on {transform:translateX(58%)!important;}
#armonium .floating-element.chord.on {transform:translateX(-34%)!important;}
#armonium .floating-element.toggle-note,
#armonium .floating-element.chord {transition:transform 220ms ease-in-out!important;}
#armonium .song-name-display, #armonium #screen-message {display:none!important;}
#armonium .digital-screen {position:absolute!important;inset:6.5% auto auto 3.5%!important;width:93%!important;height:86%!important;
   container-type:inline-size;overflow:hidden!important;background:transparent!important;color:#ecffe9;border:0!important;box-shadow:none!important;border-radius:0;}
#armonium .digital-screen .screen-score-header {position:absolute!important;inset:0 0 auto 0!important;height:19%!important;
   display:flex!important;align-items:flex-start;justify-content:space-between;gap:2%;font-size:inherit!important;letter-spacing:0;}
#armonium .digital-screen #displaySongName{position:relative!important;order:0;display:-webkit-box;
   -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;flex:1;min-width:0;max-width:78%;
   padding-top:1px;overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis;white-space:normal;
   font:600 clamp(10px,3.55cqw,16px)/1.07 'EB Garamond',Georgia,serif;color:#ffedbd;text-shadow:0 1px 1px #214232;}
#armonium .digital-screen #bpmPosition{order:1;position:relative!important;flex:0 0 auto;padding-top:1px;
   font:700 clamp(11px,4.6cqw,21px)/1.1 system-ui,sans-serif!important;color:#ffe2a0;white-space:nowrap;letter-spacing:0;}
#armonium .digital-screen #bpmTxt{font:inherit!important;color:inherit!important;white-space:nowrap;}
#armonium .digital-screen .screen-score-area {position:absolute!important;left:1%!important;top:18%!important;
   width:98%!important;height:53%!important;overflow:hidden!important;}
#armonium .digital-screen #miniScore {display:block;width:100%;height:100%;overflow:visible;}
#armonium .digital-screen .screen-lyrics-area {position:absolute!important;top:72%!important;left:2%!important;
   height:27%!important;width:96%!important;margin:0;padding:2px 1% 0;border-top:1px solid #c2dcc690!important;
   overflow:hidden!important;background:none!important;}
#armonium .digital-screen #liveLyricsPosition{height:100%;min-height:0;overflow:hidden;}
#armonium .digital-screen #mobileLyrics{display:block!important;overflow:hidden!important;width:100%;height:100%;margin:0!important;padding:0!important;
   min-height:0!important;max-height:none!important;color:#ffe4a3!important;
   font:600 clamp(11px,4.65cqw,21px)/1.12 'EB Garamond',Georgia,serif!important;}
#armonium .digital-screen #mobileLyrics .live-lyric-line{
   display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
   width:100%;height:auto!important;min-height:0!important;max-height:100%!important;
   padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
   overflow:hidden!important;white-space:normal!important;overflow-wrap:break-word;
   font:inherit!important;color:#ffebbb!important;background:none!important;text-overflow:ellipsis;
}
#armonium .digital-screen #mobileLyrics .live-lyric-line.active{color:#ffedac!important;font-weight:700!important;}
/* El zoom sigue siendo accesible desde los pulsadores Lyrics / Notes, no ocupa la LCD. */
#armonium .digital-screen #screenZoomButton {display:none!important;}
/* Evitar saltos y barras laterales al reconstruir el canto. El teclado en móvil sigue
   desplazándose dentro de su propia ventana, nunca se agranda la página. */
html,body{max-width:100%;overflow-x:clip;}
.harmonium-window{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;max-width:100%;}
#photoStage{max-width:100%;}
#photoStage #songPickerMenu{max-height:min(330px,60vh);}
/* La partitura clásica alimenta la ventana ampliada, pero no modifica jamás
   la altura del documento al cargar un canto con más pentagramas. */
#legacyLayout {
  position:absolute!important;left:-15000px!important;top:0!important;
  width:1040px!important;height:1px!important;max-height:1px!important;
  overflow:hidden!important;contain:layout size style;
  visibility:hidden!important;pointer-events:none!important;
}
/* Los efectos :active nativos no deben alterar los mandos excluidos. */
#armonium .floating-element.control:active {transform:none;}
#armonium .floating-element.control.latched:active {transform:scale(.915)!important;}
#armonium .floating-element.toggle-note.on:active {transform:translateX(58%)!important;}
#armonium .floating-element.chord.on:active {transform:translateX(-34%)!important;}