/* =========================================================
   Mi Piano — estructura
   ---------------------------------------------------------
   Cabecera, cajones laterales y armazón de la página.
   ========================================================= */
header{background:#fff;border-bottom:1px solid var(--line);padding:9px 16px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20}
header h1{font-size:1.05rem;margin:0}
header .sub{color:var(--soft);font-size:.75rem;margin:1px 0 0}
.hbtn{border:1px solid var(--line);background:#fff;border-radius:10px;height:38px;min-width:38px;
  padding:0 12px;cursor:pointer;font-family:inherit;font-size:.85rem;color:var(--soft)}
.hbtn:hover{background:#faf7ef}
.hbtn.adulton{background:var(--adult);border-color:var(--adult);color:#fff;font-weight:600}
.progwrap{margin-left:auto;text-align:right;min-width:140px}
.progbar{height:8px;background:#eee7d8;border-radius:5px;overflow:hidden;margin-top:4px}
.progbar>i{display:block;height:100%;background:var(--gold);width:0;transition:width .35s}
.progtxt{font-size:.74rem;color:var(--soft)}

/* =========================================================
   Estructura
   ========================================================= */
.layout{display:block}
/* la lista de ejercicios es un cajón flotante por la izquierda,
   simétrico al de ajustes de la derecha */
nav{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:88vw;z-index:78;
  background:#fff;border-right:1px solid var(--line);box-shadow:8px 0 26px rgba(0,0,0,.12);
  transform:translateX(-102%);transition:transform .22s ease;
  padding:calc(10px + env(safe-area-inset-top)) 0 30px;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
body.nav-on nav{transform:translateX(0)}
body.nav-on .scrim{opacity:1;pointer-events:auto}
.lvl h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.9px;color:var(--soft);
  margin:14px 0 4px;padding:0 16px;font-weight:700}
.lvl h3 span{display:block;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:.75rem;color:#9a9aa6;margin-top:1px}
nav button.item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
  border:0;padding:9px 16px;cursor:pointer;font-size:.85rem;color:var(--ink);
  font-family:inherit;border-left:3px solid transparent;min-height:var(--tap)}
nav button.item:hover{background:#faf7ef}
nav button.item.active{background:#f6efdd;border-left-color:var(--gold);font-weight:600}
.num{flex:0 0 24px;height:24px;border-radius:50%;background:#f0ece1;color:var(--soft);
  display:grid;place-items:center;font-size:.72rem;font-weight:700}
.item.done .num{background:var(--ok);color:#fff}
.item.done .label{color:var(--soft)}

main{padding:16px 24px 110px;width:100%}