/*
 * GARAD — design system.
 *
 * Una regola sopra tutte: il rosso del marchio (#E7202E) vive SOLO
 * nell'identita' (logo, voce attiva, accenti di navigazione). Gli stati
 * usano una scala semaforica separata, piu' scura e desaturata, cosi' che
 * su un totem a quattro metri "fuori garanzia" non si confonda con
 * "questa e' l'intestazione GARAD".
 *
 * Solo tema chiaro: meno superficie di bug, e in officina si legge meglio.
 */

:root {
    /* --- identita' --------------------------------------------------- */
    --brand-ink:        #141414;
    --brand-red:        #E7202E;
    --brand-red-scuro:  #B8161F;
    --brand-grigio:     #8B8D94;

    /* --- superfici --------------------------------------------------- */
    --sfondo:           #F7F7F7;
    --superficie:       #FFFFFF;
    --superficie-alt:   #F1F1F2;
    --bordo:            #E2E2E4;
    --bordo-forte:      #C9C9CD;

    /* --- testo ------------------------------------------------------- */
    --testo:            #141414;
    --testo-secondario: #5F6066;
    --testo-tenue:      #8B8D94;
    --testo-inverso:    #FFFFFF;

    /* --- stati: scala DISTINTA dal rosso del marchio ------------------ */
    --stato-ok:         #3B6D11;
    --stato-ok-sfondo:  #EAF3DE;
    --stato-attesa:     #BA7517;
    --stato-attesa-sf:  #FAEEDA;
    --stato-critico:    #A32D2D;
    --stato-critico-sf: #FCEBEB;
    --stato-neutro:     #5F6066;
    --stato-neutro-sf:  #EFEFF0;

    /* --- misure ------------------------------------------------------ */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    --raggio:      10px;
    --raggio-sm:   6px;
    --raggio-lg:   16px;

    --ombra-1: 0 1px 2px rgba(20, 20, 20, .06);
    --ombra-2: 0 2px 8px rgba(20, 20, 20, .08);
    --ombra-3: 0 8px 32px rgba(20, 20, 20, .12);

    /* Target minimo in officina: si tocca con i guanti sporchi. */
    --tocco-min: 48px;

    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
}

/* Montserrat servito da noi: nessuna CDN, nessuna dipendenza esterna. */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-600.woff2') format('woff2');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * L'attributo `hidden` deve vincere sempre.
 *
 * Il foglio di stile del browser gli assegna `display: none`, ma qualunque
 * regola d'autore con `display: flex` o `grid` lo sovrascrive per
 * specificita': l'elemento resta visibile pur essendo marcato nascosto.
 * E' successo con il riquadro d'errore del modulo di accesso, che compariva
 * vuoto sopra i campi a ogni apertura.
 */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
    /* In officina si tocca, non si seleziona: evita il testo evidenziato
       per sbaglio mentre si scorre una lista con le dita. */
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0 0 var(--sp-3); }

/* --- accessibilita' ---------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--brand-red);
    outline-offset: 2px;
    border-radius: var(--raggio-sm);
}

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

.salta-al-contenuto {
    position: absolute; left: var(--sp-3); top: -60px;
    background: var(--brand-ink); color: var(--testo-inverso);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio);
    z-index: 100; transition: top .15s;
}
.salta-al-contenuto:focus { top: var(--sp-3); }

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

/* --- controlli --------------------------------------------------------- */

.campo { display: block; margin-bottom: var(--sp-4); }

.campo > label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--testo-secondario);
    margin-bottom: var(--sp-2);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="tel"], input[type="number"], select, textarea {
    width: 100%;
    min-height: var(--tocco-min);
    padding: var(--sp-3) var(--sp-4);
    font: inherit;
    color: var(--testo);
    background: var(--superficie);
    border: 1.5px solid var(--bordo-forte);
    border-radius: var(--raggio);
    transition: border-color .12s, box-shadow .12s;
}

input:hover, select:hover, textarea:hover { border-color: var(--brand-grigio); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px rgba(20, 20, 20, .08);
}

input[aria-invalid="true"] {
    border-color: var(--stato-critico);
    box-shadow: 0 0 0 3px var(--stato-critico-sf);
}

.bottone {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tocco-min);
    padding: var(--sp-3) var(--sp-5);
    font: inherit; font-weight: 600;
    color: var(--testo);
    background: var(--superficie);
    border: 1.5px solid var(--bordo-forte);
    border-radius: var(--raggio);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .06s;
}
.bottone:hover { border-color: var(--brand-ink); background: var(--superficie-alt); }
.bottone:active { transform: scale(.985); }
.bottone[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.bottone--primario {
    color: var(--testo-inverso);
    background: var(--brand-ink);
    border-color: var(--brand-ink);
}
.bottone--primario:hover { background: #000; border-color: #000; }

.bottone--largo { width: 100%; }

/* --- messaggi ---------------------------------------------------------- */

.avviso {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--raggio);
    border-left: 4px solid;
    font-size: 14px;
    margin-bottom: var(--sp-4);
}
.avviso--errore  { background: var(--stato-critico-sf); border-color: var(--stato-critico); color: #6B1D1D; }
.avviso--attesa  { background: var(--stato-attesa-sf);  border-color: var(--stato-attesa);  color: #6B4209; }
.avviso--ok      { background: var(--stato-ok-sfondo);  border-color: var(--stato-ok);      color: #2A4E0C; }

/* --- indicatore di connessione ----------------------------------------- */

.connessione {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: 13px; font-weight: 600;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
}
.connessione::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
}
.connessione[data-stato="online"]  { color: var(--stato-ok);      background: var(--stato-ok-sfondo); }
.connessione[data-stato="coda"]    { color: var(--stato-attesa);  background: var(--stato-attesa-sf); }
.connessione[data-stato="offline"] { color: var(--stato-neutro);  background: var(--stato-neutro-sf); }

/* Lavoro fermo che aspetta una persona, non la rete: deve farsi notare.
   Un indicatore verde su del lavoro non consegnato dice a chi guarda che
   può smettere di preoccuparsi, ed è peggio di nessun indicatore. */
.connessione[data-stato="bloccate"] {
    color: var(--stato-critico);
    background: var(--stato-critico-sf);
    font-weight: 700;
}

/* --- schermata di accesso ---------------------------------------------- */

.accesso {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
}

.accesso__riquadro {
    width: 100%; max-width: 420px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-lg);
    box-shadow: var(--ombra-3);
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

.marchio {
    display: flex; align-items: baseline; gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.marchio__nome {
    font-size: 26px; font-weight: 700; letter-spacing: -.02em;
    color: var(--brand-ink);
}
/* L'unico punto in cui il rosso del marchio compare in questa schermata. */
.marchio__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); }

.marchio__sottotitolo {
    font-size: 13px; color: var(--testo-tenue);
    margin: 0 0 var(--sp-6);
}

/* --- intelaiatura dell'applicazione ------------------------------------ */

.app { display: grid; grid-template-rows: auto 1fr; min-height: 100dvh; }

.barra {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-ink);
    color: var(--testo-inverso);
    box-shadow: var(--ombra-2);
}
.barra__marchio { font-weight: 700; letter-spacing: -.01em; }
.barra__marchio span { color: var(--brand-red); }
.barra__spazio { flex: 1; }
.barra__utente { font-size: 13px; color: rgba(255,255,255,.75); }

.barra .bottone {
    background: transparent;
    color: var(--testo-inverso);
    border-color: rgba(255,255,255,.28);
    min-height: 40px; padding: var(--sp-2) var(--sp-4);
}
.barra .bottone:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.contenuto { padding: var(--sp-6) var(--sp-5); max-width: 1200px; width: 100%; margin: 0 auto; }

.griglia-schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--sp-5);
    box-shadow: var(--ombra-1);
}
.scheda__titolo { font-size: 13px; font-weight: 600; color: var(--testo-secondario); margin-bottom: var(--sp-2); }
.scheda__valore { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.scheda__nota   { font-size: 13px; color: var(--testo-tenue); margin-top: var(--sp-1); }

/* --- caricamento e stati vuoti ----------------------------------------- */

.caricamento {
    display: grid; place-items: center;
    min-height: 50dvh; gap: var(--sp-4);
    color: var(--testo-tenue);
}
.girella {
    width: 28px; height: 28px;
    border: 3px solid var(--bordo);
    border-top-color: var(--brand-ink);
    border-radius: 50%;
    animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* --- aggiornamento disponibile ----------------------------------------- */

.aggiornamento {
    position: fixed; left: 50%; bottom: var(--sp-5);
    transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--brand-ink); color: var(--testo-inverso);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
    border-radius: 999px;
    box-shadow: var(--ombra-3);
    z-index: 50;
    font-size: 14px;
}
.aggiornamento .bottone {
    background: var(--superficie); color: var(--brand-ink);
    border-color: var(--superficie); min-height: 36px; padding: var(--sp-2) var(--sp-4);
}

/* --- schermi grandi: il totem si legge da quattro metri ----------------- */

@media (min-width: 1600px) and (pointer: coarse) {
    :root { --tocco-min: 64px; }
    body { font-size: 19px; }
}

/* --- mappa di disponibilità --------------------------------------------- */

.mappa-barra {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.mappa-barra .bottone { min-height: 40px; padding: var(--sp-2) var(--sp-4); }

.legenda { display: flex; gap: var(--sp-4); font-size: 13px; color: var(--testo-secondario); }
.legenda__voce { display: inline-flex; align-items: center; gap: var(--sp-2); }
.campione { width: 18px; height: 18px; display: inline-block; border-radius: 4px; border: 1px solid transparent; }
.campione--libero    { background: var(--stato-ok-sfondo);  border-color: #C0DD97; }
.campione--medio     { background: var(--stato-attesa-sf);  border-color: #FAC775; }
.campione--pieno     { background: var(--stato-critico-sf); border-color: #F09595; }
.campione--non_entra { background: var(--superficie-alt);   border-color: var(--bordo); }
.campione--passato   { background: transparent;             border-color: var(--bordo); }
.legenda__segno { font-size: 12px; line-height: 1; color: var(--testo-secondario); }

/* I comandi della barra: salto a data, orizzonte, durata del lavoro. */
.mappa-barra__data,
.mappa-barra__giorni,
.mappa-barra__durata {
    min-height: 40px; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    background: var(--superficie); color: var(--testo);
    font: inherit; font-size: 14px;
}

.mappa-giorni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-5);
}

.giorno__titolo {
    font-size: 14px; font-weight: 700; text-transform: capitalize;
    color: var(--testo-secondario);
    margin-bottom: var(--sp-2);
}

/* Le tabelle larghe scorrono dentro il proprio contenitore: la pagina non
   deve mai scorrere in orizzontale, men che meno su un tablet. */
.tabella-scorrevole { overflow-x: auto; }

table.mappa { border-collapse: separate; border-spacing: 3px; width: 100%; }
table.mappa th {
    font-size: 12px; font-weight: 600; color: var(--testo-secondario);
    padding: 0 var(--sp-1); text-align: center; white-space: nowrap;
}
table.mappa th.ora { text-align: right; padding-right: var(--sp-2); font-variant-numeric: tabular-nums; }

.cella {
    display: block; width: 100%; min-width: 44px; height: 34px;
    border: 1px solid transparent; border-radius: 6px;
    font: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; padding: 0;
    transition: transform .06s, box-shadow .12s;
}
.cella:hover:not(:disabled) { transform: scale(1.06); box-shadow: var(--ombra-2); z-index: 1; position: relative; }
.cella:disabled { cursor: not-allowed; }

/* Scala semaforica DISTINTA dal rosso del marchio: su uno schermo a quattro
   metri "pieno" non deve confondersi con l'intestazione GARAD. */
.cella--libero      { background: var(--stato-ok-sfondo);  border-color: #C0DD97; color: var(--stato-ok); }
.cella--medio       { background: var(--stato-attesa-sf);  border-color: #FAC775; color: var(--stato-attesa); }
.cella--quasi_pieno { background: #FAC775;                 border-color: var(--stato-attesa); color: #4A2E05; }
.cella--pieno       { background: var(--stato-critico-sf); border-color: #F09595; color: var(--stato-critico); }
.cella--chiuso      { background: repeating-linear-gradient(45deg, var(--superficie-alt), var(--superficie-alt) 4px, transparent 4px, transparent 8px);
                      border: 1px solid var(--bordo); border-radius: 6px; height: 34px; }

/* Fascia gia' trascorsa: c'e' stata, non e' disponibilita'. */
.cella--passato     { background: transparent; border-color: var(--bordo);
                      color: var(--testo-secondario); opacity: .55; }
/* Aperta, ma il lavoro scelto non ci sta prima della chiusura o del prossimo
   appuntamento. Diversa da "pieno": qui non c'e' nessun altro, e' la durata. */
.cella--non_entra   { background: var(--superficie-alt); border-color: var(--bordo);
                      color: var(--testo-secondario); }

/*
 * Il segno dentro la casella.
 *
 * Su quattro linee su cinque la capacita' e' 1, e la casella era un quadratino
 * vuoto colorato: verde o rosso, nient'altro. Chi non distingue quei due
 * colori non poteva leggere la mappa, e nemmeno una stampa in bianco e nero.
 */
.cella__segno { font-size: 13px; line-height: 1; opacity: .8; }

.alternative { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.alternative .bottone { min-height: 44px; }

/* In officina, su schermo grande e dita grosse: celle più alte. */
@media (pointer: coarse) {
    .cella { height: 44px; min-width: 52px; }
}

.giorno--chiuso { opacity: .7; }
.giorno__chiuso {
    padding: var(--sp-5) var(--sp-4);
    background: var(--superficie-alt);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--raggio);
    text-align: center;
    color: var(--testo-tenue);
    font-size: 14px;
    margin: 0;
}

/* ======================================================================
   COMMESSE — la schermata del tecnico (M3)
   ======================================================================

   Progettata per chi sta in piedi accanto a un mezzo, con un tablet in una
   mano e i guanti sporchi. Tre principi:

   1. LA TARGA VIENE PRIMA DI TUTTO. In officina un lavoro si chiama con la
      targa, non con il numero di commessa.
   2. UNA SOLA AZIONE PRINCIPALE ALLA VOLTA, grossa abbastanza da colpirla
      senza guardare.
   3. LO STATO DEL TIMER NON SI DEVE POTER FRAINTENDERE. Un tecnico che non
      e' sicuro se il timer gira lo riavvia, e quei minuti finiscono in
      fattura.
   ---------------------------------------------------------------------- */

/* --- la bacheca ------------------------------------------------------- */

.elenco-commesse {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}

.commessa {
    display: block; width: 100%; text-align: left;
    /* Piu' alto del minimo: si tocca camminando. */
    min-height: 96px;
    padding: var(--sp-4);
    font: inherit; color: var(--testo);
    background: var(--superficie);
    border: 1px solid var(--bordo); border-left: 4px solid var(--bordo-forte);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-1);
    cursor: pointer;
    transition: box-shadow .12s, border-color .12s, transform .06s;
}
.commessa:hover { box-shadow: var(--ombra-2); border-color: var(--bordo-forte); }
.commessa:active { transform: scale(.995); }
.commessa:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 2px; }

/* Il filo di colore a sinistra: si legge di sbieco, da lontano, mentre si
   scorre l'elenco senza fermarsi a leggere. */
.commessa[data-stato="in_progress"] { border-left-color: var(--stato-ok); }
.commessa[data-stato="available"]   { border-left-color: var(--brand-red); }
.commessa[data-stato="paused"]      { border-left-color: var(--stato-attesa); }
.commessa[data-stato="awaiting_parts"],
.commessa[data-stato="awaiting_customer_ok"] { border-left-color: var(--stato-attesa); }
.commessa[data-stato="done"],
.commessa[data-stato="closed"]      { border-left-color: var(--stato-neutro); }
.commessa[data-stato="cancelled"]   { border-left-color: var(--stato-critico); }

.commessa__testa {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}

/* La targa e' il nome del lavoro: grande, monospaziata, leggibile a colpo
   d'occhio anche storta e a mezzo metro. */
.commessa__targa {
    font-family: var(--font-mono);
    font-size: 20px; font-weight: 700; letter-spacing: .04em;
    color: var(--testo);
}

.commessa__riga  { font-size: 15px; color: var(--testo); margin-bottom: var(--sp-1); }
.commessa__nota  { font-size: 13px; color: var(--testo-secondario); }
.commessa__tecnici { color: var(--testo); font-weight: 600; }

/* --- le pillole di stato ---------------------------------------------- */

.pillola {
    display: inline-flex; align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pillola--ok      { background: var(--stato-ok-sfondo);  color: var(--stato-ok);      border-color: #C0DD97; }
.pillola--attesa  { background: var(--stato-attesa-sf);  color: var(--stato-attesa);  border-color: #FAC775; }
.pillola--critico { background: var(--stato-critico-sf); color: var(--stato-critico); border-color: #F09595; }

/* --- il timer ---------------------------------------------------------- */

.timer {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

/* Acceso, si vede da lontano che qualcosa sta correndo. */
.timer--acceso {
    background: var(--stato-ok-sfondo);
    border-color: var(--stato-ok);
    border-left: 4px solid var(--stato-ok);
}

/*
 * Il conteggio grande e monospaziato.
 *
 * Era testo normale a 14px: un tecnico a mezzo metro dal tablet non
 * distingueva un timer avviato da uno mai partito, e nel dubbio lo
 * riavviava. `tabular-nums` evita che le cifre ballino ogni secondo.
 */
.timer__conteggio {
    font-family: var(--font-mono);
    font-size: 40px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--stato-ok);
}
.timer__nota { font-size: 14px; color: var(--testo-secondario); }

/* L'azione principale: si colpisce senza guardare. */
.bottone--grande {
    min-height: 64px;
    padding: var(--sp-4) var(--sp-6);
    font-size: 18px; font-weight: 700;
    width: 100%;
}

/* --- elenchi dentro le sezioni ---------------------------------------- */

.elenco-semplice { list-style: none; padding: 0; margin: 0; }
.elenco-semplice li {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--bordo);
    font-size: 15px;
}
.elenco-semplice li:last-child { border-bottom: 0; }

/* Su un tablet: bersagli piu' grossi, e una colonna sola. */
@media (pointer: coarse) {
    .commessa { min-height: 112px; }
    .bottone--grande { min-height: 72px; font-size: 20px; }
}
@media (max-width: 560px) {
    .elenco-commesse { grid-template-columns: 1fr; }
}

/* --- documenti e firma (M5) -------------------------------------------- */

.documenti { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.documenti__voce {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--bordo);
}
.documenti__voce:last-child { border-bottom: 0; }
.documenti__voce > div:first-child { flex: 1; min-width: 0; }

.documento__righe {
    width: 100%; margin-top: var(--sp-4);
    border-collapse: collapse; font-size: 15px;
}
.documento__righe td {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--bordo);
    vertical-align: top;
}
.documento__num { text-align: right; white-space: nowrap; padding-left: var(--sp-4) !important; }

.documento__totale {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: var(--sp-4); padding-top: var(--sp-3);
    border-top: 2px solid var(--brand-ink);
    font-size: 20px;
}

.documento__azioni {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.documento__firme { margin-top: var(--sp-4); }

/*
 * Il riquadro della firma.
 *
 * `touch-action: none` non e' un dettaglio: senza, il primo movimento del
 * dito scrolla la pagina invece di lasciare un segno, e la firma esce a
 * pezzi. Vale per il canvas E per il riquadro che lo contiene.
 */
.firma__riquadro {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--superficie-alt);
    border: 2px dashed var(--bordo-forte);
    border-radius: var(--raggio);
    touch-action: none;
    overflow-x: auto;
}

.firma__tela {
    display: block;
    background: var(--superficie);
    border-radius: var(--raggio-sm);
    border: 1px solid var(--bordo);
    touch-action: none;
    /* Il pennino non deve selezionare testo mentre si firma. */
    -webkit-user-select: none; user-select: none;
    /*
     * Riempie il riquadro, con il rapporto del piano di disegno (600x200).
     * Le due cose insieme: nessuna fascia morta che sembra area di firma, e
     * nessuna deformazione del gesto.
     */
    width: 100%;
    aspect-ratio: 3 / 1;
    /*
     * Niente `max-height`: ce n'era uno da 320px e sopra i ~1080px di
     * viewport tagliava l'altezza rompendo il rapporto — misurato, tela
     * 1068x320 contro un piano 600x200. La tela seguiva il dito lo stesso, ma
     * i punti registrati uscivano schiacciati dell'11%, e la firma nel PDF
     * era una firma che il cliente non ha mai tracciato. Il riquadro cresce
     * con la pagina: su un tablet e' esattamente cio' che serve.
     */
    cursor: crosshair;
}

.firma__nota {
    margin-top: var(--sp-2);
    font-size: 12px; color: var(--testo-tenue);
}

/* --- garanzia (M6) ------------------------------------------------------ */

/*
 * Il semaforo.
 *
 * Verde, giallo e rosso sono i colori SEMAFORICI, deliberatamente distinti dal
 * rosso del marchio (§4 dell'architettura): sul display in officina il rosso
 * GARAD e il rosso "fuori garanzia" affiancati rendono lo schermo illeggibile.
 * Qui si usa la scala degli stati, la stessa delle pillole.
 */
.garanzia__semaforo {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--bordo);
    border-left-width: 6px;
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}

.garanzia__pallino {
    width: 20px; height: 20px; flex: 0 0 20px;
    border-radius: 50%;
    background: var(--stato-neutro);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}

.garanzia__semaforo--verde  { border-left-color: var(--stato-ok);      background: var(--stato-ok-sfondo); }
.garanzia__semaforo--giallo { border-left-color: var(--stato-attesa);  background: var(--stato-attesa-sf); }
.garanzia__semaforo--rosso  { border-left-color: var(--stato-critico); background: var(--stato-critico-sf); }
.garanzia__semaforo--grigio { border-left-color: var(--bordo-forte);   background: var(--superficie-alt); }

.garanzia__semaforo--verde  .garanzia__pallino { background: var(--stato-ok); }
.garanzia__semaforo--giallo .garanzia__pallino { background: var(--stato-attesa); }
.garanzia__semaforo--rosso  .garanzia__pallino { background: var(--stato-critico); }

.garanzia__apri {
    display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
    margin-top: var(--sp-4);
}

/* La targa da incollare: grande e monospazio, si legge e si ricopia a mano
   quando il browser nega gli appunti. */
.garanzia__targa {
    font-family: var(--font-mono);
    font-size: 20px; font-weight: 700; letter-spacing: .06em;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--bordo-forte); border-radius: var(--raggio-sm);
    background: var(--superficie); color: var(--testo);
    width: 9em; text-align: center;
}

/* I tre bottoni: bersagli grossi, si premono con i guanti e davanti al cliente. */
.garanzia__scelte {
    display: grid; gap: var(--sp-3); margin-top: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.garanzia__scelta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left;
    border-left-width: 6px;
}
.garanzia__scelta--verde  { border-left-color: var(--stato-ok); }
.garanzia__scelta--giallo { border-left-color: var(--stato-attesa); }
.garanzia__scelta--rosso  { border-left-color: var(--stato-critico); }

.garanzia__scelta-nota {
    font-size: 13px; font-weight: 400; color: var(--testo-secondario);
}

/* --- costi e KPI (M7) --------------------------------------------------- */

.costi__totali {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--sp-4);
}

.costi__voce {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--bordo);
    border-left: 6px solid var(--bordo-forte);
    border-radius: var(--raggio);
    background: var(--superficie-alt);
}
.costi__voce strong { display: block; font-size: 22px; letter-spacing: -.01em; }

/* Il margine cambia colore, ma il numero c'e' sempre: il colore aiuta, non
   sostituisce — la stessa regola del semaforo garanzia sul totem. */
.costi__voce--ok      { border-left-color: var(--stato-ok);      background: var(--stato-ok-sfondo); }
.costi__voce--critico { border-left-color: var(--stato-critico); background: var(--stato-critico-sf); }

/* Cosa manca al totale: leggibile, non un asterisco in fondo alla pagina. */
.costi__mancanze { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: 14px; }
.costi__mancanze li { margin-bottom: var(--sp-2); }

.kpi__periodo {
    display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.kpi__periodo .campo { margin-bottom: 0; }
.kpi__periodo input[type="date"] { min-width: 11em; }

.kpi__copertura {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--bordo);
}

/* --- auto di cortesia --------------------------------------------------- */

/*
 * Il tono neutro della pillola: un'auto fuori servizio non e' un allarme e
 * non e' un via libera. Le altre tre esistono da M3.
 */
.pillola--neutro {
    background: var(--sfondo);
    color: var(--testo-secondario);
    border-color: var(--bordo);
}

/*
 * La colonna delle azioni della flotta: i bottoni vanno a capo sui tablet
 * stretti invece di uscire dalla tabella.
 */
.cortesia__azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }