/* ============================================================
   COOLASER Quoter UI — tema scuro / accento oro
   ============================================================ */
/* Palette sito Coolaser: #0d0d0e, #fdfdfd, #dcc0a0 (+ sfumature di questi) e i tre colori
   di stato del gestionale, rosso/verde/ambra, solo per errore, conferma e avviso.
   Dal 23/10/2026 fondi, bordi e angoli sono quelli del sito nuovo (tema Shopify, assets/clz.css):
   Vincenzo ha chiesto di allineare l'interfaccia al sito. Prima il fondo era nero pieno #000. */
:root {
  --bg: #0d0d0e;
  --bg-2: #121213;
  --bg-3: #18181a;
  --border: #2b2b2d;
  --border-soft: #1e1e20;
  --text: #fdfdfd;
  --text-dim: #9c9c9c;   /* il sito usa #a3a3a3: differenza invisibile, e questo grigio lo misurano le verifiche */
  --accent: #DCC0A0;
  --accent-soft: rgba(220, 192, 160, .14);
  --accent-strong: #ead3b8;
  /* Errore, conferma e avviso hanno tre colori distinti (§7.2 dell'audit, scelti
     da Vincenzo il 06/09/2026): sono gli stessi del gestionale, così chi passa dal
     sito alla scrivania legge lo stesso linguaggio. Misurati sui tre fondi qui
     sopra: rosso 7,6:1, verde 11,1:1, ambra 9,9:1 sul nero (soglia 4,5) e li
     presidia verifica/contrasto.py. Prima --danger e --ok erano entrambi il beige
     dell'accento e il rosso c'era lo stesso, in tre versioni diverse. */
  --danger: #e08080;
  --ok: #7dce8f;
  --warn: #d4ad52;
  /* alias con i nomi del gestionale, usati dalla stampa DTF */
  --clr-red: var(--danger);
  --clr-green: var(--ok);
  --clr-amber: var(--warn);
  --radius: 16px;      /* le schede del sito */
  --radius-sm: 10px;   /* campi, pannelli e barre fitte dell'editor */
  --pillola: 999px;    /* i pulsanti del sito */
  --bordo-pillola: rgba(255, 255, 255, .24);
  --inchiostro-pulsante: #191919;
  /* L'altezza di ogni comando delle testate: barra degli strumenti, pagina
     iniziale, modulo di richiesta, stampa DTF. Un numero solo (03/10/2026):
     prima nella stessa barra convivevano 23, 26, 32, 34, 36, 40 e 60 px. */
  --ctl-h: 34px;
  /* Spessore dei bordi: a 1px su fondo scuro le curve si vedevano sgranate.
     È un solo valore: alzarlo a 3px ispessisce tutta l'interfaccia (27/08/2026). */
  --bw: 2px;
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --font: 'Poppins', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Scala tipografica. Prima erano 31 misure diverse fra 9 e 52px, 57 delle
     quali a mezzo pixel: nessuno sapeva più quale scegliere e ogni schermata
     ne inventava una nuova. Nove gradini, rapporto ~1,25, tutti interi.
     Due non sono una scelta di gusto ma un vincolo: 13px perché è la misura
     del `body` e chi eredita si muove con lui, 16px perché sotto quella soglia
     iOS ingrandisce la pagina quando si tocca un campo. Restano in px e non in
     rem: il body non parte da 16px, e passare a rem cambierebbe l'effetto
     dell'ingrandimento testo del browser — cosa che nessuno ha chiesto. Un
     testo che serve fra due gradini va al gradino, non a metà (08/09/2026). */
  --fs-xs: 9px;      /* contatori e targhette: si guardano, non si leggono */
  --fs-s: 11px;      /* etichette e note: accompagnano, non raccontano */
  --fs-m: 13px;      /* il testo che si legge davvero; è la misura del body */
  --fs-l: 16px;      /* campi da compilare (soglia iOS) e sottotitoli */
  --fs-xl: 20px;     /* apre una sezione */
  --fs-2xl: 25px;    /* apre una pagina */
  --fs-3xl: 32px;    /* il titolo che si vede per primo */
  --fs-4xl: 41px;    /* il claim della scrivania, al massimo della sua rampa */
  --fs-5xl: 52px;    /* il marchio sulla pagina iniziale, e nient'altro */
  /* tema scuro dichiarato: tendine, barre e riempimenti automatici del browser
     seguono il nostro tema invece dei colori chiari di sistema */
  color-scheme: dark;
}
/* Font del brand (self-host). Copia senza spazi nel nome per evitare
   problemi di URL/serving; l'originale resta come seconda sorgente. */
@font-face {
  font-family: 'Rocket Wildness';
  /* Il woff2 pesa 14 KB contro i 68 del ttf: su una linea lenta sono due
     secondi di logo che non si aspettano più (21/09/2026). Il ttf resta come
     riserva per i browser che il woff2 non lo leggono. */
  src: url('../fonts/RocketWildness.woff2') format('woff2'),
       url('../fonts/RocketWildness.ttf') format('truetype'),
       url('../fonts/ROCKET%20WILDNESS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* fallback Poppins se non carica */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-m);
  overflow: hidden;
}
.hidden { display: none !important; }

/* ---------- Layout ---------- */
.app { display: flex; flex-direction: column; height: 100%; }
.body { display: flex; flex: 1; min-height: 0; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-name {
  font-family: 'Rocket Wildness', var(--font);
  font-weight: 400; /* il display font non va emboldito */
  letter-spacing: .14em;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--accent);
  display: inline-block;
  /* Niente spinta: con line-height 1 l'inchiostro delle maiuscole sta
     esattamente al centro della riga (misurato il 03/10/2026 sul woff2 e sui
     due ttf: ascendente 0,80 em, discendente 0,20 em, maiuscole 0,62 em sopra
     la linea di base e 0,02 em sotto). Il translateY(-1px) che c'era («siede
     basso: compensa in su») lo spostava in alto: il titolare l'ha visto nella
     testata della stampa DTF. */
  /* Le aste del carattere del marchio sono sottilissime: su fondo nero, a
     queste dimensioni, sembrano sgranate. Un filo di contorno le riempie senza
     deformare le lettere — niente grassetto finto (28/08/2026). Il colore è
     esplicito: sulla landing il testo è riempito da un gradiente e `color`
     vale transparent, quindi currentColor sparirebbe. */
  -webkit-text-stroke: 0.016em var(--accent);
  text-rendering: geometricPrecision;
}
.brand-sub { color: var(--text-dim); font-size: var(--fs-s); letter-spacing: .08em; text-transform: uppercase; }
.topbar-center { display: flex; gap: 4px; }
.viewtab.disabled { opacity: 0.4; cursor: not-allowed; }
.viewtab {
  background: none; border: var(--bw) solid transparent; color: var(--text-dim);
  padding: 6px 16px; border-radius: 20px; cursor: pointer; font: 500 var(--fs-m) var(--font);
}
.viewtab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* Ogni comando della barra alto uguale, centrato sulla stessa linea, su una riga
   sola (03/10/2026, dal titolare: «allinea i due pulsanti e migliora le
   proporzioni anche degli altri»). Misurato prima: la lingua 23 px, le icone
   32 (29,5 quando la barra era piena), «?» e «←» 34, le schede 36 (56 quando
   andavano a capo), «Aggiungi al carrello» 40, «Salva come prodotto
   personalizzabile» 60 su due righe e 4 px più in basso. Quando non ci sta
   tutto la barra si stringe a gradini (main.js, adattaBarra): niente va a capo
   e niente si schiaccia. */
.brand, .topbar-center, .topbar-actions { flex: 0 0 auto; }
/* (la freccia indietro e l'area personale hanno la stessa misura anche fuori
   dalla barra: pagina iniziale, modulo di richiesta, stampa DTF) */
.topbar .btn, .topbar .viewtab, .btn-indietro, .btn-area {
  height: var(--ctl-h); box-sizing: border-box; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; line-height: 1; white-space: nowrap; text-decoration: none;
}
.topbar .btn.sm { padding: 0 12px; }
.topbar .viewtab { padding: 0 16px; border-radius: calc(var(--ctl-h) / 2); }
/* tre classi: deve valere più di «.topbar .btn.sm» qui sopra e di «.btn.sm» */
.topbar .btn.iconbtn { width: var(--ctl-h); padding: 0; }
.topbar .ic { width: 16px; height: 16px; }
/* i gradini della barra stretta, nell'ordine (main.js: GRADINI_LARGO) */
.topbar.stretta-1 .brand-sub { display: none; }
.topbar.stretta-2 .topbar-actions .sep { display: none; }
.topbar.stretta-2 .viewtab { padding: 0 12px; }
.topbar.stretta-3 #btn-zoom-out, .topbar.stretta-3 #btn-zoom-fit, .topbar.stretta-3 #btn-zoom-in { display: none; }
.topbar.stretta-4 .btn-icotesto span, .topbar.stretta-4 #btn-preview .pv-txt { display: none; }
.topbar.stretta-4 .btn-icotesto, .topbar.stretta-4 #btn-preview { width: var(--ctl-h); padding: 0; }
.topbar.stretta-4 #btn-preview .ic { display: block; }
.topbar.stretta-5 .brand-name { font-size: var(--fs-xl); }

/* La lingua: lo stesso comando ovunque (barra, pagina iniziale, richiesta,
   stampa DTF), alto come i pulsanti accanto e con la loro misura di testo. */
select.inp.sel-lingua { width: 64px; height: var(--ctl-h); box-sizing: border-box; flex: 0 0 auto;
                        padding: 0 24px 0 10px; font-size: var(--fs-m); line-height: 1; }

/* La freccia indietro e l'area personale (ui.js: pulsanteIndietro, linkArea):
   la freccia è sempre un quadrato, l'area personale lo è quando è solo icona.
   Tre classi, perché valgano più di «.btn.sm», che sta più in basso nel file. */
.btn.iconbtn.btn-indietro, .btn.iconbtn.btn-area { width: var(--ctl-h); padding: 0; }
.btn.btn-icotesto.btn-area { padding: 0 14px 0 11px; }
.btn-indietro .ic, .btn-area .ic { width: 16px; height: 16px; }

/* Il menù «altro» del telefono (main.js, montaMenuTelefono): area personale e
   guida, sotto il suo pulsante. */
.menu-altro {
  position: fixed; z-index: 320; min-width: 220px; padding: 6px;
  background: var(--bg-2); border: var(--bw) solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
}
.menu-altro[hidden] { display: none; }
.menu-voce {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer;
  color: var(--text); font: 500 var(--fs-m) var(--font); text-align: left; text-decoration: none;
}
.menu-voce .ic { width: 18px; height: 18px; color: var(--accent); }
.menu-voce:hover, .menu-voce:focus-visible { background: var(--accent-soft); color: var(--accent-strong); outline: none; }

/* ---------- Header compatto su mobile (logo mai coperto) ---------- */
body.mobile .topbar { gap: 6px; padding: 6px 10px; }
body.mobile .brand { gap: 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Il simbolo del marchio (® in italiano, ™ in inglese — i18n.js). Va letto,
   non ammirato: piccolo, alzato, con la spaziatura del marchio annullata
   perché .14em dopo l'ultima lettera lo staccherebbe dalla parola. Resta
   nel carattere di sistema: Rocket Wildness non ha il glifo (04/09/2026). */
.brand-r {
  font-family: var(--font);
  font-size: .34em;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: -.08em;
  opacity: .8;
  -webkit-text-stroke: 0;
  text-shadow: none;
  /* Sulla landing il marchio è riempito da un gradiente con background-clip:
     text, quindi il testo è trasparente: il simbolo eredita quella trasparenza
     e sparisce. Qui il colore torna esplicito (04/09/2026). */
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  background: none;
  animation: none;
}
body.mobile .brand-name { font-size: var(--fs-xl); letter-spacing: .07em; }
body.mobile .brand-sub { display: none; }              /* la sottodicitura libera spazio */
body.mobile .topbar-actions { gap: 3px; flex: 0 0 auto; }
body.mobile .topbar-actions .sep { display: none; }
/* zoom via pinch + HUD: i pulsanti zoom non servono su mobile */
body.mobile #btn-zoom-out, body.mobile #btn-zoom-fit, body.mobile #btn-zoom-in { display: none; }
body.mobile #lang-select { display: none; }            /* la lingua segue quella del sito */
/* Anteprima: MAI icona + testo insieme → desktop solo testo, mobile solo occhio */
#btn-preview .ic { display: none; }
body.mobile #btn-preview .ic { display: inline-block; vertical-align: middle; }
body.mobile #btn-preview .pv-txt { display: none; }
body.mobile #btn-preview { width: var(--ctl-h); padding: 0; }

/* ---------- Editor in "authoring forma" (aperto dalla config prodotto) ---------- */
/* Lavorazioni/prezzi non servono: si disegna solo la sagoma da importare. */
body.clx-shape-mode #btn-save,
body.clx-shape-mode #btn-help,
body.clx-shape-mode .sidetab[data-panel="panel-price"],
body.clx-shape-mode #panel-price,
body.clx-shape-mode .assign-banner,
body.clx-shape-mode .assign-chip,
body.clx-shape-mode .assign-hint,
body.clx-shape-mode .job-legend,
body.clx-shape-mode .mini-price { display: none !important; }
/* etichetta esplicita in alto a sx anche su mobile (poco spazio ma qui serve) */
body.clx-shape-mode .brand-sub { display: inline !important; color: var(--accent); }

/* ---------- Bottoni / input ---------- */
.btn {
  font: 500 var(--fs-m) var(--font); color: var(--text);
  background: var(--bg-3); border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-strong); }
/* Un link vestito da pulsante non è sottolineato: «Preventivatore» e «Torna
   alla homepage» nelle testate lo erano, accanto a pulsanti che non lo sono
   (03/10/2026). Era già stato tolto a mano nella pagina d'errore. */
a.btn { text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #17130d; font-weight: 600; }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: var(--fs-m); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* Un pulsante che chiede di essere premuto: pulsa d'oro finché il lavoro
   non è fatto (es. «Assegna» con tracciati ancora da assegnare). Il colore
   resta quello del pulsante: pulsa il bordo, non il testo, così si legge
   sempre. Con «riduci il movimento» resta acceso, fermo. */
.btn.pulsa { border-color: var(--accent); color: var(--accent-strong);
             animation: clx-pulsa 1.8s ease-in-out infinite; }
@keyframes clx-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,192,160,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(220,192,160,0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.pulsa { animation: none; box-shadow: 0 0 0 2px rgba(220,192,160,.35); }
}
.inp {
  background: var(--bg); border: var(--bw) solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 10px; font: 400 var(--fs-m) var(--font);
  outline: none; width: 100%;
}
.inp:focus { border-color: var(--accent); }
.inp.sm { padding: 5px 8px; font-size: var(--fs-m); width: auto; }
.inp.xs { padding: 3px 6px; font-size: var(--fs-s); width: 56px; }
select.inp option { background: var(--bg-2); }
/* Tendine native: la freccia la disegniamo noi.
   Chrome disegnava il pulsante della freccia con lo stile CHIARO del sistema e
   passandoci sopra compariva un riquadro biancastro (27/08/2026); con
   `appearance:none` quel pulsante non esiste più, e `color-scheme: dark`
   (in :root) dice al browser che i controlli nativi qui sono scuri. */
select, select.inp {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.2l4 4 4-4' fill='none' stroke='%23DCC0A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
  cursor: pointer;
}
select::-ms-expand { display: none; }
select:hover { border-color: var(--accent); }
.chk { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: var(--fs-s); cursor: pointer; }
/* Spunte: le disegniamo noi, come le tendine e i pulsanti.
   La casella nativa la metteva il sistema operativo — quadratino chiaro col
   suo bordo sottile e la sua spunta azzurra — e in mezzo ai nostri controlli
   si vedeva benissimo che veniva da un altro mondo (05/09/2026).
   `accent-color` ricolorava solo il pieno, non la forma: da qui appearance:none
   e il segno disegnato a mano, come la freccia delle tendine qui sopra. */
input[type="checkbox"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0;
  background-color: var(--bg); border: var(--bw) solid var(--border);
  border-radius: 5px; cursor: pointer;
  background-repeat: no-repeat; background-position: center;
  transition: background-color .15s, border-color .15s;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.4 6.4l2.4 2.4 4.8-5.2' fill='none' stroke='%2317130d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* il fuoco della spunta è l'anello comune (regola del fuoco, in fondo al
   file): bordo oro più alone erano due segni, e su una spunta già piena
   d'oro il bordo non cambiava (11/10/2026) */
input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
/* Nella scheda della lavorazione la spunta è una scelta come le altre, non una
   nota a piè di pagina: stesso corpo e stesso colore dei campi che ha sopra. */
.job > .chk { font-size: var(--fs-m); color: var(--text); }
/* Frecce dei campi numerici: come le spunte, quelle native le disegnava il
   sistema operativo (05/09/2026). Qui si spengono ovunque, e dove servono
   le rimette `ui.conFrecce()` con due pulsanti veri: ridipingere quello di
   Chrome non basta, perché con `appearance:none` smette anche di contare
   i clic (provato). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.num { position: relative; display: block; width: 100%; }
.num > .inp { padding-right: 24px; }
.num-frecce {
  position: absolute; right: 3px; top: 3px; bottom: 3px; width: 18px;
  display: flex; flex-direction: column; gap: 1px;
}
.num-freccia {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent; cursor: pointer;
  border-radius: 4px; color: var(--accent);
}
.num-freccia:hover { background: var(--accent-soft); }
.num-freccia:active { scale: .9; }
.num-freccia svg { width: 9px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* variante minuta: i campi del pannello Proprietà e del ribbon sono stretti */
.num.xs { display: inline-block; width: auto; }
.num.xs > .inp { padding-right: 18px; }
.num.xs .num-frecce { right: 2px; top: 2px; bottom: 2px; width: 13px; }
.num.xs .num-freccia svg { width: 8px; height: 4px; }
/* Cursori a scorrimento: binario, pollice e stato attivo disegnati da noi.
   `accent-color` ricolorava solo il pieno e lasciava il resto al sistema
   operativo (Windows in mezzo all'interfaccia scura). Qui, a differenza dei
   pulsantini dei campi numerici, `appearance:none` toglie SOLO il disegno: il
   trascinamento, le frecce da tastiera e il passo restano del browser
   (§7.3 dell'audit, 05/09/2026). Il pollice da 18 px è un bersaglio per il
   dito; il binario da 4 px lascia respirare i pannelli stretti. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; accent-color: var(--accent);
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--border);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--border);
}
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0, 0, 0, .45);
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
input[type="range"]:disabled { opacity: .45; cursor: default; }
/* Il campo data: il calendario del browser resta il suo (è la cosa migliore su
   un telefono), ma si apre scuro come il resto e l'icona è la nostra. */
input[type="date"].inp { color-scheme: dark; min-height: 36px; }
input[type="date"].inp::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .85; filter: invert(.85) sepia(.4) saturate(1.6) hue-rotate(-20deg);
}

/* ---------- Ribbon: SOTTOSEZIONI equidistanti con separatori ---------- */
.ribbon {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  padding: 4px 6px; background: var(--bg-2); border-bottom: 1px solid var(--border-soft);
}
.ribbon-group {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 18px; border-right: 1px solid var(--border-soft);
}
.ribbon-group:last-child { border-right: none; }
.ribbon-group > label {
  font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); margin-right: 6px; white-space: nowrap;
}
/* campo passo griglia: etichettato e leggibile */
.grid-step-field { color: var(--text); gap: 7px; font-size: var(--fs-m); }
.grid-step-field .inp.xs { width: 58px; text-align: center; }
/* menu Snap a tendina: spunte coerenti e testo ben leggibile */
.rb-menu.snap-menu { padding: 6px; min-width: 150px; }
.snap-menu label.chk {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px;
  font-size: var(--fs-m); color: var(--text); border-radius: 6px; cursor: pointer;
}
.snap-menu label.chk:hover { background: var(--accent-soft); }
/* ---------- Menu a tendina del ribbon (raggruppamento stile Illustrator) ---------- */
.rb-drop { position: relative; }
.rb-toggle { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.rb-toggle::after { content: '▾'; color: var(--accent); font-size: var(--fs-m); line-height: 1; }
.rb-drop.open .rb-toggle { border-color: var(--accent); color: var(--accent); }
/* position:fixed (posizionato via JS): il ribbon scorre/clippa i figli assoluti,
   il menu deve invece uscire dal contenitore senza attivare lo scroll della riga */
.rb-menu {
  display: none; position: fixed; z-index: 120;
  flex-direction: column; align-items: stretch; gap: 2px;
  width: max-content; /* tight: nessuno spazio sprecato */
  background: var(--bg-2); border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; box-shadow: var(--shadow);
}
.rb-drop.open .rb-menu { display: flex; }
.rb-menu .btn { justify-content: flex-start; text-align: left; border-color: transparent; padding: 6px 10px; }
.rb-menu .btn:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Elabora tracciati/Allinea: GRIGLIA esatta, nessuna cella vuota né bordo residuo.
   cols2 → 2×2 (Elabora tracciati) · cols4 → 4 colonne × 2 righe (Allinea:
   le 2 distribuzioni chiudono la seconda riga) */
.rb-drop.open .rb-menu.icons { display: grid; }
.rb-menu.icons { width: max-content; gap: 2px; grid-auto-rows: 32px; }
.rb-menu.icons.cols2 { grid-template-columns: repeat(2, 32px); }
.rb-menu.icons.cols4 { grid-template-columns: repeat(4, 32px); }
.rb-menu.icons .btn {
  justify-content: center;
  width: 32px; height: 32px; padding: 0; min-height: 32px;
}

/* Vincoli: riga di icone sempre visibile (non in un menu a tendina) — stessa
   taglia quadrata delle icone Pathfinder/Allinea, per coerenza e per evitare
   pulsanti di larghezza irregolare (dipendente dal singolo glifo). */
.btnrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.btnrow .btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
}

/* (rimossa la sfumatura scroll sul bordo dx: coi dropdown la barra non scorre
   quasi mai e restava un artefatto verticale sfumato all'estrema destra) */
.ribbon { position: relative; }

/* ---------- Toolbar strumenti ---------- */
.toolbar {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 7px;
  background: var(--bg-2); border-right: 1px solid var(--border);
}
.tool {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: none; border: var(--bw) solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.tool svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tool:hover { color: var(--text); background: var(--bg-3); }
.tool.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Stage ---------- */
.stage { position: relative; flex: 1; min-width: 0; background: var(--canvas-bg, #FDFDFD); }
/* NB: escludere i canvas dei RIGHELLI (.ruler): questo full-size li stirava
   a tutto schermo → "scanline" orizzontali sulla tela e righelli invisibili */
.stage canvas:not(.ruler) {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none;
  touch-action: none; /* i gesti li gestiamo noi: niente pan/zoom del browser che shifta i tap */
}
/* ---------- Anteprima 3D sempre presente (anteprima3d.js) ----------
   In vista 2D il pezzo resta in un riquadro nell'angolo in basso a destra,
   aggiornato a ogni cambio; un clic lo apre a tutto schermo. Sul telefono il
   riquadro non c'è (resta la scheda «Anteprima 3D»). */
.stage canvas#canvas-3d.pip {
  /* 64 e non 44: a 44 il bordo inferiore del riquadro toccava la pill
     «Assistenza» (bottom 8 + ~36 di altezza = 44). Ora c'è un dito di
     respiro fra i due (08/09/2026). */
  inset: auto 14px 64px auto; width: min(260px, 32%); height: min(190px, 26%);
  border: var(--bw) solid var(--border); border-radius: var(--radius); cursor: pointer;
  background: var(--bg-3); box-shadow: var(--shadow); z-index: 7;
}
.stage canvas#canvas-3d.pip:hover { border-color: var(--accent); }
.v3-pip-tag {
  position: absolute; right: 14px; bottom: 256px; z-index: 8; cursor: pointer;
  font: 600 var(--fs-s) var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: rgba(16,16,20,.82); border: var(--bw) solid var(--border);
  border-radius: 20px; padding: 4px 10px;
}
@media (max-height: 640px) { .stage canvas#canvas-3d.pip { height: 120px; } .v3-pip-tag { bottom: 186px; } }
/* con il riquadro 3D acceso, la legenda delle lavorazioni gli si mette accanto */
.stage.has-pip .job-legend { right: calc(min(260px, 32%) + 26px); }
.v3-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; pointer-events: none; z-index: 5;
}
.v3-empty span {
  max-width: 420px; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.55;
  background: rgba(16,16,20,.78); border: var(--bw) dashed var(--border); border-radius: var(--radius);
  padding: 16px 20px;
}
.v3-chip {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 20px;
  font: 600 var(--fs-s) var(--mono); color: #1a1a1a; background: var(--accent);
}
.sp-file { display: block; margin-top: 4px; font-size: var(--fs-s); line-height: 1.4; color: var(--accent); }
/* note sul file (analisi «pro»): elenco leggibile nella scheda Info */
.file-note { margin: 10px 0 0; padding-left: 16px; font-size: var(--fs-s); line-height: 1.5; }
.file-note li { margin-bottom: 4px; }

.stage-hud {
  position: absolute; left: 12px; bottom: 10px; display: flex; gap: 14px;
  font: 500 var(--fs-s) var(--mono); color: var(--text-dim);
  background: rgba(16,16,20,.75); padding: 5px 10px; border-radius: 6px;
  border: var(--bw) solid var(--border-soft); pointer-events: none;
  z-index: 6;   /* sopra il blur (1) e i righelli (2), sempre leggibile */
}
.stage-3dbar {
  /* in basso a sinistra: il top è occupato da strumenti/New file/ViewCube */
  position: absolute; bottom: 44px; left: 12px; display: flex; align-items: center; gap: 8px;
  background: rgba(22,22,28,.9); padding: 8px 12px; border-radius: var(--radius-sm);
  border: var(--bw) solid var(--border);
}
.stage-3dbar label { font-size: var(--fs-s); color: var(--text-dim); }
/* il pulsante delle quote è dentro la barra della 3D: piccolo, non ruba spazio */
.stage-3dbar .btn.sm { padding: 3px 9px; font-size: var(--fs-s); margin-left: 4px; }
.dropzone {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(16,16,20,.85); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.dropzone-inner {
  border: 2px dashed var(--accent); border-radius: var(--radius);
  padding: 48px 80px; text-align: center; font-size: var(--fs-l); color: var(--accent);
}
.dropzone-inner small { color: var(--text-dim); font-size: var(--fs-m); }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 330px; min-width: 280px; display: flex; flex-direction: column;
  background: var(--bg-2); border-left: 1px solid var(--border);
}
.side-tabs { display: flex; border-bottom: 1px solid var(--border); }
.sidetab {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); padding: 11px 4px; cursor: pointer; font: 500 var(--fs-m) var(--font);
}
.sidetab.active { color: var(--accent); border-bottom-color: var(--accent); }
.side-panels { flex: 1; overflow-y: auto; }
.panel { display: none; padding: 14px; }
.panel.active { display: block; }
/* Il pannello si richiude e si riapre (11/10/2026, dal titolare: le
   lavorazioni comparivano due volte, nella scheda «Lavorazioni» e nella
   legenda sulla tela). Aperto: un pulsante in fondo alle schede. Chiuso: una
   striscia stretta con lo stesso pulsante, che dice cosa riapre; la tela si
   allarga e la legenda delle lavorazioni compare sulla tela, che a pannello
   aperto non c'è. La classe sul body la mette main.js (montaPannello). */
.btn-pannello {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 42px; padding: 0 10px; background: none; border: 0; border-left: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  font: 600 var(--fs-s) var(--font); letter-spacing: .08em; text-transform: uppercase;
}
/* (al fuoco dalla tastiera l'anello comune e basta: la regola del fuoco, in
   fondo al file; lo sfondo insieme all'anello sarebbero due segni) */
.btn-pannello:hover { color: var(--accent); background: var(--accent-soft); }
.btn-pannello .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-pannello-txt { display: none; }
body.pannello-chiuso .sidebar { width: 46px; min-width: 0; }
body.pannello-chiuso .sidetab, body.pannello-chiuso .side-panels { display: none; }
body.pannello-chiuso .side-tabs { flex: 1; border-bottom: 0; }
body.pannello-chiuso .btn-pannello {
  flex: 1; flex-direction: column; justify-content: flex-start; gap: 12px;
  padding: 16px 0; border-left: 0; color: var(--accent);
}
body.pannello-chiuso .btn-pannello .ic { transform: rotate(180deg); }
body.pannello-chiuso .btn-pannello-txt { display: block; writing-mode: vertical-rl; }
/* la legenda delle lavorazioni sulla tela (assignui.js) solo a pannello chiuso */
body:not(.pannello-chiuso) .job-legend { display: none; }
@media (max-width: 900px) {
  /* finestra stretta ma non telefono: il pannello sta SOTTO la tela (vedi
     «Responsive») e chiuso resta una riga, con la freccia in su e in giù */
  .btn-pannello .ic { transform: rotate(90deg); }
  body.pannello-chiuso .sidebar { width: 100%; }
  body.pannello-chiuso .btn-pannello { flex-direction: row; justify-content: center; padding: 10px; }
  body.pannello-chiuso .btn-pannello .ic { transform: rotate(-90deg); }
  body.pannello-chiuso .btn-pannello-txt { writing-mode: horizontal-tb; }
}

/* ---------- Cards / key-value ---------- */
.card {
  background: var(--bg-3); border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius); padding: 13px 14px; margin-bottom: 12px;
}
.card h4 {
  margin: 0 0 10px; font-size: var(--fs-s); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.kv > div:last-child { border-bottom: none; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; font-family: var(--mono); font-size: var(--fs-m); }
.hint { color: var(--text-dim); font-size: var(--fs-s); line-height: 1.5; margin: 8px 0 0; }

/* ---------- Job (lavorazione in coda) ---------- */
.job {
  background: var(--bg-3); border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.job-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.job-title { font-weight: 600; font-size: var(--fs-m); color: var(--accent-strong); }
.job-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-l); }
.job-remove:hover { color: var(--danger); }
.job .row { display: flex; gap: 8px; margin-bottom: 8px; }
.job .row > * { flex: 1; min-width: 0; }
.field label { display: block; font-size: var(--fs-s); color: var(--text-dim); margin-bottom: 3px; }
.job-price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.job-price .val { font: 600 var(--fs-l) var(--mono); color: var(--accent); }
.badge {
  display: inline-block; font-size: var(--fs-s); padding: 2px 8px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); letter-spacing: .04em;
}
.badge.warn { background: var(--accent-soft); color: var(--accent-strong); }
/* Tecnologia di marcatura: badge risolto + aiuto "?" + range indicativo */
.tech-badge { margin-left: 7px; }
.tech-help {
  margin-left: 6px; width: 17px; height: 17px; border-radius: 50%;
  border: var(--bw) solid var(--accent); background: none; color: var(--accent);
  font: 700 var(--fs-s) var(--font); line-height: 1; cursor: pointer; vertical-align: middle;
  /* il «?» dentro il cerchio: senza questo il padding di serie del <button> lo
     spostava a destra (08/09/2026) */
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.tech-help:hover { background: var(--accent-soft); }
.tech-range {
  margin: 4px 0 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-m);
}
.tech-range b { font-family: var(--mono); }
/* Quanti pezzi: uno solo per tutto l'ordine, sotto le lavorazioni e sopra il
   totale, perché è l'ultima cosa che si decide prima di guardare il prezzo. */
.qty-ordine {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--bg-2);
}
.qty-ordine > label { font-size: var(--fs-m); color: var(--text); white-space: nowrap; }
.qty-ordine .num { width: 92px; }
.qty-ordine .num > .inp { width: 100%; text-align: center; }
.qty-ordine .hint { flex: 1 1 100%; margin: 0; font-size: var(--fs-s); line-height: 1.4; }
/* un disclaimer solo: la seconda frase è quella che costa se non si legge */
.qty-ordine .qty-nota b { color: var(--warn, #d4ad52); font-weight: 600; }
/* riga di spiegazione sotto la scelta della lavorazione */
.job .op-nota { display: block; margin: -4px 0 10px; font-size: var(--fs-s); line-height: 1.45; color: var(--text-dim); }

/* La porta verso le lavorazioni che il preventivatore non quota (piega,
   saldatura, finiture, embossing): non un errore, l'altra strada buona.
   Sta sotto la coda, con lo stesso peso visivo di una lavorazione. */
.porta-rfq {
  margin-top: 10px; padding: 14px 14px 12px;
  border: var(--bw) dashed var(--border); border-radius: var(--radius);
  background: var(--bg-2, rgba(255,255,255,.02));
}
.porta-rfq .porta-t { margin: 0 0 6px; font-size: var(--fs-m); font-weight: 600; color: var(--text); }
.porta-rfq p.hint { margin: 0 0 8px; font-size: var(--fs-m); line-height: 1.5; }
.porta-rfq .porta-lav { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.5; color: var(--accent); }

/* ---------- Totale ---------- */
.total-card {
  background: linear-gradient(140deg, var(--bg-3), #241f18);
  border: var(--bw) solid var(--accent); border-radius: var(--radius); padding: 15px;
  display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
}
.total-card .lbl { font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.total-card .val { font: 600 var(--fs-xl) var(--mono); color: var(--accent); }
/* totale PARZIALE: c'è almeno una riga che un tecnico deve guardare */
.total-card.parziale { border-style: dashed; }
.total-card.parziale .val { color: var(--text-dim); }
.hint.attn { color: var(--accent-strong, var(--accent)); }

/* Stima tempi (lead time) sotto il totale */
.lead-card {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 13px;
  background: var(--bg-2, rgba(255,255,255,.03)); border: var(--bw) solid var(--border, #2a2a2a);
  border-left: 3px solid var(--accent); border-radius: var(--radius, 8px);
  font-size: var(--fs-m); line-height: 1.4; color: var(--text-dim, #b9b3a8);
}
.lead-card .lead-ico { font-size: var(--fs-m); opacity: .9; }
.lead-card b { color: var(--text, #eee); font-weight: 600; }

/* Marcatori "valore stimato" */
.est-star { color: var(--accent, #DCC0A0); font-weight: 700; margin-left: 1px; }
.est-legend { margin-top: 6px; font-size: var(--fs-s); color: var(--text-dim, #9a9a9a); font-style: italic; }
/* Confronto fra materiali e spessori sotto il prezzo di una lavorazione (§9.5).
   Lo scarto in meno usa l'accento di marca, quello in più il testo attenuato:
   niente rosso/verde nuovi (§7.2: colori da scegliere con il titolare). */
.cmp { margin-top: 6px; }
.cmp-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-m); color: var(--accent); text-decoration: underline dotted;
}
/* al fuoco l'anello comune (regola del fuoco, in fondo al file): la sola
   sottolineatura piena, al posto di quella a puntini, quasi non si vedeva */
.cmp-toggle:hover { text-decoration: underline; }
.cmp-toggle::before { content: '▸ '; }
.cmp-toggle.open::before { content: '▾ '; }
.cmp-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cmp-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center;
  padding: 5px 8px; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 8px; font-size: var(--fs-m);
}
.cmp-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-val { font: 600 var(--fs-m) var(--mono); }
.cmp-delta { font-size: var(--fs-s); min-width: 42px; text-align: right; color: var(--text-dim, #9a9a9a); }
.cmp-delta.less { color: var(--accent); font-weight: 600; }
.cmp-nota { margin: 2px 0 0; font-size: var(--fs-s); }
@media (max-width: 480px) {
  .cmp-row { grid-template-columns: 1fr auto; }
  .cmp-delta { text-align: left; }
}

/* Anteprima a schermo (lightbox 2D navigabile) */
.pz-preview-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,10,.93);
  display: flex; flex-direction: column; backdrop-filter: blur(2px); }
.pz-preview-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.pz-preview-tabs { display: flex; gap: 6px; }
.pz-pv-tab { cursor: pointer; font: 600 var(--fs-m)/1 var(--ui, sans-serif); letter-spacing: .04em;
  padding: 8px 16px; border-radius: 8px; border: var(--bw) solid var(--border, #2a2a2a);
  background: var(--surface-2, #0f0f0f); color: var(--text-dim, #9a9a9a); }
.pz-pv-tab.active { color: #221b12; background: var(--accent, #DCC0A0); border-color: var(--accent, #DCC0A0); }
.pz-preview-close { cursor: pointer; width: 34px; height: 34px; border-radius: 8px;
  border: var(--bw) solid var(--border, #2a2a2a); background: var(--surface-2, #0f0f0f);
  color: var(--text, #eee); font-size: var(--fs-l); }
.pz-preview-close:hover { border-color: var(--accent, #DCC0A0); }
.pz-preview-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; }
.pz-preview-body:active { cursor: grabbing; }
.pz-preview-img { max-width: 82%; max-height: 82%; transform-origin: center center;
  user-select: none; -webkit-user-drag: none; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 50px rgba(0,0,0,.55); }
.pz-preview-hint { text-align: center; padding: 12px; color: var(--text-dim, #9a9a9a); font-size: var(--fs-m); }

/* ---------- ViewCube (viste rapide 3D + bussola rotazione 2D) ---------- */
.vcube {
  /* top FISSO (sotto i righelli): il contenitore non deve MAI spostarsi,
     né ruotando il cubo né al toggle dei righelli — ruota solo la grafica */
  position: absolute; right: 10px; top: 26px; z-index: 25;
  display: flex; flex-direction: column; align-items: flex-end;
  user-select: none;
}
.vc-stack { position: relative; width: 96px; height: 96px; }
/* il canvas RIEMPIE lo stack: cubo davvero all'angolo */
.stage .vcube .vc-canvas, .vc-canvas {
  position: absolute; inset: 0; left: 0; top: 0;
  width: 96px; height: 96px;
  cursor: grab; touch-action: none;
}
.vc-canvas:active { cursor: grabbing; }
/* casetta: angolo alto-sinistra del cubo, SOLO icona (niente box) */
.vc-home {
  position: absolute; left: -26px; top: -8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: var(--text-dim);
  background: none; border: none; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.vc-home svg { width: 19px; height: 19px; }
/* anello di rotazione: circonferenza CONCENTRICA al cubo (scala con esso).
   Outset minimo (4px): le frecce restano DENTRO la tela, mai tagliate. */
.vc-ring {
  position: absolute; left: -4px; top: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  pointer-events: none; z-index: 2; overflow: visible;
}
.vc-ring-btn { pointer-events: visibleStroke; cursor: pointer; color: var(--text-dim); opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.vc-ring-btn .vis { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vc-ring-btn .hit { stroke: transparent; stroke-width: 16; fill: none; }
.vc-ring-btn:hover { color: var(--accent); }
.vcube:hover .vc-ring-btn, .vcube:hover .vc-home { opacity: 1; }
.vc-home:hover { color: var(--accent); }
.vc-deg { font: 500 var(--fs-s) var(--font); color: var(--text-dim); min-width: 26px; text-align: right; display: block; margin: 3px 2px 0 0; }
/* viewport piccoli: il cubo si adatta */
@media (max-width: 1100px) {
  .vc-stack { width: 76px; height: 76px; }
  .stage .vcube .vc-canvas, .vc-canvas { width: 76px; height: 76px; }
}
.assign-chip {
  background: var(--accent); color: #191919; border-radius: 12px;
  padding: 5px 11px; font: 600 var(--fs-s) var(--font); align-self: center;
}

/* ---------- Assegnazione lavorazioni (guida forte, niente auto-assegnazione) ---------- */
/* Avviso persistente nel pannello Preventivo: mai un pannello vuoto e muto */
.unassigned-warn {
  border: var(--bw) solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); padding: 12px 13px; margin-bottom: 12px;
}
.unassigned-warn p { margin: 0 0 6px; font-size: var(--fs-m); color: var(--accent-strong); }
.unassigned-warn p.hint { color: var(--text-dim); margin-bottom: 8px; }
.unassigned-warn .btn { width: 100%; }
/* .hint.attn: definita una volta sola, più sopra (§7.12: era ripetuta identica qui) */

/* Banner sul canvas: visibile, non bloccante (sotto i righelli) */
.assign-banner {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 35; display: flex; align-items: center; gap: 10px;
  background: rgba(22, 22, 28, .94); border: var(--bw) solid var(--accent);
  border-radius: var(--radius); padding: 8px 12px; font-size: var(--fs-m);
  box-shadow: var(--shadow); max-width: min(92%, 560px);
}
.assign-banner .txt { color: var(--accent-strong); line-height: 1.35; }
.assign-banner .btn { white-space: nowrap; flex: 0 0 auto; }
/* nel rapido il top è occupato da righelli + strumenti: scendi di una riga */
body.mode-rapido .assign-banner { top: 64px; }

/* ---------- Indicatore di scorrimento (barre scrollabili) ----------
   GLOW sfumato dal bordo (niente cerchio) + chevron grande: si capisce
   subito che la barra continua; sparisce dopo i primi scorrimenti. */
.scroll-hint {
  position: fixed; z-index: 220; pointer-events: none;
  display: flex; align-items: center;
  color: var(--accent); font: 700 var(--fs-3xl) var(--font); line-height: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, .65);
  animation: scrollhint-pulse 1.4s ease-in-out infinite;
}
.scroll-hint.sx {
  justify-content: flex-end; padding-right: 3px;
  background: linear-gradient(to right, rgba(220, 192, 160, 0), rgba(220, 192, 160, .38));
}
.scroll-hint.sy {
  justify-content: center; align-items: flex-end; padding-bottom: 2px;
  background: linear-gradient(to bottom, rgba(220, 192, 160, 0), rgba(220, 192, 160, .38));
}
@keyframes scrollhint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ---------- Carrello (Draft Order, stile Xometry) ---------- */
/* "Aggiungi al carrello": icona + testo su UNA riga */
.btn-icotesto { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn-icotesto .ic { width: 16px; height: 16px; flex: 0 0 auto; }
/* Il pulsante del carrello ha la stessa misura dovunque stia: barra, pagina
   iniziale, stampa DTF (prima 32×32, 41×31 e 34×34). */
.btn.cart-btn { position: relative; overflow: visible; width: var(--ctl-h); height: var(--ctl-h); padding: 0;
                box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.cart-btn .ic { width: 16px; height: 16px; }
.cart-badge {
  position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--accent); color: #191919;
  font: 700 var(--fs-xs) var(--font); padding: 0 3px;
  /* centratura vera: con line-height + text-align la cifra restava spostata a
     destra (il padding orizzontale non è simmetrico rispetto al min-width).
     Con flex il numero sta al centro del pallino, a una o due cifre. */
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-sizing: border-box;
}
/* top/right sono solo il punto di partenza: all'apertura il pannello si
   ancora sotto il proprio pulsante (cart.js: posiziona). */
.cart-drawer {
  position: fixed; top: 52px; right: 10px; z-index: 300;
  width: min(360px, 94vw); max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--bg-2); border: var(--bw) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
}
.cart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cart-head b { font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cart-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-m); }
.cart-close:hover { color: var(--text); }
.cart-rows { overflow-y: auto; min-height: 20px; }
.cart-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 2px;
  border-bottom: 1px dashed var(--border-soft); font-size: var(--fs-m);
}
.cart-row .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-row .prc { font: 600 var(--fs-m) var(--mono); color: var(--accent); flex: 0 0 auto; }
.cart-row .rm { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-m); }
.cart-row .rm:hover { color: var(--danger); }
/* «Modifica»: riapre la riga con le sue lavorazioni. Testo e non icona,
   perché qui si sta per cambiare qualcosa che è già nell'ordine. */
.cart-row .ed { background: none; border: var(--bw) solid var(--border); color: var(--text-dim);
                border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-s); cursor: pointer; flex: 0 0 auto; }
.cart-row .ed:hover { border-color: var(--accent); color: var(--accent); }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; }
.cart-total .lbl { font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.cart-total .val { font: 600 var(--fs-l) var(--mono); color: var(--accent); }

/* ---------- Badge Assistenza (WhatsApp) ---------- */
/* Desktop: pill nell'angolo basso-destra della TELA — sotto la legenda,
   non copre HUD (basso-sx), pannelli né pulsanti. */
#help-wa {
  position: absolute; right: 12px; bottom: 8px; z-index: 40;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 22px;
  background: #1f8f4d; color: #fff; text-decoration: none;
  font-size: var(--fs-m); font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
#help-wa .wa-ic { flex-shrink: 0; }
#help-wa .wa-arrow { display: none; }
/* Nel modulo di richiesta e nella stampa DTF non c'è la tela a cui ancorarla:
   sta fissa nella finestra, così l'assistenza è a un tocco anche a metà modulo
   (27/08/2026). Il z-index deve stare SOPRA la pagina a schermo intero
   (.richiesta è a 95): con il 40 di base la linguetta c'era ma stava dietro il
   modulo, invisibile e non toccabile (misurato il 05/09/2026). */
body.mode-richiesta #help-wa, body.mode-dtf #help-wa { position: fixed; right: 16px; bottom: 16px; z-index: 100; }

/* Legenda lavorazione → colore, sempre visibile sulla tela 2D
   (bottom 52: lascia libero l'angolo per il badge Assistenza) */
.job-legend {
  position: absolute; right: 12px; bottom: 52px; z-index: 25;
  background: rgba(22, 22, 28, .92); border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 9px; font-size: var(--fs-s);
  max-width: 240px; max-height: 40%; overflow-y: auto;
}
.job-legend .lg-title {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 4px;
}
.job-legend .lg-row {
  display: flex; align-items: center; gap: 7px; padding: 3px 4px;
  border-radius: 5px; cursor: pointer; color: var(--text);
}
.job-legend .lg-row:hover { background: var(--accent-soft); }
.job-legend .lg-row.active { outline: 1px solid var(--accent); }
.job-legend .lg-row.un { color: var(--text-dim); }
.job-legend .lg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
/* non assegnato = ROSSO errore (coerente con i tracciati sulla tela) */
.lg-dot.un { background: #e05252 !important; border: none; }

/* Hint dello strumento Assegna: «Clicca un tracciato per assegnarlo a: [chip]» */
.assign-hint {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 36; display: flex; align-items: center; gap: 8px;
  background: rgba(22, 22, 28, .94); border: var(--bw) solid var(--border);
  border-radius: 20px; padding: 6px 12px; font-size: var(--fs-m); color: var(--text);
  box-shadow: var(--shadow); max-width: min(94%, 620px);
}
body.mode-rapido .assign-hint { top: 64px; }
.assign-hint .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #191919; border: none; border-radius: 12px;
  padding: 4px 11px; font: 600 var(--fs-s) var(--font); cursor: pointer; white-space: nowrap;
}
.assign-hint .chip .lg-dot { width: 9px; height: 9px; border: 1px solid rgba(0,0,0,.35); }

/* Selettore lavorazione sulla selezione: striscia in cima alla sidebar */
.sel-assign {
  padding: 10px 12px 8px; background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.sel-assign .sel-count {
  font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.sel-assign .row { display: flex; gap: 8px; }
.sel-assign .row > * { flex: 1; min-width: 0; }
.sel-assign .field { margin-bottom: 6px; }

/* ---------- Righelli mm (editor + rapido 2D) ---------- */
.ruler { position: absolute; z-index: 20; pointer-events: none; }
/* selettori rinforzati: devono vincere su ".stage canvas" */
.stage canvas.ruler-x, .ruler-x { top: 0; left: 0; right: auto; bottom: auto; width: 100%; height: 20px; }
.stage canvas.ruler-y, .ruler-y { top: 0; left: 0; right: auto; bottom: auto; width: 20px; height: 100%; }
/* dai righelli si TRASCINANO le guide di riferimento (stile Illustrator) */
.stage canvas.ruler-x, .stage canvas.ruler-y {
  pointer-events: auto; cursor: grab; touch-action: none;
}
.ruler-corner {
  top: 0; left: 0; width: 20px; height: 20px;
  background: rgba(13, 13, 13, .94);
  border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim); font: 500 var(--fs-xs) var(--mono);
  display: flex; align-items: center; justify-content: center;
}
/* con i righelli visibili gli overlay scendono/rientrano di conseguenza
   (il ViewCube NON è incluso: ha un top fisso per restare sempre ancorato) */
.stage.has-rulers .stage-hud { left: 26px; }
.stage.has-rulers .rp-tools { top: 26px !important; left: 26px !important; }
.stage.has-rulers #btn-newfile { top: 26px !important; }

/* ---------- Pannellino di trasformazione (stile Illustrator) ----------
   Posizionato via JS ACCANTO alla selezione (sotto, o sopra se manca spazio) */
.xform-panel {
  position: absolute; z-index: 38;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(22, 22, 28, .96); border: var(--bw) solid var(--border);
  border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow);
}
/* righe accoppiate: X|Y · L(link)A · rotazione|inclinazione|forma */
.xform-panel .xp-row { display: flex; align-items: center; gap: 6px; }
.xform-panel .xp-f { display: flex; align-items: center; gap: 5px; }
.xform-panel .xp-f > span {
  min-width: 18px; text-align: center; font: 700 var(--fs-s) var(--font);
  color: var(--text-dim); letter-spacing: .02em;
}
.xform-panel .xp-f .xp-ic { display: inline-flex; }
.xform-panel .xp-f span .ic, .xform-panel .xp-ic .ic {
  width: 17px; height: 17px; color: var(--text-dim);
}
.xform-panel .xp-f input { width: 62px; text-align: center; }
.xform-panel .xp-shape { display: contents; }
.xform-panel .xp-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0; flex: 0 0 auto;
  background: none; border: var(--bw) solid var(--border); border-radius: 7px;
  color: var(--text-dim); cursor: pointer;
}
.xform-panel .xp-link.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.xform-panel .xp-link .ic { width: 15px; height: 15px; }

/* Placeholder evidenziato "Scegli lavorazione…" (colore attenzione, pulsa) */
select.inp.attn {
  border-color: var(--accent); color: var(--accent-strong);
  animation: attn-pulse 1.6s ease-in-out infinite;
}
@keyframes attn-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent-soft); }
  50% { box-shadow: 0 0 0 4px var(--accent-soft); }
}

/* ---------- Carrello multi-file (quoter rapido) ---------- */
/* Integrato nella sidebar: niente OUTLINE, ma spazi e padding come prima */
.rp-cart {
  background: var(--bg-2); border: none;
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
/* Header di sezione UNIFORMI in sidebar (Il tuo ordine / Lavorazioni) */
.rp-cart-head b, #panel-price .card h4 {
  font-size: var(--fs-m); font-weight: 700; color: var(--accent);
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
}
/* "Operations": centrato rispetto al suo box */
#panel-price .card h4 { text-align: center; }
.rp-cart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.rp-cart-head b { font-size: var(--fs-m); color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.rp-cart-head span { font-size: var(--fs-m); color: var(--text); font-weight: 600; }
.rp-cart-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft, #1e1e1e);
  font-size: var(--fs-m);
}
.rp-cart-row .ttl { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cart-row .prc { color: var(--accent); font-weight: 600; white-space: nowrap; }
.rp-cart-row .rm {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: var(--fs-m); padding: 2px 5px;
}
.rp-cart-row .rm:hover { color: #c0504d; }
.rp-cart > .btn { margin-top: 8px; }

/* ---------- Busy overlay (caricamento file/analisi) ---------- */
.busy-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--bg-2, #1a1a1a); border: var(--bw) solid var(--border, #2b2b2b);
  border-radius: 12px; padding: 22px 30px; min-width: 260px;
  color: var(--text, #eee); font-size: var(--fs-m);
}
.busy-bar {
  width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(220, 192, 160, 0.18); position: relative;
}
.busy-bar i {
  position: absolute; top: 0; bottom: 0; width: 38%;
  background: var(--accent, #DCC0A0); border-radius: 2px;
  animation: busy-slide 1.1s ease-in-out infinite;
}
@keyframes busy-slide {
  0% { left: -38%; } 100% { left: 100%; }
}

/* ---------- Preventivo su richiesta ---------- */
.rfq {
  border: var(--bw) dashed var(--accent); border-radius: var(--radius);
  padding: 18px 16px; text-align: center; margin-top: 8px;
}
.rfq p { margin: 0 0 14px; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.5; }
.rfq .contacts {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  margin-top: 12px;
}
.rfq a {
  color: var(--accent); text-decoration: none; border: var(--bw) solid var(--accent);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: var(--fs-m);
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.25; width: 100%; box-sizing: border-box;
}
.rfq a:hover { background: var(--accent-soft); }

/* ---------- Livelli ---------- */
.layer-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg-3); border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer;
}
.layer-row.active { border-color: var(--accent); }
.layer-row.sub { padding: 6px 10px; background: var(--bg-2); font-size: var(--fs-s); }
.layer-row.droptarget { border-color: var(--accent); background: var(--accent-soft); }
.layer-row .lyr-ic { display: inline-flex; align-items: center; padding: 2px; opacity: .45; }
.layer-row .lyr-ic.on { opacity: 1; color: var(--accent); }
.layer-row .lyr-ic .ic { width: 14px; height: 14px; }
.rfq.err { border-style: solid; }
.layer-row .name { flex: 1; font-size: var(--fs-m); }
.layer-row button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-m); }
.layer-row button:hover { color: var(--accent); }
.layer-row button.on { color: var(--accent); }

/* ---------- Personalizzatore ---------- */
.pz-elements .el-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg-3); border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; font-size: var(--fs-m);
}
.pz-elements .el-row.active { border-color: var(--accent); }
.pz-elements .el-row .del { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; }
.pz-elements .el-row .del:hover { color: var(--danger); }
/* pulsanti di aggiunta UNO SOTTO L'ALTRO (erano troppo vicini in riga) */
.pz-add-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.pz-add-row .btn { width: 100%; justify-content: flex-start; text-align: left; }

/* Dock strumenti del personalizzatore: SOLO su mobile (vedi mobile.css) */
.toolbar.pz-toolbar { display: none; }
.props .row { display: flex; gap: 8px; margin-bottom: 8px; }
.props .row > .field { flex: 1; min-width: 0; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.active { border-color: var(--accent); }
.area-select { display: flex; flex-direction: column; gap: 5px; }
.area-chip {
  padding: 7px 10px; border: var(--bw) solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--fs-m); color: var(--text-dim);
}
.area-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--bg-3); border: var(--bw) solid var(--border); color: var(--text);
  border-radius: 24px; padding: 9px 20px; font-size: var(--fs-m); box-shadow: var(--shadow);
  animation: toast-in .25s ease;
}
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--danger); }
.toast.gold { border-color: var(--accent); color: var(--accent-strong); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg-2); border: var(--bw) solid var(--border); border-radius: var(--radius);
  width: min(420px, 92vw); max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal h3 {
  margin: 0; padding: 15px 18px; font-size: var(--fs-m); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--border-soft); font-weight: 600;
}
.modal .modal-body { padding: 16px 18px; }
.modal .modal-body .field { margin-bottom: 12px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }

/* ---------- Tour guidato (spotlight stile Adobe/Canva) ---------- */
.tour-hl {
  position: fixed; z-index: 400; pointer-events: none;
  border-radius: 12px; border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .78);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.tour-card {
  position: fixed; z-index: 401;
  width: min(320px, calc(100vw - 24px));
  background: var(--bg-2); border: var(--bw) solid var(--accent);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow);
  transition: left .3s, top .3s;
}
.tour-card .tour-step { font: 500 var(--fs-s) var(--mono); color: var(--text-dim); letter-spacing: .1em; }
.tour-card h4 { margin: 6px 0 6px; font-size: var(--fs-m); color: var(--accent); }
.tour-card p { margin: 0 0 12px; font-size: var(--fs-m); color: var(--text); line-height: 1.55; }
.tour-card .tour-actions { display: flex; justify-content: space-between; }
/* MOBILE: evidenzio direttamente l'elemento (segue lo scroll dello sheet) invece
   del box a posizione fissa che finiva fuori posto. */
.tour-focus {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px;
  border-radius: 10px;
  position: relative; z-index: 402;
  animation: tourpulse 1.5s ease-in-out infinite;
}
@keyframes tourpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220,192,160,.20), 0 0 18px 3px rgba(220,192,160,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(220,192,160,.34), 0 0 26px 6px rgba(220,192,160,.55); }
}

/* ---------- Barra debug (?debug=1) ---------- */
.dbg {
  position: fixed; left: 10px; bottom: 10px; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  background: rgba(13,13,13,.92); border: var(--bw) solid var(--border);
  border-radius: 8px; padding: 6px 12px; font: 500 var(--fs-s) var(--mono);
}
.dbg a { color: var(--text-dim); text-decoration: none; }
.dbg a:hover { color: var(--accent); }
.dbg-badge { color: var(--ok); border: var(--bw) solid currentColor; border-radius: 4px; padding: 1px 6px; font-size: var(--fs-s); }
.dbg-badge.mock { color: var(--accent-strong); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: var(--fs-m); letter-spacing: .1em;
}
/* .loader-ring: la regola sta più sotto, nel blocco «Loader: anello → raggio
   che scandisce». Qui c'era la prima versione (anello che gira), interamente
   sovrascritta da quella: tolta il 06/09/2026 (§7.12 dell'audit). */
/* La schermata di avvio quando qualcosa non è arrivato: resta a schermo intero,
   ma con parole e uscite (riprova, modulo di richiesta, pagina iniziale). */
.loader.loader-errore { letter-spacing: 0; font-size: var(--fs-m); color: var(--text); padding: 24px; }
.loader-errore-box { max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.loader-errore-t { font-size: var(--fs-l); line-height: 1.5; }
.loader-errore-azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.loader-errore-sub { font-size: var(--fs-m); color: var(--text-dim); line-height: 1.5; }
.loader-errore-dett { font-size: var(--fs-s); color: var(--text-dim); opacity: .7; word-break: break-all; }

/* ---------- Icone ribbon / topbar / job queue ---------- */
.ic { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; }
.iconbtn span { line-height: 1; }
/* Topbar: undo/redo/zoom/adatta — dimensione uniforme e compatta */
/* (le misure dei pulsanti della barra stanno in testa al file, «Topbar») */
.job.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.job-title .dot {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  margin-right: 6px; vertical-align: text-bottom; border: 1.5px solid rgba(0, 0, 0, .35);
}
.job-ctrls { display: flex; gap: 2px; }
.job-ctrls button:disabled { opacity: .25; cursor: default; }
.order-warn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: var(--bw) solid var(--warn); border-radius: var(--radius);
  padding: 9px 12px; margin-bottom: 10px; font-size: var(--fs-s); color: var(--warn);
  background: var(--accent-soft);
}
.ctxmenu {
  position: fixed; z-index: 250; background: var(--bg-2); border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; min-width: 140px;
}
.ctxmenu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); padding: 11px 16px; font: 500 var(--fs-m) var(--font); cursor: pointer;
}
.ctxmenu button:active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Landing (3 strumenti) ----------
   Rifatta il 02/09/2026 sull'impianto SIGNATURE v3: marchio con il riflesso,
   ingresso scalato degli elementi, tessere con luce. In più: la lamiera che
   viene tagliata nell'hero (SVG animato via CSS, niente librerie), un bagliore
   di fondo che respira, i tre passi e la riga di fiducia. Tutto degrada con
   prefers-reduced-motion e resta leggero: sulla landing non si carica nessuna
   libreria di disegno. */
.landing {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
}
.landing-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(220,192,160,.10), transparent 70%),
    radial-gradient(40% 30% at 85% 85%, rgba(220,192,160,.05), transparent 70%);
}
.landing-inner { position: relative; text-align: center; padding: 36px 22px 56px; max-width: 1040px; width: 100%; box-sizing: border-box; }
/* La freccia della pagina iniziale (e della pagina dello strumento spento): la
   stessa delle altre schermate (ui.js, pulsanteIndietro), all'altezza della
   lingua e del carrello sull'altro lato, con lo stesso margine (03/10/2026). */
.landing-back { position: absolute; top: 16px; left: 18px; z-index: 92; }
.landing-brand { letter-spacing: .2em; position: relative; }
.landing-brand .brand-name { font-size: var(--fs-5xl); letter-spacing: .16em; transform: none; }
.landing-brand .brand-mark { font-size: var(--fs-xl); }
.landing-brand::after {
  content: ""; display: block; height: 2px; border-radius: 1px;
  width: min(300px, 50vw); margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, #fff2dd 50%, var(--accent) 78%, transparent);
  box-shadow: 0 0 14px rgba(220,192,160,.45);
  opacity: .9;
}
/* i testi con più righe (home.sub, home.trust) vanno a capo dove sta il \n:
   restano textContent, non diventano HTML */
.landing-sub, .landing-trust, .hero-lead { white-space: pre-line; }
.landing-sub { color: var(--text-dim); margin: 14px auto 0; font-size: var(--fs-l); max-width: 640px; line-height: 1.5; }

/* Hero: titolo e frase a sinistra, la lamiera tagliata a destra */
.landing-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center;
  margin: 26px auto 24px; text-align: left; max-width: 960px;
}
/* Titolo dell'hero: tre gradini consecutivi della scala (3xl → 2xl → xl).
   Prima erano 35/30/25px, tre misure senza rapporto fra loro: a ogni
   soglia il salto era diverso e non si capiva quale fosse la regola. */
.hero-text h1 { margin: 0 0 12px; font-size: var(--fs-3xl); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.hero-lead { margin: 0; color: var(--text-dim); font-size: var(--fs-l); line-height: 1.6; max-width: 520px; }
.hero-cut { margin: 0; position: relative; max-width: 400px; width: 100%; justify-self: end; }
.cut-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.cut-plate { fill: url(#cut-metal); stroke: none; opacity: 1; }
.cut-path {
  /* `butt` e non `round`: con la punta tonda un tratto di lunghezza zero
     viene disegnato come un pallino, e all'inizio di ogni taglio si vedeva
     un puntino comparire dal nulla (04/09/2026).
     Non basta: su uno schermo a 3 pixel per punto (telefono) il giunto del
     punto di partenza viene disegnato lo stesso, anche con il tratteggio
     tutto «spento» — un puntino fermo che sembra sporco finché il taglio non
     parte (08/09/2026). Provati miter, dashoffset 1201 e via la Z: restava.
     L'unica cosa che lo toglie davvero è tenere il tracciato INVISIBILE
     finché non tocca a lui: sta nei fotogrammi qui sotto, non qui, perché
     con «riduci il movimento» il disegno resta tutto visibile. */
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(220,192,160,.55));
}
.cut-sparkle { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .landing-bg { animation: clx-glow 7s ease-in-out infinite; }
  /* il contorno si disegna come lo seguirebbe il laser: prima il perimetro,
     poi i fori e l'asola; la lamiera «appare» quando il taglio è chiuso */
  .cut-plate { opacity: 0; animation: clx-plate-in 9s ease-out infinite; }
  .cut-path { stroke-dashoffset: 1200; animation: clx-cut 9s cubic-bezier(.45,.05,.55,.95) infinite; }
  .cut-path.cut-hole { animation-name: clx-cut-hole; }
  .cut-path.cut-slot { animation-name: clx-cut-slot; }
  .cut-sparkle {
    offset-path: path("M28 18 H292 A12 12 0 0 1 304 30 V180 A12 12 0 0 1 292 192 H28 A12 12 0 0 1 16 180 V30 A12 12 0 0 1 28 18 Z");
    offset-distance: 0%; animation: clx-spark 9s cubic-bezier(.45,.05,.55,.95) infinite;
  }
}
@keyframes clx-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* L'ordine racconta come si taglia davvero: prima il contorno, poi il pezzo
   c'è, e SOLO ALLORA gli si fanno i fori e l'asola. Prima la lamiera compariva
   per ultima (68%) e i fori venivano tagliati nel vuoto: sullo schermo erano
   cinque puntini che si accendevano nel nero, e sembravano sporco (04/09/2026). */
@keyframes clx-cut { 0% { stroke-dashoffset: 1200; } 42% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clx-plate-in { 0%, 42% { opacity: 0; } 52% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes clx-cut-hole { 0%, 52% { stroke-dashoffset: 1200; opacity: 0; } 52.01% { opacity: 1; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clx-cut-slot { 0%, 68% { stroke-dashoffset: 1200; opacity: 0; } 68.01% { opacity: 1; } 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clx-spark {
  0% { offset-distance: 0%; opacity: 0; } 2% { opacity: 1; } 42% { offset-distance: 100%; opacity: 1; } 44% { opacity: 0; } 100% { offset-distance: 100%; opacity: 0; }
}

/* Due strumenti sopra, la richiesta di preventivo larga sotto: è la porta che
   copre tutti i servizi, e deve vedersi per prima (27/08/2026). */
.landing-tiles { display: grid; grid-template-columns: repeat(2, minmax(240px, 400px)); gap: 18px; justify-content: center; }
.tile.tile-hero { grid-column: 1 / -1; }
.tile-hero .tile-nota { display: block; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.5; margin: -8px 0 14px; }
.tile-hero { border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--bg-3); }
/* Modalità cantiere: lo strumento si vede, si capisce che arriverà, non si apre */
.tile.bloccato { opacity: .5; filter: grayscale(.6); cursor: not-allowed; position: relative; }
/* spenta ma con una porta aperta dietro: si vede che arriverà, e si apre lo stesso */
.tile.bloccato.apribile { opacity: .8; filter: grayscale(.25); cursor: pointer; }
.tile.bloccato:hover { border-color: var(--border); transform: none; box-shadow: none; }
.tile.bloccato .tile-cta { color: var(--text-dim); }
.tile-badge {
  position: absolute; top: 12px; right: 12px; font-size: var(--fs-s); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border: var(--bw) solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 20px; padding: 3px 9px;
}
.tile {
  text-align: left; text-decoration: none; position: relative; overflow: hidden;
  background: var(--bg-3); border: var(--bw) solid var(--border);
  border-radius: 14px; padding: 24px 24px 20px; color: var(--text);
  transition: border-color .18s ease, transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease;
}
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,244,225,.09) 48%, rgba(255,244,225,.02) 55%, transparent 70%);
  transform: translateX(-140%) skewX(-14deg);
}
.tile:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow), 0 0 22px rgba(220,192,160,.12); }
.tile:hover::after { transform: translateX(140%) skewX(-14deg); transition: transform .6s ease; }
.tile h2 { margin: 16px 0 8px; font-size: var(--fs-xl); font-weight: 600; }
.tile p { margin: 0 0 18px; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.55; }
.tile-cta { color: var(--accent); font-weight: 600; font-size: var(--fs-m); }
.tile-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1); }
.tile-icon svg { width: 28px; height: 28px; }
.tile:hover .tile-icon { transform: translateY(-2px) scale(1.08); }

/* I tre passi e la riga di fiducia: piccoli, sotto le tessere */
.landing-steps {
  list-style: none; margin: 34px auto 0; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left;
}
.landing-steps li {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start;
  padding: 14px 16px; border: var(--bw) solid var(--border-soft, var(--border)); border-radius: 12px;
  background: var(--bg-2, rgba(255,255,255,.02));
}
.landing-steps .step-n {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-m) var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; color: #1a1a1a; background: var(--accent);
}
.landing-steps b { display: block; font-size: var(--fs-m); font-weight: 600; color: var(--text); }
.landing-steps span:not(.step-n) { display: block; font-size: var(--fs-m); line-height: 1.5; color: var(--text-dim); margin-top: 2px; }
.landing-trust { margin: 22px auto 0; max-width: 720px; font-size: var(--fs-m); line-height: 1.6; color: var(--text-dim); }
body.mode-home .body, body.mode-home .ribbon, body.mode-home .topbar { display: none; }

/* Landing responsive: proporzionata su ~360–414px, nessun overflow orizzontale
   (media query: sulla landing body.mobile non viene impostata) */
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; gap: 14px; text-align: center; margin: 26px auto 22px; }
  .hero-lead { margin: 0 auto; }
  .hero-cut { max-width: 340px; margin: 0 auto; order: -1; }
  .hero-text h1 { font-size: var(--fs-2xl); }
  .landing-steps { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .landing-inner { padding: 56px 14px 40px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .landing-brand .brand-name { font-size: var(--fs-3xl); letter-spacing: .12em; }
  .landing-sub { font-size: var(--fs-m); margin: 8px auto 0; }
  .landing-back { top: 10px; left: 10px; }
  .hero-text h1 { font-size: var(--fs-xl); }
  .hero-lead { font-size: var(--fs-m); }
  .hero-cut { max-width: 260px; }
  .landing-tiles { gap: 10px; grid-template-columns: 1fr; }
  .tile {
    padding: 14px 16px; border-radius: 12px;
    display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
  }
  .tile-icon { width: 40px; height: 40px; border-radius: 9px; grid-row: span 2; }
  .tile-icon svg { width: 22px; height: 22px; }
  .tile h2 { margin: 0; font-size: var(--fs-l); }
  .tile p { margin: 2px 0 0; line-height: 1.4; }
  /* La riga dei servizi va nella colonna del testo: senza questa regola finiva
     nella colonna dell'icona (40px) e usciva una parola per riga (28/08/2026). */
  .tile-hero .tile-nota { grid-column: 2; margin: 6px 0 0; font-size: var(--fs-s); line-height: 1.45; }
  .tile-cta { grid-column: 2; margin-top: 6px; }
  .landing-steps { margin-top: 22px; }
  .landing-steps li { padding: 11px 12px; }
  .landing-trust { margin-top: 16px; }
}

/* ---------- Richiedi un preventivo (js/richiesta.js) ----------
   Pagina intera con ?mode=richiesta, oppure sopra il preventivatore quando
   un lavoro non è quotabile online. Stessa palette, stessi .inp/.btn. */
.richiesta { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.mode-richiesta .body, body.mode-richiesta .ribbon, body.mode-richiesta .topbar { display: none; }
/* La stampa DTF è una pagina a schermo intero come il modulo di richiesta: il
   layout dello strumento sotto di lei non si vede ma, se resta in flusso, la
   barra dei comandi (undo, zoom, Salva) misura 680 px e su un telefono
   allarga il documento: la pagina scorreva di lato (05/09/2026). */
body.mode-dtf .body, body.mode-dtf .ribbon, body.mode-dtf .topbar { display: none; }
.rq-inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px 60px; }
/* 1302 = 900 (modulo) + 34 (spazio) + 320 (riepilogo) + i 48 di padding:
   sugli schermi grandi intestazione e contenuto finiscono così sulla stessa
   linea, al centro, invece di allargarsi fino ai bordi con le schede tutte
   a sinistra (28/08/2026). */
@media (min-width: 1500px) { .rq-inner { max-width: 1302px; } }
/* Schermo largo: modulo a sinistra, riepilogo a destra che resta in vista.
   Prima era una colonna di 860px persa in mezzo a due deserti (27/08/2026). */
.rq-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start;
           justify-content: center; }
.rq-col { min-width: 0; }
@media (min-width: 1080px) {
  /* Le due colonne non si allargano fino ai bordi: hanno una misura loro e
     stanno al centro. Prima, tirate da parte a parte, il blocco delle schede
     restava appiccicato a sinistra col vuoto sotto il riepilogo (28/08/2026). */
  .rq-body { grid-template-columns: minmax(0, 900px) 320px; gap: 34px; }
  .rq-aside { position: sticky; top: 16px; }
}
.rq-aside { display: flex; flex-direction: column; gap: 12px; }
.rq-card { background: var(--bg-2); border: var(--bw) solid var(--border); border-radius: 12px; padding: 14px 16px; }
.rq-card-t { font-size: var(--fs-m); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.rq-card .hint { margin: 8px 0 0; }
/* nella colonna anche i link sono pulsanti a tutta larghezza (un <a> resta
   inline: senza questo il padding usciva dalla riga e copriva il testo) */
.rq-card .btn { display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 10px; text-align: center; text-decoration: none; }
.rq-passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rq-passi li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-m); color: var(--text-dim); }
.rq-passi li.ok { color: var(--text); }
.rq-passo-n {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-s); font-weight: 700; background: var(--bg-3); color: var(--text-dim);
  border: var(--bw) solid var(--border); transition: background .25s, color .25s, border-color .25s;
}
.rq-passi li.ok .rq-passo-n { background: var(--accent); border-color: var(--accent); color: #17130d; }
/* Da quando il «Continua» non c'e' piu' (30/08/2026) l'elenco dei passi e' il
   modo di muoversi nel modulo: quello che si puo' raggiungere lo dice al tocco
   e con il puntatore, senza travestirsi da link colorato. */
.rq-passi li.vai { cursor: pointer; border-radius: 8px; margin: -3px -6px; padding: 3px 6px;
  transition: background .18s, color .18s; }
/* al fuoco l'anello comune e basta (regola del fuoco, in fondo al file): lo
   sfondo del passaggio del puntatore insieme all'anello erano due segni */
/* sul telefono lo sfondo del passaggio restava sul passo toccato e lo faceva
   sembrare «qui» (stesso sfondo): solo con un puntatore (11/10/2026) */
@media (hover: hover) { .rq-passi li.vai:hover { background: var(--bg-3); color: var(--text); } }
/* Dove sei adesso: un segno discreto sul passo che stai guardando. */
.rq-passi li.qui { background: var(--bg-3); color: var(--text); }
.rq-passi li.qui .rq-passo-n { border-color: var(--accent); color: var(--accent); }
.rq-passi li.qui.ok .rq-passo-n { color: #17130d; }
.rq-bar { height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; margin: 12px 0 6px; }
.rq-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--border); transition: width .5s cubic-bezier(.22,.9,.3,1), background .3s; }
.rq-bar.su i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.rq-bar-n { font-size: var(--fs-m); color: var(--text-dim); }
/* «Ogni richiesta la legge una persona»: è una frase sola dentro un riquadro
   tratteggiato, e allineata a sinistra sembrava un paragrafo lasciato lì.
   Centrata sta nel riquadro come una firma. */
.rq-mano { background: transparent; border-style: dashed; text-align: center; padding: 16px 18px; }
/* Non è una postilla: dice che il laboratorio fa più cose di quelle in elenco,
   ed è la frase che fa scrivere chi non trova il suo servizio (04/09/2026). */
.rq-mano .hint { margin: 0; font-size: var(--fs-m); line-height: 1.65; color: var(--text); }
.rq-wa { border-color: color-mix(in srgb, #25D366 45%, transparent); color: #7ee2a2; }
@media (hover: hover) { .rq-wa:hover { border-color: #25D366; background: rgba(37,211,102,.10); } }
.rq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.rq-brand .brand-name { font-size: var(--fs-2xl); }
.rq-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }   /* a 390 px i pulsanti vanno a capo, non fuori */
/* La testata delle pagine del preventivatore (.richiesta: modulo di richiesta
   e stampa DTF; la scrivania ha la sua). 03/10/2026, dal titolare: «vai a
   capo nell'header con i pulsanti e non va bene, inoltre ingrandisci il logo
   e mettilo più grande e centrato nell'header, assicurati anche sia
   perfettamente allineato verticalmente». Tre gruppi su una riga: a sinistra
   freccia e lingua, al centro il marchio, a destra area personale e carrello. Le colonne laterali sono uguali finché ci stanno, così il marchio
   sta al centro della testata e non dello spazio che avanza; quando la riga
   non ci sta, il marchio scende di misura (ui.js, adattaTestata). */
.richiesta .rq-head { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center; column-gap: 12px; }
.richiesta .rq-sx { display: flex; align-items: center; gap: 8px; justify-self: start; }
.richiesta .rq-brand { display: flex; align-items: center; justify-self: center; }
/* il tetto della misura: adattaTestata sceglie, fra 30, 24, 20… px (quelle in
   cui le lettere stanno esattamente a metà della riga), la più grande che non
   lo supera e ci sta */
.richiesta .rq-head .brand-name { font-size: var(--fs-3xl); white-space: nowrap; }
.richiesta .rq-tools { justify-self: end; flex-wrap: nowrap; }
.richiesta .rq-tools .btn { height: var(--ctl-h); box-sizing: border-box; display: inline-flex; align-items: center; }
.rq-title { margin: 0 0 6px; font-size: var(--fs-2xl); font-weight: 600; }
.rq-sub { margin: 0 0 18px; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.5; }
.rq-prefill { background: var(--accent-soft); border: var(--bw) solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--accent-strong); font-size: var(--fs-m); margin: 0 0 18px; }
.rq-step { margin: 0 0 26px; scroll-margin-top: 10px; }
.rq-step-t { display: flex; align-items: center; gap: 10px; font-size: var(--fs-l); font-weight: 600; margin: 0 0 12px; }
.rq-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #17130d; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-m); font-weight: 700; flex: 0 0 auto; }
/* Le intestazioni dei gruppi: piccole, non gridano, ma spezzano i dieci
   riquadri in quattro blocchi che si leggono in un colpo d'occhio (30/08/2026). */
.rq-gruppo-t { font-size: var(--fs-s); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  /* --text-faint è un token del gestionale che qui non esiste: senza ripiego il
     colore cadeva sul bianco ereditato e le intestazioni gridavano (§7.12) */
  color: var(--text-faint, var(--text-dim)); margin: 18px 0 8px; }
.rq-gruppo-t:first-of-type { margin-top: 4px; }
/* il sottotitolo di un gruppo, quando il nome da solo non basta («Servizio
   mobile»: Laser Live ed On-Site), attaccato all'intestazione (11/10/2026) */
.rq-gruppo-s { margin: -4px 0 8px; font-size: var(--fs-m); line-height: 1.45; color: var(--text-dim); }
.rq-servizi { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
.rq-serv-p { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.rq-serv-p span { position: relative; padding-left: 12px; font-size: var(--fs-s); color: var(--text-dim); line-height: 1.4; }
.rq-serv-p span::before { content: '·'; position: absolute; left: 3px; color: var(--accent); }
.rq-serv-nota { margin-top: 10px; }
/* Cosa facciamo davvero in questo servizio: si legge quando è scelto */
.rq-dett { margin-top: 12px; border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; }
.rq-dett-d { margin: 0; font-size: var(--fs-m); line-height: 1.6; color: var(--text); }
.rq-punti { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; }
.rq-punti li { position: relative; padding-left: 15px; font-size: var(--fs-m); color: var(--text-dim); line-height: 1.5; }
.rq-punti li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-size: var(--fs-s); }
.rq-serv { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--bg-3); border: var(--bw) solid var(--border); border-radius: 12px; padding: 14px; color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
@media (hover: hover) { .rq-serv:hover { border-color: var(--accent); transform: translateY(-2px); } }
.rq-serv-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-serv-t b { font-size: var(--fs-m); font-weight: 600; }
.rq-serv-t small { color: var(--text-dim); font-size: var(--fs-m); line-height: 1.45; }
.rq-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.rq-ic svg { width: 22px; height: 22px; }
.rq-ic.sm { width: 26px; height: 26px; border-radius: 7px; }
.rq-ic.sm svg { width: 15px; height: 15px; }
.rq-scelto { display: flex; align-items: center; gap: 12px; background: var(--bg-3); border: var(--bw) solid var(--accent); border-radius: 12px; padding: 12px 14px; }
.rq-scelto > div { flex: 1; min-width: 0; }
.rq-scelto b { font-size: var(--fs-m); }
.rq-scelto .hint { margin: 2px 0 0; }
.rq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px 16px; }
/* oltre le tre colonne i campi diventano francobolli: meglio respiro che vuoto */
@media (min-width: 1320px) { .rq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rq-file-extra { margin-top: 14px; }
/* Il movimento dice dove guardare: la sezione che compare entra, quella
   raggiunta si accende un istante. Chi preferisce nessuna animazione non ne ha. */
@keyframes rq-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rq-fuoco { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 35% { box-shadow: 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.rq-entra { animation: rq-entra .42s cubic-bezier(.22,.9,.3,1) both; }
.rq-fuoco { animation: rq-fuoco 1.3s ease-out 1; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .rq-entra, .rq-fuoco { animation: none; }
  .rq-bar i { transition: none; }
}
.rq-field label { display: block; font-size: var(--fs-m); color: var(--text-dim); margin-bottom: 5px; }
.rq-field.wide { grid-column: 1 / -1; }
.rq-field .inp { width: 100%; font-size: var(--fs-m); padding: 9px 11px; }
.rq-field textarea.inp { resize: vertical; min-height: 70px; line-height: 1.45; font-family: var(--font); }
.rq-field .hint { margin: 5px 0 0; }
/* Le caselle di una riga partono alla stessa altezza anche quando
   un'etichetta va a capo (11/10/2026, dal titolare: «Link a file pesanti
   (WeTransfer, Drive…)» accanto a «Note sui file», «Come preferisci essere
   ricontattato» accanto a «Paese»; misurate 70 righe storte in tutto il
   modulo, a 1440 e 1024 px). Ogni campo occupa quattro righe della griglia
   e le divide con i campi accanto (subgrid): etichetta, casella, aiuto,
   messaggio (il perché di un errore o il suggerimento sull'email, mai
   insieme). L'etichetta più alta decide la riga delle etichette per tutti;
   quelle corte stanno in basso, attaccate alla loro casella. Lo spazio fra
   una fila di campi e la successiva è il margine di ogni campo, non il gap
   della griglia, che cadrebbe anche fra etichetta e casella; il margine
   negativo della griglia toglie quello dopo l'ultima fila, così gli spazi
   intorno restano quelli di prima. Solo nel modulo di richiesta: l'area
   personale usa le stesse classi con altri contenuti (aiuto ed errore
   insieme). Un browser senza subgrid tiene l'impaginazione di prima. */
@supports (grid-template-rows: subgrid) {
  #richiesta .rq-grid { row-gap: 0; margin-bottom: -12px; }
  #richiesta .rq-grid > .rq-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 12px; }
  #richiesta .rq-grid > .rq-field > label { grid-row: 1; align-self: end; }
  #richiesta .rq-grid > .rq-field > .hint { grid-row: 3; }
  #richiesta .rq-grid > .rq-field > .rq-motivo, #richiesta .rq-grid > .rq-field > .rq-sugg { grid-row: 4; }
}
.rq-field.err .inp, .rq-field.err .rq-chips { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--radius-sm); }
.rq-field.err label { color: var(--danger); }
.rq-req { color: var(--accent); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-chip { background: var(--bg-3); border: var(--bw) solid var(--border); color: var(--text); border-radius: 20px; padding: 7px 13px; font: inherit; font-size: var(--fs-m); cursor: pointer; }
/* Le pillole (11/10/2026, dal titolare: sul telefono l'ultima toccata restava
   «evidenziata» e non si capiva se era scelta). Il telefono, dopo un tocco,
   tiene lo stato :hover sull'elemento toccato finché non si tocca altrove, e
   il bordo oro dell'hover faceva sembrare scelta una pillola appena tolta;
   anche al computer, sotto il puntatore, una pillola non scelta era uguale a
   una scelta salvo un velo d'oro al 14%. Ora l'hover c'è solo dove c'è un
   puntatore (hover: hover, e così in tutto il modulo), e la scelta non si
   confonde con niente: piena d'oro, con la spunta, che si legge anche senza
   distinguere i colori, e aria-pressed per il lettore di schermo. La spunta
   prende il posto di una parte del margine interno (13 + 13 = 7 + 12 + 7):
   la pillola non cambia larghezza e le vicine non vanno a capo sotto il dito.
   Il fuoco dalla tastiera è l'anello comune (la regola del fuoco, in fondo). */
.rq-chip.on { border-color: var(--accent); background: var(--accent); color: #17130d; padding-left: 7px; padding-right: 7px; }
.rq-chip.on::before { content: '✓'; content: '✓' / ''; display: inline-block; width: 12px; text-align: left; }
@media (hover: hover) {
  .rq-chip:not(.on):hover { border-color: var(--accent); }
  .rq-chip.on:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
}
.rq-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-toggle { margin-top: 12px; }
.rq-opz { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.rq-drop { border: var(--bw) dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--text-dim); font-size: var(--fs-m); }
.rq-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.rq-drop .btn { margin-left: 6px; }
.rq-files { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rq-file { display: flex; align-items: center; gap: 10px; background: var(--bg-3); border: var(--bw) solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: var(--fs-m); }
.rq-file-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-file-s { color: var(--text-dim); font-size: var(--fs-m); white-space: nowrap; }
.rq-file-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-m); padding: 2px 4px; }
@media (hover: hover) { .rq-file-x:hover { color: var(--accent); } }
.rq-privacy { margin-top: 14px; }
.rq-privacy label { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-m); color: var(--text); line-height: 1.45; }
.rq-privacy input { margin-top: 2px; flex: 0 0 auto; }
.rq-privacy a { color: var(--accent); }
.rq-privacy.err label { color: var(--danger); }
.rq-send { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.rq-btn-send { padding: 11px 22px; font-size: var(--fs-m); }
.rq-done { text-align: center; padding: 40px 0; }
.rq-done-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.rq-done-ic svg { width: 34px; height: 34px; }
.rq-rif { font-family: var(--mono); color: var(--accent-strong); font-size: var(--fs-l); letter-spacing: .04em; }
.rq-done .rq-send { justify-content: center; margin-top: 22px; }
@media (max-width: 640px) {
  .rq-inner { padding: 12px 14px 40px; }
  .rq-grid, .rq-servizi, .rq-punti { grid-template-columns: 1fr; }
  .rq-title { font-size: var(--fs-xl); }
  .rq-brand .brand-name { font-size: var(--fs-xl); }
  .rq-send { flex-direction: column; }
  .rq-btn-send { width: 100%; }
  .rq-head { margin-bottom: 14px; }
  /* Sul telefono la testata resta su una riga (prima andava su due, con il
     marchio piccolo sopra): spazi più stretti, la lingua più corta, il marchio
     quanto lo schermo permette (poi adattaTestata). L'area personale è
     l'icona della persona, come nei negozi: la scritta resta nel nome. */
  .richiesta .rq-head { column-gap: 8px; }
  .richiesta .rq-sx, .richiesta .rq-tools { gap: 6px; }
  .richiesta .rq-head .brand-name { font-size: var(--fs-2xl); letter-spacing: .1em; }
  .richiesta select.inp.sel-lingua { width: 46px; padding-left: 8px; padding-right: 18px; background-position: right 5px center; }
  .richiesta .rq-tools .btn-area span { display: none; }
  .richiesta .rq-tools .btn.btn-area { width: var(--ctl-h); padding: 0; justify-content: center; }
}

/* ---------- La scrivania del cliente (js/area.js) ----------
   Stessa pagina intera del modulo di richiesta (.rq-*), con le sue schede.
   Le cose da fare stanno in cima; il resto sono elenchi che si aprono.
   Il movimento (10/10/2026): una curva sola (la stessa del modulo di
   richiesta, rq-entra), durate fra 150 e 250 ms, solo transform e opacity,
   e niente di niente con «riduci il movimento» (in fondo al blocco). */
.area { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  --ar-t: .2s; --ar-curva: cubic-bezier(.22,.9,.3,1); }
body.mode-area .body, body.mode-area .ribbon, body.mode-area .topbar { display: none; }
body.mode-area #help-wa { position: fixed; right: 16px; bottom: 16px; z-index: 100; }
/* La scrivania usa lo schermo che ha: su un ultrawide una colonna da 1120 px
   lascia due deserti ai lati, e gli elenchi diventano righe lunghissime da
   leggere. Cresce fino a 1560 px e poi si ferma: oltre, l'occhio non segue più
   la riga da un capo all'altro (04/09/2026). */
.ar-inner { max-width: min(1560px, 100%); padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px);
  display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.ar-inner > .ar-cont, .ar-inner > .ar-entra { flex: 1 0 auto; }
/* I comandi di testa (lingua, Preventivatore, Homepage) alti come ogni comando
   delle testate (--ctl-h): la lingua è `sel-lingua` (area.js), i pulsanti qui.
   Prima arrivavano a 34 px per caso, sommando margini e riga del carattere, e
   la lingua era alta 26 (11/10/2026, dal titolare). */
.ar-head .rq-tools .btn { height: var(--ctl-h); box-sizing: border-box; display: inline-flex; align-items: center; }
.ar-saluto { margin: 4px 0 18px; }
/* testo solo per chi usa un lettore di schermo (annunci, stato del caricamento) */
.ar-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Ingresso: una schermata, non un modulo appoggiato in alto ---- */
.ar-entra {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  justify-content: center; min-height: calc(100vh - 260px); padding: 8px 0 40px;
}
@media (min-width: 1100px) {
  .ar-entra { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; max-width: 1080px; margin: 0 auto; width: 100%; }
}
.ar-entra-claim { max-width: 560px; }
/* Il claim della scrivania cresce col viewport (clamp) e basta: prima lo
   faceva E veniva riscritto a 26px fissi sotto i 640px, due modelli di
   scaling sullo stesso testo. Il minimo del clamp copre già i telefoni,
   quindi l'override è stato tolto (08/09/2026). */
.ar-entra-t { margin: 0 0 14px; font-size: clamp(var(--fs-2xl), 4.2vw, var(--fs-4xl)); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
.ar-entra-d { margin: 0 0 16px; font-size: var(--fs-l); line-height: 1.6; color: var(--text-dim); }
.ar-entra-claim .ar-nota { margin: 0; max-width: 100%; }
.ar-entra-box { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ar-entra-box .ar-ingresso, .ar-entra-box .ar-negozio-in { max-width: 100%; margin: 0; }
.ar-saluto .rq-sub { margin-bottom: 0; }
.ar-nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 18px; }
.ar-tab { --ar-tab-x: 14px; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: var(--bw) solid transparent; color: var(--text-dim);
  border-radius: 20px; padding: 7px var(--ar-tab-x); font: inherit; font-size: var(--fs-m); cursor: pointer; transition: color var(--ar-t) var(--ar-curva), border-color var(--ar-t) var(--ar-curva), background var(--ar-t) var(--ar-curva); }
.ar-tab:hover { color: var(--text); border-color: var(--border); }
.ar-tab.on { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
/* La scritta della prima linguetta sulla riga del testo (11/10/2026, dal
   titolare: «i pulsanti delle schede non sono allineati a sinistra con il
   testo»). Una linguetta spenta è solo la sua scritta, e quella della prima
   stava 16 px più a destra del saluto e delle schede: il margine interno più
   il bordo trasparente. La prima si sposta di tanto; accesa o sotto il
   puntatore, la sua pillola sporge a sinistra intorno alla scritta. */
.ar-nav > .ar-tab:first-child { margin-left: calc(-1 * (var(--ar-tab-x) + var(--bw))); }
.ar-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--border); font-size: var(--fs-s); color: var(--text-dim); }
.ar-tab.on .ar-n { border-color: var(--accent); color: var(--accent-strong); }
/* il contenuto riceve il fuoco a ogni cambio di sezione: senza anello, è la pagina */
.ar-cont:focus { outline: none; }
.ar-sez { margin: 0 0 34px; }
.ar-cont > .rq-card + .rq-card, .ar-cont > .ar-sez + .ar-sez { margin-top: 14px; }
.area .rq-card { padding: 18px 20px; }
.ar-cont > .rq-card { margin-bottom: 14px; }
.ar-h2 { margin: 0 0 10px; font-size: var(--fs-m); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.ar-h2.big { font-size: var(--fs-xl); letter-spacing: 0; text-transform: none; color: var(--text); margin: 6px 0 4px; }
.ar-h3 { margin: 0 0 10px; font-size: var(--fs-m); font-weight: 600; }
.ar-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ar-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ar-card .hint { margin: 0; }
.ar-click { cursor: pointer; transition: border-color var(--ar-t) var(--ar-curva), transform var(--ar-t) var(--ar-curva); }
/* solo sotto il puntatore: con il fuoco dentro (il titolo) la scheda che si
   accendeva era un secondo segno accanto all'anello del titolo (11/10/2026) */
.ar-click:hover { border-color: var(--accent); transform: translateY(-2px); }
.ar-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ar-num { font-family: var(--mono); font-size: var(--fs-m); color: var(--accent-strong); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ar-card-t { font-size: var(--fs-m); font-weight: 600; line-height: 1.35; }
/* Il titolo della scheda di una richiesta è IL comando (un pulsante vero):
   si veste da titolo, e al fuoco dalla tastiera ha l'anello comune. Prima la
   scheda intera era un «pulsante» con un link dentro (10/10/2026). */
button.ar-card-t { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; border-radius: 4px; }
.ar-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ar-badge { display: inline-block; border-radius: 12px; padding: 3px 9px; font-size: var(--fs-s); font-weight: 600; letter-spacing: .03em;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.ar-badge.ok { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-strong); }
.ar-badge.attn { background: var(--accent); border-color: var(--accent); color: #17130d; }
.ar-badge.off { opacity: .6; text-decoration: line-through; }
/* I colori del denaro (27/09/2026, dal titolare): rosso quello da pagare, verde
   il pagato, l'accento (.attn) per il pagamento fatto ma in attesa di conferma. */
.ar-badge.rosso { border-color: var(--danger); color: var(--danger); }
.ar-badge.verde { border-color: var(--ok); color: var(--ok); }
/* Il titoletto di una sezione dentro una scheda (Come e quando · Cosa fare · I
   colli · Dati per la prenotazione): prima era un grassetto qualunque e la
   scheda sembrava un mucchio di righe. Rigo sottile sopra, spazio doppio. */
.ar-sotto { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-s); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.ar-sotto:first-of-type { margin-top: 14px; }
/* la fila del tasto rapido in testa a Progetti e Ordini; sta sopra le schede
   che seguono, perché il menù di «+ Nuovo ordine» si apre sopra di loro (le
   schede che entrano o si alzano sotto il puntatore fanno strato da sé) */
.ar-nuovo { margin: 0 0 14px; position: relative; z-index: 5; }
/* «+ Nuovo ordine» (11/10/2026, area.js, tendinaNuovoOrdine): il menù a
   tendina con le strade per ordinare. Le voci sono quelle del menù «altro»
   degli strumenti (.menu-voce: alte 44 px, si accendono di sfondo); il
   riquadro è lo stesso, ma si apre sotto il pulsante e scorre con la pagina,
   uguale sul telefono. La freccia gira quando il menù è aperto. */
.ar-tendina { position: relative; display: inline-flex; }
.ar-tendina-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--bg-2); border: var(--bw) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; }
.ar-tendina-menu[hidden] { display: none; }
.ar-tendina-freccia { display: inline-block; width: 10px; height: 7px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.2l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1.2l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  transition: transform var(--ar-t) var(--ar-curva); }
[aria-expanded="true"] > .ar-tendina-freccia { transform: rotate(180deg); }
.ar-off { opacity: .65; }
.ar-link { color: var(--accent); font-size: var(--fs-m); text-decoration: none; }
.ar-link:hover { text-decoration: underline; }
.ar-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* dentro una .rq-card i .btn sono a tutta larghezza (colonna del modulo di
   richiesta): qui no, sono azioni in fila */
.area .rq-card .btn, .ar-modale .btn { width: auto; margin-top: 0; display: inline-flex; }
.ar-azioni .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ar-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ar-riga-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ar-riga-t b { font-size: var(--fs-m); }
.ar-dafare { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ar-doc { margin-bottom: 14px; display: flex; flex-direction: column; }
.ar-doc .ar-azioni { margin-top: auto; padding-top: 12px; }
/* Su schermo largo documenti e ordini stanno in due colonne, dentro un
   contenitore loro (.ar-colonne): a tutta larghezza una riga da 1500 px per un
   numero e due pulsanti è spazio sprecato. Griglia e non `columns`, così
   l'ordine resta riga per riga (il più recente in alto a sinistra). Prima la
   griglia era il contenitore della sezione intera: il tasto «+ Nuovo ordine»
   occupava una cella, e il margine fra una scheda e l'altra faceva partire la
   colonna di destra più in basso (10/10/2026). Le schede affiancate hanno la
   stessa altezza, con i pulsanti in fondo. */
.ar-colonne { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ar-colonne > .rq-card { margin: 0; }
@media (min-width: 1280px) {
  .ar-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* ---- Gli stati: caricamento, vuoto, errore, gestionale non raggiungibile.
   Lo stesso riquadro centrato in ogni sezione, con parole che dicono cosa
   succede e cosa si può fare (10/10/2026). ---- */
.ar-stato { text-align: center; padding: 30px 20px; }
.ar-stato p { margin: 0 auto 14px; max-width: 520px; font-size: var(--fs-m); line-height: 1.55; color: var(--text-dim); }
.ar-stato p:last-child { margin-bottom: 0; }
.ar-stato .btn { margin-top: 2px; }
.ar-vuoto p { color: var(--text-dim); }
.ar-errore { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ar-errore .ar-errore-t { color: var(--text); font-weight: 600; margin-bottom: 6px; }
.ar-errore .ar-err { margin-bottom: 8px; }
.ar-giu p { color: var(--text); }
.ar-caricamento { padding: 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.ar-scheletro { display: flex; flex-direction: column; gap: 10px; min-height: 84px; justify-content: center; animation: ar-pulsa 1.4s ease-in-out infinite; }
.ar-scheletro-riga { display: block; height: 10px; border-radius: 5px; background: var(--bg-3); width: 70%; }
.ar-scheletro-riga.corta { width: 32%; height: 12px; }
.ar-scheletro-riga.media { width: 50%; }
.ar-scheletro:nth-child(3) { animation-delay: .15s; }
.ar-scheletro:nth-child(4) { animation-delay: .3s; }
.ar-dett-testa { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
/* Le tappe del lavoro (06/09/2026): punti fatti in accento, la corrente col
   bordo pieno, le altre spente. Nella scheda è una riga; nel dettaglio ogni
   tappa ha la sua data sotto. Niente rosso/verde: non è un giudizio, è dove si sta. */
.ar-avanz { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ar-tappe { display: flex; align-items: flex-start; gap: 0; }
.ar-tappa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; font-size: var(--fs-s); color: var(--text-dim); text-align: center; }
/* Il filo fra un punto e l'altro: in accento fino alla tappa corrente compresa
   (il lavoro è arrivato lì), poi grigio ma visibile. Prima il tratto che entrava
   nella tappa corrente era del colore del bordo (#2b2b2b su nero): sul telefono
   spariva, e il punto «in lavorazione» sembrava staccato dagli altri (visto dal
   titolare il 27/09/2026: «va bene il pallino nero ma non devi perdere la linea»). */
.ar-tappa::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: #4d4d4d; }
.ar-tappa:first-child::before { display: none; }
.ar-tappa.fatta::before, .ar-tappa.corrente::before { background: var(--accent); }
.ar-tappa-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-2); position: relative; z-index: 1; box-sizing: border-box; }
.ar-tappa.fatta .ar-tappa-dot { background: var(--accent); border-color: var(--accent); }
.ar-tappa.corrente .ar-tappa-dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ar-tappa.corrente .ar-tappa-l, .ar-tappa.fatta .ar-tappa-l { color: var(--text); }
.ar-tappa.corrente .ar-tappa-l { font-weight: 600; }
.ar-tappa-l { line-height: 1.2; }
.ar-tappa-q { font-size: var(--fs-s); color: var(--text-faint, var(--text-dim)); }
/* Le PARTI di un lavoro che arriva in più spedizioni (LOG-4): rientrate e con
   il loro titolo, se no due file di tappe una sotto l'altra sembrano un
   doppione invece di due pezzi dello stesso ordine. */
.ar-parte { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line, rgba(255,255,255,.12)); }
.ar-parte-t { font-size: var(--fs-xs); color: var(--text-dim); margin-bottom: 2px; }
.ar-tappe.completo .ar-tappa { font-size: var(--fs-m); }
.ar-tappe.completo .ar-tappa-dot { width: 14px; height: 14px; }
.ar-tappe.completo .ar-tappa::before { top: 6px; }
@media (max-width: 480px) { .ar-tappa { font-size: var(--fs-xs); } .ar-tappe:not(.completo) .ar-tappa-l { display: none; } .ar-tappe:not(.completo) .ar-tappa.corrente .ar-tappa-l { display: block; } }
/* Nel dettaglio, sul telefono, sei tappe in fila con etichetta e data si
   accavallavano (visto dal titolare su Android il 26/09/2026): la fila
   diventa una colonna, punto a sinistra, etichetta e data sulla stessa riga,
   con il filo verticale fra un punto e l'altro. */
@media (max-width: 560px) {
  .ar-tappe.completo { flex-direction: column; align-items: stretch; gap: 12px; }
  .ar-tappe.completo .ar-tappa { flex: none; flex-direction: row; align-items: center; gap: 10px; text-align: left; font-size: var(--fs-s); }
  .ar-tappe.completo .ar-tappa::before { top: -14px; left: 6px; width: 2px; height: 16px; }
  .ar-tappe.completo .ar-tappa-dot { flex: none; }
  .ar-tappe.completo .ar-tappa-l { flex: 1 1 auto; }
  .ar-tappe.completo .ar-tappa-q { margin-left: auto; white-space: nowrap; }
}
.ar-sped { margin: 14px 0; }
.ar-sped p { margin: 0 0 8px; }
/* L'anteprima di un progetto: su fondo chiaro perché i disegni dell'editor
   sono tratti scuri su trasparente. Senza anteprima, una fascia bassa che lo
   dice: prima era un riquadro vuoto grande come lo schermo (10/10/2026). */
.ar-anteprima { aspect-ratio: 3 / 2; max-height: 220px; border-radius: 8px; background: #fdfdfd; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ar-anteprima img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ar-anteprima.vuota { aspect-ratio: auto; min-height: 0; padding: 14px; background: var(--bg-3); border: 1px dashed var(--border); color: var(--text-dim); font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; }
.ar-righe { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); font-size: var(--fs-m); line-height: 1.5; }
.ar-dati, .ar-conti { margin: 0; display: grid; grid-template-columns: 1fr; gap: 9px; }
.ar-dati > div, .ar-conti > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; }
.ar-dati dt, .ar-conti dt { color: var(--text-dim); font-size: var(--fs-m); margin: 0; }
.ar-dati dd, .ar-conti dd { margin: 0; font-size: var(--fs-m); overflow-wrap: anywhere; }
.ar-conti dd { font-family: var(--mono); }
/* Gli accessi (10/10/2026): una riga per dispositivo, leggibile («Chrome su
   Windows · con email e codice · dal 02/10/2026»), con la targhetta su quello
   da cui si sta guardando. Niente più firma grezza del browser. */
.ar-sessioni { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ar-accesso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-2); }
.ar-accesso b { font-size: var(--fs-m); font-weight: 600; }
.ar-accesso .hint { margin: 0; flex: 1 1 auto; }
.ar-accesso.questa { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
/* I dati per la fattura (11/10/2026): il blocco dell'account si legge come gli
   altri dati (.ar-dati); aperto, è un modulo con le caselle del modulo di
   richiesta (.rq-grid, .rq-field, .rq-field.err per l'errore). Sulla scheda
   di un documento la richiesta è una riga sopra i pulsanti. */
.ar-df-nota { display: block; margin-top: 3px; font-size: var(--fs-s); line-height: 1.45; color: var(--danger); }
.ar-fattura .ar-dati { margin-top: 10px; }
.ar-fattura .ar-df-manca { margin-top: 12px; }
.ar-df-form .rq-grid { margin-top: 12px; }
.ar-df-form .ar-df-err { margin: 5px 0 0; }
.ar-df-form .ar-df-errore { margin: 10px 0 0; }
.area .ar-doc .ar-fattura-chiede { margin: 10px 0 0; }
/* ingresso: il riquadro è la cosa da usare, quindi si vede e si tocca bene */
.ar-ingresso { padding: 22px 24px 24px; }
.ar-ingresso .rq-field label { font-size: var(--fs-m); margin-bottom: 7px; }
.ar-ingresso .inp { width: 100%; font-size: var(--fs-l); padding: 13px 14px; }   /* 16px: iOS non zooma */
.ar-ingresso .ar-azioni { margin-top: 16px; }
.area .ar-ingresso .btn.primary { width: 100%; justify-content: center; padding: 13px 18px; font-size: var(--fs-m); }
.ar-ingresso .btn.ghost { padding: 7px 10px; }
.ar-negozio-in { padding: 16px 20px; }
.ar-negozio-in .btn { margin-top: 12px; width: auto; display: inline-flex; }
.ar-nota { max-width: 460px; margin-top: 14px; }
.ar-ok { color: var(--accent-strong); }
.ar-err { color: #e08c8c; }
.ar-attn { color: var(--accent-strong); }
/* pagamento: come si paga */
.ar-modale-sfondo { position: fixed; inset: 0; z-index: 160; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px);
  animation: ar-appare var(--ar-t) var(--ar-curva) both; }
.ar-modale { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); animation: ar-finestra var(--ar-t) var(--ar-curva) both; }
.ar-modale:focus { outline: none; }
.ar-modale h4 { margin: 0 0 8px; font-size: var(--fs-m); }
.ar-modale .hint { margin: 6px 0 0; }
.ar-bonifico { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ar-iban { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-iban code { font-family: var(--mono); font-size: var(--fs-m); letter-spacing: .06em; color: var(--accent-strong); overflow-wrap: anywhere; }
.ar-chiudi { margin-top: 16px; }
.toast .toast-btn { margin-left: 10px; vertical-align: middle; }
/* ---- Il piè di pagina (10/10/2026): chi siamo, dai dati del server. Una
   riga sottile in fondo, sull'ingresso e sulla scrivania; quello che manca
   non lascia il posto vuoto. ---- */
.ar-piede { margin: 44px 0 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: var(--text-dim); font-size: var(--fs-s); line-height: 1.6; }
.ar-piede p { margin: 0; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.ar-piede-sep { color: var(--border); }
/* la ditta (11/10/2026, dal titolare): il marchio in evidenza, in chiaro e
   pieno; «di …» resta nel grigio leggero del resto della riga (area.js, ditta) */
.ar-piede-marchio { color: var(--text); font-weight: 600; letter-spacing: .04em; }
.ar-piede-marchio sup { font-size: .72em; font-weight: 400; line-height: 0; margin-left: 1px; }
.ar-piede-link { gap: 0 18px; }
.ar-piede .ar-link { font-size: var(--fs-s); }
/* ---- Il movimento (10/10/2026) ----
   Il contenuto di una sezione entra dal basso quando la sezione cambia (la
   classe .ar-arriva la mette area.js solo allora, non a ogni ridisegno); le
   schede di una griglia arrivano una dopo l'altra; la finestra del pagamento
   si apre da sotto; le tappe fatte si accendono in fila; gli scheletri del
   caricamento respirano. Solo transform e opacity: niente salti. */
@keyframes ar-sale { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ar-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-finestra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ar-punto { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ar-pulsa { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
.ar-cont.ar-arriva > * { animation: ar-sale var(--ar-t) var(--ar-curva) both; }
.ar-cont.ar-arriva .ar-griglia > *, .ar-cont.ar-arriva .ar-colonne > *, .ar-cont.ar-arriva .ar-sez > .rq-card { animation: ar-sale var(--ar-t) var(--ar-curva) both; }
.ar-cont.ar-arriva .ar-griglia > :nth-child(2), .ar-cont.ar-arriva .ar-colonne > :nth-child(2), .ar-cont.ar-arriva .ar-sez > .rq-card:nth-child(3) { animation-delay: 40ms; }
.ar-cont.ar-arriva .ar-griglia > :nth-child(3), .ar-cont.ar-arriva .ar-colonne > :nth-child(3), .ar-cont.ar-arriva .ar-sez > .rq-card:nth-child(4) { animation-delay: 80ms; }
.ar-cont.ar-arriva .ar-griglia > :nth-child(4), .ar-cont.ar-arriva .ar-colonne > :nth-child(4), .ar-cont.ar-arriva .ar-sez > .rq-card:nth-child(5) { animation-delay: 120ms; }
.ar-cont.ar-arriva .ar-griglia > :nth-child(n+5), .ar-cont.ar-arriva .ar-colonne > :nth-child(n+5), .ar-cont.ar-arriva .ar-sez > .rq-card:nth-child(n+6) { animation-delay: 160ms; }
.ar-cont.ar-arriva .ar-tappa.fatta .ar-tappa-dot { animation: ar-punto var(--ar-t) var(--ar-curva) both; }
.ar-cont.ar-arriva .ar-tappa:nth-child(2) .ar-tappa-dot { animation-delay: 60ms; }
.ar-cont.ar-arriva .ar-tappa:nth-child(3) .ar-tappa-dot { animation-delay: 120ms; }
.ar-cont.ar-arriva .ar-tappa:nth-child(4) .ar-tappa-dot { animation-delay: 180ms; }
.ar-cont.ar-arriva .ar-tappa:nth-child(5) .ar-tappa-dot { animation-delay: 240ms; }
.ar-cont.ar-arriva .ar-tappa:nth-child(6) .ar-tappa-dot { animation-delay: 300ms; }
.ar-cont.ar-arriva .ar-tappa:nth-child(n+7) .ar-tappa-dot { animation-delay: 360ms; }
/* ---- La testata sul telefono: marchio pieno e menù laterale (27/09/2026) ----
   Dal titolare: «il logo fallo da sinistra a destra, pieno, non piccolo in alto
   a sinistra; strumenti, negozio e lingua nel menù laterale, come su Shopify,
   insieme alle altre macrosezioni». Sotto i 640 px: il marchio occupa tutta la
   riga (la misura la calcola area.js › adattaMarchio sul testo vero), la fila
   dei comandi e le linguette spariscono, e al loro posto c'è una barra con
   «Menu» e il nome della sezione. Il menù è un cassetto da sinistra con le
   sei sezioni, Strumenti, Negozio e la lingua: voci tutte uguali, stessa
   altezza (44 px, da dito), stessa misura di testo, stessi spazi. */
.ar-menubar { display: none; }
.ar-menu-sfondo { position: fixed; inset: 0; z-index: 170; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .18s var(--ar-curva, ease); }
.ar-menu-sfondo.aperto { opacity: 1; }
.ar-menu { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: var(--bg-2); border-right: 1px solid var(--border);
  padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%); transition: transform .22s cubic-bezier(.22,.9,.3,1); }
.ar-menu-sfondo.aperto .ar-menu { transform: none; }
.ar-menu-testa { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.ar-menu-titolo { font-size: var(--fs-m); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.ar-menu-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); font: 400 var(--fs-2xl) var(--font); line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.ar-menu-x:hover { color: var(--accent-strong); }
.ar-menu-voce { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: transparent; border: var(--bw) solid transparent; color: var(--text);
  font: 500 var(--fs-m) var(--font); line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.ar-menu-voce:hover { border-color: var(--border); color: var(--accent-strong); }
.ar-menu-voce.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.ar-menu-voce .ar-n { flex: none; }
.ar-menu-sep { border: 0; border-top: 1px solid var(--border); margin: 8px 0; width: 100%; }
.ar-menu-lingua { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; }
.ar-menu-etic { font: 500 var(--fs-m) var(--font); color: var(--text-dim); margin-right: auto; }
.ar-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 0; border: 0; background: transparent;
  color: var(--text); font: 500 var(--fs-m) var(--font); cursor: pointer; }
.ar-menu-btn:hover { color: var(--accent-strong); }
.ar-burger { display: inline-block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.ar-menubar-dove { font: 500 var(--fs-m) var(--font); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  /* Il marchio più presente (02/10/2026, dal titolare: «incrementa le dimensioni
     generali del logo nell'header, rendilo più presente e più evidente rispetto
     al resto dell'header»). Era già da bordo a bordo, quindi per crescere
     doveva cambiare altro: la spaziatura fra le lettere più stretta (.14em →
     .06em: a parità di larghezza il carattere sale del 14%), la riga del
     marchio che prende metà del margine della pagina (8 px per lato), un
     contorno che raddoppia le aste sottilissime di Rocket Wildness (lo stesso
     rimedio di .brand-name, più spesso), l'oro più chiaro e più aria sopra e
     sotto. Il resto della testata si fa da parte: «Menu» resta della stessa
     misura delle voci del menù, ma più leggero e grigio. */
  .area .rq-head { flex-direction: column; align-items: stretch; row-gap: 0; padding: 18px 0 14px; margin-bottom: 0; border-bottom: 0; }
  .area .rq-brand { flex: none; width: auto; margin: 0 -8px; text-align: center; overflow: hidden; }
  .area .rq-brand .brand-name { display: inline-block; white-space: nowrap; letter-spacing: .06em; margin-right: -.06em;  /* la spaziatura dopo l'ultima lettera non conta: il marchio arriva al bordo */
    color: var(--accent-strong); -webkit-text-fill-color: var(--accent-strong); -webkit-text-stroke: .042em var(--accent-strong); }
  .area .rq-brand .brand-r { color: var(--accent-strong); -webkit-text-fill-color: var(--accent-strong); }
  .area .ar-menu-btn { font-weight: 400; color: var(--text-dim); }
  .area .ar-menu-btn:hover { color: var(--accent-strong); }
  .area .ar-burger { height: 1.5px; }
  .area .rq-tools { display: none; }
  .area .ar-nav { display: none; }
  .ar-menubar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .area .ar-saluto { margin: 0 0 16px; }
  /* (qui stavano le linguette strette e scorrevoli del telefono: dal
     27/09/2026 sul telefono le linguette sono nascoste, qui sopra, e le
     sezioni stanno nel menù laterale; tolte l'11/10/2026, non valevano mai) */
  .ar-griglia { grid-template-columns: 1fr; }
  /* sul telefono la scena dell'ingresso non si allunga per riempire lo
     schermo: titolo, frase e modulo stanno vicini, il piè di pagina segue */
  .ar-entra, .ar-inner > .ar-entra { min-height: 0; gap: 20px; padding-top: 4px; flex: none; }
  .ar-dati > div, .ar-conti > div { grid-template-columns: 1fr; gap: 2px; }
  .ar-riga { flex-direction: column; align-items: stretch; }
  .area .ar-riga .btn { width: 100%; justify-content: center; }
  .ar-anteprima { max-height: 170px; }
  .ar-piede { flex-direction: column; gap: 6px; }
  /* sul telefono la ditta, la partita IVA e la sede vanno a capo comunque:
     una sotto l'altra, senza il «·» che restava appeso in fondo alla riga */
  .ar-piede .ar-piede-chi { flex-direction: column; gap: 2px; }
  .ar-piede-sep { display: none; }
}
/* Chi ha chiesto meno movimento non ne ha: nessuna animazione e nessuna
   transizione in tutta la scrivania, nel menù e nella finestra del pagamento
   (che stanno fuori da .area, appesi al corpo della pagina). */
@media (prefers-reduced-motion: reduce) {
  .area, .area *, .area *::before, .area *::after,
  .ar-menu-sfondo, .ar-menu-sfondo *, .ar-modale-sfondo, .ar-modale-sfondo * { animation: none !important; transition: none !important; }
  .ar-click:hover { transform: none; }
}

/* ---------- Preventivo rapido ---------- */
.rapido-hero {
  position: absolute; inset: 0; z-index: 35;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(220,192,160,.05), transparent 60%), var(--bg);
}
.rapido-hero-inner {
  text-align: center; border: 2px dashed var(--border);
  border-radius: 16px; padding: 56px 72px; transition: border-color .2s;
}
.rapido-hero.dragover .rapido-hero-inner { border-color: var(--accent); }
.rapido-hero h2 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 600; color: var(--accent-strong); }
.rapido-hero .btn { margin-top: 14px; padding: 11px 28px; }
body.mobile .rapido-hero-inner { padding: 36px 26px; margin: 0 14px; }
/* (annulla e ripeti si vedono anche nel rapido dal 11/10/2026: ci sono le
   modifiche di base, e ognuna passa dalla storia) */

/* ---------- Rapido: strumenti della tela, selezione e composti (11/10/2026) ---------- */
/* Prima stile in linea nell'HTML: qui, perché il telefono lo cambia (mobile.css) */
.rp-tools { position: absolute; top: 12px; left: 12px; z-index: 30; display: flex; gap: 6px; }
/* «Frecce X/Y» è un interruttore, non uno strumento: acceso = bordo e testo
   oro, non il pieno oro che dice «questo è lo strumento in mano» */
.rp-tools .rp-interruttore[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); }
/* La barra della selezione (il pannellino dell'editor in versione rapido) */
.xform-panel .xp-testa { justify-content: space-between; }
.xform-panel .xp-n {
  font-size: var(--fs-s); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
/* il menu della lavorazione: «.inp.xs» è largo 56 px (campi numerici) */
.xform-panel .xp-slot select { width: auto; min-width: 170px; max-width: 240px; }
.xform-panel .xp-bt {
  flex: 0 0 auto; height: 26px; padding: 0 7px; margin: 0;
  background: none; border: var(--bw) solid var(--border); border-radius: 7px;
  color: var(--text); font: 500 var(--fs-s) var(--font); white-space: nowrap; cursor: pointer;
}
.xform-panel .xp-bt:hover { border-color: var(--accent); color: var(--accent-strong); }
.xform-panel .xp-comp { flex-wrap: wrap; }
.xform-panel .xp-comp .btn { padding: 4px 9px; font-size: var(--fs-s); }
/* l'interruttore delle frecce nell'editor: acceso come il lucchetto delle proporzioni */
.xform-panel .xp-gumball { margin-left: auto; }
/* Avviso della marcatura piena: elementi che il riempimento coprirebbe. Il
   «top» lo mette assignui.js: dove sta l'avviso «Assegna», o sotto di lui
   quando ci sono tutti e due (qui solo il valore di riserva). */
.copertura-banner {
  position: absolute; left: 50%; transform: translateX(-50%); top: 28px;
  z-index: 34; display: flex; align-items: center; gap: 10px;
  background: rgba(22, 22, 28, .94); border: var(--bw) solid var(--accent);
  border-radius: var(--radius); padding: 8px 12px; font-size: var(--fs-m);
  box-shadow: var(--shadow); max-width: min(92%, 600px);
}
.copertura-banner .txt { color: var(--accent-strong); line-height: 1.35; }
.copertura-banner .btn { white-space: nowrap; flex: 0 0 auto; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .body { flex-direction: column; }
  .toolbar { flex-direction: row; order: 2; overflow-x: auto; border-right: none; border-top: 1px solid var(--border); }
  .stage { order: 1; min-height: 42vh; }
  .sidebar { order: 3; width: 100%; min-width: 0; max-height: 40vh; border-left: none; border-top: 1px solid var(--border); }
  .brand-sub { display: none; }
  .ribbon { overflow-x: auto; flex-wrap: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE v3 — linguaggio "Engrave" per il quoter (additivo)
   Landing cinematica, loader a scansione laser, transizioni di stato.
   Ogni animazione degrada con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Landing: il marchio si rivela, gli elementi entrano uno dopo l'altro ── */
@media (prefers-reduced-motion: no-preference) {
  .landing-brand .brand-name {
    background: linear-gradient(100deg,
      var(--accent) 0%, var(--accent) 38%,
      #fff8ec 50%, var(--accent) 62%, var(--accent) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: clx-brand-sheen 3.2s ease-in-out 0.6s 2;
  }
  .landing-inner > * { animation: clx-land-rise 0.6s cubic-bezier(0.16,1,0.3,1) both; }
  .landing-inner > :nth-child(2) { animation-delay: 0.10s; }
  .landing-inner > :nth-child(3) { animation-delay: 0.18s; }
  .landing-inner > :nth-child(4) { animation-delay: 0.26s; }
  .landing-inner > :nth-child(5) { animation-delay: 0.50s; }
  .landing-inner > :nth-child(6) { animation-delay: 0.58s; }
  .landing-tiles .tile:nth-child(1) { animation: clx-land-rise 0.6s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
  .landing-tiles .tile:nth-child(2) { animation: clx-land-rise 0.6s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
  .landing-tiles .tile:nth-child(3) { animation: clx-land-rise 0.6s cubic-bezier(0.16,1,0.3,1) 0.46s both; }
}
@keyframes clx-brand-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes clx-land-rise { from { opacity: 0; transform: translateY(14px); } }

/* Schermata «strumento in cantiere»: sotto il marchio il titolo respira,
   e il testo non arriva a filo del riquadro (28/08/2026). */
#blocco .rq-title { margin: 30px 0 12px; font-size: var(--fs-3xl); }
#blocco .landing-sub { margin: 0 auto 36px; max-width: 720px; }
#blocco .landing-tiles { justify-content: center; }
#blocco.landing { align-items: center; }

/* ── Loader: anello → raggio che scandisce (la firma del laser) ── */
.loader-ring {
  width: min(240px, 56vw); height: 2px; border: none; border-radius: 1px;
  position: relative; overflow: hidden; animation: none;
  background: rgba(220,192,160,.16);
}
.loader-ring::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, #fff3de 55%, var(--accent) 75%, transparent);
  box-shadow: 0 0 12px rgba(220,192,160,.6);
  transform: translateX(-100%);
  animation: clx-loader-scan 1.1s cubic-bezier(0.76,0,0.24,1) infinite;
}
/* transform invece di "left": stessa traiettoria ma composita a GPU (niente
   layout ad ogni frame su un'animazione infinita) */
@keyframes clx-loader-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(294%); } }
@media (prefers-reduced-motion: reduce) {
  .loader-ring::after { animation: none; transform: translateX(97%); }
  .landing-inner > *, .landing-tiles .tile { animation: none !important; }
  /* §7.12: anche gli avvisi (toast) e il riflettore del tour stanno fermi */
  .toast { animation: none; }
  .tour-hl, .tour-card { transition: none; }
  .tour-focus { animation: none; }
}

/* ── Cambio vista 2D ⇄ 3D e pannelli: stati che entrano, non appaiono ── */
@media (prefers-reduced-motion: no-preference) {
  #canvas-3d:not(.hidden), #canvas-2d:not(.hidden) { animation: clx-view-in 0.3s ease both; }
  .panel.active { animation: clx-panel-in 0.28s cubic-bezier(0.16,1,0.3,1) both; }
  .rb-menu { animation: clx-menu-in 0.16s ease both; }
}
@keyframes clx-view-in { from { opacity: 0; } }
@keyframes clx-panel-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes clx-menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* ── Niente riquadro blu al tocco o al clic ────────────────────────────
   È il contorno che il browser disegna su qualunque cosa prenda il fuoco:
   sul nostro fondo scuro è un rettangolo azzurro che stona e sembra un
   errore. Qui sparisce quando si tocca o si clicca; resta — nei nostri
   colori, nella regola qui sotto — solo per chi naviga col tasto Tab, che
   senza non saprebbe più dov'è. Vale anche per il lampo grigio del tocco
   su Android (tap-highlight). */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ── Micro-feedback su bottoni e tab (pressione) ── */
.btn, .viewtab, .sidetab, .tool { transition: all .15s ease, scale .08s ease; }
.btn:active, .viewtab:active, .sidetab:active, .tool:active { scale: .96; }
/* ── Il fuoco dalla tastiera: UN segno solo, uguale in tutte le pagine ──
   11/10/2026, dal titolare, sulla casella dell'email della scrivania: «due
   linee di colore diverso». Erano tre segni insieme: il bordo che diventava
   oro (.inp:focus), un anello all'80% staccato di 2 px e un alone; sui
   pulsanti anello e alone; dove questa regola non arrivava (le pillole della
   richiesta, i link, WhatsApp, il cubo della 3D) l'anello di sistema del
   browser, scuro e bianco. Adesso:
   · le caselle, le tendine e le aree di testo hanno come segno il loro bordo,
     che diventa oro (.inp:focus, più sopra), e niente anello;
   · tutto il resto che prende il fuoco ha un anello oro pieno da 2 px,
     staccato di 2 px, e niente alone.
   Si vede: l'oro sul nero ha un contrasto di 12:1, e il bordo di una casella
   passa dal grigio all'oro con un contrasto di 8:1 (WCAG 2.4.7 e 2.4.13).
   I contenitori che ricevono il fuoco dal codice (tabindex -1: il contenuto
   della scrivania, le finestre) non hanno anello, perché non sono comandi.
   Due eccezioni, ognuna con un segno solo: la voce di un menù a tendina si
   accende di sfondo come nei menù del sistema (.menu-voce), e il cursore di
   un intervallo ingrandisce il pallino (input[type=range]). Le altre regole
   dei componenti non ridicono il fuoco: si toglievano o si sommavano a
   questa, ed è da lì che venivano i segni doppi. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), .tile):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
:where(.inp, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"])):focus-visible {
  outline: none;
}
/* una casella con l'errore ha il bordo rosso, e il rosso vince sull'oro: al
   fuoco non cambiava niente. Diventa oro come le altre; l'alone rosso,
   l'etichetta e la frase sotto continuano a dire l'errore. */
.rq-field.err .inp:focus { border-color: var(--accent); }
.viewtab { position: relative; }
.viewtab.active::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px;
  border-radius: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(220,192,160,.5);
}

/* ── Dropzone: l'area "chiama" il file ── */
.dropzone:not(.hidden) .dropzone-inner, #rapido-hero:not(.hidden) .rapido-hero-inner {
  animation: clx-drop-breathe 2.2s ease-in-out infinite;
}
@keyframes clx-drop-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,192,160,.0); }
  50% { box-shadow: 0 0 28px 0 rgba(220,192,160,.14); }
}
@media (prefers-reduced-motion: reduce) {
  .dropzone-inner, .rapido-hero-inner { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVIZI SECONDARI e STAMPA DTF — 04/09/2026
   La riga sotto le tessere non deve competere con i tre strumenti
   principali: nessun bordo acceso, niente ombra, altezza di una riga.
   ═══════════════════════════════════════════════════════════════════ */
/* I due gruppi della landing: «automatico» e «manuale». Il titolino serve a
   dire in una riga la differenza che conta, cioè chi risponde: il server o una
   persona (04/09/2026). */
.landing-gruppo { margin: 26px 0 0; }
/* Titolo e sottotitolo su due righe: appiccicati sulla stessa riga il
   sottotitolo sembrava una nota a margine invece della frase che spiega il
   gruppo (05/09/2026). */
.gruppo-testa { text-align: center; margin-bottom: 14px; }
.gruppo-testa h2 { font-size: var(--fs-l); font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--accent); margin: 0 0 5px; }
.gruppo-testa p { font-size: var(--fs-m); color: var(--text-dim); margin: 0 auto; max-width: 62ch; line-height: 1.5;
                  /* la seconda frase va a capo da sola: due righe corte si leggono
                     meglio di una lunga (richiesta del 08/09/2026) */
                  white-space: pre-line; }

/* Lingua e carrello sulla landing: la topbar qui è nascosta. */
.landing-tools { position: absolute; top: 16px; right: 18px; z-index: 92;
                 display: flex; align-items: center; gap: 8px; }
.landing-tools .cart-btn { position: relative; }
@media (max-width: 640px) {
  .landing-tools { top: 10px; right: 10px; }
  .landing-tools .btn-area span { display: none; }
  .landing-tools .btn.btn-area { width: var(--ctl-h); padding: 0; }
}
/* Sotto i 960 px il marchio, centrato e grande, arriverebbe sotto la lingua,
   l'area personale e il carrello: scende di una riga (03/10/2026). */
@media (max-width: 960px) and (min-width: 641px) { .landing-inner { padding-top: 64px; } }
/* ── La sezione della stampa DTF ──
   Testi più grandi del resto: qui il cliente legge avvisi che decidono se la
   stampa viene bene o male, e a 12px non li legge nessuno (05/09/2026). */
.dtf-inner { max-width: min(1240px, 100%); }
.dtf-inner .rq-title { font-size: var(--fs-3xl); }
.dtf-inner .rq-sub { font-size: var(--fs-l); max-width: 76ch; }
.dtf-passi {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 16px 0 24px;
  padding: 0; list-style: none; counter-reset: dtfp;
}
.dtf-passi li {
  counter-increment: dtfp; font-size: var(--fs-m); color: var(--text-dim);
  display: flex; align-items: center; gap: 9px;
}
.dtf-passi li::before {
  content: counter(dtfp); flex: 0 0 auto;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-m); font-weight: 700;
  color: var(--accent); border: var(--bw) solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.dtf-drop {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 12px; padding: 30px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: border-color .14s ease, background .14s ease;
}
.dtf-drop.sopra { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* con delle grafiche già caricate la zona non deve più fare la protagonista */
.dtf-drop.compatta { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 14px 16px; }
.dtf-drop.compatta .dtf-drop-t { font-size: var(--fs-m); font-weight: 600; }
.dtf-drop.compatta .hint { font-size: var(--fs-m); }
.dtf-drop-t { font-size: var(--fs-l); font-weight: 600; margin: 0; }
.dtf-drop .hint { font-size: var(--fs-m); }
.dtf-lista { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.dtf-card {
  border: var(--bw) solid var(--border); border-radius: 12px; padding: 16px 18px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.dtf-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dtf-nome { font-weight: 700; font-size: var(--fs-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtf-rm {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: var(--fs-l); line-height: 1; padding: 4px 7px;
}
.dtf-rm:hover { color: var(--clr-red); }
.dtf-card-b { display: flex; gap: 20px; align-items: flex-start; margin-top: 14px; flex-wrap: wrap; }
.dtf-fig {
  flex: 0 0 auto; width: 152px; height: 152px; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden; position: relative;
  /* scacchiera: si vede subito se lo sfondo è trasparente davvero */
  background-color: #fbfbfb;
  background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%),
                    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px;
}
.dtf-fig img { max-width: 100%; max-height: 100%; display: block; }
.dtf-fig.ingrandibile { cursor: zoom-in; }
.dtf-fig.ingrandibile:hover .dtf-lente, .dtf-fig.ingrandibile:focus-visible .dtf-lente { opacity: 1; }
.dtf-lente {
  position: absolute; right: 6px; bottom: 6px; opacity: .55;
  background: rgba(20,20,22,.72); color: #fff; border-radius: 6px;
  font-size: var(--fs-m); line-height: 1; padding: 5px 7px; transition: opacity .14s ease;
}
/* I campi: etichetta sopra, controllo sotto, tutti alla stessa altezza. */
.dtf-campi { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.dtf-campo { display: flex; flex-direction: column; gap: 6px; }
.dtf-campo-l { font-size: var(--fs-m); color: var(--text-dim); line-height: 1.2; min-height: 1.2em; }
.dtf-campo-v { display: flex; align-items: center; gap: 7px; min-height: 42px; }
.dtf-campo .inp { width: 120px; font-size: var(--fs-l); }   /* 16px: iOS non zooma */
/* il campo numerico è avvolto dalle nostre frecce: l'involucro tiene la misura
   del campo, non quella della riga, o «mm» finirebbe spinto in fondo */
.dtf-campo .num { width: 120px; }
.dtf-campo .num > .inp { width: 100%; }
.dtf-alt { font-size: var(--fs-l); color: var(--text); font-weight: 600; }
.dtf-unita { font-size: var(--fs-m); color: var(--text-dim); }
.dtf-ris { flex: 1 1 100%; margin: 2px 0 0; font-size: var(--fs-m); font-weight: 600; }
.dtf-ris.ok { color: var(--clr-green); }
.dtf-ris.medio { color: var(--clr-amber); }
.dtf-ris.basso { color: var(--clr-red); }
.dtf-warn {
  margin: 12px 0 0; font-size: var(--fs-m); line-height: 1.55; color: var(--text);
  padding: 11px 14px; border-radius: 8px;
  border: var(--bw) solid color-mix(in srgb, var(--clr-amber) 34%, transparent);
  background: color-mix(in srgb, var(--clr-amber) 7%, transparent);
}
.dtf-tot {
  border: var(--bw) solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 12px; padding: 18px 20px; margin-top: 18px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
/* prezzo in ricalcolo: la barra resta com'è, attenuata, così altezza e pulsanti
   non cambiano sotto il dito (§9.7, 06/09/2026) */
.dtf-tot.attesa { opacity: .55; transition: opacity .25s; }
.dtf-tot.attesa .dtf-tot-v { color: var(--text-dim); }
.dtf-tot-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dtf-tot-l { font-size: var(--fs-l); color: var(--text-dim); }
.dtf-tot-v { font-size: var(--fs-3xl); font-weight: 700; color: var(--accent); }
.dtf-tot .hint { font-size: var(--fs-m); }
.dtf-tot-rfq { margin: 0; font-size: var(--fs-m); line-height: 1.55; }
.dtf-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dtf-bloccato { text-align: center; padding: 26px 8px 8px; }
.dtf-bloccato .rq-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.dtf-bloccato .dtf-azioni { justify-content: center; }
.tile-badge.statico { position: static; display: inline-block; margin-bottom: 12px; }

/* La grafica in grande, su fondo chiaro e su fondo scuro: è così che ci si
   accorge che lo sfondo non è trasparente o che il bianco sparisce. */
.dtf-lente-bd {
  position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(8,8,10,.78);
}
.dtf-lente-box {
  background: var(--bg-2); border: var(--bw) solid var(--border); border-radius: 14px;
  padding: 14px 16px 16px; max-width: min(980px, 96vw); width: 100%;
  max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.dtf-lente-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dtf-lente-testa b { font-size: var(--fs-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtf-lente-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
@media (max-width: 700px) { .dtf-lente-coppia { grid-template-columns: 1fr; } }
.dtf-lente-cella {
  position: relative; border-radius: 10px; padding: 16px; min-height: 220px;
  display: grid; place-items: center; overflow: auto;
}
.dtf-lente-cella.chiaro { background: #f4f4f5; }
.dtf-lente-cella.scuro { background: #17171a; }
.dtf-lente-cella img { max-width: 100%; max-height: 58vh; display: block; }
.dtf-lente-nota {
  position: absolute; left: 10px; bottom: 8px; font-size: var(--fs-s); letter-spacing: .04em;
  text-transform: uppercase; opacity: .75;
}
.dtf-lente-cella.chiaro .dtf-lente-nota { color: #333; }
.dtf-lente-cella.scuro .dtf-lente-nota { color: #ddd; }

/* Il carrello dentro la testata della stampa DTF: la topbar vera è coperta
   dalla pagina intera, ma il carrello dev'esserci lo stesso (05/09/2026). */
.dtf-cart { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.dtf-cart .cart-btn { position: relative; }
.dtf-campo-n { font-size: var(--fs-s); color: var(--text-faint, #8a8a8a); font-style: italic; }
/* Stato vuoto e attesa nella cornice del totale: `.hint` porta 8px di margine
   sopra e 0 sotto, e il testo finiva più in alto del centro (05/09/2026). */
.dtf-vuoto { margin: 0; font-size: var(--fs-m); }

/* ═══════════════════════════════════════════════════════════════════
   LA PELLE DEL SITO (23/10/2026)

   Vincenzo: «allinea l'interfaccia al sito». Il preventivatore (landing, preventivo rapido, editor, richiesta, DTF,
   scrivania) aveva già i colori del marchio, ma con un fondo nero pieno, pulsanti squadrati, angoli di 7-12 px e i
   titolini in Poppins maiuscolo pesante. Il sito nuovo (tema Shopify, assets/clz.css) usa:
   - il fondo #0d0d0e e le superfici #121213 / #18181a, i bordi #2b2b2d;
   - pulsanti a pillola: oro pieno per l'azione principale, bordo bianco al 24% per le altre;
   - schede con angoli di 16 px e bordo sottile;
   - l'«occhiello»: Roboto Mono, spaziato, oro, preceduto da un trattino (qui al gradino --fs-s della scala).
   I colori e gli angoli stanno nei token di :root, in cima; qui sotto le regole che ne cambiano la forma. Solo
   aspetto: nessuna regola di posizione degli strumenti, nessun comportamento, nessuna misura del testo fuori scala.
   Le barre degli strumenti dell'editor restano con gli angoli stretti, perché lì i pulsanti stanno in fila fitta e
   una pillola li farebbe sembrare scollegati. Sta in fondo al foglio perché vince sulle regole di prima a parità di
   peso; mobile.css si carica dopo e conserva le sue. */


/* ---------- pulsanti: pillole come sul sito ---------- */
.btn {
  border-radius: var(--pillola);
  border-color: var(--bordo-pillola);
  background: rgba(13, 13, 14, .5);
}
.btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--inchiostro-pulsante); font-weight: 500; }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--inchiostro-pulsante); }
.btn.ghost { background: rgba(13, 13, 14, .5); }
.btn.active { border-color: var(--accent); }
/* i pulsanti solo icona sono tondi, come quelli della testata del sito */
/* 999px e non 50%: su un quadrato fa lo stesso cerchio, e la lingua e i comandi accanto devono avere lo stesso raggio
   (verifica/area_pagina.py) */
.btn.iconbtn, .btn.cart-btn, .btn.iconbtn.btn-indietro, .btn.iconbtn.btn-area { border-radius: var(--pillola); }
/* nelle barre fitte dell'editor e nelle file di pulsanti gli angoli restano stretti (vedi in cima) */
.ribbon .btn, .btnrow .btn, .tool, .toolbar .btn, .rp-tools .btn, #rp-tools .btn { border-radius: var(--radius-sm); }
.ribbon .btn.iconbtn, .btnrow .btn.iconbtn { border-radius: var(--radius-sm); }
/* le schede della vista (2D / 3D) erano già pillole: stesso bordo delle altre */
.viewtab { border-radius: var(--pillola); }
.sel-lingua { border-radius: var(--pillola); }

/* ---------- schede ---------- */
.card, .job, .porta-rfq, .qty-ordine { border-radius: var(--radius-sm); }
.rq-card, .rq-serv, .dtf-drop, .dtf-tot, .ar-ingresso, .landing-steps li { border-radius: var(--radius); }
.rq-card, .ar-ingresso { background: var(--bg-2); border-width: 1px; border-color: rgba(255, 255, 255, .07); }
.rq-serv { background: var(--bg-3); border-width: 1px; border-color: #242426; }
.rq-serv:hover { border-color: rgba(220, 192, 160, .34); }

/* ---------- l'occhiello del sito: mono, spaziato, oro, col trattino ---------- */
.gruppo-testa h2, .rq-gruppo-t, .rq-card-t, .card h4 {
  font: 500 var(--fs-s)/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.gruppo-testa h2, .rq-gruppo-t, .rq-card-t {
  display: flex; align-items: center; gap: 12px;
}
.gruppo-testa h2::before, .rq-gruppo-t::before, .rq-card-t::before {
  content: ""; width: 24px; height: 2px; background: currentColor; flex: none;
}
.gruppo-testa h2 { justify-content: center; margin-bottom: 8px; }
.brand-sub { font-family: var(--mono); letter-spacing: .14em; }

/* ---------- testata degli strumenti: come la testata del sito ---------- */
.topbar {
  background: rgba(13, 13, 14, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.rq-head { border-bottom-color: rgba(255, 255, 255, .06); }

/* ---------- pagina iniziale ---------- */
/* il sito non ha bagliori di fondo: il fondo è piatto e la luce la danno le scene */
.landing-bg { background: none; }
.landing-brand::after {
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  box-shadow: none; height: 1px; opacity: .6;
}
.hero-text h1 { font-weight: 500; letter-spacing: -.024em; line-height: 1.08; }
.tile {
  background: var(--bg-3); border-width: 1px; border-color: #242426; border-radius: var(--radius);
}
.tile:hover { border-color: rgba(220, 192, 160, .34); transform: translateY(-2px); box-shadow: none; }
.tile::after { display: none; }
.tile h2 { font-weight: 500; letter-spacing: -.015em; }
.tile-icon {
  border-radius: 14px; background: rgba(220, 192, 160, .12); border: 1px solid rgba(220, 192, 160, .34);
  color: var(--accent-strong);
}
/* l'invito di ogni tessera diventa il pulsante a pillola del sito */
.tile-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--pillola); border: 2px solid var(--bordo-pillola); color: var(--text);
  background: rgba(13, 13, 14, .5); font-weight: 500; transition: border-color .2s, color .2s;
}
.tile:hover .tile-cta { border-color: var(--accent); color: var(--accent-strong); }
.tile.tile-hero .tile-cta { background: var(--accent); border-color: var(--accent); color: var(--inchiostro-pulsante); }
.tile.tile-hero:hover .tile-cta { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--inchiostro-pulsante); }
.tile.bloccato .tile-cta { background: transparent; border-color: var(--border); color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
}