/* =========================================================
   APP DEL CLIENTE — interruttore Allenamento / Alimentazione,
   caricamento e pagine di avviso
   ========================================================= */

/* interruttore in alto a destra (solo se il cliente ha entrambi i protocolli) */
.topbar.dual .brand .bt{display:none}
.topbar.dual #exPill{display:none}
.sez{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:var(--field);border:1px solid var(--hair);isolation:isolate;flex:none}
.sez::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 2);border-radius:999px;
  background:var(--brand);box-shadow:0 6px 18px -6px rgba(142,68,236,.85),inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s var(--soft),box-shadow .5s}
html.nutri .sez::before{background:var(--nutri);box-shadow:0 6px 18px -6px rgba(48,209,88,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.sez button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .3s}
.sez button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sez button[aria-selected="true"]{color:#fff}
html.nutri .sez button[aria-selected="true"]{color:#04140a}
@media (max-width:370px){.sez button svg{display:none}.sez button{padding:0 10px}}

/* passaggio da una sezione all'altra */
.app.cambio #view{animation:cambio .5s var(--ease)}
@keyframes cambio{from{opacity:0;transform:translateY(10px) scale(.99);filter:blur(8px)}}

/* caricamento */
.caric{position:fixed;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:16px}
.caric .mark{width:58px;height:58px;border-radius:19px;font-size:19px;animation:respiro 1.6s ease-in-out infinite}
.caric small{font-size:13px;color:var(--old);opacity:0;animation:appare .4s ease 1.2s forwards}
@keyframes respiro{50%{transform:scale(.9);opacity:.65}}
@keyframes appare{to{opacity:1}}

/* pagine di avviso */
.err-page{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:calc(80px + env(safe-area-inset-top,0px)) 22px 60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;-webkit-user-select:text;user-select:text}
.err-page .mark{width:52px;height:52px;border-radius:17px;font-size:17px;margin-bottom:6px}
.err-page h1{margin:0;font-size:30px;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.err-page p{margin:0;color:var(--muted);line-height:1.5}
.err-page .acts2{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:10px}
.err-page .acts2 .btn{text-decoration:none;color:var(--ink)}
.err-page .acts2 .btn.pri{color:#fff}
.err-page .tl2{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:8px}
.err-page .tl2:hover{color:var(--ink)}

/* avviso offline */
.offline{display:flex;align-items:center;gap:8px;margin:-8px 0 14px;padding:9px 13px;border-radius:14px;font-size:13px;color:#FFE38A;background:rgba(255,214,10,.08);border:1px solid rgba(255,214,10,.25)}
.offline svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}