/* =========================================================
   Mi Piano — adaptaciones
   ---------------------------------------------------------
   Pantallas pequeñas, bajas e impresión. Va SIEMPRE la última: aquí están
   los @media que corrigen todo lo anterior.
   ========================================================= */
@media (max-height:780px){.kb{height:84px}}
@media (max-height:640px){.kb{height:72px}}
@media (max-width:900px){
  .coachgrid{grid-template-columns:1fr}
  .layout{flex-direction:column}
  main{padding:14px 14px 90px}
  header .brand h1{font-size:.98rem}
}
@media (max-width:560px){
  header .sub{display:none}
  .progwrap{min-width:96px}
}
@media (max-width:620px){
  .audiobox{width:calc(100vw - 24px);bottom:calc(10px + env(safe-area-inset-bottom))}
  .dogbtn{width:50px;height:50px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .dogbubble{bottom:calc(134px + env(safe-area-inset-bottom))}
}
/* pantallas bajas: el panel aprovecha mejor el espacio */
@media (max-height:720px){
  .drawer{gap:6px;padding-top:calc(10px + env(safe-area-inset-top))}
  .drawer .btn.wide,.drawer .seg.vert button,.drawer .tempo.wide{height:36px;font-size:.81rem}
  .dsec{padding:9px 11px;gap:7px}
  .dsec .btn{height:34px}
  .drawer .fhead{font-size:.9rem}
}
@media print{
  header,nav,.toolbar,.navbtns,.audiobox,.kbbox,.warnbox,.sharenote,
  .fbar,.drawer,.scrim,.fab,.dogbtn,.dogbubble{display:none!important}
  main{padding:0;max-width:none}
  body{background:#fff}
  #sheetwrap{border:0;padding:0}
  body.focus .stage{position:static;padding:0}
  .card{break-inside:avoid;page-break-inside:avoid}
}

/* ---------------------------------------------------------
   Dentro de la app Flutter solo se muestra el pentagrama: los
   controles son nativos Material 3. Ver js/puente.js
   --------------------------------------------------------- */
body.solo-pentagrama header,
body.solo-pentagrama nav,
body.solo-pentagrama .toolbar,
body.solo-pentagrama .navbtns,
body.solo-pentagrama .card,
body.solo-pentagrama .kbbox,
body.solo-pentagrama .fbar,
body.solo-pentagrama .dogbtn,
body.solo-pentagrama .fab,
body.solo-pentagrama .audiobox,
body.solo-pentagrama .eyebrow,
body.solo-pentagrama .title,
body.solo-pentagrama .goal{display:none!important}
body.solo-pentagrama main{padding:0}
body.solo-pentagrama .stage{border:0;border-radius:0;padding:0;box-shadow:none}
body.solo-pentagrama .sheetzone{min-height:100vh}