/* ============================================================
   KARMA — design system
   Identità: grigio #575656, rosso #E30613, bianco, tricolore.
   Tipografia geometrica e leggera, come il marchio.
   ============================================================ */
:root {
  --rosso: #e30613;
  --rosso-scuro: #b7050f;
  --rosso-tenue: #fdeced;
  --grigio: #575656;
  --grigio-2: #7c7b7b;
  --grigio-3: #a9a8a8;
  --carbone: #2e2d2d;
  --verde: #009246;

  --ok: #1b8a52;
  --warn: #b37400;
  --err: #c1121f;

  --testo: #2e2d2d;
  --testo-2: #7c7b7b;
  --bordo: #e4e4e6;
  --bordo-forte: #d2d2d5;
  --sfondo: #f4f4f5;
  --card: #ffffff;
  --evidenza: #fafafa;

  --r: 10px;
  --r-g: 14px;
  --ombra: 0 1px 2px rgba(46,45,45,.04), 0 10px 28px -18px rgba(46,45,45,.35);
  --ombra-alta: 0 24px 60px -28px rgba(46,45,45,.45);
  --sidebar: 248px;

  --font: "Kuadra", "Avenir Next", "Segoe UI", Roboto, -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-titolo: "Kuadra", "Avenir Next", "Futura", "Century Gothic", "Segoe UI",
                 Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --testo: #ececed; --testo-2: #a3a2a2; --bordo: #343334; --bordo-forte: #454445;
    --sfondo: #171717; --card: #212021; --evidenza: #1b1a1b; --carbone: #f4f4f5;
    --rosso-tenue: #37191b;
    --ombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}

/* ------------------------------------------------------------ caratteri
   Instrument Sans (SIL OFL), distribuito con l'applicazione: lo stesso
   carattere dei PDF. Il logotipo "Kuadra" non è composto, è disegnato
   (templates/_marchio.html, dallo stesso alfabeto dei titoli dei documenti). */
@font-face {
  font-family: "Kuadra"; src: url("../font/InstrumentSans-Regular.ttf") format("truetype");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kuadra"; src: url("../font/InstrumentSans-Bold.ttf") format("truetype");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kuadra"; src: url("../font/InstrumentSans-Italic.ttf") format("truetype");
  font-weight: 400 500; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--sfondo); color: var(--testo);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; font-family: var(--font-titolo); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.012em; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: .03em; }
h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
     color: var(--grigio-2); margin-bottom: .8em; }

/* tricolore: filo sottile usato come firma del marchio */
.tricolore { height: 3px; display: flex; }
.tricolore i { flex: 1; }
.tricolore i:nth-child(1) { background: var(--verde); }
.tricolore i:nth-child(2) { background: #ffffff; }
.tricolore i:nth-child(3) { background: var(--rosso); }

/* ------------------------------------------------------------ layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--card); border-right: 1px solid var(--bordo);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Marchio, filetto e logotipo condividono una misura e un bordo sinistro:
   prima erano larghi 158, 208 e 81 con due pixel di scarto, e il risultato
   sembrava storto anche senza esserlo. */
.sidebar .logo { --misura: 158px; padding: 20px 20px 16px; }
.sidebar .logo img { width: var(--misura); height: auto; display: block; }
.sidebar .logo .portale {
  width: var(--misura); color: var(--grigio); margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--bordo);
}
.sidebar .logo .portale svg { height: 17px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { .sidebar .logo img { filter: invert(1) hue-rotate(180deg); } }
.sidebar nav { padding: 6px 12px 24px; flex: 1; }
.sidebar .gruppo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--grigio-3); padding: 18px 10px 7px; font-weight: 700;
}
.sidebar a.voce {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: 8px; color: var(--grigio); font-size: 13.5px; font-weight: 500;
  margin-bottom: 1px; border-left: 2px solid transparent; transition: background .12s;
}
.sidebar a.voce:hover { background: var(--evidenza); color: var(--carbone); }
.sidebar a.voce.attivo {
  background: var(--rosso-tenue); color: var(--rosso); border-left-color: var(--rosso);
  font-weight: 650;
}
.sidebar a.voce .ic { width: 17px; text-align: center; font-size: 14px; opacity: .85; }
.sidebar a.voce.attivo .ic { opacity: 1; }
.sidebar .pie { padding: 0; }

.contenuto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--bordo);
  padding: 11px 22px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .cerca { flex: 1; max-width: 440px; position: relative; }
.topbar .cerca input {
  width: 100%; background: var(--sfondo); border-color: transparent; border-radius: 20px;
  padding-left: 16px;
}
.topbar .cerca input:focus { background: var(--card); border-color: var(--rosso); }
.topbar .utente { margin-left: auto; display: flex; align-items: center; gap: 11px; font-size: 12.5px; }
.avatar {
  width: 33px; height: 33px; border-radius: 50%; background: var(--rosso); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 11.5px; letter-spacing: .04em;
}
main { padding: 24px; flex: 1; max-width: 1560px; width: 100%; }
.mobile-nav { display: none; }
.hamburger { display: none; }

/* ------------------------------------------------------------ componenti */
.card {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g);
  box-shadow: var(--ombra); margin-bottom: 18px; overflow: hidden;
}
.card > header {
  padding: 13px 18px; border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: 10px;
}
.card > header h2 { margin: 0; }
.card > .corpo { padding: 18px; }
.card > .corpo.stretto { padding: 0; }

.griglia { display: grid; gap: 18px; align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g);
  padding: 16px 18px; box-shadow: var(--ombra); position: relative; overflow: hidden;
}
.kpi .etichetta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--grigio-2); font-weight: 700;
}
.kpi .valore {
  font-family: var(--font-titolo); font-size: 27px; font-weight: 600;
  letter-spacing: -.01em; margin-top: 6px; color: var(--carbone);
}
.kpi .sotto { font-size: 12px; color: var(--testo-2); margin-top: 2px; }
.kpi.accento::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rosso);
}
.kpi.accento .valore { color: var(--rosso); }

.barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
/* La freccia di ritorno sta attaccata al titolo, a sinistra: è il posto dove
   la mano la cerca. A destra restano solo le azioni. */
.indietro {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: 15px; line-height: 1;
  border: 1px solid var(--bordo-forte); background: var(--card); color: var(--carbone);
  text-decoration: none; transition: background .12s, border-color .12s, transform .12s;
}
.indietro:hover { background: var(--evidenza); border-color: var(--grigio); transform: translateX(-2px); }
.barra .spazio { flex: 1; }
.barra h1 { margin: 0; }

/* form */
label {
  display: block; font-size: 10px; font-weight: 700; color: var(--grigio-2);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px;
}
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px;
  background: var(--card); color: var(--testo); font: inherit; font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
input[type=checkbox] { width: auto; accent-color: var(--rosso); }
input[type=file] { padding: 7px; font-size: 12.5px; }
textarea { min-height: 80px; resize: vertical; }
.campo { margin-bottom: 13px; }
.riga-campi { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 8px;
  border: 1px solid var(--bordo-forte); background: var(--card); color: var(--carbone);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.btn:hover { border-color: var(--grigio); }
.btn.primario { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn.primario:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.btn.scuro { background: var(--grigio); border-color: var(--grigio); color: #fff; }
.btn.scuro:hover { background: var(--carbone); border-color: var(--carbone); }
/* Il colore dice che cosa fa il pulsante, prima ancora di leggerlo: verde
   porta avanti il lavoro (confermo, invio, accetto), rosso lo ferma o lo
   disfa (rifiuto, annullo, elimino). Il rosso del marchio resta ai pulsanti
   principali che non sono né l'una né l'altra cosa. */
.btn.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.verde:hover { background: #007a3a; border-color: #007a3a; }
.btn.rosso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn.rosso:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.btn.pericolo { color: var(--err); border-color: #f0c4c7; }
.btn.pericolo:hover { background: var(--rosso-tenue); }
.btn.piccolo { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* tabelle */
.tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--grigio-2); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--bordo); background: var(--card);
  position: sticky; top: 0; white-space: nowrap; z-index: 2;
}
table.tab td { padding: 10px 14px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
table.tab tbody tr:last-child td { border-bottom: none; }
table.tab tbody tr:hover { background: var(--rosso-tenue); }
table.tab td.num, table.tab th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tab tr.clic { cursor: pointer; }
table.tab tfoot td {
  font-weight: 700; border-top: 2px solid var(--bordo-forte); border-bottom: none;
  background: var(--evidenza);
}

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  border: 1px solid transparent;
}
.pill.bozza { background: #f0f0f1; color: #6f6e6e; border-color: #e2e2e3; }
/* "creato": numerato e con la cartella riservata, ma non ancora spedito */
.pill.creato { background: #f4f1fb; color: #58499b; border-color: #e3ddf3; }
.pill.inviato { background: #eef3fb; color: #2d5f9e; border-color: #d9e5f5; }
.pill.accettato, .pill.evaso, .pill.ok, .pill.chiuso { background: #e9f6ef; color: #17734a; border-color: #cfeadd; }
.pill.rifiutato, .pill.annullato { background: var(--rosso-tenue); color: var(--rosso-scuro); border-color: #f6cfd2; }
.pill.giacenza, .pill.aperto { background: #fdf3e3; color: #96650b; border-color: #f5e3c3; }

.vuoto { padding: 40px 16px; text-align: center; color: var(--grigio-3); }
.vuoto .ic { font-size: 28px; display: block; margin-bottom: 8px; color: var(--bordo-forte); }

.flash {
  padding: 12px 15px; border-radius: 10px; margin-bottom: 16px; font-weight: 550;
  border: 1px solid; display: flex; gap: 9px; align-items: center; font-size: 13.5px;
}
.flash.ok { background: #e9f6ef; border-color: #bfe3d0; color: #14603d; }
.avviso {
  padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 12.8px;
  background: var(--evidenza); border: 1px solid var(--bordo); color: var(--testo-2);
  line-height: 1.45;
}
.conta {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 20px;
  background: var(--sfondo); color: var(--testo-2); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.btn.primario .conta { background: rgba(255,255,255,.22); color: #fff; }
.flash.error { background: var(--rosso-tenue); border-color: #f3c6ca; color: #9c0710; }

/* display:flex sulle .flash vinceva su hidden: un riquadro d'errore vuoto
   restava in pagina anche quando non c'era nessun errore. */
[hidden] { display: none !important; }

.muto { color: var(--testo-2); }
.piccolo { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em; letter-spacing: -.01em; }
.destra { text-align: right; }
.nowrap { white-space: nowrap; }

.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 18px;
  overflow-x: auto;
}
.tabs a {
  padding: 10px 15px; font-size: 13px; font-weight: 600; color: var(--grigio-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--carbone); }
.tabs a.attivo { color: var(--rosso); border-bottom-color: var(--rosso); }

/* editor righe */
table.editor { width: 100%; border-collapse: collapse; font-size: 13px; }
table.editor th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--grigio-2);
  padding: 8px 5px; text-align: left; border-bottom: 1px solid var(--bordo); font-weight: 700;
}
table.editor td { padding: 2px; border-bottom: 1px solid var(--bordo); }
table.editor input {
  border: 1px solid transparent; background: transparent; padding: 7px 7px; border-radius: 6px;
}
table.editor input:hover { border-color: var(--bordo); }
table.editor input:focus { background: var(--card); }
table.editor tr:hover td { background: var(--evidenza); }
table.editor td.imp {
  text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px;
  font-weight: 650; white-space: nowrap;
}
.sugg {
  position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--bordo-forte);
  border-radius: 10px; box-shadow: var(--ombra-alta); max-height: 290px; overflow-y: auto;
  min-width: 340px; padding: 4px;
}
.sugg div {
  padding: 8px 11px; cursor: pointer; font-size: 13px; border-radius: 7px;
}
.sugg div:hover, .sugg div.sel { background: var(--rosso-tenue); }
.sugg b { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--rosso); }

/* totali documento */
.totali {
  display: flex; gap: 30px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end;
}
.totali > div { text-align: right; }
.totali .et { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--grigio-2); font-weight: 700; }
.totali b { font-family: var(--font-titolo); font-size: 15px; font-weight: 600; }
.totali .grande b { font-size: 21px; color: var(--rosso); }

/* foto */
.foto-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.foto-item {
  position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--bordo);
  aspect-ratio: 4/3; background: var(--sfondo);
}
.foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item form { position: absolute; top: 6px; right: 6px; }
.foto-item button {
  background: rgba(46,45,45,.6); color: #fff; border: 0; border-radius: 7px;
  padding: 3px 8px; cursor: pointer; font-size: 12px; backdrop-filter: blur(4px);
}
.foto-item button:hover { background: var(--rosso); }
.dropzone {
  border: 1.5px dashed var(--bordo-forte); border-radius: var(--r-g); padding: 24px;
  text-align: center; color: var(--testo-2); transition: all .15s;
}
.dropzone.hover { border-color: var(--rosso); background: var(--rosso-tenue); }

/* grafico barre */
.barre { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.barre .col { flex: 1; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 6px; }
.barre .b {
  width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; min-height: 3px;
  background: linear-gradient(180deg, #f2404b, var(--rosso));
}
.barre .col:hover .b { background: var(--carbone); }
.barre .e { font-size: 10px; color: var(--grigio-3); font-weight: 600; }

/* login */
/* ------------------------------------------------------------- accesso
   Tre segni impilati — il marchio, un filetto, il logotipo Kuadra — con la
   stessa identica misura. È l'unica cosa che li fa sembrare una cosa sola:
   finché ognuno aveva la sua larghezza, la pagina sembrava storta anche
   essendo perfettamente centrata. */
.login-wrap {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  background: var(--sfondo);
}
.login-box {
  width: 100%; max-width: 392px; background: var(--card); border-radius: 18px;
  border: 1px solid var(--bordo); box-shadow: var(--ombra-alta); overflow: hidden;
}
/* Sul bianco della scheda la banda bianca sparisce e restano due monconi
   colorati: qui prende un grigio appena accennato e il tricolore si legge. */
.login-box .tricolore { height: 3px; }
.login-box .tricolore i:nth-child(2) { background: var(--bordo-forte); }
.login-box .interno { padding: 34px 34px 28px; }

.login-box .marchio { --misura: 196px; text-align: center; margin: 0 0 30px; }
.login-box .marchio img { width: var(--misura); height: auto; display: block; margin: 0 auto; }
@media (prefers-color-scheme: dark) { .login-box .marchio img { filter: invert(1) hue-rotate(180deg); } }
.login-box .marchio .portale {
  width: var(--misura); margin: 22px auto 0; padding-top: 18px;
  border-top: 1px solid var(--bordo); color: var(--grigio);
}
.login-box .marchio .portale svg { width: var(--misura); height: auto; display: block; }
.login-box .marchio .sottotitolo {
  display: block; font-size: 9px; color: var(--grigio-3); letter-spacing: .28em;
  text-transform: uppercase; margin-top: 11px; font-weight: 600;
}

.login-box .campo { margin-bottom: 15px; }
.login-box .campo input { padding: 12px 13px; font-size: 15px; }
.login-box .btn.primario {
  width: 100%; justify-content: center; padding: 13px; font-size: 14.5px; margin-top: 4px;
}
.login-box .nota {
  text-align: center; margin: 20px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--testo-2);
}
.login-box .flash { font-size: 12.5px; padding: 10px 13px; }

@media (max-width: 420px) {
  .login-box .interno { padding: 28px 22px 24px; }
  .login-box .marchio { --misura: 168px; margin-bottom: 26px; }
}

/* firma sullo schermo */
.velo {
  position: fixed; inset: 0; background: rgba(46,45,45,.55); z-index: 200;
  display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px);
}
.firma-pannello {
  background: var(--card); border-radius: var(--r-g); box-shadow: var(--ombra-alta);
  width: min(560px, 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.firma-testa { font-weight: 650; font-size: 14px; }
.firma-tela {
  width: 100%; height: 190px; border: 1.5px dashed var(--bordo-forte); border-radius: 10px;
  background: #fff; touch-action: none; cursor: crosshair;
}
.firma-azioni { display: flex; gap: 8px; align-items: center; }
.firma-fatta {
  border: 1px solid var(--bordo); border-radius: 10px; background: #fff; padding: 6px;
  display: block; max-height: 90px;
}
.firma-slot { flex: 1; min-width: 220px; }
.firma-slot .etichetta {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--grigio-2);
  font-weight: 700; margin-bottom: 6px;
}

/* stampa */
@media print {
  .sidebar, .topbar, .mobile-nav, .barra .btn, .btn { display: none !important; }
  .app { display: block; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: none; page-break-inside: avoid; }
  table.tab th { position: static; }
}

/* ------------------------------------------------------------ mobile */
@media (max-width: 1000px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 100; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--ombra-alta);
  }
  body.menu-aperto .sidebar { transform: translateX(0); }
  body.menu-aperto::after {
    content: ""; position: fixed; inset: 0; background: rgba(46,45,45,.45); z-index: 90;
  }
  .hamburger { display: inline-flex; }
  main { padding: 16px 14px 90px; }
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
  .kpi .valore { font-size: 22px; }
  .topbar { padding: 9px 12px; }
  h1 { font-size: 21px; }
  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    background: var(--card); border-top: 1px solid var(--bordo);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    flex: 1; text-align: center; font-size: 9.5px; color: var(--grigio-2);
    padding: 4px 2px; font-weight: 650; letter-spacing: .02em;
  }
  .mobile-nav a .ic { display: block; font-size: 18px; margin-bottom: 2px; }
  .mobile-nav a.attivo { color: var(--rosso); }
  table.tab th, table.tab td { padding: 9px 10px; }
  .nascondi-mobile { display: none !important; }
  .totali { gap: 18px; }
}

/* La catena di un documento: da dove nasce, cosa ne è nato, dov'è il file. */
.card.catena{margin-bottom:16px}
.card.catena .corpo{padding:10px 16px}
.catena-riga{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0}
.catena-riga + .catena-riga{border-top:1px solid var(--bordo)}
.catena-riga .et{min-width:150px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--testo-2)}
.pastiglia{display:inline-block;padding:3px 10px;border:1px solid var(--bordo-forte);
  border-radius:999px;font-size:12px;text-decoration:none;color:inherit;background:var(--card)}
.pastiglia:hover{border-color:var(--rosso);color:var(--rosso)}
.btn.piccolo{padding:3px 10px;font-size:12px}
label.spunta{text-transform:none;letter-spacing:0;font-size:13px;display:flex;gap:8px;
  align-items:center;margin-bottom:8px;color:var(--testo)}

/* Un muro di riquadri: si impilano riempiendo lo spazio invece di allinearsi
   a righe, dove un riquadro alto lascerebbe un buco accanto a uno basso. */
.muro { columns: 2; column-gap: 18px; }
.muro > .card {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 18px;
}
@media (max-width: 1100px) { .muro { columns: 1; } }

/* ---- Il percorso di un lavoro: dalla richiesta al montaggio -------------- */
.percorso-card { margin-bottom: 16px; padding: 0; overflow: hidden; }
.percorso-testa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--bordo); background: var(--evidenza);
}
.percorso-testa a { text-decoration: none; color: inherit; }
.percorso-testa a:hover { color: var(--rosso); }

.percorso { display: flex; padding: 14px 10px 12px; overflow-x: auto; }
.percorso .tappa {
  position: relative; flex: 1 1 0; min-width: 96px; text-align: center;
  text-decoration: none; color: var(--testo-2); padding: 0 2px;
}
.percorso a.tappa:hover { color: var(--rosso); }
.percorso .linea { position: absolute; top: 12px; height: 2px; background: var(--bordo); }
.percorso .linea.sx { left: 0; right: 50%; }
.percorso .linea.dx { left: 50%; right: 0; }
.percorso .tappa:first-child .linea.sx,
.percorso .tappa:last-child .linea.dx { display: none; }
.percorso .linea.accesa { background: var(--rosso); }
.percorso .bollo {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--bordo); background: var(--card);
  font-size: 12px; line-height: 1; color: transparent;
}
.percorso .tappa.fatta { color: var(--testo); }
.percorso .tappa.fatta .bollo { border-color: var(--rosso); background: var(--rosso); color: #fff; }
.percorso .tappa.qui .bollo {
  border-color: var(--rosso); background: var(--card); color: var(--rosso);
  box-shadow: 0 0 0 4px var(--rosso-tenue);
}
.percorso .tappa.qui .nome { font-weight: 700; color: var(--rosso); }
.percorso .nome { display: block; margin-top: 7px; font-size: 12px; letter-spacing: .01em; }
.percorso .sotto { display: block; font-size: 11px; color: var(--testo-2); margin-top: 1px; }

.percorso-altri {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--bordo);
}
.percorso-altri .et {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2);
}
.pastiglia.qui { border-color: var(--rosso); color: var(--rosso); font-weight: 700; }
@media (max-width: 780px) { .percorso .tappa { min-width: 84px; } }

/* Gli stati di una tappa. La differenza resta, ma senza parole addosso:
   fatta è piena, non fatta è un contorno, quello che verrà è più chiaro. */
.percorso .tappa.fatta { color: var(--testo); }
.percorso .tappa.fatta .bollo { border-color: var(--rosso); background: var(--rosso); color: #fff; }
.percorso .tappa.manca .bollo { border-color: var(--bordo-forte); }
.percorso .tappa.rara, .percorso .tappa.futura { color: var(--grigio-3); }
.percorso .tappa.futura .bollo { border-color: var(--bordo); }

/* Il documento è uno, i formati in cui esiste stanno accanto al suo nome:
   PDF e XLSX non sono due righe diverse. */
.formati { display: inline-flex; gap: 4px; }
.formati a {
  border: 1px solid var(--bordo); border-radius: 4px; padding: 1px 6px;
  font-size: 11px; letter-spacing: .04em; color: var(--grigio-2);
  text-decoration: none; background: var(--evidenza);
}
.formati a:hover { border-color: var(--rosso); color: var(--rosso); }
.originale { display: inline-flex; align-items: center; gap: 8px; }
.originale > a { font-weight: 600; color: var(--testo); text-decoration: none; }
.originale > a:hover { color: var(--rosso); }

/* ----------------------------------------------- i tre pallini in alto a destra
   Profilo, Impostazioni ed Esci stavano in fondo al menu, sotto a tutto il
   resto. Sono tre cose che si fanno spesso e che non c'entrano con il lavoro:
   qui stanno sempre allo stesso posto, e il colore basta a dire quale è quale —
   verde, bianco e rosso come il marchio. */
.pallino {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  border: 1px solid transparent; font-size: 12px; line-height: 1;
  text-decoration: none; transition: transform .12s, filter .12s, box-shadow .12s;
}
.pallino:hover { transform: scale(1.12); filter: brightness(1.05); }
.pallino.attivo { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--bordo-forte); }
.pallino.verde { background: var(--verde); color: #fff; }
.pallino.bianco { background: var(--card); color: var(--carbone); border-color: var(--bordo-forte); }
.pallino.rosso { background: var(--rosso); color: #fff; }
.topbar .utente { gap: 8px; }

/* ------------------------------------------------------------- le richieste
   Non c'è un elenco da tenere in ordine: c'è un posto dove lasciar cadere
   quello che è arrivato. Sta al centro perché è l'unica cosa da fare qui. */
.ric-centro { max-width: 720px; margin: 6vh auto 0; }
.ric-zona {
  border: 2px dashed var(--bordo-forte); border-radius: var(--r-g);
  background: var(--card); padding: 54px 28px; text-align: center;
  transition: border-color .15s, background .15s, transform .15s; cursor: pointer;
}
.ric-zona.sopra { border-color: var(--rosso); background: var(--rosso-tenue); transform: scale(1.01); }
.ric-zona.carico { opacity: .6; pointer-events: none; }
.ric-icona {
  font-size: 30px; line-height: 1; color: var(--rosso); margin-bottom: 14px;
}
.ric-titolo { font-family: var(--font-titolo); font-size: 21px; font-weight: 700; }
.ric-sotto { color: var(--testo-2); font-size: 13.5px; margin-top: 8px; }
.ric-formati { margin-top: 18px; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.ric-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--rosso);
  font-weight: 650; cursor: pointer; text-decoration: underline;
}

.ric-esito { margin-top: 22px; text-align: center; }
.ric-file { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.ric-riga {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r);
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--testo);
}
.ric-riga .ic { color: var(--rosso); }
.ric-riga .muto { margin-left: auto; font-weight: 400; font-size: 12px; }
.ric-domanda { font-family: var(--font-titolo); font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.ric-scelte { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ric-scelte .btn.grande { padding: 14px 30px; font-size: 15px; border-radius: 26px; }
.ric-recenti { max-width: 720px; margin: 26px auto 0; text-align: center; }
.ric-recenti a { color: var(--grigio-2); }

/* Un blocco che si apre solo quando serve: l'intestazione è una riga, non una
   scheda. Serve alle pagine di servizio, dove il testo va tenuto corto. */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸ "; color: var(--grigio-3); }
details.card[open] > summary::before { content: "▾ "; }
details.card > summary:hover { background: var(--evidenza); }
.barra .et {
  font-size: 10px; font-weight: 700; color: var(--grigio-2);
  text-transform: uppercase; letter-spacing: .12em;
}

/* Di quale delle due Karma stiamo parlando. In contabilità è la prima cosa da
   sapere e l'ultima che si vorrebbe cercare: due lettere, sempre nello stesso
   posto, con due colori che non si confondono. */
.ditta-sigla {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
  border: 1px solid transparent;
}
.ditta-sigla.ditta { background: #eef3fb; color: #2d5f9e; border-color: #d9e5f5; }
.ditta-sigla.srls { background: #f3eefb; color: #5b3f9e; border-color: #e5dcf5; }
.ditta-sigla.vuota { background: var(--sfondo); color: var(--grigio-3); border-color: var(--bordo); }

/* ---- giacenza modificabile dall'elenco ------------------------------- */
.giac-box { display:inline-flex; align-items:center; gap:4px; }
.giac {
  width:66px; padding:3px 6px; text-align:right; font-variant-numeric:tabular-nums;
  border:1px solid var(--bordo); border-radius:6px; background:#fff; font-size:13px;
}
.giac:focus { outline:none; border-color:var(--rosso); box-shadow:0 0 0 2px rgba(200,30,40,.10); }
.giac.sotto { border-color:#e4b200; background:#fffaf0; color:#8a6a00; font-weight:700; }
.giac-box .tick {
  visibility:hidden; width:24px; height:24px; padding:0; line-height:1;
  border:1px solid #1e8e3e; border-radius:6px; background:#1e8e3e; color:#fff;
  font-size:13px; font-weight:700; cursor:pointer;
}
.giac-box.cambiato .tick { visibility:visible; }
.giac-box.attesa { opacity:.55; pointer-events:none; }
.giac-box.fatto .giac { border-color:#1e8e3e; background:#f1faf3; }

/* ============================================================
   RILIEVO MISURE — il modulo che si compila in piedi
   Una domanda per schermata. Niente menu, niente barre: chi
   misura ha una mano sola libera e il pollice deve bastare.
   ============================================================ */
body.solo-modulo { background: var(--card); margin: 0; }

.tf {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--card); color: var(--testo);
}
.tf-testa {
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--bordo); flex: 0 0 auto;
}
.tf-esci, .tf-foto {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grigio-2); font-size: 15px; cursor: pointer; flex: 0 0 auto;
  background: var(--card); text-decoration: none;
}
.tf-esci:hover { border-color: var(--rosso); color: var(--rosso); }
.tf-foto { border-color: var(--bordo-forte); color: var(--grigio); }
.tf-dove { flex: 1; min-width: 0; line-height: 1.25; }
.tf-dove b { display: block; font-size: 14px; }
.tf-dove span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-salvato {
  font-size: 11px; color: var(--ok); opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
.tf-salvato.visibile { opacity: 1; }

.tf-avanzamento { height: 3px; background: var(--bordo); flex: 0 0 auto; }
.tf-avanzamento i { display: block; height: 100%; width: 0; background: var(--rosso);
  transition: width .3s cubic-bezier(.4,0,.2,1); }

/* Lo schermo si divide, non avanza. La domanda sta in alto e le risposte si
   prendono tutto quello che resta: prima la carta galleggiava in mezzo con due
   bande bianche sopra e sotto e i pulsanti appiccicati fra loro. Se il
   contenuto e' piu' alto dello schermo, `min-height: 0` lascia che scorra
   invece di farsi tagliare. */
.tf-palco {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding: 18px 20px 22px;
}
.tf-carta {
  width: 100%; max-width: 620px; margin: 0 auto; flex: 1 1 auto;
  display: flex; flex-direction: column; min-height: 0;
}
.tf-testo { flex: 0 0 auto; }
.tf-risposte {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 16px;
}
/* I passi che sono una griglia di tasti la stirano fino in fondo: e' la
   griglia a riempire lo schermo, non il bianco intorno. */
.tf-risposte.pieno { justify-content: stretch; }
.tf-risposte.pieno > .tf-campo { display: flex; flex-direction: column; min-height: 0; }
.tf-risposte.pieno > .tf-campo:not(.tf-campo-staccato) { flex: 1 1 auto; }
.tf-risposte.pieno .tf-riquadri,
.tf-risposte.pieno .tf-tastiera:not(.altre),
.tf-risposte.pieno .tf-scatti { flex: 1 1 auto; min-height: 0; }
/* Due gruppi in un passo: i tasti in alto, quelli senza lato in fondo, e
   l'aria che avanza in mezzo invece che tutta sotto. */
.tf-risposte.pieno > .tf-campo { gap: 12px; }
.tf-risposte > .tf-campo, .tf-risposte > .tf-coppia { margin-bottom: 0; }

/* Un numero da solo non ha bisogno di tutta la larghezza del telefono. */
.tf-campo.numerico { text-align: center; max-width: 320px; margin-left: auto;
  margin-right: auto; }
.tf-campo.numerico > label { text-align: center; }
.tf-carta.entra { animation: tf-entra .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes tf-entra { from { opacity: 0; transform: translateY(14px); } }

.tf-domanda {
  font-family: var(--font-titolo); font-size: 27px; font-weight: 300;
  letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px;
}
.tf-aiuto { color: var(--testo-2); font-size: 13.5px; margin-bottom: 20px; line-height: 1.45; }
.tf-campo { margin-bottom: 20px; }
.tf-campo > label:not(.tf-scatta) {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-2); margin-bottom: 8px; font-weight: 600;
}

/* A colonne uguali invece che a capo dove capita: venti pulsanti di larghezza
   diversa sono un muro da leggere, tre colonne allineate si scorrono. */
.tf-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.tf-chips.colonna { display: flex; flex-direction: column; }
.tf-chips.grandi { display: flex; flex-wrap: wrap; }
.tf-chip {
  appearance: none; background: var(--card); color: var(--testo);
  border: 1.5px solid var(--bordo-forte); border-radius: 12px;
  padding: 13px 16px; font: inherit; font-size: 15px; cursor: pointer;
  text-align: left; transition: border-color .12s, background .12s, transform .08s;
  min-height: 48px;
}
.tf-chip:hover { border-color: var(--grigio-3); }
.tf-chip:active { transform: scale(.98); }
.tf-chip.su { border-color: var(--rosso); background: var(--rosso-tenue); color: var(--rosso-scuro);
  font-weight: 600; }
.tf-chip.verde { border-color: var(--verde); background: var(--verde); color: #fff; font-weight: 600; }
.tf-chip.rosso { border-color: var(--rosso); color: var(--rosso); }
.tf-chips.grandi .tf-chip { flex: 1; min-width: 120px; text-align: center; font-size: 17px;
  padding: 18px; }

.tf-input {
  width: 100%; padding: 14px 15px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: var(--card);
  color: var(--testo); margin-top: 8px;
}
.tf-input:focus { outline: none; border-color: var(--rosso);
  box-shadow: 0 0 0 3px rgba(227,6,19,.09); }
.tf-input.grande { font-size: 30px; font-weight: 300; padding: 16px; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* L'unità sta dentro la casella, a destra: fuori spostava il numero di
   qualche pixel e la colonna non tornava più con l'etichetta. */
.tf-misura { position: relative; }
.tf-misura .tf-input { width: 100%; padding-left: 46px; padding-right: 46px; }
.tf-unita {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--grigio-3); font-size: 14px; pointer-events: none;
}
.tf.tono-rosso .tf-chip { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5);
  color: #fff; }
.tf.tono-rosso .tf-chip.su { background: #fff; border-color: #fff; color: var(--rosso-scuro); }

/* I nodi si scrivono dove stanno: sopra, sotto, a sinistra, a destra. */
.tf-nodi {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  grid-template-areas: ". sup ." "sx centro dx" ". inf ."; margin-top: 8px;
}
.tf-nodi .sup { grid-area: sup; } .tf-nodi .inf { grid-area: inf; }
.tf-nodi .sx { grid-area: sx; }   .tf-nodi .dx { grid-area: dx; }
.tf-nodi .tf-input { margin: 0; text-align: center; font-size: 15px; padding: 12px 6px; }
.tf-nodo-centro {
  grid-area: centro; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--bordo-forte); border-radius: 12px;
  color: var(--grigio-3); font-size: 11px; text-align: center; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .06em;
}

.tf-elenco { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tf-voce {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--evidenza);
}
.tf-voce.monca { border-color: #f0c4c7; background: var(--rosso-tenue); }
.tf-n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grigio);
  color: #fff; font-size: 12px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; font-weight: 600;
}
.tf-voce-testo { flex: 1; min-width: 0; line-height: 1.3; }
.tf-voce-testo b { display: block; font-size: 14px; }
.tf-voce-testo span { display: block; }
.tf-mini {
  border: 1px solid var(--bordo-forte); background: var(--card); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--grigio-2);
}
.tf-mini.rosso { color: var(--rosso); border-color: #f0c4c7; }

.tf-piede {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordo); background: var(--card);
}
.tf-piede .btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
.tf-piede .btn.primario { flex: 1; justify-content: center; }
.tf-conta { font-size: 12px; color: var(--grigio-3); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .tf-domanda { font-size: 23px; }
  .tf-chips.grandi .tf-chip { font-size: 16px; }
}

/* ---- la scelta dell'intestazione, nella scheda d'ufficio ---------------- */
.riga-rip { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.riga-rip input { flex: 1; min-width: 0; }

/* ---- l'invito sul cruscotto di chi deve andare a misurare -------------- */
.invito {
  border: 1px solid #f5e3c3; background: linear-gradient(180deg, #fffdf8, #fdf6e9);
  border-radius: var(--r-g); padding: 16px 18px; margin-bottom: 16px;
}
.invito .et { color: #96650b; }
.invito-riga { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid #f2e6cd; }
.invito-riga:first-of-type { border-top: 0; }
.invito-riga .dove { flex: 1; min-width: 160px; line-height: 1.3; }
.invito-riga .dove b { display: block; }
.tf-piede.solo-indietro #tf-avanti, .tf-piede.solo-indietro .tf-conta { display: none; }
.tf-input.libero {
  margin-bottom: 12px; border-style: dashed; background: var(--evidenza);
}
.tf-input.libero::placeholder { color: var(--grigio-3); }
.tf-input.libero.pieno {
  border-style: solid; border-color: var(--rosso); background: var(--rosso-tenue);
  color: var(--rosso-scuro); font-weight: 600;
}

/* ---- la foto come domanda: scatto grande, miniature accanto -------------- */
.tf-scatti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tf-scatto { position: relative; width: 104px; height: 104px; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--bordo); background: var(--sfondo); }
.tf-scatto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-togli-foto {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0;
  border-radius: 50%; background: rgba(20,20,20,.62); color: #fff; font-size: 14px;
  line-height: 1; cursor: pointer;
}
.tf-togli-foto:hover { background: var(--rosso); }
/* «Scatta» e' il pulsante, non l'etichetta di un campo: il maiuscolo
   spaziato delle etichette qui non c'entra niente. */
.tf-scatta { text-transform: none; letter-spacing: normal; }
.tf-scatta {
  width: 104px; height: 104px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--bordo-forte); background: var(--evidenza);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; color: var(--grigio-2); font-size: 13px; font-weight: 600;
  transition: border-color .14s, color .14s, background .14s;
}
.tf-scatta:hover { border-color: var(--rosso); color: var(--rosso);
  background: var(--rosso-tenue); }
.tf-scatta:active { transform: scale(.98); }
/* La prima foto e' il gesto della schermata: finche' non ce n'e' nessuna il
   riquadro e' grande e al centro, con la macchina fotografica bella visibile.
   Un pallino non e' un invito a fotografare. */
.tf-scatta.sola {
  width: 100%; max-width: 340px; height: 100%; min-height: 150px; margin: 0 auto;
  gap: 14px; font-size: 16px;
}
.tf-risposte.pieno .tf-scatti { align-items: stretch; }
.ic-foto { width: 30px; height: 30px; flex: 0 0 auto; }
.tf-scatta.sola .ic-foto { width: 64px; height: 64px; }
.ic-piu { width: 22px; height: 22px; flex: 0 0 auto; }

/* un nodo che non serve non si cancella: si spegne, e si vede perché */
.tf-input.spento {
  border-style: dashed; background: var(--sfondo); color: var(--grigio-3);
  cursor: not-allowed;
}

/* ---- i nodi: quale profilo va su quel lato, non quanti millimetri -------- */
.tf-nodi .tf-lato { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.tf-nodi .tf-lato.sup { grid-area: sup; } .tf-nodi .tf-lato.inf { grid-area: inf; }
.tf-nodi .tf-lato.sx { grid-area: sx; }   .tf-nodi .tf-lato.dx { grid-area: dx; }
.tf-lato .et { font-size: 10px; letter-spacing: .07em; color: var(--grigio-3);
  text-transform: uppercase; font-weight: 600; }
.tf-lettere { display: flex; gap: 4px; }
.tf-lettera {
  flex: 1; min-width: 34px; padding: 11px 4px; font: inherit; font-size: 14px;
  font-weight: 600; border: 1.5px solid var(--bordo-forte); border-radius: 9px;
  background: var(--card); color: var(--testo); cursor: pointer;
}
.tf-lettera:active { transform: scale(.96); }
.tf-lettera.su { border-color: var(--rosso); background: var(--rosso-tenue);
  color: var(--rosso-scuro); }
.tf-lato.spento .et { opacity: .5; }
.tf-niente { font-size: 12px; color: var(--grigio-3); border: 1.5px dashed var(--bordo-forte);
  border-radius: 9px; padding: 11px 10px; background: var(--sfondo); }

/* ---- la scheda d'ufficio: un infisso, una sezione ----------------------- */
.card.infisso > header { gap: 10px; align-items: center; flex-wrap: wrap; }
.card.infisso > header h2 { font-size: 17px; }
.inf-n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--rosso); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.inf-corpo { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .inf-corpo { grid-template-columns: 1fr; } }
.inf-foto { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.inf-foto a { display: block; width: 100%; }
.inf-foto img {
  width: 100%; border-radius: 10px; border: 1px solid var(--bordo); display: block;
  background: var(--sfondo);
}
.inf-senza-foto {
  width: 100%; aspect-ratio: 3 / 4; border: 1.5px dashed var(--bordo-forte);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--grigio-3); font-size: 12px; background: var(--evidenza);
}
.inf-dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; align-content: start; }
.inf-sez { border-left: 2px solid var(--bordo); padding-left: 11px; }
.inf-sez .et { display: block; margin-bottom: 5px; }
.inf-sez dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.inf-sez dt { color: var(--testo-2); font-size: 12px; }
.inf-sez dd { margin: 0; font-size: 12.5px; font-weight: 550; }

/* ---- la schermata che deve farsi notare --------------------------------
   La luce marmo ha due caselle "larghezza" e "altezza" come le misure
   dell'infisso, e a metà pomeriggio si riempiono per abitudine. Quando una
   domanda può essere scambiata per un'altra non basta scriverlo: va cambiata
   di colore tutta la schermata, cornice compresa. */
.tf.tono-rosso { background: var(--rosso); color: #fff; }
.tf.tono-rosso .tf-testa,
.tf.tono-rosso .tf-piede { border-color: rgba(255,255,255,.26); background: transparent; }
.tf.tono-rosso .tf-dove b,
.tf.tono-rosso .tf-domanda { color: #fff; }
.tf.tono-rosso .tf-dove span,
.tf.tono-rosso .tf-aiuto { color: rgba(255,255,255,.88); }
.tf.tono-rosso .tf-campo > label { color: rgba(255,255,255,.82); }
.tf.tono-rosso .tf-esci,
.tf.tono-rosso .tf-foto { background: transparent; border-color: rgba(255,255,255,.45);
  color: #fff; }
.tf.tono-rosso .tf-avanzamento { background: rgba(255,255,255,.28); }
.tf.tono-rosso .tf-avanzamento i { background: #fff; }
.tf.tono-rosso .tf-input {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff;
}
.tf.tono-rosso .tf-input::placeholder { color: rgba(255,255,255,.6); }
.tf.tono-rosso .tf-input:focus { border-color: #fff; background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.tf.tono-rosso .tf-unita { color: rgba(255,255,255,.75); }
.tf.tono-rosso .tf-conta { color: rgba(255,255,255,.7); }
.tf.tono-rosso .tf-salvato { color: #fff; }
.tf.tono-rosso .btn { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.tf.tono-rosso .btn:disabled { opacity: .35; }
.tf.tono-rosso .btn.primario { background: #fff; border-color: #fff; color: var(--rosso-scuro); }

/* ---- i loghi: si vedono, non si indovinano ------------------------------ */

/* ---- la domanda a due vie, prima di un passo che non si torna indietro --- */
.scelta-pannello {
  background: var(--card); border-radius: var(--r-g); box-shadow: var(--ombra-alta);
  width: min(460px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.scelta-titolo { font-family: var(--font-titolo); font-size: 21px; font-weight: 400; }
.scelta-testo { margin: -6px 0 0; color: var(--testo-2); font-size: 13px; line-height: 1.45; }
.scelta-vie { display: grid; gap: 10px; }
.scelta-via {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: var(--card);
  color: var(--testo);
}
.scelta-via:hover { border-color: var(--rosso); color: var(--rosso-scuro);
  background: var(--rosso-tenue); }
.scelta-sigla {
  display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; border: 1px solid transparent;
}
.scelta-sigla.ditta { background: #eef3fb; color: #2d5f9e; border-color: #d9e5f5; }
.scelta-sigla.srls { background: #f3eefb; color: #5b3f9e; border-color: #e5dcf5; }

/* ---- la firma del cliente, a telefono girato ---------------------------- */
.firma-schermo {
  position: fixed; inset: 0; z-index: 300; background: var(--card);
  display: flex; flex-direction: column;
}
.firma-gira {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 24px;
  color: var(--testo-2);
}
.firma-gira .ic {
  font-size: 54px; color: var(--rosso); line-height: 1;
  animation: gira 1.8s ease-in-out infinite;
}
.firma-gira b { font-size: 20px; color: var(--testo); font-weight: 600; }
@keyframes gira {
  0%, 55%, 100% { transform: rotate(0deg); }
  25%, 45%      { transform: rotate(90deg); }
}
.firma-area { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.firma-testata {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  border-bottom: 1px solid var(--bordo);
}
.firma-chi { flex: 1; min-width: 0; }
.firma-chi .et { display: block; margin-bottom: 2px; }
.firma-chi input {
  width: 100%; max-width: 320px; padding: 6px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--card);
  color: var(--testo);
}
.firma-tela-grande {
  flex: 1; width: 100%; min-height: 0; touch-action: none; cursor: crosshair;
  background: #fff; display: block;
}
.firma-riga {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 24px calc(14px + env(safe-area-inset-bottom)); color: var(--grigio-3);
  font-size: 16px;
}
.firma-riga i { flex: 1; height: 1px; background: var(--bordo-forte); display: block; }
.firma-dichiarazione {
  flex: 0 0 auto; margin: 0; padding: 9px 24px; font-size: 12.5px; line-height: 1.45;
  color: var(--testo-2); background: var(--evidenza);
  border-bottom: 1px solid var(--bordo);
}
.firma-dichiarazione b { color: var(--testo); }
.firma-mostra { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.firma-mostra img {
  max-height: 110px; max-width: 340px; border: 1px solid var(--bordo);
  border-radius: 10px; background: #fff; padding: 6px;
}
.firma-sotto b { display: block; font-size: 15px; }

/* ---- i marchi, nelle impostazioni --------------------------------------- */
.marchio-card > header { gap: 10px; }
.marchio-vetrina {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 96px; padding: 16px; margin-bottom: 14px;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--evidenza);
}
.marchio-vetrina img { max-height: 58px; max-width: 100%; display: block; }
.marchio-nome {
  font-family: var(--font-titolo); font-size: 21px; font-weight: 600;
  letter-spacing: .04em; color: var(--testo);
}
.marchio-carica { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.marchio-carica input[type=file] { flex: 1; min-width: 180px; }
.mm-eco { font-size: 11px; color: var(--ok); opacity: 0; transition: opacity .25s; }
.mm-eco.visibile { opacity: 1; }

/* ---- l'intestazione si scegle guardando, non leggendo -------------------
   Chi è sul furgone non legge «Tecnomat»: riconosce il marchio a colpo
   d'occhio, com'è stampato sul modulo che ha in mano. Quindi qui si mostrano
   i loghi e basta — nessuna scritta accanto. Per le insegne di cui non
   abbiamo ancora il file, in vetrina va il nome come verrà stampato in
   testa al PDF: non un'etichetta, è il logo che non c'è.               */
.loghi {
  /* In fila e al centro, non in griglia: con cinque marchi l'ultimo resterebbe
     da solo e spostato a sinistra, e una schermata centrata si vede storta. */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px;
}
.logo-tile {
  position: relative; appearance: none; cursor: pointer; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  flex: 0 1 156px; max-width: 200px;
  /* Piu alta che larga a meta: i marchi quadrati (Leroy Merlin, lo scudo di
     RistrutturaSmart) hanno bisogno di altezza, o accanto a un Tecnomat lungo
     e basso sembrano stampati a meta. */
  aspect-ratio: 2 / 1; padding: 13px; background: #fff;
  border: 1.5px solid var(--bordo-forte); border-radius: 14px;
  transition: border-color .14s, box-shadow .14s, transform .09s;
}
.logo-tile input { position: absolute; opacity: 0; pointer-events: none; }
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-parola {
  font-family: var(--font-titolo); font-size: 13px; font-weight: 700;
  /* La piastrella e' sempre bianca come la carta: qui il grigio va scritto,
     non preso da una variabile che al buio si schiarisce e sparisce. */
  letter-spacing: .02em; text-transform: uppercase; color: #2e2d2d;
  text-align: center; line-height: 1.25;
  /* «RistrutturaSmart» e' una parola sola e lunga: se si spezza viene fuori
     un «RISTRUTTURAS MART» che non e' il nome di nessuno. Meglio rubare
     qualche millimetro al bordo e tenerla intera. */
  margin: 0 -9px; word-break: keep-all; hyphens: none;
}
.logo-tile:hover { border-color: var(--grigio-3); }
.logo-tile:active { transform: scale(.985); }
.logo-tile:focus-visible { outline: none; border-color: var(--rosso);
  box-shadow: 0 0 0 3px rgba(227,6,19,.12); }
.logo-tile.su { border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(227,6,19,.10); }
.logo-spunta {
  position: absolute; top: -8px; right: -8px; width: 23px; height: 23px;
  border-radius: 50%; background: var(--rosso); color: #fff; font-size: 12px;
  line-height: 23px; text-align: center; font-weight: 700;
  box-shadow: 0 2px 6px rgba(227,6,19,.35);
  opacity: 0; transform: scale(.5); transition: opacity .16s, transform .18s;
}
.logo-tile.su .logo-spunta { opacity: 1; transform: scale(1); }

/* ---- «Si comincia?»: la schermata che apre il rilievo -------------------
   Tre righe da leggere in due secondi, in piedi davanti a un cancello: il
   lavoro giusto, e con che testa esce il foglio. Etichetta a sinistra, valore
   in grande accanto — non due righe di testo da decifrare.               */
.tf.avvio .tf-domanda,
.tf.avvio .tf-aiuto { text-align: center; }
.tf.avvio .tf-campo > label { text-align: center; }

.tf-avvio {
  border: 1px solid var(--bordo); border-radius: var(--r-g);
  background: var(--evidenza); overflow: hidden; text-align: left;
}
/* Tre righe della stessa altezza, etichette incolonnate e valori sulla stessa
   riga di base: una tabella storta e' la prima cosa che si vede aprendo il
   rilievo, e non depone bene per tutto il resto. */
.tf-avvio-riga {
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  min-height: 54px; border-top: 1px solid var(--bordo);
}
.tf-avvio-riga:first-child { border-top: 0; }
.tf-avvio-riga .et {
  flex: 0 0 86px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-2); font-weight: 600; line-height: 1.25;
  align-self: center;
}
.tf-avvio-riga b {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere;
}
.tf-campo.tf-loghi { margin-top: 26px; margin-bottom: 10px; }

/* ======================================================================
   Le risposte che si danno guardando
   ====================================================================== */

/* ---- «c'e'»: un riquadro acceso, non un si e un no ---------------------
   Quattro particolari volevano otto pulsanti e otto tocchi per dire la cosa
   piu' comune — che non ci sono. Qui si tocca solo quello che c'e', e acceso
   e' verde: da un metro si vede cosa ha questo infisso senza leggere.      */
/* I riquadri crescono, ma fino a un certo punto: un tasto alto tre dita con
   dentro una pallina e una parola non e' spazio sfruttato, e' spazio vuoto con
   un bordo intorno. Oltre quella misura l'aria si divide sopra e sotto. */
.tf-riquadri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: minmax(96px, 186px); align-content: center;
  gap: 10px; margin-top: 4px;
}
.tf-riquadro {
  position: relative; appearance: none; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 92px; padding: 14px 12px; text-align: center;
  border: 1.5px solid var(--bordo-forte); border-radius: 14px; background: var(--card);
  color: var(--testo);
  transition: border-color .14s, background .14s, color .14s, transform .08s;
}
.tf-riquadro:hover { border-color: var(--grigio-3); }
.tf-riquadro:active { transform: scale(.98); }
.tf-riquadro-nome { font-size: 15px; font-weight: 600; line-height: 1.25; }
/* Il riquadro prende tutta l'altezza che c'e': allora anche quello che c'e'
   dentro cresce, o il tasto sembra vuoto. Ed e' un bersaglio per un pollice
   con il guanto, non per un mouse. */
.tf-riquadro .tf-spunta {
  width: 38px; height: 38px; border-radius: 50%; font-size: 19px; line-height: 38px;
  border: 1.5px solid var(--bordo-forte); color: transparent; font-weight: 700;
  transition: background .14s, border-color .14s, color .14s, transform .18s;
}
.tf-riquadro.su {
  border-color: var(--ok); background: #eefaf2; color: #10673c;
}
.tf-riquadro.su .tf-spunta {
  background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.06);
}
.tf-auto { font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; opacity: .65; }

/* ---- «aggiungi persiana»: un gesto, non una domanda ------------------- */
.tf-campo-invito { text-align: center; }
.tf-aggiungi {
  appearance: none; font: inherit; cursor: pointer; width: 100%; max-width: 340px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px 22px; font-size: 16px; font-weight: 600;
  border: 1.5px dashed var(--bordo-forte); border-radius: 14px;
  background: var(--card); color: var(--testo);
  transition: border-color .14s, background .14s, color .14s, transform .08s;
}
.tf-aggiungi:hover { border-color: var(--rosso); color: var(--rosso);
  background: var(--rosso-tenue); }
.tf-aggiungi:active { transform: scale(.985); }
.tf-aggiungi.su { border-style: solid; border-color: var(--ok); background: #eefaf2;
  color: #10673c; }
.tf-spunta.grande { width: 26px; height: 26px; border-radius: 50%; background: var(--ok);
  color: #fff; font-size: 14px; line-height: 26px; text-align: center; font-weight: 700; }
.tf-sotto-invito { margin: 10px 0 0; }

/* ---- i colori si scelgono guardandoli --------------------------------- */
.tf-colori {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 8px; margin-top: 4px;
}
.tf-colore {
  position: relative; appearance: none; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; text-align: left;
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: var(--card);
  color: var(--testo); min-height: 54px;
  transition: border-color .14s, background .14s, transform .08s;
}
.tf-colore:hover { border-color: var(--grigio-3); }
.tf-colore:active { transform: scale(.98); }
.tf-colore.su { border-color: var(--rosso); background: var(--rosso-tenue); }
.tf-campione {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  /* il bordo scuro serve al bianco: senza, un campione bianco su carta bianca
     non e' un campione, e' un buco */
  box-shadow: inset 0 0 0 1px rgba(46,45,45,.22);
}
.tf-campione[data-vuoto] { background:
  repeating-linear-gradient(45deg, #ececeb 0 5px, #dcdcda 5px 10px); }
.tf-colore-nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  line-height: 1.2; }
.tf-colore .tf-spunta { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rosso); color: #fff; font-size: 10px; line-height: 18px;
  text-align: center; font-weight: 700; opacity: 0; transform: scale(.5);
  transition: opacity .16s, transform .18s; }
.tf-colore.su .tf-spunta { opacity: 1; transform: scale(1); }

/* ---- Italia o estero: una bandiera e un mappamondo -------------------- */
.tf-bandiere { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.tf-bandiera {
  appearance: none; font: inherit; cursor: pointer; font-size: 15px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; min-height: 104px;
  border: 1.5px solid var(--bordo-forte); border-radius: 14px; background: var(--card);
  color: var(--testo); transition: border-color .14s, background .14s, transform .08s;
}
.tf-bandiera:hover { border-color: var(--grigio-3); }
.tf-bandiera:active { transform: scale(.98); }
.tf-bandiera.su { border-color: var(--rosso); background: var(--rosso-tenue);
  color: var(--rosso-scuro); }
.tf-segno { width: 40px; height: 28px; color: var(--grigio-2); }
.tf-bandiera.su .tf-segno { color: var(--rosso-scuro); }
.tf-tricolore {
  border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(46,45,45,.2);
  background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%);
}

/* ---- da che parte si apre: si risponde dalla parte giusta ------------- */
.tf-vie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.tf-via { display: flex; flex-direction: column; gap: 7px; }
.tf-via.dx { text-align: right; }
.tf-via-et {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-3); font-weight: 700;
}
.tf-via .tf-chip { text-align: center; }
.tf-chips.tf-senza-lato { margin-top: 12px; }

/* Larghezza e altezza stanno affiancate: sono una misura sola. */
.tf-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-coppia .tf-campo.numerico { max-width: none; margin: 0 0 14px; }
.tf-coppia .tf-input.grande { font-size: 26px; padding: 13px 8px; }
.tf-coppia .tf-misura .tf-input { padding-left: 10px; padding-right: 34px; }
.tf-coppia .tf-unita { right: 10px; font-size: 12px; }

/* Schermi bassi: la stessa schermata, piu' stretta di fiato, senza scorrere. */
@media (max-height: 720px) {
  .tf-palco { padding: 14px 16px; }
  .tf-domanda { font-size: 23px; }
  .tf-aiuto { margin-bottom: 14px; font-size: 13px; }
  .tf-campo { margin-bottom: 14px; }
  .tf-riquadro { min-height: 72px; padding: 10px; gap: 6px; }
  .tf-riquadro .tf-spunta { width: 30px; height: 30px; line-height: 30px; font-size: 16px; }
  .tf-riquadro-nome { font-size: 13.5px; }
  .tf-chip { padding: 11px 14px; min-height: 44px; }
  .tf-scatta.sola { height: 148px; }
  .tf-bandiera { min-height: 88px; }
}

/* Una schermata che e' soprattutto un gesto — scattare — si centra. */
.tf.centrato .tf-domanda, .tf.centrato .tf-aiuto { text-align: center; }
.tf.centrato .tf-scatti { justify-content: center; }

/* Che infisso e': prima la famiglia, poi la variante. */
.tf-varianti { margin-top: 10px; animation: tf-entra .2s cubic-bezier(.2,.7,.3,1) both; }
.tf-varianti .tf-chip { font-size: 14px; }

/* I colori di tutto il lavoro sono cinque domande in una schermata: i
   campioni si stringono, cosi' ci stanno senza far scorrere niente. */
.tf-campo-fitto .tf-colori { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px; }
.tf-campo-fitto .tf-colore { min-height: 44px; padding: 6px 8px; gap: 7px; }
.tf-campo-fitto .tf-campione { width: 24px; height: 24px; border-radius: 7px; }
.tf-campo-fitto .tf-colore-nome { font-size: 11.5px; }
.tf-campo-fitto .tf-bandiera { min-height: 74px; padding: 10px; gap: 7px; font-size: 14px; }
.tf-campo-fitto .tf-segno { width: 32px; height: 22px; }
.tf-campo-fitto .tf-input { padding: 10px 12px; font-size: 15px; }
.tf-campo-fitto { margin-bottom: 12px; }
.tf-campo-fitto > label:not(.tf-scatta) { margin-bottom: 5px; }

/* ======================================================================
   I disegni: un infisso si riconosce prima di leggerne il nome
   ====================================================================== */
.pit { width: 100%; max-width: 128px; height: auto; aspect-ratio: 1; flex: 0 1 auto;
  min-height: 0; color: var(--grigio); stroke-linejoin: round; }
.tf-tasto.su .pit { color: var(--rosso-scuro); }

/* Il tasto: disegno grande sopra, nome sotto, e per le aperture il lato in un
   angolo — la conferma scritta di quello che il disegno ha gia' detto. */
.tf-tasto {
  position: relative; appearance: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 10px; min-height: 0;
  border: 1.5px solid var(--bordo-forte); border-radius: 16px; background: var(--card);
  color: var(--testo);
  transition: border-color .14s, background .14s, box-shadow .14s, transform .08s;
}
.tf-tasto:hover { border-color: var(--grigio-3); }
.tf-tasto:active { transform: scale(.985); }
.tf-tasto.su { border-color: var(--rosso); background: var(--rosso-tenue);
  color: var(--rosso-scuro); box-shadow: 0 0 0 3px rgba(227,6,19,.09); }
.tf-tasto-nome { font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; }
.tf-tasto-lato {
  position: absolute; top: 9px; right: 11px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; color: var(--grigio-3);
}
.tf-tasto.su .tf-tasto-lato { color: var(--rosso); }

/* Che infisso e': tre tasti in colonna su una riga sola. */
/* I tre tasti restano quasi quadrati: stirati fino in fondo allo schermo
   diventavano tre colonne con un disegnino perso in mezzo. Lo spazio che
   avanza lo prendono le varianti, che arrivano subito dopo. */
.tf-famiglie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  flex: 0 0 auto; }
.tf-famiglie .tf-tasto { aspect-ratio: 1 / 1.06; }
.tf-varianti .tf-chip { font-size: 14px; padding: 12px 12px; display: flex;
  align-items: center; }
/* Le varianti si prendono l'altezza che avanza: tasti piu' alti, pollice piu'
   sicuro, e niente mezzo schermo bianco sotto. */
.tf-risposte.pieno .tf-varianti { flex: 1 1 auto; min-height: 0; }

/* Da che parte si apre: una tastiera vera, quattro tasti grandi, il cardine
   dalla sua parte. Sopra, chi e' sinistra e chi e' destra. */
/* I quattro tasti si prendono tutta l'altezza che avanza — e' la tastiera, e
   una tastiera si usa col pollice — e il disegno cresce con loro invece di
   restare un francobollo in mezzo al bianco. */
.tf-tastiera {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
}
.tf-lato-et {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-3); font-weight: 700; padding-bottom: 2px;
}
.tf-lato-et.sx { grid-column: 1; grid-row: 1; }
.tf-lato-et.dx { grid-column: 2; grid-row: 1; text-align: right; }
.tf-tastiera.altre {
  grid-template-columns: repeat(3, 1fr); grid-template-rows: auto;
  margin-top: 12px; flex: 0 0 auto;
}
.tf-tastiera.altre .tf-tasto { padding: 10px 8px; gap: 5px; }
.tf-tastiera.altre .pit { max-width: 46px; }
.tf-tastiera.altre .tf-tasto-nome { font-size: 12.5px; }

/* ---- la misura si gira, non si scrive --------------------------------
   Una casella con dentro il cursore fa saltare su la tastiera e si mangia
   mezzo schermo. Qui il nastro scorre sotto un mirino fermo, come la rotella
   di un calibro: si centra la misura e il numero lo si legge in grande. */
.mis { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mis-testa { display: flex; align-items: center; gap: 9px; }
.mis-et {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-2); font-weight: 600;
}
.mis-quadro {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
}
.mis-ic { height: 22px; width: auto; color: var(--grigio-3); flex: 0 0 auto; }
.mis.verticale .mis-ic { height: 28px; }
.mis-numero {
  width: 150px; min-width: 0; flex: 0 0 auto;
  border: 0; background: transparent; padding: 0; text-align: right;
  font: inherit; font-family: var(--font-titolo); font-size: 40px; font-weight: 300;
  line-height: 1.08; letter-spacing: -.02em; color: var(--grigio-3);
  font-variant-numeric: tabular-nums;
}
.mis.scelta .mis-numero { color: var(--testo); }
.mis-numero:focus { outline: none; color: var(--rosso-scuro); }
.mis-numero::-webkit-outer-spin-button,
.mis-numero::-webkit-inner-spin-button { appearance: none; }
.mis-unita { font-size: 15px; color: var(--grigio-3); }
.mis-tastiera {
  appearance: none; cursor: pointer; padding: 7px; margin-left: auto;
  border: 1px solid var(--bordo); border-radius: 9px; background: var(--card);
  color: var(--grigio-3); line-height: 0;
}
.mis-tastiera svg { width: 20px; height: auto; display: block; }
.mis-tastiera:hover { border-color: var(--rosso); color: var(--rosso); }

.mis-ruota {
  position: relative; height: 70px; overflow: hidden; cursor: grab;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--evidenza);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.mis.gira .mis-ruota { cursor: grabbing; border-color: var(--rosso); }
.mis-nastro {
  position: absolute; left: 50%; top: 0; bottom: 0; will-change: transform;
  background-image:
    linear-gradient(to right, var(--bordo-forte) 1px, transparent 1px),
    linear-gradient(to right, var(--grigio-3) 1.4px, transparent 1.4px);
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, repeat-x;
}
/* I numeri stanno sotto le tacche, e il mirino si ferma prima di arrivarci:
   una lancetta rossa che taglia a meta' il numero che deve far leggere e'
   esattamente il contrario di quello che serve. */
.mis-nastro i {
  position: absolute; top: 40px; transform: translateX(-50%); font-style: normal;
  font-size: 11px; color: var(--grigio-2); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mis-mirino {
  position: absolute; left: 50%; top: 2px; height: 34px; width: 2px;
  transform: translateX(-50%); background: var(--rosso); border-radius: 2px;
}
.mis-mirino::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--rosso);
}
/* Larghezza e altezza restano una sopra l'altra, ma respirano. */
.tf-campo-misura + .tf-campo-misura { margin-top: 4px; }

/* Il piano non e' un servizio: si stacca con una riga e un po' d'aria. */
.tf-campo-staccato {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo);
}

@media (max-height: 720px) {
  .mis-ruota { height: 60px; }
  .mis-numero { font-size: 34px; }
  .mis-nastro i { top: 34px; font-size: 10px; }
  .mis-mirino { height: 28px; }
  .tf-tasto { padding: 9px 8px; gap: 6px; }
  .tf-tasto-nome { font-size: 13px; }
}

/* Due misure in una schermata: si spartiscono l'altezza invece di stare
   appiccicate in mezzo con il bianco sopra e sotto. */
.tf-risposte.pieno > .tf-campo-misura { flex: 1 1 auto; min-height: 0; }
.tf-risposte.pieno > .tf-campo-misura .mis { flex: 1 1 auto; }

/* Undici tasti corti — un piano e' un numero, non una frase. */
.tf-chips.compatte {
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 7px;
}
.tf-chips.compatte .tf-chip {
  padding: 11px 6px; min-height: 44px; text-align: center; font-size: 15px;
  font-weight: 600;
}

/* Da dove viene il numero su cui la ruota si e' gia' posizionata. */
.mis-spunto {
  font-size: 10.5px; color: var(--grigio-3); font-weight: 600;
  padding: 2px 7px; border: 1px solid var(--bordo); border-radius: 999px;
  white-space: nowrap;
}

/* ======================================================================
   Tasti con il disegno: si riconosce la figura, non si legge la parola
   ====================================================================== */
.tf-tasti { display: grid; gap: 10px; }
.tf-tasti.n2 { grid-template-columns: repeat(2, 1fr); }
.tf-tasti.n3 { grid-template-columns: repeat(3, 1fr); }
.tf-tasti.n4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tf-tasti.n5 { grid-template-columns: repeat(3, 1fr); }
/* Il tasto resta quasi quadrato: stirato fino in fondo allo schermo diventa
   una colonna col disegnino perso in mezzo. L'aria che avanza si divide
   sopra e sotto. */
.tf-tasti .tf-tasto { aspect-ratio: 1 / 1.02; }
.tf-tasti.n2 .tf-tasto { aspect-ratio: 1 / .92; }
.tf-tasti.n2 .pit { max-width: 96px; }
.tf-tasti.n3 .pit { max-width: 72px; }
.tf-tasti.n4 .tf-tasto { padding: 10px 6px; gap: 6px; }
.tf-tasti.n4 .pit { max-width: 48px; }
.tf-tasti.n4 .tf-tasto-nome { font-size: 12px; }

/* Nei tasti a scelta multipla la spunta sta nell'angolo: dice «preso anche
   questo» senza coprire il disegno. */
.tf-tasto .tf-spunta {
  position: absolute; top: 8px; right: 8px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--rosso); color: #fff; font-size: 11px;
  line-height: 21px; text-align: center; font-weight: 700;
  opacity: 0; transform: scale(.5); transition: opacity .16s, transform .18s;
}
.tf-tasto.su .tf-spunta { opacity: 1; transform: scale(1); }

/* Le stanze: diciotto, quattro per riga, piccole ma col loro oggetto. */
.tf-tasti.stanze { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tf-tasti.stanze .tf-tasto { aspect-ratio: auto; padding: 9px 4px 8px; gap: 5px;
  border-radius: 13px; }
.tf-tasti.stanze .pit { max-width: 34px; }
.tf-tasti.stanze .tf-tasto-nome { font-size: 11.5px; font-weight: 600;
  overflow-wrap: anywhere; }

/* I riquadri «c'e'» con il disegno: la figura in mezzo, la spunta nell'angolo
   — il pallino vuoto sopra il nome non serve piu', lo dice gia' il disegno
   che cosa si sta segnando. */
.tf-riquadro.con-disegno .pit { max-width: 64px; }
.tf-riquadro.con-disegno .tf-spunta {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  line-height: 24px; font-size: 13px;
}
.tf-riquadro.su .pit { color: #10673c; }

/* Bandierine: gli stessi «c'e'», in fila e bassi, per le schermate piene. */
.tf-bandierine { display: flex; gap: 8px; }
.tf-bandierine .tf-riquadro {
  flex: 1 1 0; min-width: 0; min-height: 54px; flex-direction: row;
  justify-content: flex-start; gap: 9px; padding: 8px 34px 8px 10px; text-align: left;
}
.tf-bandierine .tf-riquadro .pit { max-width: 30px; flex: 0 0 30px; }
.tf-bandierine .tf-riquadro-nome { font-size: 12.5px; line-height: 1.2; }
.tf-bandierine .tf-riquadro .tf-spunta {
  position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
  width: 20px; height: 20px; line-height: 20px; font-size: 11px;
}
.tf-bandierine .tf-riquadro.su .tf-spunta { transform: translateY(-50%) scale(1.04); }

/* La schermata stretta: stesse cose, un passo piu' strette. */
.tf-risposte.stretto { gap: 10px; }
.tf-risposte.stretto .mis { gap: 5px; }
.tf-risposte.stretto .mis-ruota { height: 50px; }
.tf-risposte.stretto .mis-numero { font-size: 30px; width: 120px; }
.tf-risposte.stretto .mis-nastro i { top: 30px; font-size: 10px; }
.tf-risposte.stretto .mis-mirino { height: 24px; }
.tf-risposte.stretto .mis-freccia { width: 40px; height: 40px; }
.tf-risposte.stretto .tf-tasti .tf-tasto {
  aspect-ratio: auto; flex-direction: row; justify-content: center;
  padding: 8px 12px; gap: 10px;
}
.tf-risposte.stretto .tf-tasti .pit { max-width: 34px; flex: 0 0 34px; }
.tf-risposte.stretto .tf-campo > label:not(.tf-scatta) { margin-bottom: 5px; }

/* Aggiungi persiana: il disegno della persiana sopra, grande. */
.tf-aggiungi { position: relative; flex-direction: column; gap: 12px; padding: 24px 22px; }
.tf-aggiungi .pit { max-width: 84px; }
.tf-aggiungi .pit ~ .ic-piu { display: none; }
.tf-aggiungi .tf-spunta.grande { position: absolute; top: 12px; right: 12px; }

/* Il colore da solo nella sua schermata: campioni grandi come mazzette. */
.tf-colori.grandi { grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-colori.grandi .tf-colore {
  flex-direction: column; align-items: stretch; padding: 8px 8px 10px; gap: 9px;
  min-height: 0;
}
.tf-colori.grandi .tf-campione { width: 100%; height: 62px; border-radius: 10px; }
.tf-colori.grandi .tf-colore-nome { text-align: center; font-size: 14px; }
.tf-colori.grandi .tf-colore .tf-spunta { position: absolute; top: 13px; right: 13px;
  width: 22px; height: 22px; line-height: 22px; font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* Le frecce del millimetro, ai due lati del numero. */
.mis-quadro { justify-content: space-between; }
.mis-lettura { display: flex; align-items: baseline; gap: 7px; }
.mis-freccia {
  appearance: none; cursor: pointer; flex: 0 0 auto; width: 48px; height: 48px;
  border-radius: 14px; border: 1.5px solid var(--bordo-forte); background: var(--card);
  color: var(--grigio); display: inline-flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color .12s, background .12s, color .12s, transform .06s;
}
.mis-freccia svg { width: 24px; height: 24px; }
.mis-freccia:hover { border-color: var(--grigio-3); }
.mis-freccia.premuta { border-color: var(--rosso); color: var(--rosso);
  background: var(--rosso-tenue); transform: scale(.96); }

/* Il «c'e'» da solo: una riga larga col suo disegno. */
.tf-bandierine.larga .tf-riquadro {
  min-height: 62px; padding: 10px 44px 10px 14px; gap: 12px;
}
.tf-bandierine.larga .tf-riquadro .pit { max-width: 38px; flex-basis: 38px; }
.tf-bandierine.larga .tf-riquadro-nome { font-size: 14.5px; }
.tf-bandierine.larga .tf-riquadro .tf-spunta { right: 14px; width: 24px; height: 24px;
  line-height: 24px; font-size: 13px; }
.tf-bandierine .tf-auto { margin-left: auto; margin-right: 4px; }

/* Stanze: il disegno un po' piu' grande, c'e' posto. */
.tf-tasti.stanze .pit { max-width: 40px; }
.tf-tasti.stanze .tf-tasto { padding: 11px 4px 9px; gap: 6px; }

/* ======================================================================
   Il magazzino: si usa in piedi, col telefono in una mano e la scatola
   nell'altra. Tasti grandi, disegni al posto delle parole, niente tabelle.
   ====================================================================== */
.pit.mini { width: 18px; height: 18px; max-width: 18px; flex: 0 0 18px; vertical-align: -4px; }
.btn .pit.mini { margin-right: 1px; }
.card > header h2 .pit.mini { margin-right: 4px; color: var(--grigio-2); }

/* ---- il menu «altro» ---------------------------------------------------- */
.mg-altro { position: relative; }
.mg-altro > summary { list-style: none; font-size: 18px; letter-spacing: .05em; padding: 5px 13px; }
.mg-altro > summary::-webkit-details-marker { display: none; }
.mg-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 12px;
  box-shadow: var(--ombra-alta); padding: 6px; display: flex; flex-direction: column;
}
.mg-menu a, .mg-menu button {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--testo); text-decoration: none;
  font: inherit; font-size: 13.5px; font-weight: 550; text-align: left; background: none; border: 0;
  width: 100%; cursor: pointer;
}
.mg-menu a:hover, .mg-menu button:hover { background: var(--evidenza); }
.mg-menu .mg-menu-rosso { color: var(--err); }
.mg-menu form { margin: 0; border-top: 1px solid var(--bordo); margin-top: 4px; padding-top: 4px; }

/* ---- le quattro azioni --------------------------------------------------- */
.mg-azioni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mg-azione {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 16px 8px 14px; border-radius: var(--r-g); background: var(--card); color: var(--carbone);
  border: 1.5px solid var(--bordo); box-shadow: var(--ombra); text-decoration: none; cursor: pointer;
  font: inherit; text-align: center; transition: border-color .12s, transform .08s, background .12s;
}
.mg-azione .pit { width: 46px; max-width: 46px; color: var(--grigio); margin-bottom: 4px; }
.mg-azione b { font-size: 15px; font-weight: 700; }
.mg-azione span { font-size: 11.5px; color: var(--testo-2); }
.mg-azione:hover { border-color: var(--grigio-3); }
.mg-azione:active { transform: scale(.98); }
.mg-azione.conta .pit, .mg-azione.su .pit { color: var(--rosso); }
.mg-azione.su { border-color: var(--rosso); background: var(--rosso-tenue); }
.mg-azione.su b { color: var(--rosso-scuro); }

/* ---- i posti: sede e mezzi ---------------------------------------------- */
.mg-luoghi {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.mg-luoghi::-webkit-scrollbar { display: none; }
.mg-luogo {
  flex: 0 0 auto; display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto;
  column-gap: 9px; align-items: center; padding: 8px 14px 8px 10px; border-radius: 12px;
  background: var(--card); border: 1.5px solid var(--bordo); color: var(--carbone); text-decoration: none;
  scroll-snap-align: start; min-width: 124px; transition: border-color .12s, background .12s;
}
.mg-luogo .pit { grid-row: span 2; width: 30px; max-width: 30px; color: var(--grigio-2); }
.mg-luogo b { font-size: 13.5px; line-height: 1.2; }
.mg-luogo span { font-size: 11px; color: var(--testo-2); white-space: nowrap; }
.mg-luogo:hover { border-color: var(--grigio-3); }
.mg-luogo.su { border-color: var(--rosso); background: var(--rosso-tenue); }
.mg-luogo.su .pit { color: var(--rosso); }

/* ---- i numeri ------------------------------------------------------------ */
.mg-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mg-kpi > div {
  background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 11px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.mg-kpi span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--grigio-2); font-weight: 700; }
.mg-kpi b { font-family: var(--font-titolo); font-size: 21px; font-weight: 600; color: var(--carbone);
  font-variant-numeric: tabular-nums; }
.mg-kpi .allarme b { color: var(--rosso); }

/* ---- cerca e filtri ------------------------------------------------------ */
.mg-filtri { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mg-cerca { flex: 1 1 280px; position: relative; }
.mg-cerca input {
  padding: 12px 14px 12px 40px; border-radius: 12px; font-size: 15px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a8a8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px 50% / 18px no-repeat;
}
.mg-segmenti {
  display: inline-flex; background: var(--evidenza); border: 1px solid var(--bordo); border-radius: 11px;
  padding: 3px; gap: 2px; flex-wrap: wrap;
}
.mg-segmenti > button, .mg-segmenti > a {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--testo-2);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.mg-segmenti > .su { background: var(--card); color: var(--carbone); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mg-interruttore {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; text-decoration: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--testo-2);
}
.mg-interruttore input { width: 18px; height: 18px; pointer-events: none; }
a.mg-interruttore input { pointer-events: none; }

.mg-reparti {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none;
}
.mg-reparti::-webkit-scrollbar { display: none; }
.mg-rep {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px;
  border-radius: 20px; border: 1px solid var(--bordo); background: var(--card); cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--testo);
}
.mg-rep .pit { width: 22px; max-width: 22px; color: var(--grigio-2); }
.mg-rep b { font-weight: 600; }
.mg-rep i { font-style: normal; font-size: 11px; color: var(--testo-2); background: var(--evidenza);
  border-radius: 10px; padding: 1px 7px; }
.mg-rep.su { border-color: var(--carbone); background: var(--carbone); color: var(--card); }
.mg-rep.su .pit { color: var(--card); }
.mg-rep.su i { background: rgba(255,255,255,.18); color: var(--card); }

/* ---- l'elenco ------------------------------------------------------------ */
.mg-elenco { overflow: visible; }
.mg-riga {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--bordo); transition: background .3s, opacity .3s;
}
.mg-riga:last-of-type { border-bottom: 0; }
.mg-ic {
  width: 44px; height: 44px; border-radius: 11px; background: var(--evidenza); border: 1px solid var(--bordo);
  display: grid; place-items: center; color: var(--grigio-2);
}
.mg-ic .pit { width: 30px; max-width: 30px; color: inherit; }
.mg-cosa { min-width: 0; color: var(--testo); text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.mg-cosa > b {
  font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
a.mg-cosa:hover > b { color: var(--rosso-scuro); }
.mg-dati { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; color: var(--testo-2); }
.mg-dati .mono { font-size: 11px; }
.mg-forn { display: inline-flex; align-items: center; gap: 5px; }
.mg-forn img { height: 16px; width: auto; max-width: 70px; object-fit: contain; }
.mg-forn i {
  width: 18px; height: 18px; border-radius: 5px; color: #fff; font-style: normal; font-size: 8.5px;
  font-weight: 800; display: inline-grid; place-items: center; letter-spacing: .02em;
}
.mg-quanti { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mg-tot { font-family: var(--font-titolo); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--carbone); line-height: 1; }
.mg-dove { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 220px; }
.mg-dove i { font-style: normal; font-size: 10.5px; background: var(--evidenza); border: 1px solid var(--bordo);
  border-radius: 6px; padding: 1px 6px; color: var(--testo-2); white-space: nowrap; }
.mg-riga.neg .mg-tot, .mg-riga.neg .mg-step input { color: var(--err); }
.mg-gruppo {
  display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--grigio-2); border-bottom: 1px solid var(--bordo);
  background: var(--evidenza);
}
.mg-gruppo .pit { width: 20px; max-width: 20px; color: var(--grigio-3); }
.mg-conta .mg-riga.contato .mg-ic { background: #e9f6ef; border-color: #cfeadd; color: var(--ok); }

/* ---- le frecce e il numero ---------------------------------------------- */
.mg-step {
  display: inline-flex; align-items: center; border: 1.5px solid var(--bordo-forte); border-radius: 12px;
  background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s; position: relative;
}
.mg-step button {
  appearance: none; border: 0; background: none; width: 38px; height: 40px; font-size: 20px; line-height: 1;
  color: var(--grigio); cursor: pointer; touch-action: manipulation; font-family: inherit;
}
.mg-step button:active { background: var(--evidenza); }
.mg-step input {
  width: 58px; border: 0; border-radius: 0; text-align: center; font-size: 16px; font-weight: 650;
  padding: 8px 2px; font-variant-numeric: tabular-nums; background: transparent; box-shadow: none !important;
}
.mg-step .tick {
  display: none; width: 40px; background: var(--ok); color: #fff; font-size: 17px; font-weight: 800;
}
.mg-step.cambiato { border-color: var(--ok); }
.mg-step.cambiato:not(.auto) .tick { display: block; }
.mg-step.auto .tick { display: none !important; }
.mg-step.attesa { opacity: .6; }
.mg-step.fatto { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(27,138,82,.18); }
.mg-step.errore { border-color: var(--err); box-shadow: 0 0 0 3px rgba(193,18,31,.14); }

/* ---- la conta ------------------------------------------------------------ */
.mg-progresso { padding: 14px 16px; }
.mg-prog-testo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 10px; }
.mg-prog-testo b { font-size: 16px; }
.mg-prog-testo .spazio { flex: 1; }
.mg-barra { display: block; height: 8px; border-radius: 6px; background: var(--evidenza);
  border: 1px solid var(--bordo); overflow: hidden; }
.mg-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #34b474);
  border-radius: 6px; transition: width .4s ease; }

/* ---- i movimenti --------------------------------------------------------- */
.mg-mov-riga {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--bordo);
}
.mg-mov-riga:last-child { border-bottom: 0; }
.mg-mov-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--evidenza); color: var(--grigio-2); }
.mg-mov-ic .pit { width: 24px; max-width: 24px; color: inherit; }
.mg-mov-cosa { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--testo); text-decoration: none; }
.mg-mov-cosa b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-mov-cosa span { font-size: 11.5px; color: var(--testo-2); }
.mg-mov-q { font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.mg-mov-riga.carico .mg-mov-ic { background: #e9f6ef; color: var(--ok); }
.mg-mov-riga.carico .mg-mov-q { color: var(--ok); }
.mg-mov-riga.scarico .mg-mov-ic { background: var(--rosso-tenue); color: var(--rosso); }
.mg-mov-riga.scarico .mg-mov-q { color: var(--rosso-scuro); }
.mg-mov-riga.trasferimento .mg-mov-ic { background: #eef3fb; color: #2d5f9e; }
.mg-mov-riga.archiviato { opacity: .5; }

/* ---- il movimento: tre passi e un carrello ------------------------------- */
.mv { max-width: 920px; margin: 0 auto; padding-bottom: 90px; }
.mv-passo { margin-bottom: 22px; }
.mv-h { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 12px; }
.mv-h i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--carbone); color: var(--card);
  font-style: normal; font-size: 13px; display: inline-grid; place-items: center; flex: none;
}
.mv-tipi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mv-riga { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mv-et { flex: 0 0 60px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--grigio-2); font-weight: 700; }
.mv-luoghi { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding: 2px; scrollbar-width: none; }
.mv-luoghi::-webkit-scrollbar { display: none; }
.mv-luogo {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px;
  border-radius: 12px; border: 1.5px solid var(--bordo); background: var(--card); font: inherit;
  font-size: 13.5px; color: var(--carbone); cursor: pointer;
}
.mv-luogo .pit { width: 26px; max-width: 26px; color: var(--grigio-2); }
.mv-luogo.su { border-color: var(--rosso); background: var(--rosso-tenue); }
.mv-luogo.su .pit { color: var(--rosso); }
.mv-luogo:disabled { opacity: .35; cursor: not-allowed; }
.mv-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.mv-extra .campo { margin: 0; }
.mv-extra .campo.largo { grid-column: span 2; }
.mv-cerca { margin-bottom: 12px; }
.mv-trovati {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(420px, 55vh);
  overflow-y: auto; background: var(--card); border: 1px solid var(--bordo); border-radius: 14px;
  box-shadow: var(--ombra-alta); padding: 4px;
}
.mv-trovato {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 30px; gap: 10px; align-items: center;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit;
  text-align: left; cursor: pointer; color: var(--testo);
}
.mv-trovato:hover { background: var(--evidenza); }
.mv-trovato .pit { width: 30px; max-width: 30px; color: var(--grigio-2); }
.mv-t-testo { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mv-t-testo b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-t-testo > span { font-size: 11.5px; color: var(--testo-2); }
.mv-t-testo em { color: var(--warn); font-style: normal; font-weight: 600; }
.mv-disp { font-size: 12px; font-weight: 700; color: var(--ok); background: #e9f6ef; border-radius: 8px; padding: 2px 8px; }
.mv-disp.zero { color: var(--grigio-3); background: var(--evidenza); }
.mv-piu { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--rosso); color: #fff; font-weight: 700; }
.mv-trovato.preso .mv-piu { background: var(--ok); font-size: 14px; }
.mv-nulla { padding: 18px; text-align: center; color: var(--testo-2); font-size: 13px; }
.mv-carrello { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g); box-shadow: var(--ombra); }
.mv-vuoto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px;
  color: var(--grigio-3); font-size: 13.5px; text-align: center; }
.mv-vuoto .pit { width: 54px; max-width: 54px; color: var(--bordo-forte); }
.mv-voce {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--bordo);
}
.mv-voce:last-child { border-bottom: 0; }
.mv-voce > .pit { width: 30px; max-width: 30px; color: var(--grigio-2); }
.mv-voce.poco { background: #fffaf0; }
.mv-voce .mg-step input { width: 50px; }
.mv-togli { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bordo); background: var(--card);
  color: var(--grigio-2); font-size: 18px; cursor: pointer; line-height: 1; }
.mv-togli:hover { color: var(--err); border-color: var(--err); }
.mv-piede {
  position: fixed; left: var(--sidebar); right: 0; bottom: 0; z-index: 60; display: flex; align-items: center;
  gap: 14px; justify-content: space-between; padding: 12px max(18px, calc((100% - 920px) / 2));
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--bordo);
}
.mv-somma { font-size: 13.5px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mv-somma span { font-size: 11.5px; color: var(--testo-2); }
.btn.grande { padding: 13px 26px; font-size: 15px; border-radius: 12px; justify-content: center; }

/* ---- la scheda articolo -------------------------------------------------- */
.ar-testa { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.ar-ic { width: 64px; height: 64px; flex: none; border-radius: 16px; background: var(--rosso-tenue);
  display: grid; place-items: center; color: var(--rosso); }
.ar-ic .pit { width: 44px; max-width: 44px; color: inherit; }
.ar-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ar-nome > b { font-family: var(--font-titolo); font-size: 18px; font-weight: 600; line-height: 1.25; }
.ar-totale { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.ar-totale b { font-family: var(--font-titolo); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ar-totale span { font-size: 11.5px; color: var(--testo-2); white-space: nowrap; }
.ar-totale i { font-style: normal; }
.ar-posti { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ar-posto { display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid var(--bordo); }
.ar-posto-ic .pit { width: 30px; max-width: 30px; color: var(--grigio-2); }
.ar-posto-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-posto-nome b { font-size: 13.5px; }
.ar-posto-nome span { font-size: 11px; color: var(--testo-2); }
.ar-posto.vuoto-q .ar-posto-ic .pit, .ar-posto.vuoto-q .ar-posto-nome b { color: var(--grigio-3); }
.ar-muovi { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.ar-reparti { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ar-rep {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 8px;
  border-radius: 12px; border: 1.5px solid var(--bordo); background: var(--card); cursor: pointer;
  font: inherit; color: var(--testo);
}
.ar-rep .pit { width: 30px; max-width: 30px; color: var(--grigio-2); }
.ar-rep b { font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
.ar-rep.su { border-color: var(--rosso); background: var(--rosso-tenue); }
.ar-rep.su .pit, .ar-rep.su b { color: var(--rosso-scuro); }
.ar-forn { display: flex; align-items: center; gap: 8px; }
.ar-forn .mg-forn img { height: 26px; max-width: 90px; }
.ar-forn .mg-forn i { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
.ar-conf { display: flex; align-items: center; gap: 10px; }
.ar-conf input { width: 84px; text-align: center; font-weight: 650; }
.ar-conf span { font-size: 12.5px; color: var(--testo-2); }
.ar-nota { margin: -4px 0 14px; }
.ar-dot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bordo);
  border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: var(--testo); }
.ar-dot span { flex: 1; font-size: 12.5px; color: var(--testo-2); text-align: right; }
.ar-dot i { font-style: normal; color: var(--grigio-3); font-size: 18px; }
.ar-in-dot { display: flex; gap: 8px; align-items: center; }
.ar-in-dot select { flex: 1; }
.ar-in-dot input { width: 70px; text-align: center; }
.ar-azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 18px; }
.ar-azioni form { margin: 0; }

/* ---- il registro --------------------------------------------------------- */
.rg-gruppo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap;
  border-color: #cfeadd; }
.rg-gruppo-ic { width: 52px; height: 52px; border-radius: 14px; background: #e9f6ef; color: var(--ok);
  display: grid; place-items: center; flex: none; }
.rg-gruppo-ic .pit { width: 36px; max-width: 36px; color: inherit; }
.rg-gruppo > div { display: flex; flex-direction: column; gap: 2px; }
.rg-gruppo > div b { font-size: 16px; }
.rg-gruppo .spazio { flex: 1; }
.rg-storico { margin-left: auto; }
.rg-giorno { position: sticky; top: 0; z-index: 2; }
.rg-g { font-size: 10.5px; color: var(--testo-2); background: var(--evidenza); border: 1px solid var(--bordo);
  padding: 2px 7px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.rg-elenco .mg-mov-riga { grid-template-columns: 36px minmax(0, 1fr) auto auto 30px; }
.rg-annulla { margin: 0; width: 30px; }
.rg-annulla button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bordo);
  background: var(--card); color: var(--grigio-3); cursor: pointer; font-size: 16px; line-height: 1; }
.rg-annulla button:hover { color: var(--err); border-color: var(--err); }

/* ---- l'import ------------------------------------------------------------ */
.im-carica, .im-anteprima { max-width: 760px; margin-left: auto; margin-right: auto; }
.im-file {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px;
  border: 2px dashed var(--bordo-forte); border-radius: 16px; cursor: pointer; text-transform: none;
  letter-spacing: 0; color: var(--testo); font-size: 14px; margin-bottom: 16px; text-align: center;
  transition: border-color .15s, background .15s;
}
.im-file .pit { width: 52px; max-width: 52px; color: var(--grigio-3); }
.im-file b { font-size: 15px; }
.im-file span { font-weight: 400; color: var(--testo-2); font-size: 12.5px; }
.im-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.im-file:hover, .im-file.pieno { border-color: var(--ok); background: #f3faf6; }
.im-file.pieno .pit { color: var(--ok); }
.im-modi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.im-modo { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--testo); cursor: pointer; }
.im-modo input { position: absolute; opacity: 0; pointer-events: none; }
.im-modo > span {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; row-gap: 3px; height: 100%;
  padding: 14px; border: 1.5px solid var(--bordo); border-radius: 14px; transition: border-color .12s, background .12s;
}
.im-modo .pit { grid-row: span 2; width: 34px; max-width: 34px; color: var(--grigio-2); }
.im-modo b { font-size: 14px; }
.im-modo i { font-style: normal; color: var(--testo-2); font-size: 12px; line-height: 1.45; }
.im-modo i strong { color: var(--err); display: block; margin-top: 4px; }
.im-modo input:checked + span { border-color: var(--ok); background: #f3faf6; }
.im-modo.attenzione input:checked + span { border-color: var(--rosso); background: var(--rosso-tenue); }
.im-modo input:checked + span .pit { color: var(--ok); }
.im-modo.attenzione input:checked + span .pit { color: var(--rosso); }
.im-cosa { list-style: none; margin: 4px 0 18px; padding: 0; }
.im-cosa li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.im-cosa li .pit { margin-top: 1px; color: var(--grigio-2); }
.im-bottoni { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.im-bottoni form { margin: 0; }

/* ---- i reparti ----------------------------------------------------------- */
.rp-voce { border-bottom: 1px solid var(--bordo); }
.rp-voce:last-child { border-bottom: 0; }
.rp-voce > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
}
.rp-voce > summary::-webkit-details-marker { display: none; }
.rp-voce > summary > b { font-size: 14px; }
.rp-voce > summary .spazio { flex: 1; }
.rp-ordine { display: flex; gap: 4px; margin: 0; }
.rp-ordine button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bordo);
  background: var(--card); cursor: pointer; color: var(--grigio); }
.rp-ordine button:disabled { opacity: .3; cursor: default; }
.rp-apri { font-style: normal; font-size: 20px; color: var(--grigio-3); transition: transform .15s; }
.rp-voce[open] .rp-apri { transform: rotate(90deg); }
.rp-modifica { padding: 4px 14px 16px 70px; }
.rp-icone { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.rp-icona { margin: 0; cursor: pointer; position: relative; }
.rp-icona input { position: absolute; opacity: 0; pointer-events: none; }
.rp-icona .pit { display: block; width: 100%; max-width: none; padding: 9px; border-radius: 11px;
  border: 1.5px solid var(--bordo); color: var(--grigio-2); background: var(--card); }
.rp-icona input:checked + .pit { border-color: var(--rosso); color: var(--rosso); background: var(--rosso-tenue); }
.rp-bottoni { display: flex; gap: 8px; margin-top: 12px; }

/* ---- i mezzi ------------------------------------------------------------- */
.mz-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.mz-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  padding: 16px; margin: 0; text-decoration: none; color: var(--testo); transition: border-color .12s, transform .08s; }
.mz-card:hover { border-color: var(--grigio-3); }
.mz-card.spento { opacity: .6; }
.mz-ic { width: 54px; height: 54px; border-radius: 14px; background: var(--evidenza); border: 1px solid var(--bordo);
  display: grid; place-items: center; color: var(--grigio); }
.mz-ic .pit { width: 38px; max-width: 38px; color: inherit; }
.mz-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-nome b { font-family: var(--font-titolo); font-size: 18px; font-weight: 600; }
.mz-nome span { font-size: 12px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-numeri { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--testo-2); padding-top: 8px; border-top: 1px solid var(--bordo); margin-top: 4px; }
.mz-numeri b { color: var(--carbone); }
.mz-dot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; }
.mz-dot-testo { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--testo-2); }
.mz-dot-testo b { color: var(--warn); }
.mz-dot.ok .mz-dot-testo b { color: var(--ok); }
.mz-dot:not(.ok) .mg-barra i { background: linear-gradient(90deg, #d99a1b, #e8b53f); }
.mz-dot.nessuna .mz-dot-testo { font-style: italic; color: var(--grigio-3); }
.mz-dot-riepilogo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.mz-dot-riepilogo > div:not(.mz-cerchio) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.mz-dot-riepilogo b { font-size: 15px; }
.mz-cerchio {
  --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--card) 76%, transparent 78%),
              conic-gradient(var(--warn) calc(var(--p) * 1%), var(--evidenza) 0);
}
.mz-dot-riepilogo.ok .mz-cerchio { background: radial-gradient(closest-side, var(--card) 76%, transparent 78%),
              conic-gradient(var(--ok) calc(var(--p) * 1%), var(--evidenza) 0); }
.mz-cerchio b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mz-completa { margin: 0; }
.mz-manca { border: 1px solid var(--bordo); border-radius: 12px; }
.mz-manca .mg-riga { text-decoration: none; color: var(--testo); }
.mz-meno { font-size: 17px; color: var(--warn); font-variant-numeric: tabular-nums; }
.mz-sede-no { color: var(--err); font-weight: 600; }
.mz-piu { margin-top: 12px; font-size: 13px; }
.mz-piu summary { cursor: pointer; color: var(--testo-2); }
.mz-piu-riga { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.mz-dati > summary, .mz-attrezzi > summary, .dt-strumento > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer;
}
.mz-dati > summary::-webkit-details-marker, .mz-attrezzi > summary::-webkit-details-marker,
.dt-strumento > summary::-webkit-details-marker { display: none; }
.mz-dati > summary h2, .mz-attrezzi > summary h2, .dt-strumento > summary h2 { margin: 0; font-size: 15px; }
.mz-dati > summary::after, .mz-attrezzi > summary::after, .dt-strumento > summary::after {
  content: "›"; margin-left: auto; font-size: 20px; color: var(--grigio-3); transition: transform .15s;
}
.mz-dati[open] > summary::after, .mz-attrezzi[open] > summary::after, .dt-strumento[open] > summary::after { transform: rotate(90deg); }
.mz-dati[open] > summary, .dt-strumento[open] > summary { border-bottom: 1px solid var(--bordo); }

/* ---- la dotazione -------------------------------------------------------- */
.dt-note { margin: -10px 0 16px; }
.dt-mezzi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 14px 16px; }
.dt-mezzo { margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.dt-mezzo input { position: absolute; opacity: 0; pointer-events: none; }
.dt-mezzo-box {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border-radius: 13px;
  border: 1.5px solid var(--bordo); background: var(--card); text-align: center; position: relative;
  transition: border-color .12s, background .12s;
}
.dt-mezzo-box .pit { width: 36px; max-width: 36px; color: var(--grigio-3); }
.dt-mezzo-box b { font-size: 14px; color: var(--grigio-2); }
.dt-mezzo-box span { font-size: 10.5px; color: var(--testo-2); }
.dt-mezzo input:checked + .dt-mezzo-box { border-color: var(--rosso); background: var(--rosso-tenue); }
.dt-mezzo input:checked + .dt-mezzo-box .pit { color: var(--rosso); }
.dt-mezzo input:checked + .dt-mezzo-box b { color: var(--carbone); }
.dt-mezzo input:checked + .dt-mezzo-box::after {
  content: "✓"; position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rosso); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.dt-applica { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  background: var(--evidenza); border-top: 1px solid var(--bordo); font-size: 13px; }
.dt-cerca-box { padding: 14px 16px 4px !important; }
.dt-cerca-box .mv-cerca { margin: 0; }
.dt-rep { padding: 8px 16px 10px; margin: 0; border-bottom: 1px solid var(--bordo); }
.dt-righe > header .muto b { color: var(--carbone); }
.mg-riga.via { opacity: 0; }
@keyframes mg-lampo { from { background: #fff7d6; } to { background: transparent; } }
.mg-riga.nuova, .mg-riga.lampo { animation: mg-lampo 1.6s ease; }
.dt-lista { display: grid; gap: 12px; margin-bottom: 18px; }
.dt-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px; margin: 0; text-decoration: none; color: var(--testo); }
.dt-card-mezzi { font-size: 12px; color: var(--testo-2); text-align: right; }

/* ---- il logo del fornitore ----------------------------------------------- */
.fo-logo { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap; }
.fo-logo form { margin: 0; }
.fo-logo label.btn { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--carbone); }
.fo-logo-img { width: 96px; height: 56px; border-radius: 12px; border: 1px solid var(--bordo); background: #fff;
  display: grid; place-items: center; padding: 8px; flex: none; }
.fo-logo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fo-logo-img i { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-style: normal; font-weight: 800;
  font-size: 14px; display: grid; place-items: center; }
.fo-logo-testo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }

@media (prefers-color-scheme: dark) {
  .mg-conta .mg-riga.contato .mg-ic, .mg-mov-riga.carico .mg-mov-ic, .rg-gruppo-ic, .mv-disp { background: #16301f; border-color: #214a30; }
  .mg-mov-riga.trasferimento .mg-mov-ic { background: #17263a; }
  .im-file:hover, .im-file.pieno, .im-modo input:checked + span { background: #16301f; }
  .mv-voce.poco { background: #2d2512; }
  .fo-logo-img { background: #f4f4f5; }
}

@media (max-width: 780px) {
  .mg-azioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mg-azione { padding: 14px 8px 12px; flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left;
    display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; }
  .mg-azione .pit { grid-row: span 2; width: 38px; max-width: 38px; margin: 0; }
  .mg-azione b { font-size: 14px; }
  .mg-azione span { font-size: 11px; }
  .mg-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mg-kpi b { font-size: 18px; }
  .mg-segmenti { width: 100%; }
  .mg-segmenti > button, .mg-segmenti > a { flex: 1; justify-content: center; padding: 7px 6px; font-size: 12px; }
  .mg-riga { grid-template-columns: 38px minmax(0, 1fr); padding: 10px 12px; gap: 6px 10px; }
  .mg-ic { width: 38px; height: 38px; }
  .mg-ic .pit { width: 26px; max-width: 26px; }
  .mg-quanti { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .mg-dove { justify-content: flex-start; max-width: none; order: 2; }
  .mg-tot { order: 1; }
  .mg-mov-riga, .rg-elenco .mg-mov-riga { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 12px; }
  .rg-g, .rg-elenco .rg-annulla:empty { display: none; }
  .rg-elenco .rg-annulla { grid-column: 3; }
  .mv-tipi { gap: 8px; }
  .mv-tipi .mg-azione { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 4px; }
  .mv-tipi .mg-azione .pit { width: 34px; max-width: 34px; }
  .mv-tipi .mg-azione span { display: none; }
  .mv-riga { flex-direction: column; align-items: stretch; gap: 6px; }
  .mv-et { flex: none; }
  .mv-extra .campo.largo { grid-column: auto; }
  .mv-voce { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .mv-voce .mg-step { grid-column: 2; justify-self: start; }
  .mv-voce .mv-togli { grid-row: 1; grid-column: 3; }
  .mv-piede { left: 0; bottom: calc(58px + env(safe-area-inset-bottom)); padding: 10px 14px; }
  .ar-testa { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .ar-ic { width: 52px; height: 52px; }
  .ar-ic .pit { width: 36px; max-width: 36px; }
  .ar-totale { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; text-align: left;
    padding-top: 10px; border-top: 1px solid var(--bordo); }
  .ar-totale b { font-size: 24px; }
  .ar-posti { grid-template-columns: 1fr; }
  .ar-posto { padding: 10px 12px; }
  .ar-reparti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .im-modi { grid-template-columns: 1fr; }
  .rp-modifica { padding: 4px 14px 16px; }
  .dt-mezzi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-card { grid-template-columns: 44px minmax(0, 1fr); }
  .dt-card-mezzi { grid-column: 1 / -1; text-align: left; }
}
/* le scelte fatte di tessere: l'input vero resta, piccolo e invisibile */
.im-modo, .rp-icona, .dt-mezzo { position: relative; }
.im-modo input, .rp-icona input, .dt-mezzo input { width: 1px; height: 1px; top: 8px; left: 8px; }
.mz-dati > summary::before, .mz-attrezzi > summary::before, .dt-strumento > summary::before { content: none !important; }

/* la testata non va mai a capo: il titolo si accorcia, i tasti restano */
.mg-testa { flex-wrap: nowrap; }
.mg-testa h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-testa > .muto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.mg-testa .btn { flex: none; }
.mg-mov-cosa span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-righe > header { flex-wrap: wrap; row-gap: 2px; }

@media (max-width: 780px) {
  .mg-testa .solo-largo { display: none; }
  .mg-testa .btn { padding: 8px 11px; }
  .mg-kpi > div { padding: 8px 12px; }
  .mg-kpi b { font-size: 17px; }
  .mg-kpi span { font-size: 9px; }
  .mz-griglia { gap: 10px; }
  .mz-card { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 14px; gap: 4px 12px; }
  .mz-ic { width: 44px; height: 44px; border-radius: 12px; }
  .mz-ic .pit { width: 30px; max-width: 30px; }
  .mz-nome b { font-size: 16px; }
  .mz-numeri { padding-top: 6px; }
  .dt-mezzi { gap: 6px; padding: 12px; }
  .dt-mezzo-box { padding: 8px 4px 7px; gap: 1px; }
  .dt-mezzo-box .pit { width: 28px; max-width: 28px; }
  .dt-mezzo-box b { font-size: 13px; }
  .dt-righe > header .muto { flex-basis: 100%; }
  .ar-reparti { gap: 6px; }
  .ar-rep { padding: 8px 4px 6px; }
}
/* sul telefono il numero sta a destra della riga, come su un foglio */
@media (max-width: 780px) {
  .mg-riga { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .mg-quanti { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; }
  .mg-dove { justify-content: flex-end; max-width: 128px; order: 2; }
  .mg-step button { width: 32px; height: 38px; font-size: 18px; }
  .mg-step input { width: 42px; font-size: 15px; padding: 7px 0; }
  .mg-step .tick { width: 34px; }
  .mg-cosa > b { font-size: 13px; }
  .mg-dati { gap: 2px 8px; font-size: 11px; }
  .mv-voce .mg-step { grid-column: auto; }
  .mv-voce { grid-template-columns: 30px minmax(0, 1fr) auto 30px; }
  .mv-voce .mv-togli { grid-row: auto; grid-column: auto; }
  .ar-posto .mg-step input { width: 50px; }
}
.mg-tot.zero { color: var(--grigio-3); font-weight: 400; }
.ar-posto.neg .mg-step input, .ar-posto.neg .ar-posto-nome b { color: var(--err); }

/* ======================================================================
   Il controllo del mezzo: la lista in mano, una spunta per riga
   ====================================================================== */
.ck-scegli { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ck-scegli form { margin: 0; }
.ck-mezzo {
  width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 12px 16px; font: inherit; color: var(--testo); cursor: pointer; text-align: center;
  transition: border-color .12s, transform .08s;
}
.ck-mezzo:hover { border-color: var(--grigio-3); }
.ck-mezzo:active { transform: scale(.98); }
.ck-mezzo-ic { width: 72px; height: 72px; border-radius: 20px; background: var(--evidenza); border: 1px solid var(--bordo);
  display: grid; place-items: center; color: var(--grigio); margin-bottom: 8px; }
.ck-mezzo-ic .pit { width: 50px; max-width: 50px; color: inherit; }
.ck-mezzo b { font-family: var(--font-titolo); font-size: 22px; font-weight: 600; }
.ck-mezzo-team { font-size: 12px; color: var(--testo-2); min-height: 16px; }
.ck-mezzo-stato { font-size: 12px; color: var(--testo-2); margin-top: 8px; }
.ck-mezzo-stato em { font-style: normal; color: var(--warn); font-weight: 600; }
.ck-mezzo-via { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--rosso); }
.ck-mezzo.in-corso { border-color: var(--rosso); background: var(--rosso-tenue); }
.ck-mezzo.in-corso .ck-mezzo-ic { color: var(--rosso); background: var(--card); }
.ck-mezzo.vecchio .ck-mezzo-stato { color: var(--warn); }

.ck-testa { position: sticky; top: 0; z-index: 20; padding: 14px 16px 12px; }
.ck-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; }
.ck-prog > b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ck-prog .spazio { flex: 1; }
.ck-conto { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 12px; background: var(--evidenza); color: var(--testo-2); }
.ck-conto i { font-style: normal; font-variant-numeric: tabular-nums; }
.ck-conto.ok { color: var(--ok); background: #e9f6ef; }
.ck-conto.manca { color: var(--warn); background: #fdf3e3; }
.ck-conto.guasto { color: var(--err); background: var(--rosso-tenue); }
.ck-filtri { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.ck-filtri .mg-cerca input { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }

.ck-gruppo { margin-bottom: 14px; }
.ck-gh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bordo);
  background: var(--evidenza); }
.ck-gh-ic .pit { width: 26px; max-width: 26px; color: var(--grigio-2); }
.ck-gh-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-gh-nome b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); }
.ck-gh-nome span { font-size: 11.5px; color: var(--testo-2); }
.ck-gh-n { font-size: 12px; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.ck-gh-n i { font-style: normal; font-weight: 700; color: var(--carbone); }
.ck-gruppo.finito .ck-gh { background: #e9f6ef; }
.ck-gruppo.finito .ck-gh-n i, .ck-gruppo.finito .ck-gh-ic .pit { color: var(--ok); }
.ck-gruppo.finito .ck-tutto { display: none; }
.ck-gruppo.speciale { border-color: #f1c9cc; }
.ck-gruppo.speciale .ck-gh { background: var(--rosso-tenue); }
.ck-gruppo.speciale .ck-gh-ic .pit, .ck-gruppo.speciale .ck-gh-nome b { color: var(--rosso-scuro); }

.ck-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--bordo); transition: background .25s; }
.ck-riga:last-child { border-bottom: 0; }
.ck-cosa { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-cosa > b { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.ck-servono b { color: var(--carbone); }
.ck-azioni { display: flex; align-items: center; gap: 6px; }
.ck-b { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bordo-forte); background: var(--card);
  color: var(--grigio-3); font-size: 20px; font-weight: 800; cursor: pointer; display: grid; place-items: center;
  touch-action: manipulation; transition: all .15s; padding: 0; font-family: inherit; }
.ck-b .pit { width: 24px; max-width: 24px; color: inherit; }
.ck-b:active { transform: scale(.94); }
.ck-step input { width: 46px; }
.ck-riga.ok { background: #f3faf6; }
.ck-riga.ok .ck-si { background: var(--ok); border-color: var(--ok); color: #fff; }
.ck-riga.ok .mg-ic { background: #e9f6ef; border-color: #cfeadd; color: var(--ok); }
.ck-riga.piu .ck-si { background: #2d5f9e; border-color: #2d5f9e; color: #fff; }
.ck-riga.manca { background: #fffaf0; }
.ck-riga.manca .ck-no { background: var(--warn); border-color: var(--warn); color: #fff; }
.ck-riga.manca .ck-step { border-color: var(--warn); }
.ck-riga.manca .ck-step input { color: var(--warn); }
.ck-riga.guasto { background: #fff4f4; }
.ck-rotto.su { background: var(--err); border-color: var(--err); color: #fff; }
.ck-riga.attesa { opacity: .6; }
.ck-riga.errore { box-shadow: inset 3px 0 0 var(--err); }

.ck-fine { margin-top: 18px; }
.ck-restano { margin: 0 0 14px; font-size: 14px; }
.ck-scelta { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: 13px; color: var(--testo); cursor: pointer; }
.ck-scelta input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.ck-scelta span { display: flex; flex-direction: column; gap: 2px; }
.ck-scelta b { font-size: 14px; }
.ck-scelta i { font-style: normal; color: var(--testo-2); }
.ck-fine-bottoni { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ck-butta { text-align: center; margin: 4px 0 100px; }
.ck-butta button { background: none; border: 0; color: var(--testo-2); font: inherit; font-size: 12.5px;
  text-decoration: underline; cursor: pointer; }
.ck-piede .mv-somma span { white-space: nowrap; }

.ck-esito { display: flex; align-items: center; gap: 16px; padding: 20px; }
.ck-esito-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none; }
.ck-esito-ic .pit { width: 46px; max-width: 46px; color: inherit; }
.ck-esito.bene { border-color: #cfeadd; }
.ck-esito.bene .ck-esito-ic { background: #e9f6ef; color: var(--ok); }
.ck-esito.male { border-color: #f5e3c3; }
.ck-esito.male .ck-esito-ic { background: #fdf3e3; color: var(--warn); }
.ck-esito > div { display: flex; flex-direction: column; gap: 3px; }
.ck-esito b { font-family: var(--font-titolo); font-size: 20px; font-weight: 600; }
.ck-esito span { font-size: 12.5px; color: var(--testo-2); }
.ck-esito-nota { color: var(--ok) !important; }
.ck-note { white-space: pre-wrap; font-size: 14px; }
.ck-rep { text-decoration: none; color: var(--testo); }
.ck-rep-q { font-size: 16px; font-variant-numeric: tabular-nums; }
.ck-rep-q.manca { color: var(--warn); }
.ck-rep.guasto .mg-ic { color: var(--err); background: var(--rosso-tenue); }
.ck-piu { padding: 8px 16px; }
.ck-dopo { margin: 18px 0; }
.ck-storia { text-decoration: none; color: var(--testo); }
.ck-storia.bene .mg-mov-ic { background: #e9f6ef; color: var(--ok); }
.ck-storia.male .mg-mov-ic { background: #fdf3e3; color: var(--warn); }
.ck-storia.aperto .mg-mov-ic { background: var(--rosso-tenue); color: var(--rosso); }
.mz-ctl { grid-column: 1 / -1; font-size: 11.5px; color: var(--testo-2); display: flex; align-items: center; gap: 5px; }
.mz-ctl.vecchio { color: var(--warn); }
.mz-ctl.in-corso { color: var(--rosso); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .ck-riga.ok, .ck-gruppo.finito .ck-gh { background: #13261a; }
  .ck-riga.manca { background: #2d2512; }
  .ck-riga.guasto { background: #2d1416; }
  .ck-conto.ok, .ck-esito.bene .ck-esito-ic, .ck-storia.bene .mg-mov-ic { background: #16301f; }
  .ck-conto.manca, .ck-esito.male .ck-esito-ic, .ck-storia.male .mg-mov-ic { background: #2d2512; }
}
@media (max-width: 780px) {
  .ck-scegli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ck-mezzo { padding: 16px 8px 12px; }
  .ck-mezzo-ic { width: 56px; height: 56px; border-radius: 16px; }
  .ck-mezzo-ic .pit { width: 38px; max-width: 38px; }
  .ck-mezzo b { font-size: 19px; }
  .ck-testa { top: 56px; padding: 12px; margin-left: -2px; margin-right: -2px; }
  .ck-riga { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 10px 10px 10px 12px; }
  .ck-riga .mg-ic { width: 34px; height: 34px; }
  .ck-riga .mg-ic .pit { width: 22px; max-width: 22px; }
  .ck-cosa > b { font-size: 13px; }
  .ck-cosa .mg-forn span, .ck-cosa .mono { display: none; }
  .ck-b { width: 40px; height: 40px; font-size: 18px; }
  .ck-azioni { gap: 5px; }
  .ck-gh { padding: 9px 12px; gap: 8px; }
  .ck-esito { padding: 16px; }
}
@media (max-width: 780px) {
  .ck-mezzo { padding: 12px 8px 10px; gap: 1px; }
  .ck-mezzo-ic { width: 48px; height: 48px; margin-bottom: 4px; }
  .ck-mezzo-ic .pit { width: 32px; max-width: 32px; }
  .ck-mezzo b { font-size: 18px; }
  .ck-mezzo-stato { margin-top: 4px; }
  .ck-mezzo-via { margin-top: 6px; }
}
.card > header .spazio { flex: 1; }
.ck-filtri .mg-interruttore { white-space: nowrap; }
@media (max-width: 780px) { .ck-esito b { font-size: 18px; } .ck-esito-ic { width: 52px; height: 52px; } }
.btn.primario .pit, .mg-menu .pit { color: currentColor; }

/* La misura si scrive toccando il numero: niente tasto tastiera a parte. */
.mis-numero[readonly] { cursor: text; }
.mis-numero[readonly]:hover { text-decoration: underline dotted rgba(0,0,0,.25); text-underline-offset: 6px; }

/* Sul fondo rosso (la luce del marmo) tutto il testo della misura e' bianco:
   il grigio sul rosso non si legge. */
.tf.tono-rosso .mis-et,
.tf.tono-rosso .mis-spunto,
.tf.tono-rosso .mis-ic { color: #fff; }
.tf.tono-rosso .mis-numero { color: rgba(255,255,255,.72); }
.tf.tono-rosso .mis.scelta .mis-numero,
.tf.tono-rosso .mis-numero:focus { color: #fff; }
.tf.tono-rosso .mis-numero::placeholder { color: rgba(255,255,255,.6); }
.tf.tono-rosso .mis-unita { color: rgba(255,255,255,.85); }
.tf.tono-rosso .mis-numero[readonly]:hover { text-decoration-color: rgba(255,255,255,.5); }
.tf.tono-rosso #tf-conta { color: rgba(255,255,255,.85); }
.mg-forn img { max-width: 88px; }

/* ---- il controllo in due: attrezzatura e cabina ------------------------ */
.ck-invito { display: flex; flex-direction: column; gap: 3px; margin: 0 2px 14px; }
.ck-invito b { font-family: var(--font-titolo); font-size: 20px; font-weight: 600; }
.ck-invito span { font-size: 13.5px; color: var(--testo-2); }
.ck-parti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ck-parte-f { margin: 0; }
.ck-parte {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left;
  border-radius: var(--r-g); border: 1.5px solid var(--bordo); background: var(--card); box-shadow: var(--ombra);
  font: inherit; color: var(--testo); cursor: pointer; transition: border-color .12s, background .12s, transform .08s;
}
.ck-parte:not(:disabled):hover { border-color: var(--grigio-3); }
.ck-parte:not(:disabled):active { transform: scale(.985); }
.ck-parte-emoji { font-size: 38px; line-height: 1; flex: none; }
.ck-parte-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-parte-testo b { font-size: 15px; }
.ck-parte-chi { font-size: 12.5px; color: var(--testo-2); font-weight: 600; }
.ck-parte-prog { display: block; height: 5px; border-radius: 4px; background: var(--evidenza); overflow: hidden; margin-top: 4px; }
.ck-parte-prog i { display: block; height: 100%; background: var(--grigio-3); transition: width .4s; }
.ck-parte-n { font-size: 11px; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.ck-parte.libera .ck-parte-chi { color: var(--ok); }
.ck-parte.mia { border-color: var(--rosso); }
.ck-parte.mia .ck-parte-chi { color: var(--rosso); }
.ck-parte.mia .ck-parte-prog i { background: var(--rosso); }
.ck-parte.su { background: var(--rosso-tenue); }
.ck-parte.altrui { cursor: default; opacity: .92; }
.ck-parte.altrui .ck-parte-prog i { background: #2d5f9e; }
.ck-parte.finita { border-color: #cfeadd; background: #f3faf6; cursor: default; }
.ck-parte.finita .ck-parte-chi { color: var(--ok); }
.ck-parte.finita .ck-parte-prog i { background: var(--ok); }
.ck-parte:disabled { color: var(--testo); }

.ck-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ck-att-c { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--card);
  border: 1.5px solid var(--bordo); box-shadow: var(--ombra); overflow: hidden; transition: border-color .15s, background .15s; }
.ck-att-si { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px;
  background: none; border: 0; font: inherit; color: var(--testo); cursor: pointer; text-align: center; touch-action: manipulation; }
.ck-att-si b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ck-emoji { font-size: 34px; line-height: 1; }
.ck-att-spunta { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--bordo-forte); color: transparent; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.ck-att-pb { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent;
  background: none; color: var(--grigio-3); font-size: 15px; cursor: pointer; }
.ck-att-pb:hover { border-color: var(--bordo); }
.ck-att-nota { margin: 0 10px 10px; width: auto; font-size: 13px; padding: 8px 10px; }
.ck-att-c.fatto { border-color: var(--ok); background: #f3faf6; }
.ck-att-c.fatto .ck-att-spunta { background: var(--ok); border-color: var(--ok); color: #fff; }
.ck-att-c.problema { border-color: var(--warn); background: #fffaf0; }
.ck-att-c.problema .ck-att-pb { background: var(--warn); color: #fff; }
.ck-att-c.problema .ck-att-spunta { background: var(--warn); border-color: var(--warn); color: #fff; }
.ck-att-c.attesa { opacity: .6; }
.ck-att-c.errore { border-color: var(--err); }
.ck-fine-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ck-fine-cab .ck-restano { margin: 0; }

.ck-chi { color: var(--testo) !important; }
.ck-att-rep { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ck-att-r { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--bordo); }
.ck-att-r .ck-emoji { font-size: 22px; }
.ck-att-r-nome { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.ck-att-r-nome i { font-style: normal; color: var(--warn); font-size: 12px; }
.ck-att-r-st { font-weight: 800; }
.ck-att-r.fatto .ck-att-r-st { color: var(--ok); }
.ck-att-r.problema .ck-att-r-st { color: var(--warn); }
.ck-att-r.no { opacity: .5; }

@media (prefers-color-scheme: dark) {
  .ck-parte.finita, .ck-att-c.fatto { background: #13261a; }
  .ck-att-c.problema { background: #2d2512; }
}
@media (max-width: 780px) {
  .ck-parti { gap: 8px; }
  .ck-parte { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .ck-parte-emoji { font-size: 30px; }
  .ck-parte-testo b { font-size: 13.5px; }
  .ck-att { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ck-att-si { padding: 14px 8px 12px; gap: 6px; }
  .ck-emoji { font-size: 30px; }
  .ck-att-si b { font-size: 12.5px; }
  .ck-invito b { font-size: 18px; }
}

/* La scelta della parte: due pulsanti grandi, uno sotto l'altro, che
   prendono tutto lo schermo. Niente didascalie: la domanda basta. */
.ck-parti.scelta {
  grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  height: calc(100vh - 250px); height: calc(100dvh - 250px); min-height: 340px;
}
.ck-parti.scelta .ck-parte { flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 14px; padding: 20px; }
.ck-parti.scelta .ck-parte-emoji { font-size: 72px; }
.ck-parti.scelta .ck-parte-testo { align-items: center; flex: 0 0 auto; width: min(100%, 320px); gap: 6px; }
.ck-parti.scelta .ck-parte-testo b { font-family: var(--font-titolo); font-size: 22px; font-weight: 600; }
.ck-parti.scelta .ck-parte-chi { font-size: 14px; }
.ck-parti.scelta .ck-parte-prog { width: 100%; height: 6px; }
.ck-parti.scelta .ck-parte-n { font-size: 12px; }
.ck-parti.scelta .ck-parte-f { height: 100%; }
.ck-invito { margin-bottom: 12px; }
@media (max-width: 780px) {
  .ck-parti.scelta { height: calc(100dvh - 290px); gap: 10px; }
  .ck-parti.scelta .ck-parte { flex-direction: column; align-items: center; padding: 16px; }
  .ck-parti.scelta .ck-parte-emoji { font-size: 60px; }
  .ck-parti.scelta .ck-parte-testo b { font-size: 20px; }
}
.ck-parti.scelta { height: calc(100vh - 262px); height: calc(100dvh - 262px); }
@media (max-width: 780px) { .ck-parti.scelta { height: calc(100dvh - 318px); } }

/* ============================================================ INVIO E ACCETTAZIONE
   Tre pagine strette e centrate: una cosa da fare per volta. */
.po-forma, .in-pagina { max-width: 720px; margin: 0 auto; }
.po-spunta { display: flex; align-items: center; gap: 9px; font-size: 13.5px; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--testo); margin: 2px 0 12px; cursor: pointer; }
.po-spunta input { width: 17px; height: 17px; accent-color: var(--rosso); flex: 0 0 auto; }
.po-azioni { display: flex; gap: 10px; flex-wrap: wrap; }

.in-forma .corpo { padding: 22px 22px 8px; }
.in-forma textarea { line-height: 1.5; resize: vertical; min-height: 190px; }
.in-allegato { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--bordo); border-radius: var(--r); background: var(--evidenza); margin-bottom: 12px; }
.in-pdf { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--rosso);
  border-radius: 5px; padding: 5px 7px; }
.in-allegato-nome { flex: 1 1 180px; display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.in-allegato-nome a { color: var(--testo-2); font-size: 12.5px; }
.in-scelta { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: 8px; overflow: hidden; }
.in-scelta label { margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.in-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.in-scelta span { display: block; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.in-scelta input:checked + span { background: var(--carbone); color: var(--card); }
.in-scelta input:focus-visible + span { outline: 2px solid var(--rosso); outline-offset: -2px; }
.in-pulsante { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin: 0 0 14px;
  border: 1px solid var(--bordo); border-radius: var(--r); cursor: pointer; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--testo); }
.in-pulsante > input { width: 18px; height: 18px; accent-color: var(--verde); flex: 0 0 auto; }
.in-pulsante > span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.in-piede { display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--bordo); flex-wrap: wrap; }
.in-piede .spazio { flex: 1; }
.in-invia { min-width: 128px; justify-content: center; font-size: 15px; padding: 11px 22px; }
.in-vuota .corpo { text-align: center; padding: 44px 24px; }
.in-vuota h2 { font-family: var(--font-titolo); font-size: 20px; margin: 10px 0 6px; }
.in-busta { font-size: 40px; color: var(--bordo-forte); line-height: 1; }
.in-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* Il cammino del preventivo, sulla sua scheda: quattro passi, uno acceso. */
.pv-cammino { display: flex; align-items: stretch; gap: 0; margin-bottom: 16px; background: var(--card);
  border: 1px solid var(--bordo); border-radius: var(--r-g); box-shadow: var(--ombra); overflow: hidden; }
.pv-passo { flex: 1 1 0; min-width: 0; padding: 13px 16px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--bordo); position: relative; }
.pv-passo:last-child { border-right: 0; }
.pv-passo b { font-size: 13.5px; display: flex; align-items: center; gap: 7px; color: var(--testo-2); font-weight: 600; }
.pv-passo b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bordo-forte);
  flex: 0 0 auto; }
.pv-passo span { font-size: 12px; color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-passo.fatto b { color: var(--testo); }
.pv-passo.fatto b::before { background: var(--ok); border-color: var(--ok); }
.pv-passo.ora { background: var(--evidenza); }
.pv-passo.ora b { color: var(--testo); font-weight: 700; }
.pv-passo.ora b::before { border-color: var(--rosso); background: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-tenue); }
.pv-passo.no b { color: var(--rosso-scuro); }
.pv-passo.no b::before { background: var(--rosso); border-color: var(--rosso); }
@media (max-width: 780px) {
  .pv-cammino { flex-direction: column; }
  .pv-passo { border-right: 0; border-bottom: 1px solid var(--bordo); flex-direction: row; align-items: baseline;
    justify-content: space-between; gap: 12px; padding: 11px 14px; }
  .pv-passo:last-child { border-bottom: 0; }
}

/* La pagina del cliente. */
.pv-box { max-width: 440px; }
.pv-box .interno { padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.pv-logo { width: 168px; height: auto; display: block; margin: 0 auto 4px; }
@media (prefers-color-scheme: dark) { .pv-logo { filter: invert(1) hue-rotate(180deg); } }
.pv-per { text-align: center; margin: 0; font-size: 15px; color: var(--testo-2); }
.pv-per b { color: var(--testo); }
.pv-scheda { border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; }
.pv-scheda > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px;
  border-bottom: 1px solid var(--bordo); font-size: 14px; }
.pv-scheda > div:last-child { border-bottom: 0; }
.pv-scheda span { color: var(--testo-2); flex: 0 0 auto; }
.pv-scheda b { text-align: right; font-weight: 600; }
.pv-scheda .pv-totale { background: var(--evidenza); align-items: baseline; }
.pv-scheda .pv-totale b { font-family: var(--font-titolo); font-size: 22px; font-weight: 700; }
.pv-box .btn { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; }
.pv-forma { display: flex; flex-direction: column; gap: 4px; }
.pv-forma .campo input { padding: 12px 13px; font-size: 16px; }
.pv-si { font-size: 17px !important; padding: 16px !important; font-weight: 700; }
.pv-fino { text-align: center; font-size: 12.5px; color: var(--testo-2); margin: 8px 0 0; }
.pv-no summary { text-align: center; font-size: 13px; color: var(--testo-2); cursor: pointer; list-style: none; padding: 4px; }
.pv-no summary::-webkit-details-marker { display: none; }
.pv-no[open] summary { margin-bottom: 12px; }
.pv-no textarea { font-size: 15px; }
.pv-nota { margin: 0; }
.pv-esito { text-align: center; }
.pv-esito h1 { font-family: var(--font-titolo); font-size: 23px; margin: 0 0 6px; }
.pv-esito p { margin: 0; color: var(--testo-2); font-size: 14.5px; line-height: 1.5; }
.pv-segno { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #e9f6ef; color: var(--ok); font-size: 30px; font-weight: 700; margin-bottom: 12px; }
.pv-contatti { text-align: center; font-size: 12.5px; color: var(--testo-2); margin: 2px 0 0; line-height: 1.6;
  padding-top: 16px; border-top: 1px solid var(--bordo); }
.pv-contatti a { color: inherit; }

/* Sul cruscotto: i preventivi che aspettano qualcuno. */
.pv-attesa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pv-attesa a { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; background: var(--card);
  border: 1px solid var(--bordo); border-radius: var(--r-g); box-shadow: var(--ombra); color: inherit; text-decoration: none; }
.pv-attesa a:hover { border-color: var(--bordo-forte); }
.pv-attesa b { font-family: var(--font-titolo); font-size: 26px; line-height: 1.1; }
.pv-attesa span { font-size: 13px; color: var(--testo-2); }
.pv-attesa a.acceso b { color: var(--ok); }
.pv-attesa a.spento { opacity: .55; }
@media (max-width: 780px) { .pv-attesa { gap: 8px; } .pv-attesa a { padding: 12px; } .pv-attesa b { font-size: 22px; }
  .pv-attesa span { font-size: 11.5px; } }

/* ============================================================ IL LAVORO, DAL NUMERO ALLA SQUADRA */
.ric-numero { font-size: 13px; color: var(--testo-2); margin: 0 0 6px; letter-spacing: .04em; text-transform: uppercase; }
.ric-numero b { font-family: var(--font-titolo); font-size: 30px; color: var(--rosso); letter-spacing: 0;
  display: block; margin-top: 2px; text-transform: none; }
.in-societa { display: flex; width: 100%; }
.in-societa label { flex: 1; }
.in-societa span { text-align: center; padding: 10px 12px; font-size: 13.5px; }
.pl-carta { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,146,70,.08), var(--ombra); margin-bottom: 16px; }
.pl-carta header { gap: 10px; }
.pl-griglia { display: grid; gap: 13px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-griglia .campo { margin: 0; }
.pl-carta .corpo { display: flex; flex-direction: column; gap: 14px; }
.pl-carta .corpo > .campo { margin: 0; }
.pl-persone { display: flex; flex-wrap: wrap; gap: 7px; }
.pl-persone label { margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pl-persone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-persone span { display: block; padding: 7px 12px; border: 1px solid var(--bordo-forte); border-radius: 20px;
  font-size: 13px; font-weight: 500; color: var(--testo); background: var(--card); }
.pl-persone input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.pl-persone input:focus-visible + span { outline: 2px solid var(--rosso); outline-offset: 1px; }
.pl-vai { align-self: flex-end; font-size: 15px; padding: 12px 24px; }
.pl-fatto { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 16px; background: var(--card);
  border: 1px solid var(--bordo); border-radius: var(--r-g); box-shadow: var(--ombra); color: inherit; text-decoration: none; }
.pl-fatto > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pl-fatto > span:nth-child(2) span { font-size: 12.5px; color: var(--testo-2); }
.pl-segno { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e9f6ef;
  color: var(--ok); font-weight: 700; flex: 0 0 auto; }
@media (max-width: 780px) {
  .pl-griglia { grid-template-columns: 1fr 1fr; }
  .pl-vai { align-self: stretch; justify-content: center; }
}

/* ============================================================ IL BLOCCO DEL LAVORO */
.lv-blocco { margin-bottom: 16px; }
.lv-blocco .corpo { padding: 18px 18px 6px; }
.lv-griglia { display: grid; gap: 12px 13px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lv-griglia .campo { margin: 0; position: relative; min-width: 0; }
.lv-largo { grid-column: span 2; }
.lv-tutto { grid-column: 1 / -1; margin-bottom: 12px !important; }
.lv-tutto textarea { resize: vertical; min-height: 44px; }
[data-combo] input[type=text] { padding-right: 30px; text-overflow: ellipsis; }
.lv-apri { position: absolute; right: 8px; bottom: 8px; font-size: 13px; color: var(--testo-2);
  text-decoration: none; line-height: 1; padding: 3px; }
.lv-apri:hover { color: var(--rosso); }
.sugg-nuovo { font-family: inherit !important; font-size: 13px !important; }
.lv-salvato { font-size: 12px; color: var(--ok); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.lv-salvato.visibile { opacity: 1; }
.lv-salvato.errore { color: var(--err); font-weight: 600; }
.percorso .tappa-cta { margin: 5px 0 0; position: relative; z-index: 1; }
.percorso .tappa-cta .btn { padding: 4px 10px; font-size: 11.5px; }
@media (max-width: 1100px) { .lv-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px) { .lv-griglia { grid-template-columns: 1fr 1fr; } .lv-largo { grid-column: 1 / -1; } }

.lv-coda { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.lv-coda .btn { color: var(--testo-2); }

/* ============================================================ I CRUSCOTTI DI CHI LAVORA
   Per il telefono prima di tutto: una colonna, cose grandi, niente da leggere due volte. */
.cn-pagina { max-width: 760px; margin: 0 auto; }
.cn-titolo { font-family: var(--font-titolo); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-2); margin: 22px 2px 10px; font-weight: 700; }
.cn-carta { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g); box-shadow: var(--ombra);
  padding: 16px 18px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.cn-carta.urgente { border-color: var(--rosso); }
.cn-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cn-codice { font-family: var(--font-titolo); font-weight: 700; font-size: 13px; color: var(--rosso);
  background: var(--rosso-tenue); border-radius: 7px; padding: 3px 9px; white-space: nowrap; }
.cn-ora { font-size: 13.5px; font-weight: 600; color: var(--testo); }
.cn-nome { font-family: var(--font-titolo); font-size: 21px; line-height: 1.2; }
.cn-chi { font-size: 14px; color: var(--testo-2); }
.cn-dati { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13.5px; color: var(--testo-2); }
.cn-dati span { display: inline-flex; align-items: center; gap: 6px; }
.cn-dati .pit { width: 18px; height: 18px; }
.cn-azioni { display: flex; gap: 10px; margin-top: 14px; }
.cn-azioni .btn { flex: 1; justify-content: center; padding: 14px 12px; font-size: 15px; }
.cn-vuoto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; text-align: center;
  background: var(--card); border: 1px dashed var(--bordo-forte); border-radius: var(--r-g); color: var(--testo-2);
  margin-bottom: 12px; }
.cn-vuoto .pit { width: 40px; height: 40px; color: var(--bordo-forte); }
.cn-vuoto b { font-weight: 600; font-size: 14.5px; }
.cn-tasti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.cn-tasti a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-height: 112px; padding: 14px 8px; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g);
  box-shadow: var(--ombra); color: inherit; text-decoration: none; }
.cn-tasti a:active { transform: scale(.98); }
.cn-tasti .pit { width: 34px; height: 34px; color: var(--rosso); margin-bottom: 2px; }
.cn-tasti b { font-size: 14.5px; }
.cn-tasti span { font-size: 12px; color: var(--testo-2); }
.cn-tasti .cn-allarme { color: var(--warn); font-weight: 600; }
.cn-altri { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g); overflow: hidden; }
.cn-altri > div { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bordo);
  font-size: 14px; }
.cn-altri > div:last-child { border-bottom: 0; }
.cn-altri b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cn-altri span:last-child { color: var(--testo-2); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 420px) { .cn-tasti { grid-template-columns: 1fr 1fr; } }

.uf-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.uf-due .cn-titolo { margin-top: 6px; }
.uf-riga { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 8px; background: var(--card);
  border: 1px solid var(--bordo); border-radius: var(--r); color: inherit; text-decoration: none; box-shadow: var(--ombra); }
.uf-riga:hover { border-color: var(--bordo-forte); }
.uf-riga.urgente { border-left: 4px solid var(--rosso); }
.uf-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uf-chi b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-chi span { font-size: 12.5px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-da { font-size: 12.5px; color: var(--testo-2); white-space: nowrap; font-weight: 600; }
.uf-da.tardi { color: var(--warn); }
.uf-giorno { margin-bottom: 14px; }
.uf-data { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin: 0 2px 8px; }
.uf-data span { font-size: 11.5px; font-weight: 700; color: var(--testo-2); background: var(--bordo); border-radius: 10px;
  padding: 1px 8px; }
.uf-giorno.oggi .uf-data { color: var(--rosso); }
.uf-giorno .uf-riga { box-shadow: none; }
@media (max-width: 900px) { .uf-due { grid-template-columns: 1fr; } }
.pl-urgenza input[value=urgente]:checked + span { background: var(--rosso); color: #fff; }
.pv-vai { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

/* ============================================================ I SERVIZI DEL PREVENTIVO
   Quattro disegni: spento è escluso, acceso è verde e dice chi lo paga. */
.sv-servizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 0 !important; }
.sv { display: flex; flex-direction: column; border: 1px solid var(--bordo-forte); border-radius: var(--r-g);
  background: var(--card); overflow: hidden; transition: border-color .15s, background .15s; }
.sv-tasto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1;
  padding: 16px 8px 14px; border: 0; background: none; color: var(--testo-2); cursor: pointer; font: inherit; }
.sv-tasto svg { width: 44px; height: 44px; opacity: .55; }
.sv-tasto b { font-size: 13.5px; font-weight: 600; }
.sv-tasto:focus-visible { outline: 2px solid var(--rosso); outline-offset: -2px; }
.sv.acceso { border-color: var(--verde); background: #eef8f2; }
.sv.acceso .sv-tasto { color: var(--verde); }
.sv.acceso .sv-tasto svg { opacity: 1; }
.sv.acceso .sv-tasto b { color: var(--testo); }
.sv-chi { display: none; border-top: 1px solid rgba(0,146,70,.25); }
.sv.acceso .sv-chi { display: flex; }
.sv-chi button { flex: 1; border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--testo-2); cursor: pointer; white-space: nowrap; }
.sv-chi button + button { border-left: 1px solid rgba(0,146,70,.25); }
.sv-chi button.scelto { background: var(--verde); color: #fff; }
@media (prefers-color-scheme: dark) { .sv.acceso { background: rgba(0,146,70,.14); } }
@media (max-width: 780px) { .sv-servizi { grid-template-columns: 1fr 1fr; } }

.lv-resto { grid-column: span var(--quante, 6); margin-bottom: 12px !important; }
.lv-resto textarea { resize: vertical; min-height: 38px; height: 38px; }
.sv-servizi { margin-bottom: 0 !important; }
@media (max-width: 1100px) { .lv-resto { grid-column: 1 / -1; } }

/* ============================================================ SCAFFALI */
.mg-pos, .mg-sigla { font-family: var(--font-titolo); font-weight: 700; font-size: 11.5px; letter-spacing: .02em;
  color: var(--carbone); background: var(--bordo); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.mg-sigla { font-size: 13px; padding: 4px 9px; background: var(--carbone); color: var(--card); }
.mg-gruppo .mg-sigla { margin-right: 2px; }
.mg-ordine { display: flex; justify-content: center; margin: 0 0 12px; }
.mg-ordine .in-scelta a { display: block; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--testo-2);
  text-decoration: none; }
.mg-ordine .in-scelta a.su { background: var(--carbone); color: var(--card); }

.pill.modificato { background: #fdf3e3; color: #96650b; border-color: #f5e3c3; }

/* Il riquadro «Giorno e squadra» che viene avanti quando la conferma non ha una data. */
.pl-velo { display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.pl-velo .pl-carta { width: min(760px, 100%); margin: auto; max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: var(--ombra-alta); }
.pl-piede { display: flex; justify-content: flex-end; gap: 10px; }
.pl-dopo { font-size: 14px; padding: 12px 18px; }
@media (max-width: 780px) { .pl-piede { flex-direction: column-reverse; } .pl-piede .btn { justify-content: center; } }
/* Nel riquadro i due pulsanti restano sempre a portata di dito, anche con tante persone. */
.pl-velo .pl-piede { position: sticky; bottom: -1px; margin: 0 -18px -18px; padding: 12px 18px 16px;
  background: var(--card); border-top: 1px solid var(--bordo); }
@media (max-width: 780px) {
  .pl-velo .pl-carta header { flex-wrap: wrap; }
  .pl-velo .pl-carta header .pill { display: none; }
  .pl-velo .pl-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-velo .pl-piede { flex-direction: row; }
  .pl-velo .pl-piede .btn { flex: 1; }
  .pl-velo .pl-piede .pl-dopo { flex: 0 0 auto; }
}

/* Operatori & Team: le sei squadre, ognuna con il suo interruttore e il caposquadra. */
.tm-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tm { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-g); padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ombra); transition: border-color .15s, opacity .15s; }
.tm.on { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,146,70,.08), var(--ombra); }
.tm:not(.on) .tm-testa b { opacity: .5; }
.tm-testa { display: flex; align-items: center; gap: 9px; }
.tm-testa b { font-family: var(--font-titolo); font-size: 17px; letter-spacing: .02em; }
.tm-testa .spazio { flex: 1; }
.tm select { width: 100%; }
.tm-err { font-size: 12.5px; color: var(--err); min-height: 0; }
.tm-err:empty { display: none; }
.leva { position: relative; display: inline-block; width: 44px; height: 26px; margin: 0; cursor: pointer; flex: none; }
.leva input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.leva i { position: absolute; inset: 0; border-radius: 99px; background: var(--bordo-forte); transition: background .15s; pointer-events: none; }
.leva i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.leva input:checked + i { background: var(--verde); }
.leva input:checked + i::after { transform: translateX(18px); }
.leva input:focus-visible + i { outline: 2px solid var(--verde); outline-offset: 2px; }
.leva input:disabled + i { opacity: .55; }
@media (max-width: 900px) { .tm-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tm-griglia { grid-template-columns: 1fr; } }

/* Preventivo accettato in modifica: la barra che resta in fondo finché non si conferma. */
.cm { position: sticky; bottom: 14px; z-index: 30; margin: 18px auto 0; width: fit-content; max-width: 100%;
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; border-radius: 99px;
  background: var(--carbone); color: var(--card); box-shadow: var(--ombra-alta); font-size: 14px; font-weight: 600; }
.cm[hidden] { display: none; }
.cm .btn { border-radius: 99px; padding: 11px 20px; white-space: nowrap; }
@media (max-width: 640px) { .cm { bottom: 78px; padding: 8px 8px 8px 16px; gap: 10px; font-size: 12.5px; } }

/* Sposta: l'elenco di quello che c'è, e accanto quello che c'è già dove va. */
.sp-elenco { padding: 0; }
.sp-testa, .sp-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) 78px 150px; align-items: center; gap: 12px; }
.sp-testa { position: sticky; top: 62px; z-index: 3; padding: 10px 14px; background: var(--evidenza);
  border-bottom: 1px solid var(--bordo); border-radius: var(--r-g) var(--r-g) 0 0; }
.sp-testa span { grid-column: 1 / 3; }
.sp-testa b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-testa b.manca { color: var(--rosso); }
.sp-qui { text-align: center; font-family: var(--font-titolo); font-size: 18px; font-weight: 700; color: var(--testo-2); }
.sp-riga .mg-step { justify-self: end; }
.sp-riga .mg-step button:disabled { opacity: .3; }
.sp-riga.mosso { background: rgba(0,146,70,.06); }
.sp-riga.mosso .mg-step { border-color: var(--verde); }
.sp-riga.mosso .mg-step input, .sp-riga.mosso .sp-qui { color: var(--verde); }
#sp .mg-ordine a { cursor: pointer; }
@media (max-width: 640px) {
  .sp-testa, .sp-riga { grid-template-columns: minmax(0, 1fr) 66px 124px; gap: 6px; }
  .sp-testa b { font-size: 10px; letter-spacing: .03em; }
  .sp-testa { padding: 9px 14px; }
  .sp-testa span { grid-column: 1; }
  .sp-riga .mg-ic { display: none; }
}

/* La garanzia di 10 anni sulla posa: il bollino accanto ai servizi del preventivo. */
.sv-servizi.cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-tasto .gz-bollo { fill: var(--grigio-3); opacity: 1; transition: fill .15s; }
.sv.gz.acceso .gz-bollo { fill: var(--rosso); }
@media (max-width: 1100px) { .sv-servizi.cinque { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .sv-servizi.cinque { grid-template-columns: 1fr 1fr; } .sv-servizi.cinque .gz { grid-column: 1 / -1; } }

/* Pezzo o confezione: come si conta ogni articolo che arriva a scatole. */
.cf-elenco { padding: 0; }
.cf-testa, .cf-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 92px 64px; align-items: center; gap: 12px; }
.cf-testa { padding: 10px 14px; background: var(--evidenza); border-bottom: 1px solid var(--bordo); border-radius: var(--r-g) var(--r-g) 0 0; }
.cf-testa span { grid-column: 1 / 3; }
.cf-testa b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); text-align: center; }
.cf-come { justify-self: center; }
.cf-come span { padding: 8px 14px; font-size: 13px; }
.cf-prezzo, .cf-tot { text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.cf-tot { color: var(--testo-2); }
.cf-riga[hidden] { display: none; }
@media (max-width: 720px) {
  .cf-testa { display: none; }
  .cf-riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .cf-riga .mg-ic, .cf-riga .cf-tot { display: none; }
  .cf-riga .mg-cosa { grid-column: 1 / -1; }
  .cf-come { justify-self: start; }
}

/* Cruscotto: quanto valgono i cantieri aperti, dalla loro conferma d'ordine. */
.cc-valore { font-family: var(--font-titolo); font-weight: 700; font-size: 15px; color: var(--verde);
  background: rgba(0,146,70,.09); border-radius: 99px; padding: 4px 12px; margin-left: 4px; }
.cc-euro { font-variant-numeric: tabular-nums; }