/* Guscio da gestionale (js/guscio.js, richiesta di Giuseppe del 26/10). Ripreso da crm.css (.sb, .grp, .it): barra di vetro
   a sinistra, stretta a sole icone che si allarga al passaggio del mouse sopra il contenuto, oppure larga (la mappa si sposta).
   Larga stretta come la barra della mappa (84 px), così i controlli della mappa restano dove sono. Da telefono barra in basso
   alta come la tab bar (64 px) e foglio con l'elenco a gruppi. Un solo accento (--pill / --acc). */
:root{--gs-stretta:84px;--gs-larga:248px}

/* La barra e la tab bar della mappa lasciano il posto al guscio; niente più "Altre informazioni" sotto la mappa. */
html.guscio .barra,html.guscio .tabbar,html.guscio .giu,html.guscio .fascia-scorri{display:none!important}

/* ---------- barra a sinistra (computer) ---------- */
.gs{position:fixed;left:12px;top:12px;bottom:12px;z-index:55;width:var(--gs-stretta);display:flex;flex-direction:column;gap:4px;padding:10px 8px 8px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--sup);box-shadow:var(--ombra);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);overflow:hidden;transition:width .18s var(--ease),box-shadow .18s}
@media (prefers-reduced-transparency:reduce){.gs,.gs-tab{background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
[data-gs-stile=larga] .gs,[data-gs-stile=gruppi] .gs{width:var(--gs-larga)}
/* Stretta: si allarga sopra il contenuto al passaggio del mouse (con un attimo di attesa, così passarci sopra non la apre) o col tasto Tab. */
@media (hover:hover) and (pointer:fine){[data-gs-stile=stretta] .gs:hover{width:var(--gs-larga);box-shadow:var(--ombra-pop);transition-delay:.12s}}
[data-gs-stile=stretta] .gs:has(:focus-visible){width:var(--gs-larga);box-shadow:var(--ombra-pop)}
.gs-lb{white-space:nowrap;overflow:hidden;transition:opacity .12s}
[data-gs-stile=stretta] .gs:not(:hover):not(:has(:focus-visible)) .gs-lb{opacity:0;width:0}
@media (hover:none),(pointer:coarse){[data-gs-stile=stretta] .gs:not(:has(:focus-visible)) .gs-lb{opacity:0;width:0}}

.gs-testa{flex:none}
.gs-marchio{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 0 0 13px;border-radius:var(--r-ctl);color:var(--tx);text-decoration:none}
.gs-marchio img{width:40px;height:40px;display:block;flex:none;overflow:visible}
.gs-marchio b{display:block;font-size:calc(15px * var(--kt));font-weight:600;line-height:1.2}
.gs-marchio small{display:block;font-size:calc(12px * var(--kt));font-weight:500;color:var(--mu)}

.gs-nav{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.gs-nav::-webkit-scrollbar{display:none}
.gs-nav.gs-su.gs-giu{-webkit-mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.gs-nav.gs-su:not(.gs-giu){-webkit-mask-image:linear-gradient(transparent,#000 28px);mask-image:linear-gradient(transparent,#000 28px)}
.gs-nav.gs-giu:not(.gs-su){-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
.gs-grp{display:grid;gap:1px}
.gs-voci{display:grid;gap:1px}
.gs-voci[hidden]{display:none}
/* Titolo del gruppo. Stretta: al posto del nome una riga corta, alla stessa altezza (le icone non saltano quando si allarga). */
.gs-gt{position:relative;display:flex;align-items:center;height:26px;margin:6px 0 1px;padding:0 12px 0 14px;font-size:calc(12px * var(--kt));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.gs-gt::before{content:"";position:absolute;left:16px;right:16px;top:50%;border-top:1px solid var(--g-line);opacity:0;transition:opacity .12s}
[data-gs-stile=stretta] .gs:not(:hover):not(:has(:focus-visible)) .gs-gt::before{opacity:1}
.gs-grp:first-child .gs-gt{margin-top:0}

.gs-it{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 10px 0 23px;border:0;border-radius:var(--r-ctl);background:none;color:var(--mu);font-size:calc(14px * var(--kt));font-weight:600;line-height:1.2;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;transition:color .15s,background-color .15s}
.gs-it svg.i{width:22px;height:22px}
.gs-it[aria-current]{background:var(--pill);color:var(--on-pill)}
@media (hover:hover) and (pointer:fine){.gs-it:not([aria-current]):hover,.gs-gb:hover{background:var(--g-fill2);color:var(--tx)}}
.gs-it kbd{margin-left:auto}
.gs-piede{flex:none;display:grid;gap:1px;padding-top:6px;border-top:1px solid var(--g-line)}
@media (max-height:820px){.gs-it{min-height:36px}.gs-gt{height:22px;margin-top:4px}.gs-marchio{min-height:44px}}
@media (max-height:700px){.gs-it{min-height:34px}}

/* A gruppi: il titolo del gruppo è un pulsante che apre e chiude le sue pagine. */
.gs-gb{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;margin-top:2px;padding:0 10px 0 23px;border:0;border-radius:var(--r-ctl);background:none;color:var(--tx);font-size:calc(14px * var(--kt));font-weight:600;text-align:left;white-space:nowrap;overflow:hidden}
.gs-gb svg.i{width:22px;height:22px}
.gs-gb small{margin-left:auto;font-size:calc(12px * var(--kt));font-weight:500;color:var(--mu)}
.gs-gb .gs-chev{width:16px;height:16px;color:var(--mu);transition:transform .2s var(--ease)}
.gs-gb[aria-expanded="false"] .gs-chev{transform:rotate(-90deg)}
.gs-apribile .gs-voci .gs-it{padding-left:35px}

/* La mappa si sposta a destra quando la barra è larga (i suoi controlli restano accanto alla barra). */
@media (min-width:821px){
  [data-gs-stile=larga] .blocco-mappa,[data-gs-stile=gruppi] .blocco-mappa{margin-left:calc(var(--gs-larga) - var(--gs-stretta))}
}

/* ---------- pagine ---------- */
/* Su un'altra pagina la mappa resta viva ma nascosta, ferma dov'era (stessa misura: niente ricarica delle tessere). */
[data-gs-pagina] .blocco-mappa{position:fixed;top:0;left:0;right:0;visibility:hidden;pointer-events:none}
[data-gs-pagina] .blocco-mappa *{visibility:hidden!important}
html.guscio .sotto[hidden],html.guscio .sotto>section[hidden]{display:none!important}
html.guscio .sotto{min-height:100vh;min-height:100dvh;overflow-x:clip;padding-left:calc(var(--gs-stretta) + 24px)}
[data-gs-stile=larga] .sotto,[data-gs-stile=gruppi] .sotto{padding-left:calc(var(--gs-larga) + 24px)}
html.guscio .sotto>section:focus{outline:none}
/* Prima apertura: una riga mentre arrivano modulo e dati della pagina. */
html.guscio .sotto-sezione:not(.montata)::before{content:attr(data-gs-carica);display:block;padding:8px 0;color:var(--mu);font-size:calc(14px * var(--kt));font-weight:500;animation:gs-respira 1.4s ease-in-out infinite alternate}
@keyframes gs-respira{from{opacity:.45}to{opacity:1}}
.gs-errore{padding:24px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--g-solid)}
.gs-errore p+p{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gs-errore a.btn{color:var(--tx);text-decoration:none}

/* ---------- telefono: barra in basso e foglio ---------- */
.gs-tab,.gs-velo,.gs-foglio{display:none}
@media (max-width:820px){
  .gs{display:none}
  html.guscio .sotto{padding-left:0;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .gs-tab{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:58;height:64px;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:2px;padding:4px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--sup);box-shadow:var(--ombra);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3)}
  .gs-tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:56px;padding:0 2px;border:0;border-radius:var(--r-ctl);background:none;color:var(--mu);font-size:calc(12px * var(--kt));font-weight:600;line-height:1.15;text-decoration:none}
  .gs-tb svg.i{width:22px;height:22px}
  .gs-tb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gs-tb[aria-current]{background:var(--pill);color:var(--on-pill)}
  .gs-velo:not([hidden]){display:block;position:fixed;inset:0;z-index:56;background:rgba(14,20,17,.32)}
  /* Il foglio arriva fino in fondo, dietro la barra: niente spiraglio di pagina fra i due. */
  .gs-foglio:not([hidden]){position:fixed;left:0;right:0;bottom:0;padding-bottom:calc(80px + env(safe-area-inset-bottom));z-index:57;display:flex;flex-direction:column;max-height:min(80dvh,700px);border:1px solid var(--g-line);border-bottom:0;border-radius:22px 22px 0 0;background:var(--g-solid);box-shadow:0 -10px 30px rgba(0,0,0,.18);animation:gs-sale .22s var(--ease-out)}
  .gs-f-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 4px 20px}
  .gs-f-testa h2{font-size:calc(18px * var(--kt));font-weight:600}
  .gs-f-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 12px}
  .gs-f-gt{margin:12px 8px 4px;font-size:calc(12px * var(--kt));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
  .gs-fr{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;color:var(--tx);font-size:calc(16px * var(--kt));font-weight:600;text-align:left;text-decoration:none}
  .gs-fr svg.i{width:22px;height:22px;color:var(--mu)}
  .gs-fr[aria-current]{background:var(--pill);color:var(--on-pill)}
  .gs-fr[aria-current] svg.i{color:currentColor}
}
@keyframes gs-sale{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.gs,.gs-lb,.gs-gt::before,.gs-gb .gs-chev{transition:none}.gs-foglio,html.guscio .sotto-sezione:not(.montata)::before{animation:none!important}}