/* Instrumentos (piano, xilófono): modo celular acostado.
   Cuando la pantalla es baja y apaisada, el instrumento ocupa toda la pantalla: sin encabezado del sitio, sin textos largos. */
.mp-volver { display:none; }
.mp-fs { display:none; font:inherit; font-weight:700; border:1px solid #c5d0dd; background:#fff; border-radius:999px; padding:7px 13px; cursor:pointer; color:#0b4f8a; white-space:nowrap; }
.sec-hero.mini { padding:10px 16px; margin-bottom:10px; }
.sec-hero.mini h1 { margin:0; font-size:1.25rem; }
.mp-lock { font:inherit; font-weight:700; border:1px solid #c5d0dd; background:#fff; border-radius:999px; padding:7px 13px; cursor:pointer; color:#0b4f8a; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.mp-lock[aria-pressed="true"] { background:#0b4f8a; border-color:#0b4f8a; color:#fff; }
.mp-sinscroll { touch-action:none; }
html.mp-sinscroll-on, html.mp-sinscroll-on body { overscroll-behavior:none; }
.mp-giro { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#fff3d6,#ffe2b0); border:2px solid #f3c77a; color:#5a3b00; border-radius:14px; padding:12px 14px; margin:0 0 12px; line-height:1.35; font-size:.92rem; }
.mp-giro-ico { font-size:2rem; display:inline-block; animation:mp-gira 2.4s ease-in-out infinite; }
@keyframes mp-gira { 0%,30% { transform:rotate(0); } 60%,100% { transform:rotate(-90deg); } }
.mp-giro button { margin-left:auto; flex:0 0 auto; font:inherit; font-weight:800; font-size:.85rem; border:0; border-radius:999px; padding:8px 14px; background:#5a3b00; color:#fff; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { .mp-giro-ico { animation:none; } }
@media (orientation:landscape) and (max-height:560px) {
  html, body { overflow-x:hidden; }
  header.top, .migas, .sec-hero, footer.foot, .pn-ayuda, .xl-ayuda, .bt-ayuda, .gt-ayuda { display:none !important; }
  body.seccion { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  main.sec-main { max-width:none !important; width:100%; margin:0 !important; padding:6px 10px 4px !important; }
  .paso { padding:7px 9px !important; margin:0 !important; border-radius:14px !important; }

  /* barra de controles en una sola fila, compacta */
  .pn-barra, .xl-barra { flex-wrap:nowrap !important; gap:7px !important; margin:0 0 6px !important; overflow-x:auto; align-items:center; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pn-barra::-webkit-scrollbar, .xl-barra::-webkit-scrollbar { display:none; }
  .pn-barra > *, .xl-barra > *, .xl-guia > * { flex:0 0 auto; }
  .pn-barra label, .xl-barra label { font-size:.76rem !important; gap:5px !important; white-space:nowrap; }
  .pn-barra select, .xl-barra select, .xl-guia select { font-size:14px !important; padding:5px 8px !important; max-width:132px; }
  .pn-barra input[type=range], .xl-barra input[type=range] { width:60px !important; }
  #escala { max-width:104px !important; } #timbre, #sonido { max-width:108px !important; }
  .pn-barra, .xl-barra { gap:5px !important; }
  .pn-not, .xl-not, .pn-oct button { padding:5px 11px !important; font-size:.78rem !important; white-space:nowrap; }
  .pn-oct { gap:4px !important; font-size:.76rem !important; } .pn-oct #rango { min-width:70px !important; }
  .mp-giro { display:none !important; }
  .mp-fs { display:inline-flex; align-items:center; padding:5px 11px; font-size:.78rem; }
  .mp-lock { padding:5px 11px; font-size:.78rem; }
  .mp-volver { display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; border-radius:999px; background:#e8eef6; color:#0b4f8a; font-weight:800; text-decoration:none; font-size:1rem; }

  /* piano: el teclado se estira hasta el borde de abajo */
  .pn-marco { padding:6px 8px 8px !important; border-radius:12px !important; }
  .pn-marco .actual { height:1.1em !important; font-size:.85rem !important; margin-bottom:3px !important; }
  #teclado { height:calc(100vh - 100px) !important; height:calc(100dvh - 100px) !important; min-height:130px; }
  #teclado .b .et { font-size:.68rem; }

  /* xilófono: barras altas, canciones en una fila y mensaje chico */
  .xl-marco { padding:8px 8px 6px !important; border-radius:12px !important; }
  #barras { height:calc(100vh - 152px) !important; height:calc(100dvh - 152px) !important; min-height:120px; }
  .bar { padding-bottom:8px !important; }
  .xl-guia { margin-top:6px !important; flex-wrap:nowrap !important; overflow-x:auto; gap:7px !important; scrollbar-width:none; }
  .xl-guia::-webkit-scrollbar { display:none; }
  .xl-guia select { max-width:200px !important; }
  .xl-guia label { font-size:.76rem !important; white-space:nowrap; }
  .xl-guia .btn-p.peq { padding:6px 13px !important; font-size:.8rem !important; white-space:nowrap; }
  #prog { white-space:nowrap; font-size:.78rem; }
  .msg { margin:3px 0 0 !important; min-height:1.1em !important; font-size:.82rem !important; }
  .msg.ok { font-size:.9rem !important; }

  /* batería: los pads ocupan toda la pantalla */
  .bt-marco { padding:8px !important; border-radius:12px !important; }
  #pads { height:calc(100vh - 100px) !important; height:calc(100dvh - 100px) !important; min-height:140px; aspect-ratio:auto !important; }
  .bt-play { padding:6px 13px !important; font-size:.8rem !important; }
  #tempoV { font-size:.76rem; }

  /* guitarra: acordes a la izquierda, cuerdas a la derecha, botones de rasgueo abajo */
  .gt-marco { grid-template-columns:minmax(200px,36%) 1fr !important; padding:8px !important; gap:8px !important; border-radius:12px !important; }
  .gt-nombre { display:none !important; }
  .gt-acordes { grid-auto-rows:1fr; gap:6px !important; }
  .gt-acordes button { padding:4px 2px !important; border-radius:10px !important; }
  .gt-acordes button b { font-size:1rem !important; } .gt-acordes button small { font-size:.62rem !important; }
  .gt-cuerdas { height:calc(100vh - 134px) !important; height:calc(100dvh - 134px) !important; min-height:140px; padding:8px 0 !important; }
  .gt-rasg { margin-top:0 !important; gap:6px !important; }
  .gt-rasg button { padding:8px 6px !important; font-size:.82rem !important; border-radius:10px !important; }
  .gt-marco.zurdo { grid-template-columns:1fr minmax(200px,36%) !important; }
  .gt-marco .gt-acordes { grid-column:1 !important; grid-row:2 !important; } .gt-marco .gt-cuerdas { grid-column:2 !important; grid-row:2 !important; }
  .gt-marco.zurdo .gt-acordes { grid-column:2 !important; } .gt-marco.zurdo .gt-cuerdas { grid-column:1 !important; }
  .gt-marco .gt-rasg { grid-row:3 !important; }
  .gt-rasg button.op { padding:8px 10px !important; font-size:.78rem !important; white-space:nowrap; }
}