/* ============================================================
   CAPOBANCO — motion (rev. 27 set 2026)
   Le «schermate» del gestionale disegnate in HTML: nitide a ogni
   risoluzione, leggere, indicizzabili. Il markup contiene lo STATO
   FINALE: senza JavaScript o con «riduci animazioni» si vede tutto,
   fermo. motion.js parte da lì e anima all'indietro.
   ============================================================ */
:root{
  --app-bg:#FFFFFF; --app-side:#F7F1E6; --app-riga:#FBF8F1; --app-linea:#EDE4D3;
  --ok:#2E7D57; --ok-bg:#E1EFE6; --no:#B4462F; --no-bg:#F6E1DA; --attesa:#E9E1D0;
}

/* ---------- barra di avanzamento della pagina ---------- */
.m-progresso{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--senape-fonda),var(--senape));z-index:60;pointer-events:none}
html:not(.m-on) .m-progresso{display:none}

/* ---------- la finestra dell'app ---------- */
.app{position:relative;background:var(--app-bg);border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 50px 100px -40px rgba(0,0,0,.55),0 0 0 1px rgba(43,31,18,.10);overflow:hidden;color:var(--bruno);font-size:14px;line-height:1.45;text-align:left}
.app-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;background:#F2EBDD;border-bottom:1px solid var(--app-linea)}
.app-bar i{width:10px;height:10px;border-radius:50%;background:#E0D5C1;display:block}
.app-url{margin-left:14px;flex:1;max-width:320px;height:22px;border-radius:6px;background:#FBF8F1;font-size:12px;color:var(--grigio);display:flex;align-items:center;padding:0 10px;font-variant-numeric:tabular-nums}
.app-corpo{display:grid;grid-template-columns:168px 1fr;min-height:470px}
.app-side{background:var(--app-side);border-right:1px solid var(--app-linea);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.app-side .wm{height:15px;width:auto;margin:2px 8px 16px}
.app-side .v{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:#6E6353;position:relative}
.app-side .v svg{width:16px;height:16px;flex:none}
.app-side .v.on{background:#fff;color:var(--bruno);box-shadow:0 1px 2px rgba(43,31,18,.08)}
.app-side .v.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--senape)}
.app-side .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#A89C87;font-weight:700;padding:14px 10px 6px}
.app-main{position:relative;padding:22px 24px;overflow:hidden}
.schermo{position:absolute;inset:22px 24px;display:flex;flex-direction:column;gap:14px}
.schermo.statica{position:relative;inset:auto}
.s-testa{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.s-titolo{font-family:'Yeseva One',serif;font-size:24px;line-height:1.1}
.s-sotto{font-size:12.5px;color:var(--grigio)}

/* primitive */
.m-card{border:1px solid var(--app-linea);border-radius:12px;background:#fff;padding:14px 16px}
.m-et{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);font-weight:700}
.m-big{font-family:'Yeseva One',serif;font-size:44px;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.m-mid{font-family:'Yeseva One',serif;font-size:24px;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.m-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.m-chip.su{background:var(--ok-bg);color:var(--ok)}
.m-chip.scorta{background:#FBEBCB;color:#8A5A0E;border:1px solid #F0CF8C}
.m-chip.bozza{background:#EFE6D3;color:#7A6F5E}
.m-chip.inviato{background:#E6ECF6;color:#34507F}
.m-chip.ok{background:var(--ok-bg);color:var(--ok)}
.m-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-spark{width:100%;height:64px;display:block}
.m-spark .l{fill:none;stroke:var(--senape-fonda);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.m-spark .a{fill:url(#m-grad-spark);stroke:none}
.m-spark .p{fill:var(--senape-fonda)}
.m-nota{display:flex;gap:10px;align-items:flex-start;background:#FDF6E8;border:1px solid #F0DDB5;border-radius:12px;padding:11px 13px;font-size:13px}
.m-nota img{width:26px;height:26px;border-radius:50%;flex:none}
.m-nota b{color:#8A5A0E}

/* tabella magazzino */
.m-tab{display:grid;gap:6px}
.m-riga{display:grid;grid-template-columns:1.7fr .9fr 1.4fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--app-riga);border:1px solid transparent;font-size:13.5px}
.m-riga.testa{background:transparent;padding-top:0;padding-bottom:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);font-weight:700}
.m-riga.acc{background:#FFF7E6;border-color:#F0CF8C}
.m-riga .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.m-riga .f{font-size:11.5px;color:var(--grigio);margin-left:6px;font-weight:500}
.m-riga .q{font-variant-numeric:tabular-nums;font-weight:600}
.m-barra{height:6px;border-radius:4px;background:#EFE7D7;overflow:hidden}
.m-barra i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--senape-fonda),var(--senape))}
.m-barra i.bassa{background:linear-gradient(90deg,#C0622E,#E08B3E)}
.m-bolla{display:flex;align-items:center;gap:10px;border:1px dashed #D9C8A6;border-radius:12px;padding:9px 12px;font-size:12.5px;color:var(--inchiostro);background:#fff}
.m-bolla .foto{width:34px;height:42px;border-radius:5px;background:repeating-linear-gradient(0deg,#EFE7D7 0 3px,#fff 3px 7px);border:1px solid #E3D8C3;flex:none;position:relative;overflow:hidden}
.m-bolla .foto::after{content:"";position:absolute;left:0;right:0;height:10px;background:linear-gradient(180deg,transparent,rgba(217,154,46,.55),transparent);top:-10px}
.m-bolla.legge .foto::after{animation:m-scan 1.1s ease-in-out 2}
@keyframes m-scan{to{top:42px}}

/* ordine */
.m-ord{display:grid;gap:6px}
.m-origa{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--app-riga);font-size:13.5px}
.m-origa code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--grigio)}
.m-origa .q{font-weight:700;font-variant-numeric:tabular-nums}
.m-origa.nuova{background:#FFF1D6}
.m-azioni{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:10px}
.m-btn{display:inline-flex;align-items:center;gap:6px;background:var(--notte);color:var(--crema);border-radius:9px;padding:9px 16px;font-weight:700;font-size:13px;position:relative;overflow:hidden}
.m-btn .onda{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0)}
.m-conferma{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ok);font-weight:600}

/* calendario */
.m-cal{display:grid;grid-template-columns:86px repeat(7,1fr);gap:5px;font-size:11.5px}
.m-cal .gg{text-align:center;font-weight:700;color:var(--grigio);letter-spacing:.08em;text-transform:uppercase;font-size:10px;padding-bottom:2px}
.m-cal .chi{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px}
.m-cal .chi i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:#fff}
.m-t{height:34px;border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:10.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.m-t.vuoto{background:transparent;border:1px dashed #EAE0CD}
.m-t.att{background:var(--attesa);color:#8C8069}
.m-t.ok{background:var(--ok-bg);color:var(--ok)}
.m-t.no{background:var(--no-bg);color:var(--no)}
.m-legenda{display:flex;gap:14px;font-size:11.5px;color:var(--grigio);flex-wrap:wrap}
.m-legenda span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}

/* telefono sovrapposto */
.m-tel{position:absolute;right:-4px;bottom:-8px;width:250px;border-radius:34px;padding:9px;background:linear-gradient(160deg,#3A3024,#17130E 60%);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);z-index:5}
.m-tel .sc{border-radius:26px;background:#12100C;overflow:hidden;padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px;min-height:250px;justify-content:flex-end}
.m-tel .top{display:flex;align-items:center;gap:8px;margin-bottom:auto;padding-bottom:8px;border-bottom:1px solid rgba(245,234,211,.08)}
.m-tel .top img{width:26px;height:26px;border-radius:50%}
.m-tel .top b{color:var(--crema);font-size:12.5px;display:block}
.m-tel .top span{color:#9A8E7B;font-size:10.5px}
.m-b{max-width:86%;padding:8px 11px;border-radius:14px;font-size:12.5px;line-height:1.4}
.m-b.io{align-self:flex-end;background:#3B3016;color:#F7EBD2;border-bottom-right-radius:4px}
.m-b.lui{align-self:flex-start;background:#2A2319;color:#EFE2C8;border-bottom-left-radius:4px}
.m-b.lui b{color:var(--senape)}

/* ============================================================
   «Dentro il gestionale» — la sezione a scorrimento della home
   ============================================================ */
.dentro{background:var(--notte);color:var(--crema);position:relative;overflow:hidden;padding:0}
.dentro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 520px at 75% 40%,rgba(217,154,46,.14),transparent 70%),radial-gradient(640px 480px at 10% 80%,rgba(46,75,63,.30),transparent 70%)}
.dentro .wrap{position:relative}
.dentro-in{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:56px;align-items:center;padding:110px 0 80px}
.dentro .kicker{color:var(--senape)}
.dentro .kicker::before{background:var(--senape)}
.dentro h2{color:var(--crema)}
.passi{display:grid;gap:4px;margin-top:26px;counter-reset:passo}
.passo{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(245,234,211,.10);opacity:.38;transition:opacity .35s ease}
.passo.on{opacity:1}
.passo .pn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(245,234,211,.3);display:grid;place-items:center;font-family:'Yeseva One',serif;font-size:14px;color:var(--crema);transition:background .35s,border-color .35s,color .35s}
.passo.on .pn{background:var(--senape);border-color:var(--senape);color:var(--notte)}
.passo h3{font-size:20px;color:var(--crema);margin:3px 0 4px}
.passo p{font-size:15px;color:#CBBFA8;margin:0;max-height:0;overflow:hidden;transition:max-height .45s ease}
.passo.on p{max-height:120px}
html:not(.m-on) .passo{opacity:1}
html:not(.m-on) .passo p{max-height:none}
.dentro-app{position:relative}
.dentro-app .app-main{min-height:470px}
.dentro-cap{font-size:12.5px;color:#9A8E7B;margin-top:14px;text-align:center}
/* senza animazioni: le schermate una sotto l'altra, il testo resta accanto */
html:not(.m-on) .dentro-in{align-items:start}
@media (min-width:981px){html:not(.m-on) .dentro-testo{position:sticky;top:100px}}
html:not(.m-on) .dentro-app .schermo{position:relative;inset:auto;margin-bottom:26px}
html:not(.m-on) .dentro-app .app-main{display:grid;gap:26px}
html:not(.m-on) .dentro-app .m-tel{position:relative;right:auto;bottom:auto;margin:10px auto 0}

/* ============================================================
   La mappa: il filo che si disegna
   ============================================================ */
.map-col{position:relative}
.m-filo{position:absolute;left:39px;top:74px;bottom:30px;width:2px;background:linear-gradient(var(--senape),var(--senape-fonda));transform-origin:50% 0;border-radius:2px;opacity:.7}
html:not(.m-on) .m-filo{display:none}
.m-token{position:absolute;left:32px;top:74px;width:16px;height:16px;border-radius:50%;background:var(--senape);box-shadow:0 0 0 6px rgba(217,154,46,.18),0 0 18px rgba(217,154,46,.6);z-index:2}
html:not(.m-on) .m-token{display:none}
.map-col .map-step,.map-col .map-down{position:relative;z-index:1}

/* ============================================================
   Le tre serate: un piccolo schermo vivo in ogni card
   ============================================================ */
.m-mini{border:1px solid var(--bordo);background:var(--carta);border-radius:14px;padding:12px 14px;margin:-6px 0 18px;font-size:12.5px;min-height:74px;display:grid;gap:7px}
.m-mini .rg{display:flex;justify-content:space-between;align-items:center;gap:10px}
.m-mini .m-t{height:26px;font-size:10.5px;padding:0 9px}
.m-mini .livello{height:8px;border-radius:5px;background:#EFE7D7;overflow:hidden}
.m-mini .livello i{display:block;height:100%;background:linear-gradient(90deg,#C0622E,var(--senape));border-radius:5px}
.m-mini .cifra{font-family:'Yeseva One',serif;font-size:22px;font-variant-numeric:tabular-nums}

/* ============================================================
   Fornitori: l'ordine che arriva e si conferma
   ============================================================ */
.wa .riga-o{display:block}
.m-stato-o{transition:color .3s}

/* ============================================================
   Pagine interne: schermate vive al posto delle foto
   ============================================================ */
.m-vivo .app-main{padding:20px 22px}
.m-vivo .schermo{gap:12px}
.m-vivo .app{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -40px rgba(43,31,18,.45),0 0 0 1px rgba(43,31,18,.10)}
.m-vivo .ph-tag{position:relative;left:auto;bottom:auto;display:inline-block;margin:14px 0 0 6px;z-index:3}
.m-vivo .m-origa>span:nth-child(2){display:flex;align-items:center;flex-wrap:wrap;gap:4px}

/* fornitori: i mesi di Premium riconosciuti */
.m-ref{display:grid;grid-template-columns:1.3fr 2fr auto;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;background:var(--app-riga);font-size:13.5px}
.m-ref .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-ref.off{opacity:.6}
.m-mesi{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.m-mesi i{height:10px;border-radius:3px;background:#EFE7D7}
.m-mesi i.on{background:linear-gradient(180deg,var(--senape),var(--senape-fonda))}
@media (max-width:560px){.m-ref{grid-template-columns:1fr 1.4fr}.m-ref>.s-sotto{display:none}}

/* sicurezza: il disegno dell'isolamento */
.m-iso-box{max-width:980px;margin:40px auto 0;background:#fff;border:1px solid var(--bordo);border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--ombra)}
.m-iso{width:100%;height:auto;display:block;font-family:Inter,system-ui,sans-serif}
.iso-box{fill:var(--carta);stroke:var(--bordo);stroke-width:1.5}
.iso-ln{font-family:'Yeseva One',serif;font-size:19px;fill:var(--bruno)}
.iso-ls{font-size:12.5px;fill:var(--grigio)}
.iso-et{font-size:11px;letter-spacing:.18em;font-weight:700;fill:var(--senape)}
.iso-sn{font-size:14px;font-weight:700;fill:var(--crema)}
.iso-ss{font-size:11.5px;fill:#B9A88F}
.iso-linea{fill:none;stroke:var(--senape-fonda);stroke-width:2.2;stroke-linecap:round}
.iso-pac{fill:var(--senape);filter:drop-shadow(0 0 5px rgba(217,154,46,.8));opacity:0}
.iso-no{fill:none;stroke:#B4462F;stroke-width:2.2;stroke-dasharray:7 7;stroke-linecap:round}
.iso-nl{font-size:12px;font-weight:700;fill:#B4462F}
/* sicurezza: la conferma prima di un'azione */
.m-conf-box{margin-top:18px;background:var(--notte);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:9px;max-width:440px}
.m-conf-box .m-b{font-size:14px;max-width:88%}
.m-conf-az{display:flex;gap:8px}
.m-conf-az .m-btn{background:var(--senape);color:var(--notte)}
.m-conf-az .m-btn-no{background:transparent;color:var(--crema);border:1px solid rgba(245,234,211,.25)}
@media (max-width:620px){.iso-ls,.iso-ss{display:none}.iso-ln{font-size:23px}.iso-sn{font-size:20px}.iso-et{font-size:15px}.iso-xlab{display:none}.m-iso-box{padding:14px 8px}}

/* la chat del Direttore (/prezzi): sotto ogni risposta, cosa è cambiato nel gestionale */
.m-eff{display:flex;align-items:center;gap:7px;margin-top:9px;padding:6px 10px;border-radius:9px;background:#fff;border:1px solid var(--bordo);font-size:12px;font-weight:600;color:var(--inchiostro);line-height:1.3}
.m-eff i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(46,125,87,.18)}

/* ============================================================
   Fornitori: la loro pagina, a scroll (.dentro-f)
   ============================================================ */
.m-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.m-grid4 .m-card{padding:10px 12px}
.m-grid4 .m-mid{font-size:21px}
.m-pic{font-size:11px;font-weight:700;margin-top:2px}
.m-pic.su{color:var(--ok)}
.m-badge{margin-left:auto;background:var(--senape);color:#fff;border-radius:999px;font-size:10.5px;line-height:1;padding:3px 6px}
.m-barre{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:92px;margin-top:10px}
.m-barre i{display:block;height:var(--h);border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--senape),var(--senape-fonda));transform-origin:50% 100%}
.m-barre i:last-child{background:linear-gradient(180deg,#E9B45A,var(--senape))}
.m-chip.no{background:var(--no-bg);color:var(--no)}
.m-cli{display:grid;grid-template-columns:1.5fr auto 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--app-riga);font-size:13.5px}
.m-cli .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cli .q{font-variant-numeric:tabular-nums;font-weight:600}
.m-f3-fermo{background:#FBEDE8}
.m-f4-nuovo{background:#EAF4EE}
.m-f2-cambia{background:#FFF1D6}
.m-f2-manca{background:#FBEDE8}
.m-f2-manca .m-f2-nonce{color:var(--no)}
.m-f2-prima{color:var(--grigio);font-weight:500}
.m-f2-nota{display:block;font-style:normal;font-size:11.5px;color:#8A5A0E}
.dentro-f .m-tel-f{right:6px;bottom:auto;top:40px;width:230px}
.dentro-f .m-tel-f .sc{min-height:150px}
.m-invito{position:absolute;right:0;top:44px;width:min(300px,86%);background:#fff;border:1px solid var(--app-linea);border-radius:14px;padding:14px;display:grid;gap:10px;box-shadow:0 30px 60px -25px rgba(43,31,18,.45);z-index:4}
.m-campo{display:grid;gap:3px;font-size:11.5px;color:var(--grigio)}
.m-campo b{font-weight:600;font-size:13.5px;color:var(--bruno);border:1px solid var(--app-linea);border-radius:8px;padding:7px 9px;white-space:nowrap;overflow:hidden;min-height:34px}
.m-invito .m-btn{justify-self:end}
html:not(.m-on) .m-invito{position:relative;right:auto;top:auto;width:auto;margin-top:6px}
html:not(.m-on) .dentro-f .m-tel-f{position:relative;top:auto;right:auto;margin:10px 0 0}
@media (max-width:980px){
  .m-grid4{grid-template-columns:1fr 1fr}
  .m-cli{grid-template-columns:1.4fr auto auto;gap:8px}
  .m-cli>.s-sotto{display:none}
  .dentro-f .m-tel-f{width:200px;top:30px}
}

/* ---------- la chat della home a altezza fissa su mobile ----------
   i messaggi entrano dal basso come in una chat vera; la pagina sotto non
   «salta» mentre la scena si scrive (serve alle sezioni fissate a scroll) */
@media (max-width:720px){
  html.m-on .chat .msgs{height:470px;min-height:0;overflow:hidden;justify-content:flex-end}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .dentro-in{grid-template-columns:1fr;gap:14px;padding:84px 0 24px;min-height:100vh;align-content:start}
  .dentro-testo{display:contents}
  .dentro-testo>.kicker{order:0;margin-bottom:-6px}
  .dentro-testo>h2{order:1;font-size:23px;margin:0}
  .passo h3{font-size:18px}
  .passo p{font-size:14px;line-height:1.45}
  .dentro-testo>p{display:none}
  .dentro-app{order:2}
  .passi{order:3}
  .dentro-cap{display:none}
  html:not(.m-on) .dentro-testo>p{display:block;order:1}
  .app-corpo{grid-template-columns:1fr}
  .app-side{display:none}
  .app-main,.dentro-app .app-main{min-height:370px;padding:16px}
  .schermo{inset:16px}
  .m-tel{width:210px;right:-2px;bottom:-4px}
  .m-tel .sc{min-height:210px}
  .passo:not(.on){display:none}
  html:not(.m-on) .passo{display:grid}
  .passo{border-top:0;padding:0}
  .passi{margin-top:14px}
  .m-riga{grid-template-columns:1.5fr .8fr 1fr auto;gap:8px;padding:8px 10px;font-size:12.5px}
  .m-big{font-size:36px}
  .m-cal{grid-template-columns:64px repeat(7,1fr);gap:3px}
  .m-cal .chi span{display:none}
  .m-t{height:28px;font-size:9.5px}
}
@media (max-width:560px){
  .m-grid3{grid-template-columns:1fr 1fr}
  .m-grid3>:nth-child(3){display:none}
  .m-riga .f{display:none}
  .app-main,.dentro-app .app-main{min-height:380px}
  .m-tel .sc{min-height:180px}
  .m-tel{width:196px}
}
@media (prefers-reduced-motion:reduce){
  .passo p{transition:none}
  .m-bolla.legge .foto::after{animation:none}
}

.m-grid4 .m-mid{white-space:nowrap}
@media (min-width:900px){.m-grid4 .m-mid{font-size:clamp(17px,1.5vw,21px)}}