@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --notte:#161a2b; --notte-2:#21263b; --platino:#e7e9ef; --platino-2:#c9cdd8; --argento:#9aa1b4;
  --accento:#6d5bd0; --accento-2:#5546b0; --oro:#c9a96a;
  --carta:#f7f7fa; --bianco:#fff; --inchiostro:#1c2033; --tenue:#5b6178; --bordo:#d9dce6;
  --verde:#1f7a4d; --verde-f:#e3f4ea; --rosso:#b3261e; --rosso-f:#fbe9e7; --giallo:#8a5a00; --giallo-f:#fff4dc;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:19px;background:var(--carta)}
@media (min-width:900px){html{font-size:20px}}
body{font-family:Inter,system-ui,sans-serif;line-height:1.55;color:var(--inchiostro);background:var(--carta);-webkit-font-smoothing:antialiased}
a{color:var(--accento-2)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--accento);outline-offset:3px;border-radius:8px}
.nastro{background:var(--oro);color:#2a1f05;text-align:center;font-size:.72rem;font-weight:700;padding:.35rem 1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* testata */
.testata{background:linear-gradient(135deg,var(--notte),#2b2f4a);color:#fff}
.testata-in{max-width:1100px;margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marchio{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.marchio-segno{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#f4f5f9,#aab0c2);color:var(--notte);font-family:Fraunces,serif;font-weight:700;font-size:1.25rem;box-shadow:inset 0 1px 0 #fff}
.marchio-logo{width:44px;height:44px;flex:none;border-radius:9px}
.marchio b{display:block;font-family:Fraunces,serif;font-size:1.25rem;font-weight:600;letter-spacing:.02em;line-height:1.1}
.marchio small{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--platino-2)}
.link-testata{color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;border:2px solid rgba(255,255,255,.35);border-radius:99px;padding:.5rem 1rem;min-height:46px;display:inline-flex;align-items:center}
.link-testata:hover{background:rgba(255,255,255,.1)}

/* apertura */
.apertura{background:linear-gradient(135deg,var(--notte),#2b2f4a);color:#fff;padding:2.5rem 1.25rem 6rem;position:relative;overflow:hidden}
.apertura::before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,106,.28),transparent 65%)}
.apertura-in{position:relative;max-width:820px;margin:0 auto;text-align:center}
.occhiello{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);font-weight:700}
.apertura h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.08;margin-top:.8rem}
.apertura h1 em{font-style:italic;color:var(--platino-2)}
.apertura p{color:#d5d8e4;margin:1rem auto 0;max-width:46ch;font-size:1.05rem}
.passi-mini{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.6rem;list-style:none;font-weight:600;font-size:.92rem}
.passi-mini span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--oro);color:#2a1f05;margin-right:.4rem;font-weight:800;font-size:.85rem}

/* scheda modulo */
.contenitore{max-width:820px;margin:0 auto;padding:0 1.25rem}
.scheda{position:relative;background:var(--bianco);border-radius:24px;box-shadow:0 30px 60px -30px rgba(22,26,43,.35);padding:2rem;margin-top:-4rem;border:1px solid var(--bordo)}
.scheda h2{font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;margin-bottom:.3rem}
.scheda .sotto{color:var(--tenue);font-size:.92rem;margin-bottom:1.4rem}
fieldset{border:0;margin:0 0 1.6rem}
legend{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem;color:var(--accento-2);margin-bottom:.6rem}
.campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo.largo{grid-column:1/-1}
.campo label{font-weight:600;font-size:.92rem}
.campo label small{font-weight:400;color:var(--tenue)}
.campo input{min-height:56px;padding:.7rem .95rem;border:2px solid var(--bordo);border-radius:12px;background:#fbfbfd;font-size:1rem}
.campo input:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 4px rgba(109,91,208,.18)}
.campo input[aria-invalid=true]{border-color:var(--rosso);background:var(--rosso-f)}
.errore{color:var(--rosso);font-size:.82rem;font-weight:600;min-height:1em}
.minore{margin-top:.2rem}
.minore summary{cursor:pointer;font-weight:600;color:var(--accento-2);min-height:44px;display:flex;align-items:center}

.dichiaro{background:#f3f2fb;border:2px solid #dcd7f5;border-radius:16px;padding:1.2rem 1.3rem}
.dichiaro ul{margin:.4rem 0 0 1.1rem;color:var(--inchiostro);font-size:.95rem}
.dichiaro li{margin:.25rem 0}
.spunta{display:flex;gap:.8rem;align-items:flex-start;margin-top:1rem;cursor:pointer;font-weight:600}
.spunta input{width:28px;height:28px;flex:none;accent-color:var(--accento);margin-top:.1rem}
.informativa{margin-top:.8rem;border:1px solid var(--bordo);border-radius:12px;background:#fff}
.informativa summary{cursor:pointer;padding:.8rem 1rem;font-weight:600;min-height:48px;display:flex;align-items:center}
.informativa div{padding:0 1rem 1rem;font-size:.85rem;color:var(--tenue)}
.informativa h4{color:var(--inchiostro);margin-top:.7rem;font-size:.88rem}
.scelta{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem}
.scelta label{display:flex;align-items:center;gap:.7rem;min-height:58px;padding:.6rem 1rem;border:2px solid var(--bordo);border-radius:14px;cursor:pointer;font-weight:700;background:#fbfbfd}
.scelta input{width:24px;height:24px;accent-color:var(--accento)}
.scelta label:has(input:checked){border-color:var(--accento);background:#f3f2fb}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:60px;padding:.8rem 1.6rem;border-radius:14px;border:2px solid transparent;font-weight:700;font-size:1.05rem;cursor:pointer;text-decoration:none}
.btn-primario{background:var(--accento);color:#fff;box-shadow:0 12px 24px -12px rgba(109,91,208,.7)}
.btn-primario:hover{background:var(--accento-2)}
.btn-linea{border-color:var(--bordo);background:#fff;color:var(--inchiostro)}
.btn-verde{background:var(--verde);color:#fff}
.btn-rosso{background:#fff;color:var(--rosso);border-color:#eab4ae}
.btn.largo{width:100%}
.btn svg{width:1.3em;height:1.3em}
.nota{font-size:.82rem;color:var(--tenue);margin-top:.9rem;text-align:center}

/* conferma */
.conferma{text-align:center;padding:1rem 0}
.conferma .spunta-grande{width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;background:var(--verde-f);color:var(--verde);display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,.8,.2,1.4)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.conferma .spunta-grande svg{width:44px;height:44px}
.conferma h2{font-size:1.7rem}
.conferma .numero{display:inline-block;margin:1rem 0;padding:.6rem 1.2rem;border-radius:12px;background:var(--platino);font-weight:800;letter-spacing:.08em;font-size:1.15rem}
.conferma p{color:var(--tenue);max-width:44ch;margin:0 auto}
.piede{text-align:center;color:var(--tenue);font-size:.82rem;padding:2.5rem 1rem 3rem}

/* ===== pannello ===== */
.pannello{max-width:1100px;margin:0 auto;padding:1.6rem 1.25rem 3rem}
.accesso{max-width:440px;margin:3rem auto;background:#fff;border:1px solid var(--bordo);border-radius:22px;padding:2rem;box-shadow:0 30px 60px -30px rgba(22,26,43,.3)}
.accesso h1{font-family:Fraunces,serif;font-weight:600;font-size:1.6rem}
.contatori{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0 1.4rem}
.contatore{background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:1rem 1.2rem}
.contatore b{display:block;font-family:Fraunces,serif;font-size:2rem;line-height:1}
.contatore span{font-size:.85rem;color:var(--tenue);font-weight:600}
.contatore.attesa b{color:var(--giallo)}.contatore.soci b{color:var(--accento-2)}.contatore.ok b{color:var(--verde)}.contatore.no b{color:var(--rosso)}
.filtri{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.filtri button{min-height:46px;padding:.4rem 1.1rem;border-radius:99px;border:2px solid var(--bordo);background:#fff;font-weight:700;cursor:pointer;font-size:.9rem}
.filtri button[aria-pressed=true]{background:var(--notte);border-color:var(--notte);color:#fff}
.elenco{display:grid;gap:.7rem}
.strumenti{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}
.stato.daratificare{background:#e6f0ff;color:#1f4fa0}.stato.socio{background:var(--verde-f);color:var(--verde)}
.v-voce{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;border:1px solid var(--bordo);border-radius:12px;margin-bottom:.5rem;cursor:pointer}
.v-voce input{width:22px;height:22px;accent-color:var(--accento)}
.stampa .firme{display:flex;justify-content:space-between;margin-top:14mm;break-inside:avoid}
.stampa .firme div{width:42%;border-top:1px solid #000;padding-top:2mm;text-align:center}
.stampa p{margin:2.5mm 0;line-height:1.45}
.stampa h2{font-size:13pt;margin:5mm 0 2mm}
.riga{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:1rem 1.2rem;cursor:pointer;text-align:left;width:100%}
.riga:hover{border-color:var(--accento)}
.riga b{font-size:1.05rem}
.riga small{display:block;color:var(--tenue);font-size:.82rem}
.stato{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:99px;font-weight:800;font-size:.78rem;white-space:nowrap}
.stato.attesa{background:var(--giallo-f);color:var(--giallo)}.stato.approvata{background:var(--verde-f);color:var(--verde)}.stato.rifiutata{background:var(--rosso-f);color:var(--rosso)}
.vuoto{text-align:center;color:var(--tenue);padding:2rem;background:#fff;border:1px dashed var(--bordo);border-radius:16px}
.dettaglio{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:rgba(22,26,43,.55);display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow:auto}
.dettaglio[open]{display:flex}
.dettaglio-in{background:#fff;border-radius:22px;max-width:640px;width:100%;padding:1.8rem;position:relative}
.dettaglio h2{font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;padding-right:3rem}
.dettaglio dl{display:grid;grid-template-columns:11rem 1fr;gap:.55rem 1rem;margin:1.2rem 0;font-size:.95rem}
.dettaglio dt{color:var(--tenue);font-weight:600}
.dettaglio dd{margin:0;font-weight:600;word-break:break-word}
.chiudi{position:absolute;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;border:2px solid var(--bordo);background:#fff;font-size:1.3rem;cursor:pointer}
.azioni{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.azioni .btn-linea{grid-column:1/-1}

/* stampa (verbale, domanda, libro soci): stili fuori da @media print così si possono misurare prima di stampare */
.stampa{display:none;font-family:Inter,system-ui,sans-serif;font-size:10.5pt;line-height:1.4;color:#000;background:#fff}
.stampa h1{font-size:17pt;margin-bottom:2mm}
.stampa table{width:calc(100% - 2px);border-collapse:collapse;margin:5mm 0}
.stampa td{border:1px solid #999;padding:2mm 3mm;vertical-align:top}
.stampa td:first-child{width:38%;color:#444}
.timbro{display:inline-block;border:2px solid #1f7a4d;color:#1f7a4d;padding:2mm 4mm;font-weight:800;transform:rotate(-4deg);margin-top:4mm}
@media print{
  @page{size:A4;margin:12mm}
  body.con-stampa *{visibility:hidden}
  body.con-stampa>*:not(.stampa){display:none!important}
  body.con-stampa .stampa,body.con-stampa .stampa *{visibility:visible}
  body.con-stampa{background:#fff!important}
  body.con-stampa .stampa{display:block;position:static;padding:0}
}
}

@media (max-width:640px){
  .campi{grid-template-columns:minmax(0,1fr)}
  .scheda{padding:1.3rem;border-radius:20px}
  .contatori{gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  .contatore{padding:.8rem}
  .contatore b{font-size:1.6rem}
  .dettaglio dl{grid-template-columns:1fr;gap:.1rem}
  .dettaglio dd{margin-bottom:.6rem}
  .marchio small{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* versione reale: stato della domanda */
.passi-stato{display:flex;gap:.5rem;list-style:none;margin-top:1.2rem}
.passi-stato li{flex:1;text-align:center;font-size:.85rem;font-weight:700;color:var(--tenue);padding-top:.2rem;border-top:4px solid var(--bordo)}
.passi-stato li span{display:grid;place-items:center;width:30px;height:30px;margin:.5rem auto .3rem;border-radius:50%;background:var(--bordo);color:#fff}
.passi-stato li.fatto{color:var(--verde);border-color:var(--verde)}
.passi-stato li.fatto span{background:var(--verde)}
.messaggio-errore{color:var(--rosso);font-weight:700;margin-top:.8rem}
.password-nuova{font-family:ui-monospace,Menlo,monospace;font-size:1.3rem;font-weight:800;letter-spacing:.06em;background:var(--platino);padding:.6rem 1rem;border-radius:10px;display:inline-block;margin:.6rem 0}
.tabella-utenti{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border-radius:14px;overflow:hidden}
.tabella-utenti td,.tabella-utenti th{padding:.7rem .9rem;border-bottom:1px solid var(--bordo);text-align:left}
.tabella-utenti td{overflow-wrap:anywhere}
@media (max-width:560px){
  .tabella-utenti,.tabella-utenti tbody,.tabella-utenti tr,.tabella-utenti td{display:block}
  .tabella-utenti tr:first-child{display:none}
  .tabella-utenti tr{padding:.6rem 0;border-bottom:1px solid var(--bordo)}
  .tabella-utenti td{border:0;padding:.15rem .9rem}
  .tabella-utenti td:first-child{font-weight:700}
}
.sezione-pannello{margin-top:2.4rem}
.sezione-pannello h2{font-family:Fraunces,serif;font-weight:600;font-size:1.35rem;margin-bottom:.8rem}

/* firma con il dito */
.firma-box{position:relative;border:2px dashed var(--accento);border-radius:14px;background:#fff;height:190px;touch-action:none}
.firma-box canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;border-radius:12px}
.firma-box[aria-invalid=true]{border-color:var(--rosso);background:var(--rosso-f)}
.firma-linea{position:absolute;left:1.2rem;right:1.2rem;bottom:2.4rem;border-bottom:2px solid var(--bordo);font-size:.75rem;color:var(--tenue);text-align:right;padding-bottom:.2rem;pointer-events:none}
.firma-box.firmato .firma-linea{color:transparent}
.firma-img{display:block;max-width:100%;height:110px;object-fit:contain;background:#fff;border:1px solid var(--bordo);border-radius:10px;margin-top:.3rem}