/* Armonio · interfaz táctil y responsive (rev. móvil 2026-10-28).
   La escena y los controles originales permanecen intactos en escritorio. */
.mobile-console,.mobile-view-heading{display:none}

@media(max-width:900px), (max-height:500px) and (pointer:coarse){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{overflow-x:clip}
  .wrap{width:100%;max-width:100%;padding:8px 10px 24px!important}
  header{gap:2px!important;min-height:0;padding:4px 0 10px!important}
  header img{width:min(152px,39vw)!important;max-width:100%;height:auto;transform:none!important}
  header h1{font-size:clamp(20px,5vw,28px)!important;line-height:1.07!important;margin:4px 0 0!important;padding:0 7px!important;text-wrap:balance}
  header .sub{display:none!important}
  #langArea{top:5px!important;right:0!important}
  #languageButton{max-width:116px!important;min-width:0!important;height:34px!important;box-shadow:0 1px 4px #573f2521}
  #languageMenu{max-height:60dvh;overflow:auto}

  /* Teclado y controles accesibles sin depender de los puntos diminutos del PNG. */
  .mobile-console{display:block;position:relative;z-index:4;width:100%;min-width:0;
    margin:6px auto 0;padding:12px;border-radius:17px;border:1px solid #dbc394;
    background:linear-gradient(155deg,#fffaf0,#f3e7ce);box-shadow:0 5px 18px #4e2f1614}
  .mobile-song-label{display:flex;align-items:center;justify-content:space-between;
    color:#785b31;font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;margin:0 2px 7px}
  .mobile-song-row{display:grid;grid-template-columns:39px minmax(0,1fr) 39px;align-items:stretch;gap:7px;min-width:0}
  .mobile-song-row select{display:block;width:100%;height:45px;min-width:0;max-width:100%;font:600 16px/1.2 'EB Garamond',Georgia,serif;
    padding:0 30px 0 12px;border:1px solid #c7ae81;border-radius:10px;background:#fffdf8;color:#49331e;
    text-overflow:ellipsis;box-shadow:inset 0 1px 2px #4329000e}
  .mobile-song-row button{min-width:0;min-height:45px;padding:0;background:#fdf4de;
    border:1px solid #c7ae81;border-radius:10px;font:600 24px/1 Georgia,serif;color:#6e3b20;cursor:pointer}
  .mobile-song-row button:active{background:#e7ce9d}
  .mobile-readout{margin-top:12px;border:1px solid #426657;border-radius:13px;
    padding:11px 13px 13px;background:linear-gradient(135deg,#163d30,#0d3329 65%,#164b38);
    color:#f5e5bb;box-shadow:inset 0 0 10px #001b1390,0 2px 6px #382c1c20}
  .mobile-readout-top{display:flex;align-items:center;justify-content:space-between;gap:6px;
    font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#c8ddc7}
  #mobileBpm{font:700 13px/1.2 system-ui,sans-serif;color:#ffe29a;white-space:nowrap}
  #mobileCurrentTitle{color:#ffe6b4;font:600 clamp(18px,5vw,23px)/1.16 'EB Garamond',Georgia,serif;
    text-align:center;margin:7px 0 8px;overflow-wrap:anywhere}
  #mobileCurrentLyrics{border-top:1px solid #9cc09b77;padding:9px 0 0;text-align:center;
    color:#ffebbc;font:500 clamp(18px,4.8vw,23px)/1.28 'EB Garamond',Georgia,serif;
    min-height:2.65em;overflow-wrap:anywhere;white-space:normal}
  .mobile-transport{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;gap:8px;margin-top:12px}
  .mobile-transport button{display:flex;justify-content:center;align-items:center;gap:6px;
    min-width:0;min-height:49px;border-radius:11px;border:1px solid #b49560;color:#59371e;
    background:linear-gradient(#fffaf0,#ead9b6);font:600 14px/1 system-ui,sans-serif;cursor:pointer}
  .mobile-transport .mobile-play{color:#fff7e6;border-color:#4d2817;
    background:linear-gradient(#975b34,#613117);box-shadow:0 3px 7px #3a1b0b20}
  .mobile-transport button:active{transform:translateY(1px)}
  .mobile-transport svg{width:23px;height:23px;fill:currentColor;flex-shrink:0}
  .mobile-transport .mobile-play svg{width:26px;height:26px}
  .mobile-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
  .mobile-tool-grid button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;
    padding:5px 6px;border:1px solid #cfb993;background:#fffaf0;border-radius:10px;color:#573e24;
    cursor:pointer;font:600 clamp(12px,3.5vw,15px)/1.15 'EB Garamond',Georgia,serif}
  .mobile-tool-grid button[aria-pressed="true"]{border-color:#967039;background:#e8d09c;box-shadow:inset 0 0 0 1px #967039}
  .mobile-settings{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:8px;margin-top:12px}
  .mobile-mode-wrap{display:flex;align-items:center;gap:7px;flex:1 1 140px;min-width:0}
  .mobile-mode-wrap label,.mobile-tempo-wrap label{color:#6f5532;font:700 12px system-ui,sans-serif;white-space:nowrap}
  #mobileMode{width:100%;min-width:0;max-width:100%;height:48px;padding:7px 30px 7px 12px;font:500 17px/1.3 system-ui,sans-serif;border-radius:9px;border-color:#ccb38b;background:#fffdf7;color:#49331e}
  #mobileMode option{font:500 17px/1.4 system-ui,sans-serif;background:#fffdf7;color:#49331e}
  .mobile-tempo-wrap{display:flex;align-items:center;gap:8px;flex:1 1 175px;min-width:0}
  .mobile-tempo-wrap label{flex:0 0 auto}
  #mobileTempo{width:100%;min-width:65px;height:30px;margin:0;accent-color:#83512d;touch-action:pan-x}
  .mobile-view-heading{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px 2px 7px}
  #mobileViewToggle{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid #9e794c;
    min-height:37px;background:#fff8e9;color:#643d20;padding:6px 12px;cursor:pointer;font:600 13px/1.1 system-ui,sans-serif}
  #mobileViewToggle[aria-pressed="true"]{background:#70432a;border-color:#70432a;color:white}
  /* Vista completa por defecto. La vista de tocar recupera un teclado de tamaño real
     con desplazamiento horizontal únicamente dentro de la imagen. */
  .harmonium-window{display:block!important;width:100%!important;max-width:100%;margin:0 auto!important;
    overflow-x:auto!important;overflow-y:hidden!important;border-radius:11px;
    background:#59351d;touch-action:pan-x pan-y!important;scrollbar-width:thin;scrollbar-color:#ae8650 #eee2c9}
  #photoStage.harmonium-stage{width:100%!important;min-width:0!important;max-width:none!important;
    aspect-ratio:1448/968!important;height:auto!important}
  #photoStage #armonium{width:100%!important;min-width:0!important;aspect-ratio:1448/968!important;height:auto!important}
  /* Ampliación de toda la escena: panel + teclas conservan la precisión táctil. */
  body.mobile-keyboard-zoom #photoStage.harmonium-stage{
    width:var(--mobile-instrument-width, 850px)!important;
    min-width:var(--mobile-instrument-width, 850px)!important;
    max-width:none!important;margin-top:0!important;
  }
  body.mobile-keyboard-zoom #photoStage #armonium{
    width:100%!important;min-width:0!important;
  }
  body.mobile-keyboard-zoom .harmonium-window{
    height:min(62dvh, 500px)!important;
    min-height:250px!important;
    overflow-x:auto!important;overflow-y:auto!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #armonium.show-note-names .piano-key .key-name{
    font-size:clamp(8px, 1.1vw, 12px);
    line-height:1;
  }
  body.mobile-keyboard-zoom #armonium.show-note-names .piano-key .key-name{
    font-size:clamp(10px, 1.6vw, 17px);
  }
  body.mobile-keyboard-zoom #armonium.show-note-names .piano-key.black .key-name{
    font-size:clamp(8px, 1.35vw, 13px);
  }
  .lotus-pdf-links{margin-top:17px!important}
  footer{max-width:100%;overflow-wrap:anywhere;padding:13px 2px 0!important}
  footer .rev9-errata{padding:12px 11px;margin-bottom:14px}
  footer .rev9-errata strong{font-size:19px}
  footer .rev9-errata p{font-size:15px}
  .screen-reader-modal{padding:8px!important;align-items:center}
  .screen-reader-card{width:100%;max-width:100%;max-height:calc(100dvh - 16px);padding:11px!important}
  .reader-head h2{font-size:clamp(17px,5vw,24px)}
  .reader-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:11px;padding:7px 0}
  #readerScoreFull,#readerLyricsFull{max-height:36dvh!important;max-width:100%;overflow:auto}
  #readerScoreFull svg{max-width:none}
  #readerModal[data-mobile-panel="lyrics"] .reader-grid>section:first-child,
  #readerModal[data-mobile-panel="notes"] .reader-grid>section:nth-child(2){display:none}
  #readerModal[data-mobile-panel="lyrics"] #readerLyricsFull{max-height:calc(100dvh - 130px)!important}
  #readerModal[data-mobile-panel="notes"] #readerScoreFull{max-height:calc(100dvh - 130px)!important}
  .mobile-console button:focus-visible,.mobile-console select:focus-visible,.mobile-console input:focus-visible,
  #mobileViewToggle:focus-visible{outline:3px solid #bc893e;outline-offset:2px}
}
@media(max-width:365px){
 .mobile-console{padding:10px}
 .mobile-transport{gap:6px}
 .mobile-tool-grid{gap:5px}
 .mobile-song-row{grid-template-columns:35px minmax(0,1fr) 35px;gap:5px}
 .mobile-song-row select{font-size:14px}
 .mobile-transport button{min-height:45px}
 .mobile-transport svg{width:19px;height:19px}
 .mobile-transport .mobile-play svg{width:23px;height:23px}
}
@media(min-width:901px) and (min-height:501px){
 body.mobile-keyboard-zoom #photoStage.harmonium-stage,
 body.mobile-keyboard-zoom #photoStage #armonium{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){.mobile-console button{transition:none}}
/* Herramientas musicales adaptadas a la anchura disponible. */
@media(max-width:900px), (max-height:500px) and (pointer:coarse){
 .mobile-tool-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .mobile-tool-grid>button{grid-column:span 2}
 .mobile-tool-grid>button:nth-child(4),.mobile-tool-grid>button:nth-child(5){grid-column:span 3}
}
@media(max-width:540px){
 .mobile-settings{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
 .mobile-mode-wrap,.mobile-tempo-wrap{width:100%;min-width:0;flex:auto}
 .mobile-mode-wrap select{flex:1;min-width:0}
 .mobile-tempo-wrap input{flex:1;width:100%}
}
@media(max-width:900px), (max-height:500px) and (pointer:coarse){
 #languageButton{width:130px!important;max-width:130px!important}
 #langArea{right:0!important}
}

/* AVISO INICIAL EN MÓVIL: restaurado y ajustado para lectura cómoda. */
body.welcome-open { overflow: hidden; }
#welcomeModal.open { display: flex; }
#welcomePanel .welcomeBtn { min-width: 152px; min-height: 48px; font-weight: 600; }
#welcomePanel .welcomeBtn:focus-visible { outline: 3px solid #a97721; outline-offset: 4px; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  #welcomeModal { padding: 16px !important; }
  #welcomePanel {
    width: min(410px, 100%) !important;
    max-width: min(410px, 100%) !important;
    padding: 20px 22px 23px !important;
    max-height: calc(100dvh - 32px) !important;
  }
  /* La portada original es grande: un símbolo compacto deja espacio al mensaje. */
  #welcomePanel #welcomeCover {
    width: min(110px, 30%) !important;
    max-width: 110px !important;
    max-height: 145px !important;
    object-fit: contain !important;
    margin: 0 auto 4px !important;
  }
  #welcomePanel .welcomeHead { gap: 10px !important; }
  #welcomePanel h2 { font-size: clamp(24px, 6vw, 30px) !important; line-height: 1.15 !important; }
  #welcomePanel p { font-size: clamp(17px, 4vw, 19px) !important; line-height: 1.38 !important; }
  #welcomePanel .welcomeBtn { margin-top: 20px !important; padding: 11px 27px !important; font-size: 18px !important; }
}
@media (max-height: 540px) and (pointer: coarse) {
  #welcomePanel #welcomeCover { display: none !important; }
  #welcomePanel { padding: 16px 20px !important; }
}


/* Armonio móvil rev.3: nota oculta, un botón de ampliación y lectura cómoda. */
.mobile-song-dialog[hidden]{display:none!important}
@media(max-width:900px), (max-height:500px) and (pointer:coarse){
  .mobile-song-row .mobile-song-choice{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:0 12px;min-width:0;min-height:48px;border:1px solid #c7ae81;
    border-radius:10px;background:#fffdf8;color:#49331e;
    font:600 17px/1.25 'EB Garamond',Georgia,serif;text-align:left;
    box-shadow:inset 0 1px 2px #4329000e;
  }
  .mobile-song-choice span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-song-choice .mobile-song-chevron{font:700 15px system-ui,sans-serif;flex:none}
  #mobileSongSelect[hidden]{display:none!important}
  #armonium:not(.show-note-names) .piano-key .key-name{display:none!important}
  #armonium,.harmonium-window,#photoStage,#armonium .piano-key,
  #armonium .piano-key *{
    -webkit-user-select:none!important;user-select:none!important;
    -webkit-touch-callout:none!important;
    -webkit-tap-highlight-color:transparent;
  }
  #armonium .piano-key,#armonium .keyboard{touch-action:none!important}
  /* No abrir ningún reproductor de grabaciones en el teléfono. */
  #mobileRecord,#armonium [data-control="recording"],#recordingLauncher,
  #chantRecordButton{display:none!important}
  .mobile-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mobile-tool-grid>button{grid-column:auto!important}
  .mobile-view-heading{justify-content:center}
  #mobileViewToggle{min-height:44px;padding:10px 16px;font-size:15px}
  .mobile-zoom-controls,.mobile-instrument-hint{display:none!important}
  body.mobile-keyboard-zoom .harmonium-window{cursor:grab;touch-action:pan-x pan-y!important}
  body.mobile-keyboard-zoom .harmonium-window:active{cursor:grabbing}
  #languageMenu{min-width:180px;max-width:min(280px,calc(100vw - 24px));
    max-height:min(65dvh,440px);overflow-y:auto;z-index:1200}
  #languageMenu button{font:600 17px/1.35 system-ui,sans-serif;min-height:49px;
    white-space:normal;overflow-wrap:anywhere}
  .mobile-song-dialog{
    position:fixed;inset:0;z-index:2500;display:flex;justify-content:center;
    align-items:center;padding:12px;background:rgba(27,21,16,.7);
  }
  .mobile-song-dialog-panel{width:min(520px,100%);min-width:0;max-height:calc(100dvh - 24px);
    display:flex;flex-direction:column;overflow:hidden;background:#fffaf0;
    border:2px solid #a9813e;border-radius:17px;box-shadow:0 14px 45px #160d09a8;
    padding:14px;box-sizing:border-box}
  .mobile-song-dialog-head{display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin:0 0 8px}
  .mobile-song-dialog-head h2{margin:0;color:#57371e;font:700 25px/1.15 'EB Garamond',Georgia,serif}
  .mobile-song-dialog-head button{width:46px;height:46px;min-width:46px;
    background:#eee0c5;border:1px solid #b89461;border-radius:11px;
    font:700 30px/1 system-ui,sans-serif;color:#54351a}
  .mobile-dialog-search-label{display:block;color:#775936;font:600 14px/1.2 system-ui,sans-serif;margin:4px 0 6px}
  #mobileSongFilter{display:block;width:100%;height:47px;padding:8px 12px;
    background:#fff;border:1px solid #ab8b5e;border-radius:9px;
    color:#35271b;font:500 16px/1.2 system-ui,sans-serif;min-width:0;}
  .mobile-dialog-songs{flex:1 1 auto;min-height:70px;max-height:100%;overflow-y:auto;
    margin-top:9px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .mobile-dialog-songs .mobile-song-option{display:block;width:100%;min-height:52px;
    text-align:left;border:0;border-bottom:1px solid #deccaa;border-radius:7px;
    padding:10px 12px;background:transparent;color:#49331e;
    font:600 18px/1.3 'EB Garamond',Georgia,serif;
    white-space:normal;overflow-wrap:anywhere}
  .mobile-dialog-songs .mobile-song-option[aria-selected="true"]{
    background:#ead2a1;color:#3d2713}
  body.mobile-song-dialog-open{overflow:hidden!important}
}