/* tessere.css — la carta (tessera-render.js), la pagina pubblica, la tab. */
.tes-card{position:relative;width:100%;max-width:420px;aspect-ratio:1.586;border-radius:18px;overflow:hidden;
  background:var(--tes-sfondo,#15140f);color:var(--tes-testo,#f3ecdc);background-size:cover;background-position:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);font-family:"Manrope",system-ui,sans-serif;
  container-type:inline-size}
.tes-card::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tes-acc,#c9a227) 22%,transparent),transparent 55%),
  linear-gradient(160deg,rgba(255,255,255,.06),transparent 40%);pointer-events:none}
.tes-card.tes-foto::before{background:none}
.tes-fronte{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:6.5cqw 7cqw}
.tes-testa{display:flex;align-items:flex-start;gap:3cqw}
.tes-logo{height:11cqw;max-width:26cqw;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.tes-locale{flex:1;min-width:0}
.tes-locale-nome{font:700 3.6cqw/1.2 "Syne","Manrope",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--tes-eti,#a89f8c)}
.tes-tipo{text-align:right}
.tes-tipo-nome{font:800 6.2cqw/1.05 "Syne","Manrope",sans-serif;letter-spacing:.02em;color:var(--tes-acc,#c9a227)}
.tes-tipo-riga2{font:500 3.2cqw/1.3 "Manrope",sans-serif;color:var(--tes-eti,#a89f8c);margin-top:.6cqw}
.tes-incluso{display:flex;flex-wrap:wrap;gap:1.6cqw;margin:1cqw 0}
.tes-incluso-voce{font:600 2.9cqw/1 "Manrope",sans-serif;padding:1.4cqw 2.4cqw;border-radius:99px;border:1px solid color-mix(in srgb,var(--tes-acc,#c9a227) 55%,transparent);color:var(--tes-testo,#f3ecdc)}
.tes-piede{display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw}
.tes-titolare{flex:1;min-width:0}
.tes-eti{font:700 2.6cqw/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tes-eti,#a89f8c);margin-bottom:1.2cqw}
.tes-nome{font:800 6cqw/1.05 "Syne","Manrope",sans-serif;letter-spacing:.01em;overflow-wrap:anywhere}
.tes-size-S .tes-nome{font-size:4.8cqw}.tes-size-L .tes-nome{font-size:7.4cqw}
.tes-meta{text-align:right;flex:none;max-width:48%}
.tes-codice{font:600 3.6cqw/1 "IBM Plex Mono","JetBrains Mono",monospace;letter-spacing:.14em;color:var(--tes-testo,#f3ecdc);opacity:.9}
.tes-scad{font:500 2.8cqw/1.3 "Manrope",sans-serif;color:var(--tes-testo,#f3ecdc);margin-top:1.4cqw}
.tes-scad .tes-eti{display:inline;margin:0 .6cqw 0 0}
/* posizione del nome */
.tes-nome-alto .tes-fronte{flex-direction:column-reverse}
.tes-nome-centro .tes-fronte{justify-content:flex-start}
.tes-nome-centro .tes-piede{margin-top:auto;margin-bottom:auto}
.tes-nome-h-centro .tes-piede{flex-direction:column;align-items:center;text-align:center}
.tes-nome-h-centro .tes-meta{text-align:center}
/* stati */
.tes-timbro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);padding:2cqw 5cqw;
  border:.9cqw solid #f0476b;border-radius:2cqw;color:#f0476b;font:900 8cqw/1 "Syne",sans-serif;letter-spacing:.12em;
  background:rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tes-sospesa .tes-timbro,.tes-scaduta .tes-timbro,.tes-attesa .tes-timbro{border-color:#e0a526;color:#e0a526}
.tes-revocata .tes-fronte,.tes-sospesa .tes-fronte,.tes-scaduta .tes-fronte,.tes-attesa .tes-fronte,.tes-rifiutata .tes-fronte{opacity:.55;filter:grayscale(.6)}
.tes-stato-pill.attesa{background:rgba(224,165,38,.15);color:#e0a526}.tes-stato-pill.rifiutata{background:rgba(240,71,107,.15);color:#f0476b}
/* pagina della richiesta */
.tr-form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tr-form input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#efe9dd;font:500 15px "Manrope",sans-serif}
.tr-form label.ck{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#a89f8c;line-height:1.5}
.tr-form label.ck input{width:auto;margin-top:2px}
.tr-ok{max-width:420px;text-align:center;margin-top:24px;font-size:15px;line-height:1.6}
.tr-ok b{color:var(--accent,#c9a227)}
.tr-intro{max-width:420px;text-align:center;font-size:14px;line-height:1.55;color:#a89f8c;margin:10px 0 0}
.tr-da{max-width:420px;text-align:center;font-size:13px;color:var(--accent,#c9a227);margin-top:8px}
.tr-err{color:#f0476b;font-size:13px;text-align:center}
/* retro */
.tes-retro{position:absolute;inset:0;padding:6cqw 7cqw;background:color-mix(in srgb,var(--tes-sfondo,#15140f) 88%,#000);display:flex;flex-direction:column;gap:2cqw;overflow:hidden}
.tes-retro-testo{font:500 3.3cqw/1.45 "Manrope",sans-serif}
.tes-retro-incluso{margin:0;padding-left:4cqw;font:600 3.3cqw/1.5 "Manrope",sans-serif;color:var(--tes-acc,#c9a227)}
.tes-retro-ben{font:400 3cqw/1.45 "Manrope",sans-serif;color:var(--tes-eti,#a89f8c)}
.tes-retro-piede{margin-top:auto;font:700 2.8cqw/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tes-eti,#a89f8c)}
.tes-mostra-retro .tes-fronte{display:none}
/* QR */
.tes-qr{width:220px;height:220px;max-width:70vw;max-height:70vw;padding:10px;background:#fff;border-radius:14px;box-sizing:border-box;margin:0 auto}
.tes-qr svg{width:100%;height:100%;display:block}

/* ---- pagina pubblica tessera.php ---- */
body.pag-tessera,body.pag-tessera *{box-sizing:border-box}
body.pag-tessera{margin:0;min-height:100dvh;width:100%;background:#0d0c0a;color:#efe9dd;font-family:"Manrope",system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px))}
.tp-testa{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px;text-align:center}
.tp-logo{height:44px;object-fit:contain}
.tp-locale{font:700 12px/1 "Manrope",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a89f8c}
.tp-tit{font:800 22px/1.15 "Syne",sans-serif}
.tp-card,.tp-hint,.tp-stato,.tp-azioni{width:100%;max-width:420px}
.tp-qr-box{margin:18px 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tp-cod{font:600 20px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;color:var(--accent,#c9a227)}
.tp-hint{max-width:420px;text-align:center;font-size:13.5px;line-height:1.55;color:#a89f8c;margin:10px 0 0}
.tp-stato{max-width:420px;width:100%;margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5;text-align:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.tp-stato.brutto{border-color:#f0476b;color:#f0476b;background:rgba(240,71,107,.08)}
.tp-stato.attenzione{border-color:#e0a526;color:#e0a526;background:rgba(224,165,38,.08)}
.tp-azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;max-width:420px}
.tp-btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#efe9dd;padding:11px 16px;border-radius:12px;font:600 14px/1 "Manrope",sans-serif;cursor:pointer;text-decoration:none}
.tp-btn.pieno{background:var(--accent,#c9a227);border-color:var(--accent,#c9a227);color:#15140f}
.tp-piede{margin-top:auto;padding-top:24px;font-size:12px;color:#6f675a;text-align:center}
.tp-vuoto{text-align:center;margin-top:12vh}
.tp-vuoto h1{font:800 22px/1.2 "Syne",sans-serif;margin:12px 0 6px}
.tp-vuoto p{color:#a89f8c;line-height:1.5}
@media (prefers-reduced-motion:no-preference){ .tes-card{transition:transform .25s ease} }

/* ---- nella tab del gestionale ---- */
.tes-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:10px}
.tes-mini{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel2);cursor:pointer;transition:border-color .12s}
.tes-mini:hover,.tes-mini.sel{border-color:var(--accent)}
.tes-mini .tes-card{max-width:100%;box-shadow:none}
.tes-mini-nome{margin-top:8px;font-weight:700;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tes-mini-nome small{color:var(--muted);font-weight:400}
.tes-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px;margin-top:10px}
.tes-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.tes-form label>input,.tes-form label>select,.tes-form label>textarea{font-size:14px;color:var(--txt)}
.tes-form label.largo{grid-column:1/-1}
.tes-colore{display:flex;align-items:center;gap:8px}
.tes-colore input[type=color]{width:42px;height:32px;padding:2px;min-height:32px}
.tes-colore input[type=text]{width:100px;font-family:var(--mono)}
.tes-due{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.tes-due{grid-template-columns:1fr}}
.tes-anteprima{position:sticky;top:12px}
.tes-anteprima .tes-card{margin:0 auto}
.tes-stato-pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tes-stato-pill.attiva{background:rgba(49,192,138,.15);color:#31c08a}
.tes-stato-pill.sospesa,.tes-stato-pill.scaduta{background:rgba(224,165,38,.15);color:#e0a526}
.tes-stato-pill.revocata{background:rgba(240,71,107,.15);color:#f0476b}
.tes-azioni-riga{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.tes-azioni-riga button{padding:3px 8px;font-size:12px}

/* ---- area del cliente ---- */
.area-tessere{margin:16px 0}
.area-tessere-tit{font:800 16px/1.2 "Syne",sans-serif;margin-bottom:10px}
.area-tessera{margin-bottom:14px}
.area-tessera .tes-card{margin:0 auto}
.area-tessera-sub{font-size:13px;color:#a89f8c;margin:8px 0 0;text-align:center}

/* ---- mockup dei pass nel wallet (stessi dati del design) ---- */
.wk{width:100%;max-width:340px;margin:0 auto;border-radius:14px;overflow:hidden;background:var(--tes-sfondo,#15140f);color:var(--tes-testo,#f3ecdc);
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08);font-family:-apple-system,"Manrope",system-ui,sans-serif;container-type:inline-size}
.wk .wk-eti{display:block;font:600 2.9cqw/1.2 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--tes-eti,#a89f8c);margin-bottom:.8cqw}
.wk b{font-weight:600}
.wk-strip{height:32.8cqw;background-size:cover;background-position:center}
.wk-strip-vuota{background:linear-gradient(120deg,color-mix(in srgb,var(--tes-acc,#c9a227) 70%,#000),color-mix(in srgb,var(--tes-acc,#c9a227) 25%,var(--tes-sfondo,#15140f)))}
.wk-qr{padding:4cqw 5cqw 5cqw;display:flex;justify-content:center}
.wk-qr .tes-qr{width:38cqw;height:38cqw;padding:2cqw;border-radius:2.5cqw;margin:0}
/* Apple: storeCard */
.wk-a-testa{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;padding:4cqw 5cqw}
.wk-a-logo{height:8cqw;max-width:24cqw;object-fit:contain}
.wk-a-org{font:700 3.6cqw/1.2 inherit;letter-spacing:.04em;text-transform:uppercase;color:var(--tes-eti,#a89f8c)}
.wk-a-hdr{text-align:right}.wk-a-hdr b{font:600 4.2cqw/1.1 "IBM Plex Mono",monospace;letter-spacing:.1em}
.wk-a-primario{padding:5cqw 5cqw 2cqw}.wk-a-primario b{font:700 8cqw/1.05 "Syne",inherit;display:block}
.wk-a-sec{display:flex;gap:6cqw;padding:2cqw 5cqw 0}.wk-a-sec b{font-size:3.8cqw}
.wk-a-piede{text-align:center;font:600 3.4cqw/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:0 0 5cqw;color:var(--tes-eti,#a89f8c)}
/* Google: Generic */
.wk-google{border-radius:16px}
.wk-g-testa{display:flex;align-items:center;gap:3cqw;padding:4cqw 5cqw 0}
.wk-g-logo{width:9cqw;height:9cqw;border-radius:50%;object-fit:contain;background:#fff;padding:1cqw;box-sizing:border-box}
.wk-g-issuer{font:500 3.8cqw/1.2 inherit}
.wk-g-titolo{padding:3cqw 5cqw 0;font:700 7.5cqw/1.1 "Syne",inherit;color:var(--tes-acc,#c9a227)}
.wk-g-sub{padding:1cqw 5cqw 0;font:500 4.6cqw/1.2 inherit}
.wk-g-campi{display:flex;gap:6cqw;padding:4cqw 5cqw 0}.wk-g-campi b{font-size:3.8cqw}
.wk-g-piede{padding:3cqw 5cqw 4cqw;font:500 3.3cqw/1.2 inherit;color:var(--tes-eti,#a89f8c)}

/* ---- editor del design: zone di trascinamento, campioni, viste ---- */
.tes-gruppo{border:1px solid var(--line);border-radius:10px;margin-top:10px;background:var(--panel2)}
.tes-gruppo>summary{cursor:pointer;padding:9px 12px;font-weight:700;font-size:13px;list-style:none;display:flex;justify-content:space-between}
.tes-gruppo>summary::after{content:"▾";color:var(--muted)}.tes-gruppo[open]>summary::after{content:"▴"}
.tes-gruppo>div{padding:4px 12px 12px}
.tes-campioni{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tes-campione{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0;min-height:0}
.tes-campione:hover{transform:scale(1.15)}
.tes-drop{border:2px dashed var(--line);border-radius:10px;padding:10px;text-align:center;cursor:pointer;position:relative;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:border-color .12s,background .12s;background:var(--panel)}
.tes-drop.sopra{border-color:var(--accent);background:var(--accent-glow,rgba(205,163,73,.12))}
.tes-drop img{max-width:100%;max-height:90px;border-radius:6px;object-fit:contain}
.tes-drop .hint{margin:0}
.tes-drop-azioni{display:flex;gap:6px;justify-content:center}
.tes-drop-azioni button{padding:2px 8px;font-size:11px}
.tes-immagini{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tes-viste{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.tes-viste button{padding:4px 10px;font-size:12px}
.tes-viste .spazio{flex:1}
.tes-palco{padding:22px 14px;border-radius:12px;display:flex;justify-content:center;background:#e8e4dc;transition:background .15s}
.tes-palco.scuro{background:#111}
.tes-pieno{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.tes-pieno .tes-card{max-width:min(92vw,900px);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.tes-pieno .wk{max-width:min(92vw,420px)}
.tes-pieno-chiudi{position:fixed;top:14px;right:16px;font-size:26px;color:#fff;background:transparent;border:0;cursor:pointer}
input[type=range].tes-range{width:100%;min-height:24px;padding:0;background:transparent;border:0}