/* Nixsa Cargo · demo */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); }
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/jakarta-normal-latin.woff2) format('woff2'); }

:root {
  --verde: #3F6212; --verde-2: #4D7C0F; --lime: #84CC16; --lime-2: #A3E635; --lime-chiaro: #ECFCCB; --lime-tenue: #F7FEE7;
  --notte: #0F172A; --notte-2: #1E293B; --notte-3: #334155; --notte-bordo: rgba(148, 163, 184, .16);
  --fondo: #F5F7F2; --carta: #fff; --bordo: #E3E8DD; --bordo-2: #D3DACB;
  --testo: #0F172A; --tenue: #5B6577; --tenue-2: #8A94A6;
  --ambra: #B45309; --ambra-f: #FEF3C7; --rosso: #B91C1C; --rosso-f: #FEE2E2; --blu: #0369A1; --blu-f: #E0F2FE; --viola: #6D28D9; --viola-f: #EDE9FE;
  --r: 14px; --r-s: 10px;
  --ombra: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
  --ombra-2: 0 10px 30px -12px rgba(15, 23, 42, .18);
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ft: 'Jakarta', 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--ff); color: var(--testo); background: var(--fondo); font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--ft); letter-spacing: -.02em; margin: 0; }
a { color: var(--verde); }
button, input, select, textarea { font: inherit; color: inherit; }
sub { font-size: .7em; vertical-align: -.2em; line-height: 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -.2em; }
.ico--s { width: .95em; height: .95em; }
.ico.ok { color: var(--verde-2); }
.tenue { color: var(--tenue); }
.piccolo { font-size: 12.5px; }
.pos { color: var(--verde-2); } .neg { color: var(--rosso); }
.rit { color: var(--ambra); font-weight: 600; font-size: .9em; }
[hidden] { display: none !important; }

/* ---------------- Testata ---------------- */
.d-top { position: sticky; top: 0; z-index: 1000; background: var(--notte); color: #E2E8F0; }
.d-top__in { display: flex; align-items: center; gap: 14px; padding: 10px 20px; min-height: 60px; }
.marchio { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.logo-q { display: inline-flex; width: 34px; height: 34px; flex: none; }
.logo-q svg { width: 100%; height: 100%; }
.logo-q--s { width: 28px; height: 28px; }
.marchio__t { font: 600 18px/1 var(--ft); letter-spacing: -.02em; }
.marchio__t b { font-weight: 800; color: var(--lime-2); }
.d-demo { font-size: 12px; font-weight: 600; color: #D9F99D; border: 1px solid rgba(132, 204, 22, .45); background: rgba(132, 204, 22, .1); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.oro { display: flex; align-items: center; gap: 10px; margin-left: auto; background: rgba(255, 255, 255, .06); border: 1px solid var(--notte-bordo); border-radius: 12px; padding: 4px 4px 4px 12px; }
.oro__g { font-size: 12px; color: #94A3B8; text-transform: capitalize; }
.oro b { font: 700 17px/1 var(--ft); color: #fff; font-variant-numeric: tabular-nums; min-width: 46px; }
.oro__vel { display: flex; background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 2px; }
.oro__vel button { border: 0; background: none; color: #94A3B8; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; }
.oro__vel button.on { background: var(--lime); color: var(--notte); }
.oro__vel button:hover:not(.on) { color: #fff; }
.d-ruolo { display: flex; align-items: center; gap: 10px; }
.d-ruolo label { font-size: 13px; color: #94A3B8; white-space: nowrap; }
.d-ruolo select { appearance: none; background: #1E293B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px; border: 1px solid #334155; color: #fff; font-weight: 600; padding: 9px 40px 9px 14px; border-radius: 10px; cursor: pointer; min-width: 190px; }
.d-reg, .d-esci { display: flex; align-items: center; gap: 7px; color: #CBD5E1; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.d-reg:hover, .d-esci:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.d-lingua { display: flex; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--notte-bordo); border-radius: 9px; padding: 2px; }
.d-lingua a { color: #94A3B8; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 7px; border-radius: 7px; }
.d-lingua a:hover:not(.on) { color: #fff; }
.d-lingua a.on { background: rgba(255, 255, 255, .14); color: #fff; }
/* in attesa della scelta automatica della lingua (al massimo 1,5 s) */
.lingua-attesa body { visibility: hidden; }

.d-percorso { background: #111C33; border-top: 1px solid var(--notte-bordo); }
.d-percorso__in { display: flex; align-items: center; gap: 8px; padding: 9px 20px; overflow-x: auto; scrollbar-width: none; }
.d-percorso__in::-webkit-scrollbar { display: none; }
.d-percorso__tit { font: 700 13px/1 var(--ft); color: var(--lime-2); white-space: nowrap; margin-right: 6px; }
.d-passo { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--notte-bordo); color: #E2E8F0; border-radius: 99px; padding: 5px 14px 5px 5px; cursor: pointer; white-space: nowrap; text-align: left; transition: background .15s; }
.d-passo:hover { background: rgba(255, 255, 255, .09); }
.d-passo i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #334155; font-size: 12px; font-weight: 700; flex: none; }
.d-passo span { font-size: 13.5px; font-weight: 600; line-height: 1.15; }
.d-passo small { display: block; font-size: 11px; font-weight: 500; color: #94A3B8; }
.d-passo.ora { border-color: rgba(163, 230, 53, .6); background: rgba(132, 204, 22, .12); }
.d-passo.ora i { background: var(--lime); color: var(--notte); }
.d-passo.fatto i { background: var(--verde); color: #fff; }
.d-passo.fatto span { color: #A7B3C6; }
.d-ricomincia { margin-left: auto; display: flex; gap: 6px; align-items: center; background: none; border: 0; color: #CBD5E1; font-size: 13.5px; cursor: pointer; white-space: nowrap; padding: 6px 8px; border-radius: 8px; }
.d-ricomincia:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* ---------------- Guscio ---------------- */
.d-guscio { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 112px); }
.d-lato { background: var(--notte); color: #CBD5E1; display: flex; flex-direction: column; position: sticky; top: 112px; height: calc(100vh - 112px); overflow-y: auto; border-top: 1px solid var(--notte-bordo); }
.d-azienda { padding: 20px 20px 16px; border-bottom: 1px solid var(--notte-bordo); }
.d-azienda b { display: block; color: #fff; font: 700 16px/1.25 var(--ft); }
.d-azienda small { color: #8A97AD; font-size: 12.5px; }
.d-nav { padding: 10px 12px; flex: 1; }
.d-nav__gruppo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: 14px 10px 6px; font-weight: 600; }
.d-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: #CBD5E1; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.d-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.d-nav a.on { background: rgba(132, 204, 22, .14); color: #fff; box-shadow: inset 3px 0 0 var(--lime); }
.d-nav a.on .ico { color: var(--lime-2); }
.d-nav .conta { margin-left: auto; }
.conta { background: var(--lime); color: var(--notte); font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; line-height: 18px; display: inline-block; }
.d-utente { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-top: 1px solid var(--notte-bordo); }
.d-utente i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--verde), var(--lime)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.d-utente b { display: block; color: #fff; font-size: 14px; }
.d-utente small { color: #8A97AD; font-size: 12px; }
.d-main { padding: 28px 32px 60px; min-width: 0; outline: none; }

/* ---------------- Elementi comuni ---------------- */
.d-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.d-testa h1 { font-size: 28px; font-weight: 700; }
.d-testa p { margin: 6px 0 0; color: var(--tenue); max-width: 760px; }
.d-testa p .targa { margin-right: 4px; }
.d-testa__azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; padding: 10px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn--verde { background: var(--verde); color: #fff; }
.btn--verde:hover { background: #365314; }
.btn--lime { background: var(--lime); color: var(--notte); }
.btn--lime:hover { background: var(--lime-2); }
.btn--scuro { background: var(--notte); color: #fff; }
.btn--scuro:hover { background: var(--notte-2); }
.btn--scuro-b { background: rgba(255, 255, 255, .05); color: #E2E8F0; border-color: rgba(148, 163, 184, .3); }
.btn--scuro-b:hover { background: rgba(255, 255, 255, .1); }
.btn--bordo { background: #fff; color: var(--testo); border-color: var(--bordo-2); }
.btn--bordo:hover { border-color: var(--verde); }
.btn--rosso { background: var(--rosso); color: #fff; }
.btn--testo { background: none; color: var(--verde); padding-left: 4px; padding-right: 4px; }
.btn--testo:hover { text-decoration: underline; }
.btn--sm { padding: 7px 12px; font-size: 13.5px; border-radius: 9px; }
.btn--grande { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.btn--blocco { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .conta { margin-left: 2px; }
.link { background: none; border: 0; color: var(--verde); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 0; }
.link:hover { text-decoration: underline; }
.indietro { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tenue); text-decoration: none; margin-bottom: 14px; }
.indietro:hover { color: var(--verde); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #EEF1EA; color: #3B4556; white-space: nowrap; line-height: 1.5; }
.c-verde { background: #DCFCE7; color: #166534; } .c-lime { background: var(--lime-chiaro); color: var(--verde); } .c-ambra { background: var(--ambra-f); color: #92400E; } .c-rosso { background: var(--rosso-f); color: #991B1B; } .c-blu { background: var(--blu-f); color: #075985; } .c-grigio { background: #EEF1EA; color: #475569; } .c-viola { background: var(--viola-f); color: var(--viola); } .c-scuro { background: #1E293B; color: #E2E8F0; } .c-nuovo { background: var(--verde); color: #fff; }
.blocco { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r); padding: 20px; box-shadow: var(--ombra); min-width: 0; }
.blocco + .blocco, .griglia + .blocco, .blocco + .griglia, .griglia + .griglia { margin-top: 18px; }
.griglia > .blocco { margin-top: 0; }
.blocco__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.blocco__testa h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.blocco__testa h2 .ico { color: var(--verde-2); }
.blocco__testa .tenue { font-size: 13px; }
.griglia { display: grid; gap: 18px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.colonna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.colonna > .blocco + .blocco { margin-top: 0; }
.kpi { position: relative; padding: 18px 20px; }
.kpi small { display: block; color: var(--tenue); font-size: 13px; font-weight: 500; }
.kpi b { display: block; font: 700 30px/1.15 var(--ft); letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi b small { display: inline; font-size: 17px; color: var(--tenue-2); font-weight: 600; letter-spacing: 0; }
.kpi em { display: block; font-style: normal; font-size: 12.5px; color: var(--tenue); margin-top: 6px; line-height: 1.4; }
.kpi__ico { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; background: var(--lime-tenue); color: var(--verde-2); display: grid; place-items: center; }
.kpi--att .kpi__ico { background: var(--ambra-f); color: var(--ambra); }
.kpi--scuro { background: var(--notte); border-color: var(--notte); color: #fff; }
.kpi--scuro small, .kpi--scuro em { color: #94A3B8; }
.kpi--scuro b { color: var(--lime-2); }
.kpi--scuro .kpi__ico { background: rgba(132, 204, 22, .15); color: var(--lime-2); }
.vuoto { color: var(--tenue); font-size: 14px; padding: 8px 0; margin: 0; }
.vuoto-grande { text-align: center; padding: 40px 20px; }
.vuoto-grande .ico { width: 30px; height: 30px; color: var(--tenue-2); }
.vuoto-grande b { display: block; margin-top: 10px; font-size: 16px; }
.vuoto-grande p { color: var(--tenue); margin: 6px 0 0; }
.targa { display: inline-flex; align-items: stretch; border: 1.5px solid #1F2937; border-radius: 5px; font: 700 12.5px/1 var(--ff); letter-spacing: .04em; background: #fff; color: #111827; overflow: hidden; white-space: nowrap; vertical-align: middle; }
.targa i { font-style: normal; background: #1D4ED8; color: #fff; font-size: 8px; padding: 0 3px; display: grid; place-items: center; }
.targa { padding-right: 6px; gap: 5px; height: 21px; align-items: center; }
.targa i { height: 100%; }
.barra { display: block; height: 7px; background: #EEF1EA; border-radius: 99px; overflow: hidden; min-width: 70px; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--lime)); border-radius: 99px; }
.barra.pieno i { background: var(--verde); }
.barra.vuoto i { background: #CBD5E1; }
.tragitto { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 600; }
.tragitto .ico { color: var(--tenue-2); }
.stelle { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; }
.stelle .ico { color: #EAB308; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lime-chiaro); color: var(--verde); font-weight: 700; font-size: 12px; display: inline-grid; place-items: center; flex: none; }

/* tabelle */
.tab-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tab td { padding: 12px; border-bottom: 1px solid #EEF1EA; vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab td small { display: block; color: var(--tenue); font-size: 12.5px; margin-top: 3px; }
.tab td > .targa + small { margin-top: 5px; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab--click tbody tr, .tab tr[data-href] { cursor: pointer; }
.tab--click tbody tr:hover td, .tab tr[data-href]:hover td { background: var(--lime-tenue); }
.tab .carico-c { min-width: 120px; }
.tab td:first-child { white-space: nowrap; }
.tab .avatar { margin-right: 10px; vertical-align: middle; }
.tab td:first-child .avatar + b { vertical-align: middle; }
.tag-r { display: inline-block !important; margin: 0 0 0 6px !important; font-size: 11px !important; font-weight: 600; color: var(--ambra) !important; background: var(--ambra-f); border-radius: 99px; padding: 1px 7px; }
.scad { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scad small { display: inline-block !important; margin: 0 0 0 6px !important; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
.scad.c-ambra, .scad.c-rosso { background: none; }
.scad.c-ambra small { background: var(--ambra-f); color: #92400E !important; }
.scad.c-rosso small { background: var(--rosso-f); color: #991B1B !important; }
.stato-c .chip + small { margin-top: 5px; }

/* registro */
.registro { list-style: none; margin: 0; padding: 0; }
.registro li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF1EA; }
.registro li:last-child { border-bottom: 0; }
.registro time { font: 600 12.5px/1.4 var(--ff); color: var(--tenue); font-variant-numeric: tabular-nums; padding-top: 1px; }
.registro b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.registro small { color: var(--tenue); font-size: 12px; }
.registro--lungo { max-height: 56vh; overflow-y: auto; }
.filtri { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtri button { border: 1px solid var(--bordo-2); background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.filtri button.on { background: var(--notte); color: #fff; border-color: var(--notte); }

/* suggerimenti */
.sugg-lista { display: flex; flex-direction: column; gap: 10px; }
.sugg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--bordo); border-radius: 12px; background: #FBFCFA; }
.sugg__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #EEF1EA; color: var(--tenue); }
.sugg.lime { border-color: #C9EB8F; background: var(--lime-tenue); }
.sugg.lime .sugg__ico { background: var(--lime); color: var(--notte); }
.sugg.ambra .sugg__ico { background: var(--ambra-f); color: var(--ambra); }
.sugg.rosso .sugg__ico { background: var(--rosso-f); color: var(--rosso); }
.sugg b { font-size: 14.5px; }
.sugg p { margin: 3px 0 0; color: var(--tenue); font-size: 13.5px; line-height: 1.45; }

/* richieste e abbinamenti */
.rich-lista { display: flex; flex-direction: column; gap: 16px; }
.rich__testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rich__testa > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rich__id { font: 700 14px/1 var(--ft); color: var(--tenue); margin-right: 2px; }
.rich h3 { font-size: 21px; margin: 12px 0 10px; }
.rich__dati { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); gap: 8px 26px; margin: 0; justify-content: start; }
.rich__dati dt { font-size: 12px; color: var(--tenue); }
.rich__dati dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.rich--demo { border-color: #BEE68A; box-shadow: 0 0 0 3px rgba(132, 204, 22, .15), var(--ombra); }
.rich--chiusa { opacity: .85; }
.rich__esito { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--tenue); }
.rich__esito .ico { color: var(--verde-2); }
.abb { margin-top: 16px; border-top: 1px solid var(--bordo); padding-top: 14px; }
.abb__tit { font-size: 13px; font-weight: 700; color: var(--verde); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.abb__voce { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(110px, 1fr)) auto; gap: 18px; align-items: center; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: 12px; margin-bottom: 8px; }
.abb__voce.top { background: var(--lime-tenue); border-color: #C9EB8F; }
.abb__p { display: flex; align-items: center; gap: 12px; }
.abb__p b { display: block; font-size: 14.5px; }
.abb__p small { color: var(--tenue); font-size: 12.5px; }
.punt { --p: 80; width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--verde-2) calc(var(--p) * 1%), #E5EBDD 0); position: relative; }
.punt::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.punt b { position: relative; font-size: 13px !important; }
.abb__num span { display: block; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; }
.abb__num b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.abb__num small { display: block; color: var(--tenue); font-size: 12px; }
.abb__num .barra { margin-top: 5px; }
.abb__az { display: flex; gap: 8px; justify-content: flex-end; }
.abb__piede { display: flex; justify-content: flex-end; }
.consol { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px dashed #A9D66B; border-radius: 12px; margin: 0 0 10px; background: #fff; }
.consol > .ico { color: var(--verde-2); margin-top: 2px; }
.consol > div { flex: 1; min-width: 0; }
.consol__piano { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 480px) minmax(200px, 280px); gap: 28px; align-items: center; }

/* piano di carico */
.rimorchio { display: flex; align-items: stretch; gap: 4px; max-width: 520px; }
.rimorchio__cab { width: 26px; border-radius: 8px 3px 3px 8px; background: linear-gradient(180deg, #334155, #0F172A); flex: none; }
.rimorchio__pianale { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--righe), 1fr); grid-template-columns: repeat(var(--col), 1fr); gap: 3px; padding: 5px; border: 2px solid #CBD5E1; border-radius: 4px 8px 8px 4px; background: #F8FAF6; }
.slot { display: block; aspect-ratio: 1.5/1; border-radius: 3px; background: repeating-linear-gradient(45deg, #fff 0 3px, #EEF1EA 3px 6px); border: 1px dashed #CBD5E1; }
.slot[style] { background: var(--c); border: 0; }
.slot.nuovo { background: var(--c); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--verde); animation: lampeggia 1.6s infinite; }
.slot.nulla { visibility: hidden; }
@keyframes lampeggia { 50% { opacity: .55; } }
.legenda { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.legenda li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.legenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.legenda .libero i { background: repeating-linear-gradient(45deg, #fff 0 3px, #E3E8DD 3px 6px); border: 1px dashed #CBD5E1; }
.legenda .nuovo { box-shadow: 0 0 0 1.5px var(--verde); }
.legenda b { font-variant-numeric: tabular-nums; }
.consol .legenda { margin: 0; }

/* linea del tempo delle tappe */
.lt { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.lt li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.lt li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: #E3E8DD; }
.lt li.ok:not(:last-child)::before { background: var(--lime); }
.lt i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #D3DACB; background: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--tenue); }
.lt li.ok i { background: var(--verde); border-color: var(--verde); color: #fff; }
.lt li.qui i { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(132, 204, 22, .25); color: var(--verde); }
.lt b { display: block; font-size: 14.5px; }
.lt small { display: block; color: var(--tenue); font-size: 13px; margin-top: 2px; }
.lt .lt__ops { color: var(--testo); opacity: .75; }

/* costi */
.costi { list-style: none; margin: 0; padding: 0; }
.costi li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #F0F3EC; }
.costi li span { color: var(--tenue); }
.costi li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.costi .tot { border-top: 1px solid var(--bordo-2); border-bottom: 0; }
.costi .tot span, .costi .tot b { color: var(--testo); font-weight: 700; }
.costi .marg { background: var(--lime-tenue); margin: 6px -10px 0; padding: 10px; border-radius: 10px; border: 0; }
.costi .marg span { color: var(--verde); font-weight: 700; }
.costi .marg b { color: var(--verde); font-size: 16px; }
.costi .marg.neg { background: var(--rosso-f); } .costi .marg.neg span, .costi .marg.neg b { color: var(--rosso); }
.barre-v { display: flex; flex-direction: column; gap: 4px; }
.bv { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 92px; gap: 14px; align-items: center; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
.bv:hover { background: var(--lime-tenue); }
.bv__n b { display: block; font-size: 13.5px; } .bv__n small { color: var(--tenue); font-size: 12px; }
.bv__b { display: flex; flex-direction: column; gap: 3px; }
.bv__b i { display: block; height: 8px; border-radius: 99px; }
.bv__b .r { background: var(--lime); } .bv__b .c { background: #CBD5E1; }
.bv__m { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.bv__m small { display: block; color: var(--tenue); font-weight: 500; font-size: 12px; }
.legenda-i { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--tenue); }
.legenda-i i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: -6px; }
.legenda-i .r { background: var(--lime); } .legenda-i .c { background: #CBD5E1; }

/* documenti */
.doc-lista { display: grid; gap: 8px; }
.doc-voce { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--bordo); border-radius: 11px; background: #FBFCFA; cursor: pointer; text-align: left; }
.doc-voce:hover { border-color: var(--verde); }
.doc-voce > .ico { width: 22px; height: 22px; color: var(--verde-2); }
.doc-voce b { display: block; font-size: 14px; } .doc-voce small { color: var(--tenue); font-size: 12.5px; }
.doc-wrap { background: #E9EDE4; padding: 22px; border-radius: 12px; }
.doc { background: #fff; max-width: 720px; margin: 0 auto; padding: 28px 30px; font-size: 13px; box-shadow: 0 6px 24px rgba(15, 23, 42, .12); border-radius: 4px; color: #1F2937; }
.doc__testa { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #1F2937; padding-bottom: 12px; margin-bottom: 14px; }
.doc__testa b { font: 700 19px/1.2 var(--ft); display: block; }
.doc__testa small { color: #6B7280; font-size: 11.5px; }
.doc__num { font-weight: 700; text-align: right; font-size: 14px; }
.doc__num small { display: block; font-weight: 500; }
.doc__due { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #D1D5DB; margin-bottom: -1px; }
.doc__due > div { padding: 9px 11px; }
.doc__due > div + div { border-left: 1px solid #D1D5DB; }
.doc__due small, .cmr__b small, .doc__firme small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; }
.doc__due b { display: block; font-size: 13.5px; }
.doc__due span { color: #4B5563; font-size: 12.5px; }
.doc__tab { width: 100%; border-collapse: collapse; margin: 12px 0; }
.doc__tab th, .doc__tab td { border: 1px solid #D1D5DB; padding: 7px 9px; text-align: left; }
.doc__tab th { background: #F3F4F6; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.doc__firme { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.doc__firme > div { border-top: 1px solid #9CA3AF; padding-top: 6px; min-height: 70px; }
.doc__firme svg { width: 150px; height: 52px; display: block; }
.doc__firme path, .firma-svg path { fill: none; stroke: #1E3A8A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.doc--cmr { border-top: 6px solid #B91C1C; }
.cmr { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #D1D5DB; }
.cmr__b { padding: 9px 11px 9px 34px; border-bottom: 1px solid #D1D5DB; position: relative; min-height: 64px; }
.cmr__b:nth-child(odd) { border-right: 1px solid #D1D5DB; }
.cmr__b em { position: absolute; left: 8px; top: 9px; font-style: normal; font-weight: 700; color: #B91C1C; font-size: 11px; }
.cmr__b b { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* moduli */
.modulo .sott { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); margin: 22px 0 10px; font-family: var(--ff); font-weight: 700; }
.modulo .sott--primo { margin-top: 0; }
.campi { display: grid; gap: 12px 14px; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 600; color: #334155; }
.campo input, .campo select, .campo textarea { width: 100%; border: 1px solid var(--bordo-2); border-radius: 10px; padding: 10px 12px; background: #fff; min-width: 0; }
.campo input[readonly] { background: #F6F8F3; color: #334155; }
.campo input:focus, .campo select:focus { outline: 2px solid rgba(132, 204, 22, .45); border-color: var(--verde-2); }
.campo--largo { grid-column: span 1; }
.campo-check { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.check, .radio { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--verde); flex: none; }
.scelte-r { display: grid; gap: 8px; margin-top: 12px; }
.scelte-r .radio { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; }
.modulo__az { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bordo); display: flex; justify-content: flex-end; }
.campo-euro { position: relative; }
.campo-euro input { padding-right: 34px; font-size: 20px; font-weight: 700; }
.campo-euro i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--tenue); font-weight: 600; }
.prezzo-box { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.prezzo-box__sug { background: var(--notte); color: #CBD5E1; border-radius: 13px; padding: 16px 18px; }
.prezzo-box__sug small { display: flex; align-items: center; gap: 6px; color: var(--lime-2); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.prezzo-box__sug > b { display: inline-block; font: 800 34px/1.1 var(--ft); color: #fff; margin-top: 6px; }
.prezzo-box__sug > span { display: block; font-size: 13px; color: #94A3B8; }
.prezzo-box__sug ul { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--notte-bordo); font-size: 13px; display: grid; gap: 4px; }
.prezzo-box__sug li { display: flex; justify-content: space-between; }
.prezzo-box__sug li b { color: #fff; }
.prezzo-box .campo small { margin-top: 2px; }
.esito { display: flex; gap: 14px; align-items: center; background: var(--lime-tenue); border-color: #BEE68A; margin-bottom: 18px; flex-wrap: wrap; }
.esito > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--verde); color: #fff; }
.esito > div { flex: 1; min-width: 240px; }
.esito p { margin: 2px 0 0; color: var(--tenue); font-size: 14px; }

/* mappe */
.mappa { height: 360px; border-radius: 12px; overflow: hidden; background: #E8ECE4; z-index: 0; }
.mappa--alta { height: 420px; } .mappa--media { height: 230px; margin-top: 14px; }
.mappa-off { display: grid; place-items: center; height: 100%; color: var(--tenue); font-size: 14px; }
.tile-chiare { filter: saturate(.45) brightness(1.03) contrast(.95); }
.tile-scure { filter: invert(1) hue-rotate(185deg) brightness(.82) contrast(.92) saturate(.35); }
.leaflet-container { font-family: var(--ff); }
.leaflet-control-attribution { font-size: 10px !important; }
.cam-ico, .tappa-ico { background: none; border: 0; }
.cam { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0; white-space: nowrap; }
.cam i { width: 26px; height: 26px; border-radius: 9px; background: var(--c); color: #0F172A; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .3); position: relative; z-index: 2; }
.cam i .ico { width: 15px; height: 15px; }
.cam span { background: #0F172A; color: #fff; font: 700 10.5px/1 var(--ff); padding: 4px 7px 4px 12px; border-radius: 0 6px 6px 0; margin-left: -6px; letter-spacing: .03em; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.cam.sel i { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(132, 204, 22, .45), 0 4px 12px rgba(0, 0, 0, .35); }
.cam.sel span { background: var(--lime); color: var(--notte); }
.tap { position: absolute; transform: translate(-11px, -11px); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.tap b { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2.5px solid var(--verde); display: grid; place-items: center; font-size: 11px; color: var(--verde); }
.tap.ok b { background: var(--verde); color: #fff; }
.tap span { font: 700 11.5px/1 var(--ff); color: #0F172A; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.mappa--scura .tap span { color: #fff; text-shadow: 0 0 3px #0F172A, 0 0 3px #0F172A; }
.mappa--scura .tap b { background: #0F172A; border-color: var(--lime); color: var(--lime); }

/* ---------------- Cliente ---------------- */
body[data-ruolo="cliente"] .d-guscio, body[data-ruolo="autista"] .d-guscio { grid-template-columns: minmax(0, 1fr); }
body[data-ruolo="cliente"] .d-lato, body[data-ruolo="autista"] .d-lato { display: none; }
body[data-ruolo="cliente"] .d-main { padding: 0 0 60px; background: #F7F8F4; }
.portale { background: #fff; border-bottom: 1px solid var(--bordo); position: sticky; top: 112px; z-index: 500; }
.portale__in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 10px 28px; }
.portale__marchio { display: flex; align-items: center; gap: 10px; }
.portale__marchio b { font: 600 17px/1.1 var(--ft); display: block; }
.portale__marchio em { font-style: normal; font-weight: 800; color: var(--verde); }
.portale__marchio small { color: var(--tenue); font-size: 12px; }
.portale__tab { display: flex; gap: 4px; margin: 0 auto; }
.portale__tab a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; text-decoration: none; color: #334155; font-weight: 600; font-size: 14.5px; }
.portale__tab a:hover { background: #F2F5EE; }
.portale__tab a.on { background: var(--lime-chiaro); color: var(--verde); }
.portale__chi { display: flex; align-items: center; gap: 10px; }
.portale__chi b { display: block; font-size: 13.5px; } .portale__chi small { color: var(--tenue); font-size: 12px; }
.cl-corpo { max-width: 1240px; margin: 0 auto; padding: 26px 28px 0; }
.ricerca { background: radial-gradient(120% 140% at 100% 0%, #4D7C0F 0%, #2F4A0E 45%, #0F172A 100%); color: #fff; border-radius: 20px; padding: 30px 30px 26px; position: relative; overflow: hidden; }
.ricerca::after { content: ''; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; border-radius: 50%; border: 50px solid rgba(132, 204, 22, .12); pointer-events: none; }
.ricerca__testo { position: relative; z-index: 1; max-width: 760px; }
.ricerca h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.ricerca p { color: #D4DEC6; margin: 8px 0 0; font-size: 15.5px; }
.ricerca__f { position: relative; z-index: 1; margin-top: 22px; display: grid; grid-template-columns: 1.3fr 40px 1.3fr 1fr; gap: 10px; background: #fff; color: var(--testo); padding: 14px; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); align-items: end; }
.ricerca__f .campo--merce { grid-column: 1 / 3; }
.ricerca__f .campo--merce + .campo--n { grid-column: 3; }
.ricerca__f > .campo--n:nth-of-type(6) { grid-column: 4; }
.ricerca__f .check { grid-column: 1 / 3; color: var(--testo); }
.ricerca__f > .btn { grid-column: 3 / 5; }
.ricerca__scambia { height: 42px; width: 40px; border: 1px solid var(--bordo-2); background: #fff; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--verde); }
.ricerca__scambia:hover { border-color: var(--verde); }
.cl-ris { margin-top: 22px; }
.cl-ris__testa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; background: #E9EEE3; border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 9px; padding: 9px 14px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #475569; }
.seg button span { background: rgba(15, 23, 42, .08); border-radius: 99px; padding: 0 7px; font-size: 12px; }
.seg button.on { background: #fff; color: var(--testo); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.seg button.on span { background: var(--lime); color: var(--notte); }
.seg--piccolo button { padding: 7px 14px; }
.ordina { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tenue); }
.ordina select { border: 1px solid var(--bordo-2); border-radius: 9px; padding: 7px 10px; background: #fff; }
.intel { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 13px 16px; background: #fff; border: 1px solid var(--bordo); border-left: 4px solid var(--lime); border-radius: 12px; }
.intel > .ico { color: var(--verde-2); margin-top: 2px; }
.intel p { margin: 0; font-size: 14px; color: #334155; }
.ris-lista { display: flex; flex-direction: column; gap: 12px; }
.ris { display: grid; grid-template-columns: minmax(230px, 1.1fr) minmax(300px, 1.6fr) minmax(180px, .8fr); grid-template-areas: "v c p" "t t p"; gap: 14px 26px; background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 18px 20px; box-shadow: var(--ombra); align-items: center; }
.ris--top { border-color: #A9D66B; box-shadow: 0 0 0 3px rgba(132, 204, 22, .14), var(--ombra); }
.ris--nuova { border-color: #84CC16; }
.ris__vett { grid-area: v; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; }
.ris__vett > div b { display: block; font-size: 15px; } .ris__vett > div small { color: var(--tenue); font-size: 12.5px; }
.logo-v { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 15px/1 var(--ft); color: #fff; background: linear-gradient(135deg, hsl(var(--h) 40% 32%), hsl(calc(var(--h) + 30) 45% 46%)); }
.ris__vett .stelle { grid-column: 2; }
.ris__n { display: none; }
.ris__corsa { grid-area: c; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.ris__ora b { display: block; font: 700 22px/1 var(--ft); font-variant-numeric: tabular-nums; }
.ris__ora small { color: var(--tenue); font-size: 12px; }
.ris__ora span { display: block; font-size: 13px; color: #334155; font-weight: 500; margin-top: 2px; }
.ris__ora:last-child { text-align: right; }
.ris__linea { display: flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 12.5px; white-space: nowrap; }
.ris__linea i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #A3B18A 0 6px, transparent 6px 11px); min-width: 14px; }
.ris__linea span { display: flex; align-items: center; gap: 6px; }
.ris__linea .ico { color: var(--verde-2); }
.ris__tag { grid-area: t; display: flex; flex-wrap: wrap; gap: 6px; }
.ris__prezzo { grid-area: p; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-left: 1px solid var(--bordo); padding-left: 22px; align-self: stretch; justify-content: center; }
.ris__prezzo > b { font: 800 28px/1.1 var(--ft); letter-spacing: -.03em; }
.ris__prezzo small { color: var(--tenue); font-size: 12.5px; }
.ris__prezzo small.pos { color: var(--verde-2); font-weight: 600; }
.ris__prezzo .btn { margin-top: 10px; }
.anteprima-r .ris { grid-template-columns: 1fr; grid-template-areas: "v" "c" "t" "p"; box-shadow: none; padding: 14px; gap: 12px; }
.anteprima-r .ris__prezzo { border-left: 0; padding-left: 0; text-align: left; align-items: flex-start; border-top: 1px solid var(--bordo); padding-top: 10px; }
.suggerisci { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--tenue); margin-top: 14px; }
.suggerisci .ico { margin-top: 2px; color: var(--verde-2); }
.prenota .riep { position: sticky; top: 190px; }
.riep__tratta { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F6F8F3; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.riep__tratta b { display: block; font: 700 20px/1 var(--ft); }
.riep__tratta span { font-size: 13px; color: var(--tenue); }
.riep__tratta > div:last-child { text-align: right; }
.riep__plus { margin: 14px 0; display: grid; gap: 8px; }
.riep__plus p { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; background: var(--lime-tenue); border-radius: 10px; padding: 10px 12px; }
.riep__plus .ico { color: var(--verde-2); margin-top: 1px; }
.riep .tenue.piccolo { margin: 10px 0 0; }
.sp-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sp-carta { display: block; background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 18px; text-decoration: none; color: inherit; box-shadow: var(--ombra); transition: border-color .15s, transform .15s; }
.sp-carta:hover { border-color: var(--lime); transform: translateY(-2px); }
.sp-carta__t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sp-carta h3 { font-size: 18px; margin: 10px 0 4px; }
.sp-carta p { margin: 0; color: var(--tenue); font-size: 13.5px; }
.sp-carta small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.passi > div { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; padding: 11px 14px; font-weight: 600; font-size: 14px; color: var(--tenue); }
.passi i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF1EA; font-size: 12.5px; flex: none; }
.passi .ok { color: var(--testo); } .passi .ok i { background: var(--verde); color: #fff; }
.passi .ora { color: var(--testo); border-color: #A9D66B; background: var(--lime-tenue); } .passi .ora i { background: var(--lime); color: var(--notte); }
.passi--mini { display: flex; gap: 4px; margin: 12px 0 0; }
.passi--mini i { flex: 1; height: 5px; border-radius: 99px; background: #E3E8DD; }
.passi--mini i.ok { background: var(--lime); }
.blocco--mappa { padding: 0; overflow: hidden; position: relative; }
.mappa--traccia { height: 430px; border-radius: 0; }
.mappa-stato { position: absolute; left: 14px; bottom: 14px; z-index: 500; display: flex; gap: 8px; align-items: center; background: rgba(15, 23, 42, .9); color: #fff; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
.mappa-stato:empty { display: none; }
.mappa-stato .ico { color: var(--lime-2); }
.eta { display: flex; gap: 14px; align-items: center; }
.eta > .ico { width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: var(--lime-chiaro); color: var(--verde); }
.eta small { display: block; color: var(--tenue); font-size: 13px; font-weight: 600; }
.eta b { display: block; font: 800 34px/1.1 var(--ft); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eta span { font-size: 13.5px; color: var(--tenue); }
.eta--rit > .ico { background: var(--ambra-f); color: var(--ambra); } .eta--rit span { color: var(--ambra); font-weight: 600; }
.eta--ok > .ico { background: var(--verde); color: #fff; }
.eta--att > .ico { background: var(--ambra-f); color: var(--ambra); } .eta--att b { font-size: 22px; }
.dett { margin: 0; display: grid; gap: 10px; }
.dett > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14px; align-items: center; }
.dett dt { color: var(--tenue); } .dett dd { margin: 0; font-weight: 500; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 0 0 16px; position: relative; }
.tl li:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: #E9EEE3; }
.tl i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lime-chiaro); color: var(--verde); font-style: normal; }
.tl .tl--ritardo i { background: var(--ambra-f); color: var(--ambra); }
.tl .tl--consegna i { background: var(--verde); color: #fff; }
.tl b { font-size: 14.5px; display: block; } .tl b a { font-weight: 600; font-size: 13px; margin-left: 4px; }
.tl p { margin: 2px 0 3px; font-size: 13.5px; color: #334155; }
.tl small { color: var(--tenue); font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.tl--avvisi li.nuovo b::after { content: 'nuovo'; font-size: 10.5px; background: var(--lime); color: var(--notte); border-radius: 99px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; }
.pod { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pod__firma { border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; background: #FBFCFA; display: flex; flex-direction: column; justify-content: space-between; }
.pod__firma small { font-size: 12.5px; color: var(--tenue); }
.firma-svg { width: 100%; height: 90px; display: block; }
.pod__foto .foto, .ap-foto .foto { width: 100%; height: 100%; min-height: 120px; border-radius: 12px; display: block; }
.pod-vuota { text-align: center; padding: 24px 10px; color: var(--tenue); }
.pod-vuota .ico { width: 34px; height: 34px; color: #B6C2A3; }
.pod-vuota p { margin: 8px auto 0; max-width: 360px; font-size: 14px; }
.tab--pref td, .tab--pref th { text-align: center; padding: 9px 6px; }
.tab--pref td:first-child, .tab--pref th:first-child { text-align: left; white-space: normal; }
.interr { display: inline-block; position: relative; width: 36px; height: 21px; cursor: pointer; }
.interr input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.interr i { position: absolute; inset: 0; background: #CBD5E1; border-radius: 99px; transition: background .15s; }
.interr i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: transform .15s; }
.interr input:checked + i { background: var(--verde-2); }
.interr input:checked + i::after { transform: translateX(15px); }

/* ---------------- Centrale (scura) ---------------- */
body[data-ruolo="centrale"] .d-main { background: #0B1222; color: #E2E8F0; }
body[data-ruolo="centrale"] { background: #0B1222; }
.c-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.c-testa h1 { font-size: 26px; color: #fff; }
.c-testa p { margin: 5px 0 0; color: #8A97AD; font-size: 14px; max-width: 760px; }
.c-salti { display: flex; align-items: center; gap: 8px; }
.c-salti span { font-size: 12.5px; color: #8A97AD; }
.ck-riga { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ck { background: #111B30; border: 1px solid var(--notte-bordo); border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden; }
.ck::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #475569; }
.ck.verde::before { background: var(--lime); } .ck.blu::before { background: #38BDF8; } .ck.ambra::before { background: #F59E0B; } .ck.rosso::before { background: #F87171; }
.ck small { color: #8A97AD; font-size: 12.5px; display: block; }
.ck b { font: 700 24px/1.2 var(--ft); color: #fff; font-variant-numeric: tabular-nums; }
.c-griglia { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: 12px; height: 600px; }
.c-lista, .c-dett, .c-box { background: #111B30; border: 1px solid var(--notte-bordo); border-radius: 14px; min-width: 0; }
.c-lista { overflow-y: auto; padding: 8px; }
.c-lista__t, .c-box__t { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #8A97AD; font-weight: 600; padding: 8px 8px 10px; display: flex; justify-content: space-between; }
.c-box__t a { color: var(--lime-2); text-transform: none; letter-spacing: 0; text-decoration: none; font-size: 13px; }
.cm { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; color: #E2E8F0; cursor: pointer; }
.cm:hover { background: rgba(255, 255, 255, .04); }
.cm.sel { background: rgba(132, 204, 22, .1); border-color: rgba(132, 204, 22, .35); }
.cm__p { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.cm__t b { display: block; font-size: 13.5px; letter-spacing: .03em; }
.cm__t small { display: block; color: #8A97AD; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm__t .cm__d { color: #CBD5E1; }
.cm.ecc .cm__d { color: #FCA5A5; }
.cm__e { text-align: right; } .cm__e b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; } .cm__e small { font-size: 11.5px; color: #8A97AD; }
.c-mappa { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--notte-bordo); min-width: 0; }
.mappa--scura { height: 100%; border-radius: 0; background: #0E1626; }
.c-leg { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; gap: 12px; flex-wrap: wrap; background: rgba(15, 23, 42, .88); padding: 8px 12px; border-radius: 10px; font-size: 12px; color: #CBD5E1; }
.c-leg span { display: flex; align-items: center; gap: 6px; }
.c-leg span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.c-dett { padding: 16px; overflow-y: auto; }
.cd__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cd__testa > div > b { display: block; color: #fff; font: 700 18px/1.2 var(--ft); margin-top: 8px; }
.cd__testa small { color: #8A97AD; font-size: 12.5px; }
.cd__tel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.cd__tel > div { background: #0B1222; border-radius: 10px; padding: 9px 11px; border: 1px solid var(--notte-bordo); }
.cd__tel small { color: #8A97AD; font-size: 11.5px; display: block; }
.cd__tel b { font: 700 18px/1.2 var(--ft); color: #fff; font-variant-numeric: tabular-nums; }
.cd__tel b.neg { color: #F87171; }
.cd__tel em { font-style: normal; font-size: 12px; color: #8A97AD; font-weight: 500; margin-left: 2px; }
.cd__ecc { display: flex; gap: 10px; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cd__ecc .ico { color: #F87171; margin-top: 2px; }
.cd__ecc b { display: block; font-size: 13.5px; color: #FECACA; font-weight: 600; }
.cd__ecc small { color: #CBD5E1; font-size: 12px; }
.c-dett .lt li:not(:last-child)::before { background: #26324A; }
.c-dett .lt li.ok:not(:last-child)::before { background: var(--lime); }
.c-dett .lt i { background: #0B1222; border-color: #334155; color: #8A97AD; }
.c-dett .lt li.ok i { background: var(--verde); border-color: var(--verde); color: #fff; }
.c-dett .lt b { color: #F1F5F9; font-size: 13.5px; } .c-dett .lt small { color: #8A97AD; font-size: 12.5px; }
.c-dett .lt .lt__ops { color: #CBD5E1; opacity: 1; }
.cd__az { display: flex; flex-wrap: wrap; gap: 6px; }
.c-dett .chip.c-verde { background: rgba(132, 204, 22, .16); color: #BEF264; } .c-dett .chip.c-ambra { background: rgba(245, 158, 11, .16); color: #FCD34D; } .c-dett .chip.c-rosso { background: rgba(248, 113, 113, .16); color: #FCA5A5; } .c-dett .chip.c-blu { background: rgba(56, 189, 248, .16); color: #7DD3FC; } .c-dett .chip.c-grigio { background: rgba(148, 163, 184, .16); color: #CBD5E1; }
.c-sotto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.c-box { padding: 8px 14px 12px; }
.ce { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--notte-bordo); color: #E2E8F0; text-align: left; padding: 9px 0; cursor: pointer; }
.ce:last-child { border-bottom: 0; }
.ce i { width: 32px; height: 32px; border-radius: 9px; background: rgba(248, 113, 113, .14); color: #F87171; display: grid; place-items: center; }
.ce b { display: block; font-size: 13.5px; } .ce small { color: #8A97AD; font-size: 12.5px; display: block; }
.ce time { color: #8A97AD; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.registro--scuro li { border-color: var(--notte-bordo); }
.registro--scuro b { color: #E2E8F0; } .registro--scuro small, .registro--scuro time { color: #8A97AD; }
body[data-ruolo="centrale"] .vuoto { color: #8A97AD; }
.filtri--scuri button { background: #111B30; border-color: #334155; color: #CBD5E1; }
.filtri--scuri button.on { background: var(--lime); color: var(--notte); border-color: var(--lime); }
.c-box .tab-wrap { margin: 0 -14px; padding: 0 14px; }
.tab--scura th { color: #8A97AD; border-color: var(--notte-bordo); }
.tab--scura td { border-color: var(--notte-bordo); color: #E2E8F0; }
.tab--scura td small { color: #8A97AD; }
.tab--scura .tragitto .ico { color: #64748B; }
.tab--scura .chip.c-verde { background: rgba(132, 204, 22, .16); color: #BEF264; } .tab--scura .chip.c-lime { background: rgba(132, 204, 22, .1); color: #D9F99D; } .tab--scura .chip.c-blu { background: rgba(56, 189, 248, .16); color: #7DD3FC; } .tab--scura .chip.c-ambra { background: rgba(245, 158, 11, .16); color: #FCD34D; }
.ecc-lista { display: grid; gap: 10px; }
.ecc-c { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: start; background: #111B30; border: 1px solid var(--notte-bordo); border-radius: 14px; padding: 16px; }
.ecc-c.aperta { border-left: 3px solid #F87171; }
.ecc-c.gestita { opacity: .7; }
.ecc-c__i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(248, 113, 113, .14); color: #F87171; }
.ecc-c.gestita .ecc-c__i { background: rgba(132, 204, 22, .12); color: var(--lime-2); }
.ecc-c__t > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ecc-c__t > div b { color: #fff; font-size: 15px; }
.ecc-c__t > div small { color: #8A97AD; font-size: 12.5px; }
.ecc-c__t p { margin: 6px 0 2px; color: #E2E8F0; font-size: 14px; }
.ecc-c__t > small { color: #8A97AD; font-size: 12.5px; display: block; }
.ecc-c__esito { color: #BEF264 !important; display: flex !important; align-items: center; gap: 6px; margin-top: 4px; }
.ecc-c__az { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ecc-c .chip.c-verde { background: rgba(132, 204, 22, .16); color: #BEF264; }
.pod-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pod-c { background: #111B30; border: 1px solid var(--notte-bordo); border-radius: 14px; overflow: hidden; }
.pod-c__f .foto { width: 100%; height: 150px; display: block; }
.pod-c__c { padding: 12px 14px 14px; display: grid; gap: 3px; }
.pod-c__t { display: flex; justify-content: space-between; align-items: center; }
.pod-c__t b { color: #fff; }
.pod-c small { color: #8A97AD; font-size: 12.5px; }
.pod-c small b { color: #E2E8F0; }
.pod-c__firma { background: #F8FAFC; border-radius: 10px; margin: 8px 0 4px; padding: 4px; }
.pod-c__firma .firma-svg { height: 64px; }
.pod-c .link { color: var(--lime-2); margin-top: 6px; font-size: 13px; }
.pod-c .chip.c-verde { background: rgba(132, 204, 22, .16); color: #BEF264; }

/* ---------------- Autista ---------------- */
body[data-ruolo="autista"] .d-main { background: radial-gradient(90% 70% at 70% 30%, #EAF5D6 0%, #F5F7F2 60%); }
.ap-guscio { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; max-width: 1100px; margin: 0 auto; align-items: start; }
.ap-lato { padding-top: 26px; }
.etich { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.ap-lato h1 { font-size: 36px; font-weight: 800; letter-spacing: -.035em; margin: 10px 0 10px; line-height: 1.1; }
.ap-lato > p.tenue { font-size: 16px; margin: 0; max-width: 520px; }
.ap-cons-box { margin-top: 24px; background: #fff; border: 1px solid #C9EB8F; border-radius: 16px; padding: 16px 18px; box-shadow: var(--ombra); }
.ap-cons-box b { display: flex; align-items: center; gap: 7px; color: var(--verde); font-size: 14px; }
.ap-cons-box ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: #334155; display: grid; gap: 5px; }
.ap-reg { margin-top: 18px; background: #fff; border: 1px solid var(--bordo); border-radius: 16px; padding: 14px 18px 6px; }
.ap-reg > b { font-size: 14px; }
.tel { justify-self: center; }
.tel__cornice { width: 392px; background: #0B0F19; border-radius: 54px; padding: 12px; box-shadow: 0 0 0 2px #2A3140, 0 40px 80px -30px rgba(15, 23, 42, .55); }
.tel__schermo { position: relative; height: 800px; background: #F4F6F1; border-radius: 43px; overflow: hidden; display: flex; flex-direction: column; }
.tel__stato { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 4px; font-size: 14px; font-weight: 700; position: relative; flex: none; }
.tel__isola { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 110px; height: 30px; background: #0B0F19; border-radius: 20px; }
.tel__seg { display: flex; gap: 6px; align-items: center; }
.bat { width: 24px; height: 12px; border: 1.5px solid #0F172A; border-radius: 4px; position: relative; display: inline-block; }
.bat::after { content: ''; position: absolute; inset: 1.5px 6px 1.5px 1.5px; background: #0F172A; border-radius: 1.5px; }
.ap-testa { display: flex; align-items: center; gap: 10px; padding: 10px 18px 12px; flex: none; }
.ap-testa b { display: block; font: 700 16px/1.2 var(--ft); } .ap-testa small { color: var(--tenue); font-size: 11.5px; }
.ap-testa__online { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--verde); font-weight: 600; background: var(--lime-chiaro); padding: 3px 9px; border-radius: 99px; }
.ap-testa__online i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.ap-corpo { flex: 1; overflow-y: auto; padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.ap-corpo::-webkit-scrollbar { display: none; }
.ap-tab { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--bordo); padding: 8px 8px 22px; }
.ap-tab button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--tenue-2); cursor: pointer; padding: 4px; }
.ap-tab button .ico { width: 22px; height: 22px; }
.ap-tab button.on { color: var(--verde); }
.ap-viaggio, .ap-card { background: #fff; border-radius: 18px; padding: 14px 16px; border: 1px solid var(--bordo); }
.ap-viaggio__t { display: flex; justify-content: space-between; align-items: center; }
.ap-viaggio__t small { font-weight: 600; color: var(--tenue); font-size: 12.5px; }
.ap-tappe { display: flex; align-items: center; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.ap-tappe span { font: 700 15px/1.2 var(--ft); color: var(--tenue-2); }
.ap-tappe span.ok { color: var(--verde); } .ap-tappe span.qui { color: var(--testo); text-decoration: underline 3px var(--lime); text-underline-offset: 4px; }
.ap-tappe i { width: 14px; height: 2px; background: #CBD5E1; }
.ap-viaggio__n { display: flex; gap: 6px; }
.ap-viaggio__n span { flex: 1; background: #F4F6F1; border-radius: 10px; padding: 7px 8px; font-size: 11.5px; color: var(--tenue); text-align: center; }
.ap-viaggio__n b { display: block; font: 700 16px/1.2 var(--ft); color: var(--testo); }
.ap-card h3 { font-size: 18px; margin: 0 0 6px; }
.ap-card > p { font-size: 13.5px; color: #334155; margin: 0 0 10px; }
.ap-card--forte { border-color: #C9EB8F; }
.ap-sop { font-size: 11.5px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .06em; }
.ap-cli { display: flex; flex-direction: column; background: #F4F6F1; border-radius: 12px; padding: 9px 12px; margin: 8px 0 !important; }
.ap-cli b { font-size: 14px; } .ap-cli span { font-size: 12.5px; color: var(--tenue); }
.ap-check { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.ap-check button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #F4F6F1; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.ap-check i { width: 24px; height: 24px; border-radius: 8px; border: 2px solid #CBD5E1; display: grid; place-items: center; color: transparent; background: #fff; flex: none; }
.ap-check button.on { background: var(--lime-tenue); border-color: #C9EB8F; }
.ap-check button.on i { background: var(--verde); border-color: var(--verde); color: #fff; }
.ap-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; background: var(--verde); color: #fff; cursor: pointer; margin-top: 8px; }
.ap-btn[disabled] { background: #C6D0BA; cursor: not-allowed; }
.ap-btn--b { background: #fff; color: var(--testo); border: 1.5px solid var(--bordo-2); font-size: 15px; padding: 12px; }
.ap-link { border: 0; background: none; color: var(--verde); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 8px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.ap-indietro { padding: 0 0 6px; color: var(--tenue); }
.ap-sim { width: 100%; border: 1.5px dashed #A9D66B; background: var(--lime-tenue); color: var(--verde); border-radius: 14px; padding: 11px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; }
.ap-nota { display: flex; gap: 8px; font-size: 12.5px; color: var(--tenue); background: #F4F6F1; border-radius: 10px; padding: 9px 11px; margin: 8px 0 0 !important; }
.ap-nota .ico { flex: none; margin-top: 1px; color: var(--verde-2); }
.ap-nav { background: var(--notte); color: #fff; border-radius: 18px; padding: 14px 16px; }
.ap-nav__dir { display: flex; gap: 12px; align-items: center; }
.ap-nav__dir > .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--lime); color: var(--notte); }
.ap-nav__dir small { color: #94A3B8; font-size: 12px; }
.ap-nav__dir b { display: block; font: 700 18px/1.2 var(--ft); }
.ap-nav__num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ap-nav__num > div { background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 8px 10px; }
.ap-nav__num small { color: #94A3B8; font-size: 11px; display: block; }
.ap-nav__num b { font: 700 19px/1.2 var(--ft); font-variant-numeric: tabular-nums; }
.ap-nav__num em { font-style: normal; font-size: 11.5px; color: #94A3B8; margin-left: 3px; }
.ap-nav__num em.rit { color: #FCD34D; }
.ap-coda { display: flex; gap: 8px; align-items: center; margin-top: 10px; background: rgba(245, 158, 11, .16); color: #FDE68A; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.ap-mappa { height: 190px; border-radius: 18px; overflow: hidden; flex: none; border: 1px solid var(--bordo); }
.ap-az { display: grid; gap: 0; }
.ap-msg { display: flex; gap: 10px; align-items: center; background: #FEF9C3; border: 1px solid #FDE68A; border-radius: 14px; padding: 10px 12px; }
.ap-msg > .ico { color: #A16207; }
.ap-msg small { display: block; font-size: 11.5px; color: #A16207; } .ap-msg b { font-size: 13.5px; }
.ap-msg button { margin-left: auto; border: 0; background: #fff; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--verde); }
.ap-conta { background: #F4F6F1; border-radius: 14px; padding: 12px; margin: 10px 0 6px; }
.ap-conta__t { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.ap-conta__t b { font: 700 16px/1 var(--ft); }
.ap-bancali { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.ap-bancali button { aspect-ratio: 1.3; border-radius: 8px; border: 1.5px dashed #B6C2A3; background: #fff; font-size: 12px; font-weight: 700; color: var(--tenue); cursor: pointer; }
.ap-bancali button.on { background: #C8A26B; border: 0; color: #fff; }
.ap-foto { margin-top: 8px; height: 140px; border-radius: 14px; overflow: hidden; }
.ap-cons { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.ap-cons li { display: flex; gap: 10px; align-items: center; background: #F4F6F1; border-radius: 12px; padding: 9px 12px; }
.ap-cons i { width: 12px; height: 32px; border-radius: 4px; background: var(--c); flex: none; }
.ap-cons b { display: block; font-size: 13.5px; } .ap-cons small { color: var(--tenue); font-size: 12px; }
.ap-campo { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ap-campo span { font-size: 12.5px; font-weight: 600; color: var(--tenue); }
.ap-campo input { border: 1px solid var(--bordo-2); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.ap-firma { position: relative; border: 2px dashed #B6C2A3; border-radius: 14px; background: #fff; height: 150px; touch-action: none; }
.ap-firma canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.ap-firma__seg { position: absolute; left: 14px; bottom: 10px; font-size: 12px; color: #A3AE92; pointer-events: none; }
.ap-firma.firmata { border-style: solid; border-color: var(--lime); }
.ap-firma.firmata .ap-firma__seg { display: none; }
.ap-firma__az { display: flex; justify-content: space-between; }
.ap-fine { text-align: center; border-color: #C9EB8F; }
.ap-fine > .ico { width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: var(--verde); color: #fff; margin: 6px auto 8px; display: block; }
.ap-fine .ap-viaggio__n { margin-top: 10px; }
.ap-ore { display: grid; gap: 12px; margin-top: 8px; }
.ap-ore small { display: block; font-size: 12px; color: var(--tenue); }
.ap-ore b { font: 700 20px/1.2 var(--ft); }
.ap-ore em { font-style: normal; font-size: 11.5px; color: var(--tenue); display: block; margin-top: 3px; }
.ap-ore .barra { margin-top: 6px; height: 8px; }
.ap-foglio { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); z-index: 600; display: flex; align-items: flex-end; }
.ap-foglio__in { background: #fff; width: 100%; border-radius: 24px 24px 0 0; padding: 18px 16px 30px; animation: sale .2s ease-out; }
@keyframes sale { from { transform: translateY(40px); opacity: 0; } }
.ap-foglio__t { display: flex; justify-content: space-between; align-items: center; }
.ap-foglio__t b { font: 700 18px/1.2 var(--ft); }
.ap-foglio__t button { border: 0; background: #F4F6F1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ap-foglio p { font-size: 13px; color: var(--tenue); margin: 6px 0 12px; }
.ap-opz { display: grid; gap: 8px; }
.ap-opz__gr { background: var(--ambra-f); border-radius: 14px; padding: 11px 12px; }
.ap-opz__gr > span { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; color: #92400E; }
.ap-opz__gr > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.ap-opz__gr button { border: 0; background: #fff; border-radius: 10px; padding: 9px; font-weight: 700; cursor: pointer; color: #92400E; }
.ap-opz__b { display: flex; gap: 10px; align-items: center; border: 1px solid var(--bordo); background: #fff; border-radius: 14px; padding: 13px 12px; font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.ap-opz__b .ico { color: var(--tenue); }

/* ---------------- Avviso e finestre ---------------- */
.avviso { width: max-content; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 3000; background: var(--notte); color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 13px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); font-size: 14px; font-weight: 500; transition: transform .25s, opacity .25s; max-width: min(560px, calc(100vw - 32px)); }
.avviso.su { opacity: 1; transform: translate(-50%, 0); }
.avviso .ico { color: var(--lime-2); width: 20px; height: 20px; }
.avviso.att .ico { color: #FCD34D; }
.dlg { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .5); color: var(--testo); }
.dlg--largo { width: min(860px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.dlg__testa { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; }
.dlg__testa h2 { font-size: 20px; }
.dlg__x { border: 0; background: #F2F5EE; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.dlg__corpo { padding: 14px 22px; max-height: 70vh; overflow-y: auto; }
.dlg__corpo p { margin: 0 0 10px; color: #334155; }
.dlg__az { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--bordo); flex-wrap: wrap; }

/* ---------------- Adattamento ---------------- */
@media (max-width: 1280px) {
  .c-griglia { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .abb__voce { grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(100px, 1fr)); }
  .abb__az { grid-column: 1 / -1; justify-content: flex-start; }
  .ris { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(170px, .8fr); }
}
@media (max-width: 1100px) {
  .d-guscio { grid-template-columns: 210px minmax(0, 1fr); }
  .d-main { padding: 24px 22px 50px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-3-2 { grid-template-columns: minmax(0, 1fr); }
  .c-griglia { grid-template-columns: minmax(0, 1fr) 300px; height: auto; }
  .c-lista { grid-column: 1 / -1; max-height: 260px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; align-content: start; }
  .c-lista__t { grid-column: 1 / -1; }
  .c-lista > div[data-lista] { display: contents; }
  .c-mappa { height: 520px; }
  .c-dett { max-height: 520px; }
  .ck-riga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-guscio { grid-template-columns: minmax(0, 1fr) 392px; gap: 28px; }
  .d-ruolo label, .d-reg span { display: none; }
  .prenota .riep { position: static; }
  .rich__dati { grid-template-columns: repeat(3, minmax(0, auto)); }
}
@media (max-width: 860px) {
  .d-top__in { flex-wrap: wrap; gap: 8px 10px; padding: 9px 14px; }
  .d-demo { order: 3; }
  .oro { order: 4; margin-left: 0; }
  .d-ruolo { order: 2; margin-left: auto; }
  .d-reg { order: 5; } .d-lingua { order: 5; } .d-esci { order: 6; }
  .d-ruolo select { min-width: 0; }
  .d-guscio { grid-template-columns: minmax(0, 1fr); }
  .d-lato { position: static; height: auto; border-top: 0; }
  .d-azienda, .d-utente, .d-nav__gruppo { display: none; }
  .d-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; }
  .d-nav::-webkit-scrollbar { display: none; }
  .d-nav a { white-space: nowrap; padding: 8px 12px; font-size: 14px; }
  .d-nav a.on { box-shadow: none; }
  .d-main { padding: 20px 16px 50px; }
  .portale { position: static; }
  .portale__in { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .portale__chi { display: none; }
  .portale__tab { margin: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .portale__tab a { padding: 8px 10px; font-size: 13.5px; white-space: nowrap; }
  .cl-corpo { padding: 18px 16px 0; }
  .ap-guscio { grid-template-columns: minmax(0, 1fr); }
  .tel { order: -1; }
  .ap-lato { padding-top: 0; }
  .ap-lato h1 { font-size: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .d-top__in { padding: 8px 12px; }
  .marchio__t { font-size: 16px; }
  .logo-q { width: 30px; height: 30px; }
  .d-demo { font-size: 11px; padding: 3px 8px; }
  .d-ruolo { flex: 1 1 100%; order: 7; margin-left: 0; }
  .d-ruolo label { display: block; font-size: 12px; }
  .d-ruolo select { flex: 1; padding: 8px 36px 8px 12px; }
  .oro { padding: 3px 3px 3px 10px; gap: 7px; margin-left: auto; }
  .oro__g { display: none; }
  .oro b { font-size: 15px; min-width: 0; }
  .oro__vel button { padding: 4px 7px; }
  .d-reg, .d-esci { padding: 6px; }
  .d-esci span { display: none; }
  .d-percorso__in { padding: 8px 12px; }
  .d-passo span small { display: none; }
  .d-ricomincia span { display: none; }
  .d-testa h1 { font-size: 23px; }
  .g4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi b { font-size: 23px; }
  .kpi__ico { display: none; }
  .blocco { padding: 16px; }
  .tab-wrap { margin: 0 -16px; padding: 0 16px; }
  .sugg { grid-template-columns: 36px minmax(0, 1fr); }
  .sugg__az { grid-column: 1 / -1; }
  .c2, .c3 { grid-template-columns: minmax(0, 1fr); }
  .prezzo-box { grid-template-columns: minmax(0, 1fr); }
  .rich__dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rich h3 { font-size: 18px; }
  .abb__voce { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .abb__p { grid-column: 1 / -1; }
  .consol__piano { grid-template-columns: minmax(0, 1fr); }
  .consol { padding: 10px; }
  .bv { grid-template-columns: minmax(0, 1fr) 84px; }
  .bv__b { grid-column: 1 / -1; grid-row: 2; }
  .ricerca { padding: 22px 16px 16px; border-radius: 16px; }
  .ricerca h1 { font-size: 23px; }
  .ricerca p { font-size: 14.5px; }
  .ricerca__f { grid-template-columns: minmax(0, 1fr) 40px; padding: 12px; }
  .ricerca__f > * { grid-column: 1 / -1 !important; }
  .ricerca__f > .campo:first-child { grid-column: 1 !important; }
  .ricerca__scambia { grid-column: 2 !important; grid-row: 1; align-self: end; }
  .ricerca__f .campo--n { grid-column: auto !important; }
  .ricerca__f { grid-template-areas: none; }
  .ris { grid-template-columns: minmax(0, 1fr); grid-template-areas: "v" "c" "t" "p"; padding: 16px; }
  .ris__prezzo { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordo); padding-top: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .ris__prezzo > b { font-size: 25px; }
  .ris__prezzo small { flex-basis: 100%; order: 2; }
  .ris__prezzo .btn { order: 3; width: 100%; }
  .ris__ora b { font-size: 19px; }
  .ris__linea span { font-size: 11.5px; }
  .seg { width: 100%; }
  .seg button { flex: 1; justify-content: center; font-size: 13px; padding: 8px 8px; }
  .passi { grid-template-columns: repeat(2, 1fr); }
  .mappa--traccia { height: 320px; }
  .mappa--alta { height: 300px; }
  .pod { grid-template-columns: minmax(0, 1fr); }
  .dett > div { grid-template-columns: 96px minmax(0, 1fr); }
  .c-griglia { grid-template-columns: minmax(0, 1fr); }
  .c-mappa { height: 380px; }
  .c-dett { max-height: none; }
  .c-lista { max-height: 230px; grid-template-columns: minmax(0, 1fr); display: block; }
  .ck-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-sotto { grid-template-columns: minmax(0, 1fr); }
  .ecc-c { grid-template-columns: 38px minmax(0, 1fr); }
  .ecc-c__az { grid-column: 1 / -1; justify-content: flex-start; }
  .c-testa h1 { font-size: 22px; }
  /* l'app dell'autista occupa lo schermo senza cornice */
  body[data-ruolo="autista"] .d-main { padding: 0 0 30px; background: #F4F6F1; }
  .tel { width: 100%; }
  .tel__cornice { width: 100%; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .tel__schermo { border-radius: 0; height: auto; min-height: calc(100vh - 150px); }
  .tel__stato { display: none; }
  .ap-corpo { overflow: visible; }
  .ap-tab { position: sticky; bottom: 0; padding-bottom: 10px; }
  .ap-lato { padding: 0 16px; }
  .ap-foglio { position: fixed; }
  .doc { padding: 18px 16px; }
  .doc-wrap { padding: 10px; }
  .doc__due, .cmr { grid-template-columns: minmax(0, 1fr); }
  .doc__due > div + div { border-left: 0; border-top: 1px solid #D1D5DB; }
  .cmr__b:nth-child(odd) { border-right: 0; }
  .doc__testa { flex-direction: column; }
  .doc__num { text-align: left; }
  .dlg__az .btn { flex: 1; }
  .avviso { bottom: 14px; }
}

.co2 { white-space: nowrap; }
.nw { white-space: nowrap; }
.scad-l { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 13px; align-items: center; justify-content: start; }
.scad-l > span:not(.scad):not(.tenue) { color: var(--tenue); font-size: 12px; }
.tab--flotta td { padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 861px) { .d-guscio { background: linear-gradient(90deg, var(--notte) 0 var(--lato, 248px), transparent 0); } }
@media (max-width: 1100px) and (min-width: 861px) { .d-guscio { --lato: 210px; } }
body[data-ruolo="cliente"] .d-guscio, body[data-ruolo="autista"] .d-guscio { background: none; }

.tab td .barra + small { white-space: nowrap; }
.modulo .seg + .campi { margin-top: 14px; }
.modulo .c3:has(.campo--largo) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

.g-3-2, .g-2-1 { align-items: start; }

.seg b { font-weight: inherit; }
.l-mob { display: none; }
@media (max-width: 860px) { .d-top { position: relative; } .d-lato { top: 0; } }
@media (max-width: 640px) {
  .l-desk { display: none; } .l-mob { display: inline; }
  .ricerca__f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .ricerca__f > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .ricerca__f > .campo:nth-child(1) { grid-column: 1 !important; }
  .ricerca__f > .campo:nth-child(3) { grid-column: 2 !important; }
  .ricerca__f > .campo--n { grid-column: auto !important; }
  .ricerca__scambia { display: none !important; }
  .c-mappa { order: -1; }
}
@media (max-width: 640px) {
  .modulo .c3:has(.campo--largo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modulo .c3 .campo--largo { grid-column: 1 / -1; }
}