/* Demo interattiva di una web app dentro una pagina progetto.
   I dati mostrati sono inventati: nessun dato reale di clienti o fornitori. */
.project-demo {
  --k: 1px;
  --body: var(--font-body);
  --display: var(--font-heading);
  --ease: cubic-bezier(.2, .7, .2, 1);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.project-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.project-demo-head p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.project-demo-head .project-demo-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.project-demo-fallback { display: none; }

.sa{margin-top:calc(18*var(--k))}
.sa-win{--sr:#E2342B;--g1:#1E1C24;--g2:#5E5A69;--g3:#8A8596;--bd:#E6E4EB;position:relative;height:calc(600*var(--k));border-radius:calc(20*var(--k));overflow:hidden;background:#F6F5F8;color:var(--g1);font-family:var(--body);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 calc(30*var(--k)) calc(80*var(--k)) rgba(0,0,0,.5);display:flex;flex-direction:column}
.sa-win button{font:inherit;cursor:pointer;color:inherit}
.sa-win input,.sa-win textarea{font:inherit;color:var(--g1)}
.sa-top{display:flex;align-items:center;gap:calc(12*var(--k));padding:calc(12*var(--k)) calc(24*var(--k));background:#fff;border-bottom:1px solid #ECEAF0}
.sa-logo svg{width:calc(28*var(--k));height:calc(28*var(--k));fill:var(--sr);display:block}
.sa-title{font-size:calc(21*var(--k));font-weight:700}
.sa-tag{margin-left:auto;font-size:calc(12*var(--k));letter-spacing:.1em;text-transform:uppercase;color:var(--g3)}
.sa-btn{border:1px solid #E2E0E7;background:#fff;border-radius:calc(10*var(--k));padding:calc(8*var(--k)) calc(14*var(--k));font-size:calc(15*var(--k))!important;font-weight:600;transition:border-color .2s,background .2s,transform .15s}
.sa-btn:hover{border-color:var(--sr);color:var(--sr)}
.sa-btn:active{transform:scale(.97)}
.sa-btn.red{background:var(--sr);border-color:var(--sr);color:#fff!important}
.sa-btn.red:hover{background:#C72A22}
.sa-btn.on{background:var(--g1);border-color:var(--g1);color:#fff!important}
.sa-app{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(12*var(--k));padding:calc(16*var(--k)) calc(24*var(--k)) calc(18*var(--k))}
.sa-app[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.sa-app:not([hidden]){animation:rise .4s var(--ease) both}}
.sa-row{display:flex;align-items:center;gap:calc(14*var(--k))}
.sa-kpis{display:grid;gap:calc(12*var(--k))}
.sa-kpis.k3{grid-template-columns:repeat(3,calc(230*var(--k)))}
.sa-kpis.k4{grid-template-columns:repeat(4,1fr)}
.sa-k{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10*var(--k));padding:calc(10*var(--k)) calc(16*var(--k));background:#fff;border:1px solid var(--bd);border-radius:calc(14*var(--k));text-align:left;transition:box-shadow .2s,transform .2s}
button.sa-k:hover{transform:translateY(-2px)}
.sa-k.sel{box-shadow:0 0 0 2px currentColor}
.sa-k span{font-size:calc(14*var(--k));color:var(--g2)}
.sa-k b{font-family:var(--display);font-size:calc(28*var(--k));transition:transform .3s var(--ease)}
.sa-k b.bump{transform:scale(1.3)}
.sa-k.red{border-color:#F2B8B4;color:var(--sr)}.sa-k.red b{color:var(--sr)}
.sa-k.amb{border-color:#F1D79A;color:#D69A00}.sa-k.amb b{color:#D69A00}
.sa-k.grn{border-color:#A9DDBC;color:#1F9D55}.sa-k.grn b{color:#1F9D55}
.sa-k.blu{border-color:#B6CBF3}.sa-k.blu b{color:#2F67D8}
.sa-sub{display:flex;gap:calc(6*var(--k));margin-left:auto}
.sa-sub button{border:1px solid transparent;background:#ECEAF0;border-radius:calc(10*var(--k));padding:calc(8*var(--k)) calc(16*var(--k));font-size:calc(15*var(--k));color:var(--g2)!important}
.sa-sub button.on{background:#fff;border-color:var(--sr);color:var(--g1)!important;font-weight:600}
.sa-view{display:none;flex:1;min-height:0}
.sa-view.on{display:grid}
.sa-view[data-v="t"]{grid-template-columns:calc(430*var(--k)) 1fr;gap:calc(14*var(--k))}
.sa-lcol{display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid var(--bd);border-radius:calc(14*var(--k));overflow:hidden}
.sa-tools{display:flex;align-items:center;gap:calc(8*var(--k));padding:calc(10*var(--k)) calc(12*var(--k));border-bottom:1px solid #F0EEF3}
.sa-q{flex:1;min-width:0;border:1px solid #E2E0E7;border-radius:calc(8*var(--k));padding:calc(7*var(--k)) calc(10*var(--k));font-size:calc(14*var(--k))!important;background:#FCFCFD;outline:none}
.sa-q:focus{border-color:var(--sr)}
.sa-fl{font-size:calc(11*var(--k));letter-spacing:.06em;text-transform:uppercase;color:var(--sr);cursor:pointer;white-space:nowrap}
.sa-lh{display:flex;align-items:baseline;gap:calc(6*var(--k));padding:calc(8*var(--k)) calc(14*var(--k)) calc(4*var(--k));font-size:calc(14*var(--k))}
.sa-lh span{color:var(--g3)}
.sa-list{flex:1;overflow:auto}
.sa-tk{display:grid;grid-template-columns:auto 1fr auto;gap:calc(2*var(--k)) calc(12*var(--k));width:100%;text-align:left;border:0;border-bottom:1px solid #F0EEF3;background:#fff;padding:calc(10*var(--k)) calc(14*var(--k))}
.sa-tk:hover{background:#FAF9FC}
.sa-tk.on{background:#F3F6FE;box-shadow:inset 3px 0 0 #2F67D8}
.sa-tk.new{animation:sanew 1.6s var(--ease)}
@keyframes sanew{0%{background:#FDE3E1;transform:translateX(-12px);opacity:0}25%{opacity:1;transform:none}100%{background:#fff}}
.sa-tk i{grid-row:1/3;align-self:start;margin-top:calc(6*var(--k));width:calc(10*var(--k));height:calc(10*var(--k));border-radius:50%;background:#D69A00}
.sa-tk i.s-ch{background:#1F9D55}.sa-tk i.s-ap{background:var(--sr)}
.sa-tk b{font-size:calc(15*var(--k))}
.sa-tk em{font-style:normal;font-size:calc(13*var(--k));color:var(--g3);text-align:right}
.sa-tk span{grid-column:2/4;font-size:calc(14*var(--k));color:var(--g2)}
.sa-tk span strong{color:var(--g1);font-weight:600}
.sa-empty{padding:calc(20*var(--k));font-size:calc(14*var(--k));color:var(--g3)}
.sa-det{overflow:auto;background:#fff;border:1px solid var(--bd);border-radius:calc(14*var(--k));padding:calc(16*var(--k)) calc(20*var(--k));display:flex;flex-direction:column;gap:calc(12*var(--k))}
.sa-dh{display:flex;align-items:baseline;gap:calc(14*var(--k))}
.sa-dh b{font-size:calc(22*var(--k))}
.sa-dh span{font-size:calc(14*var(--k));color:var(--g3)}
.sa-badge{margin-left:auto;padding:calc(5*var(--k)) calc(12*var(--k));border-radius:99px;font-size:calc(13*var(--k));font-weight:600;color:#fff!important;background:#D69A00;transition:background .3s}
.sa-badge.s-ch{background:#1F9D55}.sa-badge.s-ap{background:var(--sr)}
.sa-f{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(9*var(--k)) calc(12*var(--k))}
.sa-f>div{display:grid;gap:calc(4*var(--k));align-content:start}
.sa-f>div.w2{grid-column:span 2}
.sa-f label{font-size:calc(12*var(--k));color:var(--g3);text-transform:uppercase;letter-spacing:.06em}
.sa-f p,.sa-f input,.sa-f textarea{margin:0;padding:calc(7*var(--k)) calc(10*var(--k));border:1px solid var(--bd);border-radius:calc(8*var(--k));font-size:calc(14.5*var(--k))!important;background:#FCFCFD;line-height:1.4}
.sa-f input,.sa-f textarea{background:#fff;border-color:#D9D6DF;outline:none;width:100%;box-sizing:border-box}
.sa-f input:focus,.sa-f textarea:focus{border-color:var(--sr);box-shadow:0 0 0 3px rgba(226,52,43,.12)}
.sa-f textarea{resize:none;height:calc(36*var(--k))}
.sa-ai{display:inline-flex;align-items:center;gap:calc(4*var(--k));font-size:calc(11*var(--k));font-weight:700;color:#7C3AED;background:#F1EAFE;border-radius:99px;padding:calc(2*var(--k)) calc(8*var(--k));margin-left:calc(6*var(--k));text-transform:none;letter-spacing:0}
.sa-st{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8*var(--k))}
.sa-st>span{font-size:calc(14*var(--k));font-weight:600;margin-right:calc(4*var(--k))}
.sa-st button{border:1px solid #E2E0E7;background:#fff;border-radius:calc(8*var(--k));padding:calc(7*var(--k)) calc(13*var(--k));font-size:calc(14*var(--k))}
.sa-st button:hover{border-color:#B9B5C4}
.sa-st button.on[data-s="ap"]{background:var(--sr);border-color:var(--sr);color:#fff}
.sa-st button.on[data-s="lav"]{background:#D69A00;border-color:#D69A00;color:#fff}
.sa-st button.on[data-s="ch"]{background:#1F9D55;border-color:#1F9D55;color:#fff}
.sa-st .sa-btn{margin-left:auto}
.sa-view[data-v="a"]{grid-template-rows:auto 1fr;gap:calc(12*var(--k))}
.sa-tot{display:grid;grid-template-columns:1fr 1fr;gap:calc(14*var(--k))}
.sa-tot div{background:#fff;border:1px solid var(--bd);border-radius:calc(14*var(--k));padding:calc(10*var(--k)) calc(20*var(--k));display:flex;align-items:baseline;justify-content:space-between}
.sa-tot span{font-size:calc(15*var(--k));color:var(--g2)}
.sa-tot b{font-family:var(--display);font-size:calc(26*var(--k));color:var(--sr);transition:transform .3s}
.sa-tot b[data-t="c2"]{color:#2F67D8}
.sa-charts{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(14*var(--k));min-height:0}
.sa-card{background:#fff;border:1px solid var(--bd);border-radius:calc(14*var(--k));padding:calc(12*var(--k)) calc(20*var(--k));display:flex;flex-direction:column;min-height:0}
.sa-card h4{margin:0 0 calc(8*var(--k));font-size:calc(16*var(--k));display:flex;align-items:baseline;gap:calc(10*var(--k))}
.sa-card h4 small{font-weight:400;font-size:calc(12*var(--k));color:var(--g3)}
.sa-bars{flex:1;display:flex;align-items:flex-end;gap:calc(10*var(--k));border-bottom:1px solid #D9D6DF;padding:calc(30*var(--k)) calc(6*var(--k)) 0;min-height:0}
.sa-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;cursor:default}
.sa-bar>div{display:flex;align-items:flex-end;gap:calc(3*var(--k));height:100%;width:100%;justify-content:center}
.sa-bar i{width:calc(18*var(--k));border-radius:calc(4*var(--k)) calc(4*var(--k)) 0 0;background:var(--sr);height:0;transition:height .9s var(--ease),filter .2s}
.sa-bar i.b{background:#2F67D8}
.sa-bar:hover i{filter:brightness(1.15)}
.sa-bar small{position:absolute;bottom:calc(-22*var(--k));font-size:calc(11*var(--k));color:var(--g2);white-space:nowrap}
.sa-bar .tip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--g1);color:#fff;font-size:calc(12*var(--k));line-height:1.4;padding:calc(6*var(--k)) calc(9*var(--k));border-radius:calc(6*var(--k));white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2}
.sa-bar:hover .tip{opacity:1;transform:translateX(-50%)}
.sa-bar.hl i{box-shadow:0 0 0 3px rgba(124,58,237,.5)}
.sa-leg{margin:calc(28*var(--k)) 0 0;font-size:calc(13*var(--k));color:var(--g2);display:flex;align-items:center;gap:calc(8*var(--k))}
.sa-leg i{width:calc(12*var(--k));height:calc(12*var(--k));border-radius:3px;background:var(--sr)}.sa-leg i.b{background:#2F67D8;margin-left:calc(12*var(--k))}
.sa-pie-w{flex:1;display:flex;align-items:center;gap:calc(24*var(--k));min-height:0}
.sa-pie{width:calc(220*var(--k));aspect-ratio:1;border-radius:50%;flex:none;transform:rotate(-90deg) scale(.6);opacity:0;transition:transform .9s var(--ease),opacity .6s;position:relative}
.sa-pie.go{transform:rotate(0) scale(1);opacity:1}
.sa-pie::after{content:"";position:absolute;inset:28%;border-radius:50%;background:#fff}
.sa-pl{list-style:none;margin:0;padding:0;display:grid;gap:calc(3*var(--k));font-size:calc(14*var(--k))}
.sa-pl li button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:calc(8*var(--k));width:100%;padding:calc(3*var(--k)) calc(8*var(--k));border-radius:6px}
.sa-pl li button:hover{background:#F3F2F6}
.sa-pl i{width:calc(12*var(--k));height:calc(12*var(--k));border-radius:3px}
.sa-pl b{margin-left:auto;padding-left:calc(14*var(--k))}
@keyframes sablink{50%{opacity:.25}}
.sa-toast{position:absolute;left:50%;bottom:calc(18*var(--k));transform:translate(-50%,20px);background:var(--g1);color:#fff;font-size:calc(15*var(--k));padding:calc(10*var(--k)) calc(18*var(--k));border-radius:calc(12*var(--k));box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:5;white-space:nowrap}
.sa-toast.on{opacity:1;transform:translate(-50%,0)}
.sa-toast b{color:#C4B5FD}

@keyframes rise {
  from { opacity: .3; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .project-demo { padding: 0 24px 60px; }
  .project-demo-head p { display: none; }
  .project-demo-live { display: none; }
  .project-demo-fallback { display: block; }
  .project-demo-fallback img {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  }
  .project-demo-fallback p {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
  }
}

@media (max-width: 600px) {
  .project-demo { padding: 0 16px 48px; }
}