/* Magazzino WE PLAY — foglio di stile unico.

   Identità presa dal logo e dal sito del club:
     oro   #EDCC49   il colore del marchio: azioni principali e segnaposto
     nero  #111815   il fondo scuro, un nero con una punta di verde campo
     Rubik + Poppins, ospitati in locale (il programma gira anche senza internet)

   Regola del colore: l'oro è del marchio, non degli stati. Gli stati della
   merce (libera, poca, finita, prenotata) hanno colori loro, scelti per non
   confondersi con l'oro. Tutto il resto è grafite. */

@import url('font.css');

:root{
  --oro:#EDCC49; --oro-chiaro:#FCD83C; --oro-scuro:#9A7B0B; --oro-tenue:#FBF3D6;
  --ground:#F4F5F3; --sup:#fff; --sup2:#EDEFEC; --sup3:#E2E6E1;
  --linea:#DEE2DC; --linea2:#C3CAC2;
  --ink:#16201B; --ink2:#4C5852; --ink3:#7B857F;
  --scuro:#111815; --scuro2:#1B2621; --scuro3:#2A3630;
  --ok:#0F7A4F; --ok-b:#E1F2E9; --ok-l:#7FC7A3;
  --warn:#A65313; --warn-b:#FBEADF; --warn-l:#DC9C63;
  --bad:#A32B21; --bad-b:#FAE5E3; --bad-l:#DE8C83;
  --info:#1F5C8F; --info-b:#E4EDF6; --info-l:#8AB4D7;
  --r:14px; --r-sm:10px;
  --ombra:0 1px 2px rgba(17,24,21,.05), 0 8px 22px rgba(17,24,21,.06);
  --ombra-alta:0 24px 60px rgba(17,24,21,.28);
  --barra:58px;
  --titolo:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --testo:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0D1310; --sup:#141C18; --sup2:#1B241F; --sup3:#242E28;
    --linea:#232E28; --linea2:#36423B;
    --ink:#E6EBE7; --ink2:#A4AFA9; --ink3:#7B857F;
    --scuro:#0A0F0D; --scuro2:#141C18; --scuro3:#212B25;
    --oro-tenue:#332A0E; --oro-scuro:#EDCC49;
    --ok:#5FC894; --ok-b:#0C2C1D; --ok-l:#1E6244;
    --warn:#DE9B57; --warn-b:#2E1F10; --warn-l:#6C4A22;
    --bad:#EA8A80; --bad-b:#331612; --bad-l:#6E2F27;
    --info:#7DB3E0; --info-b:#122636; --info-l:#2C5D85;
    --ombra:0 1px 2px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.32);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:var(--testo);font-size:14.5px;line-height:1.55;
  background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,th,.btn,.voce{font-family:var(--titolo)}
body,input,select,textarea,td,th{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0 0 .35em;line-height:1.18;letter-spacing:-.02em;font-weight:600}
h2{font-size:21px} h3{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
a{color:var(--info)}
.muted{color:var(--ink2)} .faint{color:var(--ink3)}
.num{text-align:right;white-space:nowrap;font-family:var(--titolo)}
.errore{color:var(--bad);background:var(--bad-b);padding:11px 13px;border-radius:var(--r-sm);
        margin:10px 0;white-space:pre-line;border:1px solid var(--bad-l)}

/* ---------------------------------------------------------- il marchio -- */
.freccia{display:inline-block;background:var(--oro);
         -webkit-mask:url('marchio/freccia.svg') no-repeat center/contain;
         mask:url('marchio/freccia.svg') no-repeat center/contain}
.marchio{display:flex;align-items:center;gap:8px;font-family:var(--titolo);font-weight:600;
         font-size:16px;letter-spacing:-.02em;cursor:pointer;flex-shrink:0;color:#fff}
.marchio .freccia{width:11px;height:15px}
.marchio .testo{letter-spacing:.02em}

/* ------------------------------------------------------------ elementi -- */
.card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra)}
.btn{border:1px solid var(--linea2);background:var(--sup);border-radius:var(--r-sm);
     padding:9px 15px;font-weight:500;cursor:pointer;white-space:nowrap;
     display:inline-flex;align-items:center;gap:7px;transition:.13s;line-height:1.2}
.btn:hover{border-color:var(--ink3)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.btn.primary{background:var(--oro);color:#111815;border-color:var(--oro);font-weight:600}
.btn.primary:hover{background:var(--oro-chiaro);border-color:var(--oro-chiaro)}
.btn.scura{background:var(--scuro);color:#fff;border-color:var(--scuro)}
.btn.scura:hover{background:var(--scuro3);border-color:var(--scuro3)}
.btn.ok{background:var(--ok-b);color:var(--ok);border-color:transparent}
.btn.warn{background:var(--warn-b);color:var(--warn);border-color:transparent}
.btn.info{background:var(--info-b);color:var(--info);border-color:transparent}
.btn.bad{background:var(--bad-b);color:var(--bad);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--sup2);border-color:transparent}
.btn.big{padding:13px 18px;font-size:15.5px;width:100%;justify-content:center}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.ico{padding:6px 9px;font-size:15px;line-height:1}

label{display:block;margin:13px 0;font-size:12.5px;font-weight:500;color:var(--ink2)}
input,select,textarea{width:100%;padding:11px 12px;margin-top:5px;border:1px solid var(--linea2);
      border-radius:var(--r-sm);background:var(--sup);font-weight:400}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oro);outline-offset:-1px;
      border-color:transparent}
input[type=file]{padding:8px;font-size:13px}
.riga-campi{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){.riga-campi{grid-template-columns:1fr}}

.pill{display:inline-block;padding:2px 9px;border-radius:7px;font-size:11.5px;font-weight:500;
      font-family:var(--titolo);background:var(--sup2);color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--ok-b);color:var(--ok)}
.pill.warn{background:var(--warn-b);color:var(--warn)}
.pill.bad{background:var(--bad-b);color:var(--bad)}
.pill.info{background:var(--info-b);color:var(--info)}
.pill.oro{background:var(--oro-tenue);color:var(--oro-scuro)}

/* ---------------------------------------------------------------- foto -- */
.foto{background:var(--sup2);border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;
      display:grid;place-items:center;position:relative}
.foto img{width:100%;height:100%;object-fit:contain;display:block}
.foto.vuota{background:linear-gradient(150deg,var(--sup2),var(--sup3));color:var(--ink3);
            font-family:var(--titolo);font-weight:600;letter-spacing:.03em}
.foto.mini{width:44px;height:44px} .foto.mini.vuota{font-size:12px}
.foto.media{width:64px;height:64px} .foto.media.vuota{font-size:15px}
.foto.grande{width:100%;aspect-ratio:1/1} .foto.grande.vuota{font-size:32px}

/* --------------------------------------------------------------- login -- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--scuro)}
@media (max-width:860px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
.login-scena{position:relative;overflow:hidden;display:flex;flex-direction:column;
             justify-content:center;padding:clamp(28px,5vw,64px);color:#fff}
/* le linee di velocità del logo, riprese in trasparenza come texture di fondo */
.login-scena::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(102deg,transparent 46%,rgba(237,204,73,.10) 46.4%,rgba(237,204,73,.10) 48%,transparent 48.4%),
    linear-gradient(102deg,transparent 62%,rgba(237,204,73,.07) 62.3%,rgba(237,204,73,.07) 63.4%,transparent 63.8%),
    linear-gradient(102deg,transparent 74%,rgba(237,204,73,.05) 74.2%,rgba(237,204,73,.05) 75%,transparent 75.4%),
    radial-gradient(120% 90% at 12% 8%, rgba(237,204,73,.16), transparent 58%)}
.login-logo{width:min(360px,74%);height:auto;position:relative;z-index:1}
.login-claim{position:relative;z-index:1;margin:28px 0 0;max-width:32ch;
  font-family:var(--titolo);font-size:clamp(19px,2.4vw,27px);font-weight:500;line-height:1.28;
  letter-spacing:-.02em}
.login-claim b{color:var(--oro);font-weight:600}
.login-nota{position:relative;z-index:1;margin-top:16px;color:rgba(255,255,255,.45);font-size:13px}
@media (max-width:860px){
  .login-scena{padding:26px 22px 24px;align-items:center;text-align:center}
  .login-logo{width:min(250px,78%)}
  .login-claim,.login-nota{display:none}
}
.login-lato{background:var(--sup);display:grid;place-items:center;padding:clamp(24px,4vw,44px)}
.login-form{width:100%;max-width:340px}
.login-form h1{font-size:24px;margin-bottom:4px}
.login-form .sotto{color:var(--ink2);margin:0 0 20px;font-size:14px}
.login-form label{margin:14px 0}
.login-form .btn{margin-top:20px}

/* ------------------------------------------------------------ struttura - */
.topbar{position:sticky;top:0;z-index:30;background:var(--scuro);color:#fff;
        display:flex;align-items:center;gap:14px;padding:10px 16px;
        border-bottom:2px solid var(--oro)}
.cerca{position:relative;flex:1;min-width:120px;max-width:520px}
.cerca input{margin:0;background:rgba(255,255,255,.10);border-color:transparent;color:#fff;
             padding:9px 13px;border-radius:var(--r-sm)}
.cerca input::placeholder{color:rgba(255,255,255,.5)}
.cerca input:focus{background:var(--sup);color:var(--ink);outline-color:var(--oro)}
.azioni-rapide{display:flex;gap:8px}
.topbar .btn{border-color:transparent}
.utente{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.6);
        margin-left:auto}
.utente .btn.ghost{color:rgba(255,255,255,.8)}
.utente .btn.ghost:hover{background:rgba(255,255,255,.12)}

.corpo{display:flex;align-items:flex-start}

/* --- il menu ---------------------------------------------------------------
   Raggruppato per quello che stai facendo (magazzino / vendita / acquisti),
   non per ordine di creazione. I numeri accanto alle voci non sono decorazione:
   sono le cose che aspettano una risposta. */
.lato{position:sticky;top:var(--barra);width:222px;flex-shrink:0;padding:16px 12px 14px;
      display:flex;flex-direction:column;gap:18px;height:calc(100vh - var(--barra));
      overflow-y:auto;border-right:1px solid var(--linea)}
.gruppo{display:flex;flex-direction:column;gap:2px}
.gruppo.in-fondo{margin-top:auto;padding-top:14px;border-top:1px solid var(--linea)}
.gruppo-t{font-family:var(--titolo);font-size:10px;font-weight:600;letter-spacing:.13em;
          text-transform:uppercase;color:var(--ink3);padding:0 10px 6px}
.voce{display:flex;align-items:center;gap:11px;padding:9px 11px 9px 13px;border:0;
      background:transparent;border-radius:10px;font-family:var(--titolo);font-weight:500;
      color:var(--ink2);cursor:pointer;text-align:left;width:100%;font-size:14px;
      position:relative;transition:.12s}
.voce .ic{width:19px;height:19px;flex-shrink:0;opacity:.62;transition:.12s}
.voce .et{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voce:hover{background:var(--sup);color:var(--ink)}
.voce:hover .ic{opacity:.9}
.voce:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
.voce.attiva{background:var(--sup);color:var(--ink);font-weight:600;box-shadow:var(--ombra)}
.voce.attiva .ic{opacity:1;color:var(--oro-scuro)}
/* la freccia del logo segna la sezione aperta */
.voce.attiva::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);
  width:7px;height:11px;background:var(--oro);
  -webkit-mask:url('marchio/freccia.svg') no-repeat center/contain;
  mask:url('marchio/freccia.svg') no-repeat center/contain}
.conta{font-family:var(--titolo);font-size:11px;font-weight:600;min-width:20px;text-align:center;
       padding:1px 6px;border-radius:20px;background:var(--sup3);color:var(--ink2);flex-shrink:0}
.conta.info{background:var(--info-b);color:var(--info)}
.conta.warn{background:var(--warn-b);color:var(--warn)}
.conta.bad{background:var(--bad-b);color:var(--bad)}
.voce.attiva .conta{background:var(--oro-tenue);color:var(--oro-scuro)}

/* le stesse voci nel menu del telefono */
.gruppo-m{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.voce-m{display:flex;align-items:center;gap:12px;padding:12px 12px;border:0;width:100%;
        background:var(--sup2);border-radius:10px;font-family:var(--titolo);font-weight:500;
        font-size:15px;color:var(--ink);cursor:pointer;text-align:left;margin-bottom:2px}
.voce-m .ic{width:20px;height:20px;opacity:.6;flex-shrink:0}
.voce-m .et{flex:1}

.vista{flex:1;min-width:0;padding:20px 22px 92px;max-width:1440px}
.barra-mobile{display:none}

@media (max-width:900px){
  .lato{display:none} .azioni-rapide{display:none} .utente span{display:none}
  .vista{padding:14px 12px 92px} .topbar{padding:9px 12px;gap:10px}
  .marchio .testo{display:none}
  .barra-mobile{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;gap:8px;
      padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--sup);
      border-top:1px solid var(--linea)}
  .barra-mobile .btn{flex:1;justify-content:center;padding:12px 6px}
}

/* -------------------------------------------------------------- ricerca - */
.risultati{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(62vh,460px);
   overflow:auto;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
   box-shadow:var(--ombra-alta);z-index:50;color:var(--ink)}
.ris{display:flex;align-items:center;gap:12px;padding:9px 12px;cursor:pointer;
     border-bottom:1px solid var(--linea)}
.ris:last-child{border-bottom:0}
.ris:hover,.ris.sel{background:var(--oro-tenue)}
.ris .nome{flex:1;min-width:0}
.ris .nome b{display:block;font-size:14.5px;font-family:var(--titolo);font-weight:500;
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ris .nome small{color:var(--ink2);font-size:12.5px}
.ris .qta{text-align:right;font-family:var(--titolo);font-weight:600;font-size:17px;line-height:1.1}
.ris .qta small{display:block;font-size:11px;font-weight:500}
.vuoto{padding:28px 20px;text-align:center;color:var(--ink2)}

/* ------------------------------------------------------------ cruscotto - */
.barra-titolo{display:flex;justify-content:space-between;align-items:center;gap:12px;
              margin-bottom:16px;flex-wrap:wrap}
.griglia{display:grid;gap:14px}
.due{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.due{grid-template-columns:1fr}}
.pannello{padding:16px 18px}
.pannello h3{display:flex;justify-content:space-between;align-items:center;gap:10px;
             margin-bottom:12px}

.fascia{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:900px){.fascia{grid-template-columns:1fr}}
.stock-grande{padding:20px 22px;background:var(--scuro);border-color:transparent;color:#fff}
.stock-grande .cifre{display:flex;gap:30px;flex-wrap:wrap}
.stock-grande .voce-cifra .v{font-family:var(--titolo);font-size:40px;font-weight:600;
                             letter-spacing:-.04em;line-height:1}
.stock-grande .voce-cifra .e{font-family:var(--titolo);font-size:11px;font-weight:500;
   letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.stock-grande .voce-cifra.libero .v{color:var(--oro)}
.stock-grande .voce-cifra.pren .v{color:rgba(255,255,255,.62)}
.nastro{display:flex;height:8px;border-radius:5px;overflow:hidden;margin-top:18px;
        background:rgba(255,255,255,.12)}
.nastro i{display:block;height:100%}
.nastro .l{background:var(--oro)} .nastro .p{background:rgba(255,255,255,.42)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;
         color:rgba(255,255,255,.6)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:9px;height:9px;border-radius:3px;display:block}
.soldi{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.soldi .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.soldi .r b{font-family:var(--titolo);font-size:22px;font-weight:600;letter-spacing:-.025em}
.soldi .r span{font-size:12.5px;color:var(--ink2)}

.dafare{padding:0;overflow:hidden}
.dafare .riga{display:flex;align-items:center;gap:13px;padding:13px 18px;width:100%;
   border:0;border-bottom:1px solid var(--linea);background:transparent;cursor:pointer;
   text-align:left;font:inherit;color:inherit}
.dafare .riga:last-child{border-bottom:0}
.dafare .riga:hover{background:var(--sup2)}
.dafare .n{font-family:var(--titolo);font-weight:600;font-size:20px;min-width:34px}
.dafare .t{flex:1;min-width:0}
.dafare .t b{display:block;font-family:var(--titolo);font-weight:500;font-size:14.5px}
.dafare .t small{color:var(--ink2)}
.dafare .freccia-r{color:var(--ink3)}
.dafare .riga.ok-stato .n{color:var(--ok)}
.dafare .riga.warn-stato .n{color:var(--warn)}
.dafare .riga.bad-stato .n{color:var(--bad)}
.dafare .riga.info-stato .n{color:var(--info)}

/* -------------------------------------------------------------- tabelle - */
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);
   padding:9px 10px;border-bottom:1px solid var(--linea);white-space:nowrap;font-weight:500}
td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sup2)}
.clic{cursor:pointer}
.cella-art{display:flex;align-items:center;gap:11px;min-width:0}
.cella-art .t{min-width:0}
.cella-art b{display:block;font-family:var(--titolo);font-weight:500;white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.cella-art small{color:var(--ink2);font-size:12px}
.filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filtri input,.filtri select{width:auto;min-width:132px;margin:0;padding:8px 10px}
.filtri .spinta{margin-left:auto}

/* ------------------------------------------------------ schede articolo - */
.schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px}
.scheda{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
        overflow:hidden;cursor:pointer;transition:.14s;display:flex;flex-direction:column;
        position:relative}
.scheda:hover{border-color:var(--oro);box-shadow:var(--ombra);transform:translateY(-2px)}
.scheda .foto{border-radius:0;border-bottom:1px solid var(--linea)}
.scheda .corpo-s{padding:11px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.scheda .marca{font-family:var(--titolo);font-size:10.5px;font-weight:500;letter-spacing:.1em;
               text-transform:uppercase;color:var(--ink3)}
.scheda .nome-s{font-family:var(--titolo);font-weight:500;font-size:14px;line-height:1.28;
                min-height:2.6em}
.scheda .cod{font-size:11.5px;color:var(--ink3);margin-top:auto;padding-top:6px}
.scheda .piede{display:flex;align-items:center;justify-content:space-between;gap:8px;
               padding:9px 13px;border-top:1px solid var(--linea);background:var(--sup2)}
.scheda .disp{font-family:var(--titolo);font-weight:600;font-size:17px;line-height:1}
.scheda .disp small{font-weight:400;font-size:11px;color:var(--ink3);display:block;margin-top:2px;
                    font-family:var(--testo)}
.scheda .azioni{display:flex;gap:4px}
.badge-alto{position:absolute;top:9px;left:9px;z-index:2;box-shadow:0 1px 4px rgba(17,24,21,.12)}
@media (max-width:640px){
  .schede{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
  .scheda .corpo-s{padding:9px 10px} .scheda .piede{padding:8px 10px}
  .scheda .nome-s{font-size:13px;min-height:2.4em}
  .scheda .disp{font-size:15px}
  .filtri select,.filtri input{flex:1 1 132px;min-width:0}
}

/* --------------------------------------------------------------- modale - */
.modale{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modale-sfondo{position:absolute;inset:0;background:rgba(9,14,12,.58)}
.modale-corpo{position:relative;width:100%;max-width:540px;max-height:92vh;overflow:auto;
              padding:22px;background:var(--sup);border:1px solid var(--linea);
              border-radius:var(--r);box-shadow:var(--ombra-alta)}
.modale-corpo.larga{max-width:940px}
@media (max-width:640px){
  .modale{padding:0;place-items:end stretch}
  .modale-corpo{max-width:none;max-height:94vh;border-radius:18px 18px 0 0;border-bottom:0}
}
.chiudi{position:absolute;top:12px;right:12px;z-index:3}
.riepilogo{background:var(--sup2);border-radius:var(--r-sm);padding:12px 14px;margin:14px 0}
.riepilogo div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.riepilogo .forte{font-weight:600;font-family:var(--titolo);border-top:1px solid var(--linea2);
                  margin-top:6px;padding-top:8px}
.scelto{display:flex;align-items:center;gap:11px;background:var(--sup2);border-radius:var(--r-sm);
        padding:10px 12px;margin-bottom:8px}
.scelto .nome{flex:1;min-width:0}
.brindisi{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:200;
   background:var(--scuro);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:500;
   box-shadow:var(--ombra-alta);max-width:92vw;border-left:3px solid var(--oro)}
.brindisi.male{background:var(--bad);border-left-color:#fff}

.testa-prodotto{display:grid;grid-template-columns:214px minmax(0,1fr);gap:22px;margin-bottom:4px}
@media (max-width:640px){.testa-prodotto{grid-template-columns:1fr}}
.zona-foto{position:relative}
.zona-foto .foto{aspect-ratio:1/1;border:1px solid var(--linea)}
.zona-foto.trascina{outline:2px dashed var(--oro);outline-offset:3px}
.zona-foto .sotto{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fonte{font-size:11px;color:var(--ink3);word-break:break-word;line-height:1.35;margin-top:6px}
.dati-prodotto .r{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
                  border-bottom:1px solid var(--linea);font-size:14px}
.dati-prodotto .r:last-child{border-bottom:0}
.dati-prodotto .r span{color:var(--ink2)}
.dati-prodotto .r b{text-align:right;font-family:var(--titolo);font-weight:500}

/* -------------------------------------------------- scelta dell'articolo  */
.chip-riga{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.chip{border:1px solid var(--linea2);background:var(--sup);border-radius:20px;padding:5px 13px;
      font-family:var(--titolo);font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;
      white-space:nowrap}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--oro);color:#111815;border-color:var(--oro);font-weight:600}
.scelta-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;
                max-height:52vh;overflow-y:auto;padding:2px}
.scelta{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left;
        background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-sm);
        padding:8px;cursor:pointer;font:inherit;color:inherit;transition:.12s}
.scelta:hover{border-color:var(--oro);box-shadow:var(--ombra)}
.scelta:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.scelta .foto{border:0}
.scelta .s-nome{font-family:var(--titolo);font-weight:500;font-size:12.5px;line-height:1.25;
                margin-top:2px}
.scelta .s-var{font-size:11.5px;color:var(--ink2)}
.scelta .s-qta{align-self:flex-start;margin-top:2px}
@media (max-width:640px){
  .scelta-griglia{grid-template-columns:repeat(auto-fill,minmax(106px,1fr));max-height:46vh}
}

/* -------------------------------------------------------------- acquisti  */
.tab-riga{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px;
          overflow-x:auto}
.tab-riga button{border:0;background:transparent;padding:10px 15px;font-family:var(--titolo);
                 font-weight:500;font-size:14.5px;color:var(--ink3);cursor:pointer;
                 border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab-riga button:hover{color:var(--ink)}
.tab-riga button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--oro)}
.righe-ordine{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.riga-ordine{display:grid;grid-template-columns:44px minmax(0,1fr) 78px 92px 34px;gap:10px;
             align-items:center;background:var(--sup2);border-radius:var(--r-sm);padding:8px 10px}
.riga-ordine input{margin:0;padding:7px 9px;background:var(--sup)}
.riga-ordine .t{min-width:0}
.riga-ordine .t b{display:block;font-family:var(--titolo);font-weight:500;font-size:13.5px;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga-ordine .t small{color:var(--ink2);font-size:11.5px}
@media (max-width:640px){
  .riga-ordine{grid-template-columns:40px minmax(0,1fr) 34px;
    grid-template-areas:"f t x" "q q q";row-gap:8px}
  .riga-ordine .foto{grid-area:f} .riga-ordine .t{grid-area:t}
  .riga-ordine .via{grid-area:x}
  .riga-ordine .campo-qta,.riga-ordine .campo-costo{grid-area:q;display:flex;gap:8px;width:100%}
}
.tot-ordine{display:flex;justify-content:flex-end;gap:24px;padding:10px 2px;
            font-family:var(--titolo);font-weight:600}
.tot-ordine span{color:var(--ink2);font-weight:400;font-family:var(--testo)}
.kpi-acq{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;
         margin-bottom:18px}
.kpi-acq .card{padding:15px 17px}
.kpi-acq .e{font-size:12px;color:var(--ink2)}
.kpi-acq .v{font-family:var(--titolo);font-size:26px;font-weight:600;letter-spacing:-.03em;
            line-height:1.15;margin-top:2px}
.kpi-acq .sotto{font-size:12px;color:var(--ink3);margin-top:3px}

/* anagrafiche modificabili nelle impostazioni */
.riga-anagrafica{display:flex;align-items:center;gap:12px;padding:10px 0;
                 border-bottom:1px solid var(--linea)}
.riga-anagrafica:last-child{border-bottom:0}
.riga-anagrafica .t{flex:1;min-width:0}
.riga-anagrafica .t b{font-family:var(--titolo);font-weight:500}
.riga-anagrafica .t small{display:block;color:var(--ink3);font-size:12px}
.riga-anagrafica .azioni{display:flex;gap:4px;flex-shrink:0}

/* ------------------------------------------------------------- grafici -- */
/* Le due tinte dei dati: verificate per daltonismo e contrasto sul fondo,
   con lo script del sistema di visualizzazione, in chiaro e in scuro. */
:root{ --dato-a:#C9A420; --dato-b:#1F5C8F; }
@media (prefers-color-scheme:dark){ :root{ --dato-a:#AD8F22; --dato-b:#4682BD; } }

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tile{padding:15px 17px}
.tile .t-e{font-size:12px;color:var(--ink2)}
.tile .t-v{font-family:var(--titolo);font-size:27px;font-weight:600;letter-spacing:-.03em;
           line-height:1.15;margin-top:3px}
.tile .t-s{font-size:12px;color:var(--ink3);margin-top:3px}

.graf{margin-top:4px}
.svg-graf{width:100%;height:auto;display:block;overflow:visible}
.svg-graf .griglia{stroke:var(--linea);stroke-width:1}
.svg-graf .asse{fill:var(--ink3);font-size:10.5px;font-family:var(--titolo)}
.svg-graf .barra{transition:opacity .12s}
.svg-graf:hover .barra{opacity:.55}
.svg-graf .barra:hover{opacity:1}
.legenda-g{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);
           margin-bottom:8px}
.legenda-g span{display:flex;align-items:center;gap:6px}
.legenda-g i{width:10px;height:10px;border-radius:3px;display:block}
.sugg{position:fixed;z-index:300;background:var(--scuro);color:#fff;padding:7px 11px;
      border-radius:8px;font-size:12.5px;font-family:var(--titolo);pointer-events:none;
      box-shadow:var(--ombra-alta);white-space:nowrap}

.classifica{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.cl-riga{display:grid;grid-template-columns:minmax(0,1fr) 1.15fr auto;gap:12px;align-items:center}
.cl-nome{font-family:var(--titolo);font-weight:500;font-size:13.5px;white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis}
.cl-barra{height:9px;border-radius:5px;background:var(--sup2);overflow:hidden}
.cl-barra i{display:block;height:100%;border-radius:5px}
.cl-val{font-family:var(--titolo);font-weight:600;font-size:13.5px;text-align:right;
        white-space:nowrap}
.cl-val small{display:block;font-weight:400;font-size:11px;color:var(--ink3);
              font-family:var(--testo)}
@media (max-width:640px){
  .cl-riga{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b";row-gap:5px}
  .cl-nome{grid-area:n} .cl-val{grid-area:v} .cl-barra{grid-area:b}
}

/* avvisi dentro i moduli: il momento giusto per dirlo è prima di confermare */
.attenzione{background:var(--warn-b);border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
            padding:11px 13px;margin:12px 0;font-size:13.5px}
.attenzione.lieve{background:var(--sup2);border-left-color:var(--linea2)}
.attenzione b{font-family:var(--titolo);font-weight:600}
.attenzione small{display:block;color:var(--ink2);margin-top:7px;font-size:12.5px;line-height:1.45}
.att-riga{display:flex;align-items:center;gap:10px;justify-content:space-between;
          margin-top:7px;flex-wrap:wrap}


/* Scelta fra due strade (regime IVA): righe larghe, cliccabili tutte intere.
   Nome diverso da .scelta, che e' gia' la piastrella del selettore articoli. */
.opzioni{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.opzione{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;cursor:pointer;
  border:1px solid var(--linea);border-radius:10px;background:var(--sup2);
  font-size:14px;line-height:1.35}
.opzione:hover{border-color:var(--oro)}
.opzione.attiva{border-color:var(--oro);background:var(--oro-tenue)}
.opzione input{margin-top:2px;flex:none}
.opzione:focus-within{outline:2px solid var(--oro);outline-offset:2px}

.riga-campo{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0 12px}
.riga-campo input{width:88px}

/* Nota cliccabile sotto un numero di cui non ci si puo' ancora fidare. */
.riga-nota{display:block;width:100%;text-align:left;margin-top:8px;padding:9px 11px;
  border:1px dashed var(--linea2);border-radius:9px;background:transparent;cursor:pointer;
  font:inherit;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.riga-nota:hover{border-color:var(--oro);color:var(--ink)}

/* Tre campi corti in fila (gli identificativi di Wansport). */
.pannello .tre{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pannello .bottoni{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (max-width:560px){ .pannello .tre{grid-template-columns:1fr} }


/* Scelta del magazzino: negozio o bar. Sta in cima alla barra laterale perché
   è la prima domanda a cui rispondere — tutto quello che c'è sotto dipende da
   questa. Due pulsanti veri, non un menù a tendina: si deve vedere da lontano
   in quale dei due si sta lavorando, e sbagliarsi deve essere difficile. */
.reparti{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 10px 14px;
  padding:4px;background:var(--sup2);border:1px solid var(--linea);border-radius:11px}
.reparti .rep{padding:8px 6px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;font:inherit;font-family:var(--titolo);font-weight:500;font-size:13px;
  color:var(--ink2);letter-spacing:.01em}
.reparti .rep:hover{color:var(--ink)}
.reparti .rep.attivo{background:var(--scuro);color:var(--oro);box-shadow:var(--ombra)}
.reparti .rep:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media (prefers-color-scheme:dark){
  /* Sul fondo scuro il nero non stacca: qui l'attivo diventa oro. */
  .reparti .rep.attivo{background:var(--oro);color:#111815}
}


/* Il reparto in cui si sta, scritto accanto al marchio: da telefono la barra
   laterale è chiusa e questo resta l'unico modo di accorgersene. */
.rep-ora{margin-left:8px;padding:2px 8px;border-radius:999px;font-family:var(--titolo);
  font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.14);color:#fff}
.rep-ora[data-rep="BAR"]{background:var(--oro);color:#111815}


/* «Cosa tengo a listino»: un elenco lungo da spuntare in fretta. Righe basse,
   foto piccola per riconoscere al volo, casella grande da centrare col dito. */
.barra-scelte{display:flex;align-items:center;gap:8px;margin:10px 0 8px}
.barra-scelte .muted{margin-left:auto;font-size:12.5px}
.lista-scelte{max-height:56vh;overflow-y:auto;border:1px solid var(--linea);
  border-radius:11px;background:var(--sup)}
.scelta-riga{display:flex;align-items:center;gap:10px;padding:7px 11px;cursor:pointer;
  border-bottom:1px solid var(--linea)}
.scelta-riga:last-child{border-bottom:0}
.scelta-riga:hover{background:var(--sup2)}
.scelta-riga input{width:19px;height:19px;flex:none;accent-color:var(--oro-scuro)}
.scelta-riga img,.scelta-riga .senza-foto{width:34px;height:34px;flex:none;border-radius:7px;
  object-fit:contain;background:var(--sup2);border:1px solid var(--linea)}
.scelta-riga .sr-testo{display:flex;flex-direction:column;gap:1px;min-width:0}
.scelta-riga .sr-testo b{font-size:13.5px;font-weight:500}
.scelta-riga .sr-testo small{font-size:11.5px;color:var(--ink2)}
.scelta-riga.ha-merce{background:var(--ok-b)}
.scelta-riga.ha-merce:hover{background:var(--ok-b)}