/* Modulo «Demo in 1 Clic» - stili. Usa solo le variabili della palette della shell (var(--pri), var(--panel), ...).
   Questo file esiste SOLO nella build demo; nella build reale non viene copiato. */
:root{--dm-h:0px;--dm-cta:0px}
#demoTop{position:sticky;top:0;z-index:45;background:var(--panel);border-bottom:1px solid var(--line)}
.dm-bar{display:flex;gap:10px;align-items:center;padding:6px 14px;font-size:13px;min-height:40px}
.dm-badge{background:var(--warn);color:#fff;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:999px;font-size:12px;white-space:nowrap}
.dm-bar .dm-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
.dm-bar .grow{flex:1}
.dm-install{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 14px;background:rgba(77,163,255,.14);border-top:1px solid var(--line);font-size:13.5px}
.dm-install[hidden],#dmCta[hidden]{display:none}
.dm-install b{font-weight:600}
.dm-install .grow{flex:1;min-width:180px}
#side{top:var(--dm-h);height:calc(100vh - var(--dm-h))}
#top{top:var(--dm-h)}
@media(max-width:900px){#side{top:var(--dm-h);height:calc(100dvh - var(--dm-h))}}

/* filigrana DEMO: non intercetta i clic, resta anche in stampa */
#dmWm{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='200'><text x='50%25' y='50%25' text-anchor='middle' font-family='Arial,sans-serif' font-size='44' font-weight='700' fill='rgba(128,128,128,0.11)' transform='rotate(-24 130 100)'>DEMO</text></svg>")}

/* invito in basso (CTA): discreto, chiudibile */
#dmCta{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:12px;z-index:46;display:flex;gap:10px;align-items:center;
  max-width:min(720px,calc(100vw - 24px));background:var(--panel);color:var(--tx);border:1px solid var(--pri);border-radius:12px;padding:8px 10px 8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.22);font-size:14px}
#dmCta .dm-x{background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1}
body.dm-has-cta #view{padding-bottom:calc(60px + var(--dm-cta))}
#toast{bottom:calc(16px + var(--dm-cta))}
@media(max-width:640px){#dmCta{flex-wrap:wrap;justify-content:center;bottom:8px;font-size:13.5px}.dm-bar .dm-long,.dm-bar .dm-txt{display:none}}

/* finestre: registrazione, percorso guidato, scadenza */
.dm-ovl{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;z-index:80;overflow:auto}
.dm-box{background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:14px;padding:20px 22px;width:min(520px,100%);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.dm-box h2{margin:0 0 6px;font-size:20px}
.dm-box p{margin:6px 0}
.dm-box .fld{margin:10px 0;display:flex;flex-direction:column;gap:4px}
.dm-box .fld label{font-size:13px;color:var(--mut)}
.dm-box .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.dm-box .two{grid-template-columns:1fr}}
.dm-box .chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:8px 0;line-height:1.35}
.dm-box .chk input{margin-top:3px;flex:none}
.dm-box .small{font-size:12.5px;color:var(--mut)}
.dm-box .err{color:var(--crit);font-size:13.5px;min-height:1.2em}
.dm-box .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.dm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.dm-steps{display:flex;gap:6px;margin:0 0 10px}
.dm-steps i{flex:1;height:4px;border-radius:3px;background:var(--line)}.dm-steps i.on{background:var(--pri)}
.dm-note{border-left:3px solid var(--warn);padding:6px 10px;background:rgba(255,176,32,.12);border-radius:6px;font-size:13px;margin:10px 0}
@media print{#demoTop,#dmCta{display:none!important}}