/* FitPach v4.2 · tutorial completo de 15 pasos */
:root{
  --tutorial-accent:#ff6a2b;
  --tutorial-on-accent:#1a0900;
  --tutorial-dim:rgba(0,0,0,.70);
}

body.fitpach-tutorial-active{overflow:hidden;}
body.fitpach-tutorial-active .phone{touch-action:none !important;}
/* La cinta inferior permanece visible para orientar al usuario, pero nunca es interactiva. */
body.fitpach-tutorial-active .tabbar{z-index:5002 !important; pointer-events:none !important;}
body.fitpach-tutorial-active .fitpach-tutorial-panel.at-bottom{bottom:max(92px,calc(88px + env(safe-area-inset-bottom)));}
.fitpach-tutorial-hidden-view{display:none !important;}

.fitpach-tutorial-layer{
  position:fixed; inset:0; z-index:5000; display:none;
  pointer-events:auto; user-select:none; -webkit-user-select:none; touch-action:none; overscroll-behavior:none;
  font-family:'Inter',sans-serif;
}
.fitpach-tutorial-layer.open{display:block;}
.fitpach-tutorial-blocker{position:absolute; inset:0; background:transparent;}
.fitpach-tutorial-layer.no-spotlight .fitpach-tutorial-blocker{background:var(--tutorial-dim);}

.fitpach-tutorial-spotlight{
  position:absolute; display:none; pointer-events:none;
  border:2px solid var(--tutorial-accent); border-radius:16px;
  box-shadow:0 0 0 9999px var(--tutorial-dim),0 0 0 4px rgba(255,106,43,.12);
  transition:left .2s cubic-bezier(.2,.7,.2,1),top .2s cubic-bezier(.2,.7,.2,1),width .2s cubic-bezier(.2,.7,.2,1),height .2s cubic-bezier(.2,.7,.2,1),opacity .16s ease;
}
.fitpach-tutorial-spotlight.visible{display:block; opacity:1;}
.fitpach-tutorial-spotlight.transition-out{opacity:0;}

.fitpach-tutorial-panel{
  position:absolute; left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right));
  max-width:492px; margin:0 auto;
  background:var(--bg-elevated); color:var(--text);
  border:1px solid var(--tutorial-accent); border-radius:18px;
  box-shadow:0 16px 44px rgba(0,0,0,.34);
  padding:12px 13px 11px;
  opacity:0; transform:translateY(5px) scale(.996);
  transition:opacity .19s ease,transform .19s cubic-bezier(.2,.7,.2,1);
}
.fitpach-tutorial-panel.visible{opacity:1; transform:translateY(0) scale(1);}
.fitpach-tutorial-panel.centered{top:50%; bottom:auto; transform:translateY(-48%) scale(.996);}
.fitpach-tutorial-panel.centered.visible{transform:translateY(-50%) scale(1);}
.fitpach-tutorial-panel.at-top{top:max(50px,calc(env(safe-area-inset-top) + 46px)); bottom:auto;}
.fitpach-tutorial-panel.at-bottom{top:auto; bottom:max(14px,calc(env(safe-area-inset-bottom) + 12px));}

.fitpach-tutorial-skip{
  position:absolute; top:-34px; right:8px; min-width:62px; min-height:30px;
  padding:0 10px; border:1px solid var(--tutorial-accent); background:var(--bg-elevated); color:var(--text-dim);
  box-shadow:0 6px 18px rgba(0,0,0,.22); font-size:11px; font-weight:750; cursor:pointer; border-radius:10px;
}
.fitpach-tutorial-skip:focus-visible,.fitpach-tutorial-btn:focus-visible{outline:2px solid var(--tutorial-accent); outline-offset:2px;}

.fitpach-tutorial-content{display:flex; align-items:center; gap:10px; min-height:104px; padding-top:1px;}
.fitpach-tutorial-copy{flex:1; min-width:0; padding:1px 2px 0;}
.fitpach-tutorial-panel:not(.intro) .fitpach-tutorial-copy{padding-right:2px;}
.fitpach-tutorial-kicker{font-size:10px; color:var(--tutorial-accent); font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.fitpach-tutorial-title{font-family:'Outfit',sans-serif; font-size:18px; font-weight:800; line-height:1.12; margin:0 0 6px;}
.fitpach-tutorial-text{font-size:11.5px; line-height:1.44; color:var(--text-dim); margin:0;}
.fitpach-tutorial-mascot{flex:0 0 88px; width:88px; max-height:116px; object-fit:contain; align-self:center; pointer-events:none;}

.fitpach-tutorial-panel.compact .fitpach-tutorial-content{min-height:90px;}
.fitpach-tutorial-panel.compact .fitpach-tutorial-mascot{width:78px; flex-basis:78px; max-height:101px;}
.fitpach-tutorial-panel.compact .fitpach-tutorial-title{font-size:17px; margin-bottom:5px;}
.fitpach-tutorial-panel.compact .fitpach-tutorial-text{font-size:11px; line-height:1.4;}

.fitpach-tutorial-controls{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; border-top:1px solid var(--border); margin-top:7px; padding-top:8px;}
.fitpach-tutorial-progress{font-size:10.5px; font-weight:700; color:var(--text-dim); min-width:58px; text-align:center;}
.fitpach-tutorial-btn{
  min-height:44px; border-radius:11px; padding:0 12px; cursor:pointer;
  font-size:11.5px; font-weight:800; border:1px solid var(--border-strong);
  background:var(--bg-elevated); color:var(--text);
}
.fitpach-tutorial-btn.primary{background:var(--tutorial-accent); border-color:var(--tutorial-accent); color:var(--tutorial-on-accent);}
.fitpach-tutorial-btn.prev{justify-self:start;}
.fitpach-tutorial-btn.next{justify-self:end;}
.fitpach-tutorial-btn.hidden{visibility:hidden; pointer-events:none;}

.fitpach-tutorial-intro-actions{display:flex; gap:8px; margin-top:7px;}
.fitpach-tutorial-intro-actions .fitpach-tutorial-btn{flex:1;}
.fitpach-tutorial-panel.intro{padding-top:11px;}
.fitpach-tutorial-panel.intro .fitpach-tutorial-content{min-height:112px; padding-top:0;}
.fitpach-tutorial-panel.intro .fitpach-tutorial-mascot{width:100px; flex-basis:100px; max-height:128px; align-self:center;}
.fitpach-tutorial-panel.intro .fitpach-tutorial-title{font-size:21px; margin-bottom:6px;}
.fitpach-tutorial-panel.final .fitpach-tutorial-content{min-height:105px;}
.fitpach-tutorial-panel.final .fitpach-tutorial-mascot{max-height:120px;}
.fitpach-tutorial-final-controls .fitpach-tutorial-btn.next{max-width:190px;}

/* Vista temporal de sesión: reproduce Registrar sin escribir en data/localStorage. */
.fitpach-tutorial-app-demo{display:none; position:relative; z-index:1;}
.fitpach-tutorial-app-demo.show{display:block;}
.fitpach-tutorial-demo-badge{font-size:10px; font-weight:800; color:var(--tutorial-accent); text-transform:uppercase; letter-spacing:.05em;}
.fitpach-tutorial-session-demo .fitpach-tutorial-demo-complete.completed{background:var(--green); border-color:var(--green); color:#07170e;}
.fitpach-tutorial-session-demo .set-input{pointer-events:none;}
.fitpach-tutorial-session-demo .rest-adjust-btn{min-width:72px;}
.fitpach-tutorial-demo-progress-dot{flex:1; height:4px; border-radius:2px; background:var(--border-strong);}
.fitpach-tutorial-demo-progress-dot.active{background:var(--text);}

@media (max-width:370px){
  .fitpach-tutorial-panel{left:10px; right:10px; padding:10px 11px;}
  .fitpach-tutorial-mascot{width:74px; flex-basis:74px; max-height:100px;}
  .fitpach-tutorial-panel.compact .fitpach-tutorial-mascot{width:68px; flex-basis:68px; max-height:92px;}
  .fitpach-tutorial-title{font-size:16.5px;}
  .fitpach-tutorial-text{font-size:10.7px;}
  .fitpach-tutorial-panel.intro .fitpach-tutorial-mascot{width:90px; flex-basis:90px; max-height:116px;}
  .fitpach-tutorial-session-demo .prev-session{font-size:10px;}
}

@media (prefers-reduced-motion:reduce){
  .fitpach-tutorial-spotlight,.fitpach-tutorial-panel{transition:opacity .08s linear !important; transform:none !important;}
  .fitpach-tutorial-panel.centered,.fitpach-tutorial-panel.centered.visible{transform:translateY(-50%) !important;}
}