/* REVISIÓN 4. La pantalla funciona dentro del marco físico sin alterar el layout. */
header img{width:min(256px,65vw)!important}
@media(max-width:767px){header img{width:min(215px,60vw)!important}}
@media(max-width:600px){header img{width:min(188px,56.25vw)!important}}
/* Cada modo es mutuamente excluyente, sin halos ni filtros. */
#armonium .floating-element.mode.active,
#armonium .floating-element.mode.latched{transform:scale(.91)!important;filter:none!important}
#armonium .floating-element.mode:not(.active){transform:none!important;filter:none!important}
#armonium .floating-element.control.brief-press{transform:scale(.91)!important}
#armonium .floating-element.control.brief-press:not(.latched){filter:none!important}
#armonium .floating-element.control[data-control="lyrics"].latched,
#armonium .floating-element.control[data-control="notes"].latched{transform:scale(.915)!important}
/* Los botones de avance de canto y de frase, y Stop, son de impulso. */
#armonium .floating-element[data-control="songPrev"],
#armonium .floating-element[data-control="songNext"],
#armonium .floating-element[data-control="prev"],
#armonium .floating-element[data-control="next"],
#armonium .floating-element[data-control="stop"]{transition:transform .11s ease-out!important}
/* Cabecera: título grande, centrado de verdad; tempo a la derecha. */
#armonium .digital-screen .screen-score-header{height:21%!important;align-items:flex-start!important;justify-content:center!important}
#armonium .digital-screen #displaySongName{
 display:block!important;position:absolute!important;left:16%!important;right:16%!important;top:0!important;
 margin:0!important;width:68%!important;max-width:none!important;padding:0!important;
 text-align:center!important;overflow:hidden!important;white-space:nowrap!important;
 text-overflow:ellipsis!important;line-height:1.12!important;
 font:700 clamp(13px,5.3cqw,25px)/1.12 'EB Garamond',Georgia,serif!important;
 color:#ffecad!important;
}
#armonium .digital-screen #bpmPosition{position:absolute!important;right:0!important;top:1%!important;font-size:inherit!important;padding:0!important}
#armonium .digital-screen #bpmTxt{font:700 clamp(10px,3.8cqw,19px)/1.1 system-ui,sans-serif!important}
#armonium #displayPhraseStatus{position:absolute;right:0;top:15.5%;height:9%;z-index:3;text-align:right;color:#d0e5ce;
 font:600 clamp(8px,2.85cqw,13px)/1.15 'EB Garamond',Georgia,serif;white-space:nowrap}
#armonium #displayPhraseStatus.recent{color:#ffe2a0}
/* El pentagrama y sus sílabas ya no comparten superficie de dibujo. */
#armonium .digital-screen .screen-score-area{top:24%!important;height:47%!important;left:1%!important;width:98%!important;overflow:hidden!important}
#armonium .digital-screen #miniScore{height:76%!important;width:100%!important;display:block!important;overflow:hidden!important}
#armonium #miniSyllables{position:absolute;left:12.82%;bottom:1%;width:84.6%;height:23%;display:flex;align-items:center;overflow:hidden;gap:0;
 font:500 clamp(9px,3cqw,14px)/1.08 Georgia,serif;color:#dce6d7;white-space:nowrap}
#armonium #miniSyllables .mini-syllable{min-width:0;display:block;text-align:center;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
#armonium #miniSyllables .mini-syllable.active{color:#ffe497;font-weight:700}
#armonium .digital-screen .screen-lyrics-area{top:74%!important;height:24%!important}
/* Páginas exclusivas del display: todo el espacio se destina a la función seleccionada. */
#armonium .digital-screen .display-expanded-scroll{display:none!important;position:absolute!important;inset:0!important;z-index:6;
 margin:0!important;padding:7px 12px!important;width:100%!important;height:100%!important;
 overflow:auto!important;overscroll-behavior:contain;touch-action:pan-x pan-y;
 scrollbar-width:thin;scrollbar-color:#dbbf8b transparent;
 color:#ffefcc;background:transparent;-webkit-overflow-scrolling:touch;
 user-select:text;-webkit-user-select:text}
#armonium .digital-screen.view-lyrics .screen-score-header,
#armonium .digital-screen.view-lyrics #displayPhraseStatus,
#armonium .digital-screen.view-lyrics .screen-score-area,
#armonium .digital-screen.view-lyrics .screen-lyrics-area,
#armonium .digital-screen.view-notes .screen-score-header,
#armonium .digital-screen.view-notes #displayPhraseStatus,
#armonium .digital-screen.view-notes .screen-score-area,
#armonium .digital-screen.view-notes .screen-lyrics-area{display:none!important}
#armonium .digital-screen.view-lyrics #displayLyricsScroll,
#armonium .digital-screen.view-notes #displayScoreScroll{display:block!important}
#armonium #displayLyricsScroll .display-lyric-line{white-space:pre-wrap;margin:0 0 .5em;
 font:600 clamp(13px,4.8cqw,24px)/1.4 'EB Garamond',Georgia,serif;color:#fff0c1}
#armonium #displayLyricsScroll .display-lyric-line.active{color:#fff9e9;background:#547b685e;border-radius:4px}
#armonium #displayScoreScroll svg{display:block;width:800px!important;max-width:none!important;height:auto!important;min-height:100%;overflow:visible!important;
 --ink:#f3e8d1;--paper:#143e32;--gold:#ffe3a0;--gold-glow:rgba(255,210,120,.24)}
#armonium #displayScoreScroll .staff line{stroke:#bbd5c4!important}
#armonium #displayScoreScroll .note .head{fill:#f8ecd5!important}
#armonium #displayScoreScroll .note .stem,
#armonium #displayScoreScroll .note .flag,
#armonium #displayScoreScroll .note .ledger{stroke:#f3e5ce!important}
#armonium #displayScoreScroll .note .lyr{fill:#ffecbb!important}
#armonium #displayScoreScroll .note .acc,
#armonium #displayScoreScroll .note .dot{fill:#f8ecd5!important}
#armonium #displayScoreScroll .clef,
#armonium #displayScoreScroll .rest{fill:#e9f4df!important}
#armonium #displayScoreScroll .note.cur .head{fill:#f4c76c!important}
#armonium #displayScoreScroll .note.cur .lyr{fill:#ffe28d!important}
/* Oscurecimiento de pantalla: el marco permanece, el LED conserva el área táctil. */
#armonium .led-indicator{z-index:18!important;cursor:pointer!important;border:0;padding:0;background:none;pointer-events:auto!important}
#armonium .led-indicator img{transition:opacity .2s ease,filter .2s ease}
#armonium.display-off .led-indicator img{opacity:.22;filter:grayscale(1) brightness(.5)}
#armonium .digital-screen .lcd-off-mask{display:none;position:absolute;inset:0;z-index:20;background:#0b201b;opacity:.96;pointer-events:auto}
#armonium.display-off .lcd-off-mask{display:block}
/* Área clicable invisible exactamente sobre la placa grabada de la madera. */
#kriyabanPlaque{position:absolute;z-index:15;left:42.1%;top:85.95%;width:16%;height:4%;cursor:pointer;background:transparent;display:block}
#kriyabanPlaque:focus-visible{outline:2px solid #ffe1a3;outline-offset:2px}
.lotus-pdf-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:13px auto 1px;padding:4px 8px;
 font:600 16px/1.3 'EB Garamond',Georgia,serif;color:#665136;text-align:center}
.lotus-pdf-links a{padding:6px 12px;border-radius:7px;border:1px solid #c7a875;text-decoration:none;color:#53412b;background:#fff9e8}
.lotus-pdf-links a:hover{background:#efdfba}
/* Clonar el SVG fuera de #score requiere reponer explícitamente los rellenos. */
#armonium #displayScoreScroll .phraseBg,
#armonium #displayScoreScroll .note .glow{fill:transparent!important}
#armonium #displayScoreScroll .phraseBg.cur{fill:rgba(255,233,153,.09)!important}
#armonium #displayScoreScroll .note.cur .glow{fill:rgba(255,233,153,.16)!important}
#armonium .digital-screen #displaySongName{left:18%!important;right:18%!important;width:64%!important;font-size:clamp(12px,4.65cqw,22px)!important}
#armonium.display-off .led-indicator img{opacity:0!important}
#armonium.display-off .led-indicator:hover img,
#armonium.display-off .led-indicator:focus-visible img{opacity:.18!important}