/* Gardenmac — gestionale. Registro: bianco, ordinato, poco.
   Un solo colore d'azione (il blu del sito). I colori delle aree servono a dire dove sei. */
:root{
  --bianco:#fff; --fondo:#fff; --grigio:#f5f5f7; --riga:#e8e8ed;
  --testo:#1d1d1f; --testo2:#6e6e73; --testo3:#a1a1a6;
  --blu:#5a31f4; --blu-tenue:#f1ecfe;
  --rosso:#d70015; --giallo:#f2b705;
  --area:#1d1d1f; --area-testo:#fff; --area-tenue:#f5f5f7;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lato:248px; --r:12px; --r-g:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sys);color:var(--testo);background:var(--fondo);font-size:16px;line-height:1.45;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:14px 18px}
[hidden]{display:none!important}
::selection{background:var(--blu-tenue)}

/* ---------- entrata ---------- */
.entrata{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--grigio)}
.entrata__scheda{width:100%;max-width:360px;background:var(--bianco);border-radius:var(--r-g);padding:32px 26px}
.marchio{font-weight:600;letter-spacing:-.03em;font-size:22px}
.entrata__lead{color:var(--testo2);font-size:14.5px;margin:6px 0 24px;line-height:1.4}
.entrata label{display:block;margin-bottom:14px;font-size:13px;color:var(--testo2)}
.entrata input{display:block;width:100%;margin-top:6px;height:46px;padding:0 14px;border:1px solid var(--riga);
  border-radius:var(--r);background:var(--grigio);font-size:16px}
.entrata input:focus{outline:none;border-color:var(--blu);background:var(--bianco)}

/* ---------- struttura ---------- */
.testa{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--riga);color:var(--testo)}
.testa::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--area)}
.testa__menu,.testa__io{background:none;border:0;padding:6px;cursor:pointer;font-size:18px;color:var(--testo)}
.testa__titolo{font-weight:600;font-size:16px;letter-spacing:-.02em}
.testa__io{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--area);color:var(--area-testo);
  font-size:13px;font-weight:600;display:grid;place-items:center}
.vista{padding:20px 18px 96px;max-width:960px;margin:0 auto}

.lato{position:fixed;top:0;left:0;bottom:0;width:var(--lato);background:#f9f9fb;border-right:1px solid var(--riga);
  color:var(--testo);padding:18px 0;transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  z-index:60;overflow-y:auto}
.lato--apre{transform:none}
.lato__marchio{font-weight:600;padding:2px 20px 20px;letter-spacing:-.03em;font-size:17px}
.lato a{display:flex;align-items:center;gap:11px;margin:1px 10px;padding:9px 10px;font-size:15px;
  color:var(--testo);border-radius:9px}
.lato a.qui{background:var(--area-tenue);color:var(--area);font-weight:600}
.lato__ico{width:18px;text-align:center;opacity:.45;font-size:13px}
.lato__bollo{width:9px;height:9px;border-radius:3px;flex:0 0 auto;margin:0 5px 0 4px}
.lato__esci{margin:16px 20px 0;background:none;border:0;color:var(--testo2);padding:8px 0;cursor:pointer;font-size:15px}
.lato__esci:hover{color:var(--rosso)}
.lato hr{border-top:1px solid var(--riga)}
.velo{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:50;backdrop-filter:blur(2px)}

.basso{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--riga);padding-bottom:env(safe-area-inset-bottom)}
.basso a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
  font-size:10px;color:var(--testo3);letter-spacing:0}
.basso a i{font-style:normal;font-size:15px}
.basso a.qui{color:var(--area)}
.piu{position:fixed;right:18px;bottom:78px;z-index:45;width:50px;height:50px;border-radius:var(--r-g);border:0;
  background:var(--blu);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(90,49,244,.3)}
.app--senza-piu .piu{display:none}

@media (min-width:900px){
  .testa__menu{display:none}
  .lato{transform:none}
  .velo{display:none!important}
  .basso{display:none}
  .testa,.vista{margin-left:var(--lato)}
  .vista{padding:28px 32px 48px;max-width:1000px}
  .piu{bottom:28px;right:28px}
}

/* ---------- testi ---------- */
.titolo{font-size:clamp(26px,4.4vw,32px);font-weight:600;letter-spacing:-.03em;margin:4px 0 2px;line-height:1.12}
.occhiello{color:var(--testo2);font-size:15.5px;margin:0 0 20px;line-height:1.4}
.sezione{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--testo3);
  margin:26px 0 8px;padding:0 2px}
.etichetta{font-size:12.5px;color:var(--testo2)}
.numero{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}

/* ---------- elenchi raggruppati ---------- */
.gruppo{background:var(--bianco);border:1px solid var(--riga);border-radius:var(--r-g);overflow:hidden;margin-bottom:14px}
.gruppo>*+*{border-top:1px solid var(--riga)}
.scheda{background:var(--bianco);border:1px solid var(--riga);border-radius:var(--r-g);padding:16px;margin-bottom:12px}
.scheda--piatta{border:0;background:var(--grigio)}
.griglia{display:grid;gap:10px}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--3 .scheda{padding:14px 12px;margin:0}
.griglia--3 .numero{font-size:24px}
.griglia--3 .etichetta{font-size:11.5px;line-height:1.25}
@media (min-width:700px){.griglia--2{grid-template-columns:1fr 1fr}}

/* ---------- comandi ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 18px;
  border-radius:var(--r);border:1px solid var(--riga);background:var(--bianco);font-size:15px;font-weight:500;
  cursor:pointer;color:var(--testo);transition:background .15s}
.btn:hover{background:var(--grigio)}
.btn--blu{background:var(--blu);border-color:var(--blu);color:#fff;width:100%}
.btn--blu:hover{background:#4a27d6}
/* tasto pieno ma della misura del testo: per le righe del cruscotto (26/09/2026) */
.btn--via{background:var(--blu);border-color:var(--blu);color:#fff}
.btn--via:hover{background:#4a27d6;color:#fff}
/* le sezioni del marketing, nella home dell'area (26/09/2026: «non vanno nel cruscotto») */
.mkt-sezioni{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 18px}
.mkt-sezioni a{display:block;padding:14px 12px;border-radius:12px;border:1px solid var(--riga);background:var(--bianco);color:var(--testo);text-decoration:none;font-weight:600;font-size:14px;line-height:1.25}
.mkt-sezioni a small{display:block;font-weight:500;font-size:12px;color:var(--testo2);margin-top:3px}
.mkt-sezioni a:nth-child(4n+2),.mkt-sezioni a:nth-child(4n+3){background:var(--grigio)}
.mkt-sezioni a:hover{border-color:var(--blu)}
.btn--piccolo{min-height:34px;padding:0 13px;font-size:14px;border-radius:9px}
.btn--nudo{border:0;background:none;color:var(--blu);padding:0;min-height:30px;font-size:15px}
.btn--nudo:hover{background:none;opacity:.7}
.errore{color:var(--rosso);font-size:14px;margin:12px 0 0}
.vuoto{text-align:center;color:var(--testo3);padding:44px 10px;font-size:15px}
.cerca{width:100%;height:42px;padding:0 14px;border:1px solid var(--riga);border-radius:var(--r);
  background:var(--grigio);font-size:16px;margin-bottom:14px}
.cerca:focus{outline:none;background:var(--bianco);border-color:var(--blu)}
.filtri{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.filtri::-webkit-scrollbar{display:none}
.filtri button{white-space:nowrap;border:0;background:var(--grigio);border-radius:9px;padding:7px 13px;
  font-size:14px;cursor:pointer;color:var(--testo2)}
.filtri button.sel{background:var(--area-tenue);color:var(--area);font-weight:600}

/* ---------- riga pratica ---------- */
.pr{display:block;background:var(--bianco);padding:14px 16px;position:relative}
.pr:hover{background:#fafafa}
.pr__alto{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.pr__cod{font-size:12px;color:var(--testo3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr__tit{font-weight:500;font-size:15.5px;letter-spacing:-.015em;margin:2px 0 3px;line-height:1.3}
.pr__sotto{font-size:14px;color:var(--testo2)}
.pr__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{font-size:11.5px;padding:3px 8px;border-radius:7px;background:var(--grigio);color:var(--testo2);white-space:nowrap}
.tag--alta{background:#ffeaea;color:var(--rosso);font-weight:600}
.tag--stato{background:var(--area-tenue);color:var(--area);font-weight:600}
.tag--garanzia{background:#fff6e0;color:#8a5b00}
.tag--tardi{background:#ffeaea;color:var(--rosso)}

/* ---------- dettaglio ---------- */
.det__testa{background:var(--bianco);border:1px solid var(--riga);border-radius:var(--r-g);padding:18px;margin-bottom:14px}
.det__campi{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:16px}
.det__campo{font-size:14.5px}
.det__campo b{display:block;color:var(--testo3);font-weight:400;font-size:12px;margin-bottom:1px}
.stati{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.stati::-webkit-scrollbar{display:none}
.stati button{white-space:nowrap;border:0;background:var(--grigio);border-radius:9px;padding:8px 14px;
  font-size:14px;cursor:pointer;color:var(--testo2)}
.stati button.sel{background:var(--area);color:var(--area-testo);font-weight:600}
.nota{background:var(--bianco);padding:13px 16px;font-size:14.5px}
.nota__capo{font-size:12px;color:var(--testo3);margin-bottom:3px}
.azioni{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.azioni .btn{flex:0 0 auto}

/* ---------- spedizioni ---------- */
.tracking{margin-top:12px;padding:13px 14px;background:var(--grigio);border-radius:var(--r)}
.tracking__et{font-size:12px;color:var(--testo2);margin-bottom:3px}
.tracking__n{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---------- chat ---------- */
.chat__testa{background:var(--giallo);color:#1d1d1f;border-radius:var(--r-g);padding:18px 20px;margin-bottom:18px}
.chat__testa h1{margin:0 0 5px;font-size:clamp(21px,3.4vw,26px);font-weight:600;letter-spacing:-.03em}
.chat__testa p{margin:0;font-size:14.5px;color:#4a4a4a;line-height:1.4}
.chat{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.msg{max-width:min(88%,640px);padding:12px 15px;border-radius:18px;font-size:15px;white-space:pre-wrap;
  overflow-wrap:anywhere;line-height:1.42}
.msg--io{align-self:flex-end;background:var(--blu);color:#fff;border-bottom-right-radius:6px}
.msg--claude{align-self:flex-start;background:var(--grigio);color:var(--testo);border-bottom-left-radius:6px}
.msg__capo{font-size:11.5px;opacity:.65;margin-bottom:3px}
.msg--attesa{align-self:flex-start;background:#fff8e6;color:#8a5b00;font-size:13.5px}
.chat__scrivi{position:sticky;bottom:66px;display:flex;gap:9px;padding:12px 0;background:var(--bianco)}
.chat__scrivi textarea{flex:1;min-height:42px;max-height:130px;padding:10px 14px;border:1px solid var(--riga);
  border-radius:var(--r);background:var(--grigio);font-size:16px;resize:none}
.chat__scrivi textarea:focus{outline:none;background:var(--bianco);border-color:var(--blu)}
@media (min-width:900px){.chat__scrivi{bottom:0}}

/* ---------- magazzino ---------- */
.mag__r{display:grid;grid-template-columns:1fr 62px 64px;gap:10px;align-items:center;padding:13px 16px;background:var(--bianco)}
.mag__n{font-size:15px;font-weight:450}
.mag__s{font-size:12px;color:var(--testo3)}
.mag__g{font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.mag__g--manca{color:var(--testo3);font-weight:400;font-size:13px}
.mag__g--basso{color:var(--rosso)}

/* ---------- cose da fare ---------- */
.df{display:flex;gap:13px;padding:15px 16px;background:var(--bianco);align-items:flex-start}
.df__bollo{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--testo3)}
.df__bollo--claude{background:var(--blu)}
.df__bollo--corso{background:var(--giallo)}
.df__t{font-size:15.5px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.df__d{font-size:14px;color:var(--testo2);margin-top:3px;line-height:1.4}
.df__b{font-size:13.5px;color:var(--rosso);margin-top:5px}
.df--fatta .df__t{color:var(--testo3);text-decoration:line-through}

/* ---------- foglio ---------- */
.foglio{border:0;padding:0;background:none;max-width:520px;width:calc(100% - 28px);margin:auto}
.foglio::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(3px)}
.foglio__dentro{background:var(--bianco);border-radius:var(--r-g);padding:24px}
.foglio h2{font-size:21px;margin:0 0 18px;letter-spacing:-.03em;font-weight:600}
.foglio label{display:block;font-size:12.5px;color:var(--testo2);margin-bottom:14px}
.foglio input,.foglio select,.foglio textarea{display:block;width:100%;margin-top:5px;min-height:42px;padding:10px 13px;
  border:1px solid var(--riga);border-radius:var(--r);background:var(--grigio);font-size:16px}
.foglio input:focus,.foglio select:focus,.foglio textarea:focus{outline:none;background:var(--bianco);border-color:var(--blu)}
.foglio textarea{min-height:80px;resize:vertical}
.foglio__fondo{display:flex;gap:10px;margin-top:8px}
.foglio__fondo .btn{flex:1}
.perm{display:grid;gap:7px;margin:6px 0 18px}
.perm label{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;background:var(--grigio);
  border-radius:var(--r);font-size:15px;color:var(--testo);cursor:pointer}
.perm input{width:auto;min-height:auto;margin:0}
.perm .bollo{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.perm label:has(input:checked){background:var(--blu-tenue);color:var(--blu);font-weight:500}
.avviso{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;z-index:90;background:rgba(29,29,31,.94);
  color:#fff;padding:12px 18px;border-radius:var(--r);font-size:14.5px;max-width:calc(100% - 36px);
  backdrop-filter:blur(10px)}
@media (min-width:900px){.avviso{bottom:28px}}

/* ---------- comandi rapidi ---------- */
.rapidi{display:flex;gap:8px;overflow-x:auto;padding:2px 0 16px;scrollbar-width:none}
.rapidi::-webkit-scrollbar{display:none}
.rapido{white-space:nowrap;border:0;background:var(--area-tenue);color:var(--area);border-radius:10px;
  padding:10px 15px;font-size:14.5px;font-weight:500;cursor:pointer}
.rapido:hover{filter:brightness(.96)}

/* ---------- conti del documento ---------- */
.conti-mini{margin:12px 0 0;padding:14px 16px;background:var(--grigio);border-radius:var(--r)}
.conti-mini div{display:flex;justify-content:space-between;padding:3px 0;font-size:14.5px}
.conti-mini .tot{border-top:1px solid #d8d8dd;margin-top:7px;padding-top:9px;font-size:17px}

/* ---------- scanner del magazzino ---------- */
.scanner{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/3}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
.scanner__mira{position:absolute;left:8%;right:8%;top:38%;height:24%;border:2px solid rgba(255,255,255,.9);
  border-radius:8px;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}

/* Campi corti affiancati: CAP, citta' e provincia stanno su una riga sola,
   che su un telefono e' l'unico modo perche' il modulo non diventi una scala. */
.riga2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px; }
.riga2 label { margin: 0; }


/* ---------- Second brain ---------- */
.brain__cerca { width: 100%; margin: 14px 0 18px; padding: 11px 14px; font: inherit; font-size: 15px;
  border: 1px solid rgba(0,0,0,.14); border-radius: 10px; background: #fff; }
.brain__cerca:focus { outline: 2px solid #5a31f4; outline-offset: 1px; border-color: transparent; }
.brain__cart { margin: 22px 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; color: #6e6e73; }
.brain__voce .pr__tit { font-size: 15px; }
.brain__indietro { display: inline-block; margin-bottom: 14px; font-size: 14px; color: #5a31f4;
  text-decoration: none; }
.brain__scheda { max-width: 42rem; font-size: 15.5px; line-height: 1.62; color: #212121;
  overflow-wrap: break-word; }
.brain__scheda h2 { font-size: clamp(22px, 5vw, 27px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.15; margin: 4px 0 14px; }
.brain__scheda h3 { font-size: 19px; font-weight: 600; margin: 28px 0 8px; }
.brain__scheda h4, .brain__scheda h5 { font-size: 16px; font-weight: 600; margin: 22px 0 6px; }
.brain__scheda p { margin: 0 0 12px; }
.brain__scheda ul, .brain__scheda ol { margin: 0 0 14px; padding-left: 1.3em; }
.brain__scheda li { margin-bottom: 5px; }
.brain__scheda b { font-weight: 600; }
.brain__scheda code { padding: 1px 5px; border-radius: 5px; background: #f1f1f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.brain__scheda pre { padding: 12px 14px; border-radius: 10px; background: #f1f1f4; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.brain__scheda blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #5a31f4;
  background: #f7f7f8; border-radius: 0 10px 10px 0; }
.brain__scheda blockquote p:last-child { margin: 0; }
.brain__scheda hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 24px 0; }
.brain__scheda a { color: #5a31f4; }
.brain__tab { overflow-x: auto; margin: 0 0 16px; }
.brain__tab table { border-collapse: collapse; width: 100%; font-size: 14px; }
.brain__tab th, .brain__tab td { padding: 8px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,.08); }
.brain__tab th { font-weight: 600; white-space: nowrap; }

/* L'avviso di versione nuova: sta in fondo, non copre niente e si tocca per ricaricare.
   Non si ricarica da soli: chi sta scrivendo in un foglio perderebbe quello che ha scritto. */
.aggiornamento {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
  z-index: 60; border: 0; border-radius: 10px; padding: 10px 16px;
  background: var(--testo); color: #fff; font: inherit; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); cursor: pointer;
}

/* Quando la scheda del cliente e' senza indirizzo: si dice subito, invece di far nascere
   una spedizione in errore che nessuno guarda. */
.avviso-manca {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #fff6e5; color: #7a4a00; font-size: 13.5px; line-height: 1.45;
}

/* L'indirizzo che il gestionale e' andato a prendere su Shopify: si dice da dove viene,
   cosi' chi spedisce sa se fidarsi o se controllare. */
.avviso-fonte {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: #eef5ff; border: 1px solid #cfe0f8; color: #1f4b8f;
  font-size: 13px; line-height: 1.45;
}

/* Riconosciuto solo dal nome: e' l'unico caso in cui il gestionale puo' avere
   preso un omonimo, quindi si vede che e' un avviso e non una conferma. */
.avviso-fonte--dubbio {
  background: #fff6e5; border-color: #f0d9a8; color: #7a5200;
}

/* «Elimina» accanto al titolo di un gruppo: e' un'azione distruttiva, quindi si vede
   che c'e' ma non invita — resta grigia finche' non ci passi sopra. */
.sezione__via {
  float: right; margin-top: -2px; padding: 3px 10px;
  font: inherit; font-size: 11.5px; letter-spacing: .03em;
  color: #fff; background: var(--testo); border: 1px solid var(--testo);
  border-radius: 10px; cursor: pointer;
}
.sezione__via:hover { background: var(--rosso); border-color: var(--rosso); }

.btn--rosso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn--rosso:hover { background: #ab0011; border-color: #ab0011; }