/* v19: el selector cubre el display completo (no el contenedor interior digitalScreen),
   preserva el fondo nativo y muestra cinco cantos completos. */
#armonium #displayChantPicker[hidden]{display:none!important}
#armonium .digital-screen.chant-picking .screen-score-header,
#armonium .digital-screen.chant-picking #displayPhraseStatus,
#armonium .digital-screen.chant-picking .screen-score-area,
#armonium .digital-screen.chant-picking .screen-lyrics-area,
#armonium .digital-screen.chant-picking #displayScoreScroll,
#armonium .digital-screen.chant-picking #displayLyricsScroll{display:none!important}
#armonium .display-layer #displayChantPicker{
  /* Hermano de digitalScreen: usa el 100% de la imagen verde, no su recorte 93% × 86%. */
  position:absolute;inset:0;z-index:16;display:flex;flex-direction:column;
  align-items:stretch;width:100%;height:100%;overflow:hidden;
  background:transparent!important;
  color:#eaf5d8;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;box-sizing:border-box;
}
/* El pequeño margen superior conserva las posiciones de la captura. */
#armonium #displayChantPicker::before{
  content:'';display:block;flex:0 0 6%;pointer-events:none;
}
#armonium .display-chant-counter{
  position:absolute;top:4.5%;left:3.5%;z-index:2;
  color:rgba(244,248,225,.92);
  font:700 clamp(12px,2.9cqw,19px)/1 'EB Garamond',Georgia,serif;
  text-shadow:0 1px 2px rgba(0,19,14,.72);
  letter-spacing:.02em;
  pointer-events:none;user-select:none;
}
#armonium #displayChantList{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;outline-offset:-2px;
  -webkit-tap-highlight-color:transparent;touch-action:none;
  cursor:grab;
  /* Cinco filas completas y ningún sexto canto desvanecido en los bordes. */
  background:transparent!important;
}
#armonium #displayChantList.dragging{cursor:grabbing}
#armonium #displayChantList:focus-visible{outline:2px solid #e7d08f;outline-offset:-3px}
#armonium #displayChantTrack{
  position:absolute;top:0;left:9.5%;width:83.5%;padding:0;box-sizing:border-box;
  background:transparent!important;
  transition:transform 165ms cubic-bezier(.22,.75,.3,1);will-change:transform;
}
#armonium .display-chant-item{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--chant-row-height,28px);min-height:0;
  margin:0;padding:0 3%;box-sizing:border-box;border:0;border-radius:3px;
  background:transparent;color:#f0f4e3;text-align:center;
  font:600 var(--chant-font-size,23px)/1.06 'EB Garamond',Georgia,serif;
  text-shadow:0 1px 2px rgba(0,19,14,.68);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;touch-action:none;-webkit-touch-callout:none;
}
#armonium .display-chant-item.selected{
  color:#fff6cf;
  background:linear-gradient(90deg,transparent,rgba(253,242,196,.13) 13%,rgba(253,242,196,.17) 50%,rgba(253,242,196,.13) 87%,transparent);
  font-weight:700;text-shadow:0 0 5px rgba(251,229,157,.5),0 1px 2px #08231c;
  box-shadow:inset 0 1px rgba(249,235,191,.38),inset 0 -1px rgba(249,235,191,.38);
}
#armonium #displayChantFooter{
  position:relative;flex:0 0 26%;min-height:26px;display:flex;align-items:center;
  justify-content:center;border:0;padding:0;box-sizing:border-box;
  background:transparent!important;
}
#armonium #displayChantFooter::before{
  content:'';position:absolute;top:0;left:2%;width:96%;height:1px;
  background:rgba(245,234,190,.28);pointer-events:none;
}
#armonium #displayChantAccept{
  width:36%;min-width:0;height:46%;min-height:20px;max-height:42px;
  box-sizing:border-box;transform:none;
  border:1px solid #e1c88c;border-radius:5px;padding:1px 12px;
  background:linear-gradient(#f5e4b4,#c8a866);color:#273628;
  font:700 clamp(15px,3.7cqw,23px)/1.1 'EB Garamond',Georgia,serif;
  cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* v20: alinear ópticamente el texto dentro del botón dorado, sin alterar
   tamaño ni posición de su caja. EB Garamond tiene una caja de línea asimétrica. */
#armonium #displayChantAccept{
  display:flex;align-items:center;justify-content:center;
  padding:0 12px;
  line-height:1;
}
#armonium #displayChantAccept .display-chant-accept-text{
  display:block;line-height:1;white-space:nowrap;
  transform:translateY(-.12em);
  pointer-events:none;
}
#armonium #displayChantAccept:focus-visible{outline:2px solid #fff8bd;outline-offset:1px}
#armonium #displayChantAccept:active{background:#fff4c6}
@media(prefers-reduced-motion:reduce){#armonium #displayChantTrack{transition:none}}

/* Evitar menús de pulsación prolongada sobre zonas de interpretación y controles.
   No se bloquean inputs, enlaces externos ni selección de texto en artículos. */
#armonium,#armonium *,#photoStage .floating-element,
.mobile-console,.mobile-console button,.mobile-console button *,
#mobileViewToggle,#mobileSongDialog button,#displayChantPicker,
#screenZoomButton{
  -webkit-touch-callout:none!important;-webkit-user-select:none!important;
  user-select:none!important;-webkit-tap-highlight-color:transparent;
}
#armonium .piano-key,#armonium .piano-key *,
#armonium .floating-element.control,#armonium .floating-element.control *,
#armonium .floating-element.mode,#armonium .floating-element.mode *{
  touch-action:none!important;-webkit-user-drag:none!important;
}
#armonium .floating-element img,#photoStage img{pointer-events:none;-webkit-user-drag:none!important}
.mobile-console button,#mobileViewToggle,#mobileDialogClose{touch-action:manipulation}

/* Aviso de uso para teléfonos: fotografía proporcionada y tipografía más clara. */
@media(max-width:767px), (max-height:500px) and (pointer:coarse){
 #welcomeModal{padding:12px!important;align-items:center!important}
 #welcomePanel{
   box-sizing:border-box;width:min(420px,100%)!important;max-width:calc(100vw - 24px)!important;
   max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;
   padding:16px 20px 18px!important;text-align:center!important;
   background:#fff9ed;border:1px solid #d9c69d;border-radius:18px!important;
 }
 #welcomePanel .welcomeHead{display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important}
 #welcomePanel #welcomeCover{
   display:block!important;width:auto!important;height:auto!important;
   max-width:min(59vw,225px)!important;max-height:min(39dvh,320px)!important;
   object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important;
   margin:0 auto 5px!important;border-radius:9px!important;
 }
 #welcomePanel h2{
   font:600 clamp(24px,6.2vw,32px)/1.07 'Cormorant Garamond',Georgia,serif!important;
   color:#47351c!important;letter-spacing:0!important;margin:1px 0 4px!important;
 }
 #welcomePanel p{
   font:500 clamp(15px,3.75vw,18px)/1.45 'Nunito Sans',system-ui,sans-serif!important;
   color:#4b4437!important;letter-spacing:0!important;margin:0!important;
 }
 #welcomePanel .welcomeBtn{
   display:block!important;min-height:46px!important;margin:15px auto 0!important;
   padding:10px 30px!important;background:#563f27!important;border-radius:11px!important;
   color:#fffaf1!important;font:700 16px/1.25 'Nunito Sans',system-ui,sans-serif!important;
 }
}
@media(max-height:540px) and (pointer:coarse) and (orientation:landscape){
 #welcomePanel{width:min(610px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;
   padding:11px 17px!important}
 #welcomePanel .welcomeHead{display:grid!important;grid-template-columns:minmax(90px,30%) minmax(0,1fr);
   grid-template-rows:auto auto;column-gap:16px!important;row-gap:4px!important;text-align:left!important}
 #welcomePanel #welcomeCover{display:block!important;grid-column:1;grid-row:1/3;
   width:auto!important;max-width:100%!important;max-height:min(54dvh,195px)!important;margin:auto!important}
 #welcomePanel h2{grid-column:2;grid-row:1;margin:0!important;font-size:clamp(22px,3.7vw,28px)!important}
 #welcomePanel p{grid-column:2;grid-row:2;font-size:clamp(13px,2.2vw,16px)!important;line-height:1.35!important}
 #welcomePanel .welcomeBtn{min-height:38px!important;margin:8px auto 0!important;padding:7px 24px!important}
}
/* Confirmación coherente en el selector grande del teléfono. */
.mobile-song-dialog-foot{display:flex;justify-content:center;padding-top:12px}
.mobile-song-dialog-foot button{min-height:47px;min-width:145px;border:1px solid #8f673a;border-radius:10px;
 background:#704728;color:white;font:700 17px/1.15 'Nunito Sans',system-ui,sans-serif;cursor:pointer}
.mobile-song-dialog-foot button:focus-visible{outline:3px solid #b88b50;outline-offset:2px}

/* Halo ligeramente más presente en el modo encendido (Continuous, Phrase, Learning). */
#armonium .floating-element.mode.active::after,
#armonium .floating-element.mode.latched::after{
  border-color:rgba(255,255,249,.78)!important;
  box-shadow:0 0 6px 2px rgba(255,255,247,.65),
             0 0 14px 3px rgba(223,252,235,.34),
             inset 0 0 5px rgba(255,255,255,.34)!important;
}