/* Getvingo — design system
   Marchio e colori: GETVINGO/brand-getvingo/guida-marchio-getvingo-v1.txt · principi UX: GETVINGO/knowledge/analisi-ux-ui-v1.txt */

:root {
  --inchiostro: #2C1A5C;   /* viola notte: barra, "get" del marchio */
  --segnale: #1F6FB2;      /* blu VIN: link, accenti */
  --segnale-scuro: #185A91;
  --segnale-tenue: #E6F0F9;
  --primario: #2C1A5C; --primario-hover: #3D2779; --primario-testo: #FFFFFF;
  --superficie: #F4F2F8;
  --carta: #FFFFFF;
  --testo: #1C1533;
  --testo-2: #5A5470;
  --bordo: #DFDBE9;
  --bordo-forte: #BDB6CF;
  --ok: #0F7A43;      --ok-tenue: #E3F4EA;
  --viaggio: #9A4A07; --viaggio-tenue: #FDF0DD;
  --spento: #5A5470;  --spento-tenue: #ECE9F2;
  --errore: #B42318;  --errore-tenue: #FDEBE9;
  --arancio: #F28C1E; --arancio-tenue: #FEF1E2; --arancio-testo: #A8560A;  /* da fare, cose importanti */
  --danno: #E11D2E;   --danno-tenue: #FFE4E6;   --danno-scuro: #BE1222;    /* danni da verificare */
  --liv-1: #C2410C; --liv-1-fondo: #FFE3D3; --liv-1-testo: #A33A08;      /* da fare: urgente */
  --liv-2: #F28C1E;                                                      /* da fare: presto */
  --liv-3: #F6C98A; --liv-3-fondo: #FDF1DE; --liv-3-testo: #8A5A00;      /* da fare: da pianificare */
  --ombra: 0 1px 2px rgba(28, 21, 51, .06), 0 2px 8px rgba(28, 21, 51, .04);
  --r: 14px; --r-s: 12px;
  --barra-sotto: 68px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --segnale: #5FA8E8; --segnale-scuro: #8CC2F0; --segnale-tenue: #14273D;
    --primario: #A99BF0; --primario-hover: #C2B8F6; --primario-testo: #120B26;
    --superficie: #0D0919; --carta: #171128; --testo: #EEEBF6; --testo-2: #A8A1BE;
    --bordo: #2C2442; --bordo-forte: #433A5E;
    --ok: #4ADE8B;      --ok-tenue: #10301F;
    --viaggio: #FBB454; --viaggio-tenue: #36260F;
    --spento: #A8A1BE;  --spento-tenue: #221B36;
    --errore: #FF8A7A;  --errore-tenue: #3A1714;
    --arancio: #F59E3B; --arancio-tenue: #3A2410; --arancio-testo: #FBB86B;
    --danno: #C81E2E;   --danno-tenue: #45121A;   --danno-scuro: #E5394A;
    --liv-1: #FF7A3D; --liv-1-fondo: #47200D; --liv-1-testo: #FFB088;
    --liv-2: #F59E3B;
    --liv-3: #8A6A3A; --liv-3-fondo: #33281A; --liv-3-testo: #F3CF95;
    --ombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* hidden vince sempre, anche su elementi con display proprio */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--superficie); color: var(--testo);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--segnale); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; line-height: 1.2; font-weight: 750; margin: 0; letter-spacing: -.01em; }
h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--testo-2); margin: 28px 0 10px; }
h3 { font-size: 1.05rem; margin: 0 0 4px; }
.icona { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.icona.s { width: 18px; height: 18px; }
:focus-visible { outline: 3px solid var(--segnale); outline-offset: 2px; }

/* ---------- Struttura ---------- */
.testata { position: sticky; top: 0; z-index: 20; background: var(--inchiostro); color: #fff; }
.testata-dentro { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; }
.marchio { display: flex; align-items: center; }
.marchio img { height: 28px; width: auto; display: block; }
.marchio:hover { text-decoration: none; }
.nav-alto { display: none; gap: 4px; align-items: center; }
.nav-alto a, .nav-alto button { color: #D3CCE8; padding: 8px 12px; border-radius: 10px; font-size: .95rem;
  background: none; border: 0; font: inherit; cursor: pointer; }
.nav-alto a.attivo, .nav-alto a:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.utente { display: flex; align-items: center; gap: 8px; color: #D3CCE8; font-size: .88rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--segnale); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem; }

main { max-width: 1280px; margin: 0 auto; padding: 16px 16px calc(var(--barra-sotto) + 32px); }
.colonna { max-width: 680px; margin: 0 auto; }
.largo { max-width: none; }

.nav-basso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--barra-sotto);
  padding-bottom: env(safe-area-inset-bottom); background: var(--carta); border-top: 1px solid var(--bordo);
  display: grid; grid-template-columns: repeat(4, 1fr); }
.nav-basso a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--testo-2); font-size: .72rem; font-weight: 600; }
.nav-basso a.attivo { color: var(--segnale); }
.nav-basso a:hover { text-decoration: none; }

@media (min-width: 860px) {
  .nav-alto { display: flex; }
  .nav-basso { display: none; }
  main { padding-bottom: 48px; }
}

/* ---------- Componenti ---------- */
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 18px; box-shadow: var(--ombra); }
.scheda + .scheda { margin-top: 12px; }
.pila > * + * { margin-top: 12px; }

.titolo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 8px 0 18px; }
.sopratitolo { font-size: .85rem; color: var(--testo-2); margin-bottom: 4px; font-weight: 600; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.in_sede, .badge.chiuso { background: var(--ok-tenue); color: var(--ok); }
.badge.multiplo { background: var(--spento-tenue); color: var(--inchiostro); font-size: .72rem; padding: 2px 8px; vertical-align: middle; }
.badge.multiplo::before { display: none; }
@media (prefers-color-scheme: dark) { .badge.multiplo { color: var(--testo); } }
.badge.in_viaggio, .badge.aperto { background: var(--viaggio-tenue); color: var(--viaggio); }
.badge.consegnato, .badge.annullato { background: var(--spento-tenue); color: var(--spento); }
.badge.predisposto { background: var(--segnale-tenue); color: var(--segnale); }
.badge.scaduto { background: var(--errore-tenue); color: var(--errore); }
.badge.lavorazione { background: var(--viaggio-tenue); color: var(--viaggio); }
.badge.pronta { background: var(--ok-tenue); color: var(--ok); }

.vin { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.vin b { color: var(--testo); font-weight: 800; }
.vin-grande { font-size: 1.12rem; color: var(--testo-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.tenue { color: var(--testo-2); }
.piccolo { font-size: .86rem; }

.avviso { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-s);
  margin-bottom: 14px; font-weight: 600; }
.avviso.ok { background: var(--ok-tenue); color: var(--ok); }
.avviso.errore { background: var(--errore-tenue); color: var(--errore); }

/* Bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 18px; border-radius: var(--r-s); border: 1px solid var(--bordo-forte); background: var(--carta);
  color: var(--testo); font: inherit; font-weight: 650; cursor: pointer; text-align: center;
  box-shadow: 0 1px 2px rgba(28, 21, 51, .06); transition: background-color .15s, border-color .15s, transform .1s; }
.btn:hover { text-decoration: none; border-color: var(--testo-2); background: var(--superficie); }
.btn:active { transform: scale(.98); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-testo);
  box-shadow: 0 1px 2px rgba(28, 21, 51, .12), 0 4px 12px rgba(44, 26, 92, .18); }
.btn.primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
@media (prefers-color-scheme: dark) { .btn, .btn.primario { box-shadow: none; } }
.btn.pieno { width: 100%; min-height: 56px; font-size: 1.05rem; }
.btn.piccolo { min-height: 44px; padding: 0 16px; font-size: .92rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--segnale); font: inherit; cursor: pointer; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* Barra azione fissa (zona del pollice) */
.barra-azione { position: sticky; bottom: calc(var(--barra-sotto) + 8px); z-index: 10; margin-top: 18px;
  padding: 10px; background: var(--carta); border: 1px solid var(--bordo); border-radius: calc(var(--r) + 4px);
  box-shadow: 0 8px 28px rgba(28, 21, 51, .14); }
.barra-azione .riepilogo { font-size: .82rem; color: var(--testo-2); text-align: center; margin: 0 0 8px; }
@media (min-width: 860px) { .barra-azione { bottom: 16px; } }

/* Moduli */
.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-size: .85rem; font-weight: 650; color: var(--testo-2); margin-bottom: 6px; }
.campo small { display: block; color: var(--testo-2); margin-top: 6px; font-size: .8rem; }
input, select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; color: var(--testo);
  background: var(--carta); border: 1.5px solid var(--bordo-forte); border-radius: var(--r-s); }
textarea { min-height: 80px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5565' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--segnale);
  box-shadow: 0 0 0 3px var(--segnale-tenue); }
input[type=file] { padding: 10px; }
.griglia-2 { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }
.input-vin { font-family: var(--mono); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.contatore { font-family: var(--mono); font-size: .82rem; color: var(--testo-2); }
.contatore.ok { color: var(--ok); font-weight: 700; }

/* Liste a schede */
.lista { display: grid; gap: 10px; }
.voce { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--r); color: var(--testo); box-shadow: var(--ombra); }
a.voce:hover { text-decoration: none; border-color: var(--bordo-forte); }
.voce .corpo { flex: 1; min-width: 0; }
.voce .corpo > * { overflow: hidden; text-overflow: ellipsis; }
.voce .lato { text-align: right; flex: none; }
.tratta { display: block; font-size: .9rem; color: var(--testo-2); margin-top: 4px; }
.tratta .icona { display: inline-block; vertical-align: -3px; margin: 0 2px; }
.vuoto { padding: 28px 16px; text-align: center; color: var(--testo-2); background: var(--carta);
  border: 1px dashed var(--bordo-forte); border-radius: var(--r); }

/* Ricerca */
.ricerca { position: relative; }
.ricerca .icona { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--testo-2); }
.ricerca input { padding-left: 46px; min-height: 56px; border-radius: var(--r); }

/* Contatori */
.contatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.contatori a { display: block; padding: 14px; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r); color: var(--testo); box-shadow: var(--ombra); }
.contatori a:hover { text-decoration: none; border-color: var(--bordo-forte); }
.contatori strong { display: block; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.contatori span { font-size: .8rem; color: var(--testo-2); font-weight: 600; }

/* Filtri a pillola */
.filtri { display: flex; gap: 6px; margin: 12px 0 14px; flex-wrap: wrap; }
.filtri a { padding: 8px 14px; border-radius: 999px; background: var(--carta); border: 1px solid var(--bordo);
  color: var(--testo-2); font-weight: 650; font-size: .9rem; white-space: nowrap; }
.filtri a.attivo { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.filtri a:hover { text-decoration: none; }

/* Documento DDT a schermo */
.documento { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--ombra); }
.documento .sezioni { display: grid; }
@media (min-width: 640px) { .documento .sezioni { grid-template-columns: 1fr 1fr; } }
.documento .sez { padding: 14px 18px; border-bottom: 1px solid var(--bordo); }
@media (min-width: 640px) { .documento .sez:nth-child(odd):not(.larga) { border-right: 1px solid var(--bordo); } }
.documento .sez.larga { grid-column: 1 / -1; }
.etichetta { font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em;
  color: var(--testo-2); margin-bottom: 4px; }
.documento .valore { font-weight: 650; }
.documento .sez:last-child { border-bottom: 0; }
.evidenza { background: var(--segnale-tenue); }

/* Cronologia */
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { position: relative; padding: 0 0 18px 30px; }
.cronologia li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--bordo); }
.cronologia li:last-child::before { display: none; }
.cronologia .punto { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--carta); box-shadow: 0 0 0 2px var(--bordo-forte); background: var(--bordo-forte); }
.cronologia .punto.creato { background: var(--segnale); box-shadow: 0 0 0 2px var(--segnale); }
.cronologia .punto.arrivo { background: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.cronologia .punto.modifica { background: var(--viaggio); box-shadow: 0 0 0 2px var(--viaggio); }
.cambi { margin: 6px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.cambi li { padding: 2px 0; }
.cambi del { color: var(--testo-2); }
.cambi ins { text-decoration: none; font-weight: 650; }

/* Tabelle (desktop) */
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; font-size: .93rem; }
.tabella th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--testo-2); background: var(--superficie); padding: 10px 14px; border-bottom: 1px solid var(--bordo); }
.tabella td { padding: 12px 14px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.spento td { opacity: .5; }
.scorre { overflow-x: auto; }

/* Varie */
details.ripiega summary { cursor: pointer; color: var(--segnale); font-weight: 650; margin-bottom: 12px; list-style: none; }
details.ripiega summary::-webkit-details-marker { display: none; }
#mappa { height: 260px; border-radius: var(--r); border: 1px solid var(--bordo); z-index: 0; }
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 500px at 50% -10%, #47318A 0%, var(--inchiostro) 60%); }
.accesso .scheda { width: 100%; max-width: 400px; padding: 28px; }
.accesso .marchio { justify-content: center; margin-bottom: 22px; }
.accesso .marchio img { height: 48px; }
.accesso .payoff { color: #B3A9D4; text-align: center; margin: -12px 0 22px; font-size: .9rem; }
.foto-vin { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px;
  border: 2px dashed var(--bordo-forte); border-radius: var(--r); background: var(--superficie);
  color: var(--segnale); font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.foto-vin .icona { width: 30px; height: 30px; }
.menu-gestione { display: grid; gap: 10px; }
@media (min-width: 640px) { .menu-gestione { grid-template-columns: 1fr 1fr; } }
.menu-gestione .voce .icona { color: var(--segnale); width: 26px; height: 26px; }
code { font-family: var(--mono); font-size: .84rem; word-break: break-all; }

/* Firma */
.firma-pad { position: relative; height: 170px; background: #fff; border: 1.5px dashed var(--bordo-forte);
  border-radius: var(--r-s); touch-action: none; }
.firma-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.firma-guida { position: absolute; left: 14px; bottom: 12px; color: #9AA5B4; font-size: .85rem; pointer-events: none;
  border-top: 1.5px solid #DCE1E8; padding-top: 4px; width: 60%; }
.firma-pad.firmata .firma-guida { visibility: hidden; }
.firma-cancella { position: absolute; right: 12px; top: 10px; font-size: .85rem; }
.firma-errore { display: none !important; color: var(--errore) !important; font-weight: 650; }
.firma-pad.manca { border-color: var(--errore); }
.firma-pad.manca + .firma-errore { display: block !important; }
.firma-attuale { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.firma-attuale img { height: 48px; background: #fff; border-radius: 8px; border: 1px solid var(--bordo); padding: 2px 8px; }
.firme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.firma-box { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 10px; text-align: center; }
.firma-box img { width: 100%; height: 56px; object-fit: contain; background: #fff; border-radius: 6px; }
.firma-box > span { display: grid; place-items: center; height: 56px; }

/* Giorni in lavorazione */
.giorni { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--spento-tenue); color: var(--testo-2); font-size: .8rem; white-space: nowrap; }
.giorni b { font-size: 1rem; color: var(--testo); font-variant-numeric: tabular-nums; }
.giorni.medio { background: var(--viaggio-tenue); color: var(--viaggio); }
.giorni.medio b { color: var(--viaggio); }
.giorni.alto { background: var(--errore-tenue); color: var(--errore); }
.giorni.alto b { color: var(--errore); }

/* Avanzamento preparazione */
.passi { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 10px 0 6px; }
.passi span { height: 6px; border-radius: 99px; background: var(--bordo); }
.passi span.fatto { background: var(--ok); }
.passi span.ora { background: var(--segnale); }
.passi-nomi { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; font-size: .72rem; color: var(--testo-2); }
.passi-nomi .fatto { color: var(--ok); font-weight: 650; }
.passi-nomi .ora { color: var(--segnale); font-weight: 700; }

/* Gruppi fornitore */
.gruppo { margin-bottom: 18px; }
.gruppo-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gruppo-testa h3 { display: flex; align-items: center; gap: 8px; }
.conteggio { font-size: .8rem; font-weight: 700; background: var(--inchiostro); color: #fff; border-radius: 99px; padding: 2px 9px; }
@media (prefers-color-scheme: dark) { .conteggio { background: var(--segnale); color: #120B26; } }

/* Scadenza ritiro */
.scadenza { font-weight: 700; color: var(--segnale); }
.scadenza.scaduta { color: var(--errore); }

/* Filtri avanzati */
.filtri-avanzati { display: grid; gap: 0 12px; }
@media (min-width: 640px) { .filtri-avanzati { grid-template-columns: repeat(3, 1fr); } }
.filtri-avanzati .campo { margin-bottom: 12px; }
.filtri-avanzati input, .filtri-avanzati select { min-height: 48px; padding: 10px 12px; }
.annullato-banda { background: var(--errore-tenue); color: var(--errore); border-radius: var(--r-s); padding: 12px 16px; margin-bottom: 14px; font-weight: 600; }
.zona-pericolo summary { color: var(--errore); }
.btn.pericolo { background: var(--errore); border-color: var(--errore); color: #fff; }
.btn.in-corso { opacity: .6; pointer-events: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- v4: menu utente, icone di stato, tempi ---------- */
:root { --prep: #0F766E; --prep-tenue: #DDF3F0; --ritiro: #C2410C; --ritiro-tenue: #FFEDE3; }
@media (prefers-color-scheme: dark) { :root { --prep: #5EEAD4; --prep-tenue: #10302D; --ritiro: #FF9F6E; --ritiro-tenue: #3B2215; } }

.nav-alto a { display: inline-flex; align-items: center; gap: 7px; }
.menu-utente { position: relative; }
.menu-utente summary { list-style: none; cursor: pointer; }
.menu-utente summary::-webkit-details-marker { display: none; }
.menu-utente[open] .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.menu-tendina { position: absolute; right: 0; top: 44px; min-width: 230px; background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: 0 12px 32px rgba(28,21,51,.18); padding: 6px; z-index: 30; }
.menu-tendina a, .menu-tendina button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  border-radius: 10px; color: var(--testo); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.menu-tendina a:hover, .menu-tendina button:hover { background: var(--superficie); text-decoration: none; }
.menu-chi { padding: 10px 12px 12px; border-bottom: 1px solid var(--bordo); margin-bottom: 6px; }
.menu-chi b { display: block; }
.menu-chi span { font-size: .82rem; color: var(--testo-2); }

.badge.con-icona::before { display: none; }
.badge.con-icona .icona { width: 15px; height: 15px; }
.badge.da_ritirare { background: var(--ritiro-tenue); color: var(--ritiro); }
.badge.preparazione { background: var(--prep-tenue); color: var(--prep); }
.badge.pronta { background: var(--ok-tenue); color: var(--ok); }
.badge.in_sede { background: var(--spento-tenue); color: var(--testo-2); }

.tondo { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--spento-tenue); color: var(--testo-2); }
.tondo .icona { width: 22px; height: 22px; }
.tondo.in_viaggio { background: var(--viaggio-tenue); color: var(--viaggio); }
.tondo.lavorazione { background: var(--viaggio-tenue); color: var(--viaggio); }
.tondo.da_ritirare { background: var(--ritiro-tenue); color: var(--ritiro); }
.tondo.preparazione { background: var(--prep-tenue); color: var(--prep); }
.tondo.pronta { background: var(--ok-tenue); color: var(--ok); }
.tondo.predisposto { background: var(--segnale-tenue); color: var(--segnale); }

/* riquadri numerici con icona */
.riquadri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 720px) { .riquadri { grid-template-columns: repeat(4, 1fr); } }
.riquadri a { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--r); color: var(--testo); box-shadow: var(--ombra); }
.riquadri a:hover { text-decoration: none; border-color: var(--bordo-forte); }
/* barra di stato: quota delle auto in quella fase, si riempie all'apertura della Panoramica */
.riquadri a { position: relative; overflow: hidden; }
.barra-stato { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--fase) 18%, transparent); }
.barra-stato::after { content: ""; position: absolute; inset: 0; background: var(--fase); transform-origin: left;
  transform: scaleX(var(--quota)); animation: riempi-barra .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--ritardo, 0s); }
@keyframes riempi-barra { from { transform: scaleX(0); } }
.riquadri strong { display: block; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.riquadri span.et { font-size: .8rem; color: var(--testo-2); font-weight: 600; }

h2 { display: flex; align-items: center; gap: 8px; }
h2 .icona { width: 16px; height: 16px; }
.filtri a { display: inline-flex; align-items: center; gap: 6px; }
.filtri a .icona { width: 16px; height: 16px; }
.filtri a .n { font-variant-numeric: tabular-nums; opacity: .75; }

/* tempi per fase */
.tempi { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--bordo); border-radius: var(--r-s); overflow: hidden; }
.tempi li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: .88rem; border-bottom: 1px solid var(--bordo); }
.tempi li:last-child { border-bottom: 0; }
.tempi li b { font-variant-numeric: tabular-nums; }
.tempi li.in-corso { color: var(--segnale); }
.tempi li.totale { background: var(--superficie); font-weight: 700; }

/* schermata arrivo da NFC */
.arrivo-hero { text-align: center; padding: 28px 18px; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: calc(var(--r) + 4px); box-shadow: var(--ombra); }
.arrivo-hero .tondo { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px; }
.arrivo-hero .tondo .icona { width: 32px; height: 32px; }
.arrivo-hero h1 { font-size: 1.35rem; }
.arrivo-hero .verso { font-size: 1.15rem; font-weight: 700; margin: 14px 0 4px; }
.vuoto .icona { width: 34px; height: 34px; color: var(--bordo-forte); display: block; margin: 0 auto 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bordo);
  background: var(--carta); color: var(--testo); font-size: .88rem; font-weight: 600; }
.chip:hover { text-decoration: none; border-color: var(--bordo-forte); }
.chip .icona { width: 16px; height: 16px; color: var(--segnale); }
.spunta { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--bordo); border-radius: var(--r-s);
  background: var(--superficie); margin-bottom: 14px; font-size: .92rem; cursor: pointer; }
.spunta input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; }
.avviso.info { background: var(--segnale-tenue); color: var(--segnale); }

/* ---------- v5 ---------- */
.filtri a.a-destra { margin-left: auto; }
.filtri a.a-destra ~ a { margin-left: 0; }
.barra-filtri { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.barra-filtri .campo { margin-bottom: 10px; }
.barra-filtri select, .barra-filtri input { min-height: 48px; padding: 10px 12px; }
.riepilogo-giorni { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.riepilogo-giorni > div { background: var(--superficie); border-radius: var(--r-s); padding: 10px 12px; }
.riepilogo-giorni .et { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--testo-2); font-weight: 650; }
.riepilogo-giorni b { display: block; font-size: 1.05rem; margin-top: 2px; }
.riepilogo-giorni small { color: var(--testo-2); font-size: .8rem; }
.tipologia { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-2);
  border: 1px solid var(--bordo); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.scelta-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.scelta-tipo label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--bordo-forte);
  border-radius: var(--r-s); cursor: pointer; font-weight: 650; color: var(--testo); }
.scelta-tipo input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.scelta-tipo label:has(input:checked) { border-color: var(--segnale); background: var(--segnale-tenue); }
#mappa-piazzale { height: 340px; border-radius: var(--r); border: 1px solid var(--bordo); margin-bottom: 16px; z-index: 0; }
/* mappa bloccata finché non la si tocca: avviso in basso, i tasti + e − funzionano sempre */
.mappa-bloccata::after { content: "Tocca la mappa per spostarla"; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 1000; pointer-events: none; padding: 4px 10px; border-radius: 999px; background: rgba(18, 11, 38, .72); color: #fff;
  font-size: 12px; white-space: nowrap; }
.dettagli-auto { margin-top: 10px; border-top: 1px solid var(--bordo); padding-top: 10px; }
.dettagli-auto summary { cursor: pointer; color: var(--segnale); font-weight: 650; list-style: none; }
.dettagli-auto summary::-webkit-details-marker { display: none; }
.mini-lista { list-style: none; margin: 8px 0 0; padding: 0; font-size: .88rem; }
.mini-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--bordo); }
.mini-lista li:last-child { border-bottom: 0; }
.coordinate { font-family: var(--mono); font-size: .82rem; color: var(--testo-2); }
.da-fare .voce { border-left: 6px solid var(--liv-3); }
/* Da fare per gravità: 1 urgente (arancio bruciato), 2 presto (arancio), 3 da pianificare (ambra chiara) */
.da-fare .voce.l1 { border-color: var(--liv-1); background: var(--liv-1-fondo); }
.da-fare .voce.l1 .tratta { color: var(--liv-1-testo); font-weight: 700; }
.da-fare .voce.l2 { border-left-color: var(--liv-2); background: var(--arancio-tenue); }
.da-fare .voce.l2 .tratta { color: var(--arancio-testo); font-weight: 650; }
.liv { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.liv.l1 { background: var(--liv-1); color: #fff; }
.liv.l2 { background: var(--liv-2); color: #fff; }
.liv.l3 { background: var(--liv-3-fondo); color: var(--liv-3-testo); }
.legenda-livelli { display: flex; gap: 6px; margin: -4px 0 10px; }
h2.importante { color: var(--arancio-testo); display: flex; align-items: center; gap: 8px; }
h2.importante .icona { color: var(--arancio); width: 18px; height: 18px; }
.conta-arancio { background: var(--arancio); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: .75rem;
  letter-spacing: 0; }
@media (prefers-color-scheme: dark) { .conta-arancio { color: #1A1206; } }

/* assistente: detta il DDT */
.assistente { background: linear-gradient(135deg, var(--segnale-tenue), var(--carta)); border: 1px solid var(--bordo);
  border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.assistente h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.assistente .riga-input { display: flex; gap: 8px; margin-top: 10px; }
.assistente textarea { min-height: 52px; flex: 1; }
.btn-mic { flex: none; width: 52px; min-height: 52px; padding: 0; border-radius: 50%; }
.btn-mic.ascolto { background: var(--errore); border-color: var(--errore); color: #fff; animation: pulsa 1.2s infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.5); } 50% { box-shadow: 0 0 0 10px rgba(180,35,24,0); } }
.assistente .esito { margin-top: 10px; font-size: .9rem; }
.campo.compilato input, .campo.compilato select { border-color: var(--ok); background: var(--ok-tenue); }

/* chiedi: barra di ricerca che si allarga in chat */
.chiedi { background: var(--carta); border: 1.5px solid var(--bordo-forte); border-radius: calc(var(--r) + 2px);
  box-shadow: var(--ombra); transition: box-shadow .2s, border-color .2s; overflow: hidden; }
.chiedi.aperta { border-color: var(--segnale); box-shadow: 0 0 0 4px var(--segnale-tenue), 0 12px 32px rgba(28,21,51,.12); }
.chiedi-barra { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; }
.chiedi-barra > .icona { color: var(--testo-2); }
.chiedi-barra input { border: 0; box-shadow: none !important; min-height: 56px; padding: 0; background: transparent; }
.btn-mic-piccolo { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--segnale-tenue);
  color: var(--segnale); display: grid; place-items: center; cursor: pointer; }
.btn-mic-piccolo.ascolto { background: var(--errore); color: #fff; animation: pulsa 1.2s infinite; }
.chiedi-corpo { display: none; border-top: 1px solid var(--bordo); }
.chiedi.aperta .chiedi-corpo { display: block; }
.chiedi .chat-msg { max-height: 52vh; min-height: 160px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chiedi-piede { display: flex; justify-content: space-between; padding: 8px 14px 12px; font-size: .88rem; }
#chat-voce { opacity: .55; display: inline-flex; align-items: center; gap: 6px; }
#chat-voce.attivo { opacity: 1; }
.chat-msg .m { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: .95rem; line-height: 1.4; white-space: pre-wrap; }
.chat-msg .m.utente { align-self: flex-end; background: var(--segnale); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg .m.assistente { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 4px; }
.chat-msg .m.errore { background: var(--errore-tenue); color: var(--errore); }
.chat-msg .auto-link { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chat-msg .suggerimenti { display: flex; flex-direction: column; gap: 6px; }
.chat-msg .suggerimenti button { text-align: left; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: .9rem; color: var(--testo); cursor: pointer; }

/* danni */
.allerta-danni { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r);
  background: var(--danno); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 18px rgba(225, 29, 46, .28); }
.allerta-danni:hover { text-decoration: none; background: var(--danno-scuro); }
.allerta-danni .tondo.danno { background: #fff; color: var(--danno); animation: pulsa-danno 1.8s ease-in-out infinite; }
@keyframes pulsa-danno { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .allerta-danni .tondo.danno { animation: none; } }
.allerta-danni div { flex: 1; }
.allerta-danni b { display: block; }
.allerta-danni span:not(.tondo) { font-size: .88rem; }
.tondo.danno { background: var(--danno); color: #fff; }
.badge.danno { background: var(--danno); color: #fff; }
.foto-danni { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 10px; }
.foto-danni a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--superficie); }
.foto-danni img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-bottom: 16px; }
.zone label { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1.5px solid var(--bordo-forte); border-radius: var(--r-s);
  font-size: .9rem; font-weight: 600; color: var(--testo); cursor: pointer; }
.zone input { width: 16px; height: 16px; min-height: 0; margin: 0; }
.zone label:has(input:checked) { border-color: var(--errore); background: var(--errore-tenue); }
.anteprime { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin-top: 8px; }
.anteprime img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* tappe della preparazione */
.tappe { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.tappe li { background: var(--superficie); border-radius: 10px; padding: 8px 10px; font-size: .82rem; }
.tappe b { display: block; font-size: .78rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.tappe span { display: block; font-weight: 700; }
.tappe small { color: var(--testo-2); }
.ripristino { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px dashed var(--bordo-forte); border-radius: var(--r); font-size: .9rem; }
.marker-sede { background: var(--segnale); color: #fff; border: 3px solid #fff; border-radius: 50%; width: 36px; height: 36px;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.annulla { display: inline-block; margin-top: 6px; }
.annulla .btn-link { color: var(--testo-2); font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.annulla .btn-link:hover { color: var(--errore); }

/* ---------- v7: stati ben distinguibili (colore pieno + bordo scheda + legenda) ---------- */
.in_viaggio { --fase: #7C3AED; } .lavorazione { --fase: #CA8A04; } .da_ritirare { --fase: #DB2777; }
.preparazione { --fase: #0D9488; } .pronta { --fase: #16A34A; } .in_sede { --fase: #475569; }
.consegnato { --fase: #94A3B8; }
@media (prefers-color-scheme: dark) {
  .in_viaggio { --fase: #A78BFA; } .lavorazione { --fase: #FACC15; } .da_ritirare { --fase: #F472B6; }
  .preparazione { --fase: #2DD4BF; } .pronta { --fase: #4ADE80; } .in_sede { --fase: #94A3B8; }
  .consegnato { --fase: #64748B; }
}
.tondo.in_viaggio, .tondo.lavorazione, .tondo.da_ritirare, .tondo.preparazione, .tondo.pronta, .tondo.in_sede, .tondo.consegnato {
  background: var(--fase); color: #fff; }
.badge.in_viaggio, .badge.lavorazione, .badge.da_ritirare, .badge.preparazione, .badge.pronta, .badge.in_sede, .badge.consegnato {
  background: var(--fase); color: #fff; }
@media (prefers-color-scheme: dark) {
  .tondo.lavorazione, .badge.lavorazione, .tondo.in_viaggio, .badge.in_viaggio, .tondo.pronta, .badge.pronta,
  .tondo.da_ritirare, .badge.da_ritirare, .tondo.preparazione, .badge.preparazione { color: #120B26; }
}
.voce.fase { border-left: 6px solid var(--fase); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; font-size: .8rem; color: var(--testo-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 4px; background: var(--fase); display: inline-block; }
.targa { font-family: var(--mono); font-weight: 800; font-size: .78rem; letter-spacing: .06em; padding: 2px 7px;
  border: 1.5px solid var(--testo); border-radius: 5px; background: var(--carta); color: var(--testo); margin-left: 8px;
  vertical-align: 2px; white-space: nowrap; }
.posizione-info { font-size: .88rem; color: var(--testo-2); margin: -4px 0 10px; }
.azioni-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.titolo-pagina .btn { flex: none; }

/* ---------- v8: telefono ---------- */
/* La griglia non deve allargarsi oltre lo schermo per colpa di un VIN (nowrap) */
.lista { grid-template-columns: minmax(0, 1fr); }

/* iPhone con notch / app aggiunta alla schermata Home (viewport-fit=cover) */
.testata { padding-top: env(safe-area-inset-top); }
.testata-dentro, main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.nav-basso { height: calc(var(--barra-sotto) + env(safe-area-inset-bottom)); }
main { padding-bottom: calc(var(--barra-sotto) + env(safe-area-inset-bottom) + 32px); }
.barra-azione { bottom: calc(var(--barra-sotto) + env(safe-area-inset-bottom) + 8px); }

/* Tocco: niente riquadro grigio di sistema, ma una risposta visibile al dito */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.btn, .voce, .riquadri a, .filtri a, .chip, .nav-basso a { transition: transform .08s ease; }
.btn:active, a.voce:active, .riquadri a:active, .filtri a:active, .chip:active { transform: scale(.97); }
.nav-basso a:active { transform: scale(.92); }
.nav-basso a.attivo { position: relative; }
.nav-basso a.attivo::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--segnale); }
@media (hover: none) { a:hover { text-decoration: none; } }

@media (max-width: 559px) {
  /* Righe con stato a destra: lo stato scende sotto il titolo, il titolo usa tutta la larghezza */
  .lista:not(.lista-ddt) .voce:has(> .lato .badge), .riga-auto { flex-wrap: wrap; row-gap: 8px; }
  .lista:not(.lista-ddt) .voce:has(> .lato .badge) > .lato, .riga-auto > .lato { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap;
    gap: 6px; align-items: center; text-align: left !important; padding-left: 56px; }
  .lato > div { margin-top: 0 !important; }
  .riga-auto > .lato.tenue { display: block; }

  /* Archivio DDT: numero e stato in testa alla scheda, dettagli sotto */
  .lista-ddt > .voce { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
  .lista-ddt > .voce > .ddt-num { width: auto !important; display: flex; gap: 8px; align-items: baseline; }
  .lista-ddt > .voce > .lato { order: 1; margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .lista-ddt > .voce > .corpo { order: 2; flex-basis: 100%; }

  /* Pillole: su più righe niente spinta a destra (resterebbe una pillola sola isolata) */
  .filtri a.a-destra { margin-left: 0; }

  /* Riquadri numerici: l'etichetta sta su una riga */
  .riquadri a { padding: 12px; gap: 10px; }
  .riquadri .tondo { width: 36px; height: 36px; border-radius: 10px; }
  .riquadri span.et { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
  .riquadri a > div { min-width: 0; }

  /* Firme affiancate e compatte invece di tre schede impilate */
  .firme { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .firma-box { padding: 6px; }
  .firma-box img, .firma-box > span { height: 44px; }
  .firma-box .etichetta { font-size: .75rem; letter-spacing: .02em; }

  /* Azioni in testa al DDT: tre bottoni uguali su una riga */
  .azioni-testa { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .azioni-testa .btn { padding: 0 6px; gap: 6px; font-size: .86rem; white-space: nowrap; min-width: 0; overflow: hidden; }
  .azioni-testa .btn .icona { width: 16px; height: 16px; }
  /* quattro azioni (admin: c'è anche Modifica) non ci stanno su una riga: due righe da due */
  .azioni-testa:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  /* telefoni stretti: senza icona la scritta resta intera */
  .azioni-testa:not(:has(> :nth-child(4))) .btn .icona { display: none; }

  #mappa-piazzale { height: 300px; }
  h1 { font-size: 1.35rem; }
  .scheda { padding: 16px; }
}

/* Filtri ripiegabili: su schermo largo il titolo "Filtri" non serve */
@media (min-width: 560px) { details.filtri-ripiegabili > summary { display: none; } }

/* DDT multiplo: aggiunta delle auto toccando gli adesivi NFC */
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.raccolta-nfc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; text-align: left;
  border: 1.5px dashed var(--arancio); border-radius: var(--r); background: var(--carta); color: var(--testo);
  font: inherit; cursor: pointer; }
.raccolta-nfc div { flex: 1; min-width: 0; }
.raccolta-nfc b { display: block; }
.raccolta-nfc div > span { font-size: .88rem; color: var(--testo-2); }
.raccolta-nfc .tondo { background: var(--arancio-tenue); color: var(--arancio-testo); }
.raccolta-nfc.attiva { border-style: solid; background: var(--arancio-tenue); cursor: default; }
.raccolta-nfc.attiva .tondo { background: var(--arancio); color: #fff; animation: pulsa-nfc 1.6s ease-in-out infinite; }
@keyframes pulsa-nfc { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,140,30,.5); } 50% { box-shadow: 0 0 0 9px rgba(242,140,30,0); } }
@media (prefers-reduced-motion: reduce) { .raccolta-nfc.attiva .tondo { animation: none; } }

/* logo della marca al posto dell'icona (Stock) */
.logo-marca { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--bordo);
  display: grid; place-items: center; overflow: hidden; }
.logo-marca img { width: 34px; height: 34px; object-fit: contain; }
.logo-marca.sigla { background: var(--spento-tenue); color: var(--inchiostro); font-weight: 800; font-size: .85rem; }
@media (prefers-color-scheme: dark) { .logo-marca.sigla { color: var(--testo); } }

/* Danni: negli elenchi solo i dati (scheda cliccabile), le foto grandi nella pagina del danno */
.scheda-danno.aperto { border-left: 5px solid var(--danno); }
.apri-danno { display: flex; gap: 12px; align-items: flex-start; color: inherit; }
.apri-danno:hover { text-decoration: none; }
.apri-danno .lato { text-align: right; flex: none; color: var(--testo-2); }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.galleria a { display: block; border-radius: 12px; overflow: hidden; background: var(--superficie); aspect-ratio: 4 / 3; }
.galleria img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 420px) { .galleria { grid-template-columns: 1fr; } .galleria a { aspect-ratio: auto; } .galleria img { height: auto; } }

/* pulsante che apre un pannello (details con summary a forma di bottone) */
.apri-con-pulsante > summary { list-style: none; }
.apri-con-pulsante > summary::-webkit-details-marker { display: none; }
.apri-con-pulsante[open] > summary { background: var(--carta); color: var(--testo); border-color: var(--bordo-forte); box-shadow: none; }
/* passo di preparazione bloccato da un danno aperto */
.blocco-danno { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-s);
  background: var(--danno-tenue); color: var(--danno-scuro); border: 1px solid var(--danno); font-size: .92rem; }
.blocco-danno:hover { text-decoration: none; background: var(--danno); color: #fff; }
@media (prefers-color-scheme: dark) { .blocco-danno { color: #FFB3BA; } }

/* DDT multiplo: scelta del metodo di aggiunta e auto caricate */
.metodi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metodo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; text-align: left;
  border: 1.5px solid var(--bordo); border-radius: var(--r); background: var(--carta); color: var(--testo);
  font: inherit; cursor: pointer; box-shadow: var(--ombra); }
.metodo:hover, .metodo[aria-expanded="true"] { border-color: var(--arancio); background: var(--arancio-tenue); }
.metodo .tondo { background: var(--arancio-tenue); color: var(--arancio-testo); }
.metodo span:not(.tondo) { font-size: .82rem; color: var(--testo-2); }
.voce.caricata { padding: 10px 14px; border-left: 5px solid var(--arancio); }
.risultati { margin-top: 8px; }
#caricate:not(:empty) { margin-bottom: 14px; }


/* ================= Impaginazione larga (UX 01/11/2026) =================
   Telefono: una colonna. Da 1024 px le pagine principali usano tutta la larghezza:
   contenuto principale a sinistra, informazioni di contesto a destra. */
.descrizione-pagina { margin: 6px 0 0; color: var(--testo-2); font-size: .95rem; max-width: 70ch; line-height: 1.45; }
.titolo-pagina h1 .conteggio { vertical-align: middle; font-size: .8rem; }
.titolo-pagina { margin-bottom: 18px; }

/* contatore nel menu (danni da verificare) */
.nav-conta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--danno); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
.icona-nav { position: relative; display: inline-flex; }
.nav-basso .nav-conta { position: absolute; top: -7px; right: -13px; min-width: 20px; height: 20px; font-size: .75rem;
  border: 2px solid var(--carta); }

/* Panoramica */
.panoramica { display: grid; gap: 14px; margin-top: 14px; }
.panoramica .allerta-danni { margin-top: 0; }
.panoramica h2 { margin-top: 10px; }
.area-numeri h2 .icona { width: 18px; height: 18px; }
.riquadri { margin-top: 0; }

/* Stock: elenco e mappa */
.stock-layout { display: grid; gap: 4px; }

/* Scheda auto e DDT: due colonne */
.pagina-2col { display: grid; gap: 0 32px; }
.col-laterale > h2:first-child { margin-top: 18px; }

/* Scheda auto: azione principale ben visibile */
.sezione-azione { margin: 6px 0 12px; }
.sezione-azione > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer;
  background: var(--carta); border: 1.5px solid var(--primario); border-radius: var(--r); box-shadow: var(--ombra); }
.sezione-azione > summary::-webkit-details-marker { display: none; }
.sezione-azione > summary .testo { flex: 1; display: flex; flex-direction: column; }
.sezione-azione > summary small { color: var(--testo-2); font-size: .86rem; }
.sezione-azione > summary > .icona:last-child { transition: transform .15s; color: var(--testo-2); }
.sezione-azione[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.sezione-azione[open] > summary > .icona:last-child { transform: rotate(90deg); }
.sezione-azione[open] > form > .scheda { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.azione-secondaria { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.azione-secondaria h3 { margin: 0; }
.azioni-veloci { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-danno { color: var(--danno-scuro); border-color: var(--danno); }
.btn-danno:hover { background: var(--danno-tenue); border-color: var(--danno); }
@media (prefers-color-scheme: dark) { .btn-danno { color: #FF8A94; } }

/* Gestione: schede in griglia */
@media (min-width: 1024px) {
  .menu-gestione { grid-template-columns: repeat(3, 1fr); }

  /* Panoramica: da fare a sinistra, numeri delle auto a destra (sempre visibili) */
  .panoramica { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "danni numeri" "fare numeri"; align-items: start; gap: 14px 28px; }
  .panoramica:not(:has(.area-danni)) { grid-template-areas: "fare numeri"; }
  .area-danni { grid-area: danni; }
  .area-numeri { grid-area: numeri; position: sticky; top: 16px; }
  .area-fare { grid-area: fare; }
  .area-fare h2, .area-numeri h2 { margin-top: 0; }
  .panoramica .riquadri { grid-template-columns: 1fr 1fr; }
  .chiedi { max-width: none; }

  /* Stock: mappa fissa a sinistra, elenco a destra */
  .stock-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "mappa elenco"; gap: 0 28px; align-items: start; }
  .stock-elenco { grid-area: elenco; }
  .stock-mappa { grid-area: mappa; position: sticky; top: 16px; }
  .stock-mappa #mappa-piazzale { height: calc(100vh - 170px); min-height: 420px; }
  .barra-filtri { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Scheda auto e DDT: contenuto a sinistra, contesto (posizione, storico, firme, cronologia) a destra */
  .pagina-2col { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
  .col-laterale > h2:first-child { margin-top: 0; }
  /* su schermo largo il pulsante principale resta nel modulo: c'è spazio, niente barra che copre i campi */
  .barra-azione { position: static; margin-top: 14px; }

  /* elenchi di schede: due per riga */
  .largo .lista.griglia { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1280px) { .largo .lista.griglia.tre { grid-template-columns: repeat(3, 1fr); } }
.largo .lista.griglia > :not(.voce) { grid-column: 1 / -1; }  /* link e avvisi tra le schede: riga intera */
/* Panoramica: da fare diviso per gruppo */
.gruppo-fare + .gruppo-fare { margin-top: 18px; }
.titolo-gruppo { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin: 6px 0 10px; color: var(--testo); }
.titolo-gruppo .icona { color: var(--testo-2); }

/* ================= Allineamenti (controllo 01/11/2026) ================= */
/* le griglie a una colonna non devono allargarsi oltre lo schermo per colpa di un testo che non va a capo */
@media (max-width: 1023px) { .panoramica, .stock-layout, .pagina-2col { grid-template-columns: minmax(0, 1fr); } }
/* intestazione: se lo stato non ci sta accanto al titolo, scende sotto invece di uscire dallo schermo */
.titolo-pagina { flex-wrap: wrap; row-gap: 8px; }
.titolo-pagina > div:first-child { flex: 1 1 220px; min-width: 0; }
.titolo-pagina > .badge { flex: none; margin-top: 4px; }
/* tabelle della Gestione su telefono: una scheda per riga, niente scorrimento laterale */
@media (max-width: 559px) {
  .scorre { overflow: visible; }
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tr { padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
  .tabella tr:last-child { border-bottom: 0; }
  .tabella td { padding: 2px 0; border: 0; }
  .tabella td[style*="text-align:right"] { text-align: left !important; margin-top: 6px; }
  .tabella td { overflow-wrap: anywhere; }
}
@media (max-width: 1023px) { .riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .panoramica .riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.riquadri a > div { min-width: 0; }
@media (min-width: 720px) and (max-width: 1023px) { .riquadri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* su computer tutte le pagine partono dallo stesso bordo sinistro (anche moduli e Gestione, più stretti) */
@media (min-width: 1024px) { .colonna { margin: 0 auto; max-width: 760px; } }  /* moduli (DDT multiplo, nuova auto...) al centro */
/* "Metti in preparazione": pulsante a misura su computer, a tutta larghezza su telefono */
@media (min-width: 640px) { .apri-con-pulsante > summary.btn { display: inline-flex; width: auto; min-width: 280px; padding: 0 28px; } }
/* telefoni stretti: le due azioni rapide una sotto l'altra, così il testo resta su una riga */
@media (max-width: 420px) { .azioni-veloci { grid-template-columns: 1fr; } }
#caricate:empty { display: none; }
.col-laterale > h2:first-child { margin-top: 22px; }
@media (min-width: 1024px) { .col-laterale > h2:first-child { margin-top: 0; } }
/* scheda danno su telefono: lo stato va sotto il testo invece di stringerlo in una colonna */
@media (max-width: 559px) {
  .apri-danno { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .apri-danno .lato { grid-column: 2; text-align: left; }
  .apri-danno .lato > div { display: none; }
}

/* consegna dell'auto pronta: tre passi */
.consegna h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.passi-consegna { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: passo; }
.passi-consegna li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; counter-increment: passo; color: var(--testo-2); }
.passi-consegna li::before { content: counter(passo); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--spento-tenue); color: var(--testo-2); font-size: .78rem; font-weight: 800; flex: none; }
.passi-consegna li.fatto { color: var(--testo); }
.passi-consegna li.fatto::before { content: "✓"; background: var(--ok); color: #fff; }
.passi-consegna li span { font-size: .88rem; color: var(--testo-2); }

/* Pronte: a che punto è la consegna */
.stato-consegna { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .9rem; color: var(--testo-2); }
.stato-consegna .icona { color: var(--ok); margin-top: 2px; }
/* Consegnate: elenco / calendario */
.filtri-consegnate .barra-filtri { margin-top: 10px; }
.barra-modo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.interruttore { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--spento-tenue); }
.interruttore a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: var(--testo-2);
  font-weight: 650; font-size: .88rem; }
.interruttore a:hover { text-decoration: none; color: var(--testo); }
.interruttore a.attivo { background: var(--carta); color: var(--testo); box-shadow: var(--ombra); }
.calendario-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.calendario-testa h3 { margin: 0; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-intestazione { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-2); text-align: center; padding: 4px 0; }
.cal-giorno { min-height: 92px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-giorno.vuoto-giorno { background: transparent; border-color: transparent; }
.cal-giorno.oggi { border-color: var(--segnale); box-shadow: 0 0 0 1px var(--segnale); }
.cal-numero { font-size: .8rem; font-weight: 700; color: var(--testo-2); }
.cal-giorno.con-auto .cal-numero { color: var(--testo); }
.cal-auto { display: block; font-size: .76rem; line-height: 1.25; padding: 4px 6px; border-radius: 6px; background: var(--ok-tenue); color: var(--testo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-auto:hover { text-decoration: none; background: var(--ok); color: #fff; }
.cal-auto .vin { font-size: .72rem; color: inherit; opacity: .8; }
@media (max-width: 640px) {
  /* telefono: i giorni diventano un elenco verticale, solo quelli con consegne */
  .calendario { grid-template-columns: 1fr; }
  .cal-intestazione, .cal-giorno:not(.con-auto) { display: none; }
  .cal-giorno { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cal-numero::after { content: " " attr(data-mese); }
  .cal-auto { white-space: normal; flex: 1 1 100%; }
}

/* "✕ Chiudi" dei riquadri apribili: compare solo quando il riquadro è aperto */
details { position: relative; }
.chiudi-pannello { display: none; position: absolute; top: 6px; right: 6px; z-index: 2; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--carta);
  color: var(--testo-2); font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; }
.chiudi-pannello:hover { color: var(--testo); border-color: var(--testo-2); }
details[open] > .chiudi-pannello { display: inline-flex; }
/* nei riquadri con intestazione grande il pulsante sta al centro della riga e sostituisce la freccia */
.sezione-azione > .chiudi-pannello { top: 50%; transform: translateY(-50%); }
.sezione-azione[open] > .chiudi-pannello { top: 34px; }
.sezione-azione[open] > summary > .icona:last-child { visibility: hidden; }
.apri-con-pulsante > .chiudi-pannello { top: 8px; right: 8px; border-color: rgba(255,255,255,.4); }
/* filtri sempre aperti su schermo largo: niente pulsante */
@media (min-width: 560px) { .filtri-ripiegabili > .chiudi-pannello { display: none !important; } }
details.ripiega[open] > summary, details.dettagli-auto[open] > summary { padding-right: 96px; }
details.ripiega > .chiudi-pannello { top: -4px; right: 0; }


/* ================= Misure dei comandi (controllo 01/11/2026) =================
   Tre altezze sole: 56 azione principale e ricerca · 48 pulsanti e campi · 44 comandi piccoli (minimo per il dito). */
:root { --alt-grande: 56px; --alt-normale: 48px; --alt-piccola: 44px; }
input, select { min-height: var(--alt-normale); }
:where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden]), select) { height: var(--alt-normale); }
input[type=file] { height: auto; }
.btn-mic-piccolo { width: var(--alt-piccola); height: var(--alt-piccola); }
/* pillole, interruttori e chip: tutti alti uguali */
.filtri a, .chip, .interruttore a { min-height: 40px; }
/* scelte con casella: tutta la riga è toccabile */
.spunta { min-height: var(--alt-normale); align-items: center; }
.zone label { min-height: var(--alt-piccola); }
/* link che fanno da pulsante: stessa grafica, area toccabile più alta senza spostare il resto */
.btn-link, .annulla .btn-link { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
.annulla { margin-top: 12px; }
/* riquadri apribili: la riga del titolo è un bersaglio vero */
details.ripiega > summary, details.dettagli-auto > summary, details.filtri-ripiegabili > summary {
  display: flex; align-items: center; gap: 6px; min-height: var(--alt-piccola); }
.chiudi-pannello { min-height: 36px; padding: 6px 12px; }
.chiudi-pannello::after { content: ""; position: absolute; inset: -6px; }  /* area toccabile 48 px */
/* avatar del menu: area toccabile 44 px */
.menu-utente > summary { padding: 6px; margin: -6px; border-radius: 50%; }
@media (max-width: 1023px), (pointer: coarse) {
  .filtri a, .chip, .interruttore a { min-height: var(--alt-piccola); }
}
/* azioni pericolose (cancella DDT, elimina auto): sempre rosse e staccate dal resto */
details.zona-pericolo > summary { color: var(--danno-scuro); font-weight: 650; }
@media (prefers-color-scheme: dark) { details.zona-pericolo > summary { color: #FF8A94; } }
.zona-pericolo { margin-top: 32px !important; padding-top: 16px; border-top: 1px dashed var(--bordo-forte); }
/* su computer il pulsante principale sta nel modulo senza il riquadro della barra fissa del telefono */
@media (min-width: 1024px) {
  .barra-azione { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
  .barra-azione .riepilogo { text-align: left; }
}

/* pannello aperto da un pulsante in alto, con la freccia per chiuderlo */
.pannello { position: relative; margin-bottom: 16px; border: 1.5px solid var(--primario); }
.pannello h3 { margin: 0; display: flex; align-items: center; gap: 8px; padding-right: 100px; }
.chiudi-freccia { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo-2);
  font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; }
.chiudi-freccia:hover, .chiudi-pannello:hover { color: var(--testo); border-color: var(--testo-2); }
.chiudi-freccia::after { content: ""; position: absolute; inset: -6px; }
/* scadenza della preparazione */
.scadenza-prep > summary { color: var(--testo-2); font-weight: 600; }
.scadenza-prep.in-ritardo > summary { color: var(--liv-1-testo); font-weight: 700; }
/* eventi del calendario: colori per tipo */
.cal-auto.ev.consegnata { background: var(--ok-tenue); }
.cal-auto.ev.pronta_entro { background: var(--prep-tenue, #E0F5F2); }
.cal-auto.ev.consegna_prevista { background: var(--segnale-tenue); }
.cal-auto.ev.ritardo { background: var(--liv-1-fondo); color: var(--liv-1-testo); }
.legenda-calendario { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: .78rem; }
.legenda-calendario .ev { padding: 3px 10px; border-radius: 999px; font-weight: 650; }
.legenda-calendario .ev.pronta_entro { background: var(--prep-tenue, #E0F5F2); }
.legenda-calendario .ev.consegna_prevista { background: var(--segnale-tenue); }
.legenda-calendario .ev.ritardo { background: var(--liv-1-fondo); color: var(--liv-1-testo); }
/* Panoramica: la giornata di oggi */
.oggi-calendario { margin-top: 16px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--ombra); }
.oggi-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.oggi-testa h2 { margin: 0; display: flex; align-items: center; gap: 6px; }
.oggi-testa h2 .icona { width: 16px; height: 16px; }
.oggi-voce { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--testo); margin-top: 6px; }
.oggi-voce:hover { text-decoration: none; filter: brightness(.97); }
.oggi-voce .ora { font-family: var(--mono); font-weight: 800; font-size: .9rem; flex: none; min-width: 48px; }
.oggi-voce .testo { display: flex; flex-direction: column; min-width: 0; }
.oggi-voce small { color: var(--testo-2); font-size: .8rem; }
.oggi-voce.pronta_entro { background: var(--prep-tenue, #E0F5F2); }
.oggi-voce.consegna_prevista { background: var(--segnale-tenue); }
.oggi-voce.ritardo { background: var(--liv-1-fondo); }
.oggi-voce.ritardo small { color: var(--liv-1-testo); font-weight: 650; }
/* scheda auto: lavoro in corso e azioni rapide sotto la mappa */
.lavoro-dettaglio { margin: 2px 0 4px; padding: 6px 10px; border-radius: 8px; background: var(--viaggio-tenue); color: var(--testo);
  font-size: .92rem; font-weight: 600; }
.portami { margin-top: 10px; }
.portami .tenue { font-weight: 500; }
.azioni-laterali { display: grid; gap: 10px; }
.azioni-laterali form { margin: 0; }
.prepara-qui { margin: 0; padding: 10px 14px; border: 1px solid var(--bordo); border-radius: var(--r); background: var(--carta); }
.prepara-qui > summary { margin: 0; color: #0D9488; }
.prepara-qui[open] > summary { margin-bottom: 10px; }
/* mappa dello stock: etichette leggibili su stradale e satellite */
.leaflet-tooltip.etichetta-mappa { background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(28,21,51,.18); font: 600 .78rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 4px 8px; }
.leaflet-tooltip.etichetta-mappa::before { display: none; }
.sulla-mappa { font-size: .82rem; white-space: nowrap; }
/* freccia per tornare indietro (pagine dei danni) */
.torna-indietro { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 10px; margin-bottom: 8px;
  border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo); font-weight: 650; font-size: .88rem; }
.torna-indietro:hover { text-decoration: none; border-color: var(--testo-2); }
/* stock: un'auto con danno da verificare ha la barra rossa, non il colore dello stato */
.voce.fase.con-danno { border-left-color: var(--danno); }
/* mappe più nitide: niente sfocatura nell'ingrandimento delle tessere */
.leaflet-container img.leaflet-tile { image-rendering: auto; }
/* Panoramica · Oggi: neutro, senza colori (il ritardo è scritto, non colorato) */
.oggi-voce, .oggi-voce.pronta_entro, .oggi-voce.consegna_prevista, .oggi-voce.ritardo { background: var(--superficie); }
.oggi-voce.ritardo small { color: var(--testo); font-weight: 700; }
.oggi-voce + .oggi-voce { margin-top: 4px; }
/* Gestione · loghi delle marche */
.riga-marchio { align-items: center; }
.carica-marchio { display: flex; align-items: center; gap: 10px; flex: none; }
.carica-marchio label.btn { cursor: pointer; }
@media (max-width: 559px) { .riga-marchio { flex-wrap: wrap; } .carica-marchio { width: 100%; } }
/* Panoramica · Da fare: niente fondo arancione, resta solo il contorno colorato */
.da-fare .voce.l1, .da-fare .voce.l2 { background: var(--carta); border-width: 1.5px 1.5px 1.5px 6px; border-style: solid; }
.da-fare .voce.l1 { border-color: var(--liv-1); }
.da-fare .voce.l2 { border-color: var(--liv-2); }
/* Da fare: ogni gruppo ha la sua famiglia di colore, con la stessa scala di gravità
   (lavorazioni e ritiri = arancio · preparazione = verde acqua, il colore della preparazione) */
:root { --prep-1: #0F5F59; --prep-2: #0D9488; --prep-3: #99DDD4; --prep-3-fondo: #E3F6F3; --prep-testo: #0B5C55; }
@media (prefers-color-scheme: dark) { :root { --prep-1: #5EEAD4; --prep-2: #2DD4BF; --prep-3: #2C6B64; --prep-3-fondo: #12302D; --prep-testo: #7EE8D8; } }
.gruppo-preparazione .da-fare .voce { border-left-color: var(--prep-3); }
.gruppo-preparazione .da-fare .voce.l1 { border-color: var(--prep-1); }
.gruppo-preparazione .da-fare .voce.l2 { border-color: var(--prep-2); }
.gruppo-preparazione .da-fare .voce.l1 .tratta, .gruppo-preparazione .da-fare .voce.l2 .tratta { color: var(--prep-testo); }
.gruppo-preparazione .liv.l1 { background: var(--prep-1); color: #fff; }
.gruppo-preparazione .liv.l2 { background: var(--prep-2); color: #fff; }
.gruppo-preparazione .liv.l3 { background: var(--prep-3-fondo); color: var(--prep-testo); }
@media (prefers-color-scheme: dark) { .gruppo-preparazione .liv.l1, .gruppo-preparazione .liv.l2 { color: #062421; } }
/* Lavorazioni e Preparazione: filtro vetture / commerciali e un pulsante per tipo di lavorazione */
.filtro-tipologia { margin: 0 0 12px; }
.pulsanti-lavorazione { margin: 0 0 16px; flex-wrap: wrap; }
/* Panoramica · Oggi: pulsante del calendario ben visibile */
.oggi-testa { flex-wrap: wrap; row-gap: 8px; }
.apri-calendario { min-height: 40px; padding: 0 14px; font-size: .86rem; }
.apri-calendario .icona { color: var(--prep-2, #0D9488); }

/* Panoramica · Da fare: il contorno colorato sta attorno al gruppo (titolo compreso), non sulle singole auto.
   Lavorazioni e ritiri = arancio, Preparazione = verde acqua; la gravità resta nell'etichetta e nel testo. */
.gruppo-fare { border: 2px solid var(--arancio); border-radius: calc(var(--r) + 4px); padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--arancio) 4%, transparent); }
.gruppo-fare.gruppo-preparazione { border-color: var(--prep-2); background: color-mix(in srgb, var(--prep-2) 4%, transparent); }
.gruppo-fare + .gruppo-fare { margin-top: 16px; }
.gruppo-fare .titolo-gruppo { margin: 0 0 10px; }
.gruppo-fare.gruppo-lavorazioni .titolo-gruppo .icona { color: var(--arancio); }
.gruppo-fare.gruppo-preparazione .titolo-gruppo .icona { color: var(--prep-2); }
.gruppo-fare .da-fare .voce, .gruppo-fare .da-fare .voce.l1, .gruppo-fare .da-fare .voce.l2, .gruppo-fare .da-fare .voce.l3 {
  border: 1px solid var(--bordo); background: var(--carta); }
@media (max-width: 559px) { .gruppo-fare { padding: 10px 10px 12px; } }

/* Nuovo / Usato */
.condizione { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: .75rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; border: 1px solid; }
.condizione.nuovo { color: var(--segnale); border-color: var(--segnale); background: var(--segnale-tenue); }
.condizione.usato { color: var(--testo-2); border-color: var(--bordo-forte); background: var(--spento-tenue); }
.badge.nuovo { background: var(--segnale); color: #fff; }
.badge.usato { background: var(--spento); color: #fff; }
.badge.da-indicare { background: transparent; color: var(--testo-2); border: 1px dashed var(--bordo-forte); }
.badge.da-indicare::before { display: none; }
@media (prefers-color-scheme: dark) { .badge.nuovo, .badge.usato { color: #120B26; } }
.etichetta-campo { display: block; font-size: .85rem; font-weight: 650; color: var(--testo-2); margin: 4px 0 6px; }
.condizione-mancante { width: 100%; align-items: center; padding: 8px 12px; border: 1px dashed var(--bordo-forte); border-radius: var(--r-s); }

/* ================= Pagina del DDT: dati leggibili ================= */
.ddt-tratta { background: var(--carta); border: 1px solid var(--bordo); border-left: 5px solid var(--primario); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombra); margin-bottom: 12px; }
.ddt-luoghi { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ddt-luoghi .etichetta { display: block; margin-bottom: 2px; }
.ddt-luoghi b { font-size: 1.15rem; line-height: 1.25; }
.ddt-luoghi small { display: block; margin-top: 2px; }
.ddt-freccia { color: var(--testo-2); }
.ddt-tappe { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ddt-tappe li { border-top: 4px solid var(--bordo); padding-top: 6px; color: var(--testo-2); }
.ddt-tappe li.fatto { border-top-color: var(--ok); color: var(--testo); }
.ddt-tappe li span { display: block; font-weight: 700; font-size: .86rem; }
.ddt-tappe li small { font-size: .78rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.ddt-blocco { margin-bottom: 12px; padding: 14px 16px; }
.ddt-titolo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--testo-2); }
.ddt-auto { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.ddt-auto + .ddt-auto { border-top: 1px solid var(--bordo); }
.ddt-auto .corpo { flex: 1; min-width: 0; }
.ddt-auto a { color: var(--testo); }
.ddt-vin { margin-top: 2px; font-size: 1.02rem; }
.ddt-dati { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 8px 16px; margin: 0; }
.ddt-dati dt { color: var(--testo-2); font-size: .88rem; }
.ddt-dati dd { margin: 0; font-weight: 650; }
.ddt-nota { display: block; font-weight: 500; color: var(--testo-2); font-size: .9rem; }
.ok-testo { display: block; color: var(--ok); font-weight: 650; font-size: .9rem; }
.attenzione-testo { color: var(--arancio-testo); font-weight: 650; }
.ddt-parti { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ddt-parti .ddt-blocco { margin-bottom: 12px; }
@media (max-width: 559px) {
  .ddt-luoghi { grid-template-columns: 1fr; gap: 4px; }
  .ddt-freccia { transform: rotate(90deg); width: 22px; }
  .ddt-parti { grid-template-columns: 1fr; gap: 0; }
}


/* ================= Colori: contrasto e coerenza (analisi 02/11/2026, knowledge/analisi-colori-v1.txt) =================
   Le tinte di fase vivaci restano per i pallini della mappa e le barre laterali (senza testo); dove c'è testo bianco
   sopra si usa la variante "piena", più scura, con contrasto ≥ 4,5:1. */
.in_viaggio { --fase-pieno: #7C3AED; } .lavorazione { --fase-pieno: #A16207; } .da_ritirare { --fase-pieno: #BE185D; }
.preparazione { --fase-pieno: #0F766E; } .pronta { --fase-pieno: #15803D; } .in_sede { --fase-pieno: #475569; }
.consegnato { --fase-pieno: #64748B; }
.tondo.in_viaggio, .tondo.lavorazione, .tondo.da_ritirare, .tondo.preparazione, .tondo.pronta, .tondo.in_sede, .tondo.consegnato,
.badge.in_viaggio, .badge.lavorazione, .badge.da_ritirare, .badge.preparazione, .badge.pronta, .badge.in_sede, .badge.consegnato {
  background: var(--fase-pieno, var(--fase)); }
@media (prefers-color-scheme: dark) {
  .in_viaggio, .lavorazione, .da_ritirare, .preparazione, .pronta, .in_sede, .consegnato { --fase-pieno: var(--fase); }
  .tondo.in_sede, .badge.in_sede { color: #120B26; }
  .liv.l1, .gruppo-preparazione .liv.l1 { color: #120B26; }
}
/* arancio pieno: testo scuro sopra (il bianco non si legge) */
.conta-arancio, .liv.l2 { color: #2A1600; }
/* stato del DDT con gli stessi colori dello stato dell'auto */
.badge.aperto { background: #7C3AED; color: #fff; }
.badge.predisposto, .tondo.predisposto { background: #BE185D; color: #fff; }
.badge.scaduto { background: var(--liv-1); color: #fff; }
.badge.chiuso { background: var(--ok-tenue); color: var(--ok); }
@media (prefers-color-scheme: dark) {
  .badge.aperto { background: #A78BFA; color: #120B26; }
  .badge.predisposto, .tondo.predisposto { background: #F472B6; color: #120B26; }
  .badge.scaduto { color: #120B26; }
}
/* giorni in lavorazione: oltre soglia = urgente (arancio scuro), il rosso resta ai danni */
.giorni.alto { background: var(--liv-1-fondo); color: var(--liv-1-testo); }
.giorni.alto b { color: var(--liv-1-testo); }
@media (prefers-color-scheme: dark) { .giorni.alto, .giorni.alto b { color: #FFB088; } }
/* pagina DDT: mittente e destinatario allineati */
.ddt-parti > .scheda + .scheda { margin-top: 0; }

/* Panoramica animata all'apertura: riquadri, barre di stato, "Oggi" e "Da fare" entrano uno dopo l'altro */
@keyframes entra-su { from { opacity: 0; transform: translateY(8px); } }
@keyframes entra-lato { from { opacity: 0; transform: translateX(-10px); } }
@keyframes pulsa-urgente { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--liv-1) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--liv-1) 0%, transparent); } }
.panoramica .riquadri a, .panoramica .oggi-voce { animation: entra-su .45s ease-out both; animation-delay: var(--ritardo, 0s); }
.panoramica .da-fare .voce, .panoramica .titolo-gruppo { animation: entra-lato .45s ease-out both; animation-delay: var(--ritardo, 0s); }
.panoramica .da-fare .voce.l1 .liv { animation: pulsa-urgente 2s ease-in-out 1s 3; }
@media (prefers-reduced-motion: reduce) {
  .panoramica .riquadri a, .panoramica .oggi-voce, .panoramica .da-fare .voce, .panoramica .titolo-gruppo,
  .panoramica .da-fare .voce.l1 .liv, .barra-stato::after { animation: none; }
}

/* Preparazione: tasto "fatto" ben riconoscibile (verde acqua pieno, spunta in un cerchio, passo n di 4) */
.btn.btn-fatto { background: var(--prep); border-color: var(--prep); color: #fff; justify-content: flex-start; gap: 14px;
  padding: 10px 16px; min-height: 64px; text-align: left; box-shadow: 0 2px 0 color-mix(in srgb, var(--prep) 60%, #000); }
.btn.btn-fatto:hover { background: color-mix(in srgb, var(--prep) 88%, #000); }
.btn.btn-fatto.finale { background: #15803D; border-color: #15803D; box-shadow: 0 2px 0 #0E5A2B; }
.btn.btn-fatto.finale:hover { background: #126C34; }
.btn-fatto .spunta-tonda { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--prep); }
.btn-fatto.finale .spunta-tonda { color: #15803D; }
.btn-fatto .testo-fatto { display: flex; flex-direction: column; line-height: 1.2; }
.btn-fatto .testo-fatto small { font-size: .74rem; font-weight: 600; opacity: .9; }
.btn-fatto .testo-fatto b { font-size: 1.08rem; }
@media (prefers-color-scheme: dark) { .btn.btn-fatto { color: #062B28; } .btn-fatto .spunta-tonda { background: #062B28; color: var(--prep); }
  .btn.btn-fatto.finale { color: #fff; } }
/* riquadro della preparazione: si apre toccando lo sfondo o i dati dell'auto */
.voce.apribile { cursor: pointer; }
.voce.apribile:hover { border-color: var(--bordo-forte); }
/* Preparazione: finché non si tocca l'adesivo NFC dell'auto il passo non si conferma */
.attesa-tocco { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-radius: var(--r);
  border: 2px dashed var(--prep); background: var(--prep-tenue); color: var(--prep); }
.attesa-tocco .spunta-tonda { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--prep); color: #fff; animation: pulsa-tocco 1.8s ease-in-out infinite; }
.attesa-tocco .testo-fatto { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.attesa-tocco .btn-link { flex: none; color: var(--prep); }
.attesa-tocco small { font-size: .74rem; font-weight: 600; }
.attesa-tocco b { font-size: 1rem; }
@keyframes pulsa-tocco { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prep) 45%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--prep) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .attesa-tocco .spunta-tonda { animation: none; } }
@media (prefers-color-scheme: dark) { .attesa-tocco .spunta-tonda { color: #062B28; } }
.simula-tocco { display: inline-block; margin-top: 6px; }

/* Tocco NFC su auto ferma: due sole scelte; poi la destinazione con un tocco */
.tocco-scelte { margin-top: 16px; }
.destinazioni h3 { margin: 20px 0 8px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }
.destinazione-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
  margin-bottom: 8px; text-align: left; font: inherit; color: var(--testo); background: var(--carta);
  border: 1.5px solid var(--bordo-forte); border-radius: var(--r); cursor: pointer; }
.destinazione-btn:hover { border-color: var(--primario); }
.destinazione-btn:active { transform: scale(.98); }
.destinazione-btn small { display: block; color: var(--testo-2); font-size: .85rem; }
.destinazione-btn.spenta { opacity: .55; cursor: not-allowed; border-style: dashed; }
.destinazione-btn.in-corso { opacity: .6; pointer-events: none; }
.tondo-piccolo { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--segnale-tenue); color: var(--segnale); }
.arrivo-esito { margin-top: 10px; }
.bordo-da-fare { border: 1.5px solid var(--arancio); }
.demo-barra { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-bottom: 12px;
  border: 1.5px dashed var(--arancio); border-radius: var(--r); color: var(--arancio-testo); background: var(--arancio-tenue);
  font-weight: 600; text-decoration: none; }
a.destinazione-btn { text-decoration: none; }
.tocco-nota { text-align: center; margin: 8px 0 0; }
.tocco-danni { margin-top: 10px; color: var(--danno-scuro); font-weight: 650; }
.tocco-dati > summary { list-style: none; cursor: pointer; }
.tocco-dati > summary::-webkit-details-marker { display: none; }
.tocco-dati[open] > summary { border-color: var(--primario); }
.tocco-dati > .scheda { margin-top: 8px; }
.tocco-dati .ddt-titolo { margin: 16px 0 8px; }
.tocco-dati .ddt-titolo:first-child { margin-top: 0; }
.tocco-ddt { list-style: none; margin: 0; padding: 0; }
.tocco-ddt li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--bordo); }
.tocco-ddt li:last-child { border-bottom: 0; }
.tocco-ddt a { color: var(--testo); text-decoration: none; }
.tocco-ddt small { display: block; color: var(--testo-2); }
.destinazione-nuova { margin-top: 20px; }
.destinazione-nuova h3 { margin: 0 0 10px; }
.destinazione-nuova small { display: block; margin-top: 8px; }
.scelta-tipo-4 label { font-size: .95rem; }

/* Tocco: dati veicolo (carta dell'auto, riquadri informativi, DDT in miniatura) */
.tocco-dati[open] > summary { margin-bottom: 10px; }
.carta-auto { position: relative; overflow: hidden; padding: 18px; border-radius: calc(var(--r) + 4px); color: #fff;
  background: linear-gradient(135deg, #2C1A5C 0%, #3D2779 55%, #1F6FB2 140%); box-shadow: var(--ombra); }
.carta-auto::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,140,30,.35), transparent 70%); pointer-events: none; }
.carta-auto-testa { display: flex; align-items: center; gap: 14px; }
.carta-auto .logo-marca { width: 56px; height: 56px; border: 0; }
.carta-auto .logo-marca img { width: 42px; height: 42px; }
.carta-auto-nome { display: flex; flex-direction: column; min-width: 0; }
.carta-auto-nome small { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.carta-auto-nome b { font-size: 1.45rem; line-height: 1.15; }
.carta-auto-nome span { opacity: .85; font-size: .95rem; }
.carta-auto-chip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.carta-auto .chip-dato { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; font-size: .85rem; font-weight: 600; }
.carta-auto .chip-dato.tenue { opacity: .7; }
.carta-auto .targa { background: #fff; color: #111; }
.carta-auto-vin { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 1.05rem; }
.carta-auto-vin small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.carta-auto-vin .vin { color: #fff; }
.carta-auto-vin .vin b { color: #FFC27A; }
.riquadri-info { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .riquadri-info { grid-template-columns: repeat(3, 1fr); } }
.info-tile { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--r); }
.info-tile small { display: block; color: var(--testo-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.info-tile b { display: block; }
.info-tile span:not(.tondo-piccolo) { display: block; color: var(--testo-2); font-size: .88rem; }
.tocco-ddt-blocco { margin: 14px 0; }
.tocco-ddt-blocco h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.tocco-ddt-blocco .conta { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--segnale-tenue);
  color: var(--segnale); font-size: .82rem; text-align: center; }
.ddt-mini { padding: 12px 14px; margin-bottom: 8px; background: var(--carta); border: 1px solid var(--bordo);
  border-left: 5px solid var(--bordo-forte); border-radius: var(--r); }
.ddt-mini.stato-aperto { border-left-color: #7C3AED; }
.ddt-mini.stato-chiuso { border-left-color: var(--ok); }
.ddt-mini.stato-predisposto, .ddt-mini.stato-scaduto { border-left-color: #BE185D; }
.ddt-mini-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--testo); text-decoration: none; }
.ddt-mini-tratta { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-weight: 650; }
.ddt-mini-azioni { display: flex; gap: 8px; margin-top: 10px; }
.ddt-mini-azioni .btn { flex: 1; }

/* Tocco su auto in preparazione: avanzamento a passi */
.tocco-prep { border: 1.5px solid var(--prep); }
.tocco-prep-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tocco-prep-testa small { display: block; color: var(--prep); font-weight: 650; }
.tocco-prep-testa b { font-size: 1.25rem; }
.tocco-prep-perc { font-size: 1.6rem; font-weight: 800; color: var(--prep); }
.tocco-passi { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tocco-passi li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; }
.tocco-passi li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px;
  background: var(--bordo); z-index: 0; }
.tocco-passi li.fatto + li::before { background: var(--prep); }
.tocco-passi .pallino { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 800; background: var(--carta); border: 2px solid var(--bordo-forte); color: var(--testo-2); }
.tocco-passi .fatto .pallino { background: var(--prep); border-color: var(--prep); color: #fff; }
.tocco-passi .ora .pallino { border-color: var(--prep); color: var(--prep); box-shadow: 0 0 0 4px var(--prep-tenue); }
.tocco-passi .nome { font-size: .8rem; font-weight: 650; }
.tocco-passi small { font-size: .72rem; color: var(--testo-2); }

/* Arrivo: DDT in viaggio */
.viaggio-carta { margin-top: 12px; padding: 18px; border-radius: calc(var(--r) + 4px); background: var(--carta);
  border: 1px solid var(--bordo); box-shadow: var(--ombra); }
.viaggio-tratta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.viaggio-tratta .luogo small { display: block; color: var(--testo-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.viaggio-tratta .luogo b { display: block; font-size: 1.05rem; line-height: 1.2; }
.viaggio-tratta .luogo span { display: block; color: var(--testo-2); font-size: .85rem; }
.viaggio-tratta .luogo.arrivo { text-align: right; }
.viaggio-linea { position: relative; width: 70px; height: 32px; }
.viaggio-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed #7C3AED; }
.viaggio-linea .icona { position: absolute; top: 4px; left: 0; width: 24px; height: 24px; color: #7C3AED;
  background: var(--carta); animation: viaggia 2.6s ease-in-out infinite alternate; }
@keyframes viaggia { from { left: 0; } to { left: calc(100% - 24px); } }
@media (prefers-reduced-motion: reduce) { .viaggio-linea .icona { animation: none; left: calc(50% - 12px); } }
.viaggio-durata { margin: 12px 0 0; text-align: center; color: #7C3AED; font-weight: 700; }
.viaggio-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.viaggio-dati > div { padding: 10px 12px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r); }
.viaggio-dati small { display: block; color: var(--testo-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.viaggio-dati b { display: block; font-size: .95rem; }
.viaggio-dati .largo { grid-column: 1 / -1; }
.viaggio-dati .da-fare { border-color: var(--arancio); background: var(--arancio-tenue); }
.viaggio-azioni { display: flex; gap: 8px; margin-top: 12px; }
.viaggio-azioni .btn { flex: 1; }

/* Carta dell'auto: colore della fase sul bordo alto (scheda veicolo e tocco) */
.carta-auto { border-top: 5px solid var(--fase, #1F6FB2); }
.carta-auto-testa { position: relative; z-index: 1; }
.carta-auto-stato { margin-left: auto; align-self: flex-start; }
.carta-auto-stato .badge { background: rgba(255,255,255,.95); color: #2C1A5C; }
.carta-auto .badge.nuovo, .carta-auto .badge.usato { background: #fff; color: #2C1A5C; }
.carta-auto .badge.nuovo { color: var(--segnale); }
.scheda-auto-testa { margin-bottom: 14px; }
/* carta dell'auto a tutta larghezza, i riquadri sotto (in fila da 560 px) */
.scheda-auto-testa .carta-auto { padding: 22px 24px; }
@media (min-width: 1024px) { .scheda-auto-testa .carta-auto-nome b { font-size: 1.8rem; } }
.conta-titolo { min-width: 26px; padding: 1px 9px; border-radius: 999px; background: var(--segnale-tenue); color: var(--segnale);
  font-size: .85rem; vertical-align: middle; }
.ddt-mini-viaggio { margin: 8px 0 0; color: #7C3AED; font-weight: 700; }
.ddt-mini-viaggio.grande { font-size: 1.05rem; }
.ddt-mini-anteprima { margin-top: 10px; width: 100%; }

/* Tocchi del viaggio: orario, cosa, minuti dal precedente */
.tocchi { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; }
.tocchi li { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline;
  padding: 6px 0 6px 18px; }
.tocchi li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: #7C3AED; }
.tocchi li + li::after { content: ""; position: absolute; left: 4px; top: -8px; height: 20px; border-left: 2px dotted var(--bordo-forte); }
.tocchi li.arrivo::before { background: var(--ok); }
.tocchi .ora { font-weight: 800; font-variant-numeric: tabular-nums; }
.tocchi .delta { color: #7C3AED; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.tocchi.compatto li { padding-top: 3px; padding-bottom: 3px; font-size: .9rem; }
.tocchi.compatto li::before { top: 9px; }
.tocchi-totale { margin: 6px 0 0; color: var(--testo-2); font-size: .88rem; font-weight: 600; }

/* Partenza fissa nel "Dove la porti?" */
.partenza-fissa { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 12px 0 4px;
  background: var(--segnale-tenue); border: 1.5px solid var(--segnale); border-radius: var(--r); }
.partenza-fissa small { display: block; color: var(--segnale); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.partenza-fissa b { display: block; font-size: 1.1rem; }
.partenza-fissa span:not(.tondo-piccolo) { display: block; color: var(--testo-2); font-size: .88rem; }
.partenza-fissa .ok-testo, .partenza-fissa .attenzione-testo { margin-top: 4px; }

/* Anteprima DDT: un foglio leggibile sul telefono */
.anteprima-barra { position: sticky; top: 8px; z-index: 5; display: flex; gap: 8px; margin: 8px 0 12px; }
.anteprima-barra .btn { flex: 1; }
.anteprima-stato { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); font-weight: 600; }
.anteprima-stato.aperto { background: #F1EAFE; color: #5B21B6; }
.anteprima-stato.chiuso { background: var(--ok-tenue); color: var(--ok); }
.foglio-ddt { background: #fff; color: #1b1530; border-radius: 6px; padding: 20px; box-shadow: 0 6px 24px rgba(20,10,50,.18);
  border-top: 6px solid #2C1A5C; }
.foglio-ddt small { display: block; color: #6b6585; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.foglio-ddt b { display: block; }
.foglio-ddt span { display: block; color: #4a4560; font-size: .88rem; }
.foglio-ddt section { margin-top: 16px; }
.foglio-testa { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #ece9f3; }
.foglio-numero { text-align: right; }
.foglio-numero b { font-size: 1.4rem; color: #2C1A5C; }
.foglio-numero .badge { display: inline-block; margin-top: 6px; }
.foglio-tratta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px;
  background: #f6f4fb; border-radius: 8px; }
.foglio-tratta > div:last-child { text-align: right; }
.foglio-freccia .icona { color: #F28C1E; width: 24px; height: 24px; }
.foglio-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.foglio-griglia .largo { grid-column: 1 / -1; }
.foglio-titolo { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #1F6FB2; }
.foglio-bene { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #ece9f3; }
.foglio-bene span { display: inline; }
.foglio-bene-id { font-size: .95rem; }
.foglio-ddt .vin { color: #1b1530; }
.foglio-ddt .tocchi .cosa, .foglio-ddt .tocchi .ora { color: #1b1530; }
.foglio-firme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foglio-firme .firma-box { background: #fff; color: #1b1530; border: 1px solid #ece9f3; }
.foglio-firme .firma-box img { max-width: 100%; height: 60px; object-fit: contain; }
.foglio-revisioni { margin: 0; padding-left: 18px; font-size: .88rem; color: #4a4560; }
@media (max-width: 420px) { .foglio-firme { grid-template-columns: 1fr; } .foglio-testa { flex-direction: column; } .foglio-numero { text-align: left; } }

/* Stock a zone: avanzamento della preparazione, fornitore, viaggio */
.stato-zona { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bordo); }
.barra-avanzamento { height: 8px; border-radius: 999px; background: var(--prep-tenue); overflow: hidden; margin-bottom: 6px; }
.barra-avanzamento span { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: var(--prep); }
.zona-preparazione .gruppo-testa h3 { color: var(--prep); }
.zona-esterne .gruppo-testa h3 { color: #A16207; }
.zona-viaggio .gruppo-testa h3 { color: #7C3AED; }

/* Scheda veicolo a tutta larghezza: azioni compatte, mappa e DDT sotto */
.azioni-auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 16px; }
.btn-prepara { border-color: var(--prep); color: var(--prep); }
.btn-prepara:hover { background: var(--prep-tenue); border-color: var(--prep); }
.modulo-completo { margin: 0; }
.modulo-completo > summary { font-size: .9rem; }
.col-sotto > h2 { margin-top: 22px; }
.col-sotto #mappa { height: 260px; }
@media (min-width: 1024px) {
  .azioni-auto { grid-template-columns: 1fr 1fr; }
  .azioni-auto .predisponi { grid-column: 1 / -1; }
  .col-sotto #mappa { height: 340px; }
  .col-sotto .ddt-mini { display: inline-block; vertical-align: top; width: calc(50% - 6px); margin-right: 8px; }
  .col-sotto .ddt-mini:nth-of-type(2n) { margin-right: 0; }
}

/* Schermata del tocco: dati dell'auto in alto */
.tocco-testa { margin-top: 8px; }
.tocco-testa .tocco-nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 10px;
  color: var(--ok); font-weight: 650; font-size: .88rem; }
.tocco-testa .blocco-danno { margin-top: 10px; }
.tocco-testa + .tocco-prep, .tocco-testa + .tocco-scelte { margin-top: 14px; }
.tocco-dati { margin-top: 12px; }
.tocco-dati > summary .conta { margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--segnale-tenue);
  color: var(--segnale); font-size: .82rem; }

/* Avanzamento della preparazione: anello che si riempie + passi */
.prep-vista { display: flex; align-items: center; gap: 16px; }
.anello { position: relative; flex: none; width: 112px; height: 112px; }
.anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anello circle { fill: none; stroke-width: 11; }
.anello-fondo { stroke: var(--prep-tenue); }
.anello-pieno { stroke: var(--prep); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.1s cubic-bezier(.3, .8, .3, 1); }
.completata .anello-pieno { stroke: var(--ok); }
.anello-testo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anello-testo b { font-size: 1.6rem; line-height: 1; color: var(--prep); font-variant-numeric: tabular-nums; }
.completata .anello-testo b { color: var(--ok); }
.anello-testo small { color: var(--testo-2); font-size: .78rem; margin-top: 2px; }
.prep-ora { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prep-ora > small { color: var(--prep); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.completata .prep-ora > small { color: var(--ok); }
.prep-ora > b { font-size: 1.35rem; line-height: 1.15; }
.prep-appena { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--ok-tenue); color: var(--ok); font-weight: 650; font-size: .85rem; animation: entra .5s .7s both; }
.tocco-prep.completata { border-color: var(--ok); }
.tocco-passi li.fatto .pallino { animation: none; }
.tocco-passi li.appena .pallino { animation: scoppia .6s .5s both; }
.tocco-passi li.ora .pallino { animation: respira 1.8s ease-in-out infinite; }
.tocco-passi li + li::before { transition: background .6s; }
.tocco-passi li.appena + li::before, .tocco-passi li.appena::before { animation: riempi .6s .6s both; }
@keyframes scoppia { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
@keyframes respira { 0%, 100% { box-shadow: 0 0 0 3px var(--prep-tenue); } 50% { box-shadow: 0 0 0 8px var(--prep-tenue); } }
@keyframes riempi { from { background: var(--bordo); } to { background: var(--prep); } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* In attesa del tocco: onde NFC che pulsano */
.attendi-tocco { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px dashed var(--prep);
  border-radius: var(--r); background: var(--prep-tenue); }
.attendi-tocco b { display: block; }
.attendi-tocco small { display: block; color: var(--testo-2); font-size: .85rem; }
.onde-nfc { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--prep); color: #fff; }
.onde-nfc .icona { width: 24px; height: 24px; position: relative; z-index: 1; }
.onde-nfc i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--prep); animation: onda 2.4s ease-out infinite; }
.onde-nfc i:nth-child(2) { animation-delay: .8s; }
.onde-nfc i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .anello-pieno { transition: none; }
  .tocco-passi li .pallino, .onde-nfc i, .prep-appena, .tocco-passi li::before { animation: none !important; }
}

/* Predisponi DDT da ritirare: pulsante vero (magenta = "da ritirare"), apre il modulo sotto */
.predisponi > summary { list-style: none; cursor: pointer; }
.predisponi > summary::-webkit-details-marker { display: none; }
.btn-predisponi { border-color: #BE185D; color: #BE185D; }
.btn-predisponi:hover { background: #FCE7F3; border-color: #BE185D; }
.predisponi[open] > summary { background: #BE185D; color: #fff; }
.predisponi > .scheda { margin-top: 10px; }
.prossimo-col-tocco { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border: 1.5px dashed var(--prep); border-radius: var(--r); background: var(--prep-tenue); font-size: .92rem; }

/* Azioni della scheda: Predisponi accanto a Inizia spostamento quando non c'è "Metti in preparazione" */
@media (min-width: 560px) {
  .azioni-auto { grid-template-columns: 1fr 1fr; }
  .azioni-auto.con-prepara .predisponi, .azioni-auto .predisponi[open] { grid-column: 1 / -1; }
}
.azioni-auto .predisponi > summary { height: 100%; }

/* Sotto l'etichetta di stato nella carta dell'auto: il dettaglio della fase */
.carta-auto-stato { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dettaglio-stato { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .82rem; font-weight: 650;
  text-decoration: none; white-space: nowrap; }
a.dettaglio-stato:hover { background: rgba(255,255,255,.26); text-decoration: none; }
.mini-anello { width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(#5EEAD4 calc(var(--p) * 1%), rgba(255,255,255,.25) 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
@media (max-width: 480px) { .carta-auto-testa { flex-wrap: wrap; } .carta-auto-stato { width: 100%; flex-direction: row; justify-content: flex-start; align-items: center; } }

/* Telaio con il pulsante "Aggiungi targa" a destra */
.carta-auto-vin { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.aggiungi-targa > summary { list-style: none; cursor: pointer; background: #fff; color: #2C1A5C; border-color: #fff; }
.aggiungi-targa > summary::-webkit-details-marker { display: none; }
.aggiungi-targa[open] { flex-basis: 100%; }
.aggiungi-targa[open] > summary { display: none; }
.aggiungi-targa form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aggiungi-targa input { flex: 1; min-width: 140px; min-height: 44px; border-radius: 10px; border: 0; padding: 0 12px; font-size: 1rem; }
.aggiungi-targa small { flex-basis: 100%; opacity: .75; font-size: .78rem; }

/* Riepilogo numerico in testa a Lavorazioni e Preparazione */
.riepilogo-pagina { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
@media (max-width: 480px) { .riepilogo-pagina { grid-template-columns: repeat(2, 1fr); } }
.tile-numero { padding: 12px 14px; border-radius: var(--r); background: var(--carta); border: 1px solid var(--bordo);
  border-top: 4px solid var(--bordo-forte); }
.tile-numero b { display: block; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-numero span { color: var(--testo-2); font-size: .85rem; }
.tile-numero.corso { border-top-color: #CA8A04; }
.tile-numero.ritardo { border-top-color: var(--arancio); }
.tile-numero.ritardo b { color: var(--arancio-testo); }
.tile-numero.finita { border-top-color: var(--ok); }
.tile-numero.prep { border-top-color: var(--prep); }

/* Barra della lavorazione esterna: senape in corso, arancio in ritardo, verde finita */
.barra-lavoro .barra-avanzamento { background: #FBF3D5; }
.barra-lavoro .barra-avanzamento span { background: #CA8A04; transition: width 1.1s cubic-bezier(.3, .8, .3, 1); }
.barra-lavoro.lavoro-ritardo .barra-avanzamento { background: var(--arancio-tenue); }
.barra-lavoro.lavoro-ritardo .barra-avanzamento span { background: repeating-linear-gradient(45deg, var(--arancio) 0 8px, #E07B0C 8px 16px);
  background-size: 22px 22px; animation: scorri 1s linear infinite; }
.barra-lavoro.lavoro-ritardo b { color: var(--arancio-testo); }
.barra-lavoro.lavoro-finita .barra-avanzamento { background: var(--ok-tenue); }
.barra-lavoro.lavoro-finita .barra-avanzamento span { background: var(--ok); }
.barra-lavoro.lavoro-finita b { color: var(--ok); }
@keyframes scorri { to { background-position: 22px 0; } }
/* anello della lavorazione (tocco e scheda auto) */
.tocco-lavoro { border: 1.5px solid #CA8A04; }
.anello-lavoro .anello-fondo { stroke: #FBF3D5; }
.anello-lavoro .anello-pieno { stroke: #CA8A04; }
.anello-lavoro .anello-testo b { color: #A16207; }
.lavoro-ritardo .anello-lavoro .anello-pieno { stroke: var(--arancio); }
.lavoro-ritardo .anello-lavoro .anello-testo b, .lavoro-ritardo .prep-ora > b { color: var(--arancio-testo); }
.lavoro-finita .anello-lavoro .anello-pieno { stroke: var(--ok); }
.lavoro-finita .anello-lavoro .anello-testo b, .lavoro-finita .prep-ora > b { color: var(--ok); }
.tocco-lavoro .prep-ora > small { color: #A16207; }
@media (prefers-reduced-motion: reduce) { .barra-lavoro span { animation: none !important; transition: none !important; } }

/* Lavorazioni: un blocco per fornitore, una carta per auto */
.fornitore-testa { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.fornitore-testa h3 { margin: 0; }
.fornitore-testa .conteggio { margin-left: auto; }
/* stesse colonne della Preparazione: una sul telefono e sul tablet, due da 1024 px */
.griglia-lavori { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .griglia-lavori { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carta-lavoro { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; background: var(--carta); border: 1px solid var(--bordo);
  border-left: 5px solid #CA8A04; border-radius: var(--r); box-shadow: var(--ombra); }
.carta-lavoro.lavoro-ritardo { border-left-color: var(--arancio); }
.carta-lavoro.lavoro-finita { border-left-color: var(--ok); }
.carta-lavoro-testa { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.carta-lavoro-testa:hover { text-decoration: none; }
.carta-lavoro-nome { flex: 1; min-width: 0; }
.carta-lavoro-nome b { display: block; }
.carta-lavoro-tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-lavoro { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: #FBF3D5; color: #854D0E; font-weight: 650; font-size: .85rem; }

/* Sollecito al fornitore */
.sollecita > summary { list-style: none; cursor: pointer; }
.sollecita > summary::-webkit-details-marker { display: none; }
.btn-sollecito { border-color: var(--arancio); color: var(--arancio-testo); background: var(--arancio-tenue); }
.btn-sollecito:hover { background: #FDE3C4; border-color: var(--arancio); }
.sollecita[open] > summary { background: var(--arancio); color: #fff; }
.sollecita > .scheda { margin-top: 8px; }
.sollecita small { display: block; margin-top: 8px; }
.sollecito-stato { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: var(--r); font-size: .88rem; }
.sollecito-stato.attesa { background: var(--arancio-tenue); color: var(--arancio-testo); font-weight: 600; }
.sollecito-stato.risposta { background: var(--segnale-tenue); color: var(--testo); }
.cambia-stima > summary { font-size: .85rem; color: var(--testo-2); cursor: pointer; }
.cambia-stima form { margin-top: 8px; }
.richiesta-fornitore { border: 1.5px solid var(--arancio); margin-bottom: 12px; }
.richiesta-testo { margin: 10px 0; padding: 10px 12px; background: var(--arancio-tenue); border-radius: var(--r); }

/* Preparazione: carta con mini anello e passi */
.prep-carta-testa { display: flex; gap: 12px; align-items: center; }
.prep-carta-nome { flex: 1; min-width: 0; color: inherit; }
.prep-carta-nome h3 { margin: 0; }
.mini-anello.grande { position: relative; width: 58px; height: 58px; flex: none;
  background: conic-gradient(var(--prep) calc(var(--p) * 1%), var(--prep-tenue) 0);
  -webkit-mask: none; mask: none; display: grid; place-items: center; }
.mini-anello.grande::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--carta); }
.mini-anello.grande b { position: relative; font-size: .85rem; color: var(--prep); }
.tocco-passi.compatti { margin: 12px 0 4px; }
.tocco-passi.compatti .pallino { width: 26px; height: 26px; font-size: .8rem; }
.tocco-passi.compatti li + li::before { top: 12px; }
.slot-calendario { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--prep-tenue); color: var(--prep); font-weight: 650; font-size: .85rem; }
.rientro-stato { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 12px; border-radius: var(--r); font-size: .88rem; text-decoration: none; }
.rientro-stato.bloccato { background: var(--superficie); border: 1.5px dashed var(--bordo-forte); color: var(--testo-2); }
.rientro-stato.bloccato b { color: var(--testo); }
.rientro-stato.libero { background: var(--ok-tenue); color: var(--ok); }
.rientro-stato.pronto { background: #FCE7F3; color: #9D174D; }
.rientro-stato.pronto:hover { text-decoration: none; }
.tocco-lavoro > * + * { margin-top: 12px; }

/* Il telaio sta sempre su una riga sola: nessun contenitore può spezzarlo né mandare a capo le ultime 8 cifre */
.vin { display: inline-block; white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; }
.vin b { display: inline !important; }
/* anteprima DDT: il telaio va a capo tutto intero sotto il modello, mai spezzato, sempre leggibile sul foglio bianco */
.foglio-bene > div { min-width: 0; }
.foglio-bene-id { flex: none; max-width: 100%; }
.foglio-ddt .vin b { color: #1b1530; }
.foglio-ddt .targa { background: #fff; color: #1b1530; border-color: #1b1530; }

/* Lavorazioni: le carte affiancate hanno le stesse righe alla stessa altezza (testa, lavorazione,
   avanzamento, rientro, azioni), anche quando una ha più testo dell'altra */
.carta-lavoro-avanzamento { display: grid; gap: 6px; align-content: start; }
.carta-lavoro-rientro:empty, .carta-lavoro-azioni:empty { display: none; }
.carta-lavoro-azioni { display: grid; gap: 8px; align-content: start; }
@supports (grid-template-rows: subgrid) {
  .carta-lavoro { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; }
  .carta-lavoro-rientro:empty, .carta-lavoro-azioni:empty { display: block; }
}

/* I numeri in cima a Lavorazioni e Preparazione sono filtri: si toccano */
a.tile-numero { color: inherit; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease; }
a.tile-numero:hover { text-decoration: none; box-shadow: var(--ombra); }
a.tile-numero:active { transform: scale(.97); }
a.tile-numero.attivo { border-color: var(--inchiostro); box-shadow: 0 0 0 1.5px var(--inchiostro); }
a.tile-numero.attivo span { color: var(--testo); font-weight: 650; }
@media (prefers-color-scheme: dark) { a.tile-numero.attivo { border-color: var(--testo); box-shadow: 0 0 0 1.5px var(--testo); } }

/* Stock: scelta della sede come Tutti / Vetture / Commerciali, una pillola che va a capo */
.filtro-gruppo { flex-wrap: wrap; max-width: 100%; border-radius: 22px; gap: 2px; margin: 0 0 14px; }
.filtro-gruppo a .n { font-variant-numeric: tabular-nums; opacity: .7; }
.filtro-gruppo a .icona { width: 16px; height: 16px; }
/* in-riga: tutto su una riga sola (sedi dello Stock, tipi di lavorazione); se non ci sta, i nomi si
   accorciano con i puntini, il numero resta sempre visibile */
/* di base larga quanto i suoi pulsanti (Lavorazioni); tutta-larghezza: occupa la riga e i pulsanti si dividono lo spazio (Stock) */
.filtro-gruppo.in-riga { display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; border-radius: 999px; }
.filtro-gruppo.in-riga a { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.filtro-gruppo.in-riga.tutta-larghezza { display: flex; width: 100%; }
.filtro-gruppo.in-riga.tutta-larghezza a { flex: 1 1 0; justify-content: center; }
.filtro-gruppo.in-riga.stretta a { padding-left: 8px; padding-right: 8px; gap: 4px; }
.filtro-gruppo.in-riga.stretta a .icona { display: none; }
/* a capo: colonne uguali (due sul telefono), nessun nome tagliato */
.filtro-gruppo.in-riga.a-capo { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-radius: 18px; }
.filtro-gruppo.in-riga.a-capo a { justify-content: space-between; }
.filtro-gruppo.in-riga.a-capo a .nome { overflow: visible; white-space: normal; text-overflow: clip; }
.filtro-gruppo.in-riga a .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.filtro-gruppo.in-riga a .n, .filtro-gruppo.in-riga a .icona { flex: none; }
.riepilogo-pagina.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Orario della preparazione: fisso, in ritardo scritto in arancio scuro */
p.scadenza-prep { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: .88rem; color: var(--testo-2); font-weight: 600; }
p.scadenza-prep.in-ritardo { color: var(--liv-1-testo); }
p.scadenza-prep.in-ritardo b { font-weight: 800; }
.slot-calendario.in-ritardo { background: var(--arancio-tenue); color: var(--arancio-testo); }

/* Scelta dell'orario a slot: giorni in fila (vanno a capo), poi gli orari della mattina e del pomeriggio */
.scegli-slot { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--bordo); border-radius: var(--r); background: var(--superficie); }
.slot-giorni { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.slot-giorno { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--bordo);
  background: var(--carta); color: var(--testo); cursor: pointer; font: inherit; min-height: 44px; }
.slot-giorno small { font-size: .7rem; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; }
.slot-giorno b { font-size: 1.15rem; line-height: 1.1; }
.slot-giorno .slot-liberi { font-size: .68rem; color: var(--ok); font-weight: 650; }
.slot-giorno.pieno { opacity: .55; }
.slot-giorno.pieno .slot-liberi { color: var(--testo-2); }
.slot-giorno.con-scelta { border-color: var(--ok); }
.slot-giorno.attivo { border-color: var(--inchiostro); box-shadow: 0 0 0 1.5px var(--inchiostro); }
.slot-titolo { margin: 0; font-weight: 700; }
.slot-fascia { display: grid; gap: 4px; }
.slot-fascia + .slot-fascia { margin-top: 6px; }
.slot-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slot-ora { display: grid; justify-items: center; align-content: center; padding: 6px 4px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); font: inherit; font-weight: 650;
  font-variant-numeric: tabular-nums; cursor: pointer; min-width: 0; }
.slot-ora small { font-size: .66rem; font-weight: 500; color: var(--testo-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-ora small:empty { display: none; }
.slot-ora:hover:not(:disabled) { border-color: var(--ok); }
.slot-ora.scelto { background: var(--ok); border-color: var(--ok); color: #fff; }
.slot-ora.occupato { background: transparent; border-style: dashed; color: var(--testo-2); cursor: not-allowed; text-decoration: line-through; }
.slot-ora.occupato small { text-decoration: none; }
.slot-scelto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-weight: 650; }
.targa-consegna { margin-top: 14px; display: grid; gap: 10px; }

/* avviso sotto il campo targa quando il formato non è quello italiano */
.avviso-targa { margin: 6px 0 10px; padding: 8px 10px; border-radius: var(--r); background: var(--arancio-tenue); color: var(--arancio-testo); font-size: .85rem; flex-basis: 100%; }

/* ============ Telefono (analisi UX 03/11/2026) ============
   Meno spazio sprecato in alto, nessuna etichetta tagliata, bersagli da 44 px, testi minimi da 12 px */
.filtri .et-corta { display: none; }
.cambia-stima > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.portami-dove { font-weight: 500; }
@media (max-width: 559px) {
  /* intestazione: titolo e descrizione più compatti; la descrizione lunga si apre toccandola */
  .titolo-pagina { margin-bottom: 12px; }
  .titolo-pagina h1 { font-size: 1.45rem; }
  .descrizione-pagina { font-size: .88rem; line-height: 1.4; }
  .descrizione-pagina.tagliata:not(.aperta) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .descrizione-pagina.tagliata { cursor: pointer; }
  .demo-barra { min-height: 40px; margin-bottom: 10px; font-size: .88rem; }
  .dettaglio-stato { min-height: 40px; }

  /* numeri in cima a Lavorazioni e Preparazione: tre in fila, etichetta su una riga */
  .riepilogo-pagina { gap: 6px; margin-bottom: 12px; }
  .tile-numero { padding: 9px 10px; }
  .tile-numero b { font-size: 1.45rem; }
  .tile-numero span { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

  /* schede In corso / Pronte / Consegnate: una riga, larghezze uguali, etichette corte */
  .filtri.una-riga { flex-wrap: nowrap; gap: 4px; }
  .filtri.una-riga a { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  .filtri.una-riga a .icona { display: none; }
  .filtri.una-riga a.a-destra { margin-left: 0; }
  .filtri .et-lunga { display: none; }
  .filtri .et-corta { display: inline; }

  /* Panoramica: l'etichetta del riquadro va su due righe invece di essere tagliata */
  .riquadri span.et { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

  /* etichette minuscole (NUOVO/USATO, gravità) leggibili: almeno 12 px */
  .condizione, .liv { font-size: .75rem; }

  /* Elenco / Calendario accanto al conteggio: niente icone, sta su una riga */
  .barra-modo .interruttore a .icona { display: none; }

  /* Portami qui: la destinazione va sotto, il pulsante non si spezza */
  .portami { flex-direction: column; gap: 0; line-height: 1.25; }
  .portami > span { display: flex; flex-direction: column; align-items: center; }
  .portami .icona { display: none; }
}


/* Pagine di accesso: titolo, link sotto il modulo, email non modificabile */
.titolo-accesso { font-size: 1.3rem; margin: 0 0 8px; text-transform: none; letter-spacing: 0; color: var(--testo); }
.link-accesso { margin: 16px 0 0; text-align: center; }
.link-accesso a { display: inline-flex; align-items: center; min-height: 44px; }
.campo-fisso { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.campo-fisso span { font-size: .85rem; font-weight: 650; color: var(--testo-2); }
.campo-fisso b { word-break: break-all; }

/* Inviti e accessi */
.stato-accesso { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .75rem; font-weight: 750; }
.stato-accesso.attesa { background: var(--arancio-tenue); color: var(--arancio-testo); }
.link-invito .input-link { width: 100%; margin: 6px 0 12px; font-family: var(--mono); font-size: .85rem; }
.azioni-link { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 400px) { .azioni-link { grid-template-columns: 1fr; } }

/* Pannello Getvingo: una scheda per concessionaria cliente */
.lista-clienti { display: grid; gap: 12px; }
@media (min-width: 1024px) { .lista-clienti { grid-template-columns: 1fr 1fr; } }
.lista-clienti > .scheda.cliente { margin: 0; }
.cliente.sospeso { opacity: .75; border-style: dashed; }
.cliente-testa { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cliente-testa h3 { margin: 0 0 2px; }
.stato-cliente { flex: none; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.stato-cliente.attivo { background: var(--ok-tenue); color: var(--ok); }
.stato-cliente.sospeso { background: var(--errore-tenue); color: var(--errore); }
.cliente-numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
@media (max-width: 560px) { .cliente-numeri { grid-template-columns: 1fr 1fr; } }
.cliente-numeri div { background: var(--superficie); border-radius: var(--r-s); padding: 8px 10px; }
.cliente-numeri dt { font-size: .75rem; color: var(--testo-2); }
.cliente-numeri dd { margin: 2px 0 0; font-weight: 750; font-size: 1.1rem; }
.cliente-numeri dd.piccolo { font-size: .9rem; }
.cliente-admin-riga { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--bordo); }
.cliente-stato { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bordo); text-align: right; }

/* Utenza master: barra quando il gestore lavora dentro una concessionaria cliente */
.barra-gestore { display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--arancio); color: #1C1533; font-size: .9rem; }
.barra-gestore span { display: block; line-height: 1.4; }
.barra-gestore span .icona { vertical-align: -3px; margin-right: 4px; }
.barra-gestore .btn { background: #fff; border-color: #fff; color: #1C1533; }
.cliente-entra { margin: 12px 0 0; }
.voce-supporto { border-style: dashed; }
.voce-supporto .avatar { background: var(--arancio-tenue); color: var(--arancio-testo); }
.assistenza-chiusa { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-s);
  background: var(--spento-tenue); color: var(--testo-2); font-size: .9rem; }
.assistenza-chiusa .icona { flex: none; margin-top: 2px; }
.assistenza-riga { display: flex; gap: 12px; align-items: flex-start; }
.assistenza-icona { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--spento-tenue); color: var(--testo-2); }
.assistenza-stato.aperta { border-color: var(--ok); }
.assistenza-stato.aperta .assistenza-icona { background: var(--ok-tenue); color: var(--ok); }
.elenco-accessi { list-style: none; margin: 0; padding: 0; }
.elenco-accessi li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--bordo); }
.elenco-accessi li:first-child { border-top: 0; }

/* Gestione divisa per argomento */
.gruppi-gestione { display: grid; gap: 8px; }
.gruppo-gestione h2 { margin-top: 12px; }
@media (min-width: 1024px) {
  .gruppi-gestione { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  .gruppo-gestione .menu-gestione { grid-template-columns: 1fr; }
}
.sotto-voci { margin-bottom: 8px; }

/* Menu dell'avatar: chi sono, poi il mio profilo, poi azienda/piattaforma, infine Esci */
.menu-chi .menu-email { display: block; margin-top: 2px; font-size: .78rem; word-break: break-all; }
.menu-separatore { height: 1px; background: var(--bordo); margin: 6px 0; }
/* Il mio profilo */
.profilo-chi { display: flex; gap: 16px; align-items: center; }
.avatar.grande { width: 64px; height: 64px; font-size: 1.4rem; flex: none; }
.profilo-nome { margin: 0 0 2px; font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--testo); }
.profilo-email { font-weight: 600; word-break: break-all; margin: 2px 0; }
.profilo-voce { margin-bottom: 10px; }
.profilo-voce > .icona { color: var(--segnale); width: 26px; height: 26px; flex: none; }
.profilo-esci { margin-top: 12px; }
.esito-posizione { margin: 8px 0 12px; font-size: .9rem; color: var(--ok); }
.esito-posizione.errore { color: var(--errore); }

/* Indirizzo completo verificato sulla mappa */
fieldset.indirizzo { border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 12px 14px 10px; margin: 0 0 14px; min-width: 0; }
fieldset.indirizzo legend { padding: 0 6px; font-size: .85rem; font-weight: 750; color: var(--testo-2); }
.griglia-indirizzo { display: grid; grid-template-columns: 2fr 1fr; gap: 0 12px; }
@media (min-width: 700px) { .griglia-indirizzo { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }
.indirizzo-azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.indirizzo-esito { font-size: .88rem; }
.indirizzo-esito.ok { color: var(--ok); }
.indirizzo-esito.errore { color: var(--errore); font-weight: 650; }
.indirizzo-mappa { height: 220px; border-radius: var(--r-s); border: 1px solid var(--bordo); margin-bottom: 6px; z-index: 0; }
input.campo-errore { border-color: var(--errore) !important; box-shadow: 0 0 0 3px var(--errore-tenue); }

.schede-luoghi { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 14px; }
.scelta-tipo-luogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.voce.spento { opacity: .55; }

.stima-viaggio { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .9rem; color: var(--testo-2); }
.stima-viaggio .icona { flex: none; margin-top: 2px; }

.mappa-vuota { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin-bottom: 14px; border: 1px dashed var(--bordo-forte);
  border-radius: var(--r); background: var(--carta); color: var(--testo-2); }
.mappa-vuota .icona { flex: none; width: 28px; height: 28px; color: var(--segnale); }
.mappa-vuota p { margin: 0; }

.destinazione-doppia { cursor: default; }
.scelta-causale { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.note-interne { margin-bottom: 14px; }
.note-interne > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.note-interne > summary::-webkit-details-marker { display: none; }
.note-interne[open] > summary { margin-bottom: 12px; }
.note-riassunto { width: 100%; font-weight: 600; color: var(--segnale); font-size: .9rem; }
.note-interne textarea { width: 100%; }

/* Colori di Lavorazioni e Preparazione (08/11/2026): in tempo azzurro, in ritardo rosso aranciato,
   pronte verde, consegnate verde scuro */
:root { --in-tempo: #0284C7; --in-tempo-tenue: #E0F2FE; --in-tempo-testo: #0369A1;
        --in-ritardo: #DC4B3E; --in-ritardo-tenue: #FDE8E5; --in-ritardo-testo: #B42318;
        --pronta-verde: #16A34A; --consegnata-verde: #14532D; }
@media (prefers-color-scheme: dark) {
  :root { --in-tempo: #38BDF8; --in-tempo-tenue: #0C2A3D; --in-tempo-testo: #7DD3FC;
          --in-ritardo: #F87171; --in-ritardo-tenue: #3A1714; --in-ritardo-testo: #FCA5A5;
          --pronta-verde: #4ADE80; --consegnata-verde: #22C55E; } }
.tile-numero.corso { border-top-color: var(--in-tempo); }
.tile-numero.corso b { color: var(--in-tempo-testo); }
.tile-numero.ritardo { border-top-color: var(--in-ritardo); }
.tile-numero.ritardo b { color: var(--in-ritardo-testo); }
.tile-numero.finita { border-top-color: var(--pronta-verde); }
.tile-numero.consegnate { border-top-color: var(--consegnata-verde); }
.tile-numero.consegnate b { color: var(--consegnata-verde); }
.barra-lavoro .barra-avanzamento { background: var(--in-tempo-tenue); }
.barra-lavoro .barra-avanzamento span { background: var(--in-tempo); }
.barra-lavoro b { color: var(--in-tempo-testo); }
.barra-lavoro.lavoro-ritardo .barra-avanzamento { background: var(--in-ritardo-tenue); }
.barra-lavoro.lavoro-ritardo .barra-avanzamento span { background: repeating-linear-gradient(45deg, var(--in-ritardo) 0 8px, #C2410C 8px 16px); }
.barra-lavoro.lavoro-ritardo b { color: var(--in-ritardo-testo); }
.barra-lavoro.lavoro-finita b { color: var(--ok); }
.anello-lavoro .anello-fondo { stroke: var(--in-tempo-tenue); }
.anello-lavoro .anello-pieno { stroke: var(--in-tempo); }
.anello-lavoro .anello-testo b { color: var(--in-tempo-testo); }
.lavoro-ritardo .anello-lavoro .anello-pieno { stroke: var(--in-ritardo); }
.lavoro-ritardo .anello-lavoro .anello-testo b, .lavoro-ritardo .prep-ora > b { color: var(--in-ritardo-testo); }
.pagina-lavorazioni .lavorazione { --fase: var(--in-tempo); --fase-pieno: var(--in-tempo-testo); }
.pagina-lavorazioni .carta-lavoro.lavoro-corso { border-left-color: var(--in-tempo); }
.pagina-lavorazioni .carta-lavoro.lavoro-ritardo { border-left-color: var(--in-ritardo); }
.pagina-preparazione { --prep: var(--in-tempo); --prep-tenue: var(--in-tempo-tenue); --prep-2: var(--in-tempo); }
.pagina-preparazione .preparazione { --fase: var(--in-tempo); --fase-pieno: var(--in-tempo-testo); }
.pagina-preparazione .prep-ritardo { --fase: var(--in-ritardo); --fase-pieno: var(--in-ritardo-testo); --prep: var(--in-ritardo); }
.pagina-preparazione .pronta { --fase: var(--pronta-verde); --fase-pieno: var(--pronta-verde); }
.pagina-preparazione .consegnato { --fase: var(--consegnata-verde); --fase-pieno: var(--consegnata-verde); }
.pagina-preparazione .scadenza-prep.in-ritardo, .pagina-preparazione .scadenza-prep.in-ritardo > summary { color: var(--in-ritardo-testo); }
.pagina-preparazione .cal-auto.ev.pronta_entro, .pagina-preparazione .legenda-calendario .ev.pronta_entro { background: var(--in-tempo-tenue); color: var(--in-tempo-testo); }
.pagina-preparazione .cal-auto.ev.ritardo, .pagina-preparazione .legenda-calendario .ev.ritardo { background: var(--in-ritardo-tenue); color: var(--in-ritardo-testo); }

.cerca-luogo { margin-bottom: 6px; }
.cerca-riga { display: flex; gap: 8px; }
.cerca-riga input { flex: 1; min-width: 0; }
.risultati-luogo { list-style: none; margin: -6px 0 12px; padding: 4px; border: 1px solid var(--bordo); border-radius: var(--r-s); background: var(--carta); }
.risultati-luogo li.tenue { padding: 10px; font-size: .9rem; }
.risultato-luogo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px;
  background: none; border: 0; border-radius: 8px; text-align: left; font: inherit; color: var(--testo); cursor: pointer; }
.risultato-luogo:hover, .risultato-luogo:focus { background: var(--superficie); }
.risultato-luogo span { font-size: .85rem; color: var(--testo-2); }
.password-generata { font-size: 1.4rem !important; letter-spacing: .08em; text-align: center; }
.riepilogo-pagina.quattro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .riepilogo-pagina.quattro .tile-numero { padding: 10px 8px; } .riepilogo-pagina.quattro .tile-numero span { font-size: .75rem; } }