/* ============================================================
   SportAccadia · App utente — Material Design (stile Android)
   Mobile-first. Un solo tema chiaro, curato.
   ============================================================ */

:root{
  --primary:#e3b23c;--on-primary:#3a2d00;--primary-ink:#8a5a00;
  --primary-container:#fbe7bd;--on-primary-container:#5a4300;
  --secondary-container:#f6e7bf;--on-secondary-container:#5a4500;
  --surface:#ffffff;--surface-1:#f7f7f9;--surface-2:#f0f1f4;--surface-3:#e4e6ea;
  --on-surface:#1b1b1d;--on-surface-variant:#4a4b50;
  --outline:#c6c7cd;--outline-2:#dcdde2;
  --bg:#f3f4f6;
  --bar:#2b2d31;--on-bar:#eef0f4;--bar-muted:#9aa0ac;
  --error:#d13b36;--error-container:#ffdad6;--on-error-container:#410002;
  --success:#2e9e5b;--success-container:#d7f2e1;--on-success:#0c5a30;
  --primary-ring:rgba(227,178,60,.30);
  --e1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --e2:0 2px 6px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --e3:0 10px 28px rgba(16,24,40,.18);
  --r-s:12px;--r-m:16px;--r-l:24px;--r-xl:28px;
  --warn-box-bg:#ffecc7;--warn-box-tx:#6b4b00;
  --reminder-grad:linear-gradient(135deg,#fdf3da,#fbe7bd);--reminder-bd:#f0d48a;--reminder-ic:#f3dca0;--reminder-k:#8a5a00;--reminder-v:#5a4300;
  /* Palette pastello (accenti colorati, testo ad alto contrasto) */
  --pa-lav:#ece7ff;--pa-lav-t:#5a34c9;--pa-mint:#d6f5e6;--pa-mint-t:#0e7a5a;--pa-peach:#ffe6d4;--pa-peach-t:#b4531a;
  --pa-pink:#fde1ef;--pa-pink-t:#b02a6b;--pa-sky:#d9ebff;--pa-sky-t:#1f5bbf;--pa-lemon:#fdeec4;--pa-lemon-t:#8a5a10;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--bg);color:var(--on-surface);line-height:1.5;
  padding-bottom:calc(80px + env(safe-area-inset-bottom,0));
  min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img{max-width:100%;display:block}
.ic{width:calc(24px * var(--ui-ic,1));height:calc(24px * var(--ui-ic,1));flex:0 0 auto}
.muted{color:var(--on-surface-variant)}
.center{text-align:center}

/* ---------- App bar (top) ---------- */
.appbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;
  min-height:64px;padding:10px 8px 10px 12px;
  background:var(--bar);color:var(--on-bar);border-bottom:none;
}
.appbar.primary{background:var(--bar);color:var(--on-bar);border:none}
.appbar-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;color:inherit;flex:0 0 auto}
.appbar-btn:active{background:rgba(255,255,255,.14)}
.appbar.primary .appbar-btn:active{background:rgba(255,255,255,.15)}
.appbar-btn.logout-btn{color:var(--bar-muted)}
.appbar-btn.logout-btn:active{background:rgba(255,120,110,.2);color:#ff8a82}
.appbar-title{font-size:calc(20px * var(--ui-fs,1));font-weight:600;letter-spacing:.1px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-title small{display:block;font-size:calc(12px * var(--ui-fs,1));font-weight:500;opacity:.8}
.appbar-title .brand-name{font-weight:800;letter-spacing:.2px}
.appbar-title .brand-name .bs{color:var(--on-bar)}
.appbar-title .brand-name .be{color:var(--primary)}
.badge-dot::after{border-color:var(--bar)}
.appbar-actions{display:flex;align-items:center;gap:2px}
.badge-dot{position:relative}
.badge-dot::after{content:"";position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--error);border:2px solid var(--surface)}

/* ---------- Screen container ---------- */
.screen{max-width:600px;margin:0 auto;padding:16px}
.section{margin-top:22px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 12px}
.section-title{font-size:calc(16px * var(--ui-fs,1));font-weight:700;letter-spacing:.1px;display:inline-flex;align-items:center;gap:9px}
.section-title::before{content:"";width:6px;height:18px;border-radius:3px;background:linear-gradient(180deg,var(--primary),var(--primary-ink));flex:0 0 auto}
.section-link{color:var(--primary-ink);font-weight:700;font-size:calc(14px * var(--ui-fs,1));padding:6px 8px;border-radius:20px}
.section-link:active{background:var(--primary-container)}
.empty{color:var(--on-surface-variant);text-align:center;padding:26px 12px;font-size:calc(14px * var(--ui-fs,1))}

/* ---------- Micro-interazioni: ingresso contenuti + feedback al tocco (feel nativo) ---------- */
@keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen>*{animation:appIn .38s cubic-bezier(.2,.7,.2,1) both}
.screen>*:nth-child(2){animation-delay:.05s}
.screen>*:nth-child(3){animation-delay:.10s}
.screen>*:nth-child(4){animation-delay:.15s}
.screen>*:nth-child(5){animation-delay:.20s}
.screen>*:nth-child(n+6){animation-delay:.24s}
a.listitem,.quick-tile,.slot,.method,.tariff{transition:background .12s,transform .1s}
a.listitem:active,.quick-tile:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.screen>*{animation:none}}

/* ---------- Cards & list items ---------- */
.card{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--e1);padding:18px}
.listitem{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--r-m);box-shadow:var(--e1);padding:12px 14px;margin-bottom:10px;transition:background .12s}
a.listitem:active{background:var(--surface-1)}
/* Promemoria attività (banner in evidenza) */
.reminder-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;background:var(--reminder-grad);border:1px solid var(--reminder-bd);border-radius:var(--r-m);padding:14px 16px;margin-bottom:14px;box-shadow:var(--e1)}
.reminder-card:active{filter:brightness(.98)}
.reminder-ic{width:calc(46px * var(--ui-ic,1));height:calc(46px * var(--ui-ic,1));border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-size:calc(24px * var(--ui-ic,1));background:var(--reminder-ic)}
.reminder-body{flex:1;min-width:0;display:flex;flex-direction:column}
.reminder-k{font-size:calc(11px * var(--ui-fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--reminder-k)}
.reminder-v{font-weight:700;font-size:calc(15px * var(--ui-fs,1));color:var(--reminder-v);margin-top:2px}
.reminder-s{font-size:calc(13px * var(--ui-fs,1));color:var(--reminder-k);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Selettore tema (Auto/Chiaro/Scuro) */
.theme-seg{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px}
.theme-opt{border:none;background:transparent;color:var(--on-surface-variant);font-weight:700;font-size:calc(13px * var(--ui-fs,1));padding:8px 15px;border-radius:999px;cursor:pointer;font:inherit;transition:.15s}
.theme-opt.sel{background:var(--surface);color:var(--primary-ink);box-shadow:var(--e1)}
/* Banner installazione app (PWA) */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0));z-index:300;display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--surface-3);border-radius:18px;box-shadow:var(--e3);padding:11px 12px;animation:pwaUp .28s ease}
@keyframes pwaUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.pwa-ic{width:46px;height:46px;border-radius:12px;flex:0 0 auto;box-shadow:var(--e1)}
.pwa-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.pwa-tx strong{font-size:calc(14px * var(--ui-fs,1));font-weight:700}
.pwa-tx span{font-size:calc(12px * var(--ui-fs,1));color:var(--on-surface-variant);line-height:1.35}
.pwa-btn{flex:0 0 auto;border:none;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:calc(13px * var(--ui-fs,1));padding:11px 16px;border-radius:20px;cursor:pointer}
.pwa-x{flex:0 0 auto;border:none;background:transparent;color:var(--on-surface-variant);font-size:calc(22px * var(--ui-fs,1));line-height:1;padding:4px 6px;cursor:pointer}
.li-lead{width:calc(48px * var(--ui-ic,1));height:calc(48px * var(--ui-ic,1));border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-size:calc(24px * var(--ui-ic,1));background:var(--primary-container);color:var(--on-primary-container);overflow:hidden}
.fac-thumb{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* Icona sport personalizzata (da libreria) — si dimensiona col font-size del contenitore */
.sport-cimg{width:1em;height:1em;object-fit:contain;display:inline-block;vertical-align:middle}
.big-ic{overflow:hidden}
/* Icone liste: tinta calda coerente col tema (oro tenue). */
.li-body{flex:1;min-width:0}
.li-title{font-weight:600;font-size:calc(15px * var(--ui-fs,1));letter-spacing:.1px}
.li-sub{font-size:calc(13px * var(--ui-fs,1));color:var(--on-surface-variant);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-trail{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--on-surface-variant)}
.li-price{font-weight:700;color:var(--on-surface);font-variant-numeric:tabular-nums}
/* Slot struttura più grandi (immagine + testo) nell'elenco strutture */
.listitem.facitem{padding:14px;gap:16px}
.listitem.facitem .li-lead{width:calc(72px * var(--ui-ic,1));height:calc(72px * var(--ui-ic,1));border-radius:18px;font-size:calc(36px * var(--ui-ic,1))}
.listitem.facitem .li-title{font-size:calc(18px * var(--ui-fs,1));font-weight:700}
.listitem.facitem .li-sub{font-size:calc(14px * var(--ui-fs,1));margin-top:3px}

/* ---------- Balance card ---------- */
.balance{background:radial-gradient(130% 150% at 88% -30%,rgba(227,178,60,.18),rgba(227,178,60,0) 60%),var(--bar);color:var(--on-bar);border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--e2);display:flex;align-items:center;justify-content:space-between;gap:14px}
.balance-label{font-size:calc(12px * var(--ui-fs,1));font-weight:700;letter-spacing:.6px;text-transform:uppercase;opacity:.7}
.balance-amount{font-size:calc(34px * var(--ui-fs,1));font-weight:800;letter-spacing:-.5px;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--primary)}
.balance-cta{background:var(--primary);border:none;color:var(--on-primary);height:48px;padding:0 18px;border-radius:24px;display:inline-flex;align-items:center;gap:8px;font-weight:800;flex:0 0 auto;box-shadow:none}
.balance-cta:active{filter:brightness(.96)}

/* ---------- Quick actions ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.quick-tile{position:relative;background:var(--surface);border-radius:var(--r-m);box-shadow:var(--e1);padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--on-surface)}
.quick-tile:active{background:var(--surface-1)}
.quick-ic{width:calc(44px * var(--ui-ic,1));height:calc(44px * var(--ui-ic,1));border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.quick-ic .ic{width:calc(22px * var(--ui-ic,1));height:calc(22px * var(--ui-ic,1))}
.quick-label{font-size:calc(11.5px * var(--ui-fs,1));font-weight:600;color:var(--on-surface-variant)}
.quick-badge{position:absolute;top:8px;right:calc(50% - 30px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--error);color:#fff;font-size:calc(11px * var(--ui-fs,1));font-weight:700;display:grid;place-items:center}

/* ---------- Chips (date selector / filters) ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--outline);background:var(--surface);color:var(--on-surface-variant);font-weight:600;font-size:calc(14px * var(--ui-fs,1));display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.active{background:var(--primary);border-color:transparent;color:var(--on-primary)}
.chip:active{background:var(--surface-2)}

/* ---------- Slots grid ---------- */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot{background:var(--surface);border:1px solid var(--outline-2);border-radius:var(--r-m);padding:14px 8px;text-align:center;cursor:pointer;transition:.12s}
.slot:active{transform:scale(.97)}
.slot.free{border-color:transparent;background:var(--primary-container)}
.slot-time{font-weight:700;font-size:calc(15px * var(--ui-fs,1));color:var(--on-primary-container)}
.slot-price{font-size:calc(12px * var(--ui-fs,1));color:var(--primary-ink);font-weight:700;margin-top:4px}
.slot-dur{font-size:calc(11px * var(--ui-fs,1));color:var(--on-surface-variant);margin-top:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:26px;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:calc(15px * var(--ui-fs,1));letter-spacing:.2px;border:none;cursor:pointer;transition:transform .08s,filter .15s,box-shadow .15s;box-shadow:var(--e1)}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:scale(.98)}
.btn.full{width:100%}
.btn.tonal{background:var(--primary-container);color:var(--on-primary-container);box-shadow:none}
.btn.text{background:transparent;color:var(--primary-ink);height:auto;padding:12px 14px;box-shadow:none}
.btn.outlined{background:transparent;border:1px solid var(--outline);color:var(--primary-ink);box-shadow:none}
.btn.danger{background:var(--error-container);color:var(--on-error-container);box-shadow:none}
.btn:disabled{background:var(--surface-3);color:var(--on-surface-variant);box-shadow:none;cursor:not-allowed;transform:none}
.btn .ic{width:calc(20px * var(--ui-ic,1));height:calc(20px * var(--ui-ic,1))}
.doc-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-size:calc(12.5px * var(--ui-fs,1));font-weight:800;line-height:1;white-space:nowrap;text-decoration:none;background:var(--surface-2);color:var(--primary-ink)}
.doc-btn .ic{width:calc(15px * var(--ui-ic,1));height:calc(15px * var(--ui-ic,1))}
.doc-btn.boll{background:#e0e7ff;color:#3730a3}
.doc-btn.ric{background:#dcfce7;color:#166534}
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .doc-btn.boll{background:#26314f;color:#c7d2fe} :root:not([data-theme]) .doc-btn.ric{background:#123524;color:#86efac} }
:root[data-theme="dark"] .doc-btn.boll{background:#26314f;color:#c7d2fe}
:root[data-theme="dark"] .doc-btn.ric{background:#123524;color:#86efac}

/* ---------- FAB ---------- */
.fab{position:fixed;right:16px;bottom:calc(94px + env(safe-area-inset-bottom,0));height:56px;min-width:56px;padding:0 20px;border-radius:18px;background:var(--primary);color:var(--on-primary);display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:calc(15px * var(--ui-fs,1));box-shadow:var(--e3);border:none;z-index:35}
.fab:active{transform:scale(.97)}

/* ---------- Text fields (Material, rounded) ---------- */
.field{margin-bottom:16px}
.field>label{display:block;font-size:calc(13px * var(--ui-fs,1));font-weight:600;color:var(--on-surface-variant);margin:0 0 6px 4px}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-2);border:1.5px solid transparent;border-radius:14px;
  padding:15px 16px;font-size:calc(16px * var(--ui-fs,1));color:var(--on-surface);transition:.15s;
}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--on-surface-variant);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 4px var(--primary-ring)}
/* Focus da tastiera visibile e coerente su tutti i controlli */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,[role=radio]:focus-visible,[tabindex]:focus-visible,.listitem:focus-visible,.navitem:focus-visible,.method:focus-visible,.tariff:focus-visible,.pslot:focus-visible,.payopt:focus-visible,.wsport:focus-visible,.chip:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.field .hint{font-size:calc(12px * var(--ui-fs,1));color:var(--on-surface-variant);margin:6px 0 0 4px}

/* ---------- Banners (esito) ---------- */
.banner{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;font-size:calc(14px * var(--ui-fs,1));font-weight:500;margin-bottom:14px}
.banner.ok{background:var(--success-container);color:var(--on-success)}
.banner.err{background:var(--error-container);color:var(--on-error-container)}
.banner.warn{background:var(--warn-box-bg);color:var(--warn-box-tx)}

/* ---------- Payment methods ---------- */
.methods{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.method{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--outline-2);border-radius:var(--r-m);padding:14px;cursor:pointer;transition:.12s}
.method.selected{border-color:var(--primary);background:var(--surface-1)}
.method-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--outline);flex:0 0 auto;display:grid;place-items:center}
.method.selected .method-radio{border-color:var(--primary)}
.method.selected .method-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--primary)}
.method-ic{width:calc(44px * var(--ui-ic,1));height:calc(44px * var(--ui-ic,1));border-radius:12px;background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center;flex:0 0 auto}
.method-b{flex:1;min-width:0}
.method-t{font-weight:600;font-size:calc(15px * var(--ui-fs,1))}
.method-d{font-size:calc(13px * var(--ui-fs,1));color:var(--on-surface-variant);margin-top:2px}

/* ---------- Amount quick chips ---------- */
.amount-field input{text-align:center;font-size:calc(22px * var(--ui-fs,1));font-weight:700}
.amount-chips{display:flex;gap:8px;margin:12px 0}
.amount-chips button{flex:1;height:44px;border-radius:22px;border:1px solid var(--outline);background:var(--surface);font-weight:700;color:var(--on-surface)}
.amount-chips button:active{background:var(--secondary-container)}

/* ---------- Transactions ---------- */
.tx{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--surface-3)}
.tx:last-child{border-bottom:none}
.tx-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--surface-2);color:var(--on-surface-variant)}
.tx-b{flex:1;min-width:0}
.tx-t{font-weight:600;font-size:calc(14px * var(--ui-fs,1))}
.tx-d{font-size:calc(12px * var(--ui-fs,1));color:var(--on-surface-variant);margin-top:1px}
.tx-amt{font-weight:700;font-variant-numeric:tabular-nums}
.tx-amt.pos{color:var(--success)}
.tx-amt.neg{color:var(--error)}

/* ---------- Status chip ---------- */
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:calc(11px * var(--ui-fs,1));font-weight:700;letter-spacing:.2px;background:var(--surface-3);color:var(--on-surface-variant)}
.status.confirmed{background:var(--success-container);color:var(--on-success)}
.status.completed{background:var(--primary-container);color:var(--on-primary-container)}
.status.pending{background:var(--warn-box-bg);color:var(--warn-box-tx)}
.status.cancelled{background:var(--surface-3);color:var(--on-surface-variant)}

/* ---------- Chat ---------- */
.chat{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.bubble{max-width:82%;padding:11px 15px;border-radius:20px;font-size:calc(14.5px * var(--ui-fs,1));box-shadow:var(--e1);word-wrap:break-word}
.bubble.them{background:var(--surface);border-bottom-left-radius:6px;align-self:flex-start}
.bubble.me{background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px;align-self:flex-end}
.bubble-subj{font-weight:700;margin-bottom:3px}
.bubble-meta{font-size:calc(11px * var(--ui-fs,1));opacity:.7;margin-top:5px}
.attach{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:calc(13px * var(--ui-fs,1));font-weight:600}
.bubble.me .attach{background:rgba(0,0,0,.10);color:var(--on-primary)}
.composer{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--e1);padding:12px;margin-top:14px;display:flex;flex-direction:column;gap:10px}

/* ---------- Profile ---------- */
.profile-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 6px}
.avatar{width:calc(88px * var(--ui-ic,1));height:calc(88px * var(--ui-ic,1));border-radius:50%;background:linear-gradient(135deg,#34b36b,#1f7d46);color:#fff;display:grid;place-items:center;font-size:calc(36px * var(--ui-ic,1));font-weight:800;box-shadow:0 10px 22px rgba(31,125,70,.35)}
.pname{margin-top:12px;font-size:calc(22px * var(--ui-fs,1));font-weight:700;letter-spacing:-.2px}
.psub{color:var(--on-surface-variant);font-size:calc(14px * var(--ui-fs,1));margin-top:2px}
.inforow{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--surface-3)}
.inforow:last-child{border-bottom:none}
.inforow .ic{color:var(--on-surface-variant)}
.infok{font-size:calc(12px * var(--ui-fs,1));color:var(--on-surface-variant)}
.infov{font-weight:600;font-size:calc(15px * var(--ui-fs,1))}

/* ---------- Dialog (Material) ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,20,32,.5);z-index:60;opacity:0;visibility:hidden;transition:.2s;display:flex;align-items:center;justify-content:center;padding:24px}
.scrim.show{opacity:1;visibility:visible}
.dialog{background:var(--surface);border-radius:var(--r-xl);padding:24px;width:100%;max-width:340px;box-shadow:var(--e3);transform:scale(.92);transition:transform .2s}
.scrim.show .dialog{transform:none}
.dialog h3{font-size:calc(20px * var(--ui-fs,1));font-weight:600;margin-bottom:6px}
.dialog .big{font-size:calc(30px * var(--ui-fs,1));font-weight:800;color:var(--primary-ink);margin:10px 0;font-variant-numeric:tabular-nums}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ---------- Bottom sheet (scelta IdP SPID) ---------- */
.sheet-scrim{position:fixed;inset:0;background:rgba(16,20,32,.5);z-index:60;opacity:0;visibility:hidden;transition:.2s}
.sheet-scrim.show{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0));max-height:82vh;overflow:auto;transform:translateY(101%);transition:transform .28s cubic-bezier(.2,.75,.2,1);max-width:600px;margin:0 auto}
.sheet-scrim.show .sheet{transform:none}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--outline);margin:8px auto 10px}
.sheet-title{font-weight:700;font-size:calc(16px * var(--ui-fs,1));text-align:center;margin-bottom:6px}
.sheet-sub{font-size:calc(13px * var(--ui-fs,1));color:var(--on-surface-variant);text-align:center;margin-bottom:12px}
.idp{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:14px;border-bottom:1px solid var(--surface-3)}
.idp:active{background:var(--surface-1)}
.idp-logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:calc(13px * var(--ui-fs,1));color:#fff;flex:0 0 auto;letter-spacing:.3px}
.idp-name{font-weight:600}

/* ============================================================
   Bottom navigation Material 3
   ============================================================ */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--bar);border-top:none;padding:10px 6px calc(12px + env(safe-area-inset-bottom,0));max-width:600px;margin:0 auto;box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--bar-muted);min-width:0}
.navind{width:64px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .15s}
.navind .ic{width:calc(24px * var(--ui-ic,1));height:calc(24px * var(--ui-ic,1))}
.navlabel{font-size:calc(12px * var(--ui-fs,1));font-weight:600;letter-spacing:.2px}
.navitem.active{color:var(--primary)}
.navitem.active .navind{background:var(--primary);color:var(--on-primary)}
.navitem.active .navlabel{color:var(--primary)}
.navitem:active .navind{background:rgba(255,255,255,.1)}
.navind{position:relative}
.navbadge{position:absolute;top:-3px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--error);color:#fff;font-size:calc(10px * var(--ui-fs,1));font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--bar)}
.mov-title{font-size:calc(20px * var(--ui-fs,1));font-weight:800;letter-spacing:-.2px}

/* ============================================================
   Auth (login / registrazione) — full screen Android
   ============================================================ */
.auth{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 20px calc(28px + env(safe-area-inset-bottom,0))}
body.authbody{background:var(--surface);padding-bottom:0}
.auth-hero{padding:44px 4px 24px;text-align:center}
.auth-logo{width:128px;height:128px;margin:0 auto 14px;background:none;box-shadow:none;border-radius:0;display:grid;place-items:center;font-size:calc(64px * var(--ui-fs,1))}
.auth-logo img{width:100%;height:100%;object-fit:contain;border-radius:0}
.auth-name{font-size:calc(26px * var(--ui-fs,1));font-weight:800;letter-spacing:-.4px}
.auth-sub{color:var(--on-surface-variant);margin-top:4px}
.auth-body{flex:1}
.divider{display:flex;align-items:center;gap:14px;color:var(--on-surface-variant);font-size:calc(13px * var(--ui-fs,1));font-weight:600;margin:22px 2px}
.divider::before,.divider::after{content:"";height:1px;background:var(--surface-3);flex:1}
.auth-alt{text-align:center;margin-top:22px;color:var(--on-surface-variant);font-size:calc(14px * var(--ui-fs,1))}
.auth-alt a{color:var(--primary-ink);font-weight:700}
.btn-register{border:1.5px solid var(--primary);font-weight:700}
.error-list{list-style:none;background:var(--error-container);color:var(--on-error-container);border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:calc(14px * var(--ui-fs,1))}
.error-list li{margin:2px 0}
.success-box{background:var(--success-container);color:var(--on-success);border-radius:16px;padding:22px;text-align:center}
.success-box p{margin:4px 0}

/* SPID / CIE buttons (accesso identità digitale) */
.btn-idp{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:52px;border-radius:12px;font-weight:700;font-size:calc(15px * var(--ui-fs,1));border:none;cursor:pointer;margin-bottom:12px;letter-spacing:.2px}
.btn-idp:active{filter:brightness(.95)}
.btn-spid{background:#06c;color:#fff}
.btn-cie{background:#0a2d5e;color:#fff}
.idp-mark{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}
.spid-mark{background:#fff}
.spid-mark span{display:block;width:15px;height:2.4px;background:#06c;border-radius:2px;box-shadow:0 -5px 0 #06c,0 5px 0 #06c}
.cie-mark{background:#fff;position:relative;overflow:hidden}
.cie-mark i{position:absolute;left:0;top:0;bottom:0;width:33%;background:#0a913f}
.cie-mark i+i{left:auto;right:0;background:#d7263d}
.cie-mark b{position:absolute;left:33%;right:33%;top:6px;bottom:6px;background:#0a2d5e;border-radius:2px}

/* ---------- Operatore: statistiche & dettaglio ---------- */
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat{background:var(--surface);border-radius:16px;box-shadow:var(--e1);padding:14px 12px}
.stat .n{font-size:calc(22px * var(--ui-fs,1));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.stat .l{font-size:calc(11.5px * var(--ui-fs,1));color:var(--on-surface-variant);font-weight:600;margin-top:2px}
.stack{display:flex;flex-direction:column;gap:10px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:calc(11px * var(--ui-fs,1));font-weight:700}
.detail-hero{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--e1);padding:20px;text-align:center;margin-bottom:14px}
.detail-hero .big-ic{width:calc(64px * var(--ui-ic,1));height:calc(64px * var(--ui-ic,1));border-radius:20px;margin:0 auto 10px;display:grid;place-items:center;font-size:calc(32px * var(--ui-ic,1));background:var(--primary-container)}
.detail-hero .dh-title{font-size:calc(19px * var(--ui-fs,1));font-weight:700}
.detail-hero .dh-sub{color:var(--on-surface-variant);font-size:calc(14px * var(--ui-fs,1));margin-top:2px}
.contact-row{display:flex;gap:10px;margin-top:12px}
.contact-row a{flex:1;height:46px;border-radius:23px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--secondary-container);color:var(--on-secondary-container);font-weight:600;font-size:calc(14px * var(--ui-fs,1))}
.agenda-group{margin-bottom:8px}
.agenda-fac{font-size:calc(13px * var(--ui-fs,1));font-weight:700;color:var(--on-surface-variant);margin:16px 4px 8px;text-transform:uppercase;letter-spacing:.4px}
.time-badge{min-width:52px;height:48px;border-radius:12px;background:var(--primary-container);color:var(--on-primary-container);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:calc(14px * var(--ui-fs,1));flex:0 0 auto}
.time-badge small{font-size:calc(10px * var(--ui-fs,1));font-weight:600;opacity:.8}

/* ---------- Wizard prenotazione ---------- */
.wizsteps{display:flex;gap:6px;justify-content:center;margin:4px 0 12px}
.stepdot{height:6px;border-radius:3px;background:var(--surface-3);flex:1;max-width:64px;transition:.2s}
.stepdot.on{background:var(--primary)}
.steplabel{text-align:center;font-weight:700;margin-bottom:14px;font-size:calc(15px * var(--ui-fs,1));color:var(--on-surface)}
.steplabel small{display:block;font-weight:500;color:var(--on-surface-variant);font-size:calc(12.5px * var(--ui-fs,1));margin-top:2px}
.tariff{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1.5px solid var(--outline-2);border-radius:var(--r-m);padding:14px;margin-bottom:10px;cursor:pointer}
.tariff.sel{border-color:var(--primary);background:var(--surface-1)}
.tariff-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--outline);flex:0 0 auto;margin-top:2px;display:grid;place-items:center}
.tariff.sel .tariff-radio{border-color:var(--primary)}
.tariff.sel .tariff-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--primary)}
.tariff-b{flex:1;min-width:0}
.tariff-t{font-weight:700;font-size:calc(15px * var(--ui-fs,1))}
.tariff-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:calc(10.5px * var(--ui-fs,1));font-weight:700;vertical-align:middle}
.tariff-price{font-weight:800;color:var(--primary-ink);margin-top:3px}
.tariff-desc{font-size:calc(12.5px * var(--ui-fs,1));color:var(--on-surface-variant);margin-top:2px}
.persons{display:flex;align-items:center;gap:18px;justify-content:center;padding:6px 0}
.persons button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--outline);background:var(--surface);font-size:calc(24px * var(--ui-fs,1));font-weight:700;color:var(--primary-ink);line-height:1}
.persons .pv{font-size:calc(26px * var(--ui-fs,1));font-weight:800;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.slot.sel{background:var(--primary);border-color:transparent}
.slot.sel .slot-time{color:var(--on-primary)}.slot.sel .slot-price{color:var(--on-primary)}.slot.sel .slot-dur{color:rgba(58,45,0,.72)}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--surface-3)}
.sumrow:last-child{border-bottom:none}
.sumrow .k{color:var(--on-surface-variant);font-size:calc(14px * var(--ui-fs,1))}
.sumrow .v{font-weight:600;text-align:right}
.sumtot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid var(--surface-2);font-size:calc(21px * var(--ui-fs,1));font-weight:800}
.sumtot .big{color:var(--primary-ink);font-variant-numeric:tabular-nums}
.wizbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0));background:var(--surface);border-top:1px solid var(--surface-3);max-width:600px;margin:0 auto;box-shadow:0 -2px 12px rgba(16,24,40,.06)}
.wizbar .wiztotal{flex:1;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;font-size:calc(15px * var(--ui-fs,1))}
.wizbar .btn{height:46px}

@media(max-width:360px){
  .quick{gap:7px}
  .balance-amount{font-size:calc(29px * var(--ui-fs,1))}
  .slotgrid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
}

/* ============================================================
   Desktop / tablet: la stessa app mobile, ma più ampia e comoda.
   Mobile-first resta il default; qui "ingrandiamo" su schermi grandi.
   ============================================================ */
@media (min-width: 700px){
  .screen{max-width:720px;padding:20px 20px 24px}
}
@media (min-width: 900px){
  .screen{max-width:840px;padding:24px 22px 28px}
  .appbar{min-height:68px;padding-left:20px;padding-right:16px}
  .appbar-title{font-size:calc(21px * var(--ui-fs,1))}
  .balance{padding:24px 28px}
  .balance-amount{font-size:calc(40px * var(--ui-fs,1))}
  .bottomnav{bottom:16px;max-width:560px;border-radius:22px;border:1px solid var(--surface-3);box-shadow:var(--e3);padding-left:10px;padding-right:10px}
}
@media (min-width: 1000px){
  /* Le liste di card diventano a 2 colonne; header, form, card e stati vuoti restano a tutta larghezza */
  .section{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px;align-items:start}
  .section > *{grid-column:1 / -1}
  .section > .listitem{grid-column:auto;margin-bottom:0}
}
@media (min-width: 1300px){
  .screen{max-width:1000px}
  .section{column-gap:20px}
}

/* ============================================================
   Dark mode — segue la preferenza di sistema del dispositivo.
   Ridefinisce le variabili: tutto ciò che usa var(--…) si adatta.
   ============================================================ */
:root[data-theme="dark"],
:root[data-theme="dark"] *{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
  --primary:#e8bd52;--on-primary:#3a2d00;--primary-ink:#f0c861;
  --primary-container:#4a3a12;--on-primary-container:#fbe7bd;
  --secondary-container:#473913;--on-secondary-container:#f6e7bf;
  --surface:#1a1c20;--surface-1:#212429;--surface-2:#282b31;--surface-3:#33363d;
  --on-surface:#e3e2e6;--on-surface-variant:#c4c6cf;
  --outline:#8d909b;--outline-2:#3f424a;--bg:#121316;
  --bar:#0f1113;--on-bar:#eef0f4;--bar-muted:#8b9199;
  --error:#ff6b63;--error-container:#93000a;--on-error-container:#ffdad6;
  --success:#64d08a;--success-container:#0c5223;--on-success:#c8f0cf;
  --primary-ring:rgba(232,189,82,.28);
  --e1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--e2:0 2px 6px rgba(0,0,0,.5);--e3:0 12px 30px rgba(0,0,0,.6);
  --warn-box-bg:#4a3410;--warn-box-tx:#f6d08a;
  --reminder-grad:linear-gradient(135deg,#3a2d0c,#4a3a12);--reminder-bd:#5e4a1a;--reminder-ic:#5e4a1a;--reminder-k:#e8c976;--reminder-v:#fbe7bd;
  --pa-lav:#312a52;--pa-lav-t:#cfc2ff;--pa-mint:#123a2c;--pa-mint-t:#8fe8c4;--pa-peach:#45301d;--pa-peach-t:#ffcfa6;
  --pa-pink:#431f33;--pa-pink-t:#ffb3dc;--pa-sky:#1c3357;--pa-sky-t:#aecbff;--pa-lemon:#3f3417;--pa-lemon-t:#f4d58a;
}}
:root[data-theme="dark"]{
  --primary:#e8bd52;--on-primary:#3a2d00;--primary-ink:#f0c861;
  --primary-container:#4a3a12;--on-primary-container:#fbe7bd;
  --secondary-container:#473913;--on-secondary-container:#f6e7bf;
  --surface:#1a1c20;--surface-1:#212429;--surface-2:#282b31;--surface-3:#33363d;
  --on-surface:#e3e2e6;--on-surface-variant:#c4c6cf;
  --outline:#8d909b;--outline-2:#3f424a;--bg:#121316;
  --bar:#0f1113;--on-bar:#eef0f4;--bar-muted:#8b9199;
  --error:#ff6b63;--error-container:#93000a;--on-error-container:#ffdad6;
  --success:#64d08a;--success-container:#0c5223;--on-success:#c8f0cf;
  --primary-ring:rgba(232,189,82,.28);
  --e1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--e2:0 2px 6px rgba(0,0,0,.5);--e3:0 12px 30px rgba(0,0,0,.6);
  --warn-box-bg:#4a3410;--warn-box-tx:#f6d08a;
  --reminder-grad:linear-gradient(135deg,#3a2d0c,#4a3a12);--reminder-bd:#5e4a1a;--reminder-ic:#5e4a1a;--reminder-k:#e8c976;--reminder-v:#fbe7bd;
  --pa-lav:#312a52;--pa-lav-t:#cfc2ff;--pa-mint:#123a2c;--pa-mint-t:#8fe8c4;--pa-peach:#45301d;--pa-peach-t:#ffcfa6;
  --pa-pink:#431f33;--pa-pink-t:#ffb3dc;--pa-sky:#1c3357;--pa-sky-t:#aecbff;--pa-lemon:#3f3417;--pa-lemon-t:#f4d58a;
}