/* Club Facile — Windows 11 / Fluent. Accento verde campo, semaforo verde/ambra/rosso. */
:root{
  --acc:#0f7b5f; --acc-h:#0c6a52; --acc-t:#fff; --acc-soft:#e3f2ec;
  --mica:linear-gradient(135deg,#eef3f0 0%,#f3f1ea 55%,#ecf0f4 100%);
  --card:rgba(255,255,255,.78); --card-solid:#fff; --acrylic:rgba(249,250,249,.72);
  --tx:#1b1f1d; --tx2:#4c5551; --tx3:#66706b; --linea:rgba(20,40,30,.10); --linea2:rgba(20,40,30,.18);
  --ok:#0f7b3f; --ok-bg:#dff3e5; --warn:#8a5a00; --warn-bg:#fff1cc; --ko:#b3261e; --ko-bg:#fde3e1; --grey-bg:#eef0ef;
  --r:8px; --r2:12px;
  --sh1:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --sh2:0 2px 6px rgba(0,0,0,.07),0 8px 24px rgba(15,40,30,.07);
  --sh3:0 8px 20px rgba(0,0,0,.10),0 24px 60px rgba(15,40,30,.14);
  --font:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-w:236px; --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --acc:#3fbf93; --acc-h:#5ccfa6; --acc-t:#06231a; --acc-soft:rgba(63,191,147,.16);
  --mica:linear-gradient(135deg,#1a1f1c 0%,#1d1c19 55%,#191c20 100%);
  --card:rgba(43,47,45,.72); --card-solid:#2a2e2c; --acrylic:rgba(32,36,34,.78);
  --tx:#eef2ef; --tx2:#c3cbc6; --tx3:#9aa49f; --linea:rgba(255,255,255,.09); --linea2:rgba(255,255,255,.16);
  --ok:#6fd99a; --ok-bg:rgba(60,190,110,.16); --warn:#f3c55a; --warn-bg:rgba(240,180,40,.16); --ko:#ff8d84; --ko-bg:rgba(240,80,70,.17); --grey-bg:rgba(255,255,255,.07);
  --sh2:0 2px 6px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); --sh3:0 8px 20px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.4);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 var(--font);color:var(--tx);background:var(--mica) fixed;min-height:100vh;font-variant-numeric:tabular-nums}
::selection{background:var(--acc);color:var(--acc-t)}
a{color:var(--acc);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--font-d);line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:1.75rem;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:600;margin:0 0 .6rem}
h3{font-size:1rem;font-weight:600}
p{margin:.4rem 0}
small,.hint{color:var(--tx3);font-size:.86rem}
code{font-family:"Cascadia Mono",Consolas,monospace;font-size:.92em}
.ico{flex:none;vertical-align:middle}
*{scrollbar-width:thin;scrollbar-color:var(--linea2) transparent}

/* ---------- guscio ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 16px;
  background:var(--acrylic);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);border-bottom:1px solid var(--linea)}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;min-width:0}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--acc);color:var(--acc-t);flex:none;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}
.brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-t small{font-size:.72rem}
.top-dx{display:flex;align-items:center;gap:10px}
.io{display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;font-weight:500}
.nav{position:fixed;z-index:25;background:var(--acrylic);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
.nav a{display:flex;align-items:center;gap:12px;color:var(--tx2);text-decoration:none;border-radius:var(--r);position:relative;transition:background .15s}
.nav a:hover{background:var(--grey-bg);color:var(--tx)}
.nav a.on{background:var(--card-solid);color:var(--tx);box-shadow:var(--sh1)}
.nav a.on::before{content:"";position:absolute;left:0;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--acc)}
.nav a.on .ni{color:var(--acc)}
.ni{position:relative;display:grid;place-items:center}
.pallino{position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ko);color:#fff;font:600 10px/17px var(--font);font-style:normal;text-align:center}
.nav-credit{margin-top:auto;font-size:.78rem;color:var(--tx3)!important;justify-content:center}
.wrap{padding:20px 16px 110px;max-width:1180px;margin:0 auto;animation:entra .5s var(--ease)}
.piede{margin:40px 0 0;text-align:center;font-size:.8rem;color:var(--tx3)}
.piede a{color:inherit}
@media (min-width:900px){
  .nav{top:52px;bottom:0;left:0;width:var(--nav-w);display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-right:1px solid var(--linea)}
  .nav a{padding:9px 12px}
  body.con-menu .wrap{margin-left:var(--nav-w);padding:28px 36px 60px;max-width:calc(1180px + var(--nav-w))}
  .solo-tel{display:none!important}
}
@media (max-width:899px){
  .nav{left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--linea)}
  .nav a{flex-direction:column;gap:2px;padding:6px 4px;font-size:.68rem;flex:1;min-width:0}
  .nav a.on::before{left:50%;top:auto;bottom:2px;width:16px;height:3px;margin:0 0 0 -8px}
  .nav a.on{box-shadow:none;background:transparent}
  .nl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .solo-pc{display:none!important}
  h1{font-size:1.45rem}
}
@keyframes entra{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- demo ---------- */
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 16px;background:#13241d;color:#e6f2ec;font-size:.84rem}
.demo-bar a{color:#9fe3c6}
.demo-switch{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.demo-switch a{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.08);text-decoration:none}
.demo-switch a.on{background:#3fbf93;color:#06231a}
.demo-switch small{opacity:.85}
.demo-switch a.on small{color:#06231a}
.demo-cta{margin-left:auto;font-weight:600}

/* ---------- superfici ---------- */
.testata{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 20px}
.sotto{color:var(--tx2);margin:.3rem 0 0}
.azioni{display:flex;flex-wrap:wrap;gap:8px}
.card{background:var(--card);border:1px solid var(--linea);border-radius:var(--r2);box-shadow:var(--sh1);padding:18px;margin:0 0 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card>h2:first-child{display:flex;align-items:center;gap:8px}
.griglia{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.griglia>.card{margin:0}
.due{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.due{grid-template-columns:3fr 2fr}}
.riga{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.vuoto{text-align:center;color:var(--tx3);padding:28px 12px}
.vuoto .ico{color:var(--tx3);margin-bottom:6px}
.sep{border:0;border-top:1px solid var(--linea);margin:16px 0}
.centro{text-align:center}
.mt{margin-top:12px}

/* numeri del giorno: riga unica, niente "cartelle" tutte uguali */
.numeri{display:flex;flex-wrap:wrap;gap:0;background:var(--card);border:1px solid var(--linea);border-radius:var(--r2);margin:0 0 16px;overflow:hidden}
.numeri a,.numeri div{flex:1 1 140px;padding:14px 18px;color:var(--tx);text-decoration:none;border-right:1px solid var(--linea)}
.numeri a:hover{background:var(--grey-bg)}
.numeri b{display:block;font:600 1.6rem/1.1 var(--font-d)}
.numeri span{font-size:.82rem;color:var(--tx2)}
.numeri .k{color:var(--ko)} .numeri .w{color:var(--warn)}

/* ---------- liste ---------- */
.lista{list-style:none;margin:0;padding:0}
.lista>li,.lista>a{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--linea);color:var(--tx);text-decoration:none}
.lista>li:last-child,.lista>a:last-child{border-bottom:0}
.lista>a:hover{background:var(--grey-bg);border-radius:var(--r)}
.lista .cresce{flex:1;min-width:0}
.lista .cresce b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .cresce small{display:block}
.tab{width:100%;border-collapse:collapse;font-size:.92rem}
.tab th{text-align:left;font-weight:600;color:var(--tx2);font-size:.8rem;padding:8px;border-bottom:1px solid var(--linea2)}
.tab td{padding:9px 8px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap}
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}
.avatar{border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center}
.avatar-txt{background:var(--acc);color:var(--acc-t);font-weight:600}

/* ---------- etichette e semafori ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.chip-ok{background:var(--ok-bg);color:var(--ok)} .chip-warn{background:var(--warn-bg);color:var(--warn)} .chip-ko{background:var(--ko-bg);color:var(--ko)} .chip-grey{background:var(--grey-bg);color:var(--tx2)}
.badge{padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:600;text-decoration:none;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)} .badge-warn{background:var(--warn-bg);color:var(--warn)} .badge-ko{background:var(--ko-bg);color:var(--ko)}
.sema{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;color:var(--tx3);margin-left:8px;white-space:nowrap}
.sema i{width:8px;height:8px;border-radius:50%}
.d-ok{background:#1aa35a} .d-warn{background:#e0a100} .d-ko{background:#d13438} .d-grey{background:#a0a8a4}

/* ---------- form ---------- */
label{display:block;font-size:.84rem;font-weight:600;color:var(--tx2);margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--tx);background:var(--card-solid);border:1px solid var(--linea2);border-bottom-color:var(--tx3);border-radius:6px;padding:8px 10px;min-height:38px}
input:focus,select:focus,textarea:focus{outline:0;border-bottom:2px solid var(--acc);padding-bottom:7px}
textarea{min-height:90px;resize:vertical}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;accent-color:var(--acc);vertical-align:middle;margin:0 6px 0 0}
.check{display:flex;align-items:center;font-weight:500;color:var(--tx);margin:10px 0}
::placeholder{color:var(--tx3);opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:6px;border:1px solid var(--linea2);border-bottom-color:rgba(0,0,0,.2);background:var(--card-solid);color:var(--tx);font:500 .92rem var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s,transform .12s}
.btn:hover{background:var(--grey-bg)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-p{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}
.btn-p:hover{background:var(--acc-h)}
.btn-ko{color:var(--ko)}
.btn-big{min-height:46px;padding:10px 20px;font-size:1rem}
.btn-block{width:100%}
.btn-sm{min-height:30px;padding:3px 10px;font-size:.84rem}
.btn[hidden]{display:none}
.flash{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r);margin:0 0 16px;font-weight:500;box-shadow:var(--sh1)}
.flash-ok{background:var(--ok-bg);color:var(--ok)} .flash-ko{background:var(--ko-bg);color:var(--ko)} .flash-warn{background:var(--warn-bg);color:var(--warn)}
.cerca-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.cerca-bar input{flex:1 1 220px}
.cerca-bar select{flex:0 1 220px}
.pill-tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 16px;padding:3px;background:var(--grey-bg);border-radius:var(--r);width:max-content;max-width:100%}
.pill-tabs a{padding:6px 12px;border-radius:6px;color:var(--tx2);text-decoration:none;font-weight:500;white-space:nowrap;font-size:.9rem}
.pill-tabs a.on{background:var(--card-solid);color:var(--tx);box-shadow:var(--sh1)}
.login{max-width:440px;margin:6vh auto}

/* ---------- INGRESSO (il momento firmato) ---------- */
.ingresso{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.ingresso{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.lettore{display:flex;gap:8px;align-items:stretch}
.lettore input{font-size:1.25rem;min-height:52px;letter-spacing:.04em}
.lettore .btn{min-height:52px}
.esito{position:relative;border-radius:16px;padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:var(--card);border:1px solid var(--linea);box-shadow:var(--sh2);overflow:hidden;transition:background .3s var(--ease)}
.esito::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s}
.esito.ok{background:linear-gradient(160deg,#118a4b,#0b6b3a);color:#fff;border-color:transparent}
.esito.warn{background:linear-gradient(160deg,#f0b400,#d68f00);color:#231a00;border-color:transparent}
.esito.ko{background:linear-gradient(160deg,#d13438,#a4262c);color:#fff;border-color:transparent}
.esito.nuovo{animation:lampo .55s var(--ease)}
@keyframes lampo{0%{transform:scale(.97);filter:brightness(1.25)}100%{transform:none;filter:none}}
.esito .foto{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.85);box-shadow:var(--sh2);background:rgba(255,255,255,.2);display:grid;place-items:center;font:600 2.6rem var(--font-d)}
.esito .titolo{font:700 clamp(2rem,4.5vw,3.2rem)/1.05 var(--font-d);margin:14px 0 4px;letter-spacing:-.02em}
.esito .nome{font:600 1.35rem var(--font-d)}
.esito ul{list-style:none;padding:0;margin:12px 0 0;font-size:1.05rem;font-weight:500}
.esito li{margin:3px 0}
.esito .sub{opacity:.85;font-size:.95rem}
.esito .azioni-esito{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.esito .azioni-esito .btn{background:rgba(255,255,255,.92);color:#1b1f1d;border:0}
.esito .attesa{color:var(--tx3)}
.aree-sel{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.aree-sel label{margin:0;display:inline-flex}
.aree-sel input{position:absolute;opacity:0;width:1px;height:1px}
.aree-sel span{padding:6px 12px;border-radius:999px;border:1px solid var(--linea2);background:var(--card-solid);font-weight:500;color:var(--tx);cursor:pointer}
.aree-sel input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}
.aree-sel input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.capienza{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea)}
.capienza:last-child{border:0}
.barra{flex:1;height:6px;border-radius:3px;background:var(--grey-bg);overflow:hidden}
.barra i{display:block;height:100%;background:var(--acc);border-radius:3px}
.barra i.pieno{background:var(--ko)}
.scan-box{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.scan-box video{width:min(92vw,520px);border-radius:16px;box-shadow:var(--sh3)}

/* ---------- tessera ---------- */
.tessera{width:340px;max-width:100%;aspect-ratio:85.6/54;border-radius:14px;padding:14px 16px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#1fa37a 0%,#0f7b5f 45%,#0a4f3e 100%);box-shadow:var(--sh3);display:grid;grid-template-columns:1fr auto;gap:10px}
.tessera::after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:18px solid rgba(255,255,255,.07)}
.tessera .t-club{font:600 .78rem var(--font-d);letter-spacing:.02em;opacity:.9}
.tessera .t-nome{font:700 1.15rem/1.15 var(--font-d);margin-top:auto}
.tessera .t-sx{display:flex;flex-direction:column;gap:4px;min-width:0}
.tessera .t-cod{font:600 .95rem "Cascadia Mono",Consolas,monospace;letter-spacing:.12em;opacity:.95}
.tessera .t-qr{background:#fff;border-radius:8px;padding:6px;align-self:center;z-index:1}
.tessera .t-qr svg{display:block;width:92px;height:92px}
.tessera .t-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7)}
@media print{
  body{background:#fff}.top,.nav,.demo-bar,.no-stampa,.piede{display:none!important}
  .wrap{margin:0!important;padding:0!important}
  .tessera{width:85.6mm;height:54mm;box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tessere-stampa{display:grid;grid-template-columns:85.6mm 85.6mm;gap:6mm}
  .card{box-shadow:none;border:0;background:#fff}
}

/* ---------- calendario ---------- */
.giorni{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px}
.giorni a{flex:1 0 64px;text-align:center;padding:8px 4px;border-radius:var(--r);background:var(--card);border:1px solid var(--linea);color:var(--tx);text-decoration:none}
.giorni a small{display:block;color:var(--tx3);font-size:.72rem}
.giorni a b{font:600 1.15rem var(--font-d)}
.giorni a.on{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}
.giorni a.on small{color:inherit;opacity:.85}
.sess{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r);background:var(--card-solid);border:1px solid var(--linea);margin:0 0 8px;color:var(--tx);text-decoration:none;box-shadow:var(--sh1)}
.sess:hover{box-shadow:var(--sh2)}
.sess .ore{font:600 1rem var(--font-d);min-width:52px}
.sess .ore small{display:block;font-weight:400}
.sess .bollo{width:10px;height:38px;border-radius:5px;flex:none}
.appello-riga{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--linea2);border-radius:6px;overflow:hidden;margin-left:auto}
.seg label{margin:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;padding:6px 10px;font-size:.84rem;font-weight:500;color:var(--tx2);cursor:pointer;background:var(--card-solid)}
.seg input:checked+span.s-presente{background:var(--ok-bg);color:var(--ok)}
.seg input:checked+span.s-assente{background:var(--ko-bg);color:var(--ko)}
.seg input:checked+span.s-giustificato{background:var(--warn-bg);color:var(--warn)}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:-2px}

/* ---------- app genitore/socio ---------- */
body.app{padding-bottom:84px}
.app .wrap{max-width:560px;padding-top:16px}
.app-nav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:var(--acrylic);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);border-top:1px solid var(--linea)}
.app-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--tx2);text-decoration:none;font-size:.68rem;border-radius:var(--r)}
.app-nav a.on{color:var(--acc);font-weight:600}
.membri{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px}
.membri a{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--card);border:1px solid var(--linea);color:var(--tx);text-decoration:none;font-weight:500;white-space:nowrap}
.membri a.on{background:var(--acc);color:var(--acc-t);border-color:var(--acc)}
.qr-grande{display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-grande .qr-box{background:#fff;padding:14px;border-radius:16px;box-shadow:var(--sh2)}
.qr-grande svg{display:block;width:min(64vw,250px);height:auto}
.timer{height:4px;border-radius:2px;background:var(--grey-bg);width:min(64vw,250px);overflow:hidden}
.timer i{display:block;height:100%;background:var(--acc);transform-origin:left}
.guida{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.guida .card{max-width:440px;width:100%;box-shadow:var(--sh3);background:var(--card-solid);animation:entra .4s var(--ease)}
.punti{display:flex;gap:6px;justify-content:center;margin:12px 0}
.punti i{width:7px;height:7px;border-radius:50%;background:var(--linea2)}
.punti i.on{background:var(--acc);width:18px;border-radius:4px}