/* 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:#8c857d; --accent:#c7a56a; --accent-dark:#b89458; --accent-soft:#efe3cc; --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); } /* 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; --field-bg:#2a251e; --topbar-bg:rgba(29,26,22,.9); --err:#e07b6c; --shadow-card:0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box;margin:0;padding:0} 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:15px;line-height:1.5;min-height:100vh; -webkit-tap-highlight-color:transparent; } :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:12.5px;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;border-radius:10px;cursor:pointer;display:flex} .icon-btn:active{background:var(--accent-soft);color:var(--accent-dark)} .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} .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:10.5px;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(--accent-dark);margin-bottom:6px} .hint{font-size:12.5px;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:10px;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:12px;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:12px;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:10.5px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em} .cbar .val{font-size:9.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} .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}