/* =========================================================
   Mi Piano — dialogos
   ---------------------------------------------------------
   Modales y cajones genéricos, y la rutina guiada.
   ========================================================= */
.modal{position:fixed;inset:0;z-index:96;background:rgba(34,29,20,.4);display:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modalbox{position:fixed;z-index:97;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:18px;padding:20px 22px;display:none;
  box-shadow:0 16px 50px rgba(0,0,0,.28)}
.modalbox.ancho{width:min(560px,calc(100vw - 32px))}
.modalbox h3{margin:0 0 6px;font-size:1.2rem}
.modalbox p{font-size:.88rem;line-height:1.55}
.modalacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.modalacts .btn{flex:1;min-width:120px}
body.bucle-on .bucledlg{display:block}
body.racha-panel .rachadlg{display:block}
body.juego-on .juegodlg{display:block}
body.herr-on .herrdlg{display:block}
body.mia-on .miadlg{display:block}

/* resultado del pago: va ENCIMA del panel de cuenta (mismo z-index,
   pero después en el DOM), centrado y con el icono grande */
body.pago-on .pagodlg{display:block}
.modalbox.pagodlg{text-align:center;width:min(400px,calc(100vw - 32px))}
.pagodlg .pagoicono{font-size:3.2rem;line-height:1;margin:6px 0 10px}
.pagodlg h3{font-size:1.3rem}
.pagodlg .dim{margin:0 0 16px}
.modalbox .msec{margin:16px 0 7px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.8px;color:var(--soft)}
.modalbox .msec:first-of-type{margin-top:12px}
.modalbox .btn.wide{margin-bottom:7px}
.modalbox .dim{margin:2px 0 10px;font-size:.8rem}
.btn.destacado{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.destacado:hover{background:#3d3d49}
/* botón que ahora mismo no tiene efecto: se atenúa en vez de desaparecer,
   así no baila la barra al cambiar de ejercicio */
.btn.noaplica{opacity:.4;pointer-events:none}

/* botón de maximizar, en la esquina del pentagrama */
.sheetzone{position:relative;display:flex;flex-direction:column;min-height:0}
.expandir{position:absolute;top:9px;right:9px;z-index:5;width:38px;height:38px;
  display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.88);color:var(--soft);cursor:pointer;padding:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.14s}
.expandir:hover{background:#fffaef;border-color:var(--gold);color:var(--gold-dk)}
body.focus .expandir{display:none}

/* bucle */
.buclefila{display:flex;gap:14px;align-items:center;margin-top:14px;font-size:.92rem}
.buclefila select{font-family:inherit;font-size:1rem;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);margin-left:6px}
.bucleaviso{display:none;background:#eef4fb;border:1px solid #cddff0;border-radius:10px;
  padding:8px 13px;font-size:.85rem;color:#2c5a86}

/* metrónomo: punto que parpadea en el botón */
.metropunto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;
  background:#d8d2c4;vertical-align:middle;transition:background .06s}
.metropunto.on{background:var(--gold)}
.metropunto.on.fuerte{background:var(--red);transform:scale(1.35)}

/* =========================================================
   Rutina guiada
   ========================================================= */
.rutina{position:fixed;inset:0;z-index:98;display:none;align-items:flex-end;justify-content:center;
  pointer-events:none;padding:0 14px calc(96px + env(safe-area-inset-bottom))}
body.rutina-on .rutina{display:flex}
.rutina-card{pointer-events:auto;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px 20px;width:min(430px,100%);text-align:center;
  box-shadow:0 14px 44px rgba(0,0,0,.22);animation:fiestaIn .3s cubic-bezier(.2,1.3,.4,1)}
.rutina-dog{width:56px;height:54px;margin:0 auto}
.rutina-dog svg{width:100%;height:100%;display:block}
.rutina-paso{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--soft);margin-top:4px}
.rutina-card h3{margin:3px 0 5px;font-size:1.22rem;color:var(--gold-dk)}
.rutina-card p{margin:0;font-size:.92rem;color:var(--soft);line-height:1.55}