/* =====================================================================
   COTRAGEST — stile dell'interfaccia
   Colore d'accento per azienda: blu Cotraino (CT), verde Prisco (PDL).
   ===================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-400-normal.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-500-normal.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-700-normal.8ca0a5155296.woff2") format("woff2"); }

:root {
  --accento: #2563eb;
  --accento-scuro: #1d4ed8;
  --accento-chiaro: #eff4ff;
  --accento-sfumato: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #38bdf8 100%);

  --laterale: #0b1324;
  --laterale-2: #131d33;
  --laterale-testo: #a9b4c8;

  --sfondo: #f3f5f9;
  --carta: #ffffff;
  --testo: #0f172a;
  --testo-tenue: #64748b;
  --bordo: #e3e8ef;
  --bordo-forte: #cfd6e1;

  --rosso: #dc2626;  --rosso-chiaro: #fef2f2;
  --giallo: #b45309; --giallo-chiaro: #fffbeb; --giallo-bordo: #fcd34d;
  --verde: #059669;  --verde-chiaro: #ecfdf5;
  --viola: #7c3aed;  --viola-chiaro: #f5f3ff;

  --raggio: 14px;
  --raggio-piccolo: 9px;
  --ombra: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .05);
  --ombra-alta: 0 10px 30px rgba(15, 23, 42, .12);
  --larghezza-laterale: 272px;
}
body[data-azienda="PDL"] {
  --accento: #16a34a;
  --accento-scuro: #15803d;
  --accento-chiaro: #effaf2;
  --accento-sfumato: linear-gradient(135deg, #14532d 0%, #16a34a 55%, #4ade80 100%);
}

* { box-sizing: border-box; }
[x-cloak], .nascosto { display: none !important; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  line-height: 1.5;
}
a { color: var(--accento); text-decoration: none; }
h1, h2, h3 { letter-spacing: -.015em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }

.icona { width: 20px; height: 20px; flex-shrink: 0; }
.icona.piccola { width: 16px; height: 16px; }

/* =====================================================================
   STRUTTURA: menu laterale + area principale
   ===================================================================== */
.app { display: flex; min-height: 100vh; }

.laterale {
  position: fixed; inset: 0 auto 0 0; width: var(--larghezza-laterale);
  background: var(--laterale); color: var(--laterale-testo);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 40;
  transition: transform .25s ease;
}
.laterale > * { flex-shrink: 0; }
.laterale-marchio { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.marchio-logo {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--accento-sfumato); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.marchio-logo.grande { width: 52px; height: 52px; border-radius: 15px; }
.marchio-logo.grande .icona { width: 28px; height: 28px; }
.marchio-nome { color: #fff; font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; }
.marchio-sotto { font-size: .75rem; color: #6b7891; }

/* Blocco azienda nel menu laterale */
.scheda-azienda {
  margin: .25rem 1rem 1rem; padding: 1rem; border-radius: var(--raggio);
  background: var(--laterale-2); border: 1px solid rgba(255, 255, 255, .06);
  position: relative; overflow: hidden;
}
.scheda-azienda::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accento-sfumato);
}
.scheda-azienda-logo {
  width: 100%; height: 72px; border-radius: 10px; background: #fff;
  display: grid; place-items: center; margin-bottom: .8rem; overflow: hidden;
}
.scheda-azienda-logo img { max-width: 88%; max-height: 60px; object-fit: contain; }
.scheda-azienda-logo .sigla {
  font-size: 1.7rem; font-weight: 700; letter-spacing: .06em;
  background: var(--accento-sfumato); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scheda-azienda-testo { display: flex; flex-direction: column; gap: .1rem; }
.scheda-azienda-testo strong { color: #fff; font-size: .98rem; line-height: 1.3; }
.scheda-azienda-testo .forma { font-size: .78rem; color: #7d8aa3; }
.etichetta-piccola { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #7d8aa3; font-weight: 600; }
.etichetta-piccola.chiara { color: rgba(255, 255, 255, .75); }

.cambio-azienda { display: flex; gap: .4rem; margin-top: .9rem; padding: .25rem; background: rgba(0, 0, 0, .25); border-radius: 10px; }
.pillola-azienda {
  flex: 1; font: inherit; font-weight: 600; font-size: .85rem; padding: .45rem .5rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--laterale-testo); cursor: pointer; transition: background .15s, color .15s;
}
.pillola-azienda:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.pillola-azienda.attiva { color: #fff; background: var(--accento); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.pillola-azienda[data-sigla="CT"]:not(.attiva):hover { color: #93c5fd; }
.pillola-azienda[data-sigla="PDL"]:not(.attiva):hover { color: #86efac; }

.navigazione { padding: 0 .75rem 1.5rem; }
.nav-sezione { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #56627a; font-weight: 600; margin: 1.1rem .75rem .4rem; }
.nav-voce {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; margin-bottom: 2px; border-radius: 10px;
  color: var(--laterale-testo); font-weight: 500; font-size: .93rem; transition: background .15s, color .15s;
}
.nav-voce:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-voce.attiva { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 3px 0 0 var(--accento); }
.nav-voce.attiva .icona { color: var(--accento); filter: brightness(1.4); }
.nav-voce.disabilitata { opacity: .45; cursor: default; }
.nav-voce.disabilitata:hover { background: none; color: var(--laterale-testo); }
.nav-voce em { margin-left: auto; font-style: normal; font-size: .68rem; padding: .1rem .4rem; border-radius: 5px; background: rgba(255, 255, 255, .08); }

.principale { flex: 1; margin-left: var(--larghezza-laterale); min-width: 0; display: flex; flex-direction: column; }

.testata {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem;
  padding: .9rem 2rem; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.testata-titolo h1 { margin: 0; font-size: 1.3rem; }
.testata-titolo p { margin: 0; color: var(--testo-tenue); font-size: .85rem; }
.testata-destra { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.badge-azienda { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--accento); background: var(--accento-chiaro); padding: .3rem .6rem; border-radius: 7px; }

.menu-utente { position: relative; }
.utente-pulsante { display: flex; align-items: center; gap: .6rem; background: none; border: 1px solid transparent; border-radius: 12px; padding: .3rem .5rem .3rem .3rem; font: inherit; cursor: pointer; color: var(--testo); }
.utente-pulsante:hover { background: var(--sfondo); border-color: var(--bordo); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accento-sfumato); color: #fff; font-weight: 600; font-size: .85rem; }
.utente-nome { font-weight: 500; font-size: .9rem; }
.tendina { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-alta); overflow: hidden; }
.tendina-intestazione { padding: .8rem 1rem; border-bottom: 1px solid var(--bordo); display: flex; flex-direction: column; }
.tendina-intestazione span { font-size: .8rem; color: var(--testo-tenue); }
.tendina form { margin: 0; }
.tendina-voce { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; background: none; border: 0; font: inherit; cursor: pointer; color: var(--testo); text-align: left; }
.tendina-voce:hover { background: var(--sfondo); color: var(--rosso); }

.contenuto { padding: 1.75rem 2rem 3rem; max-width: 1320px; width: 100%; }

.velo { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 35; }
.solo-mobile { display: none !important; }

/* =====================================================================
   AVVISO ANIMATO DI CAMBIO AZIENDA
   ===================================================================== */
.cambio-avviso {
  position: fixed; top: 50%; left: calc(var(--larghezza-laterale) + 1.5rem); z-index: 60;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.6rem 1.1rem 1.1rem;
  background: var(--carta); border-radius: 18px; box-shadow: var(--ombra-alta);
  border-left: 6px solid var(--accento);
}
.cambio-avviso strong { display: block; font-size: 1.35rem; color: var(--testo); }
.cambio-avviso-logo { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: var(--accento-chiaro); overflow: hidden; }
.cambio-avviso-logo img { max-width: 90%; max-height: 90%; object-fit: contain; }
.cambio-avviso-logo span { font-weight: 700; font-size: 1.2rem; color: var(--accento); }
.entra { transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .45s; }
.entra-da { opacity: 0; transform: translate(-60px, -50%); }
.esci { transition: transform .35s ease-in, opacity .35s; }
.esci-a { opacity: 0; transform: translate(-40px, -50%); }

/* =====================================================================
   ELEMENTI COMUNI
   ===================================================================== */
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); margin-bottom: 1.25rem; overflow: hidden; }
.scheda-testata { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bordo); }
.scheda-testata h2 { margin: 0; font-size: 1rem; }
.scheda-corpo { padding: 1.25rem; }
.scheda-stretta { max-width: 640px; }
.conteggio { font-size: .75rem; font-weight: 600; color: var(--testo-tenue); background: var(--sfondo); border: 1px solid var(--bordo); padding: .05rem .5rem; border-radius: 99px; }

.titolo-sezione { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 1rem; }
.titolo-sezione h2 { margin: 0; font-size: 1.1rem; }

.messaggi { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.messaggio, .avviso { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid transparent; font-size: .93rem; }
.messaggio.success { background: var(--verde-chiaro); border-color: #a7f3d0; color: #065f46; }
.messaggio.error, .avviso.errore { background: var(--rosso-chiaro); border-color: #fecaca; color: #991b1b; }
.messaggio.info { background: var(--accento-chiaro); border-color: #c7d7fe; color: #1e3a8a; }
.messaggio.warning, .avviso.attenzione { background: var(--giallo-chiaro); border-color: var(--giallo-bordo); color: #78350f; }

.pulsante {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 500; font-size: .9rem;
  padding: .55rem .95rem; border-radius: 10px; cursor: pointer; border: 1px solid var(--bordo-forte);
  background: var(--carta); color: var(--testo); transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.pulsante:hover { border-color: var(--accento); color: var(--accento); }
.pulsante:active { transform: translateY(1px); }
.pulsante:disabled { opacity: .45; cursor: not-allowed; }
.pulsante.primario { background: var(--accento); border-color: var(--accento); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .25); }
.pulsante.primario:hover { background: var(--accento-scuro); color: #fff; }
.pulsante.primario.evidenzia { box-shadow: 0 0 0 4px var(--accento-chiaro), 0 2px 8px rgba(37, 99, 235, .3); }
.pulsante.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.pulsante.verde:hover:not(:disabled) { background: #047857; color: #fff; }
.pulsante.grande { width: 100%; justify-content: center; padding: .8rem; font-size: 1rem; font-weight: 600; margin-top: 1.25rem; }
.pulsante-icona { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--testo-tenue); cursor: pointer; }
.pulsante-icona:hover { background: var(--sfondo); border-color: var(--bordo); color: var(--accento); }
.bolla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--giallo-chiaro); color: var(--giallo); }
.bolla.chiara { background: rgba(255, 255, 255, .25); color: #fff; }

.etichetta { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; white-space: nowrap; }
.etichetta.gialla { background: var(--giallo-chiaro); color: var(--giallo); border: 1px solid var(--giallo-bordo); }
.etichetta.verde { background: var(--verde-chiaro); color: var(--verde); border: 1px solid #a7f3d0; }
.etichetta.rossa { background: var(--rosso-chiaro); color: var(--rosso); border: 1px solid #fecaca; }
.etichetta.blu { background: var(--accento-chiaro); color: var(--accento); border: 1px solid #c7d7fe; }

input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], input[type=file],
input[type=email], input[type=tel], input[type=url], input[type=time], select, textarea {
  font: inherit; font-size: .95rem; padding: .6rem .75rem; border: 1px solid var(--bordo-forte); border-radius: 10px;
  background: #fff; color: var(--testo); width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 4px var(--accento-chiaro); }
label { display: block; font-weight: 500; font-size: .88rem; margin: 1rem 0 .35rem; color: #334155; }
label.casella { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
label.casella input { width: auto; }
.errore-campo { color: var(--rosso); margin: .35rem 0 0; font-size: .85rem; }
.nota { color: var(--testo-tenue); font-size: .88rem; }
.sottotitolo { color: var(--testo-tenue); margin: 0 0 1.25rem; }
.torna { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; font-weight: 500; font-size: .9rem; }
.vuoto { text-align: center; color: var(--testo-tenue); padding: 3rem; }
.vuoto .icona { width: 36px; height: 36px; }

/* Tabelle */
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: .75rem 1.25rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella th { background: #f8fafc; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); font-weight: 600; }
.tabella tbody tr:hover td { background: #fafbfd; }
.tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella .data { white-space: nowrap; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.tabella tr.chiuso td { color: var(--testo-tenue); }

/* =====================================================================
   CRUSCOTTO (home)
   ===================================================================== */
.benvenuto {
  display: flex; align-items: center; gap: 2rem; padding: 1.75rem 2rem; border-radius: 18px; color: #fff;
  background: var(--accento-sfumato); box-shadow: 0 10px 30px rgba(30, 64, 175, .22); position: relative; overflow: hidden;
}
body[data-azienda="PDL"] .benvenuto { box-shadow: 0 10px 30px rgba(21, 128, 61, .22); }
.benvenuto::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.benvenuto h2 { margin: .2rem 0 .3rem; font-size: 1.75rem; }
.benvenuto p { margin: 0; opacity: .9; max-width: 60ch; }
.benvenuto-logo {
  margin-left: auto; width: 110px; height: 110px; border-radius: 20px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15); position: relative; z-index: 1; overflow: hidden; flex-shrink: 0;
}
.benvenuto-logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.benvenuto-logo span { font-weight: 700; font-size: 1.8rem; color: var(--accento); letter-spacing: .05em; }

.indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.indicatore { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); color: var(--testo); }
a.indicatore:hover { border-color: var(--accento); }
.indicatore > div { display: flex; flex-direction: column; }
.indicatore-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.indicatore-icona.blu { background: var(--accento-chiaro); color: var(--accento); }
.indicatore-icona.verde { background: var(--verde-chiaro); color: var(--verde); }
.indicatore-icona.giallo { background: var(--giallo-chiaro); color: var(--giallo); }
.indicatore-icona.rosso { background: var(--rosso-chiaro); color: var(--rosso); }
.indicatore-icona.viola { background: var(--viola-chiaro); color: var(--viola); }
.indicatore-valore { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.indicatore-valore.piccolo { font-size: 1.15rem; }
.indicatore-etichetta { font-size: .82rem; color: var(--testo-tenue); }

/* Comparti: ogni comparto ha il suo colore */
.griglia-comparti { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.comparto {
  --c: #2563eb; --c-chiaro: #eff4ff;
  display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; min-height: 190px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
  color: var(--testo); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.comparto::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
a.comparto:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); border-color: var(--c); }
.comparto-icona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c-chiaro); color: var(--c); }
.comparto-icona .icona { width: 26px; height: 26px; }
.comparto h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.comparto p { margin: 0; color: var(--testo-tenue); font-size: .88rem; }
.stato-modulo { margin-top: auto; align-self: flex-start; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 99px; background: var(--sfondo); color: var(--testo-tenue); border: 1px solid var(--bordo); }
a.comparto .stato-modulo { background: var(--c); color: #fff; border-color: var(--c); }
.comparto.in-arrivo .comparto-icona { filter: saturate(.85); }
.comparto[data-codice="TE"]  { --c: #2563eb; --c-chiaro: #eff4ff; }
.comparto[data-codice="RIF"] { --c: #0d9488; --c-chiaro: #effcf9; }
.comparto[data-codice="NOL"] { --c: #7c3aed; --c-chiaro: #f5f3ff; }
.comparto[data-codice="EDI"] { --c: #ea580c; --c-chiaro: #fff4ed; }
.comparto[data-codice="OFF"] { --c: #0284c7; --c-chiaro: #effaff; }
.comparto[data-codice="CAR"] { --c: #db2777; --c-chiaro: #fdf2f8; }
.comparto[data-codice="PRO"] { --c: #a16207; --c-chiaro: #fefbe8; }

/* Avanzamento */
.roadmap { list-style: none; margin: 0; padding: 1.25rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.roadmap li { position: relative; display: flex; flex-direction: column; gap: .25rem; padding-top: 2.6rem; font-size: .8rem; color: var(--testo-tenue); }
.roadmap li::before { content: ""; position: absolute; top: 16px; left: 34px; right: -8px; height: 3px; background: var(--bordo); border-radius: 3px; }
.roadmap li:last-child::before { display: none; }
.roadmap li.fatta::before { background: var(--verde); }
.roadmap strong { color: var(--testo); font-size: .85rem; }
.roadmap-punto { position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--sfondo); border: 2px solid var(--bordo-forte); color: var(--testo-tenue); }
.roadmap li.fatta .roadmap-punto { background: var(--verde); border-color: var(--verde); color: #fff; }
.roadmap li.prossima .roadmap-punto { border-color: var(--accento); color: var(--accento); background: var(--accento-chiaro); }

/* =====================================================================
   PARAMETRI
   ===================================================================== */
.barra-filtri { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ricerca { position: relative; flex: 1; max-width: 420px; }
.ricerca .icona { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--testo-tenue); width: 18px; height: 18px; }
.ricerca input { padding-left: 2.4rem; }
.schede-filtro { display: inline-flex; background: var(--carta); border: 1px solid var(--bordo); border-radius: 11px; padding: 3px; }
.schede-filtro a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 8px; color: var(--testo-tenue); font-weight: 500; font-size: .88rem; }
.schede-filtro a.attiva { background: var(--accento); color: #fff; }
.schede-filtro a.attiva .bolla { background: rgba(255, 255, 255, .25); color: #fff; }

.barra-azioni {
  position: sticky; top: 72px; z-index: 20; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; margin-bottom: .75rem; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.barra-azioni-destra { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.campo-data { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 500; color: var(--testo-tenue); }
.campo-data input { width: auto; padding: .45rem .6rem; }
.aiuto { display: flex; gap: .5rem; align-items: flex-start; color: var(--testo-tenue); font-size: .85rem; margin: 0 0 1.25rem; }
.aiuto .icona { margin-top: .15rem; }

.tabella-parametri .colonna-spunta { width: 44px; padding-right: 0; }
.tabella-parametri input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--verde); cursor: pointer; }
.parametro-nome { font-weight: 500; }
.parametro-chiave { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: #94a3b8; }
.tabella-parametri tr.da-confermare td:first-child { box-shadow: inset 3px 0 0 var(--giallo-bordo); }
.tabella-parametri tr.con-errore td { background: var(--rosso-chiaro); }
.campo-valore { display: inline-flex; align-items: center; border: 1px solid var(--bordo-forte); border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.campo-valore:focus-within { border-color: var(--accento); box-shadow: 0 0 0 4px var(--accento-chiaro); }
.campo-valore.cambiato { border-color: var(--accento); background: var(--accento-chiaro); }
.campo-valore input { border: 0; box-shadow: none !important; width: 110px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; background: transparent; padding: .45rem .6rem; }
.campo-valore .unita { padding: 0 .7rem; font-size: .8rem; color: var(--testo-tenue); border-left: 1px solid var(--bordo); background: #f8fafc; align-self: stretch; display: flex; align-items: center; min-width: 64px; }
.azioni-riga { width: 56px; text-align: right; }

.due-colonne { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

/* =====================================================================
   AZIENDE
   ===================================================================== */
.griglia-aziende { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.25rem; }
.scheda-azienda-grande { padding: 1.5rem; }
.scheda-azienda-grande[data-sigla="CT"] { border-top: 4px solid #2563eb; }
.scheda-azienda-grande[data-sigla="PDL"] { border-top: 4px solid #16a34a; }
.azienda-intestazione { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.azienda-intestazione h2 { margin: 0; font-size: 1.15rem; }
.azienda-logo { width: 72px; height: 72px; border-radius: 16px; background: var(--sfondo); border: 1px solid var(--bordo); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.azienda-logo.grande { width: 120px; height: 120px; }
.azienda-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.azienda-logo span { font-weight: 700; font-size: 1.3rem; color: var(--testo-tenue); }
.scheda-azienda-grande[data-sigla="CT"] .azienda-logo span { color: #2563eb; }
.scheda-azienda-grande[data-sigla="PDL"] .azienda-logo span { color: #16a34a; }
.dati { display: grid; grid-template-columns: 130px 1fr; gap: .45rem 1rem; margin: 0 0 1.25rem; font-size: .9rem; }
.dati dt { color: var(--testo-tenue); }
.dati dd { margin: 0; font-weight: 500; }
.caricamento-logo { display: flex; gap: 1.5rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--bordo); }
.caricamento-logo label:first-child { margin-top: 0; }

/* =====================================================================
   PAGINE DI ACCESSO
   ===================================================================== */
.pagina-accesso { background: var(--carta); }
.accesso { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.accesso-vetrina {
  background: radial-gradient(circle at 20% 20%, #1e3a8a 0%, transparent 50%), radial-gradient(circle at 80% 90%, #14532d 0%, transparent 45%), var(--laterale);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.accesso-marchio { display: flex; align-items: center; gap: .9rem; }
.accesso-marchio .marchio-nome { font-size: 1.4rem; }
.accesso-claim h2 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 1rem; max-width: 16ch; }
.accesso-claim p { color: var(--laterale-testo); font-size: 1.05rem; max-width: 40ch; margin: 0; }
.accesso-aziende { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; color: var(--laterale-testo); font-weight: 500; }
.accesso-aziende li { display: flex; align-items: center; gap: .5rem; }
.punto { width: 10px; height: 10px; border-radius: 50%; }
.punto.ct { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .2); }
.punto.pdl { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.accesso-modulo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: var(--sfondo); }
.accesso-scheda { width: 100%; max-width: 420px; background: var(--carta); padding: 2.25rem; border-radius: 20px; border: 1px solid var(--bordo); box-shadow: var(--ombra-alta); }
.accesso-scheda h1 { margin: 0 0 .3rem; font-size: 1.6rem; }
.accesso-piede { display: flex; align-items: center; gap: .4rem; color: var(--testo-tenue); font-size: .82rem; margin-top: 1.25rem; }
.icona-tonda { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--accento-chiaro); color: var(--accento); margin-bottom: 1rem; }
.icona-tonda.rossa { background: var(--rosso-chiaro); color: var(--rosso); }
.icona-tonda .icona { width: 26px; height: 26px; }
.codice-otp { font-size: 1.7rem !important; letter-spacing: .45em; text-align: center; font-weight: 600; }
.qr { display: flex; justify-content: center; margin: 1rem 0; padding: 1rem; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; }
.qr svg { width: 200px; height: 200px; }
.chiave { word-break: break-all; background: var(--sfondo); padding: .2rem .4rem; border-radius: 5px; }
.passi { padding-left: 1.2rem; color: #334155; font-size: .92rem; }
.passi li { margin-bottom: .35rem; }

/* =====================================================================
   SCHERMI PICCOLI
   ===================================================================== */
@media (max-width: 1100px) {
  .roadmap { grid-template-columns: repeat(4, 1fr); row-gap: 1.5rem; }
  .due-colonne { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .laterale { transform: translateX(-100%); }
  .laterale.aperto { transform: none; box-shadow: var(--ombra-alta); }
  .principale { margin-left: 0; }
  .solo-mobile { display: inline-grid !important; }
  .testata { padding: .75rem 1rem; }
  .contenuto { padding: 1.25rem 1rem 2.5rem; }
  .utente-nome { display: none; }
  .cambio-avviso { left: 1rem; right: 1rem; }
  .accesso { grid-template-columns: 1fr; }
  .accesso-vetrina { display: none; }
  .benvenuto { padding: 1.4rem; }
  .benvenuto-logo { width: 72px; height: 72px; }
  .tabella { display: block; overflow-x: auto; }
  .barra-azioni { top: 60px; }
}

/* nella pagina Aziende ogni scheda usa il colore della propria azienda */
.scheda-azienda-grande[data-sigla="CT"] .pulsante.primario { background: #2563eb; border-color: #2563eb; }
.scheda-azienda-grande[data-sigla="PDL"] .pulsante.primario { background: #16a34a; border-color: #16a34a; }

/* =====================================================================
   PERSONALE, DOCUMENTI, SCADENZE (M1)
   ===================================================================== */
.icona.mini { width: 13px; height: 13px; margin-right: .2rem; }
.icona.gira { transform: rotate(180deg); }
.etichetta.grigia { background: var(--sfondo); color: var(--testo-tenue); border: 1px solid var(--bordo); }
.etichetta.neutra { background: #f1f5f9; color: #334155; border: 1px solid var(--bordo); }
.etichetta.grande { font-size: .85rem; padding: .35rem .75rem; margin-top: .4rem; }
.bolla.neutra { background: var(--sfondo); color: var(--testo-tenue); }
.schede-filtro.larga { display: flex; flex-wrap: wrap; margin-bottom: 1rem; width: fit-content; max-width: 100%; }
.schede-filtro a.attiva .bolla.neutra { background: rgba(255, 255, 255, .25); color: #fff; }
.piccolo-p { margin-left: auto; padding: .35rem .7rem; font-size: .82rem; }
.indicatore-extra { font-size: .95rem; color: var(--testo-tenue); font-weight: 600; }

tr.cliccabile { cursor: pointer; }
.persona { display: flex; align-items: center; gap: .8rem; }
.avatar-foto { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--sfondo); }
.avatar-foto.vuota { display: grid; place-items: center; font-weight: 600; font-size: .85rem; color: var(--accento); background: var(--accento-chiaro); }
.persona-nome { font-weight: 600; color: var(--testo); }
.persona-sotto { display: flex; gap: .3rem; margin-top: .15rem; flex-wrap: wrap; }
.persona-sotto .etichetta { font-size: .68rem; padding: .1rem .45rem; }

.testata-persona { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; margin-bottom: 1rem;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); flex-wrap: wrap; }
.testata-persona h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.testata-persona-dati { flex: 1; min-width: 240px; }
.testata-persona-dati .nota { display: flex; gap: .4rem; align-items: flex-start; margin: .6rem 0 0; }
.testata-persona-azioni { display: flex; gap: .5rem; flex-wrap: wrap; }
.testata-persona-azioni form { margin: 0; }
.etichette { display: flex; gap: .35rem; flex-wrap: wrap; }
.foto-grande { width: 96px; height: 128px; border-radius: 14px; object-fit: cover; box-shadow: var(--ombra); flex-shrink: 0; }
.foto-grande.vuota { display: grid; place-content: center; text-align: center; background: var(--accento-chiaro); color: var(--accento); font-weight: 700; font-size: 1.6rem; }
.foto-grande.vuota small { display: block; font-size: .62rem; font-weight: 500; color: var(--testo-tenue); }

.linguette { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordo); margin-bottom: 1.25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.linguette a { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1rem; color: var(--testo-tenue); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.linguette a:hover { color: var(--testo); }
.linguette a.attiva { color: var(--accento); border-bottom-color: var(--accento); }

.due-colonne.uguali { grid-template-columns: 1fr 1fr; }
.dati.scheda-corpo { margin: 0; }
.modulo.compatto label { margin-top: .7rem; }
.modulo.compatto .pulsante { margin-top: 1rem; }
.modulo.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.modulo.griglia-2 .pulsante, .modulo.griglia-2 .campo-cedolino_file { grid-column: 1 / -1; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.25rem; }
.griglia-campi label { margin-top: .5rem; }
.modulo.largo { max-width: 980px; }
.obbligatorio { color: var(--rosso); }
.campo.con-errore input, .campo.con-errore select { border-color: var(--rosso); }
.data-compatta { width: 150px !important; padding: .35rem .5rem !important; font-size: .85rem !important; }
.fila-pulsanti { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.fila-pulsanti .avviso { margin: 0; }
.elenco-puntato { padding-left: 1.2rem; }
.sottotitolo-sezione { font-size: .9rem; margin: 1.5rem 0 .75rem; color: var(--testo-tenue); }
.griglia-foto { display: flex; gap: .75rem; flex-wrap: wrap; }
.griglia-foto form { margin: 0; }
.foto-scelta { border: 1px solid var(--bordo); background: #fff; border-radius: 12px; padding: .35rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; align-items: center; font: inherit; font-size: .75rem; color: var(--accento); }
.foto-scelta img { width: 84px; height: 112px; object-fit: cover; border-radius: 8px; }
.foto-scelta:hover { border-color: var(--accento); }
.foto-anteprima img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }

/* anteprima tessera 85,6 × 54 */
.tessera { width: 100%; max-width: 428px; aspect-ratio: 85.6 / 54; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18); border: 1px solid var(--bordo); display: flex; flex-direction: column; margin-bottom: 1rem; }
.tessera-testata { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; color: #fff; background: #1d4ed8; }
.tessera[data-sigla="PDL"] .tessera-testata { background: #15803d; }
.tessera-testata img { height: 30px; max-width: 64px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; }
.tessera-testata strong { display: block; font-size: .85rem; text-transform: uppercase; }
.tessera-testata span { font-size: .62rem; opacity: .85; letter-spacing: .05em; text-transform: uppercase; }
.tessera-corpo { flex: 1; display: grid; grid-template-columns: 26% 1fr 24%; gap: .7rem; padding: .7rem .8rem; align-items: center; }
.tessera-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--bordo); }
.tessera-foto.vuota { display: grid; place-items: center; background: var(--sfondo); color: var(--testo-tenue); font-size: .75rem; }
.tessera-dati { display: flex; flex-direction: column; font-size: .75rem; min-width: 0; }
.tessera-dati strong { font-size: .95rem; line-height: 1.15; margin-bottom: .35rem; }
.tessera-dati small { font-size: .55rem; color: var(--testo-tenue); letter-spacing: .06em; margin-top: .25rem; }
.tessera-qr { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.qr-finto { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 2px dashed var(--bordo-forte); border-radius: 6px; color: var(--testo-tenue); }
.tessera-qr code { font-size: .7rem; font-weight: 700; color: var(--accento); }

/* scheda di verifica QR */
.verifica-esito { border-top: 6px solid var(--verde); }
.verifica-esito.ko { border-top-color: var(--rosso); }
.verifica-esito h2 { margin: 0 0 .2rem; }
.verifica-esito p { margin: 0; }
.verifica-testata { display: flex; gap: 1.25rem; padding: 1.5rem; align-items: center; }
.verifica-testata img { width: 110px; height: 146px; object-fit: cover; border-radius: 14px; box-shadow: var(--ombra); }
.esiti { list-style: none; margin: 0; padding: 0 1.5rem; }
.esiti li { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-top: 1px solid var(--bordo); font-weight: 500; }

/* scadenze in home */
.riquadro-scadenze { margin-top: 1.25rem; }
.riquadro-scadenze h2 { display: flex; align-items: center; gap: .4rem; }
.lista-scadenze { list-style: none; margin: 0; padding: 0; }
.lista-scadenze li { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.25rem; border-top: 1px solid var(--bordo); }
.lista-scadenze li:first-child { border-top: 0; }
.lista-scadenze a { color: var(--testo); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-scadenze .data { color: var(--testo-tenue); font-variant-numeric: tabular-nums; font-size: .88rem; }

@media (max-width: 900px) {
  .due-colonne.uguali, .modulo.griglia-2 { grid-template-columns: 1fr; }
  .testata-persona { padding: 1rem; }
}

/* =====================================================================
   MEZZI, RIMORCHI, COMPATIBILITÀ, CLIENTI (M2)
   ===================================================================== */
.griglia-sezioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.sezione-mezzi { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); color: var(--testo);
  transition: border-color .15s, transform .15s; }
.sezione-mezzi:hover { transform: translateY(-2px); border-color: var(--accento); }
.sezione-mezzi.attiva { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro), var(--ombra); }
.sezione-icona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--accento-chiaro); color: var(--accento); flex-shrink: 0; }
.sezione-mezzi[data-sezione="lavoro"] .sezione-icona { background: #fff4ed; color: #ea580c; }
.sezione-mezzi[data-sezione="rimorchi"] .sezione-icona { background: #f5f3ff; color: #7c3aed; }
.sezione-mezzi[data-sezione="mezzi"] .sezione-icona { background: #effcf9; color: #0d9488; }
.sezione-testo { display: flex; flex-direction: column; line-height: 1.2; }
.sezione-testo strong { font-size: 1.45rem; }
.sezione-testo span { font-size: .82rem; color: var(--testo-tenue); }

.targa { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .06em;
  padding: .12rem .45rem; border: 2px solid #1e293b; border-radius: 5px; background: #fff; color: #0f172a;
  font-size: .85rem; box-shadow: inset 6px 0 0 #1d4ed8; padding-left: .7rem; }
.targa.grande { font-size: 1.05rem; vertical-align: middle; }
.icona-mezzo { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: var(--accento-chiaro); color: var(--accento); flex-shrink: 0; }
.icona-mezzo .icona { width: 40px; height: 40px; }
.icona-mezzo[data-categoria="RIMORCHIO"] { background: #f5f3ff; color: #7c3aed; }
.icona-mezzo[data-categoria="MACCHINA_OPERATRICE"], .icona-mezzo[data-categoria="ATTREZZATURA"] { background: #fff4ed; color: #ea580c; }
.icona-mezzo[data-categoria="CLIENTE"] { background: #effcf9; color: #0d9488; }
.scheda-media { max-width: 820px; }

.legenda-matrice { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin: .25rem 0 1rem; font-size: .88rem; }
.legenda-matrice > span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-matrice .cella-matrice { width: 26px; height: 26px; cursor: default; }
.matrice-contenitore { overflow: auto; max-height: calc(100vh - 260px); }
.matrice { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.matrice th, .matrice td { padding: .3rem; border-bottom: 1px solid var(--bordo); border-right: 1px solid var(--bordo); text-align: center; }
.matrice thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; }
.matrice tbody th { position: sticky; left: 0; background: #fff; text-align: left; white-space: nowrap; padding: .4rem .8rem; z-index: 1; }
.matrice tbody th a { color: var(--testo); font-weight: 600; margin-right: .4rem; }
.matrice .angolo { left: 0; z-index: 3; text-align: left; padding: .5rem .8rem; }
.matrice th.verticale { height: 110px; vertical-align: bottom; padding-bottom: .5rem; }
.matrice th.verticale a { writing-mode: vertical-rl; transform: rotate(180deg); font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--testo); }
.matrice tbody tr:hover th, .matrice tbody tr:hover td { background: #f8fafc; }
.cella-matrice { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px dashed var(--bordo-forte);
  background: #fff; color: #cbd5e1; font-weight: 700; font: inherit; font-weight: 700; cursor: pointer; transition: transform .08s; }
button.cella-matrice:hover { transform: scale(1.08); border-color: var(--accento); }
.cella-matrice.v-COMPATIBILE { background: var(--verde-chiaro); border: 1px solid #6ee7b7; color: var(--verde); }
.cella-matrice.v-ABITUALE { background: var(--verde); border: 1px solid var(--verde); color: #fff; }
.cella-matrice.v-NON_COMPATIBILE, .cella-matrice.v-NO { background: var(--rosso-chiaro); border: 1px solid #fca5a5; color: var(--rosso); }
.cella-matrice.v-DA_CONFERMARE { background: var(--giallo-chiaro); border: 1px solid var(--giallo-bordo); color: var(--giallo); }
.cella-matrice.htmx-request { opacity: .5; }

/* =====================================================================
   CALCOLATORE TE (M3)
   ===================================================================== */
.simulatore { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 1.25rem; align-items: start; }
.simulatore > form { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.simulatore .griglia-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: .75rem; }
.titolo-gruppo { display: flex; align-items: center; gap: .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accento); margin: 1.25rem 0 0; padding-top: .9rem; border-top: 1px solid var(--bordo); }
.titolo-gruppo:first-of-type { border-top: 0; padding-top: 0; margin-top: .25rem; }
.simulatore-risultati .indicatori { margin-top: 0; margin-bottom: 1rem; }
.tabella tr.totale td { font-weight: 700; background: #f8fafc; }
.testo-giallo { color: var(--giallo); }
@media (max-width: 1100px) { .simulatore { grid-template-columns: 1fr; } .simulatore > form { position: static; max-height: none; } }

/* =====================================================================
   RICHIESTE E PREVENTIVI TE (M4)
   ===================================================================== */
.etichetta.viola { background: var(--viola-chiaro); color: var(--viola); border: 1px solid #ddd6fe; }
.semaforo-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--bordo-forte); vertical-align: middle; }
.semaforo-punto.verde { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-chiaro); }
.semaforo-punto.arancione { background: #f59e0b; box-shadow: 0 0 0 3px var(--giallo-chiaro); }
.semaforo-punto.rosso { background: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-chiaro); }
.pulsante-grande-azione { padding: .9rem 1.4rem; font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.pulsante-grande-azione .icona { width: 22px; height: 22px; }
.numero-passo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accento); color: #fff; font-weight: 700; font-size: .85rem; }
.indicatore-sagoma { margin-left: auto; font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border-radius: 99px; background: var(--sfondo); color: var(--testo-tenue); border: 1px solid var(--bordo); }
.indicatore-sagoma.verde { background: var(--verde-chiaro); color: var(--verde); border-color: #a7f3d0; }
.indicatore-sagoma.gialla { background: var(--giallo-chiaro); color: var(--giallo); border-color: var(--giallo-bordo); }
.indicatore-sagoma.rossa { background: var(--rosso-chiaro); color: var(--rosso); border-color: #fecaca; }
.nuovo-cliente { margin-top: 1rem; padding: .75rem 1rem; border: 1px dashed var(--bordo-forte); border-radius: 12px; }
.nuovo-cliente summary, details > summary { cursor: pointer; font-weight: 500; color: var(--accento); display: flex; align-items: center; gap: .4rem; }
.riquadro-traghetto { margin: .75rem 0; padding: 1rem; border-radius: 12px; background: var(--accento-chiaro); }
.conferma-km { margin-top: 1rem; padding: 1rem; border-radius: 12px; border: 2px solid var(--giallo-bordo); background: var(--giallo-chiaro); }
.conferma-km.confermato { border-color: #6ee7b7; background: var(--verde-chiaro); }
.casella-grande { font-size: 1rem; margin-top: .75rem; }
.casella-grande input { width: 20px; height: 20px; }
.valore-calcolato { font-size: 1.2rem; font-weight: 700; margin: .2rem 0; }
.scelte-radio { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.scelte-radio .radio { display: flex; align-items: center; gap: .4rem; font-weight: 500; margin: .3rem 0; }
.scelte-radio .radio input { width: 18px; height: 18px; }
.domanda-scorta { padding: .75rem 1rem; border-radius: 12px; background: #f8fafc; border: 1px solid var(--bordo); margin-bottom: .75rem; }
.domanda-scorta.con-errore { border-color: var(--rosso); background: var(--rosso-chiaro); }
.elenco-caselle { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .25rem 1rem; }
.barra-azioni-fondo { position: sticky; bottom: 1rem; top: auto; margin-top: 1rem; }
.avviso.successo { background: var(--verde-chiaro); border-color: #a7f3d0; color: #065f46; }
.avviso.in-linea { display: inline-flex; margin: 0; padding: .45rem .8rem; font-size: .88rem; }
.avviso ul { margin: .3rem 0 0; }
.testata-preventivo { padding: 1rem 1.5rem; }
.grassetto { font-weight: 700; }
.azioni-preventivo .scheda-corpo { padding: .9rem 1.25rem; }
.azioni-preventivo form { margin: 0; }
.a-destra { margin-left: auto; }
.campo-largo { width: 360px !important; }
details.esito { position: relative; }
details.esito > summary { list-style: none; }
details.esito > summary::-webkit-details-marker { display: none; }
details.esito[open] > form { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; width: 360px; padding: 1rem;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-alta); }
.tabella-voci tr.modificata td { background: var(--giallo-chiaro); }
.modifica-voce { position: relative; }
.modifica-voce .tendina { right: 0; width: 300px; z-index: 30; }
.aggiungi-voce, .chiudi-richiesta { margin-top: 0; }
.tabella-proposte td { padding-top: .55rem; padding-bottom: .55rem; }
.tabella-proposte tr.scelta td { background: var(--verde-chiaro); }
.tabella-proposte tr.proposta-rosso td { color: var(--testo-tenue); }
.pulsante.piccolo { padding: .3rem .65rem; font-size: .82rem; }
.pulsante-link-scuro { background: none; border: 0; color: var(--accento); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.indicatore.semaforo-rosso { border-color: #fca5a5; }
.indicatore.semaforo-verde { border-color: #a7f3d0; }

/* ---------- M5: pianificazione, viaggi, fatture ---------- */
.pulsante.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.pulsante.pericolo:hover { background: #b91c1c; color: #fff; }
.testo-rosso { color: var(--rosso); font-weight: 600; }
.campo-corto { width: 7.5rem; }
.gantt-area { display: flex; gap: 1rem; align-items: flex-start; }
.gantt-attesa { width: 260px; flex-shrink: 0; max-height: 75vh; overflow: auto; }
.gantt-scheda { flex: 1; min-width: 0; width: 100%; padding: .5rem; }
.gantt-da-programmare { border: 1px dashed var(--giallo-bordo); background: var(--giallo-chiaro); border-radius: var(--raggio-piccolo);
  padding: .55rem .7rem; margin-bottom: .6rem; cursor: grab; }
.gantt-da-programmare:active { cursor: grabbing; }
.gantt-legenda { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; }
.gantt-legenda span { padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--bordo); }
#gantt .vis-timeline { border: 0; font-family: inherit; }
#gantt .vis-label { color: var(--testo); font-size: .82rem; }
#gantt .vis-label.vis-group-level-unknown-but-gte1 { border: 0; border-bottom: 1px solid var(--bordo); }
#gantt .vis-label.vis-nested-group .vis-inner { padding-left: 1.2rem; }
#gantt .vis-label.gruppo-padre, #gantt .vis-group.gruppo-padre { background: var(--sfondo); font-weight: 700; }
#gantt .vis-item { border-radius: 7px; font-size: .78rem; border-width: 1px; }
#gantt .vis-item.vis-selected { box-shadow: 0 0 0 3px var(--accento-chiaro); }
.stato-da_programmare { background: var(--giallo-chiaro) !important; border-color: var(--giallo-bordo) !important; color: var(--giallo); }
.stato-programmato { background: #dbeafe !important; border-color: #93c5fd !important; color: #1e3a8a; }
.stato-in_partenza, .stato-in_viaggio, .stato-in_scarico { background: #d1fae5 !important; border-color: #6ee7b7 !important; color: #065f46; }
.stato-completato, .stato-da_fatturare, .stato-consuntivato { background: #f1f5f9 !important; border-color: var(--bordo-forte) !important; color: var(--testo-tenue); }
#gantt .vis-item.forzato { border: 2px dashed var(--rosso) !important; }
#gantt .vis-item.vis-background.assenza, .gantt-legenda .assenza { background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 6px, #fef2f2 6px, #fef2f2 12px) !important; color: #991b1b; }
.gantt-sotto { font-size: .7rem; color: var(--testo-tenue); }
.gantt-fermo { font-size: .66rem; color: var(--rosso); margin-left: .3rem; }
.gantt-autista { display: flex; align-items: center; gap: .4rem; }
.gantt-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.gantt-foto.vuota { display: inline-grid; place-items: center; background: var(--accento-chiaro); color: var(--accento); font-size: .62rem; font-weight: 700; }
.gantt-caricamento:empty { display: none; }
.dialogo { border: 0; border-radius: var(--raggio); box-shadow: var(--ombra-alta); padding: 1.4rem; max-width: 520px; width: 92vw; }
.dialogo::backdrop { background: rgba(15, 23, 42, .45); }
.dialogo h2 { display: flex; gap: .5rem; align-items: center; font-size: 1.05rem; color: var(--rosso); margin-top: 0; }
.avanzamento { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; gap: .3rem; flex-wrap: wrap; counter-reset: passo; }
.avanzamento li { flex: 1; min-width: 110px; padding: .5rem .7rem; font-size: .78rem; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo); color: var(--testo-tenue); counter-increment: passo; }
.avanzamento li::before { content: counter(passo) " · "; font-weight: 700; }
.avanzamento li.fatto { background: var(--verde-chiaro); border-color: #a7f3d0; color: var(--verde); }
.avanzamento li.attuale { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(37, 99, 235, .25); }
.cronologia { list-style: none; margin: 0; padding: .6rem 1.1rem 1rem; }
.cronologia li { padding: .35rem 0; border-bottom: 1px solid var(--bordo); font-size: .85rem; }
@media (max-width: 900px) { .gantt-area { flex-direction: column; align-items: stretch; } .gantt-attesa { width: 100%; max-height: none; } }

/* =====================================================================
   TEMA MINIMAL (29/09/2026)
   Superfici bianche, bordi sottili, niente ombre né sfumature.
   Il colore sta solo nelle icone (un colore fisso per area) e negli stati.
   Questa sezione prevale sulle regole precedenti.
   ===================================================================== */
:root {
  --sfondo: #fafafa;
  --carta: #ffffff;
  --testo: #1f2328;
  --testo-tenue: #6b7280;
  --bordo: #ececec;
  --bordo-forte: #dcdcdc;
  --raggio: 10px;
  --raggio-piccolo: 8px;
  --ombra: none;
  --ombra-alta: 0 8px 24px rgba(0, 0, 0, .08);
  --larghezza-laterale: 236px;
  --accento-sfumato: var(--accento);
}
body { background: var(--sfondo); }
.icona { width: 18px; height: 18px; }
.icona.piccola { width: 15px; height: 15px; }
.icona.mini { width: 13px; height: 13px; margin: 0; }

/* Menu laterale chiaro */
.laterale { background: var(--carta); color: var(--testo); border-right: 1px solid var(--bordo); padding-top: .75rem; }
.azienda-attiva { position: relative; margin: 0 .6rem .75rem; }
.azienda-pulsante { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: var(--raggio);
  background: none; font: inherit; color: var(--testo); cursor: pointer; text-align: left; }
.azienda-pulsante:hover { background: #f4f4f5; }
.azienda-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  background: var(--accento-chiaro); color: var(--accento); font-weight: 700; font-size: .75rem; letter-spacing: .03em; }
.azienda-logo img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.azienda-logo.piccolo { width: 26px; height: 26px; font-size: .65rem; }
.azienda-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.azienda-nome strong { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.azienda-nome small { color: var(--testo-tenue); font-size: .75rem; display: flex; align-items: center; gap: .2rem; }
.azienda-scelta { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-alta); padding: .3rem; }
.azienda-scelta button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem; border: 0; border-radius: 7px;
  background: none; font: inherit; font-size: .85rem; color: var(--testo); cursor: pointer; text-align: left; }
.azienda-scelta button:hover, .azienda-scelta button.attiva { background: #f4f4f5; }
.azienda-scelta button[data-sigla="CT"] .azienda-logo { background: #eff4ff; color: #2563eb; }
.azienda-scelta button[data-sigla="PDL"] .azienda-logo { background: #effaf2; color: #16a34a; }

.navigazione { padding: 0 .6rem 1rem; flex: 1; }
.nav-sezione { font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--testo-tenue); font-weight: 500;
  margin: 1rem .6rem .3rem; display: flex; align-items: center; justify-content: space-between; }
.nav-gruppo summary { list-style: none; cursor: pointer; }
.nav-gruppo summary::-webkit-details-marker { display: none; }
.nav-gruppo[open] summary .icona { transform: rotate(180deg); }
.nav-voce { gap: .7rem; padding: .5rem .6rem; margin-bottom: 1px; border-radius: 8px; color: var(--testo); font-weight: 400; font-size: .92rem; }
.nav-voce .icona { color: var(--c, var(--testo-tenue)); width: 19px; height: 19px; }
.nav-voce:hover { background: #f4f4f5; color: var(--testo); }
.nav-voce.attiva { background: #f1f1f2; color: var(--testo); font-weight: 600; box-shadow: none; }
.nav-voce.attiva .icona { color: var(--c); filter: none; }
.marchio-piede { padding: .8rem 1.2rem 1rem; font-size: .7rem; letter-spacing: .12em; color: #b4b4b8; font-weight: 600; }

/* Testata della pagina */
.testata { background: var(--sfondo); backdrop-filter: none; border-bottom: 0; padding: 1.4rem 2.2rem .6rem; }
.testata-titolo h1 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.testata-titolo p { font-size: .88rem; }
.testata-destra { gap: .6rem; }
.avatar { background: #f1f1f2; color: var(--testo); border-radius: 50%; width: 32px; height: 32px; font-size: .78rem; }
.utente-nome { display: none; }
.utente-pulsante:hover { background: #f1f1f2; border-color: transparent; }
.contenuto { padding: 1rem 2.2rem 3rem; max-width: 1240px; }

/* Schede, pulsanti, etichette: piatti */
.scheda, .indicatore, .testata-persona, .comparto, .roadmap { box-shadow: none; border-color: var(--bordo); border-radius: var(--raggio); }
.scheda-testata { padding: .85rem 1.1rem; border-bottom-color: #f2f2f2; }
.scheda-testata h2 { font-size: .98rem; font-weight: 600; }
.scheda-corpo { padding: 1.1rem; }
.pulsante { border-radius: 8px; font-size: .88rem; padding: .5rem .9rem; border-color: var(--bordo-forte); }
.pulsante:hover { border-color: #bdbdbd; color: var(--testo); background: #f7f7f7; }
.pulsante.primario { box-shadow: none; }
.pulsante.primario.evidenzia { box-shadow: 0 0 0 3px var(--accento-chiaro); }
.etichetta { font-weight: 500; border: 0 !important; padding: .15rem .5rem; border-radius: 6px; }
.etichetta.neutra, .etichetta.grigia { background: #f1f1f2; color: #4b5563; }
.conteggio { background: none; border: 0; padding: 0; color: var(--testo-tenue); font-weight: 500; }
.messaggio, .avviso { border-radius: var(--raggio); font-size: .9rem; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], input[type=file],
input[type=email], input[type=tel], input[type=url], input[type=time], input[type=datetime-local], select, textarea {
  border-radius: 8px; border-color: var(--bordo-forte); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accento-chiaro); }
label { font-weight: 500; color: #374151; }

/* Tabelle leggere */
.tabella th { background: none; text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; color: var(--testo-tenue); }
.tabella th, .tabella td { padding: .7rem 1.1rem; border-bottom-color: #f2f2f2; }
.tabella tbody tr:hover td { background: #fafafa; }

/* Indicatori: solo simbolo colorato, senza riquadro */
.indicatore { padding: 1rem 1.1rem; }
.indicatore-icona { width: auto; height: auto; background: none !important; }
.indicatore-icona .icona { width: 24px; height: 24px; }
.indicatore-icona.blu { color: var(--accento); }
.indicatore-icona.verde { color: #3B6D11; }
.indicatore-icona.giallo { color: #BA7517; }
.indicatore-icona.rosso { color: #A32D2D; }
.indicatore-icona.viola { color: #534AB7; }
.indicatore-valore { font-weight: 600; }
.icona-mezzo, .comparto-icona { background: none !important; }
.icona-mezzo .icona { width: 30px; height: 30px; color: #BA7517; }

/* Cruscotto «Oggi» */
.contatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
.contatore { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); color: var(--testo); transition: border-color .15s; }
.contatore:hover { border-color: #cfcfcf; }
.contatore > .icona { width: 26px; height: 26px; color: var(--c); }
.contatore strong { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.contatore span { font-size: .84rem; color: var(--testo-tenue); }
.contatore em { font-style: normal; color: #A32D2D; }
.titolo-lista { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; }
.lista-azioni, .lista-comparti { list-style: none; margin: 0 0 2rem; padding: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.lista-azioni li, .lista-comparti li { border-bottom: 1px solid #f2f2f2; }
.lista-azioni li:last-child, .lista-comparti li:last-child { border-bottom: 0; }
.lista-azioni a, .lista-comparti a, .lista-comparti .in-arrivo { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.1rem; color: var(--testo); }
.lista-azioni a:hover, .lista-comparti a:hover { background: #fafafa; }
.lista-azioni .icona, .lista-comparti .icona { color: var(--c, var(--testo-tenue)); width: 19px; height: 19px; }
.lista-testo { flex: 1; min-width: 0; }
.lista-nota { font-size: .8rem; color: var(--testo-tenue); white-space: nowrap; }
.lista-nota.errore { color: #A32D2D; font-weight: 500; }
.lista-nota.attenzione { color: #BA7517; font-weight: 500; }
.lista-apri { font-size: .82rem; color: var(--accento); display: flex; align-items: center; gap: .25rem; }
.lista-azioni .lista-apri .icona { color: var(--accento); width: 13px; height: 13px; }
.lista-vuota { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: var(--testo-tenue); }
.lista-vuota .icona { color: #3B6D11; }
.lista-comparti .in-arrivo { color: var(--testo-tenue); }
.lista-comparti li[data-codice="TE"]  { --c: #2563eb; }
.lista-comparti li[data-codice="RIF"] { --c: #0d9488; }
.lista-comparti li[data-codice="NOL"] { --c: #7c3aed; }
.lista-comparti li[data-codice="EDI"] { --c: #ea580c; }
.lista-comparti li[data-codice="OFF"] { --c: #0284c7; }
.lista-comparti li[data-codice="CAR"] { --c: #db2777; }
.lista-comparti li[data-codice="PRO"] { --c: #a16207; }

/* Avviso di cambio azienda più sobrio */
.cambio-avviso { border-left-width: 4px; border-radius: var(--raggio); padding: .9rem 1.3rem .9rem .9rem; }
.cambio-avviso strong { font-size: 1.15rem; }
.cambio-avviso-logo { width: 48px; height: 48px; border-radius: 10px; }

@media (max-width: 900px) {
  .testata { padding: .9rem 1rem .4rem; }
  .contenuto { padding: .75rem 1rem 2.5rem; }
  .lista-nota { display: none; }
}
.sezione-icona { background: none !important; width: auto; height: auto; }
.sezione-icona .icona { width: 26px; height: 26px; }
.sezione-mezzi { box-shadow: none !important; }

/* Pagine di dettaglio (preventivo, viaggio): riga di stato, riepilogo in una riga, sezioni richiudibili */
.riga-stato { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 1rem; }
.riepilogo { display: flex; flex-wrap: wrap; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 1.25rem; }
.riepilogo > div { flex: 1 1 140px; padding: .8rem 1.1rem; border-right: 1px solid #f2f2f2; display: flex; flex-direction: column; }
.riepilogo > div:last-child { border-right: 0; }
.riepilogo span { font-size: .78rem; color: var(--testo-tenue); }
.riepilogo strong { font-size: 1.15rem; font-weight: 600; }
.riepilogo small { font-size: .78rem; color: var(--testo-tenue); }
.riepilogo .semaforo-verde strong { color: #3B6D11; }
.riepilogo .semaforo-arancione strong { color: #BA7517; }
.riepilogo .semaforo-rosso strong { color: #A32D2D; }
.azioni-preventivo { margin-bottom: 1.25rem; }
details.scheda > summary { list-style: none; cursor: pointer; }
details.scheda > summary::-webkit-details-marker { display: none; }
details.scheda > summary.scheda-testata::after { content: "›"; margin-left: auto; color: var(--testo-tenue); font-size: 1.2rem; transform: rotate(90deg); transition: transform .15s; }
details.scheda[open] > summary.scheda-testata::after { transform: rotate(-90deg); }
details.scheda:not([open]) > summary.scheda-testata { border-bottom: 0; }
.testata-persona { padding: 1.1rem 1.25rem; }
.avanzamento li { border-radius: 8px; }
.avanzamento li.attuale { box-shadow: none; }

/* ---------- M6: controllo di gestione ---------- */
.grafico { position: relative; height: 280px; }
.sintesi { font-size: 1.05rem; margin: 0 0 1rem; }
.riga-evidenza td { background: #fffbeb; }
.testo-verde { color: #3B6D11; font-weight: 600; }
.lista-controlli { list-style: none; margin: 0; padding: .4rem 0; }
.lista-controlli li { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; }
.lista-controlli li.fatto .icona { color: #3B6D11; }
.lista-controlli li.manca .icona { color: #A32D2D; }
.lista-controlli li.avviso .icona { color: #BA7517; }
.altri-campi { margin: .5rem 0 1rem; }
.altri-campi summary { cursor: pointer; padding: .4rem 0; }
.tabella tfoot td { border-top: 1px solid var(--bordo); border-bottom: 0; }
.barra-filtri .campo { margin: 0; }
.barra-filtri .campo label { margin-top: 0; }

/* ---------- Officina ---------- */
.bacheca { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; align-items: start; }
.bacheca-colonna h2 { font-size: .9rem; font-weight: 600; margin: 0 0 .5rem; display: flex; gap: .4rem; align-items: center; }
.bacheca-scheda { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; margin-bottom: .6rem; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); color: var(--testo); }
.bacheca-scheda:hover { border-color: #cfcfcf; }
.banco { display: flex; flex-direction: column; gap: .7rem; }
.banco-lavoro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); }
.banco-lavoro.in-corso { border-color: #6ee7b7; background: #f0fdf7; }
.banco-lavoro form { margin: 0; }
.grande-tocco { font-size: 1.05rem; padding: .85rem 1.3rem; min-width: 9rem; justify-content: center; }
.scelte-radio { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.scelte-radio .radio { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; }
.scelte-radio .radio input { width: auto; }
@media (max-width: 600px) { .banco-lavoro { flex-direction: column; align-items: stretch; } .grande-tocco { width: 100%; } }

/* ---------- Noleggio: calendario dei veicoli ---------- */
.calendario-scorrevole { overflow-x: auto; }
.calendario { border-collapse: collapse; width: 100%; font-size: .75rem; }
.calendario th, .calendario td { border-bottom: 1px solid #f2f2f2; border-left: 1px solid #f5f5f5; padding: 0; height: 38px; min-width: 26px; text-align: center; }
.calendario th { font-weight: 500; color: var(--testo-tenue); padding: .3rem 0; line-height: 1.2; }
.calendario th.festivo { color: #b4b4b8; }
.calendario .oggi { background: #eff4ff; }
.calendario-mezzo { text-align: left !important; padding: .35rem .7rem !important; min-width: 170px; white-space: nowrap; position: sticky; left: 0; background: var(--carta); }
.calendario td a { display: block; width: 100%; height: 100%; min-height: 38px; }
.calendario td a.libero:hover { background: #f4f4f5; }
.calendario td.occupato.stato-prenotato { background: #e0dcfb; }
.calendario td.occupato.stato-consegnato { background: #fde7c0; }
.calendario td.occupato.stato-rientrato, .calendario td.occupato.stato-chiuso { background: #e6ecdc; }

/* Presenze: righe non cliccabili nelle liste */
.lista-azioni .lista-voce { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.1rem; }

/* Telefono: contatori due per riga, così «Da fare» si vede senza scorrere troppo */
@media (max-width: 600px) {
  .contatori { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .contatore { padding: .7rem .8rem; gap: .6rem; }
  .contatore strong { font-size: 1.25rem; }
  .contatore span { font-size: .78rem; }
  .testata-titolo h1 { font-size: 1.2rem; }
}

/* Percorso a tratte */
.caselle-percorso { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .5rem 0; }
.tabella-tratte .campo-km { width: 7rem; text-align: right; }
.tabella-tratte .riga-gruppo td { font-weight: 600; color: var(--testo-secondario, #555); padding-top: .8rem; }
.tabella-tratte .icona-tratta { width: 2rem; }
.testo-email { white-space: pre-wrap; font-family: inherit; font-size: .85rem; margin: .4rem 0; }

/* Proposta mezzi e autisti in cima al preventivo */
.proposta-risorse { border-left: 4px solid #0F6E56; }
.proposta-corpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.proposta-corpo .dati { margin: 0; }

/* Gantt: scelta delle righe (mezzi / persone) */
.scelta-righe .pulsante.attivo { background: #0F6E56; color: #fff; border-color: #0F6E56; }
.scelta-righe .pulsante.attivo svg { color: #fff; }

/* Fattura elettronica */
.stato-xml { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.tabella-righe-fattura textarea { width: 100%; min-width: 14rem; font: inherit; }
.tabella-righe-fattura input { width: 6.5rem; text-align: right; }
.tabella-righe-fattura input[name=riga_unita] { width: 4.5rem; text-align: left; }
.tabella-righe-fattura .riga-nuova { opacity: .75; }
.barra-azioni-modulo { display: flex; gap: .6rem; justify-content: flex-end; margin: 1rem 0; }


/* =====================================================================
   TEMA AZIENDA E COMPARTI (collaudo 02/10/2026)
   - l'azienda attiva si riconosce a colpo d'occhio: fascia in alto, blocco pieno
     nel menu, targhetta in testata, sfondo appena tinto
   - ogni comparto ha un colore: sezione del menu, pillola sopra il titolo, blocchi di «Oggi»
   ===================================================================== */
:root { --azienda: #1d4ed8; --azienda-scuro: #1e3a8a; --azienda-tinta: #f3f7ff; }
body[data-azienda="PDL"] { --azienda: #15803d; --azienda-scuro: #14532d; --azienda-tinta: #f2faf4; }
body { background: var(--azienda-tinta); }
.app::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 5px; background: var(--azienda); z-index: 60; }
.laterale { padding-top: 5px; border-right: 0; box-shadow: inset -1px 0 0 var(--bordo); }
.azienda-attiva { margin: 0 0 .6rem; }
.azienda-pulsante { background: var(--azienda); color: #fff; border-radius: 0; padding: .9rem .9rem; }
.azienda-pulsante:hover { background: var(--azienda-scuro); }
.azienda-pulsante .azienda-logo { background: #fff; color: var(--azienda); width: 38px; height: 38px; }
.azienda-pulsante .azienda-nome strong { color: #fff; font-size: .95rem; }
.azienda-pulsante .azienda-nome small { color: rgba(255, 255, 255, .85); }
.azienda-pulsante .icona { color: #fff; }
.azienda-scelta { left: .6rem; right: .6rem; }
.azienda-scelta button[data-sigla="CT"] .azienda-logo { background: #1d4ed8; color: #fff; }
.azienda-scelta button[data-sigla="PDL"] .azienda-logo { background: #15803d; color: #fff; }
.azienda-targhetta { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px; background: var(--azienda);
  color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .02em; white-space: nowrap; }
.pulsante.primario { background: var(--azienda); border-color: var(--azienda); }
.pulsante.primario:hover { background: var(--azienda-scuro); border-color: var(--azienda-scuro); }
.testata { background: #fff; border-bottom: 1px solid var(--bordo); margin-top: 5px; }

/* cambio azienda: avviso grande a tutto schermo, nel colore della nuova azienda */
.cambio-avviso { background: var(--azienda); color: #fff; border: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); padding: 1.4rem 2rem;
  font-size: 1.15rem; }
.cambio-avviso strong { color: #fff; font-size: 1.5rem; }
.cambio-avviso .etichetta-piccola { color: rgba(255, 255, 255, .85); }
.cambio-avviso-logo { background: #fff; color: var(--azienda); }

/* menu: un blocco per comparto, con il suo colore */
.nav-area { margin: 0 .5rem .45rem; border-radius: 10px; border-left: 4px solid var(--area, transparent); padding: .15rem 0 .25rem; }
.nav-area.attiva { background: color-mix(in srgb, var(--area) 9%, #fff); }
.nav-area .nav-sezione { display: flex; align-items: center; gap: .4rem; color: var(--area, var(--testo-tenue)); font-weight: 700;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .45rem .6rem .25rem; margin: 0; }
.nav-area .nav-sezione .icona { color: var(--area); }
.nav-area .nav-voce { margin: 1px .3rem; }
.nav-area .nav-voce.attiva { background: var(--area, var(--azienda)); color: #fff; }
.nav-area .nav-voce.attiva .icona { color: #fff; }

/* titolo pagina: pillola del comparto */
.area-pillola { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; background: var(--area);
  color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .2rem; }
.area-pillola .icona { color: #fff; }

/* «Oggi»: un riquadro per comparto */
.aree-da-fare { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: .9rem; align-items: start; }
.area-blocco { background: #fff; border: 1px solid var(--bordo); border-top: 4px solid var(--c); border-radius: 12px; overflow: hidden; }
.area-testata { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: color-mix(in srgb, var(--c) 8%, #fff); }
.area-testata h3 { margin: 0; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c); flex: 1; }
.area-testata .icona { color: var(--c); }
.area-conteggio { background: var(--c); color: #fff; border-radius: 999px; min-width: 1.5rem; text-align: center; font-size: .75rem; font-weight: 700;
  padding: .05rem .4rem; }
.area-blocco .lista-azioni { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 600px) { .azienda-targhetta { display: none; } .aree-da-fare { grid-template-columns: 1fr; } }
.nav-area .nav-sezione { justify-content: flex-start; text-align: left; }
.nav-area details > summary.nav-sezione .icona.mini { margin-left: auto; }
.lista-azioni .lista-testo { min-width: 0; }


/* =====================================================================
   TEMA «BLU NOTTE» (esempio del titolare, 03/10/2026)
   Menu e barra in alto scuri, foglio di lavoro chiaro con angolo arrotondato,
   caratteri più grandi, icone colorate, contorni morbidi.
   ===================================================================== */
:root {
  --notte: #0b1b34; --notte-2: #12284a; --notte-linea: rgba(255, 255, 255, .10); --notte-testo: #e6edf7; --notte-tenue: #9fb0c8;
  --azienda: #1463e0; --azienda-scuro: #0f4fb8; --azienda-tinta: #f6f9fd;
  --testo: #0d1b33; --testo-tenue: #5b6b82; --bordo: #e4eaf2; --bordo-forte: #cfd9e6;
  --raggio: 14px; --raggio-piccolo: 10px; --larghezza-laterale: 264px;
  --ombra: 0 1px 2px rgba(13, 27, 51, .04), 0 6px 20px rgba(13, 27, 51, .05);
}
body[data-azienda="PDL"] { --notte: #0b2a1d; --notte-2: #123b2a; --azienda: #15934a; --azienda-scuro: #0f7038; --azienda-tinta: #f5fbf7;
  --illustrazione-sfondo: #dff3e6; }
html { font-size: 16px; }
body { background: var(--notte); color: var(--testo); letter-spacing: -.005em; }
.app::before { display: none; }

/* --- menu laterale scuro */
.laterale { background: var(--notte); color: var(--notte-testo); box-shadow: none; border: 0; padding-top: 0; }
.azienda-attiva { margin: 0; }
.azienda-pulsante { background: transparent; border-radius: 0; height: 72px; padding: 0 1.1rem; gap: .8rem; border-bottom: 1px solid var(--notte-linea); }
.azienda-pulsante:hover { background: var(--notte-2); }
.azienda-pulsante .azienda-logo { background: var(--azienda); color: #fff; width: 42px; height: 42px; border-radius: 10px; font-size: .95rem; }
.azienda-pulsante .azienda-nome strong { font-size: 1.02rem; font-weight: 700; }
.azienda-pulsante .azienda-nome small { color: #6fb0ff; font-size: .82rem; font-weight: 500; }
body[data-azienda="PDL"] .azienda-pulsante .azienda-nome small { color: #7fe0a8; }
.azienda-scelta { left: .8rem; right: .8rem; top: 68px; }
.navigazione { padding: .6rem 0 1rem; }
.nav-area { margin: 0 .8rem; padding: .55rem 0 .6rem; border-left: 0; border-radius: 0; border-top: 1px solid var(--notte-linea); background: none; }
.nav-area:first-child { border-top: 0; }
.nav-area.attiva { background: none; position: relative; }
.nav-area.attiva::before { content: ""; position: absolute; left: -.55rem; top: .55rem; bottom: .55rem; width: 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--area) 75%, #fff); }
.nav-area .nav-sezione { color: var(--notte-tenue); font-size: .74rem; font-weight: 600; letter-spacing: .08em; padding: .35rem .55rem .4rem; }
.nav-area.attiva .nav-sezione { color: color-mix(in srgb, var(--area) 55%, #fff); }
.nav-area .nav-sezione .icona { color: inherit; }
.nav-area .nav-voce { color: var(--notte-testo); font-size: 1rem; font-weight: 500; padding: .5rem .6rem; margin: 1px 0; border-radius: 10px; gap: .8rem; }
.nav-area .nav-voce .icona { width: 22px; height: 22px; color: color-mix(in srgb, var(--c) 62%, #fff); }
.nav-area .nav-voce:hover { background: var(--notte-2); color: #fff; }
.nav-area .nav-voce.attiva { background: color-mix(in srgb, var(--area, var(--azienda)) 78%, #000); color: #fff; font-weight: 600; }
.nav-area .nav-voce.attiva .icona { color: #fff; }
.nav-gruppo > summary { cursor: pointer; }
.marchio-piede { color: rgba(255, 255, 255, .28); }

/* --- barra in alto */
.principale { background: var(--notte); min-width: 0; }
.barra-alta { height: 72px; display: flex; align-items: center; gap: 1rem; padding: 0 1.4rem 0 1rem; color: var(--notte-testo); }
.cerca { flex: 1; max-width: 560px; margin: 0 auto 0 12%; display: flex; align-items: center; gap: .6rem; height: 44px; padding: 0 .8rem;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; }
.cerca:focus-within { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.cerca .icona { color: var(--notte-testo); width: 20px; height: 20px; flex-shrink: 0; }
.cerca input, .cerca input:focus { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: .98rem; outline: none;
  padding: 0; box-shadow: none; }
.cerca input::placeholder { color: var(--notte-tenue); }
.cerca kbd { font: inherit; font-size: .74rem; color: var(--notte-tenue); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px;
  padding: .1rem .4rem; white-space: nowrap; }
.barra-alta .barra-azioni { display: flex; align-items: center; gap: .35rem; position: static; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.barra-icona { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: var(--notte-testo); background: none;
  border: 0; cursor: pointer; }
.barra-icona:hover { background: var(--notte-2); color: #fff; }
.barra-icona .icona { width: 23px; height: 23px; }
.barra-alta .utente-pulsante { background: none; border: 0; color: var(--notte-testo); gap: .4rem; padding: .2rem .3rem; }
.barra-alta .avatar { width: 42px; height: 42px; background: #dfe7f3; color: var(--notte); font-weight: 700; font-size: .9rem; }
.barra-alta .tendina { color: var(--testo); }

/* --- foglio di lavoro */
.foglio { background: var(--azienda-tinta); border-top-left-radius: 22px; min-height: calc(100vh - 72px); overflow: hidden; }
.testata { background: none; border: 0; margin: 0; padding: 1.6rem 1.8rem .4rem; position: static; }
.testata-titolo h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--testo); }
.testata-titolo p { font-size: 1.08rem; color: var(--testo-tenue); margin-top: .2rem; }
.area-pillola { padding: .34rem .9rem .34rem .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; border-radius: 10px; gap: .5rem;
  margin-bottom: .45rem; }
.area-pillola .icona { width: 16px; height: 16px; }
.azienda-targhetta { padding: .55rem 1.1rem; font-size: .92rem; font-weight: 700; border-radius: 999px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--azienda) 35%, transparent); }
.contenuto { padding: 1rem 1.8rem 2.5rem; }

/* --- contorni, schede, pulsanti, campi */
.scheda, .contatore, .area-blocco, .lista-azioni { border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); background: #fff; }
.area-blocco { border-top: 4px solid var(--c); }
.area-blocco .lista-azioni { border: 0; box-shadow: none; }
.scheda-testata h2 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.pulsante { border-radius: 10px; font-weight: 600; padding: .6rem 1rem; border: 1px solid var(--bordo-forte); background: #fff; color: var(--testo);
  box-shadow: 0 1px 2px rgba(13, 27, 51, .05); }
.pulsante:hover { border-color: #b4c2d6; background: #f7f9fc; }
.pulsante.primario { background: var(--azienda); border-color: var(--azienda); color: #fff; }
.pulsante.primario:hover { background: var(--azienda-scuro); border-color: var(--azienda-scuro); }
.foglio input[type=text], .foglio input[type=email], .foglio input[type=number], .foglio input[type=date], .foglio input[type=time],
.foglio input[type=password], .foglio select, .foglio textarea { border-radius: 10px; border: 1px solid var(--bordo-forte); }
.foglio input:focus, .foglio select:focus, .foglio textarea:focus { outline: 0; border-color: var(--azienda);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azienda) 18%, transparent); }
.tabella th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-tenue); font-weight: 600; }
.etichetta { border-radius: 8px; font-weight: 600; }

/* --- riga informativa e stato vuoto */
.barra-filtri { background: #eaf2fd; border: 1px solid #d6e6fb; border-radius: var(--raggio); padding: .75rem 1rem; align-items: center; }
body[data-azienda="PDL"] .barra-filtri { background: #e9f6ee; border-color: #d2ecdc; }
.barra-filtri > .nota { color: var(--testo); font-size: 1rem; display: flex; align-items: center; gap: .6rem; }
.barra-filtri > .nota .icona { width: 24px; height: 24px; color: #fff; background: var(--azienda); border-radius: 50%; padding: 4px; }
.stato-vuoto, .vuoto { text-align: center; padding: 3.5rem 1rem; color: var(--testo-tenue); }
.stato-vuoto .illustrazione { width: 230px; max-width: 60%; height: auto; }
.stato-vuoto h2 { margin: 1rem 0 .4rem; font-size: 1.45rem; font-weight: 700; color: var(--testo); letter-spacing: -.01em; }
.stato-vuoto p { margin: 0 auto; max-width: 34rem; font-size: 1.08rem; }

/* --- cambio azienda */
.cambio-avviso { border-radius: 16px; }

@media (max-width: 900px) {
  .cerca { margin-left: 0; } .cerca kbd { display: none; }
  .foglio { border-top-left-radius: 0; } .testata { padding: 1rem 1rem .2rem; } .contenuto { padding: .8rem 1rem 2rem; }
  .testata-titolo h1 { font-size: 1.5rem; } .testata-titolo p { font-size: .95rem; }
  .barra-alta { height: 60px; padding: 0 .6rem; }
}

/* Simulatore edile e libreria */
.tabella-simulatore select { width: 100%; min-width: 16rem; }
.tabella-simulatore input { width: 9rem; text-align: right; }
.campo-in-linea { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.tabella .riga-gruppo td { font-weight: 700; color: var(--testo-tenue); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; background: #f7f9fc; }
.tabella tr.disattiva { opacity: .5; }

/* Edile: stato del lavoro, indicatori, Gantt dei cantieri */
.scheda-stato { border-left: 5px solid #B8860B; }
.azioni-stato { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.azioni-stato details.esito > summary { list-style: none; display: inline-flex; }
.azioni-stato details.esito[open] > form { margin-top: .5rem; }
.date-cantiere { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--bordo); }
.pulsante.rosso { background: #C92A2A; border-color: #C92A2A; color: #fff; }
.barra-avanzamento { position: relative; height: 12px; min-width: 9rem; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.indicatore-barra { position: absolute; inset: 0 auto 0 0; border-radius: 999px; max-width: 100%; }
.indicatore-barra.importo { background: #cbd5e1; }
.indicatore-barra.completato { background: #B8860B; }
.indicatore-barra.fatturato { background: #2B8A3E; height: 5px; top: auto; bottom: 0; }
.indicatore-grande .indicatore-riga { display: grid; grid-template-columns: 11rem 1fr 14rem; align-items: center; gap: 1rem; padding: .35rem 0; }
.indicatore-grande .barra-avanzamento { height: 16px; }
.indicatore-grande .indicatore-barra.fatturato { height: 100%; top: 0; }
.indicatore-grande strong { text-align: right; }
.tabella-sicurezza select, .tabella-sicurezza input[type=text] { width: 100%; }
.schede-filtro .conteggio { font-size: .75rem; opacity: .75; margin-left: .25rem; }
#gantt-cantieri .vis-item.cantiere-da_avviare, .gantt-legenda .cantiere-da_avviare { background: #fde68a; border-color: #d97706; color: #713f12; }
#gantt-cantieri .vis-item.cantiere-in_corso, .gantt-legenda .cantiere-in_corso { background: #B8860B; border-color: #8a6508; color: #fff; }
#gantt-cantieri .vis-item.cantiere-chiuso, .gantt-legenda .cantiere-chiuso { background: #cbd5e1; border-color: #94a3b8; color: #334155; }
#gantt-cantieri .vis-item.vis-background.sospensione, .gantt-legenda .sospensione { background: repeating-linear-gradient(45deg, rgba(201, 42, 42, .28), rgba(201, 42, 42, .28) 6px, rgba(201, 42, 42, .10) 6px, rgba(201, 42, 42, .10) 12px); color: #7f1d1d; }
#gantt-cantieri .vis-item { border-radius: 8px; cursor: pointer; }
@media (max-width: 700px) { .indicatore-grande .indicatore-riga { grid-template-columns: 1fr; gap: .2rem; } .indicatore-grande strong { text-align: left; } }

/* Utenti: foglio con la password provvisoria */
.credenziali code { font-size: 1.05rem; }
.password-provvisoria { font-size: 1.5rem !important; font-weight: 700; letter-spacing: .06em; padding: .35rem .7rem; background: #fff7d6;
  border: 1px dashed #d4a20c; border-radius: 8px; user-select: all; }
@media print { .laterale, .barra-alta, .fila-pulsanti, .messaggi { display: none !important; } .foglio { border-radius: 0; } }

/* Cantiere: persone e attrezzature (disponibili → assegnati) */
.elenco-risorse { max-height: 22rem; overflow-y: auto; border: 1px solid var(--bordo); border-radius: 10px; padding: .4rem .6rem; margin: .5rem 0; background: #fff; }
.elenco-risorse .risorsa { display: flex; align-items: center; gap: .5rem; padding: .3rem .2rem; border-bottom: 1px solid #f1f4f8; }
.riga-gruppo-risorse { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-tenue); margin: .5rem 0 .2rem; }
.campo-cerca-risorse { width: 100%; }
.periodo-assegnazione input[type=date] { width: 9.2rem; }
.tabella-assegnati td { vertical-align: top; }
.scelta-vista-gantt { margin-bottom: .8rem; }

/* Magazzino */
.tabella-righe-fattura .campo-materiale { width: 100%; min-width: 16rem; text-align: left; }

/* ---------- Pagina dell'autista (telefono) ---------- */
body.pagina-autista { background: var(--sfondo, #f3f5f9); }
.autista-testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem;
  background: var(--notte); color: #fff; position: sticky; top: 0; z-index: 5; }
.autista-testata div { display: flex; flex-direction: column; line-height: 1.25; }
.autista-testata span { font-size: .8rem; opacity: .75; }
.autista-testata form { margin: 0; }
.autista-corpo { max-width: 40rem; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.autista-corpo h1 { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.autista-viaggio { display: block; padding: 1rem 1.1rem; background: var(--carta, #fff); border: 1px solid var(--bordo, #e2e8f0);
  border-radius: 14px; color: inherit; text-decoration: none; }
.autista-viaggio-testa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1.05rem; }
.autista-viaggio-tratta { font-size: 1.1rem; font-weight: 600; margin: .35rem 0; }
.autista-passo label { display: block; font-weight: 600; margin-bottom: .4rem; }
.autista-passo input[type=text] { width: 100%; font-size: 1.5rem; padding: .7rem .8rem; margin-bottom: .8rem; letter-spacing: .04em; }
.autista-passo .grande-tocco, .autista-foto .grande-tocco { width: 100%; font-size: 1.15rem; padding: 1rem; }
.autista-dati { display: grid; grid-template-columns: 7.5rem 1fr; gap: .55rem .8rem; margin: 0; }
.autista-dati dt { color: var(--testo-tenue); font-size: .85rem; }
.autista-dati dd { margin: 0; font-weight: 500; }
.autista-foto { display: flex; flex-direction: column; gap: .7rem; }
.autista-foto input { width: 100%; font-size: 1rem; }
.autista-elenco-foto { margin: 0; padding-left: 1.6rem; font-size: .9rem; }

/* ---------- Azienda attiva sempre evidente: fasce in alto e in basso e bordo laterale ---------- */
body { --fascia: #1d4ed8; --fascia-testo: #fff; }
body[data-azienda="PDL"] { --fascia: #16a34a; }
.fascia-azienda { position: fixed; left: 0; right: 0; z-index: 60; background: var(--fascia); color: var(--fascia-testo); }
.fascia-azienda.alta { top: 0; height: 7px; }
.fascia-azienda.bassa { bottom: 0; height: 26px; display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.fascia-azienda.bassa span { opacity: .8; }
.app { padding-top: 7px; padding-bottom: 26px; box-sizing: border-box; }
.laterale { border-left: 7px solid var(--fascia); }
.azienda-targhetta { background: var(--fascia); color: var(--fascia-testo); }
@media print { .fascia-azienda { display: none !important; } .app { padding: 0; } .laterale { border-left: 0; } }

/* ---------- Officina: ogni stato del veicolo ha il suo colore (bacheca, elenco, scheda) ---------- */
[data-stato="ACCETTATO"] { --stato: #64748b; --stato-tinta: #f1f5f9; }
[data-stato="DIAGNOSI"] { --stato: #7c3aed; --stato-tinta: #f5f3ff; }
[data-stato="DA_APPROVARE"] { --stato: #d97706; --stato-tinta: #fffbeb; }
[data-stato="IN_LAVORAZIONE"] { --stato: #2563eb; --stato-tinta: #eff6ff; }
[data-stato="IN_ATTESA"] { --stato: #dc2626; --stato-tinta: #fef2f2; }
[data-stato="COLLAUDO"] { --stato: #0891b2; --stato-tinta: #ecfeff; }
[data-stato="PRONTO"] { --stato: #16a34a; --stato-tinta: #f0fdf4; }
[data-stato="CONSEGNATO"] { --stato: #166534; --stato-tinta: #dcfce7; }
[data-stato="ANNULLATO"] { --stato: #991b1b; --stato-tinta: #fee2e2; }
.bacheca-colonna[data-stato] { background: var(--stato-tinta); border-radius: 14px; padding: .7rem; border-top: 5px solid var(--stato); }
.bacheca-colonna[data-stato] h2 { color: var(--stato); }
.bacheca-colonna[data-stato] .conteggio { background: var(--stato); color: #fff; }
.bacheca-colonna[data-stato] .bacheca-scheda { border-left: 5px solid var(--stato); }
.etichetta.stato-officina { background: var(--stato); color: #fff; border: 0; font-weight: 600; }
.percorso-officina { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
.percorso-officina .passo { flex: 1 1 auto; text-align: center; padding: .5rem .6rem; font-size: .82rem; border-radius: 8px;
  background: var(--stato-tinta); color: var(--stato); border: 1px solid transparent; opacity: .55; white-space: nowrap; }
.percorso-officina .passo.attuale { background: var(--stato); color: #fff; font-weight: 700; opacity: 1; font-size: .95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }

/* ---------- Utenti: tabella dei moduli ---------- */
.tabella-scorrevole { overflow-x: auto; }
.matrice-moduli th, .matrice-moduli td { text-align: center; white-space: nowrap; padding: .45rem .5rem; }
.matrice-moduli thead th span { display: inline-block; max-width: 6.2rem; white-space: normal; font-size: .78rem; line-height: 1.15; }
.matrice-moduli tbody th { text-align: left; position: sticky; left: 0; background: var(--carta); z-index: 1; font-weight: 600; }
.matrice-moduli td label { font-size: .72rem; color: var(--testo-tenue); margin: 0 .12rem; }
.matrice-moduli td.cambiato { box-shadow: inset 0 0 0 2px #f59e0b; border-radius: 8px; }
.matrice-moduli td label { display: inline-flex; align-items: center; gap: .15rem; }
.indicatori { margin-bottom: 1.25rem; }

/* ---------- Banco dell'officina (tablet): tessere quadrate da toccare ---------- */
body.pagina-banco { background: var(--sfondo); }
.banco-corpo { max-width: 1200px; margin: 0 auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.banco-corpo h1 { font-size: 1.7rem; margin: 0; }
.banco-corpo h2 { font-size: 1.15rem; margin: .4rem 0 0; color: var(--testo-tenue); font-weight: 600; }
.tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.tessere form { margin: 0; display: contents; }
.tessera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; text-align: center;
  aspect-ratio: 1 / 1; padding: 1rem; background: var(--carta); border: 2px solid var(--bordo); border-radius: 22px; color: var(--testo);
  text-decoration: none; font: inherit; font-size: 1.1rem; cursor: pointer; box-shadow: var(--ombra); width: 100%; }
.tessera:active { transform: scale(.97); }
.tessera strong { font-size: 1.15rem; line-height: 1.2; }
.tessera-sigla { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #e2e8f0;
  font-size: 1.6rem; font-weight: 700; color: #0f172a; }
.tessera-nota { font-size: .85rem; color: var(--testo-tenue); line-height: 1.25; }
.tessera.al-lavoro { border-color: #16a34a; background: #f0fdf4; }
.tessera.al-lavoro .tessera-sigla { background: #16a34a; color: #fff; }
.tessera.lavoro .targa { font-size: 1.25rem; }
.tessera.suggerita { border-color: #2563eb; background: #eff6ff; }
.tessera.a-voce { border-style: dashed; border-color: #d97706; background: #fffbeb; }
.tessera.a-voce .tessera-sigla { background: #d97706; color: #fff; }
.banco-fine { margin: 0; }
.tessera.fine { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 1.2rem; padding: 1.4rem 1.6rem;
  border-color: #dc2626; background: #fef2f2; text-align: left; }
.tessera.fine .tessera-sigla { background: #dc2626; color: #fff; }
.tessera.fine strong { font-size: 1.5rem; }
.banco-voce { padding: 1.3rem; display: flex; flex-direction: column; gap: .8rem; }
.banco-voce label { font-weight: 600; }
.banco-voce textarea, .banco-voce input[type=text] { font-size: 1.25rem; padding: .8rem; width: 100%; }
.banco-detta { display: flex; gap: .8rem; align-items: stretch; }
.banco-detta textarea { flex: 1; }
.banco-voce .grande-tocco { font-size: 1.25rem; padding: 1.1rem; }
.tessera.ore { border-style: dashed; border-color: #7c3aed; background: #f5f3ff; }
.tessera.ore .tessera-sigla { background: #7c3aed; color: #fff; }
.scelte-lavoro { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.scelta-lavoro { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .9rem 1rem; border: 2px solid var(--bordo);
  border-radius: 14px; background: var(--carta); font-weight: 400; cursor: pointer; font-size: 1.05rem; }
.scelta-lavoro input { width: 1.3rem; height: 1.3rem; }
.scelta-lavoro.scelta { border-color: #2563eb; background: #eff6ff; }
.scelta-lavoro.a-voce { border-style: dashed; }

/* ---------- Firma dei documenti ---------- */
.tela-firma { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; border: 2px dashed var(--bordo-forte);
  border-radius: 12px; background: #fff; touch-action: none; display: block; margin-bottom: .8rem; }