/* ============================================================================
   LE VOCI DEL GESTIONALE (11/11/2026) — testata, barra laterale e barra in basso,
   uguali nella pagina della chat («/») e nel gestionale («/completo»).

   Jacopo: «Ordini, Clienti, Assistenze, Spedizioni, voci semplici» e «header piu' spesso,
   non cosi' sottile, da app telefono». La testata e' quella di un'app iOS: barra alta, titolo
   grande che scorre via e lascia il titolo piccolo al centro, vetro con il filetto solo quando
   la pagina e' scorsa. Le regole di sempre: bianco e #f5f5f7, un solo blu, mai nero, tasti
   da 44 px, raggio 10.
   Si carica DOPO stile.css e semplice.css: qui stanno le sole regole della navigazione.
   ============================================================================ */

:root {
  --gv-blu: #5a31f4;
  --gv-blu-tenue: rgba(90, 49, 244, .1);
  --gv-testo: #1d1d1f;
  --gv-testo2: #6e6e73;
  --gv-testo3: #8e8e93;
  --gv-fondo: #f5f5f7;
  --gv-filo: #d8d8dd;
  --gv-hl: 1px;
  --gv-barra: 54px;                      /* la barra in alto, senza la tacca: come /cruscotto.html */
  --gv-basso: 54px;                      /* la barra in basso, senza la riga di casa */
  --gv-molla: cubic-bezier(.32, .72, 0, 1);
  --lato: 244px;                         /* la barra laterale del computer */
}
@media (min-resolution: 2dppx) { :root { --gv-hl: .5px; --gv-filo: #c6c6c8; } }

/* ---------- la testata ---------- */
body.gv header.testa {
  position: sticky; top: 0; z-index: 70;
  display: block; height: auto; padding: 0; gap: 0;
  background: var(--gv-fondo); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s ease, box-shadow .25s ease;
}
body.gv header.testa.testa--scorsa {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 calc(var(--gv-hl) * -1) 0 var(--gv-filo);
}
.testa__barra {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px;
  height: calc(var(--gv-barra) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
}
.testa__sx, .testa__dx { display: flex; align-items: center; min-width: 0; gap: 2px; }
.testa__dx { justify-content: flex-end; }
.testa__piccolo {
  max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.02em; color: var(--gv-testo);
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .25s var(--gv-molla);
}
.testa--scorsa .testa__piccolo { opacity: 1; transform: none; }
.testa__tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none;
  color: var(--gv-blu) !important; text-decoration: none !important; font-size: 17px; font-weight: 400; cursor: pointer;
}
.testa__tasto:hover { background: rgba(118, 118, 128, .1); }
.testa__tasto:active { opacity: .55; }
.testa__tasto svg { width: 25px; height: 25px; flex: none; }
.testa__altro { padding-left: 6px; }
.testa__altro svg { width: 26px; height: 26px; }
.testa__tasto.qui { background: var(--gv-blu-tenue); }
.testa__io {
  width: 44px; padding: 0; position: relative; color: #fff !important; font-size: 15px; font-weight: 600;
}
.testa__io::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; z-index: -1;
  background: linear-gradient(180deg, #8b6cf8, var(--gv-blu));
}
.testa__io { isolation: isolate; }
.testa__io:hover { background: none; opacity: .85; }
.testa__testo { color: var(--gv-blu) !important; }

/* il titolo grande, sotto la barra: scorre via con la pagina */
.grande { margin: 0 auto; padding: 2px 16px 4px; max-width: 980px; }
.grande h1, #titolo-pagina.grande__t {
  display: block !important; margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 34px; font-weight: 700; letter-spacing: -.024em; line-height: 1.18; color: var(--gv-testo);
  min-height: 1.18em;
}
body.gv-senza-grande .grande { display: none; }

/* ---------- la barra laterale (computer) ---------- */
body.gv nav.lato {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 72; width: var(--lato);
  display: none; flex-direction: column; gap: 1px;
  padding: calc(env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom));
  background: rgba(240, 240, 243, .82);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: inset calc(var(--gv-hl) * -1) 0 0 var(--gv-filo);
  overflow-y: auto; transform: none;
}
body.gv nav.lato .lato__marchio {
  display: flex; align-items: center; height: var(--gv-barra); padding: 0 12px; margin: 0 0 6px;
  font: 700 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em; color: var(--gv-testo) !important; text-decoration: none; background: none !important; min-height: 0;
}
body.gv nav.lato a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px;
  border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--gv-testo); text-decoration: none;
}
body.gv nav.lato a:hover { background: rgba(0, 0, 0, .045); }
body.gv nav.lato a.qui { background: var(--gv-blu-tenue); color: var(--gv-blu); font-weight: 600; }
body.gv nav.lato a[data-voce="altro"] { margin-top: 10px; box-shadow: none; }
body.gv .lato__ico { width: 24px; height: 24px; flex: none; color: var(--gv-blu); }
body.gv nav.lato .conta {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-grid; place-items: center; background: var(--gv-blu); color: #fff; font-size: 12.5px; font-weight: 600;
}
body.gv .conta:empty { display: none !important; }

/* ---------- la barra in basso (telefono): la tab bar di iOS ---------- */
body.gv nav.basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex;
  padding: 0 2px env(safe-area-inset-bottom);
  background: rgba(250, 250, 252, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 var(--gv-hl) 0 var(--gv-filo);
}
body.gv nav.basso a {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--gv-basso); padding: 0; min-height: 0;
  font-size: 10.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1;
  color: var(--gv-testo3); text-decoration: none; white-space: nowrap; overflow: visible;
}
body.gv nav.basso a i { position: relative; font-style: normal; display: grid; place-items: center; width: 30px; height: 28px; }
body.gv nav.basso a i svg { width: 27px; height: 27px; }
body.gv nav.basso a.qui { color: var(--gv-blu); }
body.gv nav.basso .conta {
  position: absolute; top: -2px; left: 19px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 600;
  box-shadow: 0 0 0 2px rgba(250, 250, 252, .95);
}
.basso--poche a { max-width: 120px; }

/* ---------- telefono e computer ---------- */
@media (max-width: 899.98px) {
  body.gv .testa__io { display: none; }
}
@media (min-width: 900px) {
  body.gv nav.lato { display: flex; }
  body.gv nav.basso { display: none; }
  body.gv header.testa { margin-left: var(--lato); }
  .testa__barra { padding-left: 20px; padding-right: 16px; }
  body.gv .testa__altro { display: none; }
  .grande { padding: 8px 40px 2px; margin-left: var(--lato); max-width: 980px; }
  .grande h1 { font-size: 34px; }
}
@media (min-width: 1300px) {
  .grande { margin-left: max(var(--lato), calc(var(--lato) + (100vw - var(--lato) - 980px) / 2)); }
}
/* i telefoni piu' stretti: nessuna etichetta si taglia */
@media (max-width: 360px) {
  body.gv nav.basso a { font-size: 10px; letter-spacing: -.02em; }
  .testa__altro span { display: none; }
}
/* sul telefono a destra al massimo due tasti (Cerca e Chat): «Aggiorna» solo sul computer */
@media (max-width: 899.98px) { body.gv .testa__aggiorna { display: none; } }