/* ============================================================================
 * css/gl.css — La grafica nuova del portale
 *
 * È quella del tablet degli esercenti (tablet/index.php) portata sul gestionale: fondo blu notte,
 * riquadri con gli angoli morbidi, un colore per famiglia di cose, icone a tratto al posto delle
 * emoji (icone_lib.php), scritte in minuscolo normale.
 *
 * Come è fatto:
 *   1. i colori, una volta sola (--gl-…): i moduli non scrivono più i codici colore, li chiamano;
 *   2. la cornice: barra in alto, home, login;
 *   3. gli elementi di sempre (campi, pulsanti, riquadri) vestiti col colore nuovo, a bassa
 *      precedenza: lo stile proprio di un modulo vince sempre;
 *   4. i pezzi pronti per i moduli riscritti (.gl-…).
 * ========================================================================== */

/* ── 1. I colori ─────────────────────────────────────────────────────────── */
:root {
    /* i fondi, dal più scuro al più chiaro */
    --gl-bg: #070d1a;  --gl-bg2: #0d1629;
    --gl-card: #111b30;  --gl-card2: #16223b;  --gl-card3: #1c2a47;  --gl-card4: #26365a;
    /* le righe: bordi e separatori */
    --gl-riga: #22304f;  --gl-riga2: #2f4068;  --gl-riga3: #45578a;
    /* le scritte: piena, secondaria, tenue, spenta; e l'inchiostro scuro sopra i colori vivi */
    --gl-testo: #f8fafc;  --gl-sub: #cbd5e1;  --gl-tenue: #94a3b8;  --gl-spento: #64748b;
    --gl-inchiostro: #0b1220;
    /* il colore del marchio e quelli che dicono qualcosa */
    --gl-acc: #60a5fa;  --gl-acc2: #3b82f6;
    --gl-ok: #34d399;  --gl-avviso: #fbbf24;  --gl-err: #f87171;
    --gl-arancio: #fb923c;  --gl-viola: #c084fc;  --gl-ciano: #22d3ee;
    --gl-raggio: 16px;  --gl-raggio-s: 10px;
    --gl-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    /* i nomi che i moduli usano da sempre, puntati sui colori nuovi */
    --accent: var(--gl-acc);  --bg: var(--gl-bg);  --card: var(--gl-card);
    --border: var(--gl-riga);  --danger: var(--gl-err);
    --bg-dark: var(--gl-bg);  --bg-card: var(--gl-card);  --text-main: var(--gl-testo);
}

html { color-scheme: dark; background-color: var(--gl-bg); scrollbar-color: #33456e var(--gl-bg); }
::selection { background: color-mix(in srgb, var(--gl-acc) 38%, transparent); }
[hidden] { display: none !important; }

/* le icone: il disegno prende il colore e la misura della scritta che lo contiene */
svg.i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }

/* un'emoji sostituita da js/icone.js: l'icona si vede, l'emoji resta nel testo (copia, script) */
.gl-emo { display: inline-block; position: relative; line-height: 1; }
.gl-emo > svg.i { width: 1.12em; height: 1.12em; vertical-align: -.2em; }
.gl-emo-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.gl-emo.ok { color: var(--gl-ok); }  .gl-emo.am { color: var(--gl-avviso); }  .gl-emo.er { color: var(--gl-err); }
.gl-emo.ar { color: var(--gl-arancio); }  .gl-emo.bl { color: var(--gl-acc); }
/* dentro un pulsante colorato l'icona segue la scritta, altrimenti sparirebbe sul suo stesso colore */
button .gl-emo, .btn .gl-emo, [class*="btn"] .gl-emo, [class*="badge"] .gl-emo, [class*="chip"] .gl-emo { color: inherit; }
/* i pallini di stato */
.gl-dot { display: inline-block; width: .66em; height: .66em; border-radius: 50%; background: var(--c, currentColor);
          box-shadow: 0 0 0 .2em color-mix(in srgb, var(--c, currentColor) 22%, transparent); vertical-align: .04em; margin: 0 .22em 0 .12em; }
.gl-dot.r { --c: var(--gl-err); }  .gl-dot.v { --c: var(--gl-ok); }  .gl-dot.g { --c: var(--gl-avviso); }
.gl-dot.b { --c: var(--gl-acc); }  .gl-dot.a { --c: var(--gl-arancio); }  .gl-dot.n { --c: var(--gl-tenue); }

/* ── 2. La cornice ───────────────────────────────────────────────────────── */
body.portal-body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--gl-font); color: var(--gl-testo);
    background: radial-gradient(1400px 700px at 85% -20%, #1d4ed833, transparent 60%),
                radial-gradient(900px 600px at -10% 110%, #7c3aed26, transparent 60%), var(--gl-bg);
    background-attachment: fixed;
}
/* le scritte in minuscolo normale: il TUTTO MAIUSCOLO di prima (style.css) non c'è più */
body.portal-body, body.portal-body input:not([type="password"]), body.portal-body textarea, body.portal-body select { text-transform: none !important; }

.container { max-width: 1400px; width: 100%; margin: 0 auto; padding: 26px 22px 34px; flex: 1; }
footer { text-align: center; padding: 18px; font-size: .8rem; color: var(--gl-spento); border-top: 1px solid var(--gl-riga); background: #0a122488; }

/* la barra in alto */
.navbar { position: relative; z-index: 900; display: flex; align-items: center; gap: 14px; padding: 10px 22px;
          background: #0a1224cc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--gl-riga); box-shadow: none; }
.nav-marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gl-testo); flex: none; }
.nav-logo { width: 42px; height: 42px; max-width: none; padding: 0; margin: 0; border-radius: 50%; display: block; box-shadow: 0 4px 16px #000a; }
.nav-nome { font-weight: 800; font-size: 1.02rem; letter-spacing: .2px; line-height: 1.15; white-space: nowrap; }
.nav-nome small { display: block; color: var(--gl-tenue); font-weight: 500; font-size: .78rem; }

.nav-menu { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin-left: 6px; }
.nav-item { position: relative; display: flex; align-items: center; --c: var(--gl-acc); }
.nav-item.c-arancio { --c: var(--gl-arancio); }  .nav-item.c-verde { --c: var(--gl-ok); }
.nav-item.c-viola { --c: var(--gl-viola); }  .nav-item.c-ambra { --c: var(--gl-avviso); }  .nav-item.c-ciano { --c: var(--gl-ciano); }
.nav-link { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; border: 1px solid transparent;
            color: var(--gl-sub); text-decoration: none; font-weight: 650; font-size: .9rem; white-space: nowrap; cursor: pointer;
            transition: color .15s, background .15s, border-color .15s; }
.nav-link > svg.i { font-size: 1.08rem; color: var(--gl-tenue); transition: color .15s; }
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--gl-testo); background: var(--gl-card2); }
.nav-link:hover > svg.i, .nav-item:hover > .nav-link > svg.i { color: var(--c); }
.nav-link.active, .nav-link.group-active { color: var(--gl-testo); background: color-mix(in srgb, var(--c) 14%, transparent);
            border-color: color-mix(in srgb, var(--c) 34%, transparent); }
.nav-link.active > svg.i, .nav-link.group-active > svg.i { color: var(--c); }
.nav-link > svg.i.nav-arrow { font-size: .85rem; color: var(--gl-spento); margin-left: -2px; transition: transform .2s; }
.nav-item:hover > .nav-link > svg.i.nav-arrow { transform: rotate(180deg); color: var(--gl-sub); }
.nav-conta { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
             border-radius: 999px; background: var(--gl-err); color: var(--gl-inchiostro); font-size: .74rem; font-weight: 800; }

/* la tendina di un gruppo */
.nav-dropdown { position: absolute; top: 100%; left: 0; padding-top: 10px; min-width: 268px; z-index: 999;
                opacity: 0; pointer-events: none; transition: opacity .15s; }
.nav-item:hover > .nav-dropdown { opacity: 1; pointer-events: all; }
.nav-dropdown-inner { background: var(--gl-bg2); border: 1px solid var(--gl-riga); border-radius: 18px; padding: 8px;
                      box-shadow: 0 22px 50px #000b; }
.nav-dd-link { display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 8px; border-radius: 12px; white-space: nowrap;
               color: var(--gl-sub); text-decoration: none; font-size: .9rem; font-weight: 550; transition: color .12s, background .12s; }
.nav-dd-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 1rem;
               color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.nav-dd-link:hover { color: var(--gl-testo); background: var(--gl-card2); }
.nav-dd-link.active { color: var(--gl-testo); background: color-mix(in srgb, var(--c) 14%, transparent); }
.nav-separator { height: 1px; background: var(--gl-riga); margin: 6px 8px; }

/* chi è entrato, e l'uscita */
.user-info { display: flex; align-items: center; gap: 10px; flex: none; font-size: .88rem; }
.user-tondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
              background: var(--gl-card2); border: 1px solid var(--gl-riga2); color: var(--gl-sub); font-weight: 800; font-size: .82rem; letter-spacing: .5px; }
.user-name { color: var(--gl-testo); font-weight: 650; line-height: 1.2; white-space: nowrap; }
.user-name small { display: block; color: var(--gl-tenue); font-weight: 500; font-size: .76rem; }
.btn-logout { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gl-riga2);
              color: var(--gl-sub); text-decoration: none; font-size: 1.05rem; padding: 0; background: transparent; transition: all .15s; }
.btn-logout:hover { color: var(--gl-inchiostro); background: var(--gl-err); border-color: var(--gl-err); }

.nav-toggle { display: none; width: 42px; height: 42px; padding: 0; place-items: center; border-radius: 12px; cursor: pointer;
              background: var(--gl-card); border: 1px solid var(--gl-riga); color: var(--gl-testo); font-size: 1.25rem; }
.nav-toggle .i-chiudi, .nav-toggle[aria-expanded="true"] .i-apri { display: none; }
.nav-toggle[aria-expanded="true"] .i-chiudi { display: block; }

/* La barra deve starci tutta, coi numeri accanto alle voci: sotto 1600 punti va via il nome accanto al logo, sotto
   1460 anche il nome di chi è entrato (resta il tondo con le iniziali), sotto 1320 il menu va dietro al pulsante.
   Misurato il 14/10/2026 con la voce «App esercenti»: con 1420 e 1180 di prima, a 1366 e a 1440 punti il pulsante
   per uscire finiva fuori dallo schermo, e fra 1200 e 1300 succedeva già. */
@media (max-width: 1600px) { .nav-nome { display: none; } }
@media (max-width: 1460px) { .user-name { display: none; } }
/* sotto questa larghezza la barra non ci sta più: il menu va dietro al pulsante (vedi navApri in index.php) */
@media (max-width: 1320px) {
    .navbar { flex-wrap: wrap; padding: 8px 14px; gap: 10px; }
    .nav-toggle { display: grid; order: 2; }
    .user-info { order: 3; margin-left: auto; }
    .user-name { display: none; }
    .nav-menu { display: none; order: 4; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
                padding: 6px 0 10px; max-height: 75vh; overflow-y: auto; }
    .nav-menu.open { display: flex; }
    .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
    .nav-link { width: 100%; padding: 12px 14px; border-radius: 14px; font-size: .95rem; }
    .nav-link > svg.i.nav-arrow { margin-left: auto; }
    /* i gruppi si aprono al tocco, in linea: sovrapposti coprirebbero tutto */
    .nav-dropdown { position: static; opacity: 1; pointer-events: all; min-width: 0; padding-top: 0; display: none; }
    .nav-item.aperto > .nav-dropdown { display: block; }
    .nav-item:hover > .nav-dropdown { display: none; }
    .nav-item.aperto:hover > .nav-dropdown { display: block; }
    .nav-dropdown-inner { margin: 2px 0 6px 12px; box-shadow: none; }
    .nav-dd-link { padding: 9px 12px 9px 8px; }
}

/* la home: un riquadro per ogni cosa che si può aprire */
.gl-home-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 22px; }
.gl-home-testa h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -.5px; }
.gl-home-testa p { margin: 4px 0 0; color: var(--gl-sub); font-size: 1.1rem; }
.gl-home-ora { text-align: right; line-height: 1.15; }
.gl-home-ora b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.gl-home-ora small { display: block; color: var(--gl-sub); font-size: .9rem; }
.gl-gruppo { --c: var(--gl-acc); margin-top: 26px; }
.gl-gruppo.c-arancio { --c: var(--gl-arancio); }  .gl-gruppo.c-verde { --c: var(--gl-ok); }
.gl-gruppo.c-viola { --c: var(--gl-viola); }  .gl-gruppo.c-ambra { --c: var(--gl-avviso); }  .gl-gruppo.c-ciano { --c: var(--gl-ciano); }
.gl-gruppo-tit { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--c);
                 font-size: .8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.gl-gruppo-tit::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gl-riga), transparent); margin-left: 6px; }
.gl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.gl-tiles.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gl-home-nota { margin: 30px 0 0; text-align: center; color: var(--gl-spento); font-size: .84rem; }
.gl-tile.c-ambra { --c: var(--gl-avviso); }  .gl-tile.c-ciano { --c: var(--gl-ciano); }
.gl-tile { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; overflow: hidden;
           border: 1px solid var(--gl-riga); border-radius: 20px; background: linear-gradient(160deg, var(--gl-card2), var(--gl-card));
           color: var(--gl-testo); text-decoration: none; transition: transform .12s ease, border-color .2s; }
.gl-tile::after { content: ''; position: absolute; inset: auto -22% -80% auto; width: 52%; aspect-ratio: 1; border-radius: 50%;
                  background: var(--c); opacity: .11; filter: blur(10px); pointer-events: none; }
.gl-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, var(--gl-riga)); }
.gl-tile:active { transform: scale(.985); }
.gl-tile .ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; font-size: 22px; color: var(--c);
                background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.gl-tile h3 { margin: 0 0 2px; font-size: 1.02rem; font-weight: 720; color: var(--gl-testo); }
.gl-tile p { margin: 0; color: var(--gl-sub); font-size: .86rem; line-height: 1.3; }
.gl-tile .conta { margin-left: auto; flex: none; background: var(--c); color: var(--gl-inchiostro); font-weight: 800; border-radius: 999px; padding: 3px 11px; font-size: .9rem; position: relative; z-index: 1; }
.gl-tile.grande { padding: 20px 22px; gap: 18px; }
.gl-tile.grande .ico { width: 60px; height: 60px; border-radius: 19px; font-size: 29px; }
.gl-tile.grande h3 { font-size: 1.3rem; font-weight: 750; }
.gl-tile.grande p { font-size: .98rem; }

/* un avviso a tutta larghezza: accesso negato, modulo che non c'è, errore */
.gl-avviso { --c: var(--gl-err); display: flex; gap: 18px; align-items: flex-start; padding: 26px 28px; border-radius: 20px;
             background: color-mix(in srgb, var(--c) 9%, var(--gl-card)); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); }
.gl-avviso > .ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; font-size: 27px;
                    color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.gl-avviso h2 { margin: 2px 0 6px; font-size: 1.35rem; color: var(--gl-testo); }
.gl-avviso p { margin: 0 0 4px; color: var(--gl-sub); }

/* il login */
body.gl-login { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; box-sizing: border-box;
                font-family: var(--gl-font); color: var(--gl-testo);
                background: radial-gradient(1200px 700px at 85% -10%, #1d4ed844, transparent 60%),
                            radial-gradient(900px 600px at -10% 110%, #7c3aed33, transparent 60%), var(--gl-bg); }
.login-box { width: min(420px, 100%); padding: 38px 34px 32px; text-align: center; border-radius: 28px;
             background: linear-gradient(160deg, var(--gl-card2), var(--gl-card)); border: 1px solid var(--gl-riga); box-shadow: 0 30px 80px #0009; }
.login-box img { width: 116px; height: 116px; display: block; margin: 0 auto 18px; border-radius: 50%; box-shadow: 0 10px 30px #000a; }
.login-box h2 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.3px; color: var(--gl-testo); }
.login-box .sotto { margin: 0 0 24px; color: var(--gl-sub); font-size: 1rem; }
.login-box .campo { position: relative; margin-bottom: 12px; }
.login-box .campo > svg.i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--gl-tenue); pointer-events: none; }
.login-box input { width: 100%; margin: 0; padding: 15px 16px 15px 46px; box-sizing: border-box; outline: none;
                   background: var(--gl-bg2); color: var(--gl-testo); border: 1.5px solid var(--gl-riga); border-radius: 14px;
                   font: inherit; font-size: 1.02rem; text-transform: none; }
.login-box input::placeholder { color: var(--gl-spento); }
.login-box input:focus { border-color: var(--gl-acc); }
.login-box .campo:focus-within > svg.i { color: var(--gl-acc); }
.login-box button { width: 100%; margin-top: 8px; padding: 15px; border: 0; border-radius: 14px; cursor: pointer;
                    background: var(--gl-acc); color: var(--gl-inchiostro); font: inherit; font-size: 1.08rem; font-weight: 800; transition: filter .15s, transform .1s; }
.login-box button:hover { filter: brightness(1.08); }
.login-box button:active { transform: scale(.985); }
.login-box .error { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; text-align: left; font-weight: 600;
                    color: #fecaca; background: #7f1d1d66; border: 1px solid #f8717155; border-radius: 14px; }
.login-box .error svg.i { font-size: 1.2rem; flex: none; }

/* ── 3. Gli elementi di sempre, col colore nuovo ─────────────────────────────
   :where() azzera la precedenza di quello che contiene: queste regole pesano quanto il solo nome
   dell'elemento. Battono style.css (che viene prima) e perdono con qualunque classe di un modulo. */
:where(body.portal-body) a { color: var(--gl-acc); }
:where(body.portal-body) hr { border: 0; border-top: 1px solid var(--gl-riga); }
:where(body.portal-body) input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="image"])),
:where(body.portal-body) select,
:where(body.portal-body) textarea {
    background: var(--gl-bg2); color: var(--gl-testo); border: 1px solid var(--gl-riga); border-radius: var(--gl-raggio-s); font-family: inherit;
}
:where(body.portal-body) input:where(:focus), :where(body.portal-body) select:where(:focus), :where(body.portal-body) textarea:where(:focus) { outline: none; border-color: var(--gl-acc); }
:where(body.portal-body) input:where([type="checkbox"], [type="radio"]) { accent-color: var(--gl-acc); }
:where(body.portal-body) button { border-radius: var(--gl-raggio-s); font-family: inherit; color: var(--gl-inchiostro); }
:where(body.portal-body) .card { background: var(--gl-card); border: 1px solid var(--gl-riga); border-radius: var(--gl-raggio); box-shadow: none; }

/* ── 4. I pezzi pronti per i moduli riscritti ────────────────────────────────
   Un modulo riscritto non ha più pulsanti, riquadri e tabelle suoi: usa questi. Nel suo <style>
   resta solo quello che è davvero suo (una griglia particolare, una colonna stretta).
   Il colore di un pezzo è --c: lo dà una classe c-… (in fondo al file) messa sul pezzo o su chi
   lo contiene. La regola e gli esempi sono nel README, «Riscrivere un modulo». */

/* la testata della pagina: titolo a sinistra, comandi a destra */
.gl-testa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.gl-testa h1, .gl-testa h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 1.65rem; font-weight: 800; letter-spacing: -.4px; color: var(--gl-testo); }
.gl-testa h1 > svg.i, .gl-testa h2 > svg.i { font-size: 1.5rem; color: var(--c, var(--gl-acc)); }
.gl-testa .gl-destra { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-sotto { margin: -8px 0 18px; color: var(--gl-sub); font-size: .95rem; line-height: 1.5; }
.gl-nota { color: var(--gl-tenue); font-size: .86rem; line-height: 1.6; }
.gl-nota svg.i, .gl-sotto svg.i { color: var(--gl-sub); }

/* il riquadro: un blocco della pagina, col suo titolo */
.gl-box { background: var(--gl-card); border: 1px solid var(--gl-riga); border-radius: 20px; padding: 20px 22px; margin: 0 0 16px; color: var(--gl-testo); }
.gl-box > h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 750; color: var(--gl-testo); }
.gl-box > h3 > svg.i { color: var(--c, var(--gl-acc)); font-size: 1.15rem; }
.gl-box > h3 + .gl-nota { margin: 0 0 14px; }
.gl-box.c-rosso { border-color: color-mix(in srgb, var(--gl-err) 45%, var(--gl-riga)); }
/* il titolo di un riquadro coi suoi comandi a destra: ricerca, rimandi, pulsanti */
.gl-box > h3 { flex-wrap: wrap; }
.gl-box > h3 > .gl-destra { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--gl-sub); font-size: .86rem; font-weight: 400; }
/* solo il bordo colorato (b-…), senza cambiare colore a quello che c'è dentro come farebbe c-… */
.gl-box.b-ambra { border-color: color-mix(in srgb, var(--gl-avviso) 45%, var(--gl-riga)); }  .gl-box.b-verde { border-color: color-mix(in srgb, var(--gl-ok) 45%, var(--gl-riga)); }
.gl-box.b-blu { border-color: color-mix(in srgb, var(--gl-acc) 45%, var(--gl-riga)); }  .gl-box.b-viola { border-color: color-mix(in srgb, var(--gl-viola) 45%, var(--gl-riga)); }
.gl-box.b-arancio { border-color: color-mix(in srgb, var(--gl-arancio) 45%, var(--gl-riga)); }  .gl-box.b-rosso { border-color: color-mix(in srgb, var(--gl-err) 45%, var(--gl-riga)); }
/* etichetta – valore, per una scheda di dettaglio: <dl class="gl-dati"><dt>Tecnico</dt><dd>Rossi</dd>…</dl> */
.gl-dati { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; }
.gl-dati dt { color: var(--gl-tenue); font-size: .86rem; }
.gl-dati dd { margin: 0; color: var(--gl-testo); }
/* la barra di avanzamento: <div class="gl-barra"><div style="width:40%"></div></div> */
.gl-barra { height: 8px; min-width: 90px; border-radius: 999px; overflow: hidden; background: var(--gl-card3); }
.gl-barra > div { height: 100%; border-radius: 999px; background: var(--c, var(--gl-acc)); transition: width .25s; }
.gl-separa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gl-riga); }

/* le schede cliccabili in griglia (un elenco di cose, ognuna col suo riquadro) */
.gl-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.gl-scheda { display: block; padding: 18px 20px; border: 1px solid var(--gl-riga); border-radius: 20px; text-decoration: none; color: var(--gl-testo);
             background: linear-gradient(160deg, var(--gl-card2), var(--gl-card)); transition: transform .12s ease, border-color .2s; }
a.gl-scheda:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--gl-acc)) 55%, var(--gl-riga)); }
.gl-scheda.spenta { opacity: .55; }
.gl-scheda-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.2rem; font-weight: 800; color: var(--gl-testo); }

/* i numeri in fila: quante persone, quanti locali… */
.gl-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 14px 0; }
.gl-num > div { background: var(--gl-bg2); border: 1px solid var(--gl-riga); border-radius: 14px; padding: 9px 6px; text-align: center; }
.gl-num > div > b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--c, var(--gl-testo)); font-variant-numeric: tabular-nums; }
.gl-num > div > span { display: block; font-size: .74rem; color: var(--gl-tenue); margin-top: 1px; }

/* i pulsanti: pieno (il comando della pagina), .sec (gli altri), .rosso (togliere), .piccolo, .icona */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
          background: var(--c, var(--gl-acc)); color: var(--gl-inchiostro); font: inherit; font-size: .92rem; font-weight: 750; line-height: 1.2; text-decoration: none; white-space: nowrap;
          transition: filter .15s, transform .1s, background .15s, border-color .15s; }
.gl-btn:hover { filter: brightness(1.1); }
.gl-btn:active { transform: scale(.97); }
.gl-btn:disabled, .gl-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.gl-btn.sec { background: var(--gl-card3); color: var(--gl-testo); border-color: var(--gl-riga2); }
.gl-btn.sec:hover { background: var(--gl-card4); filter: none; }
.gl-btn.rosso { background: transparent; color: #fca5a5; border-color: color-mix(in srgb, var(--gl-err) 50%, transparent); }
.gl-btn.rosso:hover { background: color-mix(in srgb, var(--gl-err) 16%, transparent); filter: none; }
.gl-btn.piccolo { padding: 6px 11px; font-size: .82rem; border-radius: 10px; gap: 6px; }
.gl-btn.icona { width: 38px; height: 38px; padding: 0; font-size: 1.05rem; }
.gl-btn.icona.piccolo { width: 30px; height: 30px; font-size: .92rem; }

/* i campi: l'etichetta sopra, il campo sotto; .gl-campi li mette in colonne */
.gl-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gl-lbl, .gl-campi label:not(.gl-spunta) { display: block; margin: 0 0 6px; color: var(--gl-sub); font-size: .82rem; font-weight: 650; }
.gl-in { width: 100%; margin: 0; padding: 10px 13px; box-sizing: border-box; outline: none; background: var(--gl-bg2); color: var(--gl-testo);
         border: 1.5px solid var(--gl-riga); border-radius: 12px; font: inherit; font-size: .95rem; transition: border-color .15s; }
.gl-in:focus { border-color: var(--c, var(--gl-acc)); }
.gl-in::placeholder { color: var(--gl-spento); }
select.gl-in { padding-right: 30px; cursor: pointer; }
.gl-in.stretto { width: auto; min-width: 120px; }
.gl-spunta { display: inline-flex; align-items: center; gap: 9px; color: var(--gl-testo); cursor: pointer; }
.gl-spunta input { width: 17px; height: 17px; margin: 0; flex: none; }
.gl-spunta small { color: var(--gl-tenue); }
/* una fila di campi e pulsanti sulla stessa riga: filtri, «aggiungi…» */
.gl-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-fila.fine { justify-content: flex-end; }

/* le tabelle */
.gl-tab { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gl-tab th { padding: 10px 12px; text-align: left; color: var(--gl-tenue); font-size: .74rem; font-weight: 750; letter-spacing: .6px; text-transform: uppercase;
             border-bottom: 1px solid var(--gl-riga); white-space: nowrap; }
.gl-tab td { padding: 11px 12px; border-top: 1px solid var(--gl-riga); vertical-align: middle; color: var(--gl-testo); }
.gl-tab tbody tr:first-child td { border-top: 0; }
.gl-tab tbody tr:hover td { background: #ffffff06; }
.gl-tab td small { color: var(--gl-tenue); }
.gl-tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.gl-tab .azioni { text-align: right; white-space: nowrap; }
.gl-tab .azioni > * + * { margin-left: 6px; }
/* .fitta: per chi ha una dozzina di colonne o centinaia di righe; .clic sulla riga che si apre con un clic */
.gl-tab.fitta { font-size: .82rem; }
.gl-tab.fitta th, .gl-tab.fitta td { padding: 8px 7px; }
.gl-tab.fitta th { white-space: normal; line-height: 1.25; }
.gl-tab.fitta .gl-in { padding: 6px 9px; font-size: .84rem; border-radius: 9px; }
.gl-tab.fitta select.gl-in { padding-right: 22px; }
.gl-tab.fitta .gl-in.stretto { min-width: 88px; }
.gl-tab.fitta .gl-btn.piccolo { padding: 5px 9px; }
.gl-tab tr.clic { cursor: pointer; }
/* una tabella larga scorre dentro il suo riquadro, non allarga la pagina */
.gl-tab-scorre { overflow-x: auto; }

/* le etichette: .gl-chip un valore (si può togliere), .gl-tag uno stato */
.gl-chip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 3px 11px; border-radius: 999px;
           background: var(--gl-bg2); border: 1px solid var(--gl-riga); color: var(--gl-sub); font-size: .84rem; }
.gl-chip small { color: var(--gl-tenue); }
.gl-chip button { display: grid; place-items: center; padding: 0; margin: 0 -4px 0 0; width: 18px; height: 18px; border: 0; border-radius: 50%; cursor: pointer;
                  background: transparent; color: var(--gl-tenue); font-size: .8rem; }
.gl-chip button:hover { background: color-mix(in srgb, var(--gl-err) 22%, transparent); color: #fca5a5; }
a.gl-tag, button.gl-tag, .gl-tag.clic { cursor: pointer; border: 0; font-family: inherit; text-decoration: none; }
a.gl-tag:hover, button.gl-tag:hover, .gl-tag.clic:hover { filter: brightness(1.2); }
.gl-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap;
          background: color-mix(in srgb, var(--c, var(--gl-tenue)) 18%, transparent); color: color-mix(in srgb, var(--c, var(--gl-tenue)) 70%, white); }

/* i messaggi: l'esito di un'azione, un avviso che resta in pagina */
.gl-msg { --c: var(--gl-ok); display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; font-size: .93rem; line-height: 1.5;
          background: color-mix(in srgb, var(--c) 11%, var(--gl-card)); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
          color: color-mix(in srgb, var(--c) 45%, white); }
.gl-msg > svg.i { flex: none; margin-top: .18em; font-size: 1.1rem; color: var(--c); }
.gl-msg b { color: var(--gl-testo); }
.gl-msg.err { --c: var(--gl-err); }  .gl-msg.avviso { --c: var(--gl-avviso); }  .gl-msg.info { --c: var(--gl-acc); }
.gl-vuoto { padding: 26px 10px; text-align: center; color: var(--gl-tenue); }

/* le linguette: più viste della stessa pagina */
.gl-tabs { display: inline-flex; gap: 2px; padding: 4px; margin: 0 0 16px; background: var(--gl-card); border: 1px solid var(--gl-riga); border-radius: 999px; flex-wrap: wrap; }
.gl-tabs > a, .gl-tabs > button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
          background: transparent; color: var(--gl-sub); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gl-tabs > a:hover, .gl-tabs > button:hover { color: var(--gl-testo); background: var(--gl-card2); }
.gl-tabs > .on, .gl-tabs > .on:hover { background: var(--gl-testo); color: var(--gl-bg); }

/* la finestra sopra la pagina: si apre aggiungendo .aperta */
.gl-finestra { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px;
               background: #020617cc; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gl-finestra.aperta { display: flex; }
.gl-finestra-corpo { width: min(720px, 100%); max-height: 90vh; overflow-y: auto; padding: 24px 26px; border-radius: 24px;
                     background: var(--gl-bg2); border: 1px solid var(--gl-riga); box-shadow: 0 30px 80px #000b; }
.gl-finestra-corpo.media { width: min(900px, 100%); }
.gl-finestra-corpo.larga { width: min(1100px, 100%); }
/* .ferma: testa e piede restano fermi e scorre solo .gl-finestra-scorre, in mezzo */
.gl-finestra-corpo.ferma { display: flex; flex-direction: column; overflow: hidden; }
.gl-finestra-corpo.ferma > .gl-finestra-scorre { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 0 10px; }
.gl-finestra-piede { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gl-riga); }
.gl-finestra-testa { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.gl-finestra-testa h3 { flex: 1; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; color: var(--gl-testo); }
.gl-finestra-testa h3 > svg.i { color: var(--c, var(--gl-acc)); }

/* un pulsante largo quanto il suo riquadro */
.gl-btn.largo { width: 100%; }

/* ── 5. Le app sul telefono ──────────────────────────────────────────────────
   Le pagine dell'app (app*.php, mobile*.php, *_mobile.php) sono pagine intere, non passano da
   index.php: <body class="gl-app">, gl_sprite() subito dopo, e tutto dentro .gl-app-pagina.
   I pezzi sono quelli della sezione 4, qui più grandi: si toccano con un dito, non col mouse.
   Le regole e l'esempio sono nel README, «Riscrivere un'app o un monitor»; il modello è app.php. */
body.gl-app { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--gl-font); color: var(--gl-testo);
              -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
              padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
              background: radial-gradient(900px 520px at 100% -10%, #1d4ed833, transparent 60%),
                          radial-gradient(700px 480px at -20% 110%, #7c3aed26, transparent 60%), var(--gl-bg);
              background-attachment: fixed; }
:where(body.gl-app, body.gl-monitor) *, :where(body.gl-app, body.gl-monitor) *::before, :where(body.gl-app, body.gl-monitor) *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(body.gl-app) a { color: var(--gl-acc); }
.gl-app-pagina { max-width: 520px; margin: 0 auto; padding: 16px 16px 36px; }
.gl-app-pagina.larga { max-width: 900px; }

/* la testata di una pagina dell'app: la freccia per tornare, il titolo, a destra quello che serve */
.gl-app-testa { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.gl-app-testa h1 { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.22rem; font-weight: 800; letter-spacing: -.2px; color: var(--gl-testo); }
.gl-app-testa h1 > svg.i { font-size: 1.25rem; color: var(--c, var(--gl-acc)); }
.gl-app-indietro { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; text-decoration: none;
                   background: var(--gl-card2); border: 1px solid var(--gl-riga2); color: var(--gl-sub); }
.gl-app-indietro:active { background: var(--gl-card4); transform: scale(.94); }

/* la home dell'app: il marchio, chi è entrato, un riquadro per ogni cosa che può aprire */
.gl-app-marchio { text-align: center; margin: 12px 0 22px; }
.gl-app-marchio img { width: 84px; height: 84px; display: block; margin: 0 auto 12px; border-radius: 50%; box-shadow: 0 10px 30px #000a; }
.gl-app-marchio b { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.3px; }
.gl-app-marchio small { display: block; margin-top: 2px; color: var(--gl-sub); font-size: .95rem; }
.gl-app-chi { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 9px 10px 9px 12px; border-radius: 999px;
              background: var(--gl-card); border: 1px solid var(--gl-riga); }
.gl-app-chi > div { flex: 1; min-width: 0; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-app-chi > div small { display: block; color: var(--gl-tenue); font-weight: 500; font-size: .78rem; }
.gl-app-tiles { display: grid; gap: 12px; }
.gl-app-tiles .gl-tile { min-height: 78px; padding: 14px 16px; }
.gl-app-tiles .gl-tile:hover { transform: none; }
.gl-app-tiles .gl-tile:active { transform: scale(.975); }
.gl-app-tiles .gl-tile .ico { width: 50px; height: 50px; font-size: 24px; }
.gl-app-tiles .gl-tile h3 { font-size: 1.08rem; }
.gl-app-tiles .gl-tile > svg.i.va { margin-left: auto; flex: none; color: var(--gl-spento); font-size: 1.1rem; position: relative; z-index: 1; }
.gl-app-tiles .gl-tile .conta + svg.i.va { margin-left: 8px; }
.gl-app-piede { margin: 26px 0 0; text-align: center; color: var(--gl-spento); font-size: .78rem; }
/* il titolo di una parte della pagina, fuori dai riquadri */
.gl-app-tit { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--gl-testo); }
.gl-app-tit > svg.i { color: var(--c, var(--gl-acc)); font-size: 1.15rem; }

/* i pezzi della sezione 4, a misura di dito. 16px nei campi: sotto, iOS ingrandisce la pagina al tocco */
body.gl-app .gl-btn { min-height: 48px; padding: 12px 18px; font-size: 1rem; border-radius: 14px; }
body.gl-app .gl-btn.piccolo { min-height: 40px; padding: 8px 14px; font-size: .88rem; border-radius: 12px; }
body.gl-app .gl-btn.icona { width: 48px; height: 48px; padding: 0; }
body.gl-app .gl-in { padding: 13px 14px; font-size: 16px; border-radius: 14px; }
body.gl-app .gl-lbl, body.gl-app .gl-campi label:not(.gl-spunta) { margin: 0 0 6px; font-size: .86rem; }
body.gl-app .gl-in + .gl-lbl, body.gl-app .gl-fila + .gl-lbl { margin-top: 14px; }
body.gl-app .gl-spunta { min-height: 40px; }
body.gl-app .gl-spunta input { width: 22px; height: 22px; }
body.gl-app .gl-box { padding: 16px; border-radius: 18px; margin: 0 0 12px; }
body.gl-app .gl-msg { font-size: .9rem; margin: 0 0 12px; }
body.gl-app .gl-tag { font-size: .76rem; padding: 4px 10px; }
body.gl-app .gl-fila { flex-wrap: nowrap; }
body.gl-app .gl-fila > .gl-in { min-width: 0; }
body.gl-app .gl-finestra { padding: 10px; align-items: flex-end; }
body.gl-app .gl-finestra-corpo { padding: 18px 16px; border-radius: 22px; max-height: 92dvh; }

/* un riquadro che si apre toccando la sua testa: <div class="gl-apri"> + .gl-apri-testa + .gl-apri-corpo.
   Si apre aggiungendo .aperto al riquadro (o come lo apre già lo script della pagina). */
.gl-apri { margin: 0 0 10px; overflow: hidden; border-radius: 18px; background: var(--gl-card); border: 1px solid var(--gl-riga); border-left: 4px solid var(--c, var(--gl-riga2)); }
.gl-apri.spento { opacity: .7; }
.gl-apri-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.gl-apri-testa:active { background: var(--gl-card2); }
.gl-apri-testa b { display: block; font-size: 1.04rem; font-weight: 800; color: var(--gl-testo); }
.gl-apri-testa small { display: block; margin-top: 2px; color: var(--gl-tenue); font-size: .82rem; line-height: 1.35; }
.gl-apri-testa > .gl-destra { flex: none; text-align: right; }
.gl-apri-corpo { display: none; padding: 14px; border-top: 1px solid var(--gl-riga); }
.gl-apri.aperto > .gl-apri-corpo { display: block; }

/* ── 6. I monitor a tocco ────────────────────────────────────────────────────
   I monitor (monitor_*.php, magazzino_tablet.php) sono schermi fissi che si toccano: pagine intere,
   <body class="gl-monitor c-…"> col colore del monitor. Qui c'è solo la base e la tastiera del PIN
   che li sblocca (kiosk_auth.php); i pezzi dei due monitor del laboratorio stanno in
   css/gl-laboratorio.css, perché il portale non li usa. */
body.gl-monitor { margin: 0; min-height: 100vh; font-family: var(--gl-font); color: var(--gl-testo);
                  user-select: none; -webkit-user-select: none;
                  background: radial-gradient(1400px 700px at 85% -20%, #1d4ed82b, transparent 60%),
                              radial-gradient(900px 600px at -10% 110%, #7c3aed22, transparent 60%), var(--gl-bg);
                  background-attachment: fixed; }
:where(body.gl-monitor) { --c: var(--gl-acc); }
:where(body.gl-monitor) button { font-family: inherit; }

/* la tastiera del PIN che sblocca un monitor: i tasti sono larghi quanto un pollice */
body.gl-pin { display: grid; place-items: center; padding: 20px; }
.gl-pin-box { width: min(380px, 92vw); text-align: center; }
.gl-pin-box > .ico { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 20px; font-size: 30px;
                     color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.gl-pin-box h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.3px; }
.gl-pin-box p { margin: 0 0 22px; color: var(--gl-sub); font-size: .98rem; }
.gl-pin-box .dots { height: 34px; display: flex; gap: 14px; justify-content: center; align-items: center; margin-bottom: 8px; }
.gl-pin-box .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gl-riga3); }
.gl-pin-box .dot.on { background: var(--c); border-color: var(--c); }
.gl-pin-box .err { height: 22px; margin-bottom: 14px; color: #fca5a5; font-size: .95rem; font-weight: 650; }
.gl-pin-box .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gl-pin-box .key { min-height: 78px; display: grid; place-items: center; border-radius: 18px; cursor: pointer; font-size: 1.75rem; font-weight: 800;
                   background: linear-gradient(160deg, var(--gl-card2), var(--gl-card)); border: 1px solid var(--gl-riga2); color: var(--gl-testo); }
.gl-pin-box .key:active { background: var(--c); border-color: var(--c); color: var(--gl-inchiostro); transform: scale(.96); }
.gl-pin-box .key.act { font-size: 1.4rem; color: var(--gl-sub); background: var(--gl-card3); }
.gl-pin-box .key.ok { background: var(--gl-ok); border-color: var(--gl-ok); color: var(--gl-inchiostro); }

/* Il logo in trasparenza sullo sfondo di portale, login e app, fermo al centro e grande quasi quanto
   lo schermo, come nella grafica scura di prima (13/10/2026, voluto da Andrea). Sta dietro a tutto:
   i riquadri sono pieni e lo coprono, si vede negli spazi vuoti. --gl-logo è quanto si vede.
   I monitor non ce l'hanno. */
:root { --gl-logo: 7%; }
body.portal-body, body.gl-app, body.gl-login {
    /* dal davanti al fondo: le due luci colorate di sempre, un velo del colore di fondo che lascia
       passare il logo quanto dice --gl-logo, il logo, il fondo */
    background: radial-gradient(1400px 700px at 85% -20%, #1d4ed833, transparent 60%),
                radial-gradient(900px 600px at -10% 110%, #7c3aed26, transparent 60%),
                linear-gradient(color-mix(in srgb, var(--gl-bg) calc(100% - var(--gl-logo)), transparent), color-mix(in srgb, var(--gl-bg) calc(100% - var(--gl-logo)), transparent)),
                url('../img/logo.png') no-repeat center 58% / auto min(88vh, 96vw),
                var(--gl-bg);
    background-attachment: fixed; }

/* ── 7. Testo grande e contrasto alto ────────────────────────────────────────
   Per chi fa fatica a leggere: lo accende la persona col pulsante «Aa» (barra del portale, home
   dell'app) e resta su quel browser o telefono (icone_lib.php, gl_vista). Non è un altro tema:
   le misure della grafica sono quasi tutte in rem, quindi basta ingrandire la base; e i grigi
   delle scritte secondarie e dei bordi sono nomi della tavolozza, quindi basta schiarirli qui.
   Le poche misure in punti fissi (stampe, fumetti delle mappe) restano com'erano. */
html[data-vista="grande"] { font-size: 118.75%;
    --gl-bg: #04070e;  --gl-bg2: #0a1222;
    --gl-sub: #eaf0f8;  --gl-tenue: #cfd9e8;  --gl-spento: #aab7cb;
    --gl-riga: #3e5387;  --gl-riga2: #5a73b0;  --gl-riga3: #7d95cf; }
html[data-vista="grande"] body { line-height: 1.5; }
html[data-vista="grande"] .gl-nota, html[data-vista="grande"] .gl-sotto { line-height: 1.65; }
html[data-vista="grande"] .gl-in::placeholder, html[data-vista="grande"] .login-box input::placeholder { color: var(--gl-tenue); }
html[data-vista="grande"] .gl-in, html[data-vista="grande"] .gl-btn.sec, html[data-vista="grande"] .gl-box, html[data-vista="grande"] .gl-tile { border-width: 1.5px; }
html[data-vista="grande"] .gl-tab tbody tr:hover td { background: #ffffff10; }
/* una tabella che con le scritte grandi non ci sta più scorre di lato dentro il suo riquadro, non si taglia */
html[data-vista="grande"] .gl-box { overflow-x: auto; }
html[data-vista="grande"] :focus-visible { outline: 3px solid var(--gl-avviso); outline-offset: 2px; }
/* la barra del portale ha un posto solo: le sue voci crescono meno del resto, o non ci starebbero */
html[data-vista="grande"] .nav-link { font-size: .8rem; padding: 9px 10px; gap: 6px; }
html[data-vista="grande"] .nav-dd-link { font-size: .84rem; }
html[data-vista="grande"] .nav-nome, html[data-vista="grande"] .user-name { display: none; }
html[data-vista="grande"] .container { max-width: 1560px; }
/* il pulsante che lo accende: tondo nella barra, largo nella home dell'app */
.btn-vista { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; flex: none;
             background: transparent; border: 1px solid var(--gl-riga2); color: var(--gl-sub); font: inherit; font-size: .86rem; font-weight: 800; letter-spacing: -.5px; transition: all .15s; }
.btn-vista:hover { background: var(--gl-card2); color: var(--gl-testo); }
[data-gl-vista][aria-pressed="true"] { background: var(--gl-acc); border-color: var(--gl-acc); color: var(--gl-inchiostro); }
[data-gl-vista] .si, [data-gl-vista][aria-pressed="true"] .no { display: none; }
[data-gl-vista][aria-pressed="true"] .si { display: inline; }

/* i colori di un pezzo: la classe va sul pezzo o su chi lo contiene */

.c-blu { --c: var(--gl-acc); }  .c-verde { --c: var(--gl-ok); }  .c-ambra { --c: var(--gl-avviso); }  .c-rosso { --c: var(--gl-err); }
.c-arancio { --c: var(--gl-arancio); }  .c-viola { --c: var(--gl-viola); }  .c-ciano { --c: var(--gl-ciano); }  .c-grigio { --c: var(--gl-tenue); }