/* =========================================================================
   NSG — sistema visivo
   Un solo file: token, primitive, componenti. Mobile-first: le regole base
   valgono sul telefono, i media query aggiungono ciò che serve sugli schermi
   larghi — non il contrario.
   ========================================================================= */

:root {
    /* superfici */
    --sfondo:        #f6f7f9;
    --superficie:    #ffffff;
    --superficie-2:  #f0f2f5;
    --superficie-3:  #e6e9ee;

    /* tratti */
    --bordo:         #dfe3e8;
    --bordo-tenue:   #eceff3;

    /* testo */
    --testo:         #111820;
    --testo-medio:   #4d5a68;
    --testo-tenue:   #7b8794;

    /* accento e stati */
    --accento:       #2f5bd7;
    --accento-scuro: #2447ab;
    --accento-tenue: #eaefff;
    --ok:            #17724d;
    --ok-tenue:      #e3f4ec;
    --attenzione:    #8a5a00;
    --attenzione-tenue: #fdf0d9;
    --errore:        #b3261e;
    --errore-tenue:  #fdeceb;

    /* forma */
    --raggio:        10px;
    --raggio-p:      7px;
    --raggio-g:      16px;

    /* profondità */
    --ombra-1: 0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.04);
    --ombra-2: 0 4px 12px -4px rgba(16,24,32,.12), 0 2px 4px rgba(16,24,32,.05);
    --ombra-3: 0 24px 48px -16px rgba(16,24,32,.28), 0 8px 16px -8px rgba(16,24,32,.12);

    /* ritmo */
    --barra-h: 56px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sfondo:        #0d1117;
        --superficie:    #151b23;
        --superficie-2:  #1c232c;
        --superficie-3:  #262e38;
        --bordo:         #2a333e;
        --bordo-tenue:   #1e252e;
        --testo:         #e8edf3;
        --testo-medio:   #a9b4c0;
        --testo-tenue:   #7d8894;
        --accento:       #7ea2ff;
        --accento-scuro: #a3bcff;
        --accento-tenue: #182338;
        --ok:            #6ecfa4;
        --ok-tenue:      #12251d;
        --attenzione:    #e0b45f;
        --attenzione-tenue: #251d0d;
        --errore:        #f08a80;
        --errore-tenue:  #2a1614;
        --ombra-1: 0 1px 2px rgba(0,0,0,.4);
        --ombra-2: 0 4px 12px -4px rgba(0,0,0,.5);
        --ombra-3: 0 24px 48px -16px rgba(0,0,0,.7);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

h1 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 16px; font-weight: 620; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0; }

/* =========================================================================
   Guscio e navigazione
   ========================================================================= */

.guscio { min-height: 100dvh; display: flex; flex-direction: column; }

.barra {
    position: sticky; top: 0; z-index: 40;
    height: var(--barra-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--bordo);
}

.marchio {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; letter-spacing: .06em; font-size: 15px;
    color: var(--testo); text-decoration: none;
}
.marchio .pastiglia {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(140deg, var(--accento), var(--accento-scuro));
    color: #fff; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

.barra nav { display: none; gap: 4px; flex: 1; }
.barra nav a {
    color: var(--testo-medio); text-decoration: none;
    padding: 7px 12px; border-radius: var(--raggio-p);
    font-size: 14px; font-weight: 500;
    transition: background .12s, color .12s;
}
.barra nav a:hover { background: var(--superficie-2); color: var(--testo); }
.barra nav a.attivo { background: var(--accento-tenue); color: var(--accento); }

.barra .spazio { flex: 1; }

.identita { display: flex; align-items: center; gap: 8px; }
.identita .nome { display: none; font-size: 13.5px; color: var(--testo-medio); }
.iniziali {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--superficie-3); color: var(--testo-medio);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 650; letter-spacing: .02em;
}

.hamburger {
    display: grid; place-items: center;
    width: 36px; height: 36px; padding: 0;
    background: none; border: none; color: var(--testo-medio); cursor: pointer;
    border-radius: var(--raggio-p);
}
.hamburger:hover { background: var(--superficie-2); }

/* cassetto di navigazione su mobile */
.cassetto {
    position: fixed; inset: var(--barra-h) 0 0; z-index: 39;
    background: var(--superficie);
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
    animation: entra-da-sopra .16s ease-out;
}
.cassetto a {
    display: block; padding: 13px 14px; border-radius: var(--raggio);
    color: var(--testo); text-decoration: none; font-weight: 500;
}
.cassetto a.attivo { background: var(--accento-tenue); color: var(--accento); }
.cassetto form { margin-top: auto; }
.cassetto form button { width: 100%; }

@keyframes entra-da-sopra { from { opacity: 0; transform: translateY(-6px); } }

main {
    flex: 1;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
    width: 100%;
}

@media (min-width: 900px) {
    :root { --barra-h: 60px; }
    .barra { padding: 0 22px; gap: 22px; }
    .barra nav { display: flex; }
    .identita .nome { display: block; }
    .hamburger { display: none; }
    .cassetto { display: none; }
    main { padding: 24px 22px 60px; }
}

/* =========================================================================
   Primitive
   ========================================================================= */

input, select, textarea, button { font: inherit; }

input, select, textarea {
    width: 100%;
    color: var(--testo);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-p);
    padding: 9px 11px;
    transition: border-color .12s, box-shadow .12s;
    /* 16px reali sul telefono: sotto questa soglia iOS zooma sul focus */
    font-size: 16px;
}
@media (min-width: 900px) { input, select, textarea { font-size: 14px; padding: 7px 10px; } }

input:hover, select:hover { border-color: var(--testo-tenue); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 18%, transparent);
}
input:disabled, select:disabled { background: var(--superficie-2); color: var(--testo-tenue); cursor: not-allowed; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span {
    font-size: 12px; font-weight: 560; color: var(--testo-medio);
    letter-spacing: .01em;
}

button {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: var(--raggio-p);
    background: var(--accento); color: #fff;
    font-size: 14.5px; font-weight: 550;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, box-shadow .12s, transform .06s;
}
button:hover:not(:disabled) { background: var(--accento-scuro); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
button:disabled { opacity: .42; cursor: not-allowed; }

button.neutro {
    background: var(--superficie); color: var(--testo); border-color: var(--bordo);
    box-shadow: var(--ombra-1);
}
button.neutro:hover:not(:disabled) { background: var(--superficie-2); }

button.fantasma { background: none; color: var(--testo-medio); }
button.fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--testo); }

button.pericolo { background: var(--errore); }
button.pericolo:hover:not(:disabled) { background: color-mix(in srgb, var(--errore) 85%, #000); }

button.testo {
    background: none; border: none; color: var(--accento);
    padding: 0; font-weight: 500; text-align: left;
}
button.testo:hover:not(:disabled) { text-decoration: underline; background: none; }

button.minuto {
    padding: 3px 7px; font-size: 11px; font-weight: 600;
    background: var(--superficie-2); color: var(--testo-tenue);
    border-radius: 5px; letter-spacing: .03em;
}
button.minuto:hover:not(:disabled) { background: var(--superficie-3); color: var(--testo); }

/* =========================================================================
   Componenti
   ========================================================================= */

.scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
}

.intestazione-pagina {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.intestazione-pagina .contesto { color: var(--testo-tenue); font-size: 13.5px; }

/* --- barra dei comandi --- */
.comandi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
}
.comandi .azioni { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.comandi .azioni button { flex: 1; min-width: 120px; }

@media (min-width: 900px) {
    .comandi { grid-template-columns: auto auto 1fr; align-items: end; }
    .comandi .azioni { grid-column: auto; flex: 1; justify-content: flex-start; }
    .comandi .azioni button { flex: 0 0 auto; min-width: 0; }
}

/* --- semaforo delle validazioni --- */
.stato {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.stato .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stato.verde  { background: var(--ok-tenue);         color: var(--ok); }
.stato.giallo { background: var(--attenzione-tenue); color: var(--attenzione); }
.stato.rosso  { background: var(--errore-tenue);     color: var(--errore); }
.stato.rosso .punto { animation: pulsa 1.8s ease-in-out infinite; }

@keyframes pulsa { 50% { opacity: .35; } }

@media (min-width: 900px) { .comandi .stato { margin-left: auto; } }

/* --- messaggi --- */
.messaggio {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 14px;
    border-radius: var(--raggio);
    background: var(--accento-tenue); color: var(--testo);
    border: 1px solid color-mix(in srgb, var(--accento) 22%, transparent);
    font-size: 14px;
    animation: entra .18s ease-out;
}
.messaggio.errore {
    background: var(--errore-tenue);
    border-color: color-mix(in srgb, var(--errore) 28%, transparent);
}
.messaggio button { margin-left: auto; }

@keyframes entra { from { opacity: 0; transform: translateY(-4px); } }

.vuoto {
    padding: 48px 20px; text-align: center;
    color: var(--testo-tenue);
    background: var(--superficie); border: 1px dashed var(--bordo);
    border-radius: var(--raggio);
}
.vuoto strong { display: block; color: var(--testo-medio); margin-bottom: 4px; font-weight: 600; }

/* --- pannello anomalie --- */
.anomalie { margin-bottom: 14px; overflow: hidden; }
.anomalie > header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; cursor: pointer;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--bordo);
    user-select: none;
}
.anomalie > header .conta {
    margin-left: auto; font-size: 12.5px; color: var(--testo-tenue);
    font-variant-numeric: tabular-nums;
}
.anomalie > header .freccia { color: var(--testo-tenue); transition: transform .15s; }
.anomalie.chiusa > header { border-bottom: none; }
.anomalie.chiusa > header .freccia { transform: rotate(-90deg); }

.anomalie ul { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.anomalie li {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding: 11px 13px; border-radius: var(--raggio-p);
    border-left: 3px solid transparent;
    font-size: 14px;
}
.anomalie li.bloccante { background: var(--errore-tenue);     border-left-color: var(--errore); }
.anomalie li.attenzione{ background: var(--attenzione-tenue); border-left-color: var(--attenzione); }
.anomalie li .conteggio {
    font-size: 12px; color: var(--testo-medio);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.anomalie li .marchio-blocco {
    font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--errore);
    padding: 2px 7px; border-radius: 4px;
    background: color-mix(in srgb, var(--errore) 12%, transparent);
}

.dettaglio { padding: 0 8px 12px; }
.dettaglio > .scheda { padding: 12px 14px; background: var(--superficie-2); }
.dettaglio h3 { margin-bottom: 8px; }
.dettaglio .voce {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--bordo-tenue);
    font-size: 13px;
}
.dettaglio .voce:last-of-type { border-bottom: none; }

/* =========================================================================
   Griglia della giornata
   Stessa marcatura su ogni schermo: su telefono ogni riga è una scheda con
   le etichette accanto ai valori, da 900px in su diventa una tabella.
   ========================================================================= */

.griglia { display: flex; flex-direction: column; gap: 10px; }

.griglia .capofila { display: none; }

.griglia .riga {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
    transition: border-color .12s, box-shadow .12s;
}
.griglia .riga.modificata {
    border-color: color-mix(in srgb, var(--attenzione) 45%, transparent);
    background: color-mix(in srgb, var(--attenzione-tenue) 55%, var(--superficie));
}
.griglia .riga.esclusa { opacity: .62; }

.cella { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cella::before {
    content: attr(data-etichetta);
    font-size: 10.5px; font-weight: 650; letter-spacing: .05em;
    text-transform: uppercase; color: var(--testo-tenue);
}
.cella.larga { grid-column: 1 / -1; }

.cella .valore { font-size: 14px; }
.cella .valore.numero { font-variant-numeric: tabular-nums; }

.entita { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.entita .codice {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px; font-weight: 600;
    color: var(--accento);
    background: var(--accento-tenue);
    padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}
.entita .descrizione {
    font-size: 14px; color: var(--testo);
    overflow: hidden; text-overflow: ellipsis;
}

input.quantita { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
input.quantita.corretta {
    border-color: var(--attenzione);
    background: color-mix(in srgb, var(--attenzione-tenue) 60%, var(--superficie));
}

.formula {
    font-size: 12.5px; color: var(--testo-medio);
    line-height: 1.45;
    padding: 8px 10px;
    background: var(--superficie-2);
    border-radius: var(--raggio-p);
    border-left: 2px solid var(--bordo);
}

@media (min-width: 900px) {
    /* Niente overflow:hidden qui: farebbe agganciare l'intestazione fissa a questo
       contenitore invece che alla finestra, e le righe finirebbero per coprirla.
       Gli angoli si arrotondano sul primo e sull'ultimo elemento.
       isolation crea un contesto di impilamento locale, così l'ordine fra
       intestazione e righe non dipende dal resto della pagina. */
    .griglia {
        gap: 0;
        background: var(--superficie);
        border: 1px solid var(--bordo);
        border-radius: var(--raggio);
        box-shadow: var(--ombra-1);
        isolation: isolate;
    }
    .griglia .capofila,
    .griglia .riga {
        display: grid;
        grid-template-columns:
            minmax(200px, 2fr)   /* cliente  */
            minmax(190px, 2fr)   /* articolo */
            84px                 /* proposta */
            108px                /* quantita */
            minmax(160px, 1.4fr) /* giro     */
            60px                 /* pos      */
            90px                 /* vettore  */
            90px                 /* turno    */
            minmax(180px, 1.6fr);/* formula  */
        gap: 0 12px;
        align-items: center;
        padding: 0 14px;
        border: none; border-radius: 0; box-shadow: none;
    }

    /* Gli angoli tornano solo agli estremi della griglia, dopo l'azzeramento sopra. */
    .griglia > :first-child { border-radius: var(--raggio) var(--raggio) 0 0; }
    .griglia > :last-child  { border-radius: 0 0 var(--raggio) var(--raggio); }

    .griglia .capofila {
        position: sticky; top: var(--barra-h);
        z-index: 3;   /* sopra righe, fermate e capigruppo */
        height: 38px;
        background: var(--superficie-2);
        border-bottom: 1px solid var(--bordo);
        font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
        text-transform: uppercase; color: var(--testo-tenue);
    }
    .griglia .capofila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .griglia .capofila .destra { text-align: right; }

    .griglia .riga {
        position: relative; z-index: 1;   /* scorre sotto l'intestazione */
        min-height: 46px; padding-top: 6px; padding-bottom: 6px;
        border-bottom: 1px solid var(--bordo-tenue);
        background: var(--superficie);
    }
    .griglia .riga:last-child { border-bottom: none; }
    .griglia .riga:hover { background: var(--superficie-2); }

    .cella { flex-direction: row; align-items: center; gap: 0; }
    .cella::before { display: none; }
    .cella.larga { grid-column: auto; }
    .cella .valore.numero { width: 100%; text-align: right; }

    .entita { flex-direction: column; align-items: flex-start; gap: 1px; }
    .entita .descrizione { font-size: 12.5px; color: var(--testo-medio); white-space: nowrap; width: 100%; }

    .formula {
        background: none; border: none; padding: 0;
        font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

/* =========================================================================
   Foglio scorrevole (assegnazione massiva)
   Dal basso sul telefono, riquadro centrato sul desktop.
   ========================================================================= */

.velo {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(8, 12, 18, .45);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: sfuma .15s ease-out;
}
@keyframes sfuma { from { opacity: 0; } }

.foglio {
    width: 100%; max-height: 88dvh; overflow-y: auto;
    background: var(--superficie);
    border-radius: var(--raggio-g) var(--raggio-g) 0 0;
    box-shadow: var(--ombra-3);
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    animation: sali .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sali { from { transform: translateY(14px); opacity: .6; } }

.foglio .maniglia {
    width: 38px; height: 4px; border-radius: 2px;
    background: var(--superficie-3);
    margin: 6px auto 14px;
}
.foglio h2 { margin-bottom: 4px; }
.foglio .nota { color: var(--testo-medio); font-size: 13.5px; margin: 0 0 16px; }
.foglio .campo { margin-bottom: 13px; }
.foglio .azioni { display: flex; gap: 10px; margin-top: 18px; }
.foglio .azioni button { flex: 1; }

@media (min-width: 900px) {
    .velo { align-items: center; }
    .foglio {
        max-width: 420px; border-radius: var(--raggio-g);
        padding: 22px 22px 20px;
        animation: comparsa .16s ease-out;
    }
    .foglio .maniglia { display: none; }
    .foglio .azioni button { flex: 0 0 auto; }
    .foglio .azioni button:first-child { flex: 1; }
}
@keyframes comparsa { from { opacity: 0; transform: scale(.97); } }

/* =========================================================================
   Accesso
   ========================================================================= */

.accesso {
    min-height: 100dvh;
    display: grid; place-items: center;
    padding: 24px 18px;
    background:
        radial-gradient(1100px 520px at 12% -8%, var(--accento-tenue), transparent 62%),
        var(--sfondo);
}
.accesso form {
    width: 100%; max-width: 380px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-g);
    box-shadow: var(--ombra-2);
    padding: 30px 26px 26px;
}
.accesso .stemma {
    width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(140deg, var(--accento), var(--accento-scuro));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 15px; letter-spacing: .04em;
    margin-bottom: 16px;
}
.accesso h1 { margin-bottom: 5px; }
.accesso .sottotitolo { color: var(--testo-tenue); font-size: 13.5px; margin: 0 0 24px; }
.accesso .campo { margin-bottom: 15px; }
.accesso button[type=submit] { width: 100%; margin-top: 8px; padding: 12px; }
.accesso .errore {
    background: var(--errore-tenue); color: var(--errore);
    border: 1px solid color-mix(in srgb, var(--errore) 25%, transparent);
    padding: 11px 13px; border-radius: var(--raggio-p);
    margin: 0 0 18px; font-size: 13.5px;
}

/* =========================================================================
   Tabella semplice (chiavi API e simili)
   ========================================================================= */

.elenco { display: flex; flex-direction: column; gap: 10px; }
.elenco .voce {
    display: grid; gap: 4px 14px;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px;
}
.elenco .voce .titolo { font-weight: 580; }
.elenco .voce .meta {
    grid-column: 1 / -1;
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--testo-tenue);
}
.elenco .voce .meta .mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--testo-medio);
}

.pastiglia-stato {
    font-size: 11px; font-weight: 650; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 999px;
}
.pastiglia-stato.attiva  { background: var(--ok-tenue);     color: var(--ok); }
.pastiglia-stato.revocata{ background: var(--superficie-3); color: var(--testo-tenue); }
.pastiglia-stato.scaduta { background: var(--attenzione-tenue); color: var(--attenzione); }

.segreto {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px; word-break: break-all;
    background: var(--superficie-2);
    border: 1px dashed var(--bordo);
    border-radius: var(--raggio-p);
    padding: 12px 14px; margin: 10px 0;
    -webkit-user-select: all; user-select: all;
}

/* =========================================================================
   Accessibilità e preferenze
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.solo-lettori {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.solo-desktop { display: none; }
@media (min-width: 900px) { .solo-desktop { display: block; } }

/* --- gestione utenti --- */
.permessi {
    grid-column: 1 / -1;
    display: grid; gap: 10px;
    grid-template-columns: 1fr;
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--bordo-tenue);
}
.permessi .azioni-utente { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 700px) {
    .permessi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
    .permessi .azioni-utente { grid-column: 1 / -1; }
}

/* --- linea temporale delle versioni di configurazione --- */
.versioni {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--bordo-tenue);
}
.versione {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; border-radius: var(--raggio-p);
    border-left: 3px solid var(--bordo);
    background: var(--superficie-2);
    font-size: 13px;
}
.versione.vigente { border-left-color: var(--ok);      background: var(--ok-tenue); }
.versione.futura  { border-left-color: var(--accento); background: var(--accento-tenue); }
.versione.storica { opacity: .6; }
.versione .periodo { font-weight: 560; white-space: nowrap; }
.versione .qualifica {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650;
    color: var(--testo-medio);
    padding: 2px 7px; border-radius: 4px; background: var(--superficie);
}
.versione .dettagli { color: var(--testo-medio); font-size: 12.5px; }
.versione button { margin-left: auto; }

/* --- griglia dell'impegno singolo: tre sole colonne --- */
@media (min-width: 900px) {
    .griglia .capofila-impegno,
    .griglia .riga-impegno {
        grid-template-columns: minmax(240px, 2fr) minmax(220px, 1.6fr) 120px;
    }
}

/* =========================================================================
   Filtri
   ========================================================================= */

.filtri { padding: 12px 14px; margin-bottom: 14px; }

.riga-filtri {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
}
.riga-filtri .cerca { grid-column: 1 / -1; }

@media (min-width: 900px) {
    .riga-filtri { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)); }
    .riga-filtri .cerca { grid-column: auto; }
}

.scorciatoie {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--bordo-tenue);
}

.pillola {
    background: var(--superficie-2); color: var(--testo-medio);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px; font-weight: 500;
}
.pillola:hover:not(:disabled) { background: var(--superficie-3); color: var(--testo); }
.pillola.accesa {
    background: var(--accento); color: #fff; border-color: transparent;
}
.pillola.accesa:hover:not(:disabled) { background: var(--accento-scuro); }

.esito-filtro {
    margin-left: auto; font-size: 12.5px; color: var(--testo-tenue);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Gruppi e fermate
   ========================================================================= */

.capogruppo {
    position: relative; z-index: 2;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px;
    background: var(--superficie-2);
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo-tenue);
    font-size: 13.5px;
}
.capogruppo:first-child { border-top: none; }
.capogruppo .nome { color: var(--testo-medio); }
.capogruppo .somma {
    margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
}
.capogruppo.giro {
    background: var(--accento-tenue);
    border-left: 3px solid var(--accento);
}

.fermata {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px 8px 22px;
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo-tenue);
    font-size: 13px;
}
.fermata .posizione {
    min-width: 26px; height: 24px; padding: 0 6px;
    display: inline-grid; place-items: center;
    border-radius: 6px;
    background: var(--superficie-3); color: var(--testo-medio);
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fermata .posizione.assente { background: var(--attenzione-tenue); color: var(--attenzione); }
.fermata .nome { color: var(--testo-medio); }
.fermata .somma { margin-left: auto; font-variant-numeric: tabular-nums; }
.fermata .frecce { display: flex; gap: 4px; }
.fermata .frecce button { min-width: 30px; font-size: 13px; padding: 3px 6px; }

/* Su mobile la griglia è a schede: gruppi e fermate diventano separatori pieni. */
@media (max-width: 899px) {
    .capogruppo, .fermata {
        border-radius: var(--raggio-p);
        border: 1px solid var(--bordo);
        margin-top: 6px;
    }
    .capogruppo.giro { margin-top: 14px; }
}

.solo-mobile { display: block; }
@media (min-width: 900px) { .solo-mobile { display: none; } }

/* =========================================================================
   Foglio di consegna — quello che il conducente porta sul mezzo
   ========================================================================= */

.stampa { max-width: 900px; margin: 0 auto; padding: 18px 16px 60px; }

.comandi-stampa {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding: 14px; margin-bottom: 20px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.comandi-stampa .campo { flex: 1 1 130px; }
.comandi-stampa .ritorno { color: var(--testo-medio); font-size: 13.5px; text-decoration: none; padding: 10px 4px; }
.comandi-stampa .ritorno:hover { color: var(--accento); text-decoration: underline; }

.foglio-giro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--ombra-1);
}
.foglio-giro > header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 2px solid var(--testo);
}
.foglio-giro h1 { font-size: 22px; letter-spacing: -.01em; }
.foglio-giro .sottotitolo { margin: 2px 0 0; color: var(--testo-medio); font-size: 14px; }
.foglio-giro .riepilogo { text-align: right; }
.foglio-giro .data { margin: 0; font-weight: 600; font-size: 14px; }
.foglio-giro .conta { margin: 2px 0 0; color: var(--testo-medio); font-size: 12.5px; }

.fermata-stampa { margin-bottom: 18px; break-inside: avoid; page-break-inside: avoid; }
.fermata-stampa .testa {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; margin-bottom: 6px;
    background: var(--superficie-2);
    border-radius: var(--raggio-p);
}
.fermata-stampa .numero {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    background: var(--testo); color: var(--superficie);
    border-radius: 50%; font-weight: 700; font-size: 14px;
}
.fermata-stampa .cliente { display: block; font-weight: 620; font-size: 15px; }
.fermata-stampa .codice-cliente {
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--testo-medio);
}
.fermata-stampa .firma {
    margin-left: auto; min-width: 150px;
    border-bottom: 1px solid var(--testo-tenue);
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--testo-tenue); text-align: right; padding-bottom: 2px;
}

.fermata-stampa table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fermata-stampa th {
    text-align: left; padding: 5px 8px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue); border-bottom: 1px solid var(--bordo);
}
.fermata-stampa td { padding: 6px 8px; border-bottom: 1px solid var(--bordo-tenue); }
.fermata-stampa .destra { text-align: right; font-variant-numeric: tabular-nums; }
.fermata-stampa .spunta { width: 30px; text-align: center; }
.fermata-stampa tbody .spunta::after {
    content: ""; display: inline-block;
    width: 14px; height: 14px;
    border: 1.5px solid var(--testo-tenue); border-radius: 3px;
}
.fermata-stampa tfoot td {
    font-weight: 650; border-top: 1.5px solid var(--testo); border-bottom: none;
}

@media print {
    @page { margin: 14mm; }

    /* In stampa resta solo il foglio: la navigazione e i comandi servono a video. */
    .barra, .cassetto, .comandi-stampa, .intestazione-pagina { display: none !important; }
    main { padding: 0 !important; }
    .stampa { max-width: none; padding: 0; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .foglio-giro {
        border: none; box-shadow: none; padding: 0;
        margin: 0 0 10mm;
        break-after: page; page-break-after: always;
    }
    .foglio-giro:last-child { break-after: auto; page-break-after: auto; }
    .foglio-giro > header { border-bottom: 1.5pt solid #000; }

    .fermata-stampa .testa { background: #f2f2f2; }
    .fermata-stampa .numero { background: #000; color: #fff; }
    .fermata-stampa .firma { min-width: 45mm; border-bottom: .5pt solid #000; }
    .fermata-stampa th { color: #444; border-bottom: .5pt solid #000; }
    .fermata-stampa td { border-bottom: .25pt solid #bbb; }
    .fermata-stampa tfoot td { border-top: 1pt solid #000; }
}

.esito-filtro a { color: var(--accento); text-decoration: none; }
.esito-filtro a:hover { text-decoration: underline; }

/* --- scelta della modalità di ricalcolo --- */
.scelte { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.scelte .scelta {
    display: block; text-align: left;
    padding: 14px 16px; width: 100%;
    white-space: normal;
}
.scelte .scelta .titolo { display: block; font-weight: 620; font-size: 14.5px; margin-bottom: 3px; }
.scelte .scelta .spiega { display: block; font-size: 13px; color: var(--testo-medio); line-height: 1.45; }
.scelte .scelta:hover:not(:disabled) { border-color: var(--accento); }

/* =========================================================================
   Manuale
   Due colonne su schermo largo: indice a sinistra che segue la lettura,
   testo a destra su misura di lettura. Sul telefono l'indice è a scomparsa.
   ========================================================================= */

.manuale { display: block; margin: -16px -14px 0; }

.manuale .apri-indice {
    position: sticky; top: calc(var(--barra-h) + 8px); z-index: 12;
    margin: 12px 14px 0;
}

.manuale .indice { display: none; }
.manuale.indice-aperto .indice {
    display: block;
    position: fixed; inset: var(--barra-h) 0 0; z-index: 11;
    background: var(--superficie);
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.manuale .testo { padding: 16px 16px 80px; max-width: 100%; }

@media (min-width: 1000px) {
    .manuale {
        display: grid;
        grid-template-columns: 268px minmax(0, 1fr);
        gap: 40px;
        margin: -24px -22px 0;
        align-items: start;
    }
    .manuale .apri-indice { display: none; }

    .manuale .indice {
        display: block;
        position: sticky; top: var(--barra-h);
        max-height: calc(100dvh - var(--barra-h));
        overflow-y: auto;
        padding: 26px 8px 40px 22px;
        border-right: 1px solid var(--bordo);
    }
    .manuale .testo { padding: 26px 32px 100px 0; max-width: 78ch; }
}

/* --- indice --- */
.manuale .indice .gruppo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--testo-tenue);
    margin: 22px 0 7px 10px;
}
.manuale .indice .gruppo:first-of-type { margin-top: 18px; }

.manuale .indice a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--raggio-p);
    border-left: 2px solid transparent;
    color: var(--testo-medio); text-decoration: none;
    font-size: 13.5px; line-height: 1.35;
    transition: color .12s, background .12s, border-color .12s;
}
.manuale .indice a:hover { background: var(--superficie-2); color: var(--testo); }
.manuale .indice a.attiva {
    color: var(--accento); font-weight: 600;
    border-left-color: var(--accento);
    background: var(--accento-tenue);
}

.cerca-manuale { position: relative; margin-bottom: 6px; }
.cerca-manuale .esito {
    display: block; margin-top: 6px; padding-left: 2px;
    font-size: 12px; color: var(--testo-tenue);
}

/* --- apertura --- */
.manuale .apertura {
    padding-bottom: 22px; margin-bottom: 10px;
    border-bottom: 1px solid var(--bordo);
}
.manuale .occhiello {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accento); margin: 0 0 8px;
}
.manuale .apertura h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.12; letter-spacing: -.02em; }
.manuale .sommario { margin: 12px 0 0; font-size: 16.5px; color: var(--testo-medio); line-height: 1.55; }

/* --- sezioni --- */
.manuale section { padding: 34px 0; border-bottom: 1px solid var(--bordo-tenue); scroll-margin-top: calc(var(--barra-h) + 16px); }
.manuale section:last-of-type { border-bottom: none; }
.manuale.in-ricerca section { border-bottom: 1px solid var(--bordo-tenue); }

.manuale h2 { font-size: 21px; letter-spacing: -.015em; margin-bottom: 14px; }
.manuale h3 { font-size: 15px; margin: 26px 0 10px; }
.manuale p { margin: 0 0 14px; line-height: 1.62; }
.manuale a { color: var(--accento); }

.manuale .mono, .manuale .esempio {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .89em;
}
.manuale .esempio {
    background: var(--superficie-2); color: var(--testo-medio);
    padding: 2px 7px; border-radius: 4px;
}
.manuale .solo-admin {
    display: inline-block;
    font-size: 11.5px; font-weight: 600;
    color: var(--attenzione); background: var(--attenzione-tenue);
    padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
}

/* --- riquadri --- */
.manuale .riquadro {
    background: var(--accento-tenue);
    border-left: 3px solid var(--accento);
    border-radius: 0 var(--raggio-p) var(--raggio-p) 0;
    padding: 14px 18px; margin: 0 0 18px;
}
.manuale .riquadro p:last-child { margin-bottom: 0; }
.manuale .riquadro.attenzione {
    background: var(--attenzione-tenue);
    border-left-color: var(--attenzione);
}

/* --- elenchi --- */
.manuale .elenco-puntato { margin: 0 0 18px; padding-left: 22px; }
.manuale .elenco-puntato li { margin-bottom: 9px; line-height: 1.58; }

.manuale .passi { margin: 0 0 18px; padding-left: 24px; }
.manuale .passi li { margin-bottom: 10px; line-height: 1.58; }

.manuale .flusso {
    list-style: none; counter-reset: passo;
    margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.manuale .flusso li {
    counter-increment: passo; position: relative;
    padding: 13px 0 13px 46px;
    border-bottom: 1px solid var(--bordo-tenue);
}
.manuale .flusso li:last-child { border-bottom: none; }
.manuale .flusso li::before {
    content: counter(passo);
    position: absolute; left: 0; top: 12px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--accento-tenue); color: var(--accento);
    border-radius: 50%; font-size: 12.5px; font-weight: 700;
}
.manuale .flusso b { display: block; font-size: 15px; font-weight: 620; margin-bottom: 2px; }
.manuale .flusso span { color: var(--testo-medio); font-size: 14px; }

/* --- glossario --- */
.manuale .glossario { margin: 0; }
.manuale .glossario dt {
    font-weight: 650; font-size: 15px;
    margin-top: 18px; padding-bottom: 3px;
}
.manuale .glossario dt:first-child { margin-top: 0; }
.manuale .glossario dd {
    margin: 0; padding-left: 14px;
    border-left: 2px solid var(--bordo);
    color: var(--testo-medio); line-height: 1.58;
}

/* --- confronto fra due scelte --- */
.manuale .confronto {
    display: grid; gap: 12px; margin: 0 0 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) { .manuale .confronto { grid-template-columns: 1fr 1fr; } }

.manuale .scelta-manuale {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 16px 18px;
    box-shadow: var(--ombra-1);
}
.manuale .scelta-manuale h3 { margin: 0 0 8px; font-size: 14.5px; }
.manuale .scelta-manuale p { font-size: 14px; margin-bottom: 8px; }
.manuale .scelta-manuale .quando {
    margin: 0; font-size: 12.5px; font-weight: 600; color: var(--accento);
}

/* --- semafori --- */
.manuale .semafori { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.manuale .semaforo-voce {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 15px; border-radius: var(--raggio-p);
    border-left: 3px solid;
}
.manuale .semaforo-voce .pallino {
    width: 11px; height: 11px; border-radius: 50%;
    background: currentColor; margin-top: 5px; flex: none;
}
.manuale .semaforo-voce b { display: block; font-size: 14.5px; }
.manuale .semaforo-voce span:not(.pallino) { color: var(--testo-medio); font-size: 13.5px; }
.manuale .semaforo-voce.verde  { background: var(--ok-tenue);         border-left-color: var(--ok);         color: var(--ok); }
.manuale .semaforo-voce.giallo { background: var(--attenzione-tenue); border-left-color: var(--attenzione); color: var(--attenzione); }
.manuale .semaforo-voce.rosso  { background: var(--errore-tenue);     border-left-color: var(--errore);     color: var(--errore); }
.manuale .semaforo-voce div { color: var(--testo); }

/* --- tabelle --- */
.manuale .tabella-avvolta {
    overflow-x: auto; margin: 0 0 18px;
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    background: var(--superficie);
}
.manuale table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manuale th {
    text-align: left; padding: 10px 14px;
    background: var(--superficie-2); color: var(--testo-tenue);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 650;
    border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
.manuale td { padding: 10px 14px; border-bottom: 1px solid var(--bordo-tenue); vertical-align: top; line-height: 1.5; }
.manuale tbody tr:last-child td { border-bottom: none; }

/* --- domande a scomparsa --- */
.manuale details {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); margin-bottom: 8px;
    overflow: hidden;
}
.manuale details[open] { box-shadow: var(--ombra-1); }
.manuale summary {
    padding: 13px 16px; cursor: pointer;
    font-weight: 560; font-size: 14.5px;
    list-style: none; position: relative; padding-right: 44px;
}
.manuale summary::-webkit-details-marker { display: none; }
.manuale summary::after {
    content: "+"; position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 18px; color: var(--testo-tenue); line-height: 1;
}
.manuale details[open] summary::after { content: "−"; }
.manuale summary:hover { background: var(--superficie-2); }
.manuale details p {
    padding: 0 16px 14px; margin: 0;
    color: var(--testo-medio); font-size: 14px;
}

.manuale .chiusura {
    padding-top: 28px; color: var(--testo-tenue); font-size: 13px;
}

@media print {
    .manuale .indice, .manuale .apri-indice, .cerca-manuale { display: none !important; }
    .manuale { display: block; margin: 0; }
    .manuale .testo { max-width: none; padding: 0; }
    .manuale details { border: none; }
    .manuale details p { display: block !important; }
    .manuale section { break-inside: avoid-page; }
}