/* Control Center — design system (chiaro/scuro, mobile first) */
:root {
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --r-s: 8px; --r: 14px; --r-l: 20px;
  --ombra: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 16px rgb(15 23 42 / 6%);
  --ombra-alta: 0 10px 40px rgb(15 23 42 / 18%);
  --laterale: 256px;

  --sfondo: #f4f6fb; --sfondo-2: #eef1f8; --superficie: #ffffff; --superficie-2: #f8fafc;
  --bordo: #e3e8f2; --bordo-forte: #cfd7e6;
  --testo: #0f172a; --testo-2: #475569; --tenue: #7c8aa3;
  --primario: #2071b3; --primario-2: #17578c; --primario-tenue: #e6f0f9;
  --ok: #059669; --ok-tenue: #dcfce7; --ko: #dc2626; --ko-tenue: #fee2e2;
  --warn: #d97706; --warn-tenue: #fef3c7; --info: #0284c7; --info-tenue: #e0f2fe;
  --muted-tenue: #eef1f6;
  --laterale-sfondo: #0b1220; --laterale-testo: #c7d0e0; --laterale-attiva: #1e2a44;
  --wa-sfondo: #efe7dd; --wa-bolla: #ffffff;
  color-scheme: light;
}
:root[data-tema="scuro"] {
  --sfondo: #0b1120; --sfondo-2: #0f172a; --superficie: #111a2e; --superficie-2: #0f182b;
  --bordo: #1f2b44; --bordo-forte: #2b3a5a;
  --testo: #e6ebf5; --testo-2: #a9b5cc; --tenue: #7686a3;
  --primario: #4fa3e6; --primario-2: #74b8ee; --primario-tenue: #10263d;
  --ok: #34d399; --ok-tenue: #0c2f25; --ko: #f87171; --ko-tenue: #3a1518;
  --warn: #fbbf24; --warn-tenue: #3a2a0c; --info: #38bdf8; --info-tenue: #0b2a3d;
  --muted-tenue: #1a2440;
  --laterale-sfondo: #070c17; --laterale-attiva: #16213a;
  --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 18px rgb(0 0 0 / 25%);
  --wa-sfondo: #0b141a; --wa-bolla: #1f2c34;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --sfondo: #0b1120; --sfondo-2: #0f172a; --superficie: #111a2e; --superficie-2: #0f182b;
    --bordo: #1f2b44; --bordo-forte: #2b3a5a;
    --testo: #e6ebf5; --testo-2: #a9b5cc; --tenue: #7686a3;
    --primario: #4fa3e6; --primario-2: #74b8ee; --primario-tenue: #10263d;
    --ok: #34d399; --ok-tenue: #0c2f25; --ko: #f87171; --ko-tenue: #3a1518;
    --warn: #fbbf24; --warn-tenue: #3a2a0c; --info: #38bdf8; --info-tenue: #0b2a3d;
    --muted-tenue: #1a2440;
    --laterale-sfondo: #070c17; --laterale-attiva: #16213a;
    --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 18px rgb(0 0 0 / 25%);
    --wa-sfondo: #0b141a; --wa-bolla: #1f2c34;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--testo); background: var(--sfondo);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 14px; font-weight: 650; }
p { margin: 0 0 8px; }
small { font-size: 12.5px; }
b { font-weight: 650; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; } .ic-s { width: 16px; height: 16px; flex: none; } .ic-xs { width: 13px; height: 13px; flex: none; vertical-align: -2px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.tenue { color: var(--tenue); }
.testo-ok { color: var(--ok); } .testo-ko { color: var(--ko); } .testo-warn { color: var(--warn); }
.nowrap { white-space: nowrap; } .destra { text-align: right; } .spingi { margin-left: auto; }
.maiuscolo { text-transform: uppercase; }

/* ---------- guscio ---------- */
.guscio { display: flex; min-height: 100vh; }
.laterale { position: fixed; inset: 0 auto 0 0; width: var(--laterale); background: var(--laterale-sfondo); color: var(--laterale-testo);
  display: flex; flex-direction: column; z-index: 40; padding: 18px 12px; }
.marchio { display: flex; align-items: center; gap: 12px; color: #fff; padding: 6px 10px 18px; text-decoration: none !important; }
.marchio b { display: block; font-size: 17px; font-weight: 800; font-style: italic; letter-spacing: .2px; } .marchio small { color: #8796b3; }
.marchio-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: url("../icone/hermes.svg") center / cover no-repeat; box-shadow: 0 6px 20px rgb(32 113 179 / 35%); }
.marchio-logo-grande { width: 64px; height: 64px; border-radius: 18px; } .marchio-logo-grande .ic { width: 32px; height: 32px; }
.navigazione { flex: 1; overflow-y: auto; }
.nav-gruppo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #5f6f8f; padding: 14px 12px 6px; }
.nav-voce { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--laterale-testo);
  font-weight: 500; text-decoration: none !important; transition: background .15s, color .15s; }
.nav-voce:hover { background: rgb(255 255 255 / 5%); color: #fff; }
.nav-voce.attiva { background: var(--laterale-attiva); color: #fff; box-shadow: inset 3px 0 0 #4f8cff; }
.nav-conta { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--ko); color: #fff;
  border-radius: 999px; padding: 1px 8px; }
.laterale-piede { border-top: 1px solid rgb(255 255 255 / 7%); padding-top: 12px; }
.profilo { display: flex; align-items: center; gap: 10px; padding: 6px 6px; }
.profilo-testo { flex: 1; min-width: 0; } .profilo-testo b { display: block; color: #fff; font-size: 13.5px; } .profilo-testo small { color: #8796b3; }
.profilo .icona-btn { color: #8796b3; } .profilo .icona-btn:hover { color: #fff; background: rgb(255 255 255 / 7%); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, #3a8fd4, #17578c); color: #fff; }
.avatar-s { width: 30px; height: 30px; font-size: 11.5px; }

.principale { flex: 1; min-width: 0; margin-left: var(--laterale); display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 14px 28px;
  background: color-mix(in srgb, var(--sfondo) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo); }
.barra-titolo { flex: 1; min-width: 0; }
.barra-titolo h1 { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-titolo small { color: var(--tenue); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-azioni { display: flex; align-items: center; gap: 8px; }
.aggiornato { display: flex; align-items: center; gap: 6px; color: var(--tenue); font-size: 13px; }
.stato-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none !important; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-2); }
.stato-pill .puntino { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tenue); }
.stato-pill.ko .puntino { background: var(--ko); box-shadow: 0 0 0 4px var(--ko-tenue); animation: pulsa 1.6s infinite; }
.icona-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent;
  color: var(--testo-2); cursor: pointer; transition: background .15s; }
.icona-btn:hover { background: var(--sfondo-2); color: var(--testo); }
.solo-mobile { display: none; }
:root[data-tema="scuro"] .solo-chiaro, :root:not([data-tema="scuro"]) .solo-scuro { display: none; }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] .solo-chiaro { display: none; } :root[data-tema="auto"] .solo-scuro { display: inline; } }

.contenuto { padding: 24px 28px 48px; max-width: 1440px; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.contenuto.htmx-request { opacity: 1; }
.velo { display: none; }
.barra-basso { display: none; }

/* ---------- componenti ---------- */
.scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-l); padding: 20px; box-shadow: var(--ombra);
  display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scheda-piatta { padding: 6px; }
.scheda-evidenza { background: linear-gradient(180deg, var(--primario-tenue), var(--superficie) 70%); }
.scheda-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--bordo)); }
.scheda-ko { border-color: color-mix(in srgb, var(--ko) 40%, var(--bordo)); background: linear-gradient(180deg, var(--ko-tenue), var(--superficie) 80%); }
.scheda-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scheda-testa .grande { font-size: 26px; font-weight: 750; }
.titolo-grande { font-size: 22px; }
.sotto-titolo { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.colonne { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.colonna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.indietro { display: inline-flex; align-items: center; gap: 6px; color: var(--testo-2); font-weight: 600; font-size: 14px; }
.altri { display: block; text-align: center; padding: 6px; font-size: 13.5px; font-weight: 600; }

.griglia-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.griglia-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.griglia-kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; border-radius: var(--r);
  background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra); color: var(--testo); text-decoration: none !important;
  transition: transform .15s, box-shadow .15s; overflow: hidden; min-width: 0; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bordo-forte); }
.kpi-ok::after { background: var(--ok); } .kpi-ko::after { background: var(--ko); } .kpi-warn::after { background: var(--warn); } .kpi-info::after { background: var(--info); }
.kpi-icona { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sfondo-2); color: var(--testo-2); }
.kpi-ok .kpi-icona { background: var(--ok-tenue); color: var(--ok); } .kpi-ko .kpi-icona { background: var(--ko-tenue); color: var(--ko); }
.kpi-warn .kpi-icona { background: var(--warn-tenue); color: var(--warn); } .kpi-info .kpi-icona { background: var(--info-tenue); color: var(--info); }
.kpi-icona .ic { width: 18px; height: 18px; }
.kpi-titolo { font-size: 12.5px; color: var(--testo-2); font-weight: 600; padding-right: 40px; }
.kpi-valore { font-size: 30px; font-weight: 760; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-sotto { font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  white-space: nowrap; line-height: 1.35; }
.badge-ok { background: var(--ok-tenue); color: var(--ok); } .badge-ko { background: var(--ko-tenue); color: var(--ko); }
.badge-warn { background: var(--warn-tenue); color: var(--warn); } .badge-info { background: var(--info-tenue); color: var(--info); }
.badge-muted { background: var(--muted-tenue); color: var(--testo-2); }
.tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--info); }

.chips, .filtri-chip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--bordo); color: var(--testo-2); font-size: 13px; font-weight: 550; text-decoration: none !important; }
a.chip:hover { border-color: var(--bordo-forte); color: var(--testo); }
.chip b { color: var(--testo); }
.chip-attivo { background: var(--primario); border-color: var(--primario); color: #fff !important; } .chip-attivo b { color: #fff; }
.chip-ko { border-color: color-mix(in srgb, var(--ko) 40%, var(--bordo)); color: var(--ko); }
.chip-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--bordo)); color: var(--warn); }

.avanzamento { display: flex; height: 10px; border-radius: 999px; background: var(--bordo); overflow: hidden; }
.seg { display: block; height: 100%; transition: width .5s ease; }
.seg-ok { background: linear-gradient(90deg, #10b981, #059669); } .seg-ko { background: #ef4444; } .seg-warn { background: #f59e0b; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--testo-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pallino { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pallino.ok { background: #10b981; } .pallino.ko { background: #ef4444; } .pallino.warn { background: #f59e0b; } .pallino.aperta { background: transparent; border: 2px solid var(--info); }

.elenco { display: flex; flex-direction: column; }
.riga-consegna { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; color: var(--testo);
  text-decoration: none !important; transition: background .12s; }
.riga-consegna + .riga-consegna { border-top: 1px solid var(--bordo); }
.riga-consegna:hover { background: var(--superficie-2); }
.rc-stato { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--bordo-forte); }
.esito-evasa { background: var(--ok); } .esito-fallita, .esito-respinta { background: var(--ko); } .esito-misto { background: var(--warn); }
.esito-aperta { background: transparent; border: 2px solid var(--info); } .esito-annullata { background: var(--tenue); }
.liv-2 .rc-stato { border-color: var(--ko); background: var(--ko); animation: pulsa 1.6s infinite; } .liv-1 .rc-stato { border-color: var(--warn); }
.rc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-titolo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-dettagli { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-destra { display: flex; align-items: center; gap: 8px; flex: none; }
.fascia { font-size: 12.5px; font-weight: 650; color: var(--testo-2); background: var(--sfondo-2); padding: 3px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.targa { font-family: var(--mono); font-weight: 750; letter-spacing: .04em; background: var(--superficie); border: 1.5px solid var(--testo);
  border-left: 6px solid #1d4ed8; border-radius: 6px; padding: 1px 7px; font-size: 12.5px; color: var(--testo); display: inline-block; }
.targa-grande { font-size: 15px; padding: 3px 10px; }
.targa-enorme { font-size: 22px; padding: 4px 14px; }
.riga { display: flex; align-items: center; gap: 12px; padding: 10px 6px; color: var(--testo); text-decoration: none !important; }
.riga + .riga { border-top: 1px solid var(--bordo); }
.riga > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
a.riga:hover { background: var(--superficie-2); border-radius: 10px; }
.riga-tenue { opacity: .62; }
.riga-alta { align-items: flex-start; }
.stack-destra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.lista-semplice { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-semplice li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lista-semplice .ic-s { align-self: center; }
.registro li { flex-direction: column; gap: 0; border-bottom: 1px solid var(--bordo); padding-bottom: 6px; }
.lista-orari { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-orari li { display: flex; align-items: center; gap: 12px; }
.orario { font-family: var(--mono); font-weight: 700; background: var(--primario-tenue); color: var(--primario); padding: 3px 9px; border-radius: 8px; font-size: 13px; }

.vuoto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 12px; color: var(--testo-2); }
.vuoto b { color: var(--testo); } .vuoto p { color: var(--tenue); max-width: 460px; margin: 0; font-size: 13.5px; }
.vuoto-icona { width: 36px; height: 36px; color: var(--tenue); background: var(--sfondo-2); padding: 8px; border-radius: 12px; }
.vuoto-grande { padding: 60px 20px; background: var(--superficie); border: 1px dashed var(--bordo-forte); border-radius: var(--r-l); }
.vuoto-grande .vuoto-icona { width: 56px; height: 56px; padding: 12px; }

.mini-furgoni { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mini-furgone { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--bordo);
  background: var(--superficie-2); color: var(--testo); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.mini-furgone:hover { border-color: var(--primario); transform: translateY(-1px); }
.mf-testa { display: flex; justify-content: space-between; align-items: center; }
.mf-capo { font-size: 12.5px; color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-num { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.mini-furgone .avanzamento { height: 6px; }

.griglia-furgoni { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.furgone { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-l); background: var(--superficie);
  border: 1px solid var(--bordo); box-shadow: var(--ombra); color: var(--testo); text-decoration: none !important; transition: transform .15s, box-shadow .15s; }
.furgone:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.furgone-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.furgone-capo { display: flex; align-items: center; gap: 10px; } .furgone-capo > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.furgone-numeri { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.furgone-numeri span { display: flex; flex-direction: column; } .furgone-numeri b { font-size: 19px; font-variant-numeric: tabular-nums; }
.furgone-numeri small { color: var(--tenue); font-size: 11.5px; }
.furgone-prossima { font-size: 13px; color: var(--testo-2); border-top: 1px solid var(--bordo); padding-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dati-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
.dati-griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dati-griglia > div { display: flex; flex-direction: column; min-width: 0; }
.dati-griglia small { color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.dati-griglia b { overflow-wrap: anywhere; }

.griglia-ritardi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ritardo { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--superficie);
  border: 1px solid var(--bordo); border-left: 5px solid var(--warn); box-shadow: var(--ombra); }
.ritardo.liv-2 { border-left-color: var(--ko); }
.ritardo-testa { display: flex; gap: 8px; flex-wrap: wrap; }
.ritardo-cliente { display: flex; flex-direction: column; color: var(--testo); } .ritardo-cliente b { font-size: 16px; }
.ritardo-dati { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--testo-2); }
.ritardo-dati span { display: flex; align-items: center; gap: 6px; }

.griglia-pv { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pv-scheda { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra); }
.pv-pausa { border-color: color-mix(in srgb, var(--warn) 45%, var(--bordo)); }
.pv-testa { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .pv-testa > span { display: flex; flex-direction: column; }
.pv-gruppo { font-size: 12.5px; color: var(--testo-2); display: flex; align-items: center; gap: 6px; }
.pv-fallite summary { cursor: pointer; color: var(--ko); font-weight: 600; font-size: 13.5px; }
.pv-fallite ul { margin-top: 8px; font-size: 13.5px; }
.pv-azioni { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--bordo); padding-top: 12px; }

.griglia-automazioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.automazione { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra); }
.automazione.spenta { opacity: .72; }
.automazione-testa { display: flex; align-items: center; gap: 12px; }
.automazione-icona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primario-tenue); color: var(--primario); flex: none; }
.automazione-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.automazione-funzione { color: var(--testo-2); font-size: 13.5px; margin: 0; }
.esecuzioni { display: flex; gap: 4px; }
.es { width: 16px; height: 16px; border-radius: 5px; background: var(--bordo-forte); }
.es-success { background: #10b981; } .es-error, .es-crashed { background: #ef4444; } .es-running, .es-waiting { background: #38bdf8; }

.azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.azioni form, .pv-azioni form { margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 650; font-size: 14px; cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-s { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn-primario { background: var(--primario); color: #fff; } .btn-primario:hover { background: var(--primario-2); }
.btn-leggero { background: var(--superficie); border-color: var(--bordo); color: var(--testo); } .btn-leggero:hover { border-color: var(--bordo-forte); background: var(--superficie-2); }
.btn-pericolo { background: var(--ko-tenue); color: var(--ko); } .btn-pericolo:hover { border-color: var(--ko); }
.btn-largo { width: 100%; padding: 12px 16px; }

/* moduli */
.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtri select, .filtri input[type=date], .campo, .etichetta input, .etichetta select, .etichetta textarea, .modulo-riga input, .modulo-riga select {
  height: 40px; border-radius: 11px; border: 1px solid var(--bordo); background: var(--superficie); padding: 0 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.etichetta textarea { height: auto; padding: 10px 12px; resize: vertical; }
.filtri select:focus, .campo:focus-within, .etichetta input:focus, .etichetta select:focus, .etichetta textarea:focus {
  border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 18%, transparent); }
.campo { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); }
.campo input { border: 0; outline: none; background: transparent; height: 100%; min-width: 0; flex: 1; color: var(--testo); }
.campo-cerca { flex: 1 1 280px; }
.etichetta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.etichetta-riga { flex-direction: row; align-items: center; justify-content: space-between; font-weight: 500; }
.etichetta-riga input { width: 90px; }
.interruttore { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 550; color: var(--testo-2); cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore span { width: 40px; height: 24px; border-radius: 999px; background: var(--bordo-forte); position: relative; transition: background .2s; flex: none; }
.interruttore span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .2s; }
.interruttore input:checked + span { background: var(--primario); } .interruttore input:checked + span::after { transform: translateX(16px); }
.interruttore input:focus-visible + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 25%, transparent); }
.modulo-riga { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--bordo); }
.modulo-riga .etichetta { flex: 1 1 160px; }
.modulo-colonne { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.modulo-colonne fieldset { border: 1px solid var(--bordo); border-radius: var(--r); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.modulo-colonne legend { font-size: 13px; font-weight: 650; color: var(--testo-2); padding: 0 6px; }
.modulo-azioni { display: flex; gap: 8px; align-items: center; }
.interruttore-grande { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px; border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--bordo); }
.interruttore-grande > div { display: flex; flex-direction: column; }

/* tabelle */
.tabella-scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 11px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover td { background: var(--superficie-2); }
.tabella tr[data-href] { cursor: pointer; }
.tabella-compatta td { padding: 7px 4px; } .tabella .totale td { border-top: 2px solid var(--bordo-forte); }
.cella-testo { max-width: 520px; } .cella-testo a { color: var(--testo); }
.paginazione { display: flex; align-items: center; gap: 10px; padding: 12px; flex-wrap: wrap; }
.paginazione .tenue { margin-right: auto; }

/* chat / bolle WhatsApp */
.chat { padding: 0; overflow: hidden; gap: 0; }
.chat-testa { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bordo); }
.chat-testa > span:last-child { display: flex; flex-direction: column; }
.chat-corpo { background: var(--wa-sfondo); padding: 22px 18px; min-height: 160px; display: flex; flex-direction: column; align-items: flex-end;
  background-image: radial-gradient(color-mix(in srgb, var(--testo) 5%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.bolla { background: #d9fdd3; color: #111b21; border-radius: 12px 0 12px 12px; padding: 10px 12px; box-shadow: 0 1px 1px rgb(0 0 0 / 12%); max-width: 520px;
  font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; position: relative; align-self: flex-end; }
:root[data-tema="scuro"] .bolla { background: #005c4b; color: #e9edef; }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] .bolla { background: #005c4b; color: #e9edef; } }
.bolla pre { font-family: var(--mono); font-size: 12px; margin: 6px 0; white-space: pre; overflow-x: auto; background: rgb(0 0 0 / 6%); padding: 6px 8px; border-radius: 6px; }
.bolla-compatta { font-size: 13px; max-height: 180px; overflow: hidden; align-self: stretch; max-width: none; border-radius: 10px; }
.bolla-ora { font-size: 11.5px; color: var(--tenue); margin-top: 4px; }
.messaggio-mini { display: flex; flex-direction: column; gap: 6px; color: var(--testo); text-decoration: none !important; }
.messaggio-mini + .messaggio-mini { margin-top: 12px; }
.codice { font-family: var(--mono); font-size: 12px; background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 10px; padding: 12px; overflow: auto; max-height: 360px; margin: 0; }

.feed { display: flex; flex-direction: column; }
.feed-voce { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; color: var(--testo); text-decoration: none !important; border-radius: 10px; }
.feed-voce + .feed-voce { border-top: 1px solid var(--bordo); }
.feed-voce:hover { background: var(--superficie-2); }
.feed-testa { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; } .feed-testa .tenue { font-size: 12px; white-space: nowrap; }
.feed-testo { font-size: 13px; color: var(--testo-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* statistiche */
.grafico { position: relative; height: 260px; }
.barre { display: flex; flex-direction: column; gap: 10px; }
.barra-voce { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 13px; }
.barra-etichetta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--testo-2); }
.barra-traccia { height: 8px; background: var(--sfondo-2); border-radius: 999px; overflow: hidden; }
.barra-valore { display: block; height: 100%; background: linear-gradient(90deg, #f87171, #dc2626); border-radius: 999px; }
.barra-voce b { text-align: right; font-variant-numeric: tabular-nums; }

/* stato sistema */
.griglia-stato { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stato-voce { gap: 8px; } .stato-voce h3 { display: flex; align-items: center; gap: 8px; color: var(--testo-2); }
.stato-voce > b { font-size: 18px; }
.riga-stato { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.riga-stato > span { display: flex; flex-direction: column; }
details summary { cursor: pointer; font-size: 13px; color: var(--testo-2); font-weight: 600; }

/* schede interne (configurazione) */
.schede-interne { display: flex; flex-direction: column; gap: 16px; }
.schede-nav { display: flex; gap: 6px; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--bordo); padding: 6px; border-radius: 14px; align-self: flex-start; box-shadow: var(--ombra); }
.schede-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; color: var(--testo-2); font-weight: 600; font-size: 14px; text-decoration: none !important; }
.schede-nav a.attiva { background: var(--primario); color: #fff; }

/* avvisi e toast */
.avviso { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.avviso-ko { background: var(--ko-tenue); color: var(--ko); } .avviso-warn { background: var(--warn-tenue); color: var(--warn); }
.avviso-sistema { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ko-tenue); color: var(--ko);
  font-weight: 600; font-size: 14px; text-decoration: none !important; border: 1px solid color-mix(in srgb, var(--ko) 30%, transparent); }
.avviso-sistema span { flex: 1; }
.toasts { position: fixed; top: 76px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo);
  box-shadow: var(--ombra-alta); font-weight: 600; font-size: 14px; animation: entra .3s ease, esce .4s ease 4.5s forwards; max-width: 420px; }
.toast-ok .ic { color: var(--ok); } .toast-ko .ic { color: var(--ko); }

/* finestre */
.finestra { border: 0; border-radius: var(--r-l); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-alta); }
.finestra::backdrop { background: rgb(2 6 23 / 55%); backdrop-filter: blur(3px); }
.finestra form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.azioni-finestra { display: flex; justify-content: flex-end; gap: 10px; }

/* login */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 10% -10%, rgb(32 113 179 / 24%), transparent 60%),
              radial-gradient(900px 500px at 110% 110%, rgb(155 155 155 / 22%), transparent 60%), var(--sfondo); }
.login { width: min(420px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login-marchio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.login-marchio h1 { font-size: 30px; font-weight: 800; font-style: italic; color: var(--primario); } .login-marchio p { color: var(--tenue); margin: 0; }
.login-scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 22px; padding: 26px; box-shadow: var(--ombra-alta); display: flex; flex-direction: column; gap: 16px; }
.login-scheda input { height: 46px; font-size: 16px; }
.login-piede { text-align: center; color: var(--tenue); font-size: 12.5px; margin: 0; }

@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ko) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
@keyframes esce { to { opacity: 0; transform: translateY(-8px); } }
.htmx-swapping { opacity: .6; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .griglia-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia-stato { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .colonne { grid-template-columns: minmax(0, 1fr); }
  .dati-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-kpi-5, .griglia-kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --laterale: 0px; }
  .laterale { width: 280px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--ombra-alta); }
  body.menu-aperto .laterale { transform: none; }
  /* menu aperto sopra la barra in basso (che copriva nome, notifiche ed Esci) e lontano dal bordo del telefono */
  .laterale { z-index: 50; padding-bottom: calc(18px + env(safe-area-inset-bottom)); padding-top: max(18px, env(safe-area-inset-top)); }
  .laterale-piede .profilo { padding: 10px 6px; } .laterale-piede .icona-btn { width: 44px; height: 44px; }
  body.menu-aperto .velo { display: block; position: fixed; inset: 0; background: rgb(2 6 23 / 50%); z-index: 35; }
  .solo-mobile { display: inline-grid; } .nascondi-mobile { display: none !important; }
  .barra { padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); gap: 6px; }
  .barra-titolo h1 { font-size: 18px; }
  .contenuto { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  .scheda { padding: 16px; border-radius: 16px; }
  .griglia-kpi, .griglia-kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px; } .kpi-valore { font-size: 25px; } .kpi-icona { width: 28px; height: 28px; right: 10px; top: 10px; }
  .griglia-furgoni, .griglia-ritardi, .griglia-pv, .griglia-automazioni { grid-template-columns: minmax(0, 1fr); }
  .griglia-stato { grid-template-columns: minmax(0, 1fr); }
  .barra-basso { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--superficie);
    border-top: 1px solid var(--bordo); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgb(15 23 42 / 8%); }
  .barra-basso a, .barra-basso button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
    color: var(--tenue); text-decoration: none !important; background: none; border: 0; padding: 6px 0; cursor: pointer; }
  .barra-basso .attiva { color: var(--primario); }
  .toasts { left: 12px; right: 12px; top: 70px; } .toast { max-width: none; }
  .filtri { gap: 8px; } .filtri select, .filtri input[type=date] { flex: 1 1 140px; min-width: 0; }
  .tabella-notifiche thead { display: none; }
  .tabella-notifiche tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 8px; border-bottom: 1px solid var(--bordo); }
  .tabella-notifiche td { border: 0; padding: 0; }
  .tabella-notifiche td:nth-child(1) { order: 2; font-size: 12px; color: var(--tenue); text-align: right; }
  .tabella-notifiche td:nth-child(2) { display: none; }
  .tabella-notifiche td:nth-child(3) { order: 1; }
  .tabella-notifiche td:nth-child(4) { order: 3; grid-column: 1 / -1; font-size: 13px; }
  .tabella-notifiche td:nth-child(5) { order: 4; }
  .furgone-numeri b { font-size: 17px; }
  .riga-consegna { padding: 10px 4px; } .rc-destra { flex-direction: column; align-items: flex-end; gap: 4px; }
  .schede-nav { align-self: stretch; overflow-x: auto; flex-wrap: nowrap; } .schede-nav a { white-space: nowrap; }
}
@media (max-width: 420px) { .griglia-kpi, .griglia-kpi-3, .griglia-kpi-4, .griglia-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-sotto { white-space: normal; } }
@media print { .laterale, .barra, .barra-basso { display: none; } .principale { margin: 0; } }

/* storico */
.avviso-storico { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px;
  background: var(--warn-tenue); color: var(--testo); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); font-size: 14px; }
.avviso-storico > .ic { color: var(--warn); } .avviso-storico > span { flex: 1; min-width: 200px; } .avviso-storico form { margin: 0; }
.storico-mese { display: flex; flex-direction: column; gap: 12px; }
.storico-mese h2 { text-transform: capitalize; }
.griglia-giorni { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.giorno { margin: 0; }
.giorno button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r);
  background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra); cursor: pointer; color: var(--testo); font: inherit;
  transition: transform .15s, border-color .15s; }
.giorno button:hover { transform: translateY(-2px); border-color: var(--primario); }
.giorno-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.giorno-testa b { font-size: 15px; text-transform: capitalize; }
.giorno-numeri { display: flex; gap: 12px; font-size: 13px; color: var(--testo-2); flex-wrap: wrap; }
.giorno-numeri b { color: var(--testo); font-variant-numeric: tabular-nums; }
.vai-giorno { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.vai-giorno input { height: 40px; border-radius: 11px; border: 1px solid var(--bordo); background: var(--superficie); padding: 0 12px; }
.scheda-link .scheda-testa > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.scheda-link .scheda-testa b { display: inline-flex; align-items: center; gap: 6px; }
.azioni-riga { display: flex; gap: 8px; flex-wrap: wrap; }
.furgone-orari { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--bordo); }
.furgone-orari span { display: flex; align-items: center; gap: 6px; }
.griglia-orari td, .griglia-orari th { text-align: center; white-space: nowrap; }
.griglia-orari td:first-child, .griglia-orari th:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie); }
.orario-cella { font-variant-numeric: tabular-nums; font-size: 12.5px; line-height: 1.25; }
.orario-cella small { display: block; color: var(--tenue); font-size: 11px; }
.contrassegni-tile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 10px; }
.ctile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-s); border: 1px solid var(--bordo); background: var(--superficie-2); }
.ctile small { color: var(--testo-2); font-size: 12px; } .ctile b { font-size: 20px; font-variant-numeric: tabular-nums; } .ctile span { font-size: 12px; }
.ctile-da_incassare { border-left: 4px solid var(--info); } .ctile-incassati { border-left: 4px solid var(--ok); } .ctile-falliti { border-left: 4px solid var(--ko); }
.sottotitolo-scheda { font-size: 13px; margin: 12px 0 4px; color: var(--testo-2); }
@media (max-width: 700px) { .contrassegni-tile { grid-template-columns: 1fr; } }

/* Andamento: punteggio capisquadra */
.punteggio { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 6px; font-weight: 600; text-align: center; }
.punteggio.p-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.punteggio.p-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.punteggio.p-ko { background: color-mix(in srgb, var(--ko) 16%, transparent); color: var(--ko); }

/* Utenti e permessi */
.utente-scheda + .utente-scheda { border-top: 1px solid var(--bordo); }
.utente-scheda > summary { cursor: pointer; list-style: none; }
.utente-scheda > summary::-webkit-details-marker { display: none; }
.utente-scheda .riga-testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.utente-spento { opacity: .6; }
.utente-corpo { display: flex; flex-direction: column; gap: 18px; padding: 6px 6px 18px 50px; }
.utente-corpo h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; }
.permessi-gruppo { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.permessi-gruppo > small { flex-basis: 100%; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
@media (max-width: 700px) { .utente-corpo { padding-left: 6px; } }

/* Strumenti aperti dentro Hermes (porta.py) */
.contenuto.contenuto-cornice { padding: 0; max-width: none; gap: 0; display: flex; flex-direction: column; }
.cornice-strumento { flex: 1; width: 100%; min-height: calc(100vh - 64px); border: 0; background: #fff; display: block; }
@media (max-width: 900px) { .contenuto.contenuto-cornice { padding: 0 0 calc(64px + env(safe-area-inset-bottom)); } .cornice-strumento { min-height: calc(100vh - 128px); } }

/* Le mie notifiche */
.push-stato { margin: 0 0 10px; }
.push-azioni { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.push-guida { margin: 12px 0; padding: 10px 12px; border-radius: var(--r); background: var(--sfondo-2, rgba(23,87,140,.08)); font-size: 13px; }
.interruttore-desc { display: flex; align-items: flex-start; }
.interruttore-testo { display: flex; flex-direction: column; gap: 2px; font-style: normal; min-width: 0; }
.interruttore-testo small { font-weight: 400; }
a.profilo-testo { color: inherit; text-decoration: none; }

/* Primo accesso */
.login-benvenuto { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.login-esci { display: flex; justify-content: center; margin-top: 10px; }
.campi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* Cerca ordine */
.cerca-ordine { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.campo-grande { height: 48px; padding: 0 14px; border: 1px solid var(--bordo-forte); border-radius: var(--r); background: var(--superficie); font-size: 16px; }
.riga-link { text-decoration: none; color: inherit; } .riga-link:hover { background: var(--sfondo-2); border-radius: 10px; }
.riga-azioni-ordine { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ordine-ko { border-color: color-mix(in srgb, var(--ko) 45%, var(--bordo)); background: linear-gradient(180deg, var(--ko-tenue), var(--superficie) 75%); }
.ordine-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--bordo)); }
.ordine-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--bordo)); }
.ordine-consiglio { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--bordo); font-size: 14px; }
.ordine-punti { margin-top: 12px; font-weight: 600; font-size: 14px; }
.dati-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nota-piccola { font-size: 12.5px; margin: 10px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.chip { background: var(--primario-tenue); color: var(--primario); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.scelte-modello { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scelta { display: flex; gap: 8px; align-items: center; border: 1px solid var(--bordo); border-radius: 10px; padding: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.scelta:has(input:checked) { border-color: var(--primario); background: var(--primario-tenue); }
.cronologia { list-style: none; margin: 0; padding: 0 0 0 6px; }
.evento { position: relative; display: flex; gap: 12px; padding: 0 0 14px 14px; border-left: 2px solid var(--bordo); }
.evento:last-child { border-left-color: transparent; }
.evento-punto { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bordo-forte); border: 2px solid var(--superficie); }
.evento-programmata .evento-punto, .evento-evasa .evento-punto { background: var(--ok); }
.evento-da-richiamare .evento-punto, .evento-ricontattare .evento-punto { background: var(--warn); }
.evento-fallita .evento-punto, .evento-respinta .evento-punto { background: var(--ko); }
.campi-cambiati { font-size: 12.5px; gap: 3px; margin-top: 4px; }
.avviso-warn { background: var(--warn-tenue, #fdf0d6); color: var(--warn, #b8740a); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
@media (max-width: 860px) { .dati-griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scelte-modello { grid-template-columns: 1fr; } }
.riga-link .riga-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.riga-link > .badge, .riga > .badge { flex: none; }

/* Ordini da gestire e Helpdesk */
.catena-scelta select { min-width: 280px; }
.kpi-attivo { outline: 2px solid var(--primario); outline-offset: -2px; }
.azioni-multiple { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-end; position: sticky; top: 64px; z-index: 5; }
.azioni-multiple .etichetta { flex: 1 1 180px; }
.tabella-ordini tr.livello-ko td:first-child { box-shadow: inset 3px 0 0 var(--ko); }
.tabella-ordini tr.livello-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.schede-vista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scheda-vista { padding: 8px 14px; border-radius: 10px; color: var(--testo-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.scheda-vista.attiva { background: var(--primario-tenue); color: var(--primario); }
.scheda-vista em { font-style: normal; font-size: 12px; background: var(--sfondo-2); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.cerca-mini { margin-left: auto; } .cerca-mini input { height: 38px; border: 1px solid var(--bordo-forte); border-radius: 10px; padding: 0 12px; min-width: 240px; background: var(--superficie); color: var(--testo); }
.ticket-riga.ticket-nuovo b { color: var(--primario); }
.ticket-anteprima { display: block; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bolla-in { align-self: flex-start; background: #ffffff; border-radius: 0 12px 12px 12px; }
.bolla-ora-in { align-self: flex-start; }
.bolla { white-space: pre-wrap; }
@media (max-width: 860px) { .cerca-mini { margin-left: 0; width: 100%; } .cerca-mini input { width: 100%; min-width: 0; } .azioni-multiple { position: static; } }

/* Ordini da gestire su telefono: niente più largo dello schermo, righe a schede */
@media (max-width: 860px) {
  .catena-scelta, .catena-scelta select { width: 100%; min-width: 0; }
  .azioni-multiple .etichetta, .azioni-multiple .btn { flex: 1 1 100%; }
  .tabella-ordini thead { display: none; }
  .tabella-ordini, .tabella-ordini tbody, .tabella-ordini tr { display: block; width: 100%; }
  .tabella-ordini tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 6px; border-bottom: 1px solid var(--bordo); }
  .tabella-ordini td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabella-ordini td:nth-child(1) { grid-row: 1 / span 3; padding-top: 2px; } .tabella-ordini td:nth-child(1) input { width: 22px; height: 22px; }
  .tabella-ordini td:nth-child(2) { grid-column: 2; }
  .tabella-ordini td:nth-child(3) { grid-column: 3; text-align: right; }
  .tabella-ordini td:nth-child(4) { grid-column: 3; text-align: right; }
  .tabella-ordini td:nth-child(5) { grid-column: 2; }
  .tabella-ordini td:nth-child(6) { grid-column: 2 / 4; color: var(--testo-2); }
  .tabella-ordini td:nth-child(7) { grid-column: 3; grid-row: 3; text-align: right; }
  .tabella-ordini tr.livello-ko td:first-child, .tabella-ordini tr.livello-warn td:first-child { box-shadow: none; }
  .tabella-ordini tr.livello-ko { box-shadow: inset 3px 0 0 var(--ko); } .tabella-ordini tr.livello-warn { box-shadow: inset 3px 0 0 var(--warn); }
  .griglia-kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Avvisi giri di oggi */
.giri-avviso { display: flex; flex-direction: column; gap: 6px; }
.giro-avviso { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 12px; }
.giro-avviso summary { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.targa-mini { font-family: var(--mono); }
.consegne-avviso { margin: 10px 0 4px 6px; font-size: 13.5px; } .consegne-avviso label { display: flex; gap: 8px; align-items: baseline; }
.scelte-motivo { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gruppi-targa { margin: 6px 0 4px; }
.gruppi-targa input { width: 9em; text-transform: uppercase; }

/* Campagna: menu «Altro», passi guidati, esecuzione su TransitPoint per gruppi (19/10/2026) */
.menu-azioni { position: relative; }
.menu-azioni > summary { list-style: none; cursor: pointer; }
.menu-azioni > summary::-webkit-details-marker { display: none; }
.menu-azioni-voci { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 6px; min-width: 240px;
  padding: 10px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-alta); }
.menu-azioni-voci form, .menu-azioni-voci .btn { width: 100%; justify-content: flex-start; }
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: passo; }
.passi li { counter-increment: passo; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: baseline; padding: 8px 10px;
  border: 1px solid var(--bordo); border-radius: var(--r-s); }
.passi li::before { content: counter(passo); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--muted-tenue); color: var(--tenue); }
.passi li.attuale { border-color: var(--primario); background: var(--primario-tenue); }
.passi li.attuale::before { background: var(--primario); color: #fff; }
.passi li.fatto::before { content: "✓"; background: var(--ok-tenue); color: var(--ok); }
.passi li span { color: var(--tenue); font-size: 13px; }
.opzioni-tp { display: grid; gap: 10px; }
.scelta span small { display: block; font-weight: 400; color: var(--tenue); font-size: 12px; }
.gruppi-tp { display: grid; gap: 8px; }
.gruppo-tp { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(70px, .6fr) minmax(120px, 1.2fr) minmax(170px, 1.4fr) auto; gap: 10px;
  align-items: end; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: var(--r-s); background: var(--superficie); }
.gruppo-tp > div, .gruppo-tp > label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gruppo-tp small { color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.gruppo-tp select { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .gruppo-tp { grid-template-columns: 1fr 1fr; }
  .gruppo-tp-a, .gruppo-tp > .btn { grid-column: 1 / -1; }
  .scelte-modello { grid-template-columns: 1fr; }
}
form.in-linea { display: block; margin-top: 4px; }
.link-piccolo { background: none; border: 0; padding: 0; color: var(--tenue); font-size: 12px; text-decoration: underline; cursor: pointer; }
.stato-centralino { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; }
.nuova-campagna { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nuova-campagna a, .nuova-campagna summary { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--bordo);
  border-radius: var(--r-s); color: var(--testo); text-decoration: none; cursor: pointer; background: var(--superficie); }
.nuova-campagna a:hover, .nuova-campagna summary:hover { border-color: var(--primario); }
.nuova-campagna small { color: var(--tenue); }
@media (max-width: 760px) { .nuova-campagna { grid-template-columns: 1fr; } }
.titolo-sezione { font-size: 15px; margin: 18px 0 8px; }
details.scheda > summary { cursor: pointer; }
.modulo-tp { display: flex; flex-direction: column; gap: 14px; }
.modulo-tp .opzioni-tp { max-width: 720px; }
.riga-link > .badge { flex: none; }
.passi-orizzontali { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.passi-orizzontali li { grid-template-columns: 28px 1fr; }
@media (max-width: 760px) { .passi-orizzontali { grid-template-columns: 1fr; } }
.scelte-stati { display: flex; flex-wrap: wrap; gap: 6px; }
.scelta-piccola { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--bordo); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.scelta-piccola:has(input:checked) { border-color: var(--primario); background: var(--primario-tenue); }
.scelte-attivita { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-largo { grid-column: 1 / -1; }
@media (max-width: 760px) { .scelte-attivita { grid-template-columns: 1fr; } }
.modulo-filtri { max-width: 900px; }
.abbina-tv { min-height: 100vh; display: grid; place-items: center; background: #0b1220; color: #e6edf7; }
.abbina-tv-box { text-align: center; display: grid; gap: 18px; justify-items: center; padding: 24px; }
.abbina-tv-box h1 { font-size: 28px; margin: 0; }
.abbina-tv-box p { font-size: 22px; margin: 0; }
.abbina-tv-codice { font-family: var(--mono); font-size: 140px; font-weight: 800; letter-spacing: .15em; line-height: 1; }
.abbina-modulo input { max-width: 220px; }
.tp-dal-ticket { border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 8px; }
.tp-dal-ticket legend { font-size: 13px; font-weight: 650; padding: 0 6px; }
.scelte-tp { grid-template-columns: 1fr; }
.campi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.riga-scelte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.sotto-titolo { font-size: 14px; margin: 14px 0 6px; }
.scelte-canale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blocco-scelta { display: grid; gap: 8px; }
.scelte-attivita.scelte-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .campi-3, .scelte-canale { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .scelte-attivita.scelte-4 { grid-template-columns: 1fr; } }
.testo-pre { white-space: pre-line; display: block; }
.barra-selezione { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--bordo); }
.barra-selezione .azioni { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.seleziona-tutti { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.ticket-con-scelta { display: flex; align-items: center; gap: 6px; }
.ticket-con-scelta .ticket-riga { flex: 1; min-width: 0; }
.ticket-scelta { padding: 8px 4px 8px 6px; cursor: pointer; }
.ticket-scelta input { width: 18px; height: 18px; }
.separatore-verticale { width: 1px; align-self: stretch; background: var(--bordo); margin: 0 4px; }
.cerca-per select { min-width: 150px; }
.cerca-ordine select { max-width: 170px; }
.avviso-info { background: var(--info-tenue); color: var(--info); }
.date-proposte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.data-proposta { display: grid; gap: 4px; }
.data-proposta.spenta input[type=date] { opacity: .45; }
.anteprima-cliente { border: 1px dashed var(--bordo-forte); border-radius: var(--r-s); padding: 10px 12px; background: var(--sfondo); }
.anteprima-testa { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.anteprima-testo { white-space: pre-line; font-size: 13.5px; line-height: 1.45; }
@media (max-width: 760px) { .date-proposte { grid-template-columns: 1fr; } }
.canali-ticket { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-canale { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border: 1px solid var(--bordo); border-radius: 999px; }
.unisci-avviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.unisci-avviso form { margin-left: auto; }

/* Ticket: ordine caricato dopo la pagina (20/10/2026) */
.ordine-attesa p { display: flex; align-items: center; gap: 10px; }
.rotella { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bordo-forte); border-top-color: var(--primario);
  animation: gira .8s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.ordine-letto { text-align: right; }

/* Campagna: avanzamento dell'esecuzione su TransitPoint (20/10/2026) */
.lavoro-tp h2 { display: flex; align-items: center; gap: 10px; }
.lavoro-tp-in_corso { border-color: var(--primario); }
.lavoro-barra { margin: 12px 0 10px; }
.lavoro-riassunto { margin: 0 0 6px; }
.lavoro-attuale { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; padding: 8px 12px; border-radius: var(--r-s); background: var(--primario-tenue); }
.lavoro-dettaglio summary { cursor: pointer; color: var(--testo-2); font-size: 13.5px; margin: 6px 0; }
.lavoro-voci { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--bordo); }
.lavoro-voci li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 7px 2px; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.lavoro-voci .voce-ico { display: grid; place-items: center; height: 20px; }
.lavoro-voci .voce-ok .voce-ico { color: var(--ok); } .lavoro-voci .voce-ko .voce-ico { color: var(--ko); }
.lavoro-voci .voce-attesa { color: var(--tenue); }
.lavoro-voci .voce-in_corso { background: var(--primario-tenue); }
.lavoro-voci .rotella { width: 13px; height: 13px; }
.lavoro-tp .modulo-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: saturate(.6); }

/* Ticket: targa da cui partiva l'ordine della campagna (20/10/2026) */
.targa-partenza { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 8px 0 10px; border-radius: var(--r-s);
  background: var(--info-tenue); color: var(--testo); font-size: 14px; }
.targa-partenza .ic-s { color: var(--info); flex: none; }
.targa-partenza .targa-mini { font-size: 15px; }

/* Ticket: data concordata al telefono (20/10/2026) */
.riepilogo-concordata { padding: 10px 12px; border-radius: var(--r-s); background: var(--primario-tenue); font-size: 13.5px; }
.riepilogo-concordata:empty { display: none; }

/* Campagna: clienti senza risposta (20/10/2026) */
.manuale-azioni { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.manuale-blocco { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--r-s); }
.manuale-blocco .campi-2 { width: 100%; }
@media (max-width: 900px) { .manuale-azioni { grid-template-columns: 1fr; } }

/* Ritardi: avviso al cliente (20/10/2026) */
.avvisa-ritardo { margin-top: 8px; }
.avvisa-ritardo > summary { list-style: none; cursor: pointer; justify-content: center; }
.avvisa-ritardo > summary::-webkit-details-marker { display: none; }
.avvisa-ritardo form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--bordo); border-radius: var(--r-s); }
.avvisa-canali { display: flex; flex-wrap: wrap; gap: 6px; }
.avvisa-testo { margin: 0; font-size: 13px; color: var(--testo-2); font-style: italic; }
.ritardo .avvisato { margin-top: 6px; align-self: flex-start; }

/* Giorni anomali in Statistiche e Andamento (20/10/2026) */
.anomali-elenco li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.anomalia-nuova { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.anomalia-nuova .etichetta { flex: 1 1 200px; }