/* =========================================================================
   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); }

/*  Il menù su due piani: l'operatività si legge nella barra, le impostazioni
    stanno dietro una voce sola. Prima erano quattordici voci in fila e «Utenti»
    aveva lo stesso peso di «Giornata».  */
.barra nav a.principale { color: var(--testo); font-weight: 650; }
.barra nav a.principale.attivo { background: var(--accento-tenue); color: var(--accento); }

.divisore-menu {
    width: 1px; align-self: stretch; margin: 6px 6px;
    background: var(--bordo);
}

.gruppo-menu { position: relative; display: flex; align-items: center; }
.voce-menu {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; color: var(--testo-medio);
    padding: 7px 12px; border-radius: var(--raggio-p);
    font-size: 14px; font-weight: 500; height: auto;
}
.voce-menu:hover:not(:disabled) { background: var(--superficie-2); color: var(--testo); }
.voce-menu.aperta { background: var(--superficie-3); color: var(--testo); }

.tendina-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 220px; padding: 6px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-2);
    display: flex; flex-direction: column; gap: 2px;
}
.tendina-menu a { padding: 8px 10px; border-radius: var(--raggio-p); }
.divisore-tendina { height: 1px; background: var(--bordo-tenue); margin: 4px 0; }

/*  Un velo invisibile che chiude la tendina al primo clic fuori: senza, resta
    aperta e copre quel che si vuole leggere.  */
.velo-trasparente { position: fixed; inset: 0; z-index: 50; }

.cassetto .titolo-gruppo {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--testo-tenue); padding: 10px 10px 2px;
}
.cassetto a.principale { font-weight: 650; color: var(--testo); }

/*  Il campanello. Rosso con la parola «avvisi» accanto, perché un pallino lo si
    impara a non vedere; e sta nella barra, quindi su qualsiasi videata.  */
.campanello-zona { position: relative; display: flex; align-items: center; }
.campanello {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; color: var(--testo-medio);
    padding: 6px 9px; height: auto; border-radius: var(--raggio-p);
}
.campanello:hover:not(:disabled) { background: var(--superficie-2); color: var(--testo); }
.campanello.accesi { background: var(--errore-tenue); color: var(--errore); }
.campanello.accesi:hover:not(:disabled) { background: var(--errore-tenue); color: var(--errore); }
.etichetta-avvisi { font-size: 12.5px; font-weight: 650; }

.pannello-avvisi {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    width: min(420px, calc(100vw - 32px));
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-2);
    padding: 12px 14px;
}
.pannello-avvisi header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pannello-avvisi footer { margin-top: 10px; font-size: 13px; }
.elenco-avvisi { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow: auto; }
.elenco-avvisi li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px;
    padding: 8px 0; border-top: 1px solid var(--bordo-tenue);
    font-size: 13px; align-items: baseline;
}
.elenco-avvisi .quando { color: var(--testo-tenue); font-size: 12px; white-space: nowrap; }
.elenco-avvisi .che-cosa { font-weight: 600; }
.elenco-avvisi .esito-avviso {
    font-size: 11px; padding: 1px 6px; border-radius: 999px;
    background: var(--errore-tenue); color: var(--errore); white-space: nowrap;
}
.elenco-avvisi .dettaglio-avviso {
    grid-column: 1 / -1; color: var(--testo-medio); font-size: 12.5px; line-height: 1.4;
}

.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); }

/*  Il comando che non si disfa.

    Non rosso — il rosso in questa interfaccia vuol dire «qualcosa è andato male»,
    e generare è una cosa che va bene — ma nemmeno azzurro come gli altri, che si
    disfano tutti. L'ambra è il colore con cui la giornata segna le cose da
    guardare prima di procedere, ed è quello che serve qui.  */
button.definitivo { background: var(--attenzione); }
button.definitivo:hover:not(:disabled) { background: color-mix(in srgb, var(--attenzione) 85%, #000); }

/*  Staccato dagli altri comandi, e con un filo che lo separa: prima «Genera
    impegni» confinava con «Aggiungi nuovi» e con «cerca».  */
.zona-definitiva {
    display: flex; align-items: center; gap: 8px;
    margin-left: 16px; padding-left: 16px;
    border-left: 1px solid var(--bordo);
}

.foglio.definitivo { border-top: 3px solid var(--attenzione); }

.numeri-generazione {
    display: flex; gap: 24px; flex-wrap: wrap;
    padding: 12px 14px; margin: 4px 0 2px;
    background: var(--attenzione-tenue); border-radius: var(--raggio);
}
.numeri-generazione div { display: flex; flex-direction: column; }
.numeri-generazione .n { font-size: 22px; font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
.numeri-generazione .e { font-size: 12px; color: var(--testo-medio); }

/*  La sintesi per cliente: quattro colonne e i pesi in ordine, perché la prima
    domanda su una giornata è «quanto va a chi».  */
.sintesi-clienti { padding: 12px 16px; margin-bottom: 12px; }
.sintesi-clienti header {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 8px; border-bottom: 1px solid var(--bordo-tenue);
}
.sintesi-clienti .totale-sintesi { color: var(--testo-medio); font-size: 13px; }
.righe-sintesi { display: flex; flex-direction: column; max-height: 340px; overflow: auto; }
.riga-sintesi {
    display: grid; grid-template-columns: minmax(160px, 2fr) 130px 90px 90px;
    gap: 12px; align-items: baseline;
    padding: 6px 0; border-bottom: 1px solid var(--bordo-tenue); font-size: 13px;
}
.riga-sintesi:last-child { border-bottom: none; }
.riga-sintesi .chi { font-weight: 600; }
.riga-sintesi .quanti, .riga-sintesi .quante { color: var(--testo-medio); font-size: 12.5px; }
.riga-sintesi .pezzi { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }

/*  Il calendario delle tratte: una riga per cliente. Prima ogni cliente era una
    scheda su tre righe, e confrontare due clienti voleva dire scorrere.  */
.calendario-tratte { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.riga-tratta {
    /*  La colonna del cliente/sede larga abbastanza da leggere il codice e il
        nome: con 180px la tendina mostrava «000002-1 — 0000(» e andava aperta per
        sapere cosa c'era dentro.  */
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(360px, 2.2fr) minmax(280px, 1.8fr) 92px;
    gap: 12px; align-items: center;
    padding: 6px 10px; background: var(--superficie);
    border: 1px solid var(--bordo-tenue); border-radius: var(--raggio-p);
}
.riga-tratta.intestazione {
    background: none; border: none; padding-bottom: 0;
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-tenue);
}
.riga-tratta:hover:not(.intestazione):not(.storiche) { border-color: var(--bordo); }
.riga-tratta .cliente {
    font-weight: 600; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  Sette colonne uguali, sempre: le caselle piene e quelle vuote occupano lo
    stesso spazio, così le colonne di righe diverse si incolonnano e i titoli in
    alto stanno davvero sopra il loro giorno. Prima erano flessibili e ogni riga
    scivolava per conto suo.  */
.riga-tratta .giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.riga-tratta .casella {
    display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
    min-height: 30px; padding: 3px 4px; border-radius: var(--raggio-p);
    background: var(--superficie-2); min-width: 0;
}
.riga-tratta .casella-titolo {
    text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
.riga-tratta .casella.attiva { background: var(--accento-tenue); }
.riga-tratta .casella .sigla {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue);
}
.riga-tratta .partenza {
    font-size: 12px; font-weight: 600; color: var(--testo); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.riga-tratta button.partenza {
    background: none; border: 1px solid transparent; padding: 0 3px; height: auto;
    color: var(--accento); font-size: 12px; font-weight: 600;
}
.riga-tratta button.partenza:hover:not(:disabled) {
    background: var(--superficie); border-color: var(--accento);
}
.riga-tratta .sede { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.riga-tratta .sede .codice { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.riga-tratta .sede .nome-sede {
    font-size: 11.5px; color: var(--testo-medio);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.riga-tratta .da-collegare { font-size: 11.5px; color: var(--attenzione); }
.riga-tratta .collega-riga { display: flex; gap: 6px; align-items: center; min-width: 0; }
/*  La tendina mostrava il testo tagliato a metà: 26px non bastano per un
    carattere da 12px con il suo interlinea.  */
.riga-tratta .collega-riga select {
    height: auto; min-height: 30px; padding: 4px 8px; line-height: 1.3;
    font-size: 12px; flex: 1 1 auto; min-width: 0; max-width: 100%;
}
.riga-tratta .collega-riga button { flex: none; }
.riga-tratta .produzione { text-align: right; font-size: 12px; color: var(--testo-medio); }
.riga-tratta .produzione button { font-variant-numeric: tabular-nums; }
.riga-tratta.storiche { background: none; border: none; padding-top: 0; }
.riga-tratta .versione-superata { font-size: 11.5px; color: var(--testo-tenue); }

/*  La spiegazione sta sotto il campo che la richiede, non in un messaggio in
    fondo al pannello: si legge dove si cerca.  */
.campo .aiuto-campo {
    font-size: 12px; color: var(--testo-medio); line-height: 1.35;
}

.conferma-data { max-width: 160px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

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; }

/* La riga di dettagli sotto un titolo. Era descritta solo dentro `.elenco .voce`,
   e altrove — budget, ordini, trasporto — i suoi elementi finivano incollati
   l'uno all'altro: «000889-FANO000889-FORLI000889-MARTELLAGOModifica». */
.meta {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
    font-size: 12.5px; color: var(--testo-tenue);
}
.meta .mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--testo-medio);
}
.elenco .voce .meta { grid-column: 1 / -1; }

.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 --- */
/* Le schermate dentro il manuale. Sono fotografie dell'applicazione vera: chi
   legge deve riconoscere quello che ha davanti, non un disegno somigliante. */
.manuale figure { margin: 0 0 20px; }
.manuale figure img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--bordo); border-radius: var(--raggio-p);
    box-shadow: var(--ombra-1);
    background: #fff;
}
.manuale figure.stretta { max-width: 420px; }
.manuale figure.media { max-width: 700px; }
.manuale figcaption {
    margin-top: 8px; font-size: 13px; color: var(--testo-tenue); line-height: 1.5;
}
.manuale figcaption b { color: var(--testo-medio); font-weight: 600; }

/* Un passaggio che si legge come un'istruzione: cosa fai, cosa vedi. */
.manuale .fai {
    display: grid; gap: 4px;
    margin: 0 0 16px; padding: 12px 14px;
    border-left: 3px solid var(--accento); border-radius: 0 var(--raggio-p) var(--raggio-p) 0;
    background: var(--accento-tenue);
}
.manuale .fai b { font-size: 14.5px; }
.manuale .fai span { font-size: 14px; color: var(--testo-medio); line-height: 1.55; }

.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; }
}

/* --- stato della giornata --- */
.stato-giornata {
    display: inline-block;
    padding: 3px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
    background: var(--superficie-3); color: var(--testo-medio);
}
.stato-giornata.calcolata { background: var(--accento-tenue);     color: var(--accento); }
.stato-giornata.inviata   { background: var(--ok-tenue);          color: var(--ok); }
.stato-giornata.chiusa    { background: var(--superficie-3);      color: var(--testo-tenue); }

/* =========================================================================
   Trasporto
   ========================================================================= */

.ondata {
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 14px; margin-top: 12px;
    background: var(--accento-tenue);
    border-left: 3px solid var(--accento);
    border-radius: var(--raggio-p);
}
.ondata .ora {
    font-size: 16px; font-weight: 700; color: var(--accento);
    font-variant-numeric: tabular-nums;
}
.ondata .quante { font-size: 12.5px; color: var(--testo-medio); }

.da-collegare { color: var(--attenzione); font-weight: 560; }

.settimana {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--bordo-tenue);
}
.settimana .giorno {
    display: flex; flex-direction: column; gap: 3px; align-items: center;
    padding: 7px 4px; border-radius: var(--raggio-p);
    background: var(--superficie-2); min-height: 54px;
}
.settimana .giorno.attivo { background: var(--ok-tenue); }
.settimana .sigla {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: var(--testo-tenue);
}
.settimana .giorno.attivo .sigla { color: var(--ok); }
.settimana .partenza {
    font-size: 11px; font-weight: 600; color: var(--testo);
    text-align: center; line-height: 1.25;
}

.collega {
    grid-column: 1 / -1;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--bordo-tenue);
}
.collega select { max-width: 340px; }

/* =========================================================================
   Piano di produzione
   ========================================================================= */

.testata-piano {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap;
    padding: 18px 20px; margin-bottom: 16px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.testata-piano .etichetta {
    margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--testo-tenue);
}
.testata-piano .valore-grande {
    margin: 3px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.015em;
}
.testata-piano .nota-piano { margin: 3px 0 0; font-size: 13.5px; color: var(--testo-medio); }
.testata-piano .numeri { display: flex; gap: 24px; }
.testata-piano .numeri > div { text-align: right; }
.testata-piano .numeri .n {
    display: block; font-size: 24px; font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.testata-piano .numeri .e {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--testo-tenue);
}

.ondata-produzione {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); margin-bottom: 14px; overflow: hidden;
    box-shadow: var(--ombra-1);
}
.ondata-produzione > header {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--accento-tenue);
    border-bottom: 1px solid var(--bordo);
}
.ondata-produzione .ora-carico {
    font-size: 15px; font-weight: 700; color: var(--accento);
}
.ondata-produzione .riepilogo-ondata {
    margin-left: auto; font-size: 12.5px; color: var(--testo-medio);
    font-variant-numeric: tabular-nums;
}

.articolo-produzione { border-bottom: 1px solid var(--bordo-tenue); }
.articolo-produzione:last-child { border-bottom: none; }

.riga-articolo {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 16px;
}
.riga-articolo .descrizione-art { flex: 1; font-size: 14.5px; font-weight: 560; }
.riga-articolo .totale-art {
    font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 70px; text-align: right;
}

.quote { padding: 0 16px 10px 16px; display: flex; flex-direction: column; gap: 3px; }
.quota {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 10px; border-radius: 5px;
    background: var(--superficie-2); font-size: 13px;
}
.quota .codice-piccolo {
    font-family: ui-monospace, Menlo, monospace; font-size: 11px;
    color: var(--accento); font-weight: 600;
}
.quota .sede { flex: 1; color: var(--testo-medio); }
.quota .vett {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--testo-tenue); background: var(--superficie);
    padding: 1px 6px; border-radius: 4px;
}
.quota .q { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 54px; text-align: right; }

@media print {
    .testata-piano { border: none; box-shadow: none; padding: 0 0 10px; border-bottom: 1.5pt solid #000; }
    .ondata-produzione { border: none; box-shadow: none; break-inside: avoid; margin-bottom: 6mm; }
    .ondata-produzione > header { background: #f2f2f2; border-bottom: .5pt solid #000; }
    .quota { background: none; padding: 3px 0; }
}

/* --- registro delle operazioni --- */
.registro {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1); overflow: hidden;
}
.giorno-registro {
    padding: 9px 14px;
    background: var(--superficie-2);
    border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo-tenue);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--testo-tenue);
}
.giorno-registro:first-child { border-top: none; }

.voce-registro {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid var(--bordo-tenue);
    border-left: 3px solid transparent;
    font-size: 13px;
}
.voce-registro:last-child { border-bottom: none; }
.voce-registro.rifiutata  { border-left-color: var(--attenzione); background: var(--attenzione-tenue); }
.voce-registro.fallita    { border-left-color: var(--errore);     background: var(--errore-tenue); }
.voce-registro.attenzione { border-left-color: var(--attenzione); }

.voce-registro .ora {
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
    color: var(--testo-tenue); font-variant-numeric: tabular-nums;
}
.voce-registro .operazione { font-weight: 600; min-width: 150px; }
.voce-registro .chi { color: var(--accento); font-size: 12.5px; min-width: 90px; }
.voce-registro .esito {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 1px 7px; border-radius: 4px;
    background: var(--superficie); color: var(--errore);
}
.voce-registro .dettaglio-voce { color: var(--testo-medio); font-size: 12.5px; flex: 1; }

/* --- regole e parametri --- */
.spiega-sezione {
    color: var(--testo-medio); font-size: 13.5px; line-height: 1.55;
    margin: 0 0 14px; max-width: 72ch;
}
.azioni-riga { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap;
               padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--bordo-tenue); }

.interruttore { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.interruttore input { width: auto; }

.griglia-fattori {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.carta-fattore {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    padding: 14px 10px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.carta-fattore .nome-giorno {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue);
}
.carta-fattore input { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.carta-fattore .effetto { font-size: 12px; color: var(--testo-medio); font-variant-numeric: tabular-nums; }

.valore-parametro { max-width: 220px; }

/* --- anagrafiche e import --- */
.foglio.largo { max-width: 640px; }
.foglio textarea {
    width: 100%; resize: vertical;
    font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5;
}
.foglio .formato {
    font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
    background: var(--superficie-2); color: var(--testo-medio);
    padding: 8px 12px; border-radius: var(--raggio-p);
    margin: 0 0 10px;
}
.scartate { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; line-height: 1.6; }

/* --- registrazione del prodotto --- */
.avanzamento {
    font-size: 11.5px; font-weight: 650;
    padding: 2px 9px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.avanzamento.completo { background: var(--ok-tenue); color: var(--ok); }
.avanzamento.parziale { background: var(--attenzione-tenue); color: var(--attenzione); }

.quota.fatta { background: var(--ok-tenue); }
.quota input.prodotta { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.quota .residuo {
    font-size: 11.5px; font-weight: 650; min-width: 54px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.quota .residuo.manca { color: var(--errore); }
.quota .residuo.oltre { color: var(--accento); }

.barra-registrazione {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 14px;
    background: var(--superficie); border: 1px solid var(--accento);
    border-radius: var(--raggio); box-shadow: var(--ombra-2);
}
.barra-registrazione span { font-weight: 560; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Calendario operativo
   Sette colonne come i giorni della settimana: la tabella che oggi vive nella
   memoria di chi lavora si guarda tutta insieme, senza scorrere.
   ========================================================================= */
.calendario-operativo {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.colonna-giorno {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 10px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.colonna-giorno.riposo { background: var(--superficie-2); box-shadow: none; }
.colonna-giorno .nome-giorno {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue); text-align: center;
}
.colonna-giorno .niente {
    font-size: 12.5px; color: var(--testo-tenue); text-align: center; padding: 6px 0;
}

.pastiglia-consegna {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    width: 100%; padding: 8px 10px; text-align: left;
    background: var(--accento-tenue); color: var(--accento);
    border: 1px solid color-mix(in srgb, var(--accento) 28%, transparent);
    border-radius: var(--raggio-p);
    font: inherit; cursor: pointer;
}
.pastiglia-consegna:hover { background: color-mix(in srgb, var(--accento) 16%, var(--superficie)); }
.pastiglia-consegna .destinazione { font-size: 13.5px; font-weight: 620; }
.pastiglia-consegna .quando {
    font-size: 11px; color: var(--testo-medio); font-variant-numeric: tabular-nums;
}
.pastiglia-consegna.spenta {
    background: var(--superficie-2); color: var(--testo-tenue);
    border-color: var(--bordo); text-decoration: line-through;
}
.colonna-giorno .aggiungi { align-self: center; margin-top: auto; min-width: 34px; }

/* =========================================================================
   Budget
   ========================================================================= */
.riquadro-budget {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.riquadro-budget textarea {
    width: 100%; resize: vertical;
    font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5;
}
.riquadro-budget code {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px;
    background: var(--superficie-2); padding: 1px 5px; border-radius: 4px;
}

.etichetta-elenco {
    font-size: 10.5px; font-weight: 650; letter-spacing: .05em;
    text-transform: uppercase; color: var(--testo-tenue);
    margin-bottom: -4px;
}
.elenco-scelte {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 240px; overflow-y: auto;
    padding: 6px; border: 1px solid var(--bordo); border-radius: var(--raggio-p);
    background: var(--superficie-2);
}
.scelta-piattaforma {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: var(--raggio-p);
    font-size: 13px; cursor: pointer;
}
.scelta-piattaforma:hover { background: var(--superficie); }
.scelta-piattaforma.presa { background: var(--accento-tenue); font-weight: 550; }
.scelta-piattaforma input { width: auto; margin: 0; }
.scelta-piattaforma .mono {
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--accento);
}

.griglia .riga .valore.forte { font-weight: 650; }
.griglia .riga.totale {
    background: var(--superficie-2); font-weight: 550;
    border-top: 1px solid var(--bordo);
}

@media (min-width: 900px) {
    /* Sei colonne: il numero di partenza, i due passaggi, il risultato, e la
       spiegazione che li tiene insieme. */
    .griglia.ripartizione .capofila,
    .griglia.ripartizione .riga {
        grid-template-columns:
            minmax(140px, 1.2fr)  /* articolo        */
            110px                 /* richiesti       */
            120px                 /* cartoni         */
            120px                 /* arrotondato     */
            140px                 /* per piattaforma */
            minmax(200px, 2fr);   /* formula         */
    }
}

/* -------------------------------------------------- agenda del calendario
   Quale giornata si prepara oggi, e entro quando. Sta sopra i comandi perché
   è la prima cosa da sapere: la giornata da aprire non è quasi mai quella di oggi. */
.striscia-agenda {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-left: 3px solid var(--accento);
    border-radius: var(--raggio); box-shadow: var(--ombra-1);
}
.striscia-agenda .oggi {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue);
}
.voce-agenda {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 5px 11px;
    background: var(--accento-tenue); color: var(--accento);
    border: 1px solid color-mix(in srgb, var(--accento) 26%, transparent);
    border-radius: 999px;
    font: inherit; font-size: 13px; cursor: pointer;
}
.voce-agenda:hover:not(:disabled) { background: color-mix(in srgb, var(--accento) 16%, var(--superficie)); }
.voce-agenda:disabled {
    cursor: default; opacity: 1;
    background: var(--accento); color: #fff; border-color: var(--accento);
}
.voce-agenda .quando { font-weight: 620; }
.voce-agenda .limite { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .85; }
.voce-agenda .nota-agenda { font-size: 11.5px; opacity: .75; }

.voce-agenda.vicina {
    background: var(--attenzione-tenue); color: var(--attenzione);
    border-color: color-mix(in srgb, var(--attenzione) 35%, transparent);
}
.voce-agenda.tardiva {
    background: var(--errore-tenue); color: var(--errore);
    border-color: color-mix(in srgb, var(--errore) 35%, transparent);
}
.voce-agenda.vicina:disabled  { background: var(--attenzione); color: #fff; }
.voce-agenda.tardiva:disabled { background: var(--errore); color: #fff; }

@media print { .striscia-agenda { display: none; } }

/* --- registro degli import --- */
.dettaglio-import { grid-column: 1 / -1; margin-top: 4px; }
.dettaglio-import summary {
    font-size: 12.5px; color: var(--testo-medio); cursor: pointer;
}
.dettaglio-import pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--superficie-2); border-radius: var(--raggio-p);
    font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; color: var(--testo-medio);
}

@media (min-width: 900px) {
    .griglia.ordini-letti .capofila,
    .griglia.ordini-letti .riga {
        grid-template-columns:
            minmax(160px, 1.4fr)  /* punto vendita */
            minmax(160px, 1.4fr)  /* articolo      */
            130px                 /* ordinata      */
            minmax(140px, 1fr);   /* riferimento   */
    }
}

/* =========================================================================
   Giornata — testata e griglia densa

   La testata sta in due righe e non se ne va scorrendo: dice dove si è e cosa
   si può fare, e serve alla riga tremila come alla prima. La griglia è alta una
   riga per riga, perché una giornata può averne migliaia.
   ========================================================================= */

:root {
    /* Valore di partenza: lo sostituisce la misura vera fatta da giornata.js,
       perché una testata che va a capo è più alta e l'intestazione delle colonne
       si aggancia sotto di essa. */
    --testata-h: 96px;
}

.testata-giornata {
    position: sticky; top: var(--barra-h); z-index: 30;
    display: flex; flex-direction: column; gap: 6px;
    /* Si estende oltre il padding di main, così scorrendo non si vede passare
       nulla ai suoi lati. */
    margin: -16px -14px 12px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--bordo);
}

.testata-giornata .fila {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 34px;
}
.testata-giornata .spazio { flex: 1; }
.testata-giornata .separatore {
    width: 1px; height: 22px; background: var(--bordo); margin: 0 2px;
}

.testata-giornata h1 {
    margin: 0; font-size: 17px; font-weight: 680; letter-spacing: -.01em;
    white-space: nowrap;
}
.testata-giornata .data,
.testata-giornata .perimetro,
.testata-giornata .raggruppa,
.testata-giornata .cerca-rapida {
    height: 32px; padding: 0 9px; font-size: 13px; width: auto;
}
.testata-giornata .data { max-width: 150px; }
.testata-giornata .perimetro { max-width: 190px; }
.testata-giornata .raggruppa { max-width: 175px; }
.testata-giornata .cerca-rapida { min-width: 130px; max-width: 220px; flex: 1; }

.testata-giornata .conteggio-righe {
    font-size: 12.5px; color: var(--testo-medio); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.testata-giornata .azioni-giornata button:not(.pillola) {
    height: 32px; padding: 0 12px; font-size: 13px;
}

/* I comandi stanno in gruppi coerenti, separati da un filo: quel che produce
   dati, quel che cambia le righe, quel che cambia il modo di guardarle, quel che
   porta fuori. Dentro un gruppo si sta stretti, fra un gruppo e l'altro no. */
.testata-giornata .gruppo-comandi {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.testata-giornata .gruppo-comandi + .gruppo-comandi {
    margin-left: 4px; padding-left: 10px;
    border-left: 1px solid var(--bordo);
}

.testata-giornata .esporta { display: flex; gap: 10px; font-size: 12.5px; white-space: nowrap; }
.testata-giornata .esporta a { color: var(--accento); }

.voce-agenda.minuta { padding: 3px 9px; font-size: 12px; gap: 6px; flex-direction: row; }
.voce-agenda.minuta .quando { font-size: 12px; }

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

/* --- la griglia ---------------------------------------------------------- */

.tabella-giornata {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
    /* isolation dà un contesto di impilamento locale: l'ordine fra intestazione
       e righe non dipende dal resto della pagina. */
    isolation: isolate;
}

.tabella-giornata .capofila,
.tabella-giornata .riga,
.tabella-giornata .capogruppo,
.tabella-giornata .riga-totale {
    display: grid;
    grid-template-columns: var(--colonne);
    align-items: center;
    gap: 0 10px;
    padding: 0 12px;
    height: 34px;
}

.tabella-giornata .capofila {
    position: sticky; top: calc(var(--barra-h) + var(--testata-h));
    z-index: 3;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--bordo);
    border-radius: var(--raggio) var(--raggio) 0 0;
    font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--testo-tenue);
}
.tabella-giornata .capofila span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabella-giornata .capofila .destra { text-align: right; }

.tabella-giornata .riga {
    position: relative; z-index: 1;
    border-bottom: 1px solid var(--bordo-tenue);
    background: var(--superficie);
}
.tabella-giornata .riga:hover { background: var(--superficie-2); }
.tabella-giornata .riga.modificata {
    background: color-mix(in srgb, var(--attenzione-tenue) 55%, var(--superficie));
    box-shadow: inset 2px 0 0 var(--attenzione);
}
.tabella-giornata .riga.esclusa { opacity: .6; }

/* Una cella è una riga sola: quel che non entra si taglia, e il valore intero
   resta nel titolo. Con migliaia di righe l'altezza è la risorsa scarsa. */
.tabella-giornata .cella {
    display: flex; align-items: baseline; gap: 6px;
    min-width: 0; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabella-giornata .cella::before { content: none; }
.tabella-giornata .cella.numero {
    justify-content: flex-end; font-variant-numeric: tabular-nums;
}
.tabella-giornata .cella.numero.manca { color: var(--errore); font-weight: 600; }

.tabella-giornata .cella.entita { align-items: baseline; }
.tabella-giornata .cella.entita .codice {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px; font-weight: 600; color: var(--accento);
    white-space: nowrap; flex: none;
}
.tabella-giornata .cella.entita .descrizione {
    font-size: 12.5px; color: var(--testo-medio);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tabella-giornata .cella.formula {
    font-size: 12px; color: var(--testo-medio);
    background: none; border: none; padding: 0;
}

.tabella-giornata .cella input,
.tabella-giornata .cella select {
    height: 26px; padding: 0 6px; font-size: 13px; width: 100%; min-width: 0;
}
.tabella-giornata .cella input.quantita {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 550;
}
.tabella-giornata .cella input.quantita.corretta {
    border-color: var(--attenzione);
    background: color-mix(in srgb, var(--attenzione-tenue) 60%, var(--superficie));
}

.tabella-giornata .coda { display: flex; justify-content: flex-end; }
.tabella-giornata .coda button {
    width: 26px; height: 24px; padding: 0; line-height: 1;
    background: none; border: 1px solid transparent; color: var(--testo-tenue);
}
.tabella-giornata .riga:hover .coda button { border-color: var(--bordo); }

/* --- capigruppo ---------------------------------------------------------- */

/* Il capogruppo condivide la traccia delle colonne con le righe: solo così il
   suo totale cade sotto le quantità che somma — «Totale: allineato alla colonna
   quantità». Tutto il resto sta a sinistra, nello spazio che avanza. */
.tabella-giornata .capogruppo {
    position: relative; z-index: 2;
    background: var(--accento-tenue);
    border-top: 1px solid color-mix(in srgb, var(--accento) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accento) 14%, transparent);
    font-size: 13px;
}
.tabella-giornata .capogruppo .intestazione {
    grid-column: 1 / var(--col-somma, -2);
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tabella-giornata .capogruppo .somma,
.tabella-giornata .riga-totale .somma {
    grid-column: var(--col-somma, -2);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* L'annidamento si vede rientrando il contenuto, non la riga: spostare la riga
   sposterebbe anche la colonna del totale, che deve restare dov'è. */
.tabella-giornata .capogruppo.livello-1 {
    background: var(--superficie-2);
    border-top-color: var(--bordo);
    border-bottom-color: var(--bordo-tenue);
}
.tabella-giornata .capogruppo.livello-1 .intestazione { padding-left: 14px; }

.tabella-giornata .capogruppo .codice {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; font-weight: 700; color: var(--accento);
    white-space: nowrap; flex: none;
}
.tabella-giornata .capogruppo .nome {
    font-size: 12.5px; color: var(--testo-medio);
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabella-giornata .capogruppo .conta {
    font-size: 11.5px; color: var(--testo-tenue); white-space: nowrap;
    font-variant-numeric: tabular-nums; flex: none;
}
.tabella-giornata .capogruppo .somma { font-size: 13px; font-weight: 700; }
.tabella-giornata .capogruppo .posizione {
    font-size: 11.5px; font-weight: 700; color: var(--testo-medio);
    min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; flex: none;
}
.tabella-giornata .capogruppo .posizione.assente { color: var(--attenzione); }

/* Giro, vettore e turno: del punto vendita, quindi qui e non su ogni riga. */
.tabella-giornata .capogruppo .dati-sede {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex: none;
}
.tabella-giornata .capogruppo .giro-sede {
    height: 24px; padding: 0 6px; font-size: 12px; width: auto; max-width: 190px;
}
.tabella-giornata .capogruppo .giro-sede.misto {
    border-color: var(--attenzione);
    background: color-mix(in srgb, var(--attenzione-tenue) 60%, var(--superficie));
}
/*  Il vettore ha la stessa forma del giro, perché è la stessa cosa: una scelta
    che vale per tutte le righe di quella fermata. Un po' più larga, perché porta
    anche la ragione sociale.  */
.tabella-giornata .capogruppo .vettore-sede {
    height: 24px; padding: 0 6px; font-size: 12px; width: auto; max-width: 230px;
}
.tabella-giornata .capogruppo .vettore-sede.misto {
    border-color: var(--attenzione);
    background: color-mix(in srgb, var(--attenzione-tenue) 60%, var(--superficie));
}
/*  Il turno: un campo, non una tendina, perché i turni non sono un'anagrafica.
    Stretto, perché «Giorno» è lungo così.  */
.tabella-giornata .capogruppo .turno-sede {
    height: 24px; padding: 0 6px; font-size: 12px; width: 110px;
}
.tabella-giornata .capogruppo .turno-sede.misto {
    border-color: var(--attenzione);
    background: color-mix(in srgb, var(--attenzione-tenue) 60%, var(--superficie));
}

.tabella-giornata .capogruppo .voce-sede {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-size: 12px; color: var(--testo-medio); white-space: nowrap;
}
.tabella-giornata .capogruppo .voce-sede .eti {
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--testo-tenue);
}

.tabella-giornata .capogruppo .comandi-sede {
    display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none;
}
.tabella-giornata .capogruppo .frecce { display: flex; gap: 2px; }
.tabella-giornata .capogruppo button { height: 24px; padding: 0 8px; font-size: 12px; }

.tabella-giornata .riga-totale {
    background: var(--superficie-2);
    border-top: 2px solid var(--bordo);
    border-radius: 0 0 var(--raggio) var(--raggio);
    font-weight: 650;
}
.tabella-giornata .riga-totale .etichetta {
    grid-column: 1 / var(--col-somma, -2);
    font-size: 12.5px; color: var(--testo-medio);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabella-giornata .riga-totale .somma { font-size: 14px; }

/* --- scelta delle colonne ------------------------------------------------ */

.elenco-colonne {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 52vh; overflow-y: auto;
    padding: 6px; border: 1px solid var(--bordo); border-radius: var(--raggio-p);
    background: var(--superficie-2);
}
.voce-colonna {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 2px 10px;
    padding: 6px 8px; border-radius: var(--raggio-p);
    background: var(--superficie);
}
.voce-colonna.fissa { background: var(--accento-tenue); }
.voce-colonna .spiega {
    grid-column: 1 / -1; font-size: 11.5px; color: var(--testo-tenue); line-height: 1.4;
}
.voce-colonna .frecce { display: flex; gap: 2px; }

.due-colonne { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .due-colonne { grid-template-columns: 1fr 1fr; } }

/* --- sotto i 900px: la griglia scorre di lato ---------------------------- */

@media (max-width: 899px) {
    .tabella-giornata { overflow-x: auto; }
    .tabella-giornata > *,
    .tabella-giornata .capofila { min-width: 780px; }

    /* In un contenitore che scorre la sticky verticale non funziona: si rinuncia
       all'intestazione fissa invece di lasciarla mezza rotta. */
    .tabella-giornata .capofila { position: static; }
}

@media print {
    .testata-giornata, .pannello-filtri { display: none; }
    .tabella-giornata .coda { display: none; }
}

/* -------------------------------------------------------------------------
   Correzione: la griglia vecchia lascia regole che sfondano quella nuova.

   `.cella` nasce in colonna (era una scheda su telefono) e da 900px in su
   `.entita` torna in colonna apposta, per mettere la descrizione sotto il
   codice. Nella griglia densa quelle due regole rendono ogni cella alta due
   righe dentro una riga alta 34px: il contenuto esce e si sovrappone a quella
   dopo. Qui si dichiara la direzione invece di ereditarla, e la riga tronca
   quel che comunque non ci sta.
   ------------------------------------------------------------------------- */

.tabella-giornata .cella,
.tabella-giornata .cella.entita {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 6px;
}

.tabella-giornata .cella.entita .codice { flex: none; }
.tabella-giornata .cella.entita .descrizione {
    width: auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nessun contenuto può uscire dalla propria riga: con migliaia di righe una
   che sborda le copre tutte quelle sotto, ed è quel che succedeva. */
.tabella-giornata .capofila,
.tabella-giornata .riga,
.tabella-giornata .capogruppo,
.tabella-giornata .riga-totale { overflow: hidden; }

/* Nel capogruppo la descrizione del punto vendita è l'unica parte elastica:
   tutto il resto — codice, giro, vettore, turno, comandi — sta alla sua misura,
   e il totale resta incolonnato con le quantità. */
.tabella-giornata .capogruppo > * { min-width: 0; }

.riquadro-nota {
    padding: 10px 12px; margin: -4px 0 4px;
    background: var(--accento-tenue); border-radius: var(--raggio-p);
    font-size: 12.5px; line-height: 1.5; color: var(--testo-medio);
}

/* L'ordine del cliente dentro il piano di produzione: quanto ne ha chiesti, e
   quanti ne mancano. Arriva il giorno della spedizione, quando la merce è già
   decisa, ed è il numero che fa decidere se produrne ancora. */
.ordinato {
    font-size: 12px; color: var(--testo-medio); white-space: nowrap;
    padding: 2px 8px; border-radius: 999px; background: var(--superficie-2);
}
.ordinato.minuto { font-size: 11px; padding: 1px 6px; }
.scarto {
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.scarto.manca { color: var(--errore); }
.scarto.oltre { color: var(--testo-tenue); }

/* --- i bancali sul piano di produzione ---------------------------------
   I pezzi dicono quanto fare, i bancali dicono quanto spazio occupa e quanto
   tempo ci vuole a caricarlo. */
.bancali {
    font-size: 11.5px; font-weight: 650;
    padding: 2px 8px; border-radius: 999px;
    background: var(--superficie-2); color: var(--testo-medio);
    white-space: nowrap; cursor: help;
}
.bancali.minuti { font-size: 11px; padding: 1px 6px; }