/* ARENA app cliente — stile Blumanà (crema + oro), mobile-first. Stessa palette della webapp ARENA/agenda; pensata per PWA e wrapper Capacitor. */ :root{ --bg-grad-a:#f6f2ed; --bg-grad-b:#f2ede7; --panel:#fbf9f6; --panel-2:#f2ebe1; --border:#c8bfb5; --border-soft:#d4c9be; --ink:#2f2b27; --soft:#6c655d; --accent:#c7a56a; --accent-dark:#b89458; --accent-soft:#efe3cc; --gold-title:#96762f; --field-bg:#fff; --topbar-bg:rgba(251,249,246,.9); --z-recupero:#5b93bb; --z-leggera:#3f9e72; --z-media:#d99a2b; --z-intensa:#d4593a; --err:#c0392b; --radius-lg:22px; --radius-md:14px; --shadow-card:0 10px 30px rgba(0,0,0,.07); --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); /* ---- home clinica ---- */ --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --faint:#a2977f; --logo:#1f95b8; --sl-deep:#8f6f2b; --sl-light:#c1a066; --sl-rem:#e3d6b8; } /* tema scuro (impostato da JS: data-theme su , "dispositivo" segue il sistema) */ :root[data-theme="dark"]{ --bg-grad-a:#1d1a16; --bg-grad-b:#151310; --panel:#24201b; --panel-2:#2f2a23; --border:#57503f; --border-soft:#3b352c; --ink:#f0ebe3; --soft:#a49b8d; --accent:#c7a56a; --accent-dark:#d3b47c; --accent-soft:#37301f; --gold-title:#d3b47c; --field-bg:#2a251e; --topbar-bg:rgba(29,26,22,.9); --err:#e07b6c; --shadow-card:0 10px 30px rgba(0,0,0,.35); --faint:#7d735f; --logo:#4bb6d6; --sl-deep:#e0c489; --sl-light:#b4924f; --sl-rem:#4d4432; } *{box-sizing:border-box;margin:0;padding:0} html,body{overscroll-behavior:none} /* stop al rimbalzo/over-scroll della WebView iOS */ /* Sfondo crema anche su HTML: nel rimbalzo (overscroll) la WebView iOS mostra l'area DIETRO il body; senza questo si vedeva una fascia NERA sopra (in cima) e sotto (in fondo). Theme-aware via --bg-grad-a. min-height:100% assicura che l'html copra tutta l'altezza scrollabile. */ html{background:var(--bg-grad-a);min-height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink);background:linear-gradient(180deg,var(--bg-grad-a),var(--bg-grad-b)); font-size:16px;line-height:1.5;min-height:100vh; -webkit-tap-highlight-color:transparent; touch-action:manipulation; /* niente doppio-tap zoom, niente ritardo 300ms */ } :root[data-theme="dark"] .onb-logo, :root[data-theme="dark"] .brand-logo{filter:brightness(1.35)} .view[hidden]{display:none} /* ---- onboarding ---- */ .onb{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(24px + var(--sat)) 28px calc(40px + var(--sab))} .onb-logo{width:150px;height:auto;margin-bottom:6px} .brand-arena{font-size:22px;letter-spacing:.45em;text-transform:uppercase;color:var(--accent-dark);font-weight:700;margin-left:.45em} .onb-sub{color:var(--soft);font-size:14px;margin:6px 0 30px} .onb-msg{font-size:14px;margin-bottom:14px;max-width:320px} .field{width:100%;max-width:340px;border:1px solid var(--border);background:var(--field-bg);color:var(--ink);border-radius:14px;padding:13px 14px;font:inherit;font-size:15px;outline:none} .field:focus{border-color:var(--accent)} .btn-gold{width:100%;max-width:340px;margin-top:12px;border:none;border-radius:14px;padding:14px;font:inherit;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-dark));box-shadow:0 4px 14px rgba(199,165,106,.35);cursor:pointer} .btn-gold:active{transform:translateY(1px)} .btn-gold[disabled]{opacity:.6} .err{color:var(--err);font-size:13px;min-height:20px;margin-top:10px} .onb-help{color:var(--soft);font-size:13px;margin-top:18px;max-width:300px} .onb-step{display:flex;flex-direction:column;align-items:center;width:100%} .onb-step[hidden]{display:none} .field.code{text-align:center;letter-spacing:.35em;font-size:22px;font-variant-numeric:tabular-nums} .link-soft{border:none;background:none;color:var(--soft);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:6px 0} /* ---- home ---- */ .topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + var(--sat)) 18px 10px;background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)} .topbar-title{font-size:15px;font-weight:700} .topbar-side{display:flex;align-items:center;gap:2px} /* impostazioni */ .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .seg button{border:1px solid var(--border-soft);background:var(--panel-2);color:var(--ink);border-radius:12px;padding:11px 6px;font:inherit;font-size:14px;font-weight:600;cursor:pointer} .seg button.sel{background:linear-gradient(180deg,var(--accent),#b89458);border-color:transparent;color:#fff} .btn-exit{width:100%;border:1px solid var(--border-soft);background:var(--panel-2);color:var(--err);border-radius:14px;padding:13px;font:inherit;font-size:15px;font-weight:600;cursor:pointer} .brand-wrap{display:flex;align-items:center;gap:10px} .brand-logo{height:34px;width:auto} .brand-arena-sm{font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent-dark);font-weight:700} .icon-btn{border:none;background:none;color:var(--soft);padding:8px;min-width:44px;min-height:44px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center} .icon-btn:active{background:var(--accent-soft);color:var(--accent-dark)} .install-x{min-width:40px;min-height:40px} .install{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:11px 14px;background:var(--accent-soft);border:1px solid var(--border-soft);border-radius:var(--radius-md);font-size:13px;color:var(--ink)} .install[hidden]{display:none} .install span{flex:1} .install-x{padding:4px} .btn-sm{border:none;border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-dark));cursor:pointer;flex:none} .page{max-width:520px;margin:0 auto;padding:18px 16px calc(24px + var(--sab))} .loading{text-align:center;color:var(--soft);padding:70px 20px} /* --- Skeleton di caricamento (primo avvio senza cache): rispecchia il layout reale --- */ .sk{position:relative;overflow:hidden;background:var(--panel-2);border-radius:8px} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 60%,transparent),transparent);animation:skshimmer 1.3s infinite} @keyframes skshimmer{100%{transform:translateX(100%)}} .sk-hero{display:flex;align-items:center;gap:14px;margin:6px 2px 18px} .sk-hero .sk{border-radius:50%} .sk-line{height:13px;margin:7px 0} .sk-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px;margin-bottom:16px} .offline{margin-bottom:14px;padding:10px 14px;border-radius:var(--radius-md);background:var(--panel-2);border:1px solid var(--border-soft);color:var(--soft);font-size:12.5px;text-align:center} .hero{display:flex;align-items:center;gap:14px;margin:6px 2px 18px} .hero-ring{width:60px;height:60px;border-radius:50%;flex:none;background:radial-gradient(circle at 30% 28%,#d9be8c,var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;box-shadow:0 6px 18px rgba(199,165,106,.4)} .hello{font-size:24px;font-weight:700;line-height:1.15} .hero-sub{font-size:13px;color:var(--soft);margin-top:3px} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px} .stat{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.05);padding:14px 8px;text-align:center} .stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums;color:var(--accent-dark)} .stat span{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em} .card{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px;margin-bottom:16px} .card h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-title);margin-bottom:6px} .hint{font-size:13px;color:var(--soft);margin-bottom:12px} .chart{display:flex;gap:8px;height:140px;margin-top:6px} .cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0} .cbar .track{width:16px;flex:1;background:var(--panel-2);border-radius:999px;position:relative;overflow:hidden} .cbar .track i{position:absolute;bottom:0;left:0;right:0;border-radius:999px} .cbar label{font-size:11px;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap} .empty{padding:20px;text-align:center;color:var(--soft);font-size:14px} .premio{border-top:1px solid var(--border-soft);padding:13px 0} .premio:first-of-type{border-top:0;padding-top:4px} .premio .p-top{display:flex;justify-content:space-between;font-size:14px} .premio .p-top b{font-weight:600} .premio .p-top span{color:var(--soft);font-variant-numeric:tabular-nums} .premio .p-bar{height:9px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin-top:9px} .premio .p-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-dark))} .note{font-size:12.5px;color:var(--soft);margin-top:12px} /* ---- salute dal bracciale ---- */ .today-steps{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px} .today-steps b{font-size:38px;font-variant-numeric:tabular-nums;color:var(--accent-dark);line-height:1} .today-steps span{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em} .goal-bar{height:9px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin:10px 0 4px} .goal-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-dark))} .goal-note{font-size:12.5px;color:var(--soft)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px} .mini{background:var(--panel-2);border-radius:var(--radius-md);padding:12px 14px} .mini b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)} .mini b small{font-size:13px;font-weight:400;color:var(--soft)} .mini span{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em} .cbar .val{font-size:10.5px;color:var(--accent-dark);font-variant-numeric:tabular-nums;white-space:nowrap} .avg-box{background:var(--accent-soft);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:14px} .avg-box b{color:var(--accent-dark);font-size:18px;font-variant-numeric:tabular-nums} .cbar.today label{color:var(--accent-dark);font-weight:700} .track .seg-deep,.track .seg-light{position:absolute;left:0;right:0;border-radius:0} .track .seg-deep{background:#5b93bb;bottom:0;border-radius:0 0 999px 999px} .track .seg-light{background:#a9c6db;border-radius:999px 999px 0 0} .sleep-week .cbar .val{color:#5b93bb} .sleep-big{display:flex;align-items:baseline;gap:8px;margin:4px 0 10px} .sleep-big b{font-size:32px;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1} .sleep-big span{font-size:12px;color:var(--soft)} .sleep-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--panel-2)} .sleep-bar .deep{background:#5b93bb} .sleep-bar .light{background:#a9c6db} .legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--soft)} .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0} .legend .l-deep i{background:#5b93bb} .legend .l-light i{background:#a9c6db} .legend b{color:var(--ink);font-variant-numeric:tabular-nums} /* appuntamenti */ .appt{display:flex;align-items:center;gap:12px;padding:10px 0} .appt + .appt{border-top:1px solid var(--border-soft)} .appt-ico{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex:none} .appt-info b{font-size:16px;display:block} .appt-info span{font-size:13px;color:var(--soft)} /* progressi misure */ .prog{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border-soft)} .prog:first-of-type{border-top:0} .prog-nome{font-size:15px} .prog-delta{font-size:18px;color:var(--accent-dark);font-variant-numeric:tabular-nums} /* traguardi */ .trag-row{padding:10px 0;border-top:1px solid var(--border-soft)} .trag-row:first-of-type{border-top:0} .trag-cat{display:block;font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} .trag-pills{display:flex;flex-wrap:wrap;gap:6px} .pill-done,.pill-next{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:600} .pill-done{background:linear-gradient(180deg,var(--accent),#b89458);color:#fff} .pill-next{background:var(--panel-2);color:var(--soft);border:1px dashed var(--border)} /* scelta periodo + grafico mese */ .periodo-seg{margin:0 2px 16px} .chart.mese{gap:2px} .chart.mese .cbar .track{width:100%} .chart.mese .cbar label{font-size:8.5px} /* whatsapp */ .btn-wa-big{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#1fa855;color:#fff;border-radius:14px;padding:14px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 3px 10px rgba(31,168,85,.3)} .btn-wa-big:active{transform:translateY(1px)} .btn-block{display:block;width:100%;max-width:none} .nick-row{display:flex;gap:8px} .nick-row .field{flex:1;max-width:none} .nick-row .btn-sm{padding:0 16px} .sede{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border-soft);padding:13px 0} .sede:first-of-type{border-top:0;padding-top:4px} .sede-info{flex:1;min-width:0} .sede-info b{font-size:14.5px} .sede-info span{display:block;font-size:12.5px;color:var(--soft)} .sede-call{flex:none;display:flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;text-decoration:none} /* ---- associazione braccialetto (Impostazioni) ---- */ .dev-searching{display:flex;align-items:center;gap:14px;padding:6px 0} .dev-searching b{font-size:15px} .spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--panel-2);border-top-color:var(--accent-dark);animation:arspin .8s linear infinite;flex:none} @keyframes arspin{to{transform:rotate(360deg)}} .dev-head{display:flex;align-items:center;gap:13px;margin-bottom:2px} .dev-ico{width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex:none} .dev-head-txt b{font-size:16px;display:block} .dev-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--soft)} .dev-dot{width:9px;height:9px;border-radius:50%;background:var(--soft);display:inline-block} .dev-dot.on{background:var(--z-leggera)} .dev-note{font-size:12px;color:var(--soft);margin-top:12px;line-height:1.45} .dev-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--border-soft);background:var(--panel-2);border-radius:14px;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer;margin-top:10px} .dev-pick:active{transform:translateY(1px)} .dev-pick .dev-ico{width:38px;height:38px;border-radius:11px} .dev-pick b{font-size:15px;display:block} .dev-pick .rssi{font-size:12px;color:var(--soft);margin-left:auto;flex:none} .dev-dump{width:100%;height:120px;margin-top:8px;border:1px solid var(--border-soft);border-radius:10px;background:var(--panel-2);color:var(--soft);font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:8px;resize:vertical} .live-hr{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;background:var(--panel-2);border-radius:var(--radius-md)} .live-val{display:flex;align-items:baseline;gap:6px;min-height:30px} .live-val b{font-size:30px;font-variant-numeric:tabular-nums;color:var(--z-intensa);line-height:1} .live-val small{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em} .live-val .spinner{width:22px;height:22px} .live-when{flex:1;font-size:12px;color:var(--soft)} .live-raw{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--soft);word-break:break-all;min-height:12px;margin-top:6px;opacity:.8} .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px} .switch-row input[type=checkbox]{width:44px;height:26px;-webkit-appearance:none;appearance:none;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:999px;position:relative;cursor:pointer;transition:background .15s;flex:none} .switch-row input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s} .switch-row input[type=checkbox]:checked{background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-color:transparent} .switch-row input[type=checkbox]:checked::after{left:20px} .switch-row input[type=checkbox]:disabled{opacity:.5;cursor:default} .bracc-banner{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;background:var(--accent-soft);border:1px solid var(--border-soft);border-radius:var(--radius-md);font-size:13.5px;color:var(--ink)} .bracc-banner:empty{display:none} .bracc-banner span{flex:1} .bracc-banner .spinner{width:18px;height:18px;flex:none} .bracc-banner.ok{background:var(--panel-2)} .bracc-banner .dev-dot{flex:none} .bracc-banner .btn-sm{flex:none} .foot{display:flex;align-items:center;justify-content:space-between;max-width:520px;margin:0 auto;padding:0 18px calc(26px + var(--sab))} .link-soft{border:none;background:none;color:var(--soft);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:6px 0} .foot-v{font-size:11px;color:var(--soft);letter-spacing:.08em} /* Sezione "Altro" della card braccialetto (Riavvia / Ripristina di fabbrica) */ .dev-altro{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:6px} .dev-altro-t{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:6px 2px 2px} .altro-row{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;border-bottom:1px solid var(--border-soft);color:var(--ink);font:inherit;font-size:15px;padding:14px 2px;cursor:pointer;text-align:left} .altro-row:last-child{border-bottom:none} .altro-row>span{flex:1} .altro-row svg{color:var(--accent-dark);flex:none} .altro-row .altro-chev{color:var(--soft)} .altro-row:active{opacity:.6} /* Profilo: cerchio con emoji + griglia selettore avatar */ .hero-ring.has-emoji{font-size:32px;font-weight:400;line-height:1} .prof-avatar{display:flex;justify-content:center;margin:4px 0 14px} .prof-avatar .hero-ring{width:72px;height:72px;font-size:22px} .prof-avatar .hero-ring.has-emoji{font-size:38px} .emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .emoji-opt{aspect-ratio:1;border:1px solid var(--border-soft);background:var(--field-bg);border-radius:12px;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .08s,border-color .12s} .emoji-opt:active{transform:scale(.9)} .emoji-opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:var(--accent-soft)} /* --- Toast --- */ .app-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--panel);padding:12px 20px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3000;max-width:88vw;text-align:center} .app-toast.on{opacity:1;transform:translateX(-50%) translateY(0)} .app-toast.success{background:var(--z-leggera);color:#fff} .app-toast.error{background:var(--err);color:#fff} /* icona "aggiorna" che ruota mentre carica */ .icon-btn.spinning svg{animation:arspin .8s linear infinite} /* transizione morbida all'ingresso di una vista (rispetta prefers-reduced-motion via il media query) */ .view:not([hidden]){animation:viewin .28s ease both} @keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* --- Modale di conferma in-tema --- */ .modal-ov{position:fixed;inset:0;z-index:3500;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,16,12,.45);opacity:0;transition:opacity .2s;padding:0 16px calc(20px + var(--sab))} .modal-ov.on{opacity:1} .modal-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(0,0,0,.3);padding:22px 20px calc(18px + var(--sab));transform:translateY(24px);transition:transform .24s cubic-bezier(.2,.8,.2,1)} .modal-ov.on .modal-card{transform:none} .modal-card h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px} .modal-card p{font-size:14.5px;color:var(--soft);line-height:1.5;margin-bottom:18px} .modal-actions{display:flex;gap:10px} .modal-actions button{flex:1;border-radius:14px;padding:13px;font:inherit;font-size:15px;font-weight:600;cursor:pointer} .btn-ghost{border:1px solid var(--border-soft);background:var(--panel-2);color:var(--ink)} .btn-danger{border:none;color:#fff;background:linear-gradient(180deg,#d4593a,#b8442a);box-shadow:0 4px 14px rgba(212,89,58,.32)} .btn-ghost:active,.btn-danger:active,.modal-actions .btn-gold:active{transform:translateY(1px)} .modal-actions .btn-gold{margin-top:0;max-width:none} @media (min-width:520px){.modal-ov{align-items:center}.modal-card{transform:scale(.96)}.modal-ov.on .modal-card{transform:none}} /* --- Bottone "scansiona" in Home --- */ .scan-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:6px 0 14px;padding:16px;border:none;border-radius:var(--radius-md);background:radial-gradient(circle at 30% 20%,#d9be8c,var(--accent-dark));color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(199,165,106,.4)} .scan-cta:active{transform:scale(.98)} /* --- Scanner fotocamera --- */ .scan-ov{position:fixed;inset:0;background:#0a0a0c;z-index:3200;display:flex;flex-direction:column;align-items:center} .scan-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top,0)) 18px 14px;color:#fff;font-weight:600} .scan-x{background:rgba(255,255,255,.12);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:17px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center} .scan-stage{position:relative;flex:1;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center} .scan-stage video{width:100%;height:100%;object-fit:cover} .scan-frame{position:absolute;width:min(66vw,300px);aspect-ratio:1;border:3px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)} .scan-hint{color:#fff;font-size:15px;padding:18px 20px calc(26px + env(safe-area-inset-bottom,0));text-align:center;opacity:.9} /* --- Vista sessione (allenamento in corso) --- */ .sess-ov{position:fixed;inset:0;background:var(--bg-grad-a);z-index:3100;display:flex;align-items:center;justify-content:center;padding:24px} .sess-card{width:100%;max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px} .sess-station{font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark)} /* batteria orologio */ .sess-batt{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--soft)} .batt-ico{width:34px;height:16px;border:2px solid var(--soft);border-radius:4px;position:relative;padding:2px;display:inline-flex;flex:none} .batt-ico::after{content:"";position:absolute;right:-4px;top:4px;width:2px;height:6px;background:var(--soft);border-radius:0 2px 2px 0} .batt-ico b{display:block;height:100%;width:0;border-radius:1px;background:var(--z-leggera);transition:width .5s,background-color .5s} .sess-note{font-size:13px;line-height:1.4;color:var(--soft);max-width:15rem;margin:2px 0 4px} /* LED di stato su OGNI pagina (Home, Impostazioni) */ .page-led-bar{display:flex;justify-content:center;padding:10px 16px 2px} .page-led{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border-soft);font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--soft)} .page-led i{width:11px;height:11px;border-radius:50%;background:var(--soft);opacity:.55;flex:none} .page-led.on{color:var(--z-leggera);border-color:color-mix(in srgb,var(--z-leggera) 45%,transparent)} .page-led.on i{opacity:1;background:var(--z-leggera);box-shadow:0 0 0 0 color-mix(in srgb,var(--z-leggera) 70%,transparent);animation:ledpulse 1.4s infinite} .page-led.tx{color:var(--accent-dark);border-color:var(--border)} .page-led.tx i{opacity:1;background:var(--accent-dark)} .page-led.sync{color:var(--z-leggera)} .page-led.sync i{opacity:1;background:var(--z-leggera);animation:ledblink 1s infinite} .page-led.off i{background:var(--soft);opacity:.5} /* LED di stato sessione: verità della catena orologio → app → sala (è un pulsante: da scollegato, toccarlo avvia l'accoppiamento) */ .sess-led{display:inline-flex;align-items:center;gap:11px;padding:13px 26px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border-soft);font:inherit;font-size:15.5px;font-weight:700;letter-spacing:.04em;color:var(--soft);cursor:pointer} .sess-led i{width:13px;height:13px;border-radius:50%;background:var(--soft);flex:none} .sess-led.tx{color:var(--z-leggera);border-color:color-mix(in srgb,var(--z-leggera) 45%,transparent)} .sess-led.tx i{background:var(--z-leggera);box-shadow:0 0 0 0 color-mix(in srgb,var(--z-leggera) 70%,transparent);animation:ledpulse 1.4s infinite} .sess-led.warmup{color:var(--z-media)} .sess-led.warmup i{background:var(--z-media);animation:ledblink 1s infinite} .sess-led.warn{color:var(--z-intensa)} .sess-led.warn i{background:var(--z-intensa)} .sess-led.off i{background:var(--soft);opacity:.5} @keyframes ledpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--z-leggera) 70%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} @keyframes ledblink{0%,100%{opacity:1}50%{opacity:.3}} /* palcoscenico a due stati: barra HERO (battito fresco) ↔ COACHING (periodo morto del ring) */ .sess-stage{position:relative;width:100%;height:min(56vh,400px)} .sess-hero,.sess-coach{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .45s ease,transform .45s ease} .sess-bar{width:96px;height:230px;border-radius:60px;background:var(--panel-2);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-soft)} .sess-bar i{position:absolute;left:0;right:0;bottom:0;border-radius:60px;transition:height .8s ease,background-color .8s ease} .sess-hero-num b{font-size:64px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1} .sess-hero-num small{font-size:14px;color:var(--soft);letter-spacing:.1em;text-transform:uppercase;margin-left:5px} .sess-zone{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .coach-line{font-size:27px;font-weight:800;line-height:1.25;color:var(--ink);max-width:15ch;padding:0 8px} .coach-reward{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:16px;padding:12px 18px;min-width:210px;display:flex;flex-direction:column;gap:3px} .coach-reward b{font-size:15px;color:var(--accent-dark)} .coach-reward span{font-size:13px;color:var(--soft)} .coach-prog{height:8px;background:var(--panel);border-radius:999px;overflow:hidden;margin-top:7px} .coach-prog i{display:block;height:100%;background:var(--z-leggera);border-radius:999px;transition:width .6s ease} .coach-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase} .coach-dots{display:inline-flex;gap:4px} .coach-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent-dark);opacity:.3;animation:coachpulse 1.2s infinite} .coach-dots i:nth-child(2){animation-delay:.2s} .coach-dots i:nth-child(3){animation-delay:.4s} @keyframes coachpulse{0%,100%{opacity:.25}50%{opacity:1}} /* FRESCO: la barra domina, il coaching svanisce */ .sess-card.fresh .sess-hero{opacity:1;transform:none;pointer-events:auto} .sess-card.fresh .sess-coach{opacity:0;pointer-events:none;transform:scale(.96)} /* MORTO: il coaching a tutto schermo, la barra si ritira in alto smorzata (valore tenuto) */ .sess-card.dead .sess-hero{opacity:.5;transform:scale(.4) translateY(-70%);pointer-events:none} .sess-card.dead .sess-coach{opacity:1;pointer-events:auto;transform:none} .sess-vals{display:flex;gap:34px} .sess-vals b{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)} .sess-vals small{display:block;font-size:12px;color:var(--soft);letter-spacing:.08em;text-transform:uppercase} .sess-card .btn-exit{margin-top:8px} /* ---- rifinitura interazioni: press morbido e "premium" sui bottoni principali ---- */ .scan-cta,.btn-gold,.btn-wa-big,.btn-sm,.btn-exit,.sede-call{transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease,background-color .15s ease} .scan-cta:active{transform:scale(.975);box-shadow:0 4px 14px rgba(199,165,106,.34)} .btn-gold:active{filter:saturate(1.06)} .btn-wa-big:active{box-shadow:0 2px 8px rgba(31,168,85,.32)} .sede-call:active{transform:translateY(1px);background:color-mix(in srgb,var(--accent) 24%,var(--accent-soft))} .btn-sm:active{transform:translateY(1px);filter:saturate(1.06)} /* stato "non trovato" della ricerca bracciale (spinner non perpetuo) */ .dev-searching.stuck{display:block;padding:2px 0} .dev-searching.stuck b{font-size:15px;display:block} /* ---- accessibilità: focus visibile da tastiera/Switch Control ---- */ .btn-gold:focus-visible,.btn-sm:focus-visible,.btn-exit:focus-visible,.seg button:focus-visible, .icon-btn:focus-visible,.emoji-opt:focus-visible,.link-soft:focus-visible,.sede-call:focus-visible, .scan-cta:focus-visible,.btn-wa-big:focus-visible,.dev-pick:focus-visible,.altro-row:focus-visible, .scan-x:focus-visible,.sess-led:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px} .field:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)} /* ============================================================================ HOME "clinica essenziale" — tutto scoped sotto .clinic per NON toccare onboarding / impostazioni / sessione (che usano .card, .hint, .mini, ecc.). Righe sottili al posto delle card, etichette mono maiuscole, numeri tabulari, un solo accento oro usato con misura, identità in teal. Niente gradienti/aloni. ========================================================================== */ .clinic{color:var(--ink)} /* saluto + avatar */ .c-hero{display:flex;align-items:center;gap:14px;margin:2px 2px 6px} .clinic .hero-ring{background:var(--panel);color:var(--logo);border:1px solid var(--border-soft); box-shadow:none;font-weight:700} .c-hello{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1} .c-hello::after{content:"";display:block;width:38px;height:3px;background:var(--accent-dark);border-radius:2px;margin-top:11px} .c-status{font-size:12.5px;color:var(--soft);margin-top:9px} /* CTA primaria: oro pieno, decisa */ .clinic .scan-cta{background:var(--accent-dark);border-radius:12px;box-shadow:none; font-size:16px;font-weight:800;letter-spacing:.01em;margin:10px 0 6px;padding:16px} .clinic .scan-cta:active{transform:scale(.99);box-shadow:none} /* banner bracciale: bordo morbido */ .clinic .bracc-banner{background:var(--panel);border-radius:12px} /* sezione con filo sottile in testa + eyebrow in oro grassetto */ .c-sec{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px; padding:16px 16px 17px;margin-top:14px;box-shadow:0 1px 3px rgba(60,44,20,.05)} .c-sec.first{margin-top:12px} .clinic .eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--soft);margin-bottom:12px} .clinic .eyebrow .r{color:var(--faint);font-weight:600;letter-spacing:.02em;text-transform:none} /* barra di avanzamento (premi, obiettivo passi) */ .c-track{height:4px;background:var(--panel-2);border-radius:3px;overflow:hidden} .c-track i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .5s ease} /* premi in palio */ .c-reward{margin-top:2px} .c-reward + .c-reward{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft)} .c-reward .t{font-size:17px;font-weight:800;letter-spacing:-.01em} .c-reward .c-track{margin-top:12px} .c-reward .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px; font-size:12px;color:var(--soft);letter-spacing:.01em} .c-reward .meta b{color:var(--ink);font-weight:700} .c-note{font-size:11.5px;letter-spacing:.01em;color:var(--faint);margin-top:14px} /* referto OGGI — griglia 2×2 */ .c-grid{display:grid;grid-template-columns:1fr 1fr;margin:2px -2px 0} .c-cell{padding:8px 13px 12px;border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);min-height:104px;display:flex;flex-direction:column} .c-cell:nth-child(2n){border-right:none;padding-right:2px} .c-cell:nth-child(2n+1){padding-left:2px} .c-cell:nth-last-child(-n+2){border-bottom:none} .c-cell:nth-child(-n+2){padding-top:2px} .c-lab{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600; letter-spacing:.04em;text-transform:uppercase;color:var(--soft)} .c-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-dark);flex:none} .c-val{margin-top:auto;font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums} .c-val .u{font-size:14px;font-weight:600;color:var(--soft);letter-spacing:0;margin-left:3px} .c-sub{margin-top:8px;font-size:11px;color:var(--soft);font-variant-numeric:tabular-nums;line-height:1.3} .c-sub b{color:var(--ink);font-weight:700} .c-cell .c-track{margin-top:9px} /* grafico a barrette fini (attività, sedute) */ .c-chart{margin-top:2px} .c-bars{display:flex;align-items:flex-end;gap:8px;height:74px;position:relative; border-bottom:1px solid var(--border-soft)} .c-bars.dense{gap:2px} .c-avg{position:absolute;left:0;right:0;border-top:1px dashed var(--accent-dark);opacity:.5;pointer-events:none} /* barrette fini e centrate nella loro casella: la settimana ha sempre 7 caselle, quindi la larghezza la detta la barra, non il numero di giorni misurati */ .c-bar{flex:1;min-width:0;max-width:16px;margin:0 auto;background:var(--panel-2); border-radius:2px 2px 0 0;min-height:3px;position:relative;z-index:1;transition:height .5s ease} .c-bars.dense .c-bar{max-width:6px} .c-bar.today{background:var(--accent)} /* giorno senza misurazione: la casella c'e', ma resta un accenno spento */ .c-bar.vuoto{background:var(--border-soft);opacity:.45;height:0!important} .c-bar > i.deep{position:absolute;left:0;right:0;bottom:0;background:var(--sl-deep);border-radius:0} /* valore scritto sopra ogni colonna, allineato alle barre (0 quando il giorno non ha dato) */ .c-vals{display:flex;gap:8px;margin-bottom:5px} .c-vals span{flex:1;min-width:0;text-align:center;font-size:10px;font-weight:700; color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden} .c-vals span.now{color:var(--gold-title);font-weight:800} .c-labels{display:flex;gap:8px;margin-top:8px} .c-labels.dense{gap:2px} .c-labels span{flex:1;min-width:0;text-align:center;font-size:10px;font-weight:600; letter-spacing:.01em;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden} .c-labels span.now{color:var(--gold-title);font-weight:800} /* Telefoni stretti (iPhone SE): meno spazio fra le colonne e cifre piu' piccole, cosi' i valori restano interi invece di essere tagliati. DEVE stare dopo .c-bars/.c-vals/.c-labels: ha la stessa specificita', quindi se venisse prima le regole a gap:8px la sovrascriverebbero e le etichette resterebbero disallineate rispetto alle barre. */ @media (max-width:360px){ .c-vals,.c-bars,.c-labels{gap:5px} .c-vals span,.c-labels span{font-size:9px} } .c-avgnote{margin-top:12px;font-size:12px;color:var(--soft)} .c-avgnote b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} /* toggle periodo (Settimana / Mese) */ .c-toggle{display:inline-flex;border:1px solid var(--border-soft);border-radius:8px;overflow:hidden} .c-toggle button{border:none;background:var(--panel);color:var(--soft);font:inherit;font-weight:700; font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;cursor:pointer} .c-toggle button + button{border-left:1px solid var(--border-soft)} .c-toggle button.sel{background:var(--accent-soft);color:var(--accent-dark)} /* sonno — composizione della notte */ .c-stack{display:flex;height:11px;border-radius:4px;overflow:hidden;margin-top:2px;background:var(--panel-2)} .c-stack i{height:100%} .c-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px} .c-legend span{display:flex;align-items:center;gap:7px;font-size:11.5px; letter-spacing:.01em;color:var(--soft)} .c-legend .sw{width:8px;height:8px;border-radius:2px;flex:none} .c-legend em{font-style:normal;color:var(--ink);font-weight:700} .c-empty{font-size:12.5px;color:var(--soft)} /* prossimo appuntamento */ .c-row{display:flex;align-items:center;gap:14px;padding:2px 0} .c-row + .c-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft)} .c-when{flex:none;min-width:64px;text-align:center;font-size:11px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--soft);line-height:1.35; border:1px solid var(--border-soft);border-radius:10px;padding:9px 8px;background:var(--panel)} .c-when b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-transform:none} .c-rmain{flex:1;min-width:0} .c-rmain .t{font-size:15px;font-weight:700;letter-spacing:-.01em} .c-rmain .s{font-size:12.5px;color:var(--soft);margin-top:3px} .c-link{flex:none;font-size:12.5px;color:var(--gold-title);font-weight:700;text-decoration:none; border-bottom:1.5px solid var(--gold-title);padding-bottom:1px} .c-wa{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:700; color:var(--gold-title);text-decoration:none} .c-wa svg{flex:none} /* progressi misure */ .c-prog{display:flex;justify-content:space-between;align-items:center;padding:11px 0; border-top:1px solid var(--border-soft)} .c-prog:first-of-type{border-top:0} .c-prog .n{font-size:14.5px} .c-prog .d{font-size:18px;color:var(--accent-dark);font-weight:800;font-variant-numeric:tabular-nums} /* traguardi — righe con tag rettangolari (no pillole) */ .c-trag{padding:12px 0;border-top:1px solid var(--border-soft)} .c-trag:first-of-type{border-top:0} .c-trag .cat{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--gold-title);margin-bottom:9px} .c-tags{display:flex;flex-wrap:wrap;gap:6px} .c-tag{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:5px 9px; font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .c-tag.done{background:var(--accent-soft);color:var(--accent-dark)} .c-tag.next{background:var(--panel);color:var(--soft);border:1px solid var(--border-soft)} .c-tag svg{flex:none} /* sedi */ .c-sede{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-soft)} .c-sede:first-of-type{border-top:0} .c-sede-info{flex:1;min-width:0} .c-sede-info b{font-size:14.5px;font-weight:700} .c-sede-info span{display:block;font-size:12.5px;color:var(--soft);margin-top:2px} .c-call{flex:none;display:flex;align-items:center;gap:7px;background:var(--panel);color:var(--accent-dark); border:1px solid var(--border-soft);border-radius:10px;padding:8px 13px;font-size:12.5px; font-weight:700;text-decoration:none} .c-call:active{background:var(--accent-soft);transform:translateY(1px)} .clinic .c-call:focus-visible,.clinic .c-link:focus-visible,.clinic .c-toggle button:focus-visible, .clinic .c-wa:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px} /* ---- rispetta "Riduci movimento" del sistema (lo spinner resta, comunica lavoro) ---- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .spinner,.bracc-banner .spinner,.live-val .spinner{animation:arspin .8s linear infinite!important} } /* ---- CONSENSO ai dati sulla salute (art. 9 GDPR) ---------------------------------- */ /* Testo lungo da leggere davvero: righe più arieggiate della norma dell'app, nessun colore d'allarme. È una scelta informata, non un avviso di pericolo. */ .cons-sec{margin-top:18px} .cons-sec h3{font-size:14px;font-weight:600;letter-spacing:.01em;margin-bottom:6px;color:var(--ink)} .cons-sec p{font-size:14px;line-height:1.55;color:var(--soft);margin-bottom:8px} .cons-list{margin:0 0 8px 18px;padding:0} .cons-list li{font-size:14px;line-height:1.55;color:var(--soft);margin-bottom:4px} .cons-nb{border-left:2px solid var(--border-soft);padding-left:10px} .cons-legal{font-size:12px;line-height:1.5;color:var(--soft);opacity:.85;margin:18px 0 4px} /* Rifiutare deve essere possibile senza cercarlo: stesso peso visivo, colore neutro. */ .btn-plain{width:100%;margin-top:10px;border:1px solid var(--border-soft);background:var(--panel-2); color:var(--ink);border-radius:14px;padding:13px;font:inherit;font-size:15px;font-weight:600;cursor:pointer} .btn-plain:active{transform:translateY(1px)} /* Riga di stato nelle impostazioni: acceso/spento, senza giudizi. */ .cons-state{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:4px} .cons-state i{width:8px;height:8px;border-radius:50%;background:var(--soft);flex:none} .cons-state.on i{background:var(--z-leggera)} .cons-when{font-size:12px;color:var(--soft);margin-bottom:12px}