/* ==========================================================================
CONFIGURATORE PRODOTTI IT PER LA PUBBLICA AMMINISTRAZIONE — Converge
Foglio di stile v7
--------------------------------------------------------------------------
Impianto: editoriale. La struttura nasce da spazio, tipografia e filetti;
il bordo pieno e l'ombra sono l'eccezione, non la regola.
--------------------------------------------------------------------------
1. Design tokens
2. Base
3. Tipografia editoriale e utilita
4. Controlli
5. Header
6. Hero
7. Riga informativa
8. Sequenza "come funziona"
9. Fascia brand
10. Configuratore e indicatore di passo
11. Categorie
12. Catalogo prodotti
13. Filtri
14. Soglia
15. Riepilogo
16. Dati ente
17. Generazione codice
18. Command bar
19. Pannello bundle
20. Finestre di dialogo
21. Footer
22. Responsive
23. Accessibilita
24. Stampa
--------------------------------------------------------------------------
BREAKPOINT POLICY (canonici, in ordine di priorità d'uso):
1200px desktop → tablet (mini-bundle sidebar collassa, sieve modal)
960px tablet largo (hero brand-list wrap, cat-grid ridefinite)
720px tablet → mobile portrait (rack single-col, empty-state compatto)
640px small tablet (rare — solo se serve step intermedio)
520px mobile portrait (typography scale-down, brand-list gap ridotto)
360px mobile stretto (edge cases input/pill)
Le @media sono INTENZIONALMENTE co-locate con la loro base rule
(component-scoped). Spostarle in un blocco unico romperebbe la specificity
source-order su override tra componenti vicini. Se aggiungi un breakpoint
nuovo, preferisci uno di quelli sopra prima di introdurre un valore nuovo.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
--------------------------------------------------------------------------
Palette e movimento del configuratore Quantum Scalar v24, portati qui
perche i due strumenti siano riconoscibilmente lo stesso prodotto:
navy per le superfici scure, teal per la scelta dell'utente e le conferme,
menta solo sul navy, ambra per lo stato di attesa. Un solo colore per ogni
ruolo, e nessuno stato affidato al colore da solo.
========================================================================== */
:root {
/* superficie e struttura */
--paper: #ffffff;
--paper-2: #f8fafc;
--paper-3: #eef2f7;
/* V9.2 DRY: superficie "elevata" di card/controlli. In light coincide con
--paper (bianco puro come il bg pagina), in dark si stacca dal fondo con
--paper-2. Consente di scrivere una sola regola invece di light + dark
override per componenti come .cat-cell, .gauge, .control. */
--surface-elevated: var(--paper);
--tint: #ecfdf5; /* teal-050: superficie della selezione */
--tint-blue: #edf2f4;
--line: #e2e8f0; /* separatori interni */
--line-strong: #cbd5e1; /* bordi */
/* identita */
--navy: #0b1329; /* testate, command bar, footer */
--blue: #1c2541;
--blue-mid: #3a506b; /* link e stati interattivi */
/* accento */
--teal: #10b981;
--teal-600: #059669;
--teal-700: #047857; /* teal come testo su bianco */
--teal-050: #ecfdf5;
--teal-100: #d1fae5;
--teal-200: #a7f3d0;
--mint: #34d399; /* solo sulle superfici navy */
--on-teal: #03231a; /* testo sopra il teal pieno */
/* accento ergonomia: badge/nota "Ergonomico", stessa logica del teal sostenibilità
ma su tinta blu per restare distinguibile a colpo d'occhio nella scheda prodotto. */
--blue-ergo: #2563eb;
--blue-ergo-600: #1d4ed8;
--blue-ergo-700: #1e40af; /* blu come testo su bianco */
--blue-050: #eff6ff;
--blue-ergo-rgb: 37, 99, 235;
/* Componenti RGB per rgba() modulari. V10 extract: consente a
`rgba(var(--teal-rgb), .xx)` di seguire il brand se un giorno teal
dovesse cambiare. Usati per shadow/glow/focus-ring semitrasparenti. */
--teal-rgb: 16, 185, 129;
--mint-rgb: 52, 211, 153;
--navy-rgb: 11, 19, 41;
/* testo — text-soft passato da #64748b (4.66:1 su bianco, AA) a #52627a
(~6.4:1 su bianco, AAA compliant per testo piccolo). --text-mute per i
rari contesti dove serve davvero un grigio piu leggero. */
--ink: #0f172a;
--text: #334155;
/* V9.1 precision: alzato da #52627a a #475569 → contrast su bianco passa
da ~6.4:1 (AA solo >18px) a ~7.4:1 (AA anche a 13px). Gerarchia visiva
rimane invariata rispetto a --text (differenza 2 gradini di slate),
ma i metadata e le hint smettono di sembrare "quasi disabilitati". */
--text-soft: #475569;
--text-mute: #5b6b83;
--text-invert: #ffffff;
/* Anello di focus sopra superfici navy (masthead, commandbar, footer).
Azzurro chiaro con contrast AA su navy (#0b1329) e comunque visibile
su superfici semitrasparenti bianche. */
--focus-on-navy: #93BEE8;
/* stato */
--ok: #047857;
--ok-tint: #ecfdf5;
--wait: #b45309;
--wait-tint: #fffbeb;
--wait-line: #fde68a;
--wait-solid: #d97706;
--alert: #b91c1c;
--alert-tint: #fef2f2;
/* l'arancio resta riservato alle segnalazioni commerciali, come nella v24:
nell'interfaccia non veste mai un pulsante. */
--orange: #f97316;
/* Tipografia:
- Lexend (300..700) per body e titoli sans (unico sans effettivamente caricato via Google Fonts)
- DM Serif Display per titoli editoriali; usa var(--display-serif) invece di ripetere il family name
Inter non è più dichiarata: non era caricata e cadeva su Segoe UI. */
--sans: 'Lexend', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
--display: 'Lexend', 'Segoe UI', system-ui, sans-serif;
--display-serif: 'DM Serif Display', 'Lexend', Georgia, 'Times New Roman', serif;
--mono: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', monospace;
/* Scala tipografica. t-xs e t-sm sono volutamente allo stesso valore:
- --t-xs (13px) ha ruolo semantico "etichetta/kicker/metadata"
- --t-sm (13px) ha ruolo semantico "body compatto / labels forms"
Renderizzano uguale ma trasmettono intento diverso. Se un domani serve
differenziazione visiva basta cambiare un valore senza toccare il markup. */
--t-micro: 12px;
--t-xs: 13px;
--t-sm: 13px;
--t-base: 15px;
--t-md: 17px;
--t-lg: 21px;
--t-xl: 27px;
--t-2xl: 34px;
--t-display: 54px;
--t-numeral: 64px;
/* ritmo */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
--s9: 56px; --s10: 72px; --s11: 96px; --s12: 128px;
/* forma: raggi della v24 */
--r-xs: 8px;
--r-sm: 12px;
--r-md: 16px;
/* profondita: quattro livelli, tutti tenui */
--sh-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--sh-2: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
--sh-3: 0 10px 15px -3px rgba(0,0,0,.09), 0 4px 6px -2px rgba(0,0,0,.05);
--sh-4: 0 20px 25px -5px rgba(0,0,0,.13), 0 10px 10px -5px rgba(0,0,0,.07);
--wrap: 1320px;
--pad: 40px;
--head: 66px;
/* Motion vocabulary.
- --e-out standard ease-out (transizioni di stato routine)
- --e-out-quart confident deceleration esponenziale (arrivi, dialog enter, hover)
- --e-spring micro-bounce RISERVATO a feedback semantici di conferma
(pickPop "aggiunto", qtyBump "quantita' cambiata").
Non usare per decorazione. */
--e-out: cubic-bezier(.25, .8, .25, 1);
--e-out-quart: cubic-bezier(.16, 1, .3, 1);
--e-spring: cubic-bezier(.34, 1.56, .64, 1);
--t-1: 150ms var(--e-out);
--t-2: 250ms var(--e-out);
--t-3: 400ms var(--e-out);
--ease: var(--t-2);
color-scheme: light;
}
/* ==========================================================================
1b. DARK THEME (D) — override dei token quando html ha data-theme="dark".
Le regole per-componente restano invariate; il tema cambia solo i tokens
di superficie/testo/linea. Le tinte accento (teal/blu/ambra) restano vive
e ben contrastate anche su fondo scuro.
========================================================================== */
:root[data-theme="dark"] {
/* superfici scure — carta invertita */
--paper: #0d1524;
--paper-2: #131c2f;
--paper-3: #1a2438;
/* V9.2 DRY: superficie "elevata" delle card/controlli. In light equivale a
--paper (bianco puro); in dark si stacca dal fondo con --paper-2. Sostituisce
tre override [data-theme=dark] (.cat-cell, .gauge, .control bg). */
--surface-elevated: var(--paper-2);
--tint: rgba(16, 185, 129, .14);
--tint-blue: rgba(58, 80, 107, .28);
--line: #2c3859;
--line-strong: #3d4c73;
/* Superfici navy: il masthead/footer resta più scuro del bg per contrasto */
--navy: #060a17;
--blue: #182444;
/* V9.2 contrast headroom: 6a83a8 stava a 4.72:1 su bg dark (AA borderline).
7c98be sale a 6.17:1 → AA con margine anche su schermi meno tarati. */
--blue-mid: #7c98be;
/* testo — invertito */
--ink: #eaeef7;
--text: #b8c1d8;
--text-soft: #92a0bd;
/* V9.2 contrast headroom: 7482a3 stava a 4.75:1 → 8291b2 sale a 5.78:1. */
--text-mute: #8291b2;
--text-invert: #0d1524;
/* Accenti stato — tinte adattate a sfondo scuro (più desaturate, meno luminose) */
--teal-050: rgba(16, 185, 129, .14);
--teal-100: rgba(16, 185, 129, .22);
--teal-200: rgba(16, 185, 129, .38);
--ok-tint: rgba(4, 120, 87, .18);
--wait-tint: rgba(180, 83, 9, .22);
--wait-line: rgba(253, 230, 138, .35);
--alert-tint: rgba(185, 28, 28, .20);
--blue-050: rgba(37, 99, 235, .18);
/* Focus ring: più visibile sul dark */
--focus-on-navy: #a8c8e8;
color-scheme: dark;
}
/* Immagini: leggera desaturazione + brightness compensata su dark così le
photo prodotto non "bucano" il fondo con bianco puro. Non toccare loghi
brand nel muro (già gestiti da filter grayscale per firma editoriale). */
:root[data-theme="dark"] .item-stage img,
:root[data-theme="dark"] .cat-thumb img {
filter: brightness(.92) saturate(.94);
}
:root[data-theme="dark"] .item-stage,
:root[data-theme="dark"] .cat-thumb { background: #dee3ec; }
/* Fix #1: Brand loghi in dark — invert leggero + brightness compensata così
i wordmark scuri (Kensington, Logitech, Philips) emergono su sfondo scuro.
Jabra è bicolore giallo+nero: excludo dall'invert perché il giallo->blu
sarebbe brutto. */
:root[data-theme="dark"] .brands-item img {
filter: invert(1) grayscale(.55) brightness(.92);
opacity: .82;
}
:root[data-theme="dark"] .brands-item:hover img {
filter: invert(1) grayscale(0) brightness(1);
opacity: 1;
}
:root[data-theme="dark"] .brands-item img[alt="Jabra"] {
filter: brightness(1);
opacity: .95;
}
:root[data-theme="dark"] .brands-item:hover img[alt="Jabra"] {
filter: brightness(1.1);
opacity: 1;
}
/* Lenovo: monocromo rosso brand (#e60012). Come Jabra, niente invert in dark
(il rosso diventerebbe ciano). Grayscale leggera a riposo, colore pieno all'hover. */
:root[data-theme="dark"] .brands-item img[alt="Lenovo"] {
filter: grayscale(.25) brightness(1);
opacity: .9;
}
:root[data-theme="dark"] .brands-item:hover img[alt="Lenovo"] {
filter: grayscale(0) brightness(1.05);
opacity: 1;
}
/* Fix #2: Flow "Come funziona" — override espliciti per gli elementi che
hanno colori legati a --ink e --text-soft, per garantire alto contrasto
sul dark bg (a volte i tokens da soli non bastano su superfici molto scure). */
:root[data-theme="dark"] .flow-n { color: #ffffff; opacity: .96; }
:root[data-theme="dark"] .flow-verb { color: rgba(var(--mint-rgb), .85); }
:root[data-theme="dark"] .flow-title { color: #ffffff; }
:root[data-theme="dark"] .flow-caption { color: rgba(255,255,255,.72); }
:root[data-theme="dark"] .flow-accent { background: var(--line-strong); }
:root[data-theme="dark"] .flow-step:hover .flow-n,
:root[data-theme="dark"] .flow-step:hover .flow-title { color: var(--mint); }
:root[data-theme="dark"] .flow-step:hover .flow-verb { color: var(--mint); }
:root[data-theme="dark"] .flow-step:hover .flow-accent { background: var(--mint); }
/* V9.2 DRY: le regole `.cat-cell/.gauge/.control` in light usano ora
`var(--surface-elevated)` (che coincide con --paper in light e --paper-2
in dark). Restano solo gli override che introducono proprietà aggiuntive
che il light non ha (border, radius, overflow — servono in dark perché
--paper-2 è troppo vicino a --paper per staccare da solo). */
:root[data-theme="dark"] .cat-cell {
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
:root[data-theme="dark"] .cat-cell:hover {
background: var(--paper-3);
border-color: var(--teal-200);
}
:root[data-theme="dark"] .cat-cell[aria-pressed="true"] .cat-info {
background: rgba(16, 185, 129, .18);
}
/* Step 3 dark: gauge/figures/doc — solo bordo esplicito, il bg viene da
--surface-elevated. */
:root[data-theme="dark"] .figures div { border-bottom-color: var(--line); }
:root[data-theme="dark"] .doc { color: var(--text); }
:root[data-theme="dark"] .control {
border-color: var(--line-strong);
color: var(--ink);
}
:root[data-theme="dark"] .control::placeholder { color: var(--text-soft); }
:root[data-theme="dark"] .entity-privacy { color: var(--text-soft); }
/* Transizione tema: sostituisci solo colori (no transform o layout). */
html, body, .masthead, .hero, .tool, .sitefoot,
.dlg-box, .tray, .item, .cat-cell, .rack, .sieve,
.mini-bundle, .gauge, .card {
transition: background-color 260ms var(--e-out), border-color 260ms var(--e-out), color 260ms var(--e-out);
}
@media (prefers-reduced-motion: reduce) {
html, body, .masthead, .hero, .tool, .sitefoot,
.dlg-box, .tray, .item, .cat-cell, .rack, .sieve,
.mini-bundle, .gauge, .card { transition: none; }
}
/* ==========================================================================
2. BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* smooth scroll gestito da Lenis */
body {
margin: 0;
background: var(--paper);
color: var(--text);
font: 400 var(--t-base)/1.62 var(--sans);
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
font-feature-settings: "cv05" 1, "ss01" 1;
/* Safety net contro overflow orizzontale accidentale su viewport estremi */
overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -0.018em; }
h3 { font-size: var(--t-lg); line-height: 1.28; letter-spacing: -0.010em; }
h4 { font-size: var(--t-md); line-height: 1.34; letter-spacing: -0.006em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
svg { display: block; }
/* ==========================================================================
Browser surfaces — text selection, caret, scrollbar.
Le parti che non abbiamo disegnato portano comunque il design: usiamo
la palette teal invece del blu di default di Chrome/Edge/Firefox.
========================================================================== */
::selection { background: var(--teal-050); color: var(--ink); }
::-moz-selection { background: var(--teal-050); color: var(--ink); }
input, textarea, [contenteditable] { caret-color: var(--teal); }
/* Scrollbar sottile su WebKit/Blink. Firefox usa scrollbar-width: thin.
Il thumb resta discreto (line-strong), diventa più leggibile in hover. */
html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 2px solid var(--paper);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
input, select { font: inherit; color: inherit; }
/* ==========================================================================
3. TIPOGRAFIA EDITORIALE E UTILITA
========================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
/* etichetta piccola con filetto: sostituisce le pastiglie decorative */
.kicker {
display: block;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
/* Il verde vuol dire una cosa sola: azione o stato confermato.
Gli occhielli di sezione non sono ne l'una ne l'altro, quindi grigi.
Prima erano verdi come i pulsanti, gli stati e i passi fatti: nove
significati sullo stesso colore, che cosi non ne portava nessuno. */
color: var(--text-soft);
}
/* variante per i pochi occhielli che segnalano davvero un esito */
.kicker-ok { color: var(--teal-700); }
/* sulla hero il fondo e navy: qui il grigio e un bianco smorzato */
.hero .kicker { color: rgba(255,255,255,.70); }
.kicker-rule { padding-top: var(--s4); border-top: 1px solid var(--ink); }
.lede {
font-size: var(--t-md);
line-height: 1.62;
color: var(--text-soft);
max-width: 56ch;
}
.meta {
font-size: var(--t-xs);
letter-spacing: .04em;
color: var(--text-soft);
}
.num { font-variant-numeric: tabular-nums; }
/* intestazione di sezione: filetto alto, etichetta, titolo */
.band-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: var(--s7);
padding-top: var(--s5);
border-top: 1px solid var(--ink);
}
.band-head h2 { max-width: 24ch; }
.band-head .lede { margin-top: var(--s4); }
/* stati: sempre con parola, mai solo colore */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--t-xs);
font-weight: 660;
letter-spacing: .01em;
}
.tag svg { width: 13px; height: 13px; flex: none; }
.tag-ok { color: var(--teal-700); }
.tag-wait { color: var(--wait); }
.tag-ko { color: var(--alert); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
/* ==========================================================================
3-bis. GSAP / SCROLL ANIMATION UTILITIES
--------------------------------------------------------------------------
Le classi .gs-* sono marker per il sistema GSAP. Non definiscono uno stato
iniziale nascosto in CSS: GSAP li imposta al volo prima dell'animazione.
Con prefers-reduced-motion o senza JS gli elementi restano visibili (stato
naturale), perche qui non c'e opacity:0 hardcoded.
========================================================================== */
/* Char-split hero H1 */
.h1-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.h1-char { display: inline-block; }
.h1-space { display: inline; }
/* A animazione conclusa il mascheramento (overflow:hidden) non serve piu':
rimosso per non tagliare i discendenti dei glifi (es. la "g" di "Configura"). */
.hero-h1-ready .h1-word { overflow: visible; }
/* Hero image parallax: il wrapper è l'ancora di GSAP yPercent (stili dimensionali in sez. 6) */
.hero-img-wrap { will-change: transform; }
/* Reduced motion: forza visibilita piena se GSAP e inattivo */
@media (prefers-reduced-motion: reduce) {
.h1-word, .h1-char { display: inline; overflow: visible; }
.hero-img-wrap { transform: none !important; }
}
/* ==========================================================================
4. CONTROLLI
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
padding: 13px 24px;
min-height: 44px;
border: 1px solid transparent;
border-radius: var(--r-xs);
font-size: var(--t-sm);
font-weight: 660;
letter-spacing: .01em;
line-height: 1.15;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background var(--t-2), border-color var(--t-2), color var(--t-2), box-shadow var(--t-2), transform 180ms var(--e-out-quart);
}
.btn:hover { text-decoration: none; }
/* Polish (C): hover microlift su tutti i bottoni. -1px translate + subtle
shadow bump. Rispetto reduced-motion. */
.btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
.btn:not(:disabled):hover { transform: none; }
}
/* Polish (C): copy feedback con checkmark inline animato. Applicato via classe
`.copied` temporanea da JS su btnCopyCode / btnCopyLink. */
.btn.copied {
background: var(--teal) !important;
color: var(--on-teal) !important;
border-color: var(--teal) !important;
}
.btn.copied::after {
content: '';
display: inline-block;
width: 14px; height: 14px;
margin-left: 6px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
animation: copied-tick 240ms var(--e-out-quart) both;
}
@keyframes copied-tick {
0% { transform: scale(0) rotate(-12deg); opacity: 0; }
60% { transform: scale(1.15) rotate(0); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn.copied::after { animation: none; }
}
/* Polish (C): focus rings globali con mint glow. Applicato ai focusable che
non hanno già un :focus-visible custom (le regole per-componente vincono
grazie a specificità e ordine). */
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 4px;
box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .18);
transition: outline-offset var(--t-1), box-shadow var(--t-1);
}
/* Override per bottoni dark (masthead / hero secondary): mint chiaro invece del teal
che si perde su navy. */
.masthead :focus-visible,
.hero :focus-visible,
.commandbar :focus-visible {
outline-color: rgba(var(--mint-rgb), .8);
box-shadow: 0 0 0 4px rgba(var(--mint-rgb), .22);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: none; }
/* l'azione principale e teal: e il colore della scelta e della conferma.
Hover: niente darkening (perderebbe contrasto WCAG AA 4.5:1 su --on-teal),
si usa invece un ring + elevazione per il feedback. */
.btn-solid { background: var(--teal); color: var(--on-teal); box-shadow: var(--sh-1); }
.btn-solid:not(:disabled):hover { background: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),.28), var(--sh-3); }
.btn-solid::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
transform: translateX(-110%);
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
.btn-solid:not(:disabled):hover::before { transform: translateX(110%); }
/* azione conclusiva: navy pieno, per distinguerla dalle azioni di percorso */
.btn-accent { background: var(--navy); color: var(--text-invert); box-shadow: var(--sh-2); }
.btn-accent:not(:disabled):hover { background: var(--blue); box-shadow: var(--sh-3); }
/* Ring teal statico quando la configurazione e' valida: non pulsa piu (era
percepito come "spinner incollato" durante la simulazione utente). */
.issue.valida .btn-accent:not(:disabled) {
box-shadow: 0 0 0 3px rgba(var(--teal-rgb),.22), var(--sh-2);
}
.btn-accent::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
transform: translateX(-110%);
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
.btn-accent:not(:disabled):hover::before { transform: translateX(110%); }
.btn-line { background: var(--paper); color: var(--blue-mid); border-color: var(--line-strong); }
.btn-line:not(:disabled):hover { border-color: var(--teal); background: var(--teal-050); color: var(--teal-700); }
.btn-quiet { background: transparent; color: var(--text-soft); padding-left: 8px; padding-right: 8px; }
.btn-quiet:hover { color: var(--ink); }
/* variante outline per contesti navy (hero, command bar) */
.btn-outline {
background: transparent;
border-color: rgba(255,255,255,.32);
color: rgba(255,255,255,.9);
}
.btn-outline:not(:disabled):hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.56);
}
.btn-sm { padding: 9px 15px; font-size: var(--t-xs); }
.btn-full { width: 100%; }
/* link di testo con freccia: alternativa leggera al secondo pulsante */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--t-sm);
font-weight: 640;
color: var(--blue);
background: none;
border: 0;
padding: 13px 0;
cursor: pointer;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover svg { transform: translateX(3px); }
/* campi: label sempre visibile, nessun placeholder come unica etichetta */
.field { display: grid; gap: var(--s2); }
.field > label {
font-size: var(--t-xs);
font-weight: 660;
letter-spacing: .02em;
color: var(--ink);
}
.field .hint { font-size: var(--t-xs); color: var(--text-soft); }
.control {
width: 100%;
padding: 12px 14px;
background: var(--surface-elevated);
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
font-size: var(--t-sm);
transition: border-color var(--ease);
}
.control::placeholder { color: var(--line-strong); }
.control:hover { border-color: var(--blue-mid); }
.control-mono { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.req { color: var(--alert); }
.control:focus { outline: 0; border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(28,37,65,.10); }
.control.error { border-color: var(--alert); }
.control.error:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.10); }
.field-error {
display: none;
font-size: var(--t-xs);
color: var(--alert);
align-items: center;
gap: var(--s1);
margin-top: 2px;
}
.field-error:not([hidden]) { display: flex; }
/* stepper quantita */
.stepper {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
background: var(--paper);
overflow: hidden;
}
.stepper button {
width: 30px;
border: 0;
background: none;
color: var(--blue);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--ease), color var(--ease);
}
.stepper button:hover:not(:disabled) { background: var(--tint); }
.stepper button:disabled { color: var(--line-strong); cursor: not-allowed; }
.stepper button svg { width: 11px; height: 11px; stroke-width: 2.6; }
.stepper input {
width: 46px; height: 34px;
border: 0; border-inline: 1px solid var(--line);
text-align: center;
font-size: var(--t-sm); font-weight: 660;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
background: var(--paper);
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.icon-btn {
width: 40px; height: 40px; flex: none;
border: 1px solid transparent;
border-radius: var(--r-xs);
background: none;
color: var(--text-soft);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { color: var(--ink); background: var(--paper-2); }
.icon-btn-danger:hover { color: var(--alert); background: var(--alert-tint); border-color: #EBBDBD; }
/* ==========================================================================
4-bis. BARRA DI LETTURA
========================================================================== */
.read-bar {
position: fixed; top: 0; left: 0;
height: 3px; width: 100%; z-index: 200;
pointer-events: none;
}
.read-bar span {
display: block; height: 100%; width: 100%;
background: linear-gradient(90deg, var(--teal), var(--mint));
transform-origin: left center;
transform: scaleX(0);
transition: transform 160ms linear;
}
/* ==========================================================================
5. HEADER
========================================================================== */
.masthead {
position: sticky; top: 0; z-index: 120;
background: var(--navy);
border-bottom: 1px solid rgba(255,255,255,.09);
transition: box-shadow var(--t-2), background var(--t-2);
}
.masthead.is-scrolled {
box-shadow: 0 4px 24px rgba(0,0,0,.32);
background: rgba(var(--navy-rgb),.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.masthead-inner {
max-width: var(--wrap); margin: 0 auto;
padding: 0 var(--pad);
height: var(--head);
display: flex; align-items: center; gap: var(--s4);
min-width: 0;
}
/* Su viewport strettissimi (<360) impedisco flex overflow */
@media (max-width: 360px) {
.masthead-inner { gap: var(--s2); padding: 0 var(--s3); }
.mh-logo img { height: 22px; }
}
/* Logo */
.mh-logo { flex: none; display: flex; align-items: center; }
.mh-logo img { height: 30px; width: auto; }
.mh-logo:focus-visible { outline: 2px solid rgba(var(--mint-rgb),.7); outline-offset: 3px; border-radius: 4px; }
/* Identificatore editoriale — discreto, tono istituzionale */
.mh-app {
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
/* .40 dava 3,8:1 sul fondo dell'header, sotto il minimo di 4,5:1 */
color: rgba(255,255,255,.50);
padding-left: var(--s3);
border-left: 1px solid rgba(255,255,255,.14);
white-space: nowrap;
line-height: 1;
}
/* Navigazione destra */
.mh-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
/* Link navigazione — gerarchia per elemento: a (Torna) < button (Recupera) */
.mh-link {
display: inline-flex; align-items: center; gap: var(--s2);
padding: var(--s2) var(--s3);
min-height: 44px;
border: 0; background: none;
border-radius: var(--r-xs);
font-size: var(--t-micro); font-weight: 500;
letter-spacing: .01em;
white-space: nowrap; cursor: pointer;
transition: color var(--t-1), background var(--t-1);
}
/* era .36, cioe 3,3:1: sotto il minimo, e piu spento del bottone accanto
che e un collegamento dello stesso rango. Ora sono pari. */
a.mh-link { color: rgba(255,255,255,.58); }
button.mh-link { color: rgba(255,255,255,.58); }
.mh-link:hover { color: rgba(255,255,255,.88); background: rgba(255,255,255,.06); text-decoration: none; }
.mh-link:active { background: rgba(255,255,255,.04); }
.mh-link:focus-visible { outline: 2px solid rgba(var(--mint-rgb),.7); outline-offset: 2px; }
.mh-link svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.mh-link:hover svg { opacity: 1; }
/* Dark mode toggle (D): icona sole/luna swap in base a data-theme sull'html.
Cursore + hover coerenti con gli altri mh-link. */
.mh-theme {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 0; background: none;
border-radius: 999px;
color: rgba(255,255,255,.58);
cursor: pointer;
transition: color var(--t-1), background var(--t-1), transform 260ms var(--e-out-quart);
position: relative;
}
.mh-theme:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.08); }
.mh-theme:active { transform: scale(.94); }
.mh-theme:focus-visible { outline: 2px solid rgba(var(--mint-rgb),.7); outline-offset: 2px; }
.mh-theme svg { position: absolute; width: 18px; height: 18px; transition: opacity 260ms var(--e-out), transform 260ms var(--e-out-quart); }
/* Light theme: mostra la luna (per suggerire "vai a dark"). Dark: mostra il sole. */
.mh-theme .mh-theme-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.mh-theme .mh-theme-moon { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .mh-theme .mh-theme-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .mh-theme .mh-theme-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-reduced-motion: reduce) {
.mh-theme svg { transition: opacity var(--t-1); transform: none !important; }
}
/* Bundle: mini-cart professionale */
.mh-bundle {
display: inline-flex; align-items: center; gap: var(--s2);
margin-left: var(--s4);
padding: var(--s2) var(--s4);
min-height: 44px;
border: 1px solid rgba(255,255,255,.24);
border-radius: var(--r-xs);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
font-size: var(--t-micro); font-weight: 600;
letter-spacing: .02em;
cursor: pointer; white-space: nowrap;
transition: background var(--t-1), border-color var(--t-1), color var(--t-1), transform var(--t-1);
}
.mh-bundle:hover {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.36);
color: #fff;
}
.mh-bundle:active { background: rgba(255,255,255,.07); }
.mh-bundle:focus-visible { outline: 2px solid rgba(var(--mint-rgb),.7); outline-offset: 2px; }
.mh-bundle svg { width: 15px; height: 15px; flex: none; opacity: .80; }
.mh-bundle:hover svg { opacity: 1; }
/* Badge contatore bundle */
#bundleCount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 4px;
border-radius: 9px;
background: rgba(255,255,255,.14);
font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.90);
line-height: 1;
transition: background var(--t-1);
}
.mh-bundle:hover #bundleCount { background: rgba(255,255,255,.22); }
/* 3 stati coerenti con il progresso della configurazione:
- default (0 prodotti): superficie navy semi-trasparente
- .filled (>0, sotto soglia): outline teal + accento tenue (in corso)
- .filled.soglia-ok (>0, soglia raggiunta): solid teal + check icon */
.mh-bundle.filled {
background: rgba(var(--teal-rgb),.14);
border-color: rgba(var(--teal-rgb),.5);
color: #fff;
}
.mh-bundle.filled:hover {
background: rgba(var(--teal-rgb),.22);
border-color: var(--teal);
}
.mh-bundle.filled #bundleCount {
background: var(--teal);
color: var(--on-teal);
}
.mh-bundle.filled.soglia-ok {
background: var(--teal);
border-color: var(--teal);
color: var(--on-teal);
}
.mh-bundle.filled.soglia-ok:hover {
background: var(--teal-600);
border-color: var(--teal-600);
}
.mh-bundle.filled.soglia-ok #bundleCount { background: rgba(0,0,0,.20); color: #fff; }
.mh-bundle .mh-bundle-check {
display: none;
width: 14px; height: 14px;
flex: none;
}
.mh-bundle.filled.soglia-ok .mh-bundle-check { display: inline-block; }
/* Filo di avanzamento sotto l'header: mostra il passo raggiunto */
.mh-progress { height: 2px; background: rgba(255,255,255,.08); }
.mh-progress span {
display: block; height: 100%; width: 100%;
transform-origin: left;
transform: scaleX(0);
background: linear-gradient(90deg, var(--teal), var(--mint));
transition: transform 320ms cubic-bezier(.32,.72,.35,1);
}
/* ==========================================================================
6. HERO — V8 PREMIUM: immagine full-bleed con dissolve navy
========================================================================== */
.hero {
background: var(--navy);
overflow: hidden;
position: relative;
min-height: 78vh;
display: flex;
flex-direction: column;
}
/* Immagine: assoluta, copre tutta la hero come sfondo cinematico */
.hero-visual {
position: absolute;
inset: 0;
margin: 0;
z-index: 1;
pointer-events: none;
}
.hero-visual .hero-img-wrap {
height: 100%;
will-change: transform;
}
.hero-visual .hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
/* 16% 65%: ancora più a sinistra e più in basso, massimo focus su PC+dock */
object-position: 16% 65%;
display: block;
}
/* Dissolve a tre strati calibrato sull'immagine chiara con finestra a sinistra */
.hero-visual::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
/* Sinistra → destra: navy pieno copre la finestra luminosa, dissolve sulla scrivania scura */
linear-gradient(104deg,
var(--navy) 0%,
var(--navy) 28%,
rgba(var(--navy-rgb),.96) 38%,
rgba(var(--navy-rgb),.72) 50%,
rgba(var(--navy-rgb),.28) 62%,
rgba(var(--navy-rgb),.12) 72%,
transparent 82%
),
/* Dal basso: assicura leggibilità della striscia 01/02/03 */
linear-gradient(to top,
var(--navy) 0%,
rgba(var(--navy-rgb),.88) 8%,
rgba(var(--navy-rgb),.48) 18%,
transparent 34%
),
/* Dall'alto: ammorbidisce il bordo superiore */
linear-gradient(to bottom,
rgba(var(--navy-rgb),.44) 0%,
transparent 16%
);
}
/* Contenuto: colonna singola, allineata a sinistra */
.hero-inner {
position: relative;
z-index: 2;
max-width: var(--wrap);
width: 100%;
margin: 0 auto;
padding: clamp(76px, 12vh, 108px) var(--pad) 0;
flex: 1;
}
.hero-copy {
max-width: 560px;
padding-bottom: var(--s9);
}
.hero-copy h1 {
margin: var(--s3) 0 var(--s4);
max-width: 15ch;
color: #ffffff;
font-family: var(--display-serif);
font-weight: 400;
font-size: clamp(38px, 4.4vw, 54px);
letter-spacing: -0.022em;
line-height: 1.08;
/* balance + max-width 15ch obbligano due righe editoriali equilibrate:
l'ultima parola ("MePA") non resta mai orfana. */
text-wrap: balance;
/* alleggerito rispetto al 0 2px 36px + 0 1px 8px iniziale: mantiene la leggibilità
sulla foto ma riduce la sensazione "flou". */
text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 6px rgba(0,0,0,.24);
}
.hero .kicker {
color: var(--mint);
display: inline-flex; align-items: center; gap: var(--s3);
text-transform: none;
letter-spacing: .04em;
font-size: var(--t-xs);
text-shadow: 0 1px 14px rgba(0,0,0,.42);
}
.hero .kicker::before {
content: '';
width: 20px; height: 1px;
background: var(--teal);
flex: none;
}
.hero .lede {
color: rgba(255,255,255,.76);
max-width: 48ch;
line-height: 1.58;
text-shadow: 0 1px 18px rgba(0,0,0,.38);
}
.hero-actions {
display: flex;
align-items: center;
gap: var(--s5);
margin-top: var(--s6);
flex-wrap: wrap;
}
/* CTA primario: pieno, teal, grande, con glow */
.hero-cta-primary {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s4) var(--s6);
background: var(--teal);
color: var(--on-teal);
font-size: var(--t-base);
font-weight: 700;
font-family: var(--sans);
letter-spacing: -0.005em;
line-height: 1;
border: none;
border-radius: var(--r-xs);
text-decoration: none;
cursor: pointer;
box-shadow: 0 2px 10px rgba(var(--teal-rgb),.14);
transition: background var(--t-2), box-shadow var(--t-2), transform 200ms var(--e-out-quart);
}
.hero-cta-primary:hover {
background: var(--teal-600);
box-shadow: 0 0 0 3px rgba(var(--teal-rgb),.26), 0 8px 24px rgba(var(--teal-rgb),.20);
transform: translateY(-1px);
}
.hero-cta-primary:active { transform: translateY(0); box-shadow: none; }
/* Freccia animata nel CTA primario */
.cta-arrow {
width: 14px; height: 14px; flex: none;
transition: transform 240ms var(--e-out-quart);
}
.hero-cta-primary:hover .cta-arrow { transform: translateX(3px); }
.hero-cta-primary:focus-visible {
outline: 2px solid rgba(var(--mint-rgb),.8);
outline-offset: 3px;
box-shadow: 0 0 0 3px rgba(var(--teal-rgb),.26), 0 8px 24px rgba(var(--teal-rgb),.20);
}
/* CTA secondario: testo fantasma, subordinato visivamente */
.hero-cta-secondary {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) 0;
background: transparent;
/* .65: leggibile ma resta chiaramente ghost/subordinato al primary teal.
Freccia stessa opacity: si legge senza rubare protagonismo. */
color: rgba(255,255,255,.68);
font-size: var(--t-xs);
font-weight: 500;
font-family: var(--sans);
letter-spacing: -0.003em;
border: none;
cursor: pointer;
text-decoration: none;
transition: color var(--t-2);
line-height: 1;
}
.hero-cta-secondary svg { width: 13px; height: 13px; flex-shrink: 0; }
.hero-cta-secondary:hover { color: rgba(255,255,255,.92); }
.hero-cta-secondary:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 3px; border-radius: 3px; }
/* Stat floating bottom-right dell'hero: "N prodotti IT a catalogo MePA".
Ambient signal editoriale, si vede subito senza scroll. Poggia sul dissolve
navy della hero, quindi testo bianco a piena leggibilità. Su mobile
(<720px) si sgancia dal position:absolute e si impila sotto le CTA. */
.hero-stat {
position: absolute;
right: clamp(20px, 4vw, 56px);
bottom: clamp(20px, 4vw, 48px);
z-index: 3;
display: inline-flex;
align-items: flex-end;
gap: var(--s3);
color: #ffffff;
pointer-events: none; /* è ambient, non interattivo */
}
.hero-stat-num {
font-family: var(--display-serif);
font-weight: 400;
font-size: clamp(56px, 7.4vw, 96px);
line-height: 0.86;
letter-spacing: -0.035em;
color: #ffffff;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "ss01" 1;
text-shadow: 0 2px 22px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.28);
}
.hero-stat-lbl {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding-bottom: 8px; /* aligns roughly to descender of numeric */
color: rgba(255,255,255,.78);
font-size: var(--t-xs);
font-weight: 500;
letter-spacing: .04em;
line-height: 1.2;
text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero-stat-lbl-line { display: block; }
.hero-stat-lbl-line:first-child {
/* prima riga (verbo del claim) accentata: mint per legame con brand */
color: var(--mint);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
font-size: 11px;
}
@media (max-width: 720px) {
.hero-stat {
position: relative;
right: auto; bottom: auto;
margin: var(--s5) var(--pad) var(--s6);
z-index: 2;
}
.hero-stat-num { font-size: clamp(48px, 14vw, 72px); }
}
/* Benefits: conclusione della hero — workflow in tre passi scansionabili */
.hero-benefits {
position: relative;
z-index: 2;
max-width: var(--wrap);
width: 100%;
margin: 0 auto;
padding: 0 var(--pad);
border-top: 1px solid rgba(255,255,255,.10);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.benefit {
padding: 24px var(--s7) 28px 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.benefit:first-child { padding-left: 0; }
.benefit + .benefit {
padding-left: var(--s7);
border-left: 1px solid rgba(255,255,255,.10);
}
/* Numero: label teal discreta, contestualizza il passo */
.benefit-n {
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
line-height: 1;
}
/* Titolo: elemento visivo principale — serif per continuità con la H1 */
.benefit-title {
font-family: var(--display-serif);
font-weight: 400;
font-size: clamp(20px, 1.9vw, 24px);
color: #fff;
line-height: 1.1;
letter-spacing: -0.014em;
margin: 0;
}
/* Descrizione: supporto discreto, non in competizione col titolo */
.benefit-desc {
font-size: var(--t-xs);
color: rgba(255,255,255,.48);
margin: 0;
line-height: 1.42;
}
/* ==========================================================================
7. RIGA INFORMATIVA
========================================================================== */
.noteline {
border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
.noteline-inner {
max-width: var(--wrap); margin: 0 auto;
padding: var(--s3) var(--pad);
display: flex; align-items: center; gap: var(--s2) var(--s5);
flex-wrap: wrap;
font-size: var(--t-xs);
line-height: 1.5;
/* --text (~11:1 su paper-2) AAA anche a 13px */
color: var(--text);
letter-spacing: .01em;
}
.noteline b { color: var(--ink); font-weight: 660; }
.noteline-key { color: var(--ink); }
.noteline-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex: none; align-self: center; }
/* ==========================================================================
7-bis. VALUE STRIP — 3 benefit sotto la hero
Sfondo bianco per un contrasto pulito con la hero navy, filetto teal
sopra come segno di continuita col brand, filetto sotto in ink per
introdurre la noteline informativa.
========================================================================== */
.value-strip {
background: var(--paper);
border-top: 1px solid var(--line);
padding: var(--s7) 0 var(--s6);
position: relative;
}
.value-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s7);
list-style: none;
margin: 0; padding: 0;
}
.value-item {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: var(--s3);
align-items: start;
}
.value-ico {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--paper-3);
color: var(--blue-mid);
display: grid; place-items: center;
flex: none;
margin-top: 1px;
}
.value-ico svg { width: 18px; height: 18px; }
.value-copy { min-width: 0; }
.value-eyebrow {
display: block;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-soft);
margin-bottom: var(--s1);
line-height: 1;
}
.value-title {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 660;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.2;
margin: 0 0 var(--s2);
}
.value-desc {
font-size: var(--t-sm);
line-height: 1.55;
color: var(--text);
max-width: 38ch;
margin: 0;
}
.value-desc b { color: var(--ink); font-weight: 660; }
@media (max-width: 960px) {
.value-list { grid-template-columns: 1fr; gap: var(--s6); }
.value-strip { padding: var(--s7) 0 var(--s6); }
}
@media (max-width: 720px) {
.value-ico { width: 40px; height: 40px; }
.value-ico svg { width: 20px; height: 20px; }
.value-title { font-size: var(--t-md); }
}
/* ==========================================================================
8. "COME FUNZIONA" — workflow orizzontale connesso
========================================================================== */
.flow {
padding: var(--s8) 0 var(--s9);
position: relative;
}
.flow::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.flow::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
/* Header editoriale: kicker + titolo grande. Nessun border-top: la linea
gradient in .flow::before gia definisce il confine superiore della sezione. */
.flow-header {
margin-bottom: var(--s7);
display: grid;
gap: var(--s3);
}
.flow-h2 {
font-family: var(--display);
font-size: var(--t-2xl);
font-weight: 660;
color: var(--ink);
letter-spacing: -0.018em;
line-height: 1.1;
max-width: 24ch;
margin: 0;
}
@media (max-width: 720px) {
.flow-h2 { font-size: var(--t-xl); }
}
/* Track: contenitore relativo per gli step. La linea connettiva orizzontale
e stata rimossa con il passaggio a layout editoriale left-aligned: i tre
step si allineano al top su una griglia comune, il numero 64px in serif
fa da ancora visiva, non serve una linea grafica. */
.flow-track {
position: relative;
padding-top: var(--s3);
}
/* Lista: tre colonne centrate + linea connettiva sottile sopra i tre numeri.
Non e' una linea grafica ovvia: e' una hairline che si dissolve ai bordi,
comunica visivamente che i 3 step appartengono allo stesso workflow senza
diventare cornice o box. */
.flow-seq {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
margin: 0; padding: 0;
position: relative;
z-index: 1;
}
.flow-seq::before {
content: '';
position: absolute;
top: 0;
left: 3%;
right: 3%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--teal-200) 12%,
var(--teal-200) 88%,
transparent 100%);
pointer-events: none;
}
@media (max-width: 640px) {
.flow-seq::before { display: none; }
}
/* Step editoriale: numero grande, kicker, titolo, descrizione */
.flow-step {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0 var(--s4) var(--s2) 0;
transition: transform 260ms var(--e-out);
}
/* Ultima colonna senza padding-right per bilanciare la griglia */
.flow-seq > .flow-step:last-child { padding-right: 0; }
/* Numero: display serif molto grande */
.flow-n {
display: block;
font-family: var(--display);
font-size: var(--t-numeral);
font-weight: 660;
letter-spacing: -0.03em;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: var(--s4);
transition: color 220ms var(--e-out);
user-select: none;
}
/* Kicker verb: SCEGLI / CONFIGURA / GENERA */
.flow-verb {
display: block;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-soft);
line-height: 1.1;
margin-bottom: var(--s2);
transition: color 220ms var(--e-out);
}
/* Titolo dello step: serif, prominente */
.flow-title {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 660;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.2;
margin: 0 0 var(--s2);
transition: color 220ms var(--e-out);
}
/* Accent line teal sotto il titolo: si espande all'hover.
V10 polish: da width → transform: scaleX per GPU composite-only, niente
layout reflow. transform-origin left mantiene l'ancoraggio a sinistra. */
.flow-accent {
display: block;
height: 2px;
width: 44px;
background: var(--line-strong);
border-radius: 1px;
margin: 0 0 var(--s4);
transform: scaleX(0.5);
transform-origin: left center;
transition: transform 260ms var(--e-out), background 220ms var(--e-out);
}
/* Descrizione */
.flow-caption {
display: block;
font-size: var(--t-sm);
color: var(--text);
line-height: 1.55;
max-width: 38ch;
margin: 0;
transition: color 220ms var(--e-out);
}
/* Hover: micro-interazione enterprise premium */
@media (hover: hover) {
.flow-step:hover { transform: translateY(-3px); }
.flow-step:hover .flow-n { color: var(--navy); }
.flow-step:hover .flow-verb { color: var(--teal-700); }
.flow-step:hover .flow-title { color: var(--navy); }
.flow-step:hover .flow-accent { transform: scaleX(1); background: var(--teal); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.flow-step, .flow-n, .flow-verb,
.flow-caption, .flow-accent { transition: none; }
}
/* Mobile: workflow verticale con separatore filo tra gli step */
@media (max-width: 720px) {
.flow-n { font-size: 48px; margin-bottom: var(--s3); }
.flow-title { font-size: var(--t-md); }
}
@media (max-width: 640px) {
.flow-seq { grid-template-columns: 1fr; gap: var(--s6); }
.flow-step {
padding: var(--s5) 0 0;
border-top: 1px solid var(--line);
}
.flow-step:first-child { border-top: 0; padding-top: 0; }
.flow-seq > .flow-step { padding-right: 0; }
.flow-caption { max-width: none; }
}
/* 9. FASCIA BRAND — vedi regole aggiornate in fondo al foglio */
/* ==========================================================================
10. CONFIGURATORE E INDICATORE DI PASSO
========================================================================== */
/* .tool / .tool-head — vedi regole aggiornate in fondo al foglio */
.steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
margin-bottom: var(--s5);
}
.step {
position: relative;
padding-top: var(--s3);
border-top: 3px solid var(--line);
display: grid; gap: var(--s2);
transition: border-color var(--t-2);
cursor: pointer;
}
.step:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 4px;
border-radius: 2px;
}
.step-n {
font-size: var(--t-lg); font-weight: 700;
letter-spacing: .06em; color: var(--text-soft);
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.step-name { font-size: var(--t-base); font-weight: 640; color: var(--text-soft); letter-spacing: -.002em; }
.step.on { border-top-color: var(--ink); border-top-width: 4px; cursor: default; }
.step.on .step-n { color: var(--teal-700); }
.step.on .step-name { color: var(--ink); }
.step.was {
/* Step visitato: linea teal piena a 4px per allineare la resa visiva
con .step.on. La linea segnala progresso, non e' solo separatore. */
border-top-color: var(--teal);
border-top-width: 4px;
}
.step.was .step-n {
color: var(--teal-700);
display: flex; align-items: center; gap: var(--s1);
}
.step.was .step-n::after {
content: '';
display: inline-block;
width: 8px; height: 5px;
border-left: 1.8px solid var(--teal-600);
border-bottom: 1.8px solid var(--teal-600);
transform: rotate(-48deg) translateY(-1px);
}
.step.was .step-name { color: var(--teal-700); }
.step.was:hover .step-n, .step.was:hover .step-name { color: var(--teal-600); }
/* step futuro non ancora visitato — hover leggero per segnalare cliccabilità */
@media (hover: hover) {
.step:not(.on):not(.was):hover { border-top-color: var(--line-strong); }
.step:not(.on):not(.was):hover .step-n { color: var(--text); }
.step:not(.on):not(.was):hover .step-name { color: var(--ink); }
}
.panel { display: none; }
.panel.on {
display: block;
animation: panelIn 260ms var(--e-out) both;
}
@keyframes panelIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.panel.on { animation: none; }
}
.panel-ask {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--s6); flex-wrap: wrap;
margin-bottom: var(--s3);
}
/* La domanda del passo e il titolo del passo corrente, quindi sta SOTTO il
titolo dello strumento: prima erano due h2 entrambi a 30px a 164px di
distanza, e quello serif, che l'occhio legge come piu importante, era
quello di livello piu basso. Ora e sans e piu piccola, e la gerarchia
si legge: 54 serif per la hero, 34 per le sezioni, 30 per lo strumento,
22 per il passo. Il serif resta solo dove apre una superficie: la hero e
le finestre di dialogo. */
.panel-ask h2 {
margin: 0;
font-family: var(--sans);
font-weight: 650;
font-size: clamp(19px, 1.9vw, 22px);
line-height: 1.24;
letter-spacing: -0.012em;
max-width: 34ch;
}
.panel-ask p { font-size: var(--t-sm); color: var(--text-soft); margin: var(--s2) 0 0; max-width: 56ch; line-height: 1.5; }
.panel-foot {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap;
margin-top: var(--s8);
padding-top: var(--s6);
border-top: 1px solid var(--line);
}
/* Step 1: il bottone "Scegli i prodotti" resta sticky in fondo al viewport
mentre l'utente scorre la griglia categorie (lunga con 23 voci). Bottom si
solleva sopra la commandbar mobile quando presente. Su desktop >=1200px la
commandbar e' nascosta, il bottone puo' aderire al fondo. */
#panel1 > .panel-foot {
position: sticky;
bottom: 0;
z-index: 90;
background: var(--paper);
padding-bottom: var(--s5);
box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, .12);
}
body.with-commandbar #panel1 > .panel-foot { bottom: 74px; }
@media (min-width: 1200px) {
body.with-commandbar #panel1 > .panel-foot { bottom: 0; }
}
.panel-foot-status {
display: flex; align-items: center; gap: var(--s3);
font-size: var(--t-xs); color: var(--text-soft);
}
.panel-foot-status strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.kbd {
display: inline-flex; align-items: center; justify-content: center;
padding: 1px 5px; min-width: 20px;
background: var(--paper); border: 1px solid var(--line-strong);
border-radius: 4px; font-family: var(--mono);
font-size: 10px; color: var(--text-soft);
box-shadow: 0 1px 0 var(--line-strong);
user-select: none;
}
/* Nota sostenibilità: mostrata sopra la griglia categorie nel passo 01 */
.eco-note {
display: flex; align-items: flex-start; gap: var(--s3);
margin: 0 0 var(--s5);
padding: var(--s4) var(--s5);
background: var(--teal-050);
border: 1px solid rgba(var(--teal-rgb), .22);
border-radius: var(--r-md);
font-size: var(--t-sm);
color: var(--text);
line-height: 1.55;
}
.eco-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal-700); }
.eco-note strong { color: var(--teal-700); }
/* Nota ergonomia: stessa struttura della nota sostenibilità, tinta blu per distinguerla */
.ergo-note {
display: flex; align-items: flex-start; gap: var(--s3);
margin: 0 0 var(--s5);
padding: var(--s4) var(--s5);
background: var(--blue-050);
border: 1px solid rgba(var(--blue-ergo-rgb), .22);
border-radius: var(--r-md);
font-size: var(--t-sm);
color: var(--text);
line-height: 1.55;
}
.ergo-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue-ergo-700); }
.ergo-note strong { color: var(--blue-ergo-700); }
/* ==========================================================================
11. CATEGORIE
========================================================================== */
.cat-bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap;
padding-bottom: var(--s3);
margin-bottom: 0;
margin-top: 0;
}
.cat-bar-count { font-size: var(--t-sm); color: var(--text-soft); }
/* ==========================================================================
11. CATEGORIE — V7: index fotografico con immagini 4:3
========================================================================== */
.cat-index {
display: grid;
/* auto-fill: numero colonne dinamico. Min 240px = 5 colonne su desktop 1240px
(15 categorie in 3 righe), thumb ancora leggibile senza scroll aggressivo. */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: var(--sh-1);
}
/* Skeleton placeholder mentre allProducts si carica. Sparisce alla prima
render (renderCats sostituisce l'innerHTML del contenitore). Non blocca
il layout: mantiene lo stesso aspect ratio della card reale. */
.cat-cell-sk {
aspect-ratio: 3/2;
background:
linear-gradient(90deg,
var(--paper-2) 0%,
var(--paper-3) 50%,
var(--paper-2) 100%);
background-size: 200% 100%;
animation: skPulse 1.4s ease-in-out infinite;
}
@keyframes skPulse {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.cat-cell-sk { animation: none; background: var(--paper-2); }
}
.cat-index[aria-busy="true"] { pointer-events: none; }
.cat-cell {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-elevated);
text-align: left;
border: 0;
cursor: pointer;
padding: 0;
/* Evita zoom su double-tap mobile, riduce delay 300ms su alcuni browser */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background var(--ease);
}
.cat-cell::before {
content: "";
position: absolute; inset: 0 auto 0 0;
width: 3px; background: transparent;
transition: background var(--ease);
z-index: 1;
}
.cat-cell:hover { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--teal-200); }
.cat-cell:active { transform: scale(.998); }
/* Area fotografica: container 5:3 (leggermente più orizzontale del 3:2 sorgente
480x320, per card più compatte verticalmente). Object-fit cover: il ritaglio
verticale è minimo (~5%), il framing resta riconoscibile. */
.cat-thumb {
display: block;
aspect-ratio: 5/3;
overflow: hidden;
background: var(--paper);
position: relative;
flex: none;
padding: 0;
}
.cat-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-3), filter var(--t-2);
}
.cat-cell:hover .cat-thumb img {
transform: scale(1.035);
}
.cat-cell[aria-pressed="true"] .cat-thumb img {
filter: brightness(1.03) saturate(1.08);
}
/* overlay teal quando selezionata — leggero, non invasivo */
.cat-cell[aria-pressed="true"] .cat-thumb::after {
content: '';
position: absolute; inset: 0;
background: rgba(var(--teal-rgb),.16);
pointer-events: none;
border-radius: 5px;
}
/* SVG fallback */
.cat-ico-svg {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.cat-ico-svg svg { width: 40px; height: 40px; stroke-width: 1.2; color: var(--text-soft); }
/* Testo sotto la foto — categoria prominente, contatore metadata secondario */
.cat-info {
padding: var(--s3) var(--s4);
display: flex;
flex-direction: column;
gap: 2px;
flex: 0 0 auto;
border-top: 1px solid var(--line);
transition: background var(--ease), box-shadow var(--ease);
}
.cat-name {
font-size: var(--t-base); font-weight: 660;
color: var(--ink); line-height: 1.2;
letter-spacing: -0.008em;
}
.cat-n {
font-size: var(--t-micro);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
line-height: 1.35;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
/* checkmark nell'angolo in alto a destra, sovrapposto alla foto */
/* La casella sta sopra una fotografia, quindi non puo dipendere da cosa c'e
sotto: prima era un bordo bianco al 72% su riempimento bianco al 18%, e su
9 delle 15 tessere scendeva sotto il 3:1 richiesto per il contorno di un
comando (la peggiore a 1,63:1, sopra una foto chiara). Ora il riempimento
e navy quasi opaco e il bordo bianco pieno: il contorno si legge sempre,
sopra una foto chiara come sopra una scura, senza dipendere dall'immagine. */
.cat-mark {
position: absolute; top: var(--s3); right: var(--s3);
width: 20px; height: 20px;
/* stato vuoto: bianco pieno con contorno navy. Il navy pieno leggeva
come casella GIA spuntata, che e il segnale opposto a quello giusto.
Bianco dentro e navy fuori danno un contorno che si percepisce sopra
qualunque fotografia, chiara o scura, e dicono "vuoto". */
border: 2px solid var(--navy);
border-radius: 5px;
background: #fff;
box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
display: grid; place-items: center;
transition: background var(--ease), border-color var(--ease);
z-index: 2;
}
.cat-mark svg { width: 11px; height: 11px; opacity: 0; color: #fff; stroke-width: 3; }
/* stato selezionato — segnale chiaro, non rumoroso */
.cat-cell[aria-pressed="true"]::before { background: var(--teal); }
.cat-cell[aria-pressed="true"] .cat-info { background: #e8f9f2; }
.cat-cell[aria-pressed="true"] .cat-name { color: var(--navy); font-weight: 660; }
.cat-cell[aria-pressed="true"] .cat-mark {
background: var(--teal); border-color: var(--teal);
}
.cat-cell[aria-pressed="true"] .cat-mark svg { opacity: 1; }
/* focus tastiera esplicito: fallback :where globale non è abbastanza visibile su card chiare */
.cat-cell:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(var(--teal-rgb),.14);
}
.cat-cell:focus-visible::before { background: var(--teal); }
/* ==========================================================================
12. CATALOGO PRODOTTI
========================================================================== */
.shelf { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s9); align-items: start; }
.shelf-main { min-width: 0; }
/* Mini-bundle sticky desktop (>=1280px). Sotto, la command bar bottom lo sostituisce. */
.mini-bundle { display: none; }
@media (min-width: 1200px) {
.shelf { grid-template-columns: 232px minmax(0, 1fr) 292px; }
.mini-bundle {
display: flex;
flex-direction: column;
position: sticky;
top: calc(var(--head) + 20px);
max-height: calc(100vh - var(--head) - 40px);
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
box-shadow: var(--sh-1);
overflow: hidden;
}
.mini-bundle-head {
padding: var(--s4) var(--s5);
border-bottom: 1px solid var(--line);
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s3);
}
.mini-bundle-head h3 { font-size: var(--t-md); }
.mini-bundle-head .mb-n { font-size: var(--t-xs); color: var(--text-soft); font-weight: 660; }
.mini-bundle-body {
flex: 1;
overflow-y: auto;
padding: var(--s3) var(--s5);
scrollbar-width: thin;
}
.mini-bundle-empty {
padding: var(--s6) var(--s5);
text-align: center;
color: var(--text-soft);
font-size: var(--t-sm);
display: grid;
gap: var(--s2);
}
.mini-bundle-empty svg { width: 26px; height: 26px; margin: 0 auto var(--s2); color: var(--line-strong); }
.mini-bundle-line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
padding: var(--s3) 0;
border-bottom: 1px dashed var(--line);
gap: 4px 8px;
font-size: var(--t-xs);
}
.mini-bundle-line:last-child { border-bottom: 0; }
.mini-bundle-line .mb-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-bundle-line .mb-code { color: var(--text-soft); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .04em; }
.mini-bundle-line .mb-qty { color: var(--text); grid-column: 1; }
.mini-bundle-line .mb-sub { color: var(--ink); font-weight: 660; grid-column: 2; text-align: right; }
.mini-bundle-foot {
padding: var(--s4) var(--s5);
border-top: 1px solid var(--ink);
background: var(--paper-2);
}
.mini-bundle-foot .mb-tot-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--s2);
}
.mini-bundle-foot .mb-tot-lbl { font-size: var(--t-xs); font-weight: 660; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.mini-bundle-foot .mb-tot-val { font-size: var(--t-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-bundle-foot .mb-cta { width: 100%; margin-top: var(--s3); }
.mini-bundle-foot .mb-thr { font-size: var(--t-micro); color: var(--text-soft); text-align: center; margin-top: var(--s2); }
/* C11: budget inline in Step 2 — feedback residuo/eccedenza in tempo reale.
Filetto sopra + label eyebrow + valore che cambia colore in base allo stato. */
.mini-bundle-foot .mb-budget {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s2);
margin: var(--s3) 0 var(--s1);
padding-top: var(--s3);
border-top: 1px dashed var(--line-strong);
font-size: var(--t-xs);
}
.mini-bundle-foot .mb-budget-lbl {
font-weight: 660;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-soft);
}
.mini-bundle-foot .mb-budget-val {
font-variant-numeric: tabular-nums;
font-weight: 660;
white-space: nowrap;
text-align: right;
}
.mini-bundle-foot .mb-budget-ok .mb-budget-val { color: var(--ok, var(--teal-700)); }
.mini-bundle-foot .mb-budget-over .mb-budget-val { color: var(--danger, #b91c1c); }
}
@media (max-width: 1199px) { .mini-bundle { display: none !important; } }
.shelf-bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap;
padding: var(--s4) 0;
border-bottom: 1px solid var(--line);
margin-bottom: var(--s6);
/* Sticky top: la barra strumenti (contatore + Filtri + Ordina) resta
visibile mentre l'utente scorre la lista prodotti, cosi' i filtri si
riaprono senza dover risalire. Il top allinea sotto l'header sticky. */
position: sticky;
top: calc(var(--head) + var(--s2));
z-index: 80;
background: var(--paper);
/* Sfumatura di fondo sotto la border-bottom per staccare visualmente dai
prodotti che scorrono sotto, senza aggiungere una shadow marcata. */
box-shadow: 0 12px 16px -14px rgba(0, 0, 0, .10);
}
.shelf-count { font-size: var(--t-sm); color: var(--text-soft); }
.shelf-count b { color: var(--ink); font-weight: 660; }
.shelf-tools { display: flex; align-items: center; gap: var(--s3); }
/* Density toggle (F3): due iconbutton segmentati per vista schede vs elenco. */
.shelf-density {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line-strong);
border-radius: 999px;
overflow: hidden;
}
.density-btn {
background: transparent;
border: 0;
/* V9.2 a11y: touch target ≥44×44px (WCAG 2.5.5). Padding aumentato,
min-width/height espliciti; visual size resta compatto via SVG. */
padding: 10px 14px;
min-width: 44px;
min-height: 44px;
color: var(--text-soft);
cursor: pointer;
transition: background var(--t-2), color var(--t-2);
display: inline-flex; align-items: center; justify-content: center;
}
.density-btn svg { width: 16px; height: 16px; }
.density-btn:hover { color: var(--ink); background: var(--paper-2); }
.density-btn[aria-pressed="true"] {
background: var(--tint);
color: var(--teal-700);
}
.density-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 720px) {
.shelf-density { order: 3; margin-left: auto; }
}
/* --- Rack dense: vista elenco compatto — cards diventano righe orizzontali --- */
.rack.dense { grid-template-columns: 1fr; gap: var(--s2); }
.rack.dense .item {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-items: center;
gap: var(--s3);
padding: var(--s2) var(--s3);
min-height: 76px;
}
.rack.dense .item-head { display: none; }
.rack.dense .item-stage {
grid-column: 1;
aspect-ratio: 3/2;
min-height: 60px;
max-width: 92px;
margin: 0;
padding: 0;
border-radius: 6px;
overflow: hidden;
background: var(--paper-2);
}
.rack.dense .item-stage.senza-foto { padding: 0; }
.rack.dense .item-stage svg { width: 28px; height: 28px; }
.rack.dense .item-stage img { object-fit: contain; padding: 4px; }
.rack.dense .item-badges { display: none; }
.rack.dense .item-body {
grid-column: 2;
/* V9.2 fix: nested grid con colonne esplicite — nome/meta a sinistra,
prezzo colonna fissa 96px right-aligned, action colonna fissa 172px.
Larghezza costante tra stato "Aggiungi" e stato "nel bundle" (stepper)
→ zero shift del codice/prezzo alla toggling. */
display: grid;
grid-template-columns: minmax(0, 1fr) 96px 172px;
grid-template-rows: auto auto;
column-gap: var(--s4);
row-gap: 2px;
padding: 0;
min-width: 0;
align-items: center;
}
.rack.dense .item-name { grid-column: 1; grid-row: 1; }
.rack.dense .item-meta { grid-column: 1; grid-row: 2; }
.rack.dense .item-name {
font-size: var(--t-sm);
font-weight: 660;
-webkit-line-clamp: 1;
line-height: 1.25;
margin: 0;
}
.rack.dense .item-desc { display: none; }
.rack.dense .item-meta {
margin: 0;
gap: 8px;
font-size: 11px;
}
.rack.dense .item-mq { display: none; }
.rack.dense .item-code {
font-family: var(--mono);
color: var(--text-soft);
}
.rack.dense .item-price {
grid-column: 2;
grid-row: 1 / span 2;
padding: 0;
margin: 0;
border: 0;
text-align: right;
align-self: center;
}
.rack.dense .item-price .amount {
font-family: var(--display-serif);
font-size: 17px;
font-weight: 400;
color: var(--ink);
letter-spacing: -.01em;
white-space: nowrap;
}
/* V9.2 fix: in dense list mode il prezzo usa serif — annulliamo il polish
.amount::first-letter che era pensato per il layout schede/sans e in serif
produce currency sproporzionato. */
.rack.dense .item-price .amount::first-letter {
font-size: inherit;
font-weight: inherit;
color: inherit;
letter-spacing: inherit;
padding-right: 0;
vertical-align: baseline;
}
/* Specificità triplice per battere la base .item-meta .item-code { max-width: 60% } */
.rack.dense .item-meta .item-code {
max-width: none;
}
.rack.dense .item-actions {
grid-column: 3;
grid-row: 1 / span 2;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
.rack.dense .item-actions .btn.btn-line.btn-sm { display: none; }
.rack.dense .item-actions .btn.btn-solid.btn-sm {
padding: 8px 14px;
font-size: 12px;
min-width: 92px;
height: 34px;
}
.rack.dense .item-actions .item-inline-ctrl { gap: 4px; }
.rack.dense .item-actions .stepper { transform: scale(.92); transform-origin: right center; }
.rack.dense .item-flash { display: none; }
.rack.dense .item:hover .item-stage img { transform: none; }
@media (max-width: 720px) {
.rack.dense .item {
grid-template-columns: 60px minmax(0, 1fr);
padding: var(--s2);
}
.rack.dense .item-stage { max-width: 60px; }
/* Mobile: collassa la nested grid — nome full-width row 1, poi meta+prezzo
row 2 (flex space-between), action row 3 full-width right. */
.rack.dense .item-body {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
column-gap: var(--s2);
}
.rack.dense .item-name { grid-column: 1 / span 2; grid-row: 1; }
.rack.dense .item-meta { grid-column: 1; grid-row: 2; }
.rack.dense .item-price {
grid-column: 2; grid-row: 2;
justify-self: end;
align-self: baseline;
}
.rack.dense .item-actions {
grid-column: 1 / span 2; grid-row: 3;
justify-content: flex-end;
margin-top: 4px;
}
}
/* Chip di filtri attivi mostrati sopra il rack */
/* Postilla immagini indicative: nota editoriale sotto la shelf-bar,
discreta ma leggibile. Icona info + testo con enfasi minima sui termini
chiave (indicative, scheda tecnica). */
/* Nota inline discreta: singola riga (o wrap solo se serve) senza box.
Il ritmo verticale del rack non e' interrotto. */
.shelf-caveat {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin: 0 0 var(--s3);
padding: 0;
background: none;
border: 0;
font-size: var(--t-micro);
line-height: 1.5;
color: var(--text-soft);
max-width: 100%;
}
.shelf-caveat svg { width: 13px; height: 13px; flex: none; color: var(--text-soft); }
.shelf-caveat b { color: var(--ink); font-weight: 660; }
.shelf-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0 0 var(--s5);
align-items: center;
}
.shelf-chips[hidden] { display: none; }
.shelf-chips .chip-label {
font-size: var(--t-xs);
font-weight: 660;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-soft);
margin-right: var(--s1);
}
.shelf-chips .chip {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 5px 4px 5px 10px;
border: 1px solid var(--line-strong);
background: var(--paper);
border-radius: 999px;
font-size: var(--t-xs);
font-weight: 600;
color: var(--ink);
cursor: default;
transition: border-color var(--t-2), background var(--t-2);
}
.shelf-chips .chip strong { font-weight: 700; color: var(--teal-700); }
.shelf-chips .chip button {
width: 20px; height: 20px;
border: 0;
background: var(--paper-2);
border-radius: 999px;
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--t-2), color var(--t-2);
}
.shelf-chips .chip button:hover { background: var(--alert-tint); color: var(--alert); }
.shelf-chips .chip button svg { width: 10px; height: 10px; stroke-width: 2.6; }
.shelf-chips .chip:hover { border-color: var(--blue-mid); }
.shelf-chips .chip-clear {
border: 0;
background: transparent;
color: var(--blue-mid);
font-size: var(--t-xs);
font-weight: 660;
padding: 5px 8px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.shelf-chips .chip-clear:hover { color: var(--ink); }
.shelf-sort { display: flex; align-items: center; gap: var(--s2); }
.shelf-sort label { font-size: var(--t-xs); font-weight: 660; color: var(--text-soft); }
.seek-hint {
position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
pointer-events: none;
}
.seek.on .seek-hint { display: none; }
.shelf-sort select {
padding: 8px 11px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
font-size: var(--t-sm);
cursor: pointer;
}
.rack {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--s5);
}
.item {
display: flex; flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-sm);
box-shadow: var(--sh-1);
transition: border-color var(--t-2), box-shadow var(--t-2), transform var(--t-2);
}
.item:hover { border-color: var(--teal-200); box-shadow: 0 0 0 2px var(--teal-100), var(--sh-3); transform: translateY(-2px); }
.item.taken {
border-color: var(--teal);
box-shadow: 0 0 0 2px var(--teal), var(--sh-2);
background: linear-gradient(180deg, #f0fdf8 0%, var(--paper) 52px);
}
.item-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s2);
padding: var(--s4) var(--s5) 0;
}
.item-brand {
/* V9.2 polish: piccolo trattino tipografico prima del vendor per dare
la sensazione di "eyebrow" editoriale — filetto invece che semplice testo. */
position: relative;
padding-left: 14px;
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--blue-mid);
display: inline-flex;
align-items: center;
gap: 4px;
/* Safety per card strette (mobile) con logo + alias + OS badge: se non
entra su una riga, i chip vanno a capo invece di sfondare il layout. */
flex-wrap: wrap;
row-gap: 4px;
}
.item-brand::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 1px;
background: currentColor;
opacity: .5;
transform: translateY(-50%);
}
.item.taken .item-brand { color: var(--teal-700); }
/* V9.2: brand logo al posto del testo. Altezza standardizzata a 14px con
larghezza auto — il logo mantiene aspect ratio nativo. Filtro grayscale
leggero per uniformare i loghi a colori vivaci (Trust) rispetto ai
monocromi (Kensington/Jabra) e coerenza col resto della card. */
.item-brand-has-logo {
padding-left: 12px;
}
.item-brand-has-logo::before {
width: 6px;
}
.item-brand-logo {
height: 14px;
width: auto;
max-width: 90px;
object-fit: contain;
display: block;
filter: grayscale(1) contrast(1.05);
opacity: .88;
transition: filter var(--t-2), opacity var(--t-2);
}
.item:hover .item-brand-logo { filter: grayscale(0); opacity: 1; }
.item.taken .item-brand-logo { filter: none; opacity: 1; }
/* Alcuni loghi hanno proporzioni diverse — normalizziamo caso per caso
così tutti appaiono visivamente della stessa "grandezza percepita". */
.item-brand-logo[alt="Jabra"] { height: 16px; }
.item-brand-logo[alt="Trust"] { height: 14px; }
.item-brand-logo[alt="Philips"] { height: 13px; }
.item-brand-logo[alt="Logitech"] { height: 12px; }
.item-brand-logo[alt="Kensington"] { height: 13px; }
.item-brand-logo[alt="Lenovo"] { height: 13px; }
/* V9.2: Jabra — grayscale attenuato di default (il giallo si intravede),
colore pieno al hover come gli altri brand. Coerente col trattamento
editoriale del rack ma senza spegnere del tutto il brand. */
.item-brand-logo[alt="Jabra"] {
filter: grayscale(.55) contrast(1.05);
opacity: .9;
}
.item:hover .item-brand-logo[alt="Jabra"],
.item.taken .item-brand-logo[alt="Jabra"] {
filter: none;
opacity: 1;
}
:root[data-theme="dark"] .item-brand-logo[alt="Jabra"] {
/* In dark niente invert (farebbe diventare blu il giallo). Attenuato ok. */
filter: grayscale(.5) brightness(1.05);
opacity: .88;
}
:root[data-theme="dark"] .item:hover .item-brand-logo[alt="Jabra"],
:root[data-theme="dark"] .item.taken .item-brand-logo[alt="Jabra"] {
filter: brightness(1.05);
opacity: 1;
}
/* Lenovo (monocromo rosso): stesso trattamento editoriale di Jabra. */
.item-brand-logo[alt="Lenovo"] {
filter: grayscale(.55) contrast(1.05);
opacity: .9;
}
.item:hover .item-brand-logo[alt="Lenovo"],
.item.taken .item-brand-logo[alt="Lenovo"] {
filter: none;
opacity: 1;
}
:root[data-theme="dark"] .item-brand-logo[alt="Lenovo"] {
filter: grayscale(.5) brightness(1.05);
opacity: .88;
}
:root[data-theme="dark"] .item:hover .item-brand-logo[alt="Lenovo"],
:root[data-theme="dark"] .item.taken .item-brand-logo[alt="Lenovo"] {
filter: brightness(1.05);
opacity: 1;
}
/* Dark mode: inverti i loghi scuri per farli leggere sul navy. */
:root[data-theme="dark"] .item-brand-logo {
filter: grayscale(1) invert(1) brightness(1.15) contrast(1.1);
opacity: .85;
}
:root[data-theme="dark"] .item:hover .item-brand-logo,
:root[data-theme="dark"] .item.taken .item-brand-logo {
opacity: 1;
}
/* Badge sotto-categoria: usato quando il prodotto è raggruppato per alias
(es. Accessori Video mostrato dentro Videoconferenza) */
.item-sub-cat {
display: inline-block;
margin-left: 8px;
padding: 2px 7px;
font-size: 10px;
font-weight: 660;
letter-spacing: .06em;
text-transform: uppercase;
background: var(--paper-2);
color: var(--text-soft);
border-radius: 999px;
border: 1px solid var(--line);
vertical-align: middle;
}
/* Badge sistema operativo (Lenovo notebook). A colpo d'occhio distingue
Win 11 Pro (blu, "OS incluso") da FreeDOS/No OS (ambra tenue, "OS assente"),
che altrimenti si vedrebbero soltanto leggendo il codice EIX vs DIX. */
.item-os {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
vertical-align: middle;
line-height: 1.6;
white-space: nowrap;
}
.item-os-win {
background: var(--blue-050);
color: var(--blue-ergo-700);
border: 1px solid rgba(var(--blue-ergo-rgb), .32);
}
.item-os-freedos, .item-os-noos {
background: #fff7ed; /* amber-50 */
color: #9a3412; /* amber-800 (leggibile su chiaro) */
border: 1px solid #fed7aa; /* amber-200 */
}
/* Nel riepilogo: il badge esce dal flow del titolo bold, gli diamo un
margin-top piccolo per allinearlo verticalmente al testo. */
.cell-name .item-os { margin-left: 8px; }
:root[data-theme="dark"] .item-os-win {
background: rgba(37, 99, 235, .22);
color: #cfe0ff;
border-color: rgba(37, 99, 235, .48);
}
:root[data-theme="dark"] .item-os-freedos,
:root[data-theme="dark"] .item-os-noos {
background: rgba(217, 119, 6, .18);
color: #fed7aa;
border-color: rgba(217, 119, 6, .5);
}
.item-state { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; }
/* area fotografica principale della card: 4:3 — la foto è la protagonista */
.item-stage {
position: relative;
aspect-ratio: 3/2;
display: flex; align-items: center; justify-content: center;
padding: 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
color: var(--line-strong);
overflow: hidden;
}
.item-stage.senza-foto {
padding: var(--s5);
}
.item-stage.senza-foto::after {
content: "";
position: absolute; left: 24%; right: 24%; bottom: 22px;
height: 1px; background: var(--line);
}
.item-stage img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-3);
cursor: zoom-in;
}
.item:hover .item-stage img { transform: scale(1.04); }
/* ------------------------------------------------------------------
Lightbox: al click sull'immagine prodotto compare un overlay scuro
con la foto ingrandita e didascalia (codice + descrizione). Chiudibile
con overlay-click, tasto X, ESC. Non usa un focus trap complesso — il
dialog e' semplice, un solo bottone attivo. z-index 250: sopra il tray
(200), sotto i toast (320). */
.lightbox {
position: fixed; inset: 0; z-index: 250;
display: flex; align-items: center; justify-content: center;
padding: var(--s6);
background: rgba(11, 19, 41, .82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 180ms var(--e-out);
cursor: zoom-out;
}
.lightbox.on { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-figure {
margin: 0;
max-width: min(1100px, 100%);
max-height: 100%;
display: flex; flex-direction: column; align-items: center; gap: var(--s3);
cursor: default;
}
.lightbox-figure img {
display: block;
max-width: 100%;
max-height: calc(100vh - 140px);
object-fit: contain;
background: #fff;
border-radius: var(--r-sm);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55);
}
.lightbox-cap {
color: rgba(255, 255, 255, .92);
font-size: var(--t-sm);
text-align: center;
max-width: 720px;
line-height: 1.4;
}
.lightbox-cap .lb-code {
display: inline-block;
margin-right: var(--s2);
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .12);
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: .02em;
color: #fff;
}
.lightbox-close {
position: absolute; top: var(--s4); right: var(--s4);
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
cursor: pointer;
transition: background-color 160ms var(--e-out);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .22); }
.lightbox-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.lightbox-close svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
.lightbox { padding: var(--s4); }
.lightbox-figure img { max-height: calc(100vh - 110px); }
}
.item-stage svg { width: 56px; height: 56px; stroke-width: .9; }
/* badge "Sostenibile" / "Ergonomico" sovrapposti alla foto prodotto (angolo in alto a sx).
Contenitore in colonna: se un prodotto ha entrambi i badge, si impilano senza sovrapporsi. */
.item-badges {
position: absolute; top: 10px; left: 10px; z-index: 1;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.item-eco, .item-ergo {
/* V9.2: dimensione ridotta — badge più discreti, il tooltip fornisce
comunque il testo completo su hover/focus (data-note). */
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px 2px 5px;
font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: #fff;
border-radius: 999px;
box-shadow: 0 1px 2px rgba(0,0,0,.22);
line-height: 1.35;
}
.item-eco { background: var(--teal-700); }
.item-ergo { background: var(--blue-ergo-700); }
.item-eco svg, .item-ergo svg { width: 9px; height: 9px; stroke-width: 2.4; }
/* V9.2 a11y: chip normativi focusable con tooltip visibile su focus/hover.
Il tooltip prende il testo da data-note e appare sopra il chip; su focus
(tastiera) resta visibile fino al blur, su hover appare solo mentre il
cursore è sopra. Su mobile touch un tap dà focus e mostra il tooltip. */
.item-cert {
cursor: help;
position: relative;
outline-offset: 3px;
}
.item-cert:focus-visible {
outline: 2px solid var(--paper);
box-shadow: 0 0 0 4px currentColor;
}
.item-cert::after {
content: attr(data-note);
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 30;
width: max-content;
max-width: min(280px, 70vw);
padding: 10px 12px;
background: var(--ink);
color: var(--paper);
font-size: var(--t-xs);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
line-height: 1.4;
border-radius: var(--r-sm);
box-shadow: 0 10px 30px -8px rgba(0,0,0,.35);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--t-2), transform var(--t-2), visibility var(--t-2);
pointer-events: none;
}
.item-cert:hover::after,
.item-cert:focus::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.item-cert-lbl { display: inline; }
@media (prefers-reduced-motion: reduce) {
.item-cert::after { transition: none; }
}
.item-body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; flex: 1; }
.item-name {
/* V9.1: alzato da t-sm/640 a t-base/660 per staccarsi dalla descrizione
(che resta a t-sm 13px) e dare la risposta immediata a "cosa sto guardando?"
V9.2 polish: tracking più stretto (-.014em) + lining figures per numerali
di modello ("H950", "SD4842P") allineati al testo. */
font-size: var(--t-base); font-weight: 660;
color: var(--ink); line-height: 1.32;
letter-spacing: -0.014em;
font-feature-settings: "lnum" 1, "ss01" 1, "kern" 1;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin: 0;
}
/* Nome-bottone: apre il preview modale (F2). Il font viene ereditato dall'h4
parent, il bottone si comporta come testo cliccabile con underline al hover. */
.item-name-btn {
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
line-height: inherit;
cursor: pointer;
text-align: left;
display: inline;
transition: color var(--t-2);
}
.item-name-btn:hover {
color: var(--teal-700);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--teal-rgb), .6);
}
.item-name-btn:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 3px;
}
.item-desc {
margin-top: var(--s2);
font-size: var(--t-sm); color: var(--text-soft); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Meta prodotto compatta: codice + quantita minima in una singola riga
discreta. Sostituisce l'item-facts con la tabella key/value ripetuta. */
.item-meta {
margin: var(--s3) 0 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
font-size: var(--t-micro);
color: var(--text-soft);
letter-spacing: .02em;
}
.item-meta .item-code {
font-family: var(--mono);
color: var(--text);
font-weight: 500;
letter-spacing: .04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.item-meta .item-mq {
color: var(--wait);
font-weight: 660;
white-space: nowrap;
}
/* Prezzo prominente. "IVA esclusa" e' gia' dichiarato nella noteline
globale, non serve ripeterlo su ogni card.
V9.2 polish: hairline separator sopra + currency € visivamente distinto
dal numero (dimensione minore, kern verso il basso — tradizione editoriale
del prezzo, il valore è la star). */
.item-price {
margin-top: auto;
padding-top: var(--s4);
border-top: 1px solid var(--line);
margin-inline: calc(var(--s1) * -1);
padding-inline: var(--s1);
}
.item-price .amount {
display: block;
font-size: var(--t-xl); font-weight: 660;
color: var(--ink); letter-spacing: -0.025em;
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.1;
}
.item-price .amount::first-letter {
font-size: .68em;
font-weight: 500;
color: var(--text-soft);
letter-spacing: 0;
padding-right: 2px;
vertical-align: 2px;
}
.item-actions { margin-top: var(--s4); display: flex; gap: var(--s2); }
.item-actions .btn { flex: 1; }
.item-inline-ctrl {
margin-top: var(--s4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s2);
}
.item-inline-ctrl .stepper { flex: 1; }
.item-inline-ctrl .stepper input { width: 40px; }
.item-inline-ctrl .icon-btn { width: 34px; height: 34px; }
/* conferma breve dopo l'aggiunta */
.item-flash {
margin-top: var(--s3);
font-size: var(--t-xs); font-weight: 660;
color: var(--ok);
display: flex; align-items: center; gap: var(--s2);
opacity: 0;
transition: opacity var(--ease);
}
.item-flash svg { width: 12px; height: 12px; }
.item-flash.show { opacity: 1; }
.blank {
grid-column: 1 / -1;
padding: var(--s10) var(--s6);
text-align: center;
border: 1px dashed var(--line-strong);
border-radius: var(--r-sm);
background: var(--paper);
}
.blank-ico { color: var(--line-strong); margin: 0 auto var(--s5); width: 40px; height: 40px; }
.blank h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.blank p { font-size: var(--t-sm); color: var(--text-soft); }
.blank .btn { margin-top: var(--s5); }
.blank-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s5); }
.blank-actions .btn { margin-top: 0; }
/* Empty state compatto su mobile: su schermi stretti l'empty state con
icona 40px + h3 + p + 2 pulsanti occupava ~1/3 dello screen. Riduco
padding/icona e nascondo il pulsante secondario, tenendo la prima
azione utile (solitamente quella più diretta al rimedio). */
@media (max-width: 720px) {
.blank { padding: var(--s6) var(--s4); }
.blank-ico { width: 28px; height: 28px; margin-bottom: var(--s3); }
.blank h3 { font-size: var(--t-base); }
.blank p { font-size: var(--t-xs); }
.blank-actions { margin-top: var(--s3); }
/* Se ci sono 2+ CTA nell'empty state, la seconda diventa link testuale
compatto invece di un secondo pulsante — meno peso visivo. */
.blank-actions .btn + .btn {
background: transparent;
border: 0;
color: var(--blue-mid);
padding: 6px 4px;
text-decoration: underline;
text-underline-offset: 3px;
}
}
/* ==========================================================================
13. FILTRI
========================================================================== */
/* .sieve: aside della sidebar sinistra. Sopra 880px il grid parent .shelf ha
align-items: start (per non stirare mini-bundle); forziamo pero' .sieve a
stretch cosi' il suo figlio .sieve-sticky ha un contenitore alto quanto
tutta la lista prodotti e la sticky funziona per l'intero scroll. */
.sieve { min-width: 0; align-self: stretch; }
/* Sidebar filtri: sticky top con altezza limitata al viewport e scroll
interno on-demand. Scrollbar invisibile di default per fondersi visualmente
con la pagina; compare sottile su hover cosi' l'utente puo' scorrere le
categorie in eccesso senza scrollare la pagina intera. */
.sieve-sticky {
position: sticky;
top: calc(var(--head) + var(--s2));
max-height: calc(100vh - var(--head) - var(--s5));
overflow-y: auto;
overflow-x: hidden;
padding-right: var(--s2);
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 200ms var(--e-out);
overscroll-behavior: contain; /* a fine lista filtri la rotella non trascina la pagina */
}
.sieve-sticky:hover,
.sieve-sticky:focus-within {
scrollbar-color: var(--line-strong) transparent;
}
.sieve-sticky::-webkit-scrollbar { width: 6px; }
.sieve-sticky::-webkit-scrollbar-track { background: transparent; }
.sieve-sticky::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 200ms var(--e-out);
}
.sieve-sticky:hover::-webkit-scrollbar-thumb,
.sieve-sticky:focus-within::-webkit-scrollbar-thumb {
background: var(--line-strong);
}
.sieve-title {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--ink);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--ink);
margin-bottom: var(--s5);
}
.sieve-group + .sieve-group {
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.sieve-label {
display: block;
font-size: var(--t-xs); font-weight: 660;
letter-spacing: .04em;
color: var(--text-soft);
margin-bottom: var(--s2);
}
.sieve-panel-head { display: none; }
.seek { position: relative; }
.seek svg.seek-ico {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--text-soft); pointer-events: none;
}
.seek .control { padding-left: 34px; padding-right: 34px; }
.seek-clear {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px;
border: 0; background: none; color: var(--text-soft);
border-radius: var(--r-xs);
display: none; align-items: center; justify-content: center;
cursor: pointer;
}
.seek-clear svg { width: 12px; height: 12px; }
.seek-clear:hover { background: var(--paper-2); color: var(--ink); }
/* Autocomplete: lista suggerimenti sotto il campo ricerca */
.seek-sug {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
z-index: 20;
max-height: 280px;
overflow-y: auto;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
box-shadow: var(--sh-3);
padding: 4px;
list-style: none;
margin: 0;
}
.seek-sug[hidden] { display: none; }
.seek-sug li {
padding: 8px 10px;
border-radius: 6px;
font-size: var(--t-sm);
color: var(--text);
cursor: pointer;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: baseline;
transition: background var(--t-1);
}
.seek-sug li strong { color: var(--ink); font-weight: 660; }
.seek-sug li em { font-style: normal; background: var(--teal-050); color: var(--teal-700); padding: 0 2px; border-radius: 2px; }
.seek-sug li .sug-meta { font-size: var(--t-micro); color: var(--text-soft); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.seek-sug li:hover,
.seek-sug li[aria-selected="true"] { background: var(--tint); }
.seek.on .seek-clear { display: flex; }
.pick { display: grid; gap: 2px; }
.pick-row {
display: flex; align-items: center; gap: var(--s3);
padding: 5px 6px;
border-radius: var(--r-xs);
font-size: var(--t-sm);
cursor: pointer;
transition: background var(--ease);
}
.pick-row:hover { background: var(--paper-2); }
.pick-row input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); flex: none; cursor: pointer; }
.pick-row .pick-name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.pick-row .pick-name svg { width: 15px; height: 15px; flex: none; color: var(--teal-700); }
.pick-row .pick-n { font-size: var(--t-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sieve-actions { display: flex; gap: var(--s4); margin-top: var(--s4); }
.sieve-actions button {
border: 0; background: none; padding: 0;
font-size: var(--t-xs); font-weight: 640;
color: var(--blue); cursor: pointer;
}
.sieve-actions button:hover { text-decoration: underline; text-underline-offset: 3px; }
.sieve-open { display: none; position: relative; }
.sieve-open.has-filters {
background: var(--teal-050);
color: var(--teal-700);
border-color: var(--teal);
font-weight: 700;
}
.sieve-open.has-filters::after {
content: '';
position: absolute; top: -3px; right: -3px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 2px var(--paper);
}
/* ==========================================================================
14. SOGLIA
========================================================================== */
.gauge {
position: relative;
background: var(--surface-elevated);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: var(--s6);
box-shadow: var(--sh-1);
transition: border-color var(--t-3), box-shadow var(--t-3);
}
.gauge.valida { border-color: var(--teal-200); box-shadow: 0 0 0 1px var(--teal-100), var(--sh-2); }
.gauge-label {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-soft);
}
.gauge-value {
display: block;
margin: var(--s3) 0 var(--s5);
font-family: var(--sans);
font-size: var(--t-2xl); font-weight: 680;
color: var(--ink); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.gauge-track {
height: 10px;
background: var(--paper-3);
border: 1px solid var(--line);
border-radius: 99px;
overflow: hidden;
}
.gauge-fill {
height: 100%; width: 100%;
transform-origin: left;
transform: scaleX(0);
background: var(--wait-solid);
border-radius: 99px;
transition: transform 420ms var(--e-out), background var(--t-3);
}
.gauge-fill.colma { background: linear-gradient(90deg, var(--teal-600), var(--mint)); }
/* Pulse effimero F15: aggiunto/rimosso via classe `.gauge-pulse` da renderGauge()
quando il totale cambia. Brightness + glow mint per ~400ms, poi scompare. */
@keyframes gauge-pulse {
0% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(var(--teal-rgb), .0); }
40% { filter: brightness(1.18); box-shadow: 0 0 18px 3px rgba(var(--teal-rgb), .38); }
100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(var(--teal-rgb), .0); }
}
.gauge-fill.gauge-pulse { animation: gauge-pulse 460ms var(--e-out-quart) both; }
@media (prefers-reduced-motion: reduce) {
.gauge-fill.gauge-pulse { animation: none; }
}
.gauge-foot {
margin-top: var(--s4);
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s4); flex-wrap: wrap;
font-size: var(--t-sm);
}
.gauge-msg { color: var(--text-soft); }
.gauge-msg b { color: var(--ink); font-weight: 660; font-variant-numeric: tabular-nums; }
.gauge-min { font-size: var(--t-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
/* ==========================================================================
15. RIEPILOGO
========================================================================== */
.review { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: var(--s9); align-items: start; }
.review-main { min-width: 0; }
.review-side { display: grid; gap: var(--s6); align-content: start; position: sticky; top: calc(var(--head) + var(--s5)); }
.doc + .doc { margin-top: var(--s9); }
.doc-lbl {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--ink);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--ink);
margin-bottom: var(--s5);
}
/* tabella enterprise: solo filetti orizzontali, nessun bordo verticale.
Il gradient a destra è un hint visivo: se la tabella è più larga del container
(mobile < 620px), l'utente vede subito che c'è contenuto scorrevole. Sparisce
quando lo scroll è terminato (background-attachment local trick). */
.scroller {
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
background:
linear-gradient(90deg, var(--paper), var(--paper) 70%, transparent) left / 40px 100% no-repeat local,
linear-gradient(90deg, transparent, var(--paper) 30%, var(--paper)) right / 40px 100% no-repeat local,
linear-gradient(90deg, rgba(0,0,0,.06), transparent 20%) left / 20px 100% no-repeat,
linear-gradient(90deg, transparent 80%, rgba(0,0,0,.06)) right / 20px 100% no-repeat;
}
.ledger { min-width: 620px; font-size: var(--t-sm); }
.ledger thead th {
padding: 0 var(--s4) var(--s3);
text-align: left;
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-soft);
border-bottom: 1px solid var(--line-strong);
white-space: nowrap;
}
.ledger thead th:first-child { padding-left: 0; }
.ledger thead th:last-child { padding-right: 0; }
.ledger td {
padding: var(--s5) var(--s4);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.ledger td:first-child { padding-left: 0; }
.ledger td:last-child { padding-right: 0; }
.ledger .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .c { text-align: center; }
.ledger .cell-name strong { display: block; font-weight: 620; color: var(--ink); line-height: 1.4; }
.ledger .cell-name span { font-size: var(--t-xs); color: var(--text-soft); }
.ledger .cell-code { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-soft); white-space: nowrap; }
.ledger .cell-sub { font-weight: 660; color: var(--ink); }
.qty-min { display: block; margin-top: 5px; font-size: var(--t-micro); color: var(--text-soft); white-space: nowrap; }
/* Riga di gruppo per categoria nel riepilogo */
.ledger .ledger-cat td {
border-bottom: 2px solid var(--ink);
padding: var(--s6) 0 var(--s2);
vertical-align: baseline;
}
.ledger .ledger-cat .ledger-cat-name {
font-family: var(--display);
font-weight: 660;
font-size: var(--t-md);
color: var(--ink);
letter-spacing: -0.006em;
margin-right: var(--s4);
}
.ledger .ledger-cat .ledger-cat-meta {
font-size: var(--t-xs);
color: var(--text-soft);
font-weight: 600;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
.ledger-grp:first-child .ledger-cat td { padding-top: 0; }
.figures { display: grid; }
.figures div {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s4);
padding: var(--s3) 0;
border-bottom: 1px solid var(--line);
font-size: var(--t-sm);
}
.figures dt { color: var(--text-soft); }
.figures dd { margin: 0; font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
.figures .somma { padding: var(--s5) 0; border-bottom: 0; align-items: baseline; }
.figures .somma dt { color: var(--ink); font-weight: 620; font-size: var(--t-base); }
.figures .somma dd { font-size: var(--t-xl); font-weight: 660; color: var(--ink); letter-spacing: -0.026em; }
/* Budget guardrail (A): input opzionale sotto le figure. Se compilato mostra
un feedback dinamico (verde = nei limiti, ambra = eccedenza). */
.budget {
margin-top: var(--s5);
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.budget-label {
display: block;
font-size: var(--t-xs);
font-weight: 620;
color: var(--ink);
margin-bottom: 6px;
letter-spacing: .02em;
}
.budget-hint {
font-weight: 400;
color: var(--text-soft);
font-size: 11px;
}
.budget-input-wrap {
display: flex;
align-items: stretch;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
overflow: hidden;
transition: border-color var(--t-2), box-shadow var(--t-2);
}
.budget-input-wrap:focus-within {
border-color: var(--blue-mid);
box-shadow: 0 0 0 3px rgba(28,37,65,.10);
}
.budget-currency {
padding: 10px 4px 10px 12px;
color: var(--text-soft);
font-weight: 620;
align-self: center;
}
.budget-input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
padding: 10px 8px;
font: inherit;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.budget-input::placeholder { color: var(--text-soft); font-weight: 400; }
.budget-clear {
background: transparent; border: 0;
padding: 0 10px;
color: var(--text-soft);
cursor: pointer;
display: inline-flex; align-items: center;
transition: color var(--t-2);
}
.budget-clear:hover { color: var(--alert); }
.budget-clear svg { width: 14px; height: 14px; }
.budget-msg {
margin: var(--s3) 0 0;
padding: 10px 12px;
border-radius: var(--r-xs);
font-size: var(--t-xs);
line-height: 1.4;
display: flex; align-items: flex-start; gap: 8px;
}
.budget-msg[hidden] { display: none; }
.budget-msg svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.budget-msg b { font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-msg.ok {
background: var(--teal-050);
color: var(--teal-700);
border: 1px solid var(--teal-200);
}
.budget-msg.warn {
background: var(--wait-tint);
color: #7A4F00;
border: 1px solid var(--wait-line);
}
.remark {
display: flex; gap: var(--s3);
padding: var(--s4) 0 0;
font-size: var(--t-sm);
color: var(--text-soft);
}
.remark svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--blue-mid); }
.remark.attenzione { color: #7A4F00; }
.remark.attenzione svg { color: #D98B00; }
/* ==========================================================================
16. DATI ENTE
========================================================================== */
.entity > p { font-size: var(--t-sm); color: var(--text-soft); margin-bottom: var(--s5); max-width: 52ch; }
.entity fieldset { border: 0; margin: 0; padding: 0; }
/* Primary block (nome ente obbligatorio) — presentato senza fieldset+legend
perche' contiene un solo campo. Mantiene la superficie soft-paper come
affordance di priorita'. */
.entity-primary {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: var(--s5);
}
.entity-primary .field-required label {
font-weight: 700;
}
.entity fieldset { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.entity legend {
padding: 0;
font-size: var(--t-xs); font-weight: 660;
letter-spacing: .04em; color: var(--text);
margin-bottom: var(--s4);
text-transform: uppercase;
}
.entity legend .legend-hint {
font-weight: 500;
color: var(--text-soft);
text-transform: none;
letter-spacing: 0;
font-size: 12px;
margin-left: 6px;
}
.entity-rows { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Nota privacy discreta sotto il form dati ente. Filetto sinistro come le
altre note editoriali, icona scudo in ink, link privacy sottolineato. */
.entity-privacy {
display: flex;
align-items: flex-start;
gap: 10px;
margin: var(--s6) 0 0;
padding: 10px var(--s4);
border-left: 2px solid var(--line-strong);
background: var(--paper-2);
border-radius: 0 var(--r-xs) var(--r-xs) 0;
font-size: var(--t-xs);
line-height: 1.55;
/* AAA su paper-2 anche per testo piccolo */
color: var(--text);
}
.entity-privacy svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--blue-mid); }
.entity-privacy b { color: var(--ink); font-weight: 660; }
.entity-privacy a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.entity-privacy a:hover { color: var(--ink); }
/* ==========================================================================
17. GENERAZIONE CODICE
========================================================================== */
.issue {
margin-top: var(--s9);
padding: var(--s5) var(--s6);
border: 1px solid var(--ink);
border-radius: var(--r-sm);
background: var(--paper-2);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s5) var(--s8);
align-items: start;
}
.issue.valida {
border-color: var(--teal);
background: linear-gradient(135deg, #f0fdf8 0%, var(--paper-2) 100%);
}
.issue-copy h3 {
margin: 0 0 var(--s2);
font-family: var(--display);
font-size: var(--t-xl);
font-weight: 660;
color: var(--ink);
letter-spacing: -0.014em;
line-height: 1.15;
}
.issue-copy p { font-size: var(--t-sm); color: var(--text); max-width: 52ch; margin: 0; line-height: 1.55; }
.issue-actions {
display: flex;
flex-direction: column;
gap: var(--s4);
align-items: stretch;
min-width: 220px;
align-self: start;
}
.issue-secondary {
display: flex;
gap: var(--s2);
justify-content: flex-end;
flex-wrap: wrap;
}
.issue-secondary .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.issue-actions > .btn-accent { align-self: stretch; }
.issue-help {
font-size: var(--t-micro);
color: var(--text-soft);
letter-spacing: .01em;
margin: 2px 0 0;
line-height: 1.5;
max-width: 34ch;
text-align: right;
align-self: flex-end;
transition: color 220ms var(--e-out), opacity 220ms var(--e-out);
}
.issue-help[hidden] { display: none; }
.issue-help b { color: var(--ink); font-weight: 660; }
.issue-actions .btn .btn-ico {
width: 15px; height: 15px;
margin-right: 6px;
flex: none;
}
/* State machine visuale dei pulsanti documento (PDF + Email) */
#btnPdfSummary[data-state="disabled"],
#btnEmailSummary[data-state="disabled"] { opacity: .55; }
#btnPdfSummary[data-state="ready"],
#btnEmailSummary[data-state="ready"] {
border-color: var(--teal);
color: var(--teal-700);
}
#btnPdfSummary[data-state="ready"]:hover,
#btnEmailSummary[data-state="ready"]:hover { background: var(--teal-050); }
#btnPdfSummary[data-state="generating"] {
color: var(--text-soft);
border-color: var(--line-strong);
cursor: wait;
position: relative;
}
#btnPdfSummary[data-state="generating"] .btn-ico { animation: pdfSpin 900ms linear infinite; }
#btnPdfSummary[data-state="success"],
#btnEmailSummary[data-state="success"] {
border-color: var(--teal);
background: var(--teal-050);
color: var(--teal-700);
}
#btnPdfSummary[data-state="error"],
#btnEmailSummary[data-state="error"] {
border-color: var(--alert);
color: var(--alert);
background: var(--alert-tint);
}
#btnEmailCnv .btn-ico { width: 15px; height: 15px; margin-right: 6px; flex: none; }
@keyframes pdfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
#btnPdfSummary[data-state="generating"] .btn-ico { animation: none; }
}
@media (max-width: 640px) {
.issue-help { text-align: left; align-self: stretch; max-width: none; }
.issue-secondary { justify-content: stretch; }
}
.issue-preview {
margin-top: var(--s5);
font-family: var(--mono);
font-size: var(--t-md);
font-weight: 600;
color: var(--ink);
letter-spacing: .04em;
word-break: break-all;
padding: var(--s3) 0 0;
border-top: 1px dashed var(--line-strong);
line-height: 1.4;
}
.issue-preview span {
display: block;
font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft);
margin-bottom: var(--s2);
}
/* ==========================================================================
17-bis. DIFFERENZIAZIONE VISIVA DEL RIEPILOGO (step 3)
--------------------------------------------------------------------------
Ogni sotto-blocco ha superficie e testata proprie per distinguere:
"Prodotti selezionati" (bianco netto, tabella), "Dati dell'ente" (paper-2
con bordo tenue), "Valore configurazione" (sidebar sticky), "Genera codice"
(bandella di conclusione con accento navy o teal).
========================================================================== */
.panel#panel3 {
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
border-radius: var(--r-md);
padding: var(--s7) var(--s7) var(--s8);
margin-top: var(--s5);
border: 1px solid var(--line);
}
.panel#panel3 > .panel-ask {
padding: 0 0 var(--s7);
margin-bottom: var(--s7);
border-bottom: 2px solid var(--ink);
}
.panel#panel3 > .panel-ask h2 {
font-family: var(--display);
font-size: var(--t-2xl);
letter-spacing: -0.014em;
}
.panel#panel3 > .panel-ask h2::before {
content: '03';
display: block;
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .18em;
color: var(--text-soft);
margin-bottom: 6px;
}
.panel#panel3 > .panel-ask p {
font-size: var(--t-md);
color: var(--text);
max-width: 60ch;
margin-top: var(--s3);
}
/* Ogni .doc diventa una superficie con testata a filetto colorato */
.panel#panel3 .doc {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: var(--s6) var(--s6);
box-shadow: 0 1px 2px rgba(15,23,42,.03);
position: relative;
}
.panel#panel3 .doc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: var(--r-sm) var(--r-sm) 0 0;
background: var(--line-strong);
}
.panel#panel3 .review-main > .doc:first-child::before { background: var(--teal); }
.panel#panel3 .review-main > .doc.entity::before { background: var(--blue-mid); }
.panel#panel3 .review-side > .doc::before { background: var(--navy); }
.panel#panel3 .doc + .doc { margin-top: var(--s7); }
/* Testata doc: kicker teal + titolo serif */
.panel#panel3 .doc-lbl {
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--teal-700);
border-bottom: 0;
padding: 0;
margin: 0 0 var(--s5);
display: flex;
align-items: center;
gap: var(--s3);
}
.panel#panel3 .doc-lbl::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
/* Colorazione tenue del kicker per doc-side (navy accent) */
.panel#panel3 .review-side .doc-lbl { color: var(--navy); }
.panel#panel3 .review-main .doc.entity .doc-lbl { color: var(--blue-mid); }
/* Entity: paper senza secondo background (già gestito dal doc container) */
.panel#panel3 .entity-primary {
background: var(--paper-2);
border-color: var(--line-strong);
}
/* Issue: bandella conclusiva con accento navy pieno per marcare il "punto finale".
V9.1 precision fix: override completo dei testi secondari perché il default
--text-soft (grigio scuro) è invisibile su fondo navy. */
.panel#panel3 .issue {
margin-top: var(--s8);
background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
border-color: var(--navy);
color: #fff;
padding: var(--s6) var(--s7);
border-radius: var(--r-sm);
}
.panel#panel3 .issue h3 {
color: #fff;
font-family: var(--display);
font-size: var(--t-xl);
font-weight: 660;
letter-spacing: -0.014em;
margin: 0 0 var(--s3);
line-height: 1.15;
}
/* Descrizione: alzata da .84 a .90 — resta subordinata al titolo ma nettamente
leggibile su navy. */
.panel#panel3 .issue-copy p {
color: rgba(255,255,255,.90);
font-size: var(--t-sm);
line-height: 1.55;
max-width: 52ch;
margin: 0;
}
/* Preview code: monospace prominente su navy, letter-spacing per lettura */
.panel#panel3 .issue-preview {
color: #fff;
border-top-color: rgba(255,255,255,.22);
margin-top: var(--s5);
padding-top: var(--s4);
font-family: var(--mono);
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: .06em;
}
.panel#panel3 .issue-preview span {
/* Label "Anteprima del codice": uppercase distanziata, mint per hint editoriale */
display: block;
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .18em;
color: rgba(255,255,255,.62);
margin-bottom: var(--s2);
}
.panel#panel3 .issue.valida {
background: linear-gradient(135deg, var(--navy) 0%, #0f3d2e 100%);
border-color: var(--teal);
box-shadow: 0 0 0 4px rgba(var(--teal-rgb),.14);
}
.panel#panel3 .issue.valida h3 { color: var(--mint); }
.panel#panel3 .issue .btn-line {
background: transparent;
color: rgba(255,255,255,.92);
border-color: rgba(255,255,255,.36);
}
.panel#panel3 .issue .btn-line:hover {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.7);
color: #fff;
}
/* CTA principale: rimane teal dominante ma con più peso visivo */
.panel#panel3 .issue .btn-accent {
background: var(--teal);
color: var(--on-teal);
border-color: transparent;
font-size: var(--t-base);
font-weight: 700;
padding: var(--s4) var(--s5);
letter-spacing: -0.003em;
}
.panel#panel3 .issue .btn-accent:not(:disabled):hover {
background: var(--teal-600);
box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}
/* Help text: era var(--text-soft) grigio scuro → INVISIBILE su navy. Ora
bianco al 68% con peso 500 sul termine chiave. Read at least AAA. */
.panel#panel3 .issue-help {
color: rgba(255,255,255,.68);
font-size: var(--t-micro);
line-height: 1.55;
max-width: 34ch;
text-align: right;
margin: var(--s2) 0 0;
}
.panel#panel3 .issue-help b {
color: var(--mint);
font-weight: 660;
}
/* Panel-foot dello step 3: leggermente più leggero per staccarsi dal panel */
.panel#panel3 > .panel-foot {
padding-top: var(--s6);
margin-top: var(--s7);
border-top: 1px solid var(--line);
}
/* ==========================================================================
17.b BOTTONE "TORNA SU"
========================================================================== */
/* Floating bottom-right: appare dopo N pixel di scroll (JS toggle .on).
Sopra la commandbar quando presente (offset dinamico via body.with-commandbar).
Icona freccia su in cerchio, stile allineato al sistema (navy/teal). */
.btn-top {
position: fixed;
right: var(--s5);
bottom: var(--s5);
z-index: 100;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; border: 0;
background: var(--ink);
color: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .28), 0 2px 4px -2px rgba(0, 0, 0, .18);
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms var(--e-out), transform 200ms var(--e-out), background-color 160ms var(--e-out);
pointer-events: none;
}
.btn-top.on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.btn-top:hover { background: var(--teal-700); }
.btn-top:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-top svg { width: 20px; height: 20px; }
body.with-commandbar .btn-top { bottom: calc(74px + var(--s4)); }
@media (min-width: 1200px) {
body.with-commandbar .btn-top { bottom: var(--s5); }
}
/* btn-top-down: variante "vai giu". Stessa posizione bottom-right, ma con
background differente per distinguerla dalla "torna su" quando l'utente
confronta a memoria. Non convivono mai (logica JS mutuamente esclusiva). */
.btn-top-down { background: var(--teal-700); }
.btn-top-down:hover { background: var(--ink); }
/* ==========================================================================
18. COMMAND BAR
========================================================================== */
.commandbar {
position: fixed; inset: auto 0 0 0; z-index: 110;
background: var(--navy);
box-shadow: 0 -10px 24px -12px rgba(0,0,0,.28);
color: #fff;
transform: translateY(101%);
visibility: hidden;
transition: transform var(--ease), visibility var(--ease);
}
.commandbar.on { transform: none; visibility: visible; }
body.with-commandbar { padding-bottom: 74px; }
/* Su desktop >=1200px il mini-bundle sticky mostra le stesse info del bundle
con maggior dettaglio. La command bar bottom diventa ridondante: la nascondo
e recupero 74px verticali sotto il configuratore. */
@media (min-width: 1200px) {
.commandbar { display: none !important; }
body.with-commandbar { padding-bottom: 0; }
}
.commandbar-inner {
max-width: var(--wrap); margin: 0 auto;
padding: var(--s3) var(--pad);
display: flex; align-items: center; gap: var(--s7);
}
.cb-cell { display: grid; gap: 1px; flex: none; }
.cb-label {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.cb-value { font-size: var(--t-base); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-value.big { font-size: var(--t-lg); font-weight: 660; letter-spacing: -0.02em; white-space: nowrap; }
.cb-rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); flex: none; }
.cb-gauge { flex: 1; min-width: 48px; }
.cb-track { height: 3px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; }
.cb-fill {
height: 100%; width: 100%;
transform-origin: left;
transform: scaleX(0);
background: var(--wait-solid); border-radius: 99px;
transition: transform 420ms var(--e-out), background var(--t-3);
}
.cb-fill.colma { background: linear-gradient(90deg, var(--teal), var(--mint)); }
.cb-cta { margin-left: auto; flex: none; }
.cb-short { display: none; }
.commandbar .tag-ok { color: var(--mint); }
.commandbar .tag-wait { color: #f0c274; }
.commandbar .btn-line { color: #fff; border-color: rgba(255,255,255,.4); }
.commandbar .btn-line:hover { background: rgba(255,255,255,.1); border-color: #fff; }
/* ==========================================================================
19. PANNELLO BUNDLE
========================================================================== */
.veil {
position: fixed; inset: 0; z-index: 190;
background: rgba(var(--navy-rgb),.44);
opacity: 0; visibility: hidden;
transition: opacity var(--ease), visibility var(--ease);
}
.veil.on { opacity: 1; visibility: visible; }
.tray {
position: fixed; inset: 0 0 0 auto; z-index: 200;
width: 400px; max-width: 100%;
background: var(--paper);
border-left: 1px solid var(--line);
box-shadow: var(--sh-4);
transform: translateX(100%);
visibility: hidden;
transition: transform var(--t-3), visibility var(--t-3);
display: flex; flex-direction: column;
}
.tray.on { transform: none; visibility: visible; }
.tray-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s4);
padding: var(--s6) var(--s6) var(--s5);
border-bottom: 1px solid var(--line-strong);
}
.tray-head h2 { font-size: var(--t-lg); }
.tray-head p { font-size: var(--t-xs); color: var(--text-soft); margin-top: 3px; }
.tray-body { flex: 1; overflow-y: auto; padding: 0 var(--s6); }
.tray-foot { border-top: 1px solid var(--line); padding: var(--s5) var(--s6) var(--s6); background: var(--paper-2); }
.tray-foot .btn-full + .tray-foot-clear {
display: flex; justify-content: center;
margin-top: var(--s3);
}
.tray-clear {
font-size: var(--t-xs); font-weight: 640;
color: var(--text-soft);
background: none; border: 0; padding: 0;
cursor: pointer;
}
.tray-clear:hover { color: var(--alert); text-decoration: underline; text-underline-offset: 3px; }
.tray-line { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.tray-line:last-child { border-bottom: 0; }
.tray-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.tray-name { font-size: var(--t-sm); font-weight: 620; color: var(--ink); line-height: 1.4; }
.tray-code { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-soft); margin-top: 3px; }
.tray-ctrl {
margin-top: var(--s4);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3); flex-wrap: wrap;
}
.tray-unit { font-size: var(--t-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tray-sub { font-size: var(--t-md); font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; }
.tray-empty { text-align: center; padding: var(--s11) var(--s4); }
.tray-empty svg { width: 30px; height: 30px; margin: 0 auto var(--s5); color: var(--line-strong); stroke-width: 1.2; }
.tray-empty h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.tray-empty p { font-size: var(--t-sm); color: var(--text-soft); }
/* ==========================================================================
20. FINESTRE DI DIALOGO
========================================================================== */
.dlg {
position: fixed; inset: 0; z-index: 300;
display: none;
align-items: center; justify-content: center;
padding: var(--s6) var(--s4);
background: rgba(var(--navy-rgb),.48);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.dlg.on { display: flex; }
/* Riquadro a colonna con altezza limitata allo spazio disponibile: intestazione
e pulsanti restano sempre fissi e visibili, solo il corpo scorre. Prima
l'altezza non era limitata, quindi con molti prodotti il riquadro superava
il viewport: niente sfondo cliccabile per chiudere, e i pulsanti (compreso
"Modifica configurazione") finivano fuori schermo, raggiungibili solo
scorrendo l'intera pagina di sfondo, non sempre possibile. Esc restava la
sola via di uscita. */
.dlg-box {
width: 100%; max-width: 600px; max-height: 100%; margin: 0 auto;
display: flex; flex-direction: column;
background: var(--paper);
border-radius: var(--r-md);
box-shadow: 0 20px 40px -8px rgba(0,0,0,.20), 0 6px 16px -3px rgba(0,0,0,.10);
overflow: hidden;
}
html.motion .dlg.on .dlg-box { animation: sheetIn 320ms var(--e-out-quart) both; }
.dlg-head { flex: 0 0 auto; position: relative; padding: var(--s8) var(--s8) var(--s6); }
.dlg-head .kicker { margin-bottom: var(--s3); }
.dlg-head h2 {
font-family: var(--display-serif);
font-weight: 400;
font-size: var(--t-xl); letter-spacing: -0.022em;
padding-right: var(--s7);
}
.dlg-head p { font-size: var(--t-sm); color: var(--text-soft); margin-top: var(--s3); }
.dlg-close { position: absolute; top: var(--s5); right: var(--s5); }
.dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s8) var(--s8); }
/* V9.2 a11y: overscroll-behavior contain sui modali per prevenire lo
scroll-chaining su iOS/Android — quando l'utente arriva al fondo del
contenuto modale, il body sotto non scrolla. Applicato a ogni scroll
container di modal (dlg/tray/prev/pp/palette). */
.dlg-body, .tray-body, .prev-body, .pp-body, .palette-body, .lightbox {
overscroll-behavior: contain;
}
/* tabindex="0" in HTML: la regione scorrevole deve restare raggiungibile
da tastiera (frecce/Pag Giu), non solo con la rotellina del mouse. */
.dlg-body:focus-visible { outline: 2px solid rgba(var(--mint-rgb),.7); outline-offset: -2px; }
.dlg-foot {
flex: 0 0 auto;
padding: var(--s6) var(--s8);
border-top: 1px solid var(--line);
display: flex; gap: var(--s3); flex-wrap: wrap;
}
.dlg-foot .btn { flex: 1 1 auto; }
/* momento di chiusura: il codice e il protagonista */
.seal { text-align: center; padding: var(--s5) 0 var(--s8); }
.seal-ok {
/* V9.1: gerarchia interna del seal — "CONFIGURAZIONE PRONTA" è la conferma,
va letta prima del codice. Alzata da t-sm/660 a t-base/700 con tracking
wide per lettura "badge" e resta subordinata visualmente al codice (30px). */
display: inline-flex; align-items: center; gap: var(--s2);
font-size: var(--t-base); font-weight: 700; color: var(--ok);
letter-spacing: .01em;
margin-bottom: var(--s7);
}
.seal-ok svg { width: 15px; height: 15px; }
.seal-label {
display: block;
font-size: var(--t-xs); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--text-soft);
margin-bottom: var(--s4);
}
.seal-code {
display: block;
font-family: var(--mono);
font-size: 30px; font-weight: 500;
color: var(--ink);
letter-spacing: .04em;
word-break: break-all;
line-height: 1.4;
padding-bottom: var(--s6);
border-bottom: 1px solid var(--ink);
}
.seal-code.md { font-size: 24px; }
.seal-code.lg { font-size: 20px; letter-spacing: .02em; }
.seal-code.xl { font-size: 16px; letter-spacing: 0; }
.seal-hint { margin-top: var(--s5); font-size: var(--t-sm); color: var(--text-soft); }
/* riepilogo discreto dentro le finestre */
.recap { margin-top: var(--s7); }
.recap-head {
display: flex; justify-content: space-between; gap: var(--s3);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--line-strong);
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-soft);
}
.recap-line {
display: grid; grid-template-columns: minmax(0,1fr) auto auto;
gap: var(--s4);
align-items: baseline;
padding: var(--s3) 0;
border-bottom: 1px solid var(--line);
font-size: var(--t-sm);
}
.recap-line .rl-name strong { display: block; font-weight: 620; color: var(--ink); font-family: var(--mono); font-size: var(--t-xs); }
.recap-line .rl-name span { font-size: var(--t-xs); color: var(--text-soft); }
.recap-line .rl-q { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap-line .rl-s { font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap-total {
display: flex; justify-content: space-between; gap: var(--s4);
padding-top: var(--s4);
font-size: var(--t-sm); font-weight: 620; color: var(--ink);
}
.recap-total b { font-size: var(--t-md); font-weight: 660; font-variant-numeric: tabular-nums; }
.recover-form { display: grid; gap: var(--s5); }
.recover-msg { font-size: var(--t-sm); min-height: 20px; }
/* History configurazioni recenti (F13): chip lista dei bundle salvati
localmente. Se localStorage cnv_registry è vuoto, la sezione è hidden. */
.recover-history {
padding-bottom: var(--s5);
margin-bottom: var(--s5);
border-bottom: 1px solid var(--line);
}
.recover-history[hidden] { display: none; }
.recover-history-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
margin-bottom: var(--s3);
}
.recover-history-head .kicker {
color: var(--text-soft);
letter-spacing: .14em;
font-size: var(--t-xs);
}
.recover-history-clear {
background: none;
border: 0;
padding: 4px 6px;
font-size: 11px;
font-weight: 620;
color: var(--text-soft);
cursor: pointer;
letter-spacing: .04em;
border-radius: 4px;
}
.recover-history-clear:hover { color: var(--alert); text-decoration: underline; }
.recover-history-clear:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.recover-history-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--s2);
}
.rh-item { margin: 0; }
.rh-btn {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"name when"
"meta code";
gap: 2px 12px;
padding: 10px 14px;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xs);
cursor: pointer;
text-align: left;
transition: border-color var(--t-2), background var(--t-2);
}
.rh-btn:hover {
border-color: var(--teal-200);
background: var(--tint);
}
.rh-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rh-name {
grid-area: name;
font-weight: 660;
color: var(--ink);
font-size: var(--t-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rh-meta {
grid-area: meta;
font-size: 11px;
color: var(--text-soft);
letter-spacing: .02em;
}
.rh-code {
grid-area: code;
font-family: var(--mono);
font-size: 10px;
color: var(--text-soft);
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.rh-when {
grid-area: when;
font-size: 10px;
font-weight: 620;
color: var(--text-mute);
text-transform: uppercase;
letter-spacing: .08em;
white-space: nowrap;
}
@media (max-width: 520px) {
.rh-btn { grid-template-columns: 1fr; grid-template-areas: "name" "meta" "code" "when"; gap: 4px; }
.rh-code, .rh-when { text-align: left; max-width: none; }
}
/* ==========================================================================
SESSION RECOVERY BANNER (B1) — riprendi sessione precedente
========================================================================== */
.session-banner {
position: sticky;
top: 0;
z-index: 90;
background: linear-gradient(180deg, var(--teal-050) 0%, rgba(236,253,245,.85) 100%);
border-bottom: 1px solid var(--teal-200);
padding: 10px 20px;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
font-size: 13px;
color: var(--ink);
flex-wrap: wrap;
}
.session-banner[hidden] { display: none; }
.session-banner-copy {
display: flex; align-items: baseline; gap: 8px;
min-width: 0;
flex: 1;
}
.session-banner-ico {
flex: none;
color: var(--teal-700);
display: inline-flex; align-items: center;
}
.session-banner-ico svg { width: 16px; height: 16px; }
.session-banner-txt {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-banner-txt b { color: var(--teal-700); }
.session-banner-actions {
display: flex; gap: 8px; align-items: center;
flex: none;
}
.session-banner-btn {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid transparent;
background: var(--teal);
color: var(--paper);
font-size: 12px;
font-weight: 660;
cursor: pointer;
transition: background var(--t-2);
}
.session-banner-btn:hover { background: var(--teal-600); }
.session-banner-btn.ghost {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.session-banner-btn.ghost:hover { background: var(--paper); border-color: var(--text-soft); }
.session-banner-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 620px) {
.session-banner { padding: 8px 12px; font-size: 12px; }
.session-banner-txt { white-space: normal; }
.session-banner-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
}
/* ==========================================================================
PALETTE Cmd/Ctrl+K (F1) — ricerca globale keyboard-first
========================================================================== */
.palette {
position: fixed; inset: 0; z-index: 500;
display: flex; align-items: flex-start; justify-content: center;
padding-top: clamp(60px, 12vh, 140px);
opacity: 0;
transition: opacity 160ms var(--e-out);
}
.palette.on { opacity: 1; }
.palette[hidden] { display: none; }
.palette-veil {
position: absolute; inset: 0;
background: rgba(11, 19, 41, .58);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.palette-box {
position: relative;
width: min(640px, calc(100vw - 32px));
max-height: min(560px, 80vh);
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(11,19,41,.28), 0 6px 16px rgba(11,19,41,.16);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(8px);
transition: transform 220ms var(--e-out-quart);
}
.palette.on .palette-box { transform: translateY(0); }
.palette-input-wrap {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.palette-ico { width: 18px; height: 18px; color: var(--text-soft); flex: none; }
.palette-input-wrap input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
font-size: 15px; color: var(--ink);
padding: 4px 0;
}
.palette-input-wrap input::placeholder { color: var(--text-soft); }
.palette-hint { flex: none; }
.palette-hint .kbd { font-size: 10px; padding: 2px 6px; }
.palette-body {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 6px 0;
}
.palette-group {
padding: 10px 16px 6px;
font-size: 10px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--text-soft);
}
.palette-item {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 16px;
cursor: pointer;
transition: background 100ms var(--e-out);
}
.palette-item.active,
.palette-item:hover:not([aria-disabled="true"]) { background: var(--tint); }
.palette-item[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.palette-item-kind {
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-soft);
}
.palette-item-kind svg { width: 14px; height: 14px; }
.palette-item-label {
font-size: 14px;
color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-item-label strong { font-weight: 700; }
.palette-item-sub {
font-family: var(--mono);
font-size: 11px;
color: var(--text-soft);
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
max-width: 240px;
}
.palette-item.active .palette-item-kind,
.palette-item.active .palette-item-label { color: var(--teal-700); }
.palette-empty {
padding: 32px 16px;
text-align: center;
color: var(--text-soft);
font-size: 13px;
}
.palette-empty b { color: var(--ink); }
.palette-foot {
padding: 10px 16px;
border-top: 1px solid var(--line);
background: var(--paper-2);
display: flex; gap: var(--s5); flex-wrap: wrap;
font-size: 11px; color: var(--text-soft);
}
.palette-foot .kbd {
font-size: 10px; padding: 1px 5px; margin: 0 2px;
}
@media (max-width: 520px) {
.palette { padding-top: 40px; }
.palette-box { max-height: calc(100vh - 60px); }
.palette-foot { display: none; }
}
/* ==========================================================================
PRODUCT PREVIEW (F2) — modale scheda ricca prodotto
========================================================================== */
.prev {
position: fixed; inset: 0; z-index: 480;
display: flex; align-items: center; justify-content: center;
padding: 24px 16px;
opacity: 0;
transition: opacity 160ms var(--e-out);
}
.prev.on { opacity: 1; }
.prev[hidden] { display: none; }
.prev-veil {
position: absolute; inset: 0;
background: rgba(11,19,41,.58);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.prev-box {
position: relative;
width: min(680px, 100%);
max-height: 88vh;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: 0 24px 64px rgba(11,19,41,.28), 0 6px 16px rgba(11,19,41,.16);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(8px) scale(.98);
transition: transform 220ms var(--e-out-quart);
}
.prev.on .prev-box { transform: translateY(0) scale(1); }
.prev-close {
position: absolute; top: 12px; right: 12px;
z-index: 5;
width: 36px; height: 36px;
border: 0; border-radius: 999px;
background: rgba(255,255,255,.9);
color: var(--ink);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(11,19,41,.14);
transition: background var(--t-2), transform var(--t-2);
}
.prev-close:hover { background: var(--paper); transform: scale(1.05); }
.prev-close svg { width: 16px; height: 16px; }
.prev-body { overflow-y: auto; }
.prev-stage {
position: relative;
aspect-ratio: 3/2;
background: var(--paper-2);
border-bottom: 1px solid var(--line);
}
.prev-stage img {
width: 100%; height: 100%;
object-fit: contain;
padding: 24px;
}
.prev-stage.senza-foto {
display: flex; align-items: center; justify-content: center;
color: var(--line-strong);
}
.prev-stage.senza-foto svg { width: 72px; height: 72px; stroke-width: .8; }
.prev-copy { padding: var(--s6) var(--s6) var(--s5); }
.prev-meta {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: var(--s3);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--blue-mid);
}
.prev-meta .prev-vendor { color: var(--blue-mid); display: inline-flex; align-items: center; }
.prev-meta .prev-cat {
color: var(--text-soft);
border-left: 1px solid var(--line);
padding-left: 8px;
}
/* V9.2: logo brand nel preview modal — leggermente più grande della card
(18px vs 14px) coerente con la gerarchia "scheda dettagliata > card". */
.prev-vendor-has-logo {
padding: 0;
}
.prev-vendor-logo {
height: 18px;
width: auto;
max-width: 120px;
object-fit: contain;
display: block;
filter: grayscale(1) contrast(1.05);
opacity: .95;
}
.prev-vendor-logo[alt="Jabra"] { height: 20px; }
.prev-vendor-logo[alt="Trust"] { height: 18px; }
.prev-vendor-logo[alt="Philips"] { height: 16px; }
.prev-vendor-logo[alt="Logitech"] { height: 15px; }
.prev-vendor-logo[alt="Kensington"] { height: 16px; }
.prev-vendor-logo[alt="Lenovo"] { height: 16px; }
/* Coerente col rack: Jabra tiene i colori pieni (J gialla), niente grayscale. */
.prev-vendor-logo[alt="Jabra"] {
filter: none;
opacity: 1;
}
/* Lenovo: rosso brand pieno, niente grayscale (invert lo farebbe ciano). */
.prev-vendor-logo[alt="Lenovo"] {
filter: none;
opacity: 1;
}
/* Dark mode: inverti loghi per leggibilità su navy — tranne Jabra e Lenovo. */
:root[data-theme="dark"] .prev-vendor-logo {
filter: grayscale(1) invert(1) brightness(1.15) contrast(1.1);
opacity: .92;
}
:root[data-theme="dark"] .prev-vendor-logo[alt="Jabra"] {
filter: none;
opacity: 1;
}
:root[data-theme="dark"] .prev-vendor-logo[alt="Lenovo"] {
filter: none;
opacity: 1;
}
.prev-title {
font-family: var(--display-serif);
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 400;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--ink);
margin: 0 0 var(--s3);
}
.prev-desc {
color: var(--text);
font-size: var(--t-sm);
line-height: 1.55;
margin: 0 0 var(--s4);
}
.prev-badges {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 0 var(--s4);
}
.prev-price {
display: flex; align-items: baseline; gap: var(--s3);
padding: var(--s3) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.prev-price-amount {
font-family: var(--display-serif);
font-size: 28px;
font-weight: 400;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.prev-price-mq {
font-family: var(--mono);
font-size: 11px;
color: var(--text-soft);
letter-spacing: .04em;
}
.prev-actions {
display: flex; gap: var(--s2); flex-wrap: wrap;
padding: var(--s4) var(--s6) var(--s6);
background: var(--paper-2);
}
.prev-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
.prev-actions .btn-solid { background: var(--teal); color: var(--paper); }
.prev-actions .btn-solid:hover { background: var(--teal-600); }
.prev-actions .btn-line { border: 1px solid var(--line-strong); color: var(--ink); }
.prev-actions .btn-line:hover { border-color: var(--teal); color: var(--teal-700); }
@media (max-width: 520px) {
.prev-box { max-height: 100vh; border-radius: 0; }
.prev { padding: 0; }
.prev-actions { flex-direction: column; }
.prev-actions .btn { min-width: 0; }
}
/* ==========================================================================
PRINT PREVIEW (F12) — anteprima documento PDF prima della stampa
Mostra il #printArea popolato da impagina(), scalato per stare in viewport.
========================================================================== */
.pp {
position: fixed; inset: 0; z-index: 470;
display: flex; align-items: stretch; justify-content: center;
padding: 20px 20px;
opacity: 0;
transition: opacity 160ms var(--e-out);
}
.pp.on { opacity: 1; }
.pp[hidden] { display: none; }
.pp-veil {
position: absolute; inset: 0;
background: rgba(11,19,41,.66);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pp-box {
position: relative;
width: min(900px, 100%);
max-height: 100%;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: 0 24px 64px rgba(11,19,41,.28);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(8px);
transition: transform 220ms var(--e-out-quart);
}
.pp.on .pp-box { transform: translateY(0); }
.pp-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s3);
padding: var(--s4) var(--s5) var(--s3);
border-bottom: 1px solid var(--line);
}
.pp-head .kicker {
color: var(--text-soft);
letter-spacing: .14em;
font-size: 11px;
}
.pp-head h2 {
font-family: var(--display-serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -.02em;
color: var(--ink);
line-height: 1.15;
margin: 4px 0 0;
}
.pp-close {
background: transparent;
border: 0;
padding: 6px;
color: var(--text-soft);
border-radius: 999px;
cursor: pointer;
}
.pp-close:hover { background: var(--paper-2); color: var(--ink); }
.pp-close svg { width: 18px; height: 18px; }
.pp-body {
flex: 1;
overflow: auto;
background: var(--paper-3);
padding: var(--s5) var(--s4);
display: flex; flex-direction: column; align-items: center;
gap: var(--s5);
}
.pp-body:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
/* Il #printArea viene reso visibile solo dentro il preview (fuori resta hidden).
Uso un wrapper che scala il foglio A4 794px a fit nel viewport modale. */
.pp-page-wrap {
transform-origin: top center;
transform: scale(var(--pp-scale, 0.72));
margin-bottom: calc((1 - var(--pp-scale, 0.72)) * -1120px);
}
/* Quando #printArea è temporaneamente reparented in .pp-body, override del
display:none originale (era hidden a schermo, visibile solo in @media print). */
#printArea.pp-open {
display: block !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: 794px !important;
z-index: auto !important;
}
#printArea.pp-open .sheet {
margin: 0 0 32px;
}
.pp-body .sheet {
width: 794px;
min-height: 1120px;
background: #fff;
box-shadow: 0 8px 32px rgba(11,19,41,.16);
border-radius: 4px;
padding: 42px 60px 28px;
box-sizing: border-box;
display: flex; flex-direction: column;
position: relative;
}
.pp-body .sheet + .sheet { margin-top: 32px; }
.pp-foot {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
padding: var(--s3) var(--s5);
border-top: 1px solid var(--line);
background: var(--paper-2);
}
.pp-foot-hint {
font-size: 12px;
color: var(--text-soft);
}
.pp-foot-actions { display: flex; gap: var(--s2); }
@media (max-width: 720px) {
.pp { padding: 0; }
.pp-box { max-width: 100vw; border-radius: 0; height: 100vh; max-height: 100vh; }
.pp-body { padding: var(--s3); }
.pp-page-wrap { transform: scale(var(--pp-scale-mobile, 0.42)); margin-bottom: calc((1 - var(--pp-scale-mobile, 0.42)) * -1120px); }
}
/* Flash esterno: applicato a una card quando l'utente vi salta via palette.
Cornice teal transitoria + subtle scale, dura 1200ms. */
@keyframes item-flash-ext {
0%, 100% { box-shadow: none; }
30% { box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .55), 0 12px 32px rgba(var(--teal-rgb), .28); }
}
.item.item-flash-ext {
animation: item-flash-ext 1200ms var(--e-out-quart);
}
@media (prefers-reduced-motion: reduce) {
.item.item-flash-ext { animation: none; box-shadow: 0 0 0 2px var(--teal-200); }
}
.recover-msg:empty { display: none; }
.recover-shortcuts {
margin: var(--s6) 0 0;
padding-top: var(--s4);
border-top: 1px solid var(--line);
font-size: var(--t-xs);
color: var(--text-soft);
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
}
.recover-shortcuts > span { font-weight: 660; color: var(--text); }
.recover-shortcuts .kbd { font-size: 11px; padding: 2px 6px; }
/* ==========================================================================
21. FOOTER
========================================================================== */
.sitefoot {
background: var(--navy);
color: rgba(255,255,255,.74);
font-size: var(--t-sm);
position: relative;
}
.sitefoot::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--teal-rgb),.5) 30%, rgba(var(--teal-rgb),.5) 70%, transparent);
}
.sitefoot-inner {
max-width: var(--wrap); margin: 0 auto;
padding: var(--s10) var(--pad) var(--s8);
display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s9);
}
.sitefoot-brand img { height: 26px; width: auto; margin-bottom: var(--s5); }
.sitefoot-brand p { max-width: 34ch; line-height: 1.6; }
.sitefoot-badge {
display: inline-flex; align-items: center; gap: var(--s2);
margin-top: var(--s5);
padding: 7px 13px 7px 11px;
font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
color: rgba(255,255,255,.86);
border: 1px solid rgba(var(--teal-rgb),.4);
border-radius: 999px;
background: rgba(var(--teal-rgb),.08);
transition: background 200ms var(--e-out), border-color 200ms var(--e-out), color 200ms var(--e-out);
}
.sitefoot-badge svg { width: 15px; height: 15px; flex: none; color: var(--teal-200); }
.sitefoot-badge:hover {
color: #fff;
border-color: rgba(var(--teal-rgb),.7);
background: rgba(var(--teal-rgb),.16);
text-decoration: none;
}
.sitefoot-col h3 {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.48);
margin-bottom: var(--s4);
}
.sitefoot-col li + li { margin-top: var(--s3); }
.sitefoot-col a, .sitefoot-col button {
color: rgba(255,255,255,.78);
background: none; border: 0; padding: 0;
font: inherit; text-align: left; cursor: pointer;
}
.sitefoot-col a:hover, .sitefoot-col button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sitefoot-rule { border-top: 1px solid rgba(255,255,255,.10); }
.sitefoot-rule-inner {
max-width: var(--wrap); margin: 0 auto;
padding: var(--s5) var(--pad);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3) var(--s5); flex-wrap: wrap;
font-size: var(--t-xs); color: rgba(255,255,255,.74);
letter-spacing: .01em;
}
.sitefoot-rule a { color: rgba(255,255,255,.82); }
.sitefoot-rule a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sitefoot-legal { display: flex; gap: var(--s4) var(--s5); flex-wrap: wrap; }
/* ==========================================================================
22. RESPONSIVE
========================================================================== */
@media (max-width: 1240px) {
:root { --pad: 32px; --t-display: 46px; --t-numeral: 56px; --s12: 96px; }
.shelf { grid-template-columns: 212px minmax(0, 1fr); gap: var(--s7); }
.review { grid-template-columns: minmax(0, 1fr) 296px; gap: var(--s7); }
.band-head { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 1060px) {
:root { --t-display: 40px; --t-2xl: 29px; --t-xl: 24px; }
.mh-app { display: none; }
.mh-link-label { display: none; }
.mh-link { padding: 9px; }
.band-head { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.review { grid-template-columns: minmax(0, 1fr); }
.review-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sitefoot-inner { grid-template-columns: 1fr 1fr; gap: var(--s8); }
.sitefoot-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
.hero-benefits { grid-template-columns: minmax(0, 1fr); }
.benefit { padding: var(--s5) 0 var(--s6); border-top: 1px solid rgba(255,255,255,.10); }
.benefit:first-child { border-top: 0; }
.benefit + .benefit { padding-left: 0; border-left: 0; }
.flow { padding: var(--s9) 0; }
/* filtri come pannello richiamabile */
.sieve-open { display: inline-flex; }
.shelf { grid-template-columns: minmax(0, 1fr); }
.sieve {
position: fixed; inset: 0 0 0 auto; z-index: 200;
width: 348px; max-width: 92%;
background: var(--paper);
border-left: 1px solid var(--line);
box-shadow: -1px 0 40px rgba(0,0,0,.12);
transform: translateX(100%);
visibility: hidden;
transition: transform var(--ease), visibility var(--ease);
display: flex; flex-direction: column;
}
.sieve.on { transform: none; visibility: visible; }
.sieve-sticky { position: static; overflow-y: auto; padding: var(--s6); flex: 1; }
.sieve-sticky > .sieve-title { display: none; }
.sieve-panel-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
padding: var(--s5) var(--s6);
border-bottom: 1px solid var(--ink);
}
.sieve-panel-head h3 { font-size: var(--t-md); }
}
@media (max-width: 720px) {
:root { --pad: 20px; --head: 56px; --t-display: 34px; --t-2xl: 25px; --t-xl: 21px; --t-numeral: 46px; }
/* Panel 3 mobile: superficie più semplice, padding ridotto */
.panel#panel3 { padding: var(--s5) var(--s4) var(--s6); background: var(--paper-2); }
.panel#panel3 > .panel-ask { padding-bottom: var(--s5); margin-bottom: var(--s5); }
.panel#panel3 .doc { padding: var(--s5) var(--s4); }
.panel#panel3 .doc + .doc { margin-top: var(--s5); }
.panel#panel3 .issue { padding: var(--s5) var(--s5); margin-top: var(--s6); }
.panel#panel3 .issue h3 { font-size: var(--t-lg); }
.masthead-inner { gap: var(--s3); }
.mh-logo img { height: 24px; }
.mh-bundle { margin-left: var(--s2); padding: 9px 12px; }
.mh-bundle-label { display: none; }
/* Hero mobile: immagine sotto il testo, layout impilato */
.hero { min-height: auto; }
.hero-inner { padding-top: var(--s8); flex: none; }
.hero-copy { max-width: none; padding-bottom: var(--s6); }
.hero-copy h1 { font-size: clamp(28px, 8.5vw, 38px); }
.hero-visual {
position: relative; inset: auto; z-index: auto;
pointer-events: auto; height: 240px; width: 100%; margin: 0;
border-radius: 0;
}
.hero-visual::before {
background:
linear-gradient(to bottom,
var(--navy) 0%,
rgba(var(--navy-rgb),.65) 22%,
rgba(var(--navy-rgb),.20) 50%,
transparent 70%
);
}
.hero-visual .hero-img-wrap { height: 100%; }
/* 16% 65%: qui il crop è solo verticale (la larghezza combacia col viewport); abbassa ulteriormente la visuale */
.hero-visual .hero-img-wrap img { height: 100%; object-fit: cover; object-position: 16% 65%; }
.hero-actions { margin-top: var(--s6); gap: var(--s3); flex-direction: column; align-items: stretch; }
.hero-cta-primary { justify-content: center; padding: 14px 20px; }
.hero-cta-secondary { align-self: flex-start; }
.noteline-inner { gap: var(--s2); flex-direction: column; align-items: flex-start; }
.noteline-dot { display: none; }
.tool-head { padding: var(--s6) 0 var(--s3); }
.steps { gap: var(--s3); margin-bottom: var(--s4); }
.step-name { font-size: var(--t-xs); }
.cat-info { padding: var(--s3) var(--s4) var(--s4); }
.cat-name { font-size: var(--t-xs); }
.cat-mark { top: var(--s2); right: var(--s2); width: 18px; height: 18px; }
.rack { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.panel-ask { display: block; }
.panel-ask .btn { margin-top: var(--s4); }
.panel-foot { flex-direction: column-reverse; }
.panel-foot .btn { width: 100%; }
.issue { grid-template-columns: minmax(0, 1fr); }
.issue .btn { width: 100%; }
.issue-actions { align-items: stretch; }
/* tabella come elenco a filetti */
.scroller { overflow: visible; }
.ledger { min-width: 0; display: block; }
.ledger thead { display: none; }
.ledger tbody { display: grid; }
.ledger tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s3) var(--s4);
padding: var(--s5) 0;
border-bottom: 1px solid var(--line);
}
.ledger tr:first-child { padding-top: 0; }
.ledger td { display: block; padding: 0; border: 0; }
.ledger td.k-name { grid-column: 1; }
.ledger td.k-x { grid-column: 2; grid-row: 1; justify-self: end; }
.ledger td.k-code { grid-column: 1 / -1; text-align: left; }
.ledger td.k-qty { grid-column: 1; text-align: left; }
.ledger td.k-price { grid-column: 2; text-align: right; align-self: start; }
.ledger td.k-sub {
grid-column: 1 / -1;
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
padding-top: var(--s3);
border-top: 1px dashed var(--line);
font-size: var(--t-md);
}
.ledger td[data-k]::before {
content: attr(data-k);
display: block;
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-soft);
margin-bottom: 4px;
}
.ledger td.k-sub::before { margin-bottom: 0; }
/* Riga categoria in mobile: solo etichetta full-width, senza griglia interna */
.ledger .ledger-cat { display: block; padding: var(--s6) 0 var(--s2); border: 0; }
.ledger .ledger-cat:first-child { padding-top: 0; }
.ledger .ledger-cat td {
display: block; padding: 0 0 var(--s2);
border-bottom: 2px solid var(--ink);
}
.tray { width: 100%; border-left: 0; }
.tray-head, .tray-body, .tray-foot { padding-left: var(--s5); padding-right: var(--s5); }
body.with-commandbar { padding-bottom: 62px; }
.commandbar-inner { gap: var(--s4); padding: var(--s2) var(--pad); }
.cb-gauge, .cb-rule, .cb-cell.soglia { display: none; }
.cb-cta { padding: 10px 16px; }
.dlg { padding: 0; align-items: flex-start; }
.dlg-box { max-width: none; min-height: 100%; border-radius: 0; }
.dlg-head { padding: var(--s7) var(--s5) var(--s5); }
.dlg-body { padding: 0 var(--s5) var(--s7); }
.dlg-foot { padding: var(--s5); flex-direction: column; }
.dlg-foot .btn { width: 100%; }
.seal-code { font-size: 22px; }
.seal-code.md { font-size: 19px; }
.seal-code.lg { font-size: 17px; }
.seal-code.xl { font-size: 14px; }
.sitefoot-inner { grid-template-columns: 1fr; gap: var(--s7); padding-top: var(--s9); }
.sitefoot-rule-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
/* la barra tiene solo il totale e l'azione */
.cb-cell.bundle { display: none; }
.cb-long { display: none; }
.cb-short { display: inline; }
.commandbar-inner { gap: var(--s3); padding: var(--s2) var(--s3); }
.cb-value.big { font-size: var(--t-md); }
.cb-cta { padding: 8px 14px; font-size: var(--t-xs); min-height: 40px; }
.shelf-bar { flex-direction: column; align-items: stretch; }
.shelf-tools { flex-wrap: wrap; }
.shelf-sort { flex: 1 1 100%; }
.shelf-sort select { flex: 1; min-width: 0; }
.sieve-open { flex: 1 1 100%; }
/* l'indicatore di passo si restringe troppo a larghezze molto piccole */
.step-name { display: none; }
}
@media (max-width: 360px) {
/* Larghezze estreme: nascondi anche lo stato soglia, resta totale + azione */
.cb-cell.soglia { display: none; }
.cb-gauge { display: none; }
}
/* ==========================================================================
22-bis. MOVIMENTO
--------------------------------------------------------------------------
Sistema della v24: due curve, tre durate, e animazioni brevi legate a un
fatto preciso (una scelta, una quantita che cambia, un passo che avanza).
Tutto passa dalla classe .motion sull'elemento radice: se il sistema
dichiara "riduci il movimento", la classe non viene messa e non resta
nessuna animazione da disattivare a mano.
========================================================================== */
/* entrata della hero */
html.motion .hero-anim { opacity: 0; transform: translateY(14px); }
html.motion .hero-ready .hero-anim {
opacity: 1; transform: none;
transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
}
html.motion .hero-ready .hero-anim:nth-child(1) { transition-delay: 60ms; }
html.motion .hero-ready .hero-anim:nth-child(2) { transition-delay: 150ms; }
html.motion .hero-ready .hero-anim:nth-child(3) { transition-delay: 240ms; }
html.motion .hero-ready .hero-anim:nth-child(4) { transition-delay: 330ms; }
html.motion .hero-visual { opacity: 0; }
html.motion .hero-ready .hero-visual {
opacity: 1;
transition: opacity 1100ms cubic-bezier(.16,1,.3,1) 80ms;
}
/* comparsa allo scorrimento */
html.motion .rise { opacity: 0; transform: translateY(20px) scale(.993); }
html.motion .rise.in {
opacity: 1; transform: none;
transition: opacity 680ms cubic-bezier(.16,1,.3,1), transform 680ms cubic-bezier(.16,1,.3,1);
}
/* onda al clic */
.ripple {
position: absolute; border-radius: 50%;
background: rgba(255,255,255,.42);
transform: scale(0); pointer-events: none;
}
.btn-line .ripple, .btn-quiet .ripple, .btn-solid .ripple { background: rgba(var(--navy-rgb),.14); }
.btn-accent .ripple { background: rgba(255,255,255,.34); }
html.motion .ripple { animation: rippleOut 320ms var(--e-out) forwards; }
/* scelta di una categoria */
html.motion .cat-cell.picked { animation: pickPop 320ms var(--e-spring); }
html.motion .cat-cell[aria-pressed="true"] .cat-mark svg path {
stroke-dasharray: 26; stroke-dashoffset: 26;
animation: drawCheck 300ms var(--e-out) 40ms forwards;
}
/* quantita che cambia */
html.motion .stepper input.bump { animation: qtyBump 320ms var(--e-spring); }
/* Righe che entrano nel riepilogo (ledger) — mount iniziale.
V9.2: .tray-line anima SOLO se ha .is-new (aggiunta nuova al bundle),
non ad ogni re-render (che scattava anche cliccando + / -). */
html.motion .ledger tbody tr { animation: rowIn 380ms var(--e-out) both; }
html.motion .ledger tbody tr:nth-child(2) { animation-delay: 50ms; }
html.motion .ledger tbody tr:nth-child(3) { animation-delay: 100ms; }
html.motion .ledger tbody tr:nth-child(4) { animation-delay: 150ms; }
html.motion .ledger tbody tr:nth-child(n+5) { animation-delay: 200ms; }
html.motion .tray-line.is-new { animation: rowIn 380ms var(--e-out) both; }
/* Schede del catalogo che compaiono.
V9.2: .rack .item anima SOLO se ha .is-new (codice non presente nel DOM
al render precedente). Deseleziona una categoria: le card che restano
non ri-animano, quelle che spariscono spariscono senza flash. */
html.motion .rack .item.is-new { animation: fadeUp 340ms var(--e-out) both; }
html.motion .rack .item.is-new:nth-child(2) { animation-delay: 40ms; }
html.motion .rack .item.is-new:nth-child(3) { animation-delay: 80ms; }
html.motion .rack .item.is-new:nth-child(n+4) { animation-delay: 120ms; }
/* conferma dell'aggiunta */
html.motion .item-flash.show { animation: fadeUp 260ms var(--e-out); }
/* anello quando la soglia viene raggiunta */
html.motion .gauge.appena-valida::after {
content: ""; position: absolute; inset: -1px;
border: 2px solid var(--teal); border-radius: var(--r-sm);
animation: entryRing 900ms var(--e-out) forwards;
pointer-events: none;
}
/* avviso temporaneo */
.toast {
position: fixed; left: 50%; bottom: var(--s6); z-index: 320;
transform: translate(-50%, 14px);
display: flex; align-items: center; gap: var(--s2);
max-width: calc(100vw - 32px);
padding: 12px 18px;
background: var(--navy); color: #fff;
border-radius: var(--r-xs);
box-shadow: var(--sh-4);
font-size: var(--t-sm); font-weight: 600;
opacity: 0; visibility: hidden;
transition: opacity var(--t-2), transform var(--t-2), visibility var(--t-2);
}
.toast svg { width: 15px; height: 15px; flex: none; color: var(--mint); }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.toast-error { background: var(--alert); }
.toast.toast-error svg { color: #ffd7d0; }
.toast.toast-error .toast-undo { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.32); }
.toast-undo {
margin-left: var(--s4);
padding: 2px 10px;
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.28);
border-radius: 4px;
font-size: var(--t-xs); font-weight: 660;
color: #fff; cursor: pointer; white-space: nowrap;
flex-shrink: 0;
}
.toast-undo:hover { background: rgba(255,255,255,.26); }
/* con la barra dei comandi a video l'avviso le sta sopra */
body.with-commandbar .toast { bottom: 96px; }
@keyframes rippleOut { to { transform: scale(2.6); opacity: 0; } }
@keyframes pickPop { 0% { transform: scale(.985); } 55% { transform: scale(1.014); } 100% { transform: scale(1); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@keyframes qtyBump { 0% { transform: scale(.86); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes entryRing { 0% { transform: scale(.97); opacity: .9; } 80% { transform: scale(1.04); opacity: 0; } 100% { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes catEntrance { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes stepPaint { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes badgePop { 0% { transform: scale(.6); } 65% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes flowNumReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---- entrata categorie: stagger per 16 celle ---- */
html.motion #panel1.on .cat-cell { animation: catEntrance 360ms var(--e-out) both; }
html.motion #panel1.on .cat-cell:nth-child(2) { animation-delay: 28ms; }
html.motion #panel1.on .cat-cell:nth-child(3) { animation-delay: 56ms; }
html.motion #panel1.on .cat-cell:nth-child(4) { animation-delay: 84ms; }
html.motion #panel1.on .cat-cell:nth-child(5) { animation-delay: 112ms; }
html.motion #panel1.on .cat-cell:nth-child(6) { animation-delay: 140ms; }
html.motion #panel1.on .cat-cell:nth-child(7) { animation-delay: 168ms; }
html.motion #panel1.on .cat-cell:nth-child(8) { animation-delay: 196ms; }
html.motion #panel1.on .cat-cell:nth-child(9) { animation-delay: 224ms; }
html.motion #panel1.on .cat-cell:nth-child(10) { animation-delay: 252ms; }
html.motion #panel1.on .cat-cell:nth-child(11) { animation-delay: 280ms; }
html.motion #panel1.on .cat-cell:nth-child(12) { animation-delay: 308ms; }
html.motion #panel1.on .cat-cell:nth-child(n+13) { animation-delay: 336ms; }
/* celle già selezionate non devono lampeggiare al ritorno */
html.motion #panel1.on .cat-cell[aria-pressed="true"] { animation: none; }
/* Una volta completata l'entrata (JS aggiunge .settled dopo ~800ms), NESSUNA
cella deve più animarsi. Serve a evitare il flash che si generava quando
`aria-pressed=true` veniva rimosso: sparendo l'override `animation:none`,
il browser riavviava `catEntrance` (360ms + stagger fino a 336ms) sulla
cella deselezionata. Con .settled la regola `animation:none` copre tutte
le celle a prescindere dallo stato pressed. */
html.motion #panel1.on.settled .cat-cell { animation: none; }
/* ---- pennellata sul bordo dello step attivo ---- */
html.motion .step::before {
content: '';
position: absolute; top: -2px; left: 0;
height: 2px; width: 100%;
border-radius: 1px;
transform: scaleX(0);
transform-origin: left;
}
html.motion .step.on::before {
background: var(--ink);
animation: stepPaint 480ms cubic-bezier(.16,1,.3,1) forwards;
}
html.motion .step.was::before { transform: scaleX(1); background: var(--teal); }
/* ==========================================================================
23. ACCESSIBILITA
========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.masthead :where(a, button):focus-visible,
.commandbar :where(a, button):focus-visible,
.sitefoot :where(a, button):focus-visible { outline-color: var(--focus-on-navy); outline-width: 3px; }
.control:focus-visible { outline-offset: 0; outline-width: 2px; outline-color: var(--blue-mid); border-color: var(--blue-mid); }
.skip {
position: absolute; left: var(--s5); top: -64px; z-index: 400;
padding: 12px 18px;
background: var(--paper); color: var(--blue);
border: 1px solid var(--blue); border-radius: var(--r-xs);
font-size: var(--t-sm); font-weight: 660;
transition: top var(--ease);
}
.skip[hidden] { display: none; }
.skip:focus { top: var(--s3); text-decoration: none; }
.skip.skip-2 { left: calc(var(--s5) + 210px); }
.skip.skip-2:focus { top: var(--s3); }
.sr {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* ==========================================================================
24. STAMPA — DOCUMENTO A4 IMPAGINATO
--------------------------------------------------------------------------
Foglio di stile del documento portato dalla v24 senza cambiarne l'impianto:
fogli A4 espliciti da 794x1120 px, testata e pie di pagina su ogni foglio,
numerazione "Pagina N di M".
⚠ NON SPOSTARE DENTRO @media print { }.
Le regole DEVONO applicarsi anche a schermo (con #printArea hidden) perché
`impagina()` in app.js le usa per misurare l'altezza dei blocchi via
offsetHeight prima di distribuirli tra i fogli A4. Se le regole vivessero
solo in @media print, JS misurerebbe blocchi non stilizzati e la pagination
collasserebbe → PDF di ordinativo PA rotto. Confermato dal test: v24 aveva
già questo pattern.
I --pr-* sono scopati a #printArea, non inquinano il tema principale.
========================================================================== */
#printArea{display:none;}
#printArea{
--pr-navy:#0b1329;
--pr-blue:#3b82f6;
--pr-teal:#10b981;
--pr-ink:#0f172a;
--pr-grey:#475569;
--pr-label:#64748b;
--pr-line:#cbd5e1;
--pr-line-2:#e2e8f0;
--pr-soft:#f6f8fb;
font-family:'Lexend','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
color:var(--pr-ink);
background:#fff;
-webkit-font-smoothing:antialiased;
}
/* Foglio A4: 794×1123 px a 96 dpi. L'altezza è di un pixel più corta per non
far tracimare una pagina bianca in coda. */
#printArea .sheet{
position:relative;box-sizing:border-box;
width:794px;height:1120px;
padding:42px 60px 28px;
background:#fff;overflow:hidden;
display:flex;flex-direction:column;
}
#printArea .sheet + .sheet{margin-top:24px;}
#printArea .sheet-body{flex:1 1 auto;min-height:0;}
/* ---- filo superiore e testata ---- */
#printArea .rule{height:3px;background:linear-gradient(90deg,var(--pr-teal),var(--pr-blue));border-radius:2px;}
#printArea .head{
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
padding:12px 0 10px;border-bottom:1px solid var(--pr-line);margin-bottom:19px;
}
#printArea .head-logo{height:30px;width:auto;display:block;}
#printArea .head-meta{text-align:right;font-size:9px;line-height:1.55;color:var(--pr-label);
text-transform:uppercase;letter-spacing:.07em;display:flex;flex-direction:column;gap:2px;align-items:flex-end;}
#printArea .head-meta .hm-kicker{font-size:8.5px;font-weight:700;color:var(--pr-teal);letter-spacing:.12em;}
#printArea .head-meta b{color:var(--pr-navy);font-size:10.5px;letter-spacing:.04em;font-weight:700;}
#printArea .head-meta .hm-doc{color:var(--pr-grey);font-size:8.5px;letter-spacing:.06em;font-family:Consolas,'Liberation Mono',monospace;text-transform:none;}
#printArea .head-meta .hm-doc b{color:var(--pr-navy);font-size:9.5px;}
/* text-transform: none e OBBLIGATORIO qui, non e una rifinitura.
Il codice CNV e sensibile alle maiuscole: la lettera che porta la
quantita vale 10 se minuscola e 36 se maiuscola. L'intestazione
ripetuta erediterebbe l'uppercase di .head-meta e stamperebbe un
codice che, ricopiato nel configuratore, carica quantita sbagliate:
la stessa configurazione passava da 1.460 a 5.256 euro, accettata
senza un avviso. */
#printArea .head-title .hm-doc-mini{font-family:Consolas,'Liberation Mono',monospace;color:var(--pr-navy);font-weight:700;letter-spacing:.04em;text-transform:none;}
/* testata ridotta delle pagine successive */
#printArea .head.cont{padding:10px 0 8px;margin-bottom:18px;align-items:center;}
#printArea .head.cont .head-logo{height:17px;}
#printArea .head.cont .head-title{
flex:1 1 auto;text-align:right;font-size:9.5px;color:var(--pr-grey);
text-transform:uppercase;letter-spacing:.06em;
}
#printArea .head.cont .head-title b{color:var(--pr-navy);}
/* ---- piè di pagina ---- */
#printArea .foot{
flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding-top:9px;border-top:1px solid var(--pr-line);
font-size:8.5px;color:var(--pr-label);letter-spacing:.03em;
}
#printArea .foot img{height:10px;width:auto;display:block;opacity:.85;}
#printArea .foot .f-mid{flex:1 1 auto;text-align:center;}
#printArea .foot .f-right{flex:0 0 auto;font-weight:600;color:var(--pr-grey);white-space:nowrap;}
/* ---- titolo del documento ---- */
#printArea .doc-title{font-family:'Lexend','Segoe UI',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--pr-navy);margin:0 0 5px;line-height:1.15;}
#printArea .doc-sub{font-size:11.5px;color:var(--pr-grey);margin:0;}
/* ---- blocchi ---- */
#printArea .pb{margin:0 0 14px;}
#printArea .pb:last-child{margin-bottom:0;}
/* align-items:start (non stretch): se il nome dell'ente e lungo la scheda
"Dati dell'ente" cresce, ma "Configurazione" non deve allungarsi a vuoto
per restare pari: ognuna prende solo l'altezza che il suo contenuto usa. */
#printArea .cols2{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start;}
#printArea .card{
box-sizing:border-box;border:1px solid var(--pr-line);border-radius:8px;
padding:10px 14px 9px;background:#fff;
}
#printArea .card.soft{background:var(--pr-soft);}
#printArea .card-title{
font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
color:var(--pr-label);margin-bottom:8px;
}
/* Metriche configurazione: griglia key/value con label piccola e valore
prominente. Piu leggibile della bullet list. */
#printArea .metrics{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;
}
#printArea .metrics li{display:grid;gap:2px;min-width:0;}
#printArea .metrics .m-lbl{
font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
color:var(--pr-label);
}
#printArea .metrics .m-val{
font-size:11.5px;font-weight:700;color:var(--pr-navy);line-height:1.35;
font-variant-numeric:tabular-nums;word-break:break-word;
}
#printArea .metrics .m-val small{font-size:9px;font-weight:500;color:var(--pr-grey);letter-spacing:0;}
#printArea .metrics .m-cats{grid-column:1 / -1;padding-top:6px;border-top:1px solid var(--pr-line-2);margin-top:2px;}
#printArea .metrics .m-cats .m-val{font-size:10px;font-weight:600;color:var(--pr-ink);line-height:1.45;}
#printArea .who{display:grid;grid-template-columns:1fr;gap:9px;}
#printArea .who-item{min-width:0;}
#printArea .who-label{display:block;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--pr-label);margin-bottom:2px;}
#printArea .who-value{font-size:11.5px;font-weight:700;color:var(--pr-navy);word-break:break-word;line-height:1.35;}
/* ---- tabella delle voci ---- */
#printArea .items{width:100%;border-collapse:collapse;table-layout:fixed;}
#printArea .items th{
text-align:left;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
color:var(--pr-label);padding:0 7px 7px;border-bottom:1.5px solid var(--pr-navy);
}
#printArea .items th.c{text-align:center;}
#printArea .items th.r{text-align:right;}
#printArea .items td{padding:8px 7px;font-size:11px;vertical-align:top;border-bottom:1px solid var(--pr-line-2);}
/* filo di famiglia sulla prima colonna, come nel riepilogo a schermo.
È un'ombra interna, non un bordo: così non entra nel calcolo delle colonne
e la colonna dei codici resta larga come previsto. */
#printArea .items tbody td:first-child{box-shadow:inset 3px 0 0 var(--pr-teal);padding-left:11px;}
#printArea .items tbody tr:nth-child(even) td{background:#f8fafc;}
#printArea .it-label{display:block;font-weight:700;color:var(--pr-navy);font-size:11.5px;line-height:1.3;}
#printArea .it-sub{display:block;color:var(--pr-grey);font-size:9.5px;font-weight:400;line-height:1.45;margin-top:2px;}
#printArea .it-tags{display:block;margin-top:4px;}
#printArea .it-tag{
display:inline-block;font-size:8.5px;font-weight:700;padding:2px 6px;border-radius:3px;margin:0 3px 2px 0;
}
#printArea .it-tag.accent{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;}
#printArea .it-tag.warn{background:#fffbeb;border:1px solid #fde68a;color:#b45309;}
#printArea .it-code{font-family:Consolas,'Liberation Mono',monospace;font-size:9.5px;font-weight:600;color:var(--pr-blue);word-break:break-all;line-height:1.35;}
#printArea .it-qty{text-align:center;font-weight:700;color:var(--pr-navy);font-variant-numeric:tabular-nums;}
#printArea .it-price{text-align:right;font-weight:700;color:var(--pr-navy);white-space:nowrap;font-variant-numeric:tabular-nums;}
#printArea .items-cont{font-size:8.5px;color:var(--pr-label);text-transform:uppercase;letter-spacing:.07em;padding:6px 7px 0;}
/* ---- HEADER DI GRUPPO NEL RIEPILOGO ----
Introdotti in v9.2 per raggruppare l'ordinativo su ordini misti
(prodotti principali + accessori). Due livelli:
.row-macro: sezione (PRODOTTI PRINCIPALI / ACCESSORI E PERIFERICHE) —
banda navy piena, tipografia caps, alto peso visivo.
.row-cat: categoria con conteggio articoli + subtotale — banda chiara,
bordo teal a sinistra per continuità con le righe articolo.
Le regole devono venire DOPO la zebra striping perché hanno stessa
specificity (0,2,1) e vincono per source-order — così i colori di
header non vengono sporcati dal :nth-child(even). */
#printArea .items tbody tr.row-macro td{
background:var(--pr-navy);color:#fff;
font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:9px 11px;border-bottom:0;box-shadow:none;
}
#printArea .items tbody tr.row-cat td{
background:#eef2f7;color:var(--pr-navy);
padding:7px 11px 6px;border-bottom:1px solid var(--pr-line);
box-shadow:inset 3px 0 0 var(--pr-teal);
overflow:hidden; /* contain i float sotto */
}
/* Float invece di display:flex sul td (che ha resa incoerente su Edge legacy
e alcune print engine). rc-name a sinistra, rc-meta a destra. */
#printArea .rc-name{
float:left;
font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;
}
#printArea .rc-meta{
float:right;
font-size:8.5px;font-weight:600;color:var(--pr-grey);
text-transform:uppercase;letter-spacing:.08em;font-variant-numeric:tabular-nums;
white-space:nowrap;line-height:1.7;
}
/* Riga articolo immediatamente dopo un header di categoria: rimuovi il
bordo top che nasce dal border-bottom del cat header, per attaccarli
visivamente come "gruppo". */
#printArea .items tbody tr.row-cat + tr.row-item td{border-top:0;}
/* ---- totale ----
Blocco navy pieno, senza gradient decorativi. Filetto teal sul lato
sinistro come marcatura del brand. Typography chiara e gerarchica. */
#printArea .total{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;
background:var(--pr-navy);color:#fff;
border-radius:6px;padding:13px 22px 12px;
border-left:3px solid var(--pr-teal);
}
#printArea .total .t-lbl{
font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
color:rgba(255,255,255,.84);
}
#printArea .total .t-val{text-align:right;}
#printArea .total .t-val b{
display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;
font-variant-numeric:tabular-nums;color:#fff;
}
#printArea .total .t-val span{
display:block;font-size:8.5px;font-weight:500;color:rgba(255,255,255,.66);
margin-top:4px;letter-spacing:.04em;
}
/* ---- come procedere ----
Workflow numerato 01/02/03 con numeri prominenti e testi discorsivi.
Coerente con il "Come funziona" del sito. */
#printArea .order{border:1px solid var(--pr-line);border-radius:8px;padding:11px 16px 10px;background:var(--pr-soft);}
#printArea .order-title{
font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
color:var(--pr-label);margin-bottom:10px;
}
#printArea .order-steps{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
#printArea .order-step{display:grid;gap:4px;}
#printArea .order-step .os-n{
font-family:'Lexend','Segoe UI',sans-serif;
font-size:20px;font-weight:800;color:var(--pr-navy);
line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
border-bottom:2px solid var(--pr-teal);
padding-bottom:5px;margin-bottom:3px;width:22px;
}
#printArea .order-step .os-txt{
font-size:9.5px;line-height:1.5;color:var(--pr-ink);
}
#printArea .order-step .os-txt b{color:var(--pr-navy);font-weight:700;}
#printArea .order .o-note{margin-top:10px;padding-top:9px;border-top:1px solid var(--pr-line-2);font-size:8.5px;color:var(--pr-label);line-height:1.5;}
/* promemoria immagini: stessa riga di note pratiche, non un riquadro a parte.
Nel configuratore online le immagini prodotto sono reali e indicative; qui
nel PDF (che non ne contiene) resta il richiamo a verificare la scheda
tecnica, riformulato per non parlare di immagini "in questo documento". */
#printArea .order .o-reminder{margin-top:5px;font-size:8.5px;color:var(--pr-label);line-height:1.5;}
#printArea .order .o-reminder b{color:var(--pr-navy);font-weight:700;}
/* Backward-compat: ol legacy nel caso di modelli vecchi */
#printArea ol{list-style:decimal;}
#printArea ul{list-style:none;}
#printArea .order ol{margin:0;padding-left:16px;}
#printArea .order ol li{font-size:10.5px;line-height:1.55;color:var(--pr-ink);margin-bottom:3px;}
#printArea .order ol li b{color:var(--pr-navy);}
/* ---- codice configurazione e QR ----
Area "hero" di ripresa: kicker CODICE CONFIGURAZIONE, codice CNV grande
e leggibile, QR sufficientemente grande per scansione da carta stampata
(100x100 minimo), micro-copy di istruzione. */
#printArea .recall{
display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:24px;
align-items:center;
border:1px solid var(--pr-line);border-radius:8px;
padding:12px 18px 11px;
background:var(--pr-soft);
}
#printArea .recall .r-txt{min-width:0;}
#printArea .recall .r-kicker{
display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.14em;color:var(--pr-teal);margin-bottom:6px;
}
#printArea .recall .r-code{
display:block;font-family:Consolas,'Liberation Mono',monospace;
font-size:15px;font-weight:800;color:var(--pr-navy);line-height:1.15;
letter-spacing:.04em;
overflow-wrap:anywhere;word-break:break-word;
margin-bottom:8px;
}
#printArea .recall .r-code.md{font-size:13px;}
#printArea .recall .r-code.lg{font-size:12px;}
#printArea .recall .r-code.xl{font-size:10.5px;}
#printArea .recall .r-hint{
font-size:9px;line-height:1.55;color:var(--pr-grey);
max-width:38ch;
}
#printArea .recall .r-hint b{color:var(--pr-navy);}
#printArea .recall .r-qr{text-align:center;justify-self:end;}
#printArea .recall .r-qr svg{
display:block;width:104px;height:104px;
border:1px solid var(--pr-line);border-radius:4px;padding:4px;background:#fff;
}
/* Sotto il QR una sola riga: il dominio da digitare se la scansione non va
a buon fine (fotocopia, scanner sbiadito). Una riga sola, niente più
didascalia + URL completo separati: evitava l'andare a capo su piu righe
con carattere orfano, e teneva il blocco più alto del necessario. */
#printArea .recall .r-qr .r-qr-cap{
display:block;margin-top:5px;font-size:8px;color:var(--pr-label);
line-height:1.3;letter-spacing:.02em;
text-transform:none;font-weight:700;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;
}
/* ---- misuratore fuori schermo ---- */
#printArea.measuring{
display:block !important;position:absolute !important;left:-20000px !important;top:0 !important;
width:794px !important;
}
#printArea.measuring .sheet{height:auto !important;display:block !important;overflow:visible !important;}
#printArea.measuring .sheet-body{min-height:0 !important;}
@media print{
@page{size:A4;margin:0;}
html,body{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
body{margin:0 !important;padding:0 !important;}
body > *{display:none !important;}
#printArea{display:block !important;}
#printArea .sheet{page-break-after:always;break-after:page;margin:0 !important;box-shadow:none;}
#printArea .sheet:last-child{page-break-after:auto;break-after:auto;}
}
/* ==========================================================================
TRANSIZIONE EDITORIALE → CONFIGURATORE
========================================================================== */
.tool {
background: var(--paper-2);
background-image:
radial-gradient(ellipse at 100% 0, rgba(var(--teal-rgb),.04) 0, transparent 50%),
radial-gradient(ellipse at 0 100%, rgba(var(--navy-rgb),.025) 0, transparent 50%);
border-top: 2px solid var(--ink);
padding-bottom: var(--s12);
}
.tool-kicker {
display: block;
padding-top: 0;
border-top: none;
margin-bottom: var(--s3);
}
.tool-head {
padding: var(--s7) 0 var(--s4);
}
/* Page heading del tool: sotto la kicker "Configuratore", sopra la descrizione.
Serif meno prominente del display hero (54px), sans invece per contrasto
editoriale con la hero e coerenza col resto della UI del configuratore.
Dimensione tra --t-xl (27) e --t-2xl (34): 30px calibrato. */
.tool-head .tool-title {
margin: var(--s3) 0 0;
font-family: var(--display);
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 660;
color: var(--ink);
letter-spacing: -0.016em;
line-height: 1.15;
max-width: 32ch;
}
.tool-head .lede { margin-top: var(--s3); font-size: var(--t-md); color: var(--text); max-width: 62ch; line-height: 1.55; }
@media (max-width: 720px) {
.tool-head .tool-title { font-size: clamp(22px, 5.6vw, 26px); }
.tool-head .lede { font-size: var(--t-sm); }
}
/* ==========================================================================
CATEGORY GRID — auto-fill nel .cat-index base. Solo il caso <520px forza
una colonna singola per evitare card troppo strette.
========================================================================== */
@media (max-width: 520px) {
.cat-index { grid-template-columns: minmax(0, 1fr); }
/* aspect-ratio 3:2 e padding 0 sono gia' nella regola base: nessun override */
}
/* ==========================================================================
BRANDS — firma istituzionale come prova di affidabilita del catalogo.
Layout a due colonne desktop: intestazione a sx, muro loghi a dx.
========================================================================== */
.brands {
margin-top: var(--s7);
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.brands-inner {
display: grid;
grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
gap: var(--s7);
align-items: center;
}
.brands-head { display: grid; gap: var(--s2); }
.brands-kicker {
color: var(--text-soft);
letter-spacing: .18em;
}
.brands-hint {
font-size: var(--t-xs);
color: var(--text-soft);
line-height: 1.5;
margin: 0;
max-width: 32ch;
}
.brands-list {
display: flex;
align-items: center;
/* space-between distribuisce i loghi con spazi equidistanti sul muro dx,
sostituendo la vecchia strategia flex-end + gap fisso (che ammucchiava
i loghi a destra). Ora 6 brand (aggiunto Lenovo sett. 2026): il wrap
preserva la resa quando il container si stringe (>960px = una riga). */
justify-content: space-between;
gap: var(--s5) var(--s7);
flex-wrap: wrap;
}
/* Ogni brand-item è un box di altezza fissa: il centering interno normalizza
il baseline visivo tra loghi con altezze intrinseche molto diverse. */
.brands-item {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
flex: 0 0 auto;
}
.brands-sep { display: none; }
.brands-item a {
display: inline-flex;
align-items: center;
border-radius: 4px;
}
.brands-item a:focus-visible {
outline: 2px solid var(--teal-700);
outline-offset: 3px;
}
/* Filter grayscale come base: istituzionale, "firma non protagonista".
Al hover ogni logo riprende i suoi colori brand. Altezze calibrate per
brand così che tutti abbiano PESO VISIVO simile (i wordmark larghi
restano più bassi; i loghi compatti come Jabra vengono ingranditi). */
.brands-item img {
width: auto;
max-width: 132px;
filter: grayscale(.85) brightness(.5);
opacity: .78;
transition: opacity 220ms var(--e-out), filter 220ms var(--e-out);
}
.brands-item:hover img { opacity: 1; filter: grayscale(0) brightness(1); }
/* Altezze calibrate per brand — normalizzano il peso visivo. */
.brands-item img[alt="Kensington"] { height: 20px; }
.brands-item img[alt="Trust"] { height: 26px; }
.brands-item img[alt="Philips"] { height: 22px; }
.brands-item img[alt="Logitech"] { height: 20px; }
.brands-item img[alt="Lenovo"] { height: 22px; }
/* Jabra: logo bicolore (giallo brand + nero). Compatto per natura, aveva 22px
come tutti ma visivamente sembrava PIÙ PICCOLO. Ora 32px, e a riposo lascio
i colori quasi pieni (grayscale leggerissima + brightness 1) così resta
riconoscibile come "brand vivo". All'hover pieno colore. */
.brands-item img[alt="Jabra"] {
height: 32px;
/* V9.2: brightness .9 → 10% più scuro; il giallo Jabra risulta più
"senato" e non stona rispetto agli altri loghi grayscale nella striscia. */
filter: grayscale(.15) brightness(.9);
opacity: .92;
}
.brands-item:hover img[alt="Jabra"] { opacity: 1; filter: grayscale(0) brightness(1); }
/* Lenovo: wordmark monocromo rosso (#e60012). Se lasciato al trattamento
default (grayscale .85 + brightness .5) diventerebbe una barretta grigia
scura. Come Jabra tengo un filo di colore a riposo, pieno all'hover. */
.brands-item img[alt="Lenovo"] {
filter: grayscale(.35) brightness(.9);
opacity: .9;
}
.brands-item:hover img[alt="Lenovo"] { opacity: 1; filter: grayscale(0) brightness(1); }
@media (max-width: 960px) {
.brands-inner { grid-template-columns: 1fr; gap: var(--s6); }
.brands-list { justify-content: flex-start; gap: var(--s6) var(--s7); }
.brands-item img[alt="Kensington"] { height: 24px; }
.brands-item img[alt="Trust"] { height: 30px; }
.brands-item img[alt="Philips"] { height: 26px; }
.brands-item img[alt="Logitech"] { height: 24px; }
.brands-item img[alt="Jabra"] { height: 36px; }
.brands-item img[alt="Lenovo"] { height: 26px; }
}
@media (max-width: 520px) {
.brands-list { gap: var(--s5) var(--s6); }
.brands-item img[alt="Kensington"] { height: 20px; }
.brands-item img[alt="Trust"] { height: 26px; }
.brands-item img[alt="Philips"] { height: 22px; }
.brands-item img[alt="Logitech"] { height: 20px; }
.brands-item img[alt="Jabra"] { height: 30px; }
.brands-item img[alt="Lenovo"] { height: 22px; }
}
/* ==========================================================================
V10 (ottobre 2026) - migliorie portate dal configuratore licenze
Font locali, pulsanti con stato e motivo, dialog con uscita, errori sotto
il campo, loghi nei colori ufficiali, "Da dove vuoi partire?", Guida,
inserimento rapido dei codici, conferma prima della richiesta.
========================================================================== */
/* ----- Font serviti in locale (niente Google Fonts: privacy degli enti) ----- */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(fonts/lexend-latin-wght-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url(fonts/lexend-latin-ext-wght-normal.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
src: url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap;
src: url(fonts/dm-serif-display-latin-400-italic.woff2) format('woff2'); }
/* niente luccichio che attraversa i pulsanti: era solo decorativo */
.btn-solid::before, .btn-accent::before { display: none; }
/* ----- Pulsanti: tempi unici, focus sempre visibile, caricamento ed esito ----- */
.btn { transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--teal-700) !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(var(--teal-rgb), .20) !important; }
.btn-solid:focus-visible { outline-color: var(--navy) !important; }
:root[data-theme="dark"] .btn:focus-visible { outline-color: var(--mint) !important; }
.btn[hidden] { display: none !important; }
/* bloccato: resta un pulsante pieno, grigio, con lucchetto accanto all'etichetta
e il motivo in un fumetto al passaggio e al fuoco da tastiera */
.btn[aria-disabled="true"] {
background: #e6ebf1 !important; color: #475569 !important; border: 1px solid #d5dce5 !important;
box-shadow: none !important; cursor: not-allowed; opacity: 1; filter: none; position: relative; overflow: visible;
}
:root[data-theme="dark"] .btn[aria-disabled="true"] { background: rgba(255,255,255,.06) !important; color: #a3b0c8 !important; border-color: rgba(255,255,255,.12) !important; }
.btn[aria-disabled="true"] .btn-ico { display: none; }
.btn[aria-disabled="true"] .btn-lbl { display: inline-flex; align-items: center; gap: 7px; }
.btn[aria-disabled="true"] .btn-lbl::before {
content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.btn[aria-disabled="true"][data-why]:hover::after,
.btn[aria-disabled="true"][data-why]:focus-visible::after {
content: attr(data-why); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap;
padding: 6px 10px; border-radius: 6px; box-shadow: var(--sh-3); z-index: 20; pointer-events: none;
}
:root[data-theme="dark"] .btn[aria-disabled="true"][data-why]:hover::after { background: #fff; color: var(--navy); }
/* caricamento: piccolo spinner prima dell'etichetta; esito: verde tenue con spunta */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading .btn-ico { display: none; }
.btn.is-loading::before {
content: ''; display: inline-block !important; position: static; width: 14px; height: 14px; flex: none; margin-right: 6px;
border-radius: 50%; border: 2px solid rgba(var(--teal-rgb), .25); border-top-color: var(--teal-700); background: none;
animation: btnSpin .7s linear infinite; opacity: 1; transform: none;
}
.btn.is-ok { background: var(--ok-tint) !important; border-color: transparent !important; color: var(--ok) !important; box-shadow: none !important; }
.btn.is-ok .btn-ico { display: none; }
.btn.is-ok::before {
content: ''; display: inline-block !important; position: static; width: 15px; height: 15px; flex: none; margin-right: 6px; background: currentColor; opacity: 1; transform: none;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ----- Riepilogo: richiesta a Converge come azione principale ----- */
.issue { border-color: var(--line-strong); }
@media (min-width: 721px) { .issue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.issue-copy h3 { font-family: var(--display-serif); font-weight: 400; letter-spacing: -.01em; }
.issue-secondary .btn { min-height: 44px; }
.issue-actions.is-offer #btnGenerate:not([aria-disabled="true"]) { background: var(--paper) ; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.issue-actions.is-offer #btnGenerate:not([aria-disabled="true"]):hover { border-color: var(--teal); background: var(--teal-050); color: var(--teal-700); }
#btnEmailSummary[data-state="ready"]:not(.is-ok):not(.is-loading):not(.is-sent) { background: var(--navy); border-color: var(--navy); color: #fff; }
#btnEmailSummary[data-state="ready"]:not(.is-ok):not(.is-loading):not(.is-sent):hover { background: #224b75; border-color: #224b75; }
:root[data-theme="dark"] #btnEmailSummary[data-state="ready"]:not(.is-ok):not(.is-loading):not(.is-sent) { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
#btnEmailSummary.is-loading { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
#btnEmailSummary.is-loading::before { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
/* "Per sbloccare le azioni": a tutta larghezza sotto i pulsanti */
.issue-help { max-width: none; width: 100%; align-self: stretch; text-align: left; margin-top: 2px;
font-size: var(--t-xs); color: var(--text); padding: 10px 12px; border-radius: var(--r-xs);
background: var(--paper); box-shadow: inset 3px 0 0 var(--wait); }
.issue-help .ih-t { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.issue-help ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.issue-help .ih-x { color: var(--text-soft); }
.issue-help.is-ready { background: var(--ok-tint); box-shadow: inset 3px 0 0 var(--ok); }
.issue-help.is-ready .ih-t { color: var(--ok); display: flex; align-items: center; gap: 6px; }
.issue-help.is-ready .ih-t::before { content: ''; width: 12px; height: 12px; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.issue-help.is-busy { box-shadow: inset 3px 0 0 var(--line-strong); }
:root[data-theme="dark"] .issue-help { background: rgba(255,255,255,.04); }
/* conferma dell'ente prima della richiesta */
.conferma { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s4); padding: 12px 14px;
border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; font-size: var(--t-sm); line-height: 1.45; color: var(--ink); max-width: 60ch; }
.conferma input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--teal-700); cursor: pointer; }
.conferma-sub { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--text-soft); font-weight: 400; }
.conferma:has(input:checked) { border-color: var(--teal); background: var(--teal-050); }
.conferma:has(input:focus-visible) { outline: 2px solid var(--teal-700); outline-offset: 3px; }
@keyframes confermaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0); } 30% { box-shadow: 0 0 0 6px rgba(var(--teal-rgb), .25); } }
.conferma.evidenzia { animation: confermaPulse 1.1s ease-out 1; border-color: var(--teal); }
:root[data-theme="dark"] .conferma { background: rgba(255,255,255,.03); color: #e6ebf5; }
:root[data-theme="dark"] .conferma:has(input:checked) { background: rgba(var(--teal-rgb), .12); }
/* ----- Campi: errore sotto il campo con icona ----- */
.control.error, .control[aria-invalid="true"] { border-color: var(--alert) !important; box-shadow: 0 0 0 3px rgba(185,28,28,.10) !important; }
.field-error { font-size: 12.5px; font-weight: 500; line-height: 1.4; align-items: flex-start; gap: 6px; }
.field-error::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 1px; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.control::placeholder { color: #64748b; opacity: 1; }
:root[data-theme="dark"] .control::placeholder { color: #92a0bd; }
#recoverInput[aria-invalid="true"] + * { margin-top: 0; }
.recover-msg .tag { white-space: normal; line-height: 1.4; }
/* svuota storico: conferma in due tempi */
.recover-history-clear.is-armed { color: var(--alert); font-weight: 700; text-decoration: underline; }
/* ----- Dialog: entrata 220 ms, uscita 140 ms (nessun rimbalzo) ----- */
@keyframes dlgBoxIn { 0% { opacity: 0; transform: translateY(12px); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes dlgVeilIn { from { background-color: rgba(var(--navy-rgb), 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes dlgVeilOut { to { background-color: rgba(var(--navy-rgb), 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes dlgBoxGone { to { opacity: 0; transform: translateY(6px); } }
html.motion .dlg.on { animation: dlgVeilIn 160ms ease-out both; }
html.motion .dlg.on .dlg-box { animation: dlgBoxIn 220ms cubic-bezier(.16,1,.3,1) both; }
.dlg.is-closing { display: flex; pointer-events: none; }
html.motion .dlg.is-closing { animation: dlgVeilOut 100ms ease-in 40ms both; }
html.motion .dlg.is-closing .dlg-box { animation: dlgBoxGone 90ms cubic-bezier(.4,0,1,1) both; }
.dlg-foot .btn { min-height: 44px; }
.dlg-wide .dlg-box { max-width: 860px; }
/* ----- Loghi dei vendor: sempre nei colori ufficiali, mai invertiti.
Nel tema scuro poggiano su una tessera bianca. ----- */
:root[data-theme="dark"] .brands-item img,
:root[data-theme="dark"] .brands-item:hover img,
:root[data-theme="dark"] .brands-item img[alt="Jabra"],
:root[data-theme="dark"] .brands-item img[alt="Lenovo"],
:root[data-theme="dark"] .brands-item:hover img[alt="Jabra"],
:root[data-theme="dark"] .brands-item:hover img[alt="Lenovo"] { filter: none; opacity: 1; }
:root[data-theme="dark"] .brands-item img { background: #fff; border-radius: 8px; padding: 6px 10px; box-sizing: content-box; }
:root[data-theme="dark"] .item-brand-logo,
:root[data-theme="dark"] .item:hover .item-brand-logo,
:root[data-theme="dark"] .item-brand-logo[alt="Jabra"],
:root[data-theme="dark"] .item-brand-logo[alt="Lenovo"] { filter: none; opacity: 1; background: #fff; border-radius: 4px; padding: 3px 6px; box-sizing: content-box; }
/* ----- Da dove vuoi partire ----- */
.starts { padding: var(--s8) 0 var(--s6); }
.starts-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.starts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.start-card { display: grid; gap: 8px; align-content: start; width: 100%; height: 100%; text-align: left; padding: 22px 22px 20px;
background: var(--surface-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink);
font: inherit; cursor: pointer; text-decoration: none; box-shadow: var(--sh-1);
transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.start-card:hover { border-color: var(--teal); box-shadow: var(--sh-3); transform: translateY(-2px); }
.start-card:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }
.start-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); }
.start-ico svg { width: 22px; height: 22px; }
.start-t { font-family: var(--display-serif); font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.start-d { font-size: var(--t-sm); color: var(--text); line-height: 1.5; }
.start-go { margin-top: 4px; font-size: var(--t-sm); font-weight: 650; color: var(--teal-700); display: inline-flex; align-items: center; gap: 6px; }
.start-go::after { content: '→'; transition: transform 160ms ease-out; }
.start-card:hover .start-go::after { transform: translateX(3px); }
@media (max-width: 860px) { .starts-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .start-card, .start-card:hover { transform: none; transition: none; } }
:root[data-theme="dark"] .start-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.12); color: #fff; }
:root[data-theme="dark"] .start-d { color: rgba(255,255,255,.75); }
:root[data-theme="dark"] .start-ico { background: rgba(var(--teal-rgb), .16); color: var(--mint); }
:root[data-theme="dark"] .start-go { color: var(--mint); }
/* ----- Ricerca: accesso all'inserimento rapido ----- */
.sieve-import { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--teal-700); text-align: left; cursor: pointer;
background: var(--teal-050); border: 1px dashed rgba(var(--teal-rgb), .55); border-radius: var(--r-xs); }
.sieve-import svg { width: 16px; height: 16px; flex: none; }
.sieve-import:hover { border-style: solid; }
.sieve-import:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
:root[data-theme="dark"] .sieve-import { color: var(--mint); background: rgba(var(--teal-rgb), .10); }
/* ----- Dialog "Hai gia' i codici?" ----- */
.imp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); }
.imp-grid .field { display: flex; flex-direction: column; gap: 6px; }
.imp-grid label, .imp-grid .lbl { font-size: 13px; font-weight: 600; color: var(--ink); }
#importText { min-height: 150px; resize: vertical; font-size: 13px; line-height: 1.5; }
#importText::placeholder { font-style: italic; }
.imp-live { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--teal-700); font-weight: 600; }
.imp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.imp-drop { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px 16px; min-height: 150px; align-content: center;
border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-elevated); cursor: pointer;
transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.imp-drop svg { width: 28px; height: 28px; color: var(--teal-700); }
.imp-drop:hover, .imp-drop.is-over { border: 1.5px solid var(--teal); background: var(--teal-050); box-shadow: var(--sh-2); }
.imp-drop:focus-within { outline: 2px solid var(--teal-700); outline-offset: 3px; }
.imp-drop-t { font-weight: 650; color: var(--ink); font-size: var(--t-sm); }
.imp-drop-d { font-size: 12px; color: var(--text-soft); line-height: 1.45; }
.sr-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#importResult { margin-top: var(--s5); }
.imp-msg { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: var(--t-sm); padding: 10px 12px; border-radius: var(--r-xs); background: var(--paper-2); }
.imp-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.imp-msg.ok { background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.imp-msg.ko { background: var(--alert-tint); color: var(--alert); }
.imp-msg.warn { box-shadow: inset 3px 0 0 var(--wait); }
.imp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 300px; overflow: auto; }
.imp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.imp-item:nth-child(even) { background: var(--paper-2); }
.imp-item:last-child { border-bottom: 0; }
.imp-a { display: grid; gap: 2px; min-width: 0; }
.imp-a strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.imp-a span { color: var(--text-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-a em { font-style: normal; font-size: 12px; color: #92400e; }
.imp-q { font-weight: 650; white-space: nowrap; }
.imp-s { font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-unknown { margin-top: var(--s4); }
.imp-unknown ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--t-sm); }
.imp-unknown code { font-size: 12.5px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-700); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 720px) {
.imp-grid { grid-template-columns: 1fr; }
.imp-item { grid-template-columns: minmax(0, 1fr) auto; }
.imp-s { grid-column: 2; }
}
:root[data-theme="dark"] .imp-drop { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .imp-item:nth-child(even) { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .imp-a em { color: #fcd34d; }
/* ----- Guida: glossario e domande frequenti ----- */
.guide { padding: var(--s9) 0; position: relative; }
.guide::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.guide-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.guide-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s8); align-items: start; }
.glossary { margin: 0; display: grid; gap: 14px; }
.glossary > div { padding: 12px 14px; border-radius: var(--r-sm); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--teal); }
.glossary dt { font-weight: 700; color: var(--ink); font-size: var(--t-sm); }
.glossary dd { margin: 4px 0 0; font-size: var(--t-sm); color: var(--text); line-height: 1.5; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-elevated); }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 650; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 20px; line-height: 1; color: var(--teal-700); }
.faq details[open] summary::after { content: '−'; }
.faq details[open] { box-shadow: inset 3px 0 0 var(--navy); }
.faq summary:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; border-radius: var(--r-sm); }
.faq p { margin: 0; padding: 0 16px 14px; font-size: var(--t-sm); line-height: 1.55; color: var(--text); }
@media (max-width: 860px) { .guide-cols { grid-template-columns: 1fr; gap: var(--s6); } }
:root[data-theme="dark"] .glossary > div, :root[data-theme="dark"] .faq details { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .glossary dt, :root[data-theme="dark"] .faq summary { color: #fff; }
:root[data-theme="dark"] .glossary dd, :root[data-theme="dark"] .faq p { color: rgba(255,255,255,.78); }
:root[data-theme="dark"] .faq details[open] { box-shadow: inset 3px 0 0 var(--mint); }
/* ----- Footer: avvertenza ----- */
.sitefoot-note { flex-basis: 100%; font-size: 12px; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
.btn.is-loading::before { animation-duration: 1.6s; }
.conferma.evidenzia { animation: none; }
}
/* ----- V10: elementi nuovi dentro la bandella navy del riepilogo ----- */
#btnPdfSummary[data-state="disabled"], #btnEmailSummary[data-state="disabled"] { opacity: 1; }
.panel#panel3 .issue-help {
max-width: none; width: 100%; text-align: left; align-self: stretch; margin: 2px 0 0;
font-size: var(--t-xs); line-height: 1.5; color: rgba(255,255,255,.9);
background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 #f59e0b; padding: 10px 12px; border-radius: var(--r-xs);
}
.panel#panel3 .issue-help .ih-t { color: #fff; }
.panel#panel3 .issue-help .ih-x { color: rgba(255,255,255,.6); }
.panel#panel3 .issue-help b { color: var(--mint); }
.panel#panel3 .issue-help.is-ready { background: rgba(16,185,129,.16); box-shadow: inset 3px 0 0 var(--mint); }
.panel#panel3 .issue-help.is-ready .ih-t { color: var(--mint); }
.panel#panel3 .issue-help.is-busy { box-shadow: inset 3px 0 0 rgba(255,255,255,.4); }
.panel#panel3 .issue .conferma { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff; }
.panel#panel3 .issue .conferma-sub { color: rgba(255,255,255,.72); }
.panel#panel3 .issue .conferma input { accent-color: var(--mint); }
.panel#panel3 .issue .conferma:has(input:checked) { border-color: var(--mint); background: rgba(var(--teal-rgb), .16); }
.panel#panel3 .issue .conferma:has(input:focus-visible) { outline-color: var(--mint); }
/* azione principale della bandella: la richiesta (teal); Genera passa a contorno */
.panel#panel3 .issue-actions.is-offer #btnGenerate:not([aria-disabled="true"]) { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); box-shadow: none; font-size: var(--t-sm); padding: 13px 24px; }
.panel#panel3 .issue-actions.is-offer #btnGenerate:not([aria-disabled="true"]):hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }
.panel#panel3 .issue #btnEmailSummary[data-state="ready"]:not(.is-ok):not(.is-loading):not(.is-sent) { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.panel#panel3 .issue #btnEmailSummary[data-state="ready"]:not(.is-ok):not(.is-loading):not(.is-sent):hover { background: var(--teal); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.panel#panel3 .issue #btnEmailSummary.is-loading { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--on-teal) !important; }
.panel#panel3 .issue .btn.is-ok { background: rgba(16,185,129,.18) !important; color: var(--mint) !important; }
.panel#panel3 .issue .btn:focus-visible { outline-color: var(--mint) !important; }
.panel#panel3 .issue .btn[aria-disabled="true"] { background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.72) !important; border-color: rgba(255,255,255,.18) !important; }
.panel#panel3 .issue .btn[aria-disabled="true"][data-why]:hover::after,
.panel#panel3 .issue .btn[aria-disabled="true"][data-why]:focus-visible::after { background: #fff; color: var(--navy); }
.issue-secondary .btn { flex: 1 1 calc(50% - var(--s2)); }
@media (min-width: 1100px) { .issue-secondary .btn { flex: 1 1 0; } }
.panel#panel3 .issue-actions > #btnEmailSummary { align-self: stretch; font-size: var(--t-base); font-weight: 700; padding: var(--s4) var(--s5); }
.panel#panel3 .issue-actions > #btnEmailSummary .btn-ico { width: 17px; height: 17px; }
/* il codice CNV distingue maiuscole e minuscole: mai trasformarlo a video */
#recoverInput, .control-mono { text-transform: none !important; }
/* ==========================================================================
V10.1 (ottobre 2026): ecosistema Lenovo Tiny (monitor TIO + PC Tiny)
========================================================================== */
:root { --tiny-700: #5b21b6; --tiny-050: #f5f3ff; --tiny-rgb: 91, 33, 182; }
:root[data-theme="dark"] { --tiny-700: #c4b5fd; --tiny-050: rgba(139, 92, 246, .12); }
.tiny-note {
display: flex; align-items: flex-start; gap: var(--s3);
margin: 0 0 var(--s5);
padding: var(--s4) var(--s5);
background: var(--tiny-050);
border: 1px solid rgba(var(--tiny-rgb), .24);
border-radius: var(--r-md);
font-size: var(--t-sm);
color: var(--text);
line-height: 1.55;
}
.tiny-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--tiny-700); }
.tiny-note strong { color: var(--tiny-700); }
.item-tiny {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px 2px 5px;
font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: #fff; background: #5b21b6;
border-radius: 999px;
box-shadow: 0 1px 2px rgba(0,0,0,.22);
line-height: 1.35;
}
.item-tiny svg { width: 9px; height: 9px; stroke-width: 2.4; }
.prev-tiny {
margin: var(--s4) 0;
padding: var(--s4) var(--s5);
background: var(--tiny-050);
border: 1px solid rgba(var(--tiny-rgb), .24);
border-radius: var(--r-md);
font-size: var(--t-sm);
line-height: 1.5;
color: var(--text);
}
.prev-tiny p { margin: 0 0 var(--s2); }
.prev-tiny p:last-child { margin-bottom: 0; }
.prev-tiny-title { display: flex; align-items: center; gap: 8px; color: var(--tiny-700); }
.prev-tiny-title svg { width: 18px; height: 18px; flex: none; }
.prev-tiny-sub { font-weight: 650; color: var(--ink); }
.prev-tiny-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.prev-tiny-link {
font: inherit; font-weight: 650; color: var(--tiny-700);
background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.prev-tiny-link:hover { text-decoration-thickness: 2px; }
.prev-tiny-code { font-size: var(--t-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.prev-tiny-in { font-size: var(--t-xs); color: var(--teal-700); font-weight: 650; }
/* ----- V10.2: banner "configurazione in corso" come scheda flottante (come nel configuratore licenze) ----- */
.session-banner {
position: fixed; top: auto; right: auto; left: 24px; bottom: 24px; z-index: 330;
width: calc(100vw - 48px); max-width: 400px;
padding: var(--s4);
display: flex; flex-direction: column; align-items: stretch; gap: var(--s3);
background: var(--surface-elevated);
border: 1px solid var(--teal-200); border-radius: var(--r-md);
box-shadow: var(--sh-4);
font-size: var(--t-sm); color: var(--ink);
animation: dlgBoxIn 320ms cubic-bezier(.16,1,.3,1) both;
}
.session-banner[hidden] { display: none; }
.session-banner-copy { display: flex; align-items: flex-start; gap: 10px; flex: none; }
.session-banner-ico {
width: 32px; height: 32px; flex: none; border-radius: 50%;
background: var(--teal-050); color: var(--teal-700);
display: inline-flex; align-items: center; justify-content: center;
}
.session-banner-txt { white-space: normal; overflow: visible; line-height: 1.45; padding-top: 5px; }
.session-banner-actions { display: flex; gap: 8px; justify-content: flex-end; width: auto; margin-top: 0; }
.session-banner-btn { min-height: 38px; padding: 8px 16px; font-size: 13px; }
/* sotto 1200px c'e' la barra comandi in basso: la scheda sale sopra */
body:has(.commandbar.on) .session-banner { bottom: calc(74px + 16px); }
@media (min-width: 1200px) { body:has(.commandbar.on) .session-banner { bottom: 24px; } }
@media (max-width: 600px) {
.session-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
body:has(.commandbar.on) .session-banner { bottom: calc(74px + 12px); }
.session-banner-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .session-banner { animation: none; } }
@media print { .session-banner { display: none !important; } }
/* ----- V10.2: contrasto (WCAG 2.1 AA, obbligatorio per i siti della PA) ----- */
.prev-actions .btn-solid, .prev-actions .btn-solid:hover { color: var(--on-teal); }
.session-banner-btn:not(.ghost), .session-banner-btn:not(.ghost):hover { color: var(--on-teal); }
:root[data-theme="dark"] .item-meta .item-mq { color: #fbbf24; }
:root[data-theme="dark"] .panel#panel3 .doc-lbl { color: #6ee7b7; }
:root[data-theme="dark"] .panel#panel3 .review-side .doc-lbl { color: #cbd5e1; }
:root[data-theme="dark"] .panel#panel3 .review-main .doc.entity .doc-lbl { color: #9db4d6; }
/* ----- V10.2: riepilogo su mobile, il nome del prodotto usa tutta la larghezza ----- */
@media (max-width: 720px) {
.ledger tr { position: relative; }
.ledger td.k-name { grid-column: 1 / -1; padding-right: 44px; }
.ledger td.k-x { position: absolute; top: var(--s4); right: 0; }
.ledger tr:first-child td.k-x { top: -6px; }
}
/* ==========================================================================
V10.3 (13 ottobre 2026): novita' dal configuratore licenze, nello stile
del configuratore (navy, teal, Lexend, DM Serif Display)
========================================================================== */
/* ----- Intestazione: Ricomincia ----- */
.mh-reset svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mh-reset:hover svg { transform: rotate(-200deg); }
@media (prefers-reduced-motion: reduce) { .mh-reset:hover svg { transform: none; } }
/* ----- Avanzamento 01 / 02 / 03: numero nel cerchio, passo attivo evidenziato ----- */
.step {
border-top: 0;
padding: 12px 16px;
border-radius: var(--r-sm);
grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px;
border: 1px solid transparent;
transition: background var(--t-2), border-color var(--t-2);
}
.step.on, .step.was { border-top-width: 1px; }
.step-n {
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; line-height: 1;
background: var(--paper-3); color: var(--text-soft);
border: 1px solid var(--line);
transition: background var(--t-2), color var(--t-2), border-color var(--t-2);
}
.step.on {
background: var(--surface-elevated);
border-color: var(--line-strong);
box-shadow: var(--sh-1);
}
.step.on .step-n { background: var(--navy); color: #fff; border-color: var(--navy); }
.step.was .step-n { display: grid; background: var(--teal-050); color: var(--teal-700); border-color: rgba(var(--teal-rgb), .45); }
.step.was .step-n::after { display: none; }
.step.was { border-color: transparent; }
.step.was .step-name::after {
content: ''; display: inline-block; width: 8px; height: 5px; margin-left: 8px; vertical-align: 3px;
border-left: 1.8px solid var(--teal-600); border-bottom: 1.8px solid var(--teal-600);
transform: rotate(-48deg);
}
@media (hover: hover) {
.step:not(.on):hover { background: var(--paper-2); border-color: var(--line); }
.step:not(.on):not(.was):hover .step-n { color: var(--ink); border-color: var(--line-strong); }
}
:root[data-theme="dark"] .step.on .step-n { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
@media (max-width: 720px) {
.step { grid-template-columns: 32px minmax(0, 1fr); padding: 8px 10px; column-gap: 8px; }
.step-n { width: 32px; height: 32px; font-size: var(--t-xs); }
}
@media (max-width: 520px) {
.steps { gap: var(--s2); }
.step { grid-template-columns: 1fr; justify-items: center; }
}
/* ----- Passo 01: parti da un'esigenza ----- */
.needs { margin: 0 0 var(--s5); }
.needs-title {
font-family: var(--sans);
font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-soft); margin: 0 0 var(--s3);
}
.needs-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-filter {
display: inline-flex; align-items: center; gap: var(--s2);
min-height: 38px; padding: 6px 10px 6px 12px;
border: 1px solid var(--line-strong); border-radius: 999px;
background: var(--surface-elevated); color: var(--ink);
font: inherit; font-size: var(--t-xs); font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: border-color var(--t-1), background var(--t-1), color var(--t-1);
}
.chip-filter svg { width: 16px; height: 16px; flex: none; color: var(--teal-700); }
.chip-filter .chip-check { display: none; }
.chip-filter .chip-n {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
display: inline-grid; place-items: center;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
background: var(--paper-3); color: var(--text-soft);
}
.chip-filter:hover { border-color: var(--teal); background: var(--teal-050); }
.chip-filter:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.chip-filter.on { background: var(--teal-050); border-color: var(--teal); color: var(--teal-700); }
.chip-filter.on .chip-check { display: block; }
.chip-filter.on .chip-ico { display: none; }
.chip-filter.on .chip-n { background: var(--teal-700); color: #fff; }
:root[data-theme="dark"] .chip-filter.on { color: var(--mint); }
:root[data-theme="dark"] .chip-filter svg { color: var(--mint); }
:root[data-theme="dark"] .chip-filter.on .chip-n { background: var(--teal); color: var(--on-teal); }
/* ----- Passo 01: come si acquista su MePA (stessa famiglia delle FAQ) ----- */
.howto {
margin: 0 0 var(--s5);
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
background: var(--surface-elevated);
}
.howto[open] { box-shadow: inset 3px 0 0 var(--navy); }
.howto-sum {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: var(--s3);
padding: 14px 16px; font-weight: 650; color: var(--ink);
}
.howto-sum::-webkit-details-marker { display: none; }
.howto-sum svg { width: 18px; height: 18px; flex: none; color: var(--teal-700); }
.howto-sum .howto-chev { margin-left: auto; color: var(--text-soft); transition: transform var(--t-2); }
.howto[open] .howto-chev { transform: rotate(180deg); }
.howto-sum:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; border-radius: var(--r-sm); }
.howto-steps {
list-style: none; counter-reset: howto;
margin: 0; padding: var(--s2) var(--s5) var(--s4);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5);
}
.howto-steps li { counter-increment: howto; font-size: var(--t-sm); line-height: 1.55; color: var(--text); }
.howto-steps li::before {
content: '0' counter(howto);
display: block; width: 26px; margin-bottom: var(--s2); padding-bottom: 5px;
font-family: var(--display); font-size: var(--t-lg); font-weight: 700; line-height: 1; letter-spacing: -.02em;
color: var(--navy); border-bottom: 2px solid var(--teal);
font-variant-numeric: tabular-nums;
}
.howto-steps li b { color: var(--ink); }
.howto-note {
margin: 0; padding: var(--s3) var(--s5) var(--s4);
border-top: 1px dashed var(--line-strong);
font-size: var(--t-micro); color: var(--text-soft);
}
:root[data-theme="dark"] .howto[open] { box-shadow: inset 3px 0 0 var(--teal); }
:root[data-theme="dark"] .howto-steps li::before { color: #fff; }
:root[data-theme="dark"] .howto-sum svg { color: var(--mint); }
/* ----- Passo 01: note sostenibili / ergonomici / Tiny come schede affiancate ----- */
.notes-grid {
list-style: none; margin: 0 0 var(--s6); padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3);
}
.notes-grid > li { margin: 0; height: 100%; box-sizing: border-box; }
.notes-grid > li strong { display: block; margin-bottom: 2px; font-size: var(--t-sm); }
/* ----- Variante accanto al nome ----- */
.item-var {
display: inline-flex; align-items: center; vertical-align: middle;
margin-left: 6px; padding: 1px 8px;
border-radius: 999px; border: 1px solid rgba(var(--blue-ergo-rgb), .25);
background: var(--blue-050); color: var(--blue-ergo-700);
font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.5;
white-space: nowrap;
}
.item-name .item-var { margin-left: 0; margin-top: 4px; }
.prev-title .item-var { font-size: var(--t-xs); padding: 2px 10px; }
:root[data-theme="dark"] .item-var { color: #bfd2ff; }
/* ----- Avvisi: chiudibili toccandoli; Annulla ben separato ----- */
.toast { cursor: pointer; }
.toast .toast-msg { flex: 1 1 auto; min-width: 0; }
.toast.has-act .toast-undo { cursor: pointer; }
@media (max-width: 1060px) {
.howto-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notes-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ----- Mobile piu' ordinato ----- */
@media (max-width: 720px) {
.howto-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.needs-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; scrollbar-width: none; }
.needs-chips::-webkit-scrollbar { display: none; }
/* intestazione: "Torna al portale" resta sul logo, icone a 40 px */
.mh-nav > a.mh-link[href^="https://convenzioni"] { display: none; }
.mh-nav { gap: 0; }
.mh-link { width: 40px; padding: 0; justify-content: center; }
.mh-theme { width: 40px; }
.mh-bundle { margin-left: 4px; padding: var(--s2) 12px; }
.mh-bundle .mh-bundle-check { display: none !important; }
.masthead-inner { padding: 0 12px 0 16px; gap: var(--s2); }
/* avvisi a tutta larghezza, sopra la barra comandi e accanto al pulsante "torna su" */
.toast { left: 12px; right: 12px; max-width: none; transform: translateY(14px); }
.toast.show { transform: none; }
body:has(.btn-top:not([hidden])) .toast { right: 68px; }
}
/* pulsante "torna su" sopra la barra "Scegli i prodotti" del passo 01 */
body:has(#panel1.on) .btn-top { bottom: 92px; }
/* ----- V10.3: contrasti nel tema scuro con categorie e filtri attivi (WCAG AA) ----- */
:root[data-theme="dark"] .cat-cell[aria-pressed="true"] .cat-name { color: #fff; }
:root[data-theme="dark"] .shelf-chips .chip strong,
:root[data-theme="dark"] #sieveOpenLabel { color: var(--mint); }
/* ==========================================================================
V10.4 (ottobre 2026): revisione grafica
Stessa identita' (navy, teal, Lexend, DM Serif solo per la hero), piu'
ordine: a capo puliti, badge leggibili, loghi uniformi, sezioni distinte,
niente doppioni di informazioni.
========================================================================== */
/* ----- A capo: niente parole orfane nei paragrafi ----- */
p, li, dd, .lede, .tool-lede, .start-d, .flow-caption, .value-desc, .brands-hint, .faq p, .glossary dd { text-wrap: pretty; }
h1, h2, h3, .start-t, .flow-title, .value-title { text-wrap: balance; }
/* ----- I titoli dei pannelli ricevono il fuoco per gli screen reader:
niente riquadro visibile (non sono comandi) ----- */
.panel h2[tabindex="-1"]:focus, .panel h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
/* ----- Una sola famiglia per i titoli d'interfaccia (il serif resta alla hero) ----- */
.start-t { font-family: var(--display); font-size: 19px; font-weight: 660; letter-spacing: -.012em; line-height: 1.25; }
/* ----- Ritmo delle sezioni: "Come funziona" + brand su fondo tenue ----- */
.flow { background: var(--paper-2); border-top: 1px solid var(--line); }
.brands { border-top-color: var(--line); }
/* ----- Brand disponibili: tessere uniformi, loghi nei colori ufficiali ----- */
.brands-inner { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); align-items: center; }
.brands-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 10px;
}
.brands-item {
position: relative;
height: 76px; min-height: 0;
padding: 0 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
transition: border-color var(--t-2), box-shadow var(--t-2), transform var(--t-2);
}
.brands-item a { width: 100%; height: 100%; justify-content: center; border-radius: inherit; }
.brands-item:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-1px); }
.brands-item img,
.brands-item:hover img,
.brands-item img[alt="Jabra"], .brands-item:hover img[alt="Jabra"],
.brands-item img[alt="Lenovo"], .brands-item:hover img[alt="Lenovo"],
:root[data-theme="dark"] .brands-item img,
:root[data-theme="dark"] .brands-item:hover img { filter: none; opacity: 1; background: none; padding: 0; max-width: 100%; }
.brands-item img[alt="Kensington"] { height: 19px; }
.brands-item img[alt="Trust"] { height: 24px; }
.brands-item img[alt="Philips"] { height: 19px; }
.brands-item img[alt="Logitech"] { height: 19px; }
.brands-item img[alt="Jabra"] { height: 28px; }
.brands-item img[alt="Lenovo"] { height: 20px; }
.brands-item img[alt="Poly"] { height: 26px; }
.brands-item.is-soon img { opacity: .5; filter: grayscale(.6); }
.brands-item.is-soon:hover img { opacity: .8; filter: none; }
.brands-soon {
position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
padding: 2px 9px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
color: #8a4b06; background: #fff7e6; border: 1px solid #f3d29a;
pointer-events: none;
}
:root[data-theme="dark"] .brands-item { border-color: transparent; }
/* ----- Scheda prodotto ----- */
/* marchio: logo nei colori ufficiali, senza trattino */
.item-brand, .item-brand-has-logo { padding-left: 0; }
.item-brand::before, .item-brand-has-logo::before { display: none; }
.item-brand-logo, .item:hover .item-brand-logo, .item.taken .item-brand-logo { filter: none; opacity: 1; }
.item-brand-logo { height: 15px; max-width: 96px; }
.item-brand-logo[alt="Jabra"] { height: 18px; }
.item-brand-logo[alt="Trust"] { height: 16px; }
.item-brand-logo[alt="Poly"] { height: 18px; }
/* badge sulla foto: tinta chiara + testo scuro, leggibili a colpo d'occhio
(la foto ha sempre fondo chiaro, anche nel tema scuro) */
.item-badges { top: 12px; left: 12px; gap: 6px; }
.item-eco, .item-ergo, .item-tiny {
gap: 5px; padding: 3px 9px 3px 7px;
font-size: 11px; font-weight: 650; letter-spacing: .01em; text-transform: none; line-height: 1.35;
border-radius: 999px; box-shadow: none; border: 1px solid;
}
.item-eco, :root[data-theme="dark"] .item-eco { background: #e8f8f0 !important; color: #046c4e !important; border-color: #a7e3c8; }
.item-ergo, :root[data-theme="dark"] .item-ergo { background: #eaf1ff !important; color: #1e40af !important; border-color: #bcd0fb; }
.item-tiny, :root[data-theme="dark"] .item-tiny { background: #f3efff !important; color: #5b21b6 !important; border-color: #d5c8fb; }
.item-eco svg, .item-ergo svg, .item-tiny svg { width: 11px; height: 11px; stroke-width: 2.2; }
/* stato "Nel bundle": pillola teal tenue */
.item-state.tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px 3px 8px; border-radius: 999px;
background: var(--teal-050); border: 1px solid rgba(var(--teal-rgb), .35);
font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.item-state.tag svg { width: 12px; height: 12px; }
/* codice + quantita' minima: la minima e' un'informazione, non un allarme */
.item-meta .item-mq {
padding: 2px 8px; border-radius: 999px;
background: var(--paper-3); color: var(--ink);
font-size: 11px; font-weight: 650; letter-spacing: .01em;
}
.item-name .item-var { display: table; margin: 6px 0 0; }
/* ----- Barra del catalogo (contatore, vista, ordinamento) ----- */
.shelf-bar {
padding: 10px 12px 10px 16px;
background: var(--surface-elevated);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
/* ----- Ricerca: suggerimento da un'altra categoria ----- */
.seek-sug .sug-cat { color: var(--teal-700); font-weight: 650; }
:root[data-theme="dark"] .seek-sug .sug-cat { color: var(--mint); }
/* ----- Riepilogo ----- */
.panel#panel3 > .panel-ask h2::before { content: none; } /* "03" gia' nell'avanzamento */
.panel#panel3 .review-side .doc-lbl { white-space: nowrap; letter-spacing: .1em; }
.ledger .cell-name .item-var { display: table; margin: 6px 0 4px; }
.figures .somma { display: none; }
/* ----- Passo 01: barra "Scegli i prodotti" piu' leggera ----- */
#panel1 > .panel-foot { border-top: 1px solid var(--line); }
@media (max-width: 960px) {
.brands-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}
@media (max-width: 520px) {
.brands-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brands-item { height: 64px; }
}
.mini-bundle-foot p, .mini-bundle-foot .mb-soglia, .mb-msg { text-wrap: balance; }
.mb-thr { text-wrap: balance; }
:root[data-theme="dark"] .btn-top { background: var(--teal); color: var(--on-teal); }
:root[data-theme="dark"] .btn-top:hover { background: var(--mint); }
@media (max-width: 520px) {
.brands-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.brands-item { height: 58px; padding: 0 8px; }
.brands-item img[alt="Jabra"] { height: 22px; }
}
/* passo 01: respiro tra domanda, esigenze e note */
#panel1 .panel-ask p { max-width: 62ch; }
.needs { margin-top: var(--s5); }
.needs-chips { gap: 8px; }
@media (min-width: 1360px) {
/* le sei esigenze su una riga, a tutta larghezza */
.needs-chips { flex-wrap: nowrap; }
.chip-filter { flex: 1 1 auto; justify-content: center; padding-left: 10px; padding-right: 8px; font-size: 12.5px; gap: 6px; }
}
/* ==========================================================================
V10.5 (ottobre 2026): rifinitura finale con principi Material
(stati, onda, elevazione, movimento) dentro l'identita' navy/teal.
Durate 150-300 ms, curva "emphasized" per gli ingressi e uscite piu' rapide.
========================================================================== */
:root {
--m-ease: cubic-bezier(.2, 0, 0, 1); /* standard */
--m-ease-in: cubic-bezier(.05, .7, .1, 1); /* emphasized decelerate: ingressi */
--m-ease-out: cubic-bezier(.3, 0, .8, .15); /* emphasized accelerate: uscite */
--m-state-hover: color-mix(in srgb, currentColor 6%, transparent);
--m-state-press: color-mix(in srgb, currentColor 11%, transparent);
}
/* ----- Barra sotto l'intestazione: tolta. Restava ferma a 1/3, 2/3 del passo e
sembrava un secondo indicatore di scorrimento. L'avanzamento e' gia' nei passi
01/02/03; lo scorrimento resta nella barra sottile in cima alla pagina. ----- */
.mh-progress { display: none; }
/* ----- Onda al tocco sulle superfici cliccabili ----- */
.chip-filter, .start-card, .cat-cell, .mh-bundle, .brands-item a { position: relative; overflow: hidden; }
.chip-filter .ripple, .start-card .ripple, .cat-cell .ripple, .brands-item a .ripple { background: rgba(var(--teal-rgb), .16); }
.mh-bundle .ripple { background: rgba(255,255,255,.28); }
html.motion .ripple { animation: rippleOut 380ms var(--m-ease) forwards; }
/* ----- Stato hover/pressione: velo del colore del contenuto (come lo "state layer") ----- */
.chip-filter:hover, .step:not(.on):hover, .pick-row:hover, .faq summary:hover, .howto-sum:hover { background-image: linear-gradient(var(--m-state-hover), var(--m-state-hover)); }
.chip-filter:active, .cat-cell:active, .start-card:active { background-image: linear-gradient(var(--m-state-press), var(--m-state-press)); }
/* ----- Elevazione che risponde al cursore (solo dove si clicca) ----- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.start-card, .brands-item, .chip-filter, .cat-cell {
transition: transform 200ms var(--m-ease), box-shadow 200ms var(--m-ease), border-color 200ms var(--m-ease), background-color 200ms var(--m-ease);
}
.start-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.cat-cell:hover { box-shadow: 0 8px 18px -10px rgba(var(--navy-rgb), .28); z-index: 1; }
.chip-filter:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.start-card:active, .cat-cell:active, .chip-filter:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }
}
/* ----- Contatore del bundle: piccolo rimbalzo quando cambia ----- */
@keyframes bundleBump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
html.motion #bundleCount.bump { animation: bundleBump 420ms var(--m-ease-in); }
/* ----- Avvisi: entrano dal basso (decelerazione), escono piu' in fretta ----- */
.toast { transition: opacity 150ms var(--m-ease-out), transform 150ms var(--m-ease-out), visibility 150ms; }
.toast.show { transition: opacity 250ms var(--m-ease-in), transform 250ms var(--m-ease-in), visibility 0s; }
/* ----- Pannello del bundle e filtri: scorrimento con decelerazione ----- */
.tray, .sieve { transition-timing-function: var(--m-ease-in); }
/* ----- Cambio di passo: il contenuto entra con un leggero scorrimento ----- */
@keyframes panelInM { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.motion .panel.on { animation: panelInM 300ms var(--m-ease-in) both; }
/* ----- Esigenze selezionate: la spunta entra con un tratto ----- */
@keyframes chipCheck { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
html.motion .chip-filter.on .chip-check { animation: chipCheck 200ms var(--m-ease-in); }
/* ----- "Come si acquista": apertura morbida del contenuto ----- */
@keyframes howtoIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html.motion .howto[open] .howto-steps, html.motion .howto[open] .howto-note { animation: howtoIn 220ms var(--m-ease-in) both; }
html.motion .faq details[open] > :not(summary) { animation: howtoIn 220ms var(--m-ease-in) both; }
/* ----- Fuoco da tastiera uniforme: anello teal staccato dal bordo ----- */
.chip-filter:focus-visible, .start-card:focus-visible, .cat-cell:focus-visible, .brands-item a:focus-visible, .step:focus-visible {
outline: 2px solid var(--teal-700); outline-offset: 3px;
}
:root[data-theme="dark"] .chip-filter:focus-visible, :root[data-theme="dark"] .start-card:focus-visible,
:root[data-theme="dark"] .cat-cell:focus-visible, :root[data-theme="dark"] .brands-item a:focus-visible { outline-color: var(--mint); }
@media (prefers-reduced-motion: reduce) {
.start-card, .brands-item, .chip-filter, .cat-cell { transition: none; transform: none !important; }
}
/* ----- V10.6: prodotti con prezzo in arrivo (Excel: PREZZO IN ARRIVO = SI) ----- */
.item-price.is-pending { min-height: 34px; display: flex; align-items: center; }
.price-pending, .prev-price-amount.is-pending {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: 999px;
font-size: var(--t-sm); font-weight: 650; letter-spacing: .01em;
color: #8a4b06; background: #fff7e6; border: 1px solid #f3d29a;
}
.prev-price-amount.is-pending { font-size: var(--t-base); }
:root[data-theme="dark"] .price-pending, :root[data-theme="dark"] .prev-price-amount.is-pending { color: #ffd59a; background: rgba(217, 119, 6, .16); border-color: rgba(253, 230, 138, .35); }
.btn-ask { justify-content: center; }
/* ----- V10.6: logo HP | poly ----- */
.brands-item img[alt="HP"] { height: 24px; }
.item-brand-logo[src*="logo-hp-poly"] { height: 17px; max-width: 110px; }
.item-brand-logo[src$="logo-hp.svg"] { height: 20px; }
.prev-price-amount.is-pending { font-family: var(--sans); font-size: var(--t-sm); }
.prev-vendor-logo[src*="logo-hp"] { height: 20px; width: auto; }
:root[data-theme="dark"] .prev-vendor-logo { filter: none; opacity: 1; background: #fff; border-radius: 4px; padding: 3px 6px; box-sizing: content-box; }
/* ==========================================================================
V10.7 (14 ottobre 2026): passata di congruita' sulla home
- titoli di sezione su una riga (niente a capo forzati)
- "Come funziona": tre schede piene con numero in cerchio, come
l'avanzamento del configuratore, e freccia di collegamento
- griglia categorie: la cella vuota dell'ultima riga resta bianca
- guida: colonne bilanciate, FAQ che accompagna lo scorrimento
========================================================================== */
.flow-h2 { max-width: none; }
.starts { padding-top: var(--s9); }
.starts-head, .guide-head { margin-bottom: var(--s6); }
/* ----- Come funziona ----- */
.flow { padding: var(--s9) 0; }
.flow-header { margin-bottom: var(--s6); }
.flow-track { padding-top: 0; }
.flow-seq { gap: var(--s4); } /* come la griglia "Tre modi": colonne allineate */
.flow-seq::before { display: none; }
.flow-step,
.flow-seq > .flow-step:last-child {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
grid-template-areas: "n verb" "n title" "cap cap";
column-gap: var(--s4);
row-gap: 3px;
align-items: center;
align-content: start;
padding: var(--s6);
background: var(--surface-elevated);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--sh-1);
transition: transform 220ms var(--e-out), border-color 220ms var(--e-out), box-shadow 220ms var(--e-out);
}
.flow-n {
grid-area: n;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
margin: 0;
font-family: var(--sans, inherit);
font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
background: var(--navy); color: #fff;
}
.flow-verb { grid-area: verb; margin: 0; align-self: end; }
.flow-title { grid-area: title; margin: 0; font-size: var(--t-lg); align-self: start; }
.flow-accent {
position: absolute; top: -1px; left: var(--s6);
width: 44px; height: 3px; margin: 0; border-radius: 0 0 2px 2px;
background: var(--teal);
transform: scaleX(1); transform-origin: left center;
}
.flow-caption {
grid-area: cap;
max-width: none;
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
/* freccia tra una scheda e la successiva, all'altezza del numero */
.flow-step:not(:last-child)::after {
content: '';
position: absolute;
top: calc(var(--s6) + 20px);
right: calc(var(--s4) / -2 - 5px);
width: 9px; height: 9px;
border-top: 2px solid var(--teal);
border-right: 2px solid var(--teal);
transform: translateY(-50%) rotate(45deg);
z-index: 2;
}
@media (hover: hover) {
.flow-step:hover { transform: translateY(-3px); border-color: var(--teal-200); box-shadow: var(--sh-2); }
.flow-step:hover .flow-n { color: #fff; background: var(--teal-700); }
.flow-step:hover .flow-accent { transform: scaleX(1.6); }
}
:root[data-theme="dark"] .flow-step { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.12); box-shadow: none; }
:root[data-theme="dark"] .flow-n,
:root[data-theme="dark"] .flow-step:hover .flow-n { background: var(--mint); color: var(--navy); opacity: 1; }
:root[data-theme="dark"] .flow-caption { border-top-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .flow-step:not(:last-child)::after { border-color: var(--mint); }
/* Brand: stessa distanza dagli step che c'e' tra header e step */
.flow .brands { margin-top: var(--s8); padding-top: var(--s6); }
@media (max-width: 960px) {
.flow-seq { gap: var(--s4); }
.flow-seq > .flow-step, .flow-seq > .flow-step:last-child { padding: var(--s5); }
.flow-step:not(:last-child)::after { right: calc(var(--s4) / -2 - 5px); top: calc(var(--s5) + 20px); }
.flow-accent { left: var(--s5); }
}
@media (max-width: 760px) {
.flow-seq { grid-template-columns: 1fr; gap: var(--s5); }
.flow-seq > .flow-step, .flow-seq > .flow-step:first-child, .flow-seq > .flow-step:last-child {
padding: var(--s5); border-top: 1px solid var(--line);
}
/* freccia verso il basso tra le schede impilate */
.flow-step:not(:last-child)::after {
top: auto; bottom: calc(var(--s5) / -2 - 6px); right: auto; left: calc(var(--s5) + 15px);
transform: rotate(135deg);
}
.flow-n { font-size: var(--t-sm); margin: 0; }
.flow-caption { margin-top: var(--s3); padding-top: var(--s3); }
}
/* ----- Griglia categorie: niente "buco" grigio nell'ultima riga (tema chiaro) ----- */
:root:not([data-theme="dark"]) .cat-index { background: var(--surface-elevated); }
:root:not([data-theme="dark"]) .cat-index > .cat-cell,
:root:not([data-theme="dark"]) .cat-index > .cat-cell-sk { outline: 1px solid var(--line); }
/* ----- Configuratore: meno vuoto prima della guida ----- */
.tool { padding-bottom: var(--s10); }
/* ----- Guida: colonne bilanciate ----- */
.guide-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 861px) {
.faq { position: sticky; top: calc(var(--head, 64px) + var(--s6)); }
}
@media (max-width: 860px) { .guide-cols { grid-template-columns: 1fr; } }
/* ----- Fascia valori: descrizioni a tutta colonna ----- */
.value-desc { max-width: 44ch; }
/* ----- Passo 01: barra in fondo mai vuota a sinistra ----- */
@media (min-width: 721px) {
#panel1 > .panel-foot:has(> .panel-foot-status[hidden])::before {
content: 'Seleziona una o più categorie per continuare';
font-size: var(--t-xs); color: var(--text-soft);
}
}
/* ----- Mobile: rifiniture ----- */
@media (max-width: 760px) {
.flow-accent { display: none; }
}
@media (max-width: 520px) {
/* ultimo brand da solo sulla riga: occupa tutta la riga, centrato */
.brands-list > .brands-item:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
/* ----- Passo 01: barra sticky con respiro ai lati, come una scheda ----- */
@media (min-width: 721px) {
#panel1 > .panel-foot {
padding: var(--s4) var(--s5);
margin-top: var(--s6);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface-elevated);
}
}
:root[data-theme="dark"] .flow-accent { background: var(--mint); }
.flow-n { align-self: start; }
.flow-verb { align-self: end; padding-top: 2px; }
/* ----- Brand su tablet: righe centrate, nessun logo isolato a sinistra ----- */
@media (min-width: 521px) and (max-width: 960px) {
.brands-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.brands-list > .brands-item { flex: 0 0 calc((100% - 30px) / 4); }
}
/* ----- Ricerca: una sola "x" (nascosta quella nativa), suggerimenti su due righe ----- */
#seekInput::-webkit-search-cancel-button,
#seekInput::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.seek-sug li { grid-template-columns: minmax(0, 1fr); gap: 2px; line-height: 1.35; }
.seek-sug li .sug-meta { white-space: normal; }
/* ----- Schede prodotto: prezzo e pulsanti allineati in fondo su tutta la riga ----- */
.item-body > .item-price { margin-top: auto; }
/* conferma "Aggiunto al bundle" sovrapposta in fondo: niente spazio vuoto riservato */
.item-body { position: relative; }
.rack:not(.dense) .item-flash {
position: absolute; left: var(--s5); right: var(--s5); bottom: 4px;
margin: 0; pointer-events: none;
}
.rack:not(.dense) .item-body { padding-bottom: calc(var(--s5) + 8px); }
/* ----- V10.9: documento PDF, descrizione completa e riepilogo per categoria ----- */
#printArea .it-desc{display:block;color:var(--pr-ink);font-size:9.5px;font-weight:400;line-height:1.4;margin-top:2px;}
#printArea .cat-sum{margin-top:10px;}
#printArea .cat-sum .card-title{margin-bottom:6px;}
#printArea .cs-table{width:100%;border-collapse:collapse;font-size:10px;}
#printArea .cs-table th{font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pr-label);text-align:left;padding:4px 7px;border-bottom:1px solid var(--pr-line-2);}
#printArea .cs-table td{padding:3px 7px;color:var(--pr-navy);border-bottom:1px solid var(--pr-line-2);font-variant-numeric:tabular-nums;}
#printArea .cs-table .r{text-align:right;white-space:nowrap;}
#printArea .cs-table tbody tr:nth-child(even) td{background:#f8fafc;}
/* ==========================================================================
V10.10: quantita' nel pannello bundle, budget sempre a portata, percorso guidato
========================================================================== */
/* --- budget compatto (pannello bundle e carrello mobile) --- */
.bud-box { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--paper-2); display: grid; gap: 6px; }
.bud-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.bud-lbl { font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.bud-lbl span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.bud-in { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-elevated); padding: 0 8px; min-width: 0; flex: 0 1 132px; }
.bud-in > span { color: var(--text-soft); font-size: var(--t-xs); }
.bud-input, .bud-in input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-sm); font-weight: 650; color: var(--ink); padding: 6px 0; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.bud-in:focus-within { border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .15); }
.bud-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bud-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--teal); transition: width 260ms var(--e-out), background-color 200ms; }
.bud-box.is-over .bud-fill { background: #dc2626; }
.bud-msg { font-size: var(--t-micro); color: var(--text); margin: 0; font-variant-numeric: tabular-nums; }
.bud-box.is-ok .bud-msg b { color: var(--teal-700); }
.bud-box.is-over .bud-msg b { color: #b91c1c; }
.tray .bud-box { padding: var(--s3) var(--s6); }
:root[data-theme="dark"] .bud-box.is-ok .bud-msg b { color: var(--mint); }
:root[data-theme="dark"] .bud-box.is-over .bud-msg b { color: #fca5a5; }
/* --- testata del pannello: conteggio + svuota --- */
.mb-head-r { display: inline-flex; align-items: baseline; gap: var(--s3); }
.mb-clear { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-micro); font-weight: 650; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mb-clear:hover { color: #b91c1c; }
/* --- righe del pannello con +/- --- */
@media (min-width: 1200px) {
.mini-bundle-line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mini-bundle-line .mb-step { grid-column: 1; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mini-bundle-line .mb-sub { grid-column: 2; }
.mb-btn { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-elevated); color: var(--ink); cursor: pointer; padding: 0; flex: none; transition: background-color 140ms, border-color 140ms, color 140ms; }
.mb-btn svg { width: 13px; height: 13px; stroke-width: 2.2; }
.mb-btn:hover { border-color: var(--teal); background: var(--teal-050); }
.mb-btn.is-rm { color: #b91c1c; }
.mb-btn.is-rm:hover { border-color: #fca5a5; background: #fef2f2; }
.mb-btn.is-rm svg { stroke-width: 1.8; }
.mb-q { width: 44px; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-elevated); text-align: center; font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--ink); padding: 0 2px; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.mb-q::-webkit-outer-spin-button, .mb-q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mb-q:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .15); }
.mb-unit { color: var(--text-soft); font-size: var(--t-micro); white-space: nowrap; margin-left: 2px; font-variant-numeric: tabular-nums; }
.mini-bundle-empty .link-btn { font-size: var(--t-xs); justify-self: center; }
:root[data-theme="dark"] .mb-btn:hover { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .mb-btn.is-rm { color: #fca5a5; }
:root[data-theme="dark"] .mb-btn.is-rm:hover { background: rgba(220,38,38,.15); }
}
/* --- ingressi al percorso guidato --- */
.needs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.needs-head .needs-title { margin-bottom: 0; }
.needs-guide { gap: 6px; }
.needs-guide svg { width: 16px; height: 16px; }
.starts-guide { margin: var(--s5) 0 0; font-size: var(--t-sm); color: var(--text); text-align: center; }
/* --- dialogo del percorso guidato --- */
.dlg-guide .dlg-box { max-width: 760px; }
.guide-progress { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 0 0 var(--s4); max-width: 320px; }
.guide-progress span { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(.16); transition: transform 300ms var(--e-out); }
.guide-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.guide-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s3); text-align: left; padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-elevated); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 140ms, background-color 140ms, box-shadow 140ms; }
.guide-opt:hover { border-color: var(--teal); }
.guide-opt.is-on { border-color: var(--teal-700); background: var(--teal-050); box-shadow: inset 0 0 0 1px var(--teal-700); }
.guide-opt:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.go-ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700); }
.go-ico svg { width: 20px; height: 20px; }
.guide-opt:not(:has(.go-ico)) { grid-template-columns: minmax(0, 1fr) auto; }
.go-txt { display: grid; gap: 3px; min-width: 0; }
.go-txt b { font-size: var(--t-sm); font-weight: 700; }
.go-txt span { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.45; }
.go-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; }
.go-check.is-multi { border-radius: 5px; }
.go-check svg { width: 12px; height: 12px; }
.guide-opt.is-on .go-check { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.guide-sub { margin: var(--s5) 0 var(--s3); font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.guide-sub:first-child { margin-top: 0; }
.guide-nums { display: flex; flex-wrap: wrap; gap: var(--s4); }
.guide-num { display: grid; gap: 6px; font-size: var(--t-xs); font-weight: 650; color: var(--text); }
.guide-num input[type="number"] { width: 160px; height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; font: inherit; font-size: var(--t-md); font-weight: 700; color: var(--ink); background: var(--surface-elevated); }
.guide-num input:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .15); }
.guide-num-wide .bud-in { height: 44px; padding: 0 12px; max-width: 320px; }
.guide-num-wide .bud-in input { width: 100%; font-size: var(--t-md); text-align: left; }
.guide-stima { margin: var(--s4) 0 0; font-size: var(--t-sm); color: var(--text); line-height: 1.55; }
.guide-foot { align-items: center; }
.guide-foot .btn { flex: 0 0 auto; }
.guide-foot-sp { flex: 1; }
.guide-why { font-size: var(--t-xs); color: var(--text-soft); }
#guideNext.is-blocked { opacity: .55; cursor: not-allowed; }
/* proposta */
.gp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.gp-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.gp-table th { text-align: left; font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.gp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gp-table tr:last-child td { border-bottom: 0; }
.gp-table .r, .gp-sub, .gp-qty { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-voce b { display: block; color: var(--ink); font-size: var(--t-xs); }
.gp-voce span { display: block; color: var(--text-soft); font-size: var(--t-micro); }
.gp-mod select { width: 100%; max-width: 330px; height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-elevated); color: var(--ink); font: inherit; font-size: var(--t-xs); padding: 0 6px; }
.gp-qty input { width: 68px; height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-elevated); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 700; text-align: right; padding: 0 8px; }
.gp-sub { font-weight: 700; color: var(--ink); }
.gp-rm .icon-btn { width: 32px; height: 32px; color: var(--text-soft); }
.gp-rm .icon-btn:hover { color: #b91c1c; }
.gp-rm svg { width: 16px; height: 16px; }
.gp-acc td { background: var(--paper-2); }
.gp-nota { display: block; color: var(--text-soft); font-size: var(--t-micro); }
.gp-tot { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s4) 2px 0; }
.gp-tot span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.gp-tot b { font-size: var(--t-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
.guide-alert { display: flex; gap: 8px; align-items: flex-start; margin: var(--s3) 0 0; padding: 10px 12px; border-radius: 8px; font-size: var(--t-xs); line-height: 1.5; background: var(--paper-2); color: var(--text); }
.guide-alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.guide-alert.is-ok { background: var(--teal-050); color: var(--ink); }
.guide-alert.is-ok svg { color: var(--teal-700); }
.guide-alert.is-over { background: #fef2f2; color: #7f1d1d; }
.guide-note { margin: var(--s3) 0 0; font-size: var(--t-micro); color: var(--text-soft); }
:root[data-theme="dark"] .guide-opt.is-on { background: rgba(var(--teal-rgb), .12); }
:root[data-theme="dark"] .go-ico { background: rgba(var(--teal-rgb), .14); color: var(--mint); }
:root[data-theme="dark"] .guide-alert.is-ok { background: rgba(var(--teal-rgb), .12); }
:root[data-theme="dark"] .guide-alert.is-over { background: rgba(220,38,38,.14); color: #fecaca; }
@media (max-width: 720px) {
.guide-opts, .guide-opts-3 { grid-template-columns: 1fr; }
.gp-table thead { display: none; }
.gp-table tr { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.gp-table td { padding: 0; border: 0; }
.gp-voce { grid-column: 1 / -1; }
.gp-mod { grid-column: 1 / -1; }
.gp-mod select { max-width: none; }
.guide-foot .btn { flex: 1 1 auto; }
.guide-foot-sp, .guide-why { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bud-fill, .guide-progress span { transition: none; } }
#guideQ:focus { outline: none; }
:root[data-theme="dark"] .link-btn { color: var(--mint); }
/* collaudo v10.10: link "Vai al riepilogo" fuori schermo su 320 px; contrasto messaggio budget nel tema scuro */
@media (max-width: 520px) {
.skip.skip-2 { left: var(--s5); }
.skip.skip-2:focus { top: calc(var(--s3) + 48px); }
}
:root[data-theme="dark"] .budget-msg.ok { background: rgba(var(--teal-rgb), .12); color: var(--mint); border-color: rgba(var(--teal-rgb), .35); }
:root[data-theme="dark"] .budget-msg.warn { color: #fcd34d; }
:root[data-theme="dark"] .tray .tag-wait, :root[data-theme="dark"] .tag-wait { color: #fbbf24; }
/* ----- V10.11: scelta iniziale "da solo / guidato" ----- */
.dlg-start .dlg-box { max-width: 680px; }
.start-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.start-opt { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding: var(--s5); }
.start-opt .start-go-ico { align-self: center; }
.start-opt .go-txt b { font-size: var(--t-md); }
.start-go-ico { width: 18px; height: 18px; color: var(--teal-700); transition: transform 160ms var(--e-out); }
.start-opt:hover .start-go-ico { transform: translateX(3px); }
.start-alt { margin: var(--s5) 0 0; font-size: var(--t-xs); color: var(--text-soft); line-height: 1.6; }
:root[data-theme="dark"] .start-go-ico { color: var(--mint); }
@media (max-width: 720px) { .start-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .start-go-ico { transition: none; } }
/* ==========================================================================
V10.12: badge e filtro TCO Certified (logo ufficiale, solo modelli
con certificazione verificata, colonna TCO CERTIFIED dell'Excel)
========================================================================== */
.item-tco {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px 2px 4px;
font-size: 11px; font-weight: 650; letter-spacing: .01em; line-height: 1.35;
border-radius: 999px; border: 1px solid #b9dcc2;
background: #fff; color: #1f2a6e;
}
:root[data-theme="dark"] .item-tco { background: #fff !important; color: #1f2a6e !important; border-color: #b9dcc2; }
.item-tco img { width: 26px; height: 16px; flex: none; display: block; }
.pick-row .pick-name img.pick-tco {
width: 26px; height: 16px; flex: none; display: block;
background: #fff; border-radius: 3px; padding: 1px;
box-sizing: content-box;
}
/* ==========================================================================
V10.13: nota "Da verificare" sugli accessori legati (Poly Studio V12 + Power Kit).
Il riquadro sta sul fondo scuro del riepilogo in entrambi i temi.
========================================================================== */
.issue-help .ih-note,
.panel#panel3 .issue-help .ih-note {
margin-top: 10px; padding: 8px 10px 8px 12px;
border-left: 3px solid #fb923c; border-radius: 6px;
background: rgba(251,146,60,.14); color: #ffedd5;
}
.issue-help .ih-note .ih-t,
.panel#panel3 .issue-help .ih-note .ih-t { color: #fdba74; }
.issue-help .ih-note b,
.panel#panel3 .issue-help .ih-note b { color: #fff; }
/* V10.13: abbinamento PC Tiny / monitor TIO (scheda prodotto e percorso guidato) */
.prev-tiny-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.prev-tiny-add { margin-left: auto; }
.guide-tiny { align-items: flex-start; }
.guide-tiny .gt-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.guide-tiny svg { flex: none; }
#pickTco { margin-top: 2px; }
/* ==========================================================================
V10.16: barra "Tutte le categorie / Azzera filtri" sempre visibile in cima
ai filtri, "solo" sulle categorie, cestino diretto nel pannello bundle
========================================================================== */
.sieve-topbar {
position: sticky; top: 0; z-index: 3;
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
margin: 0 0 var(--s4); padding: 8px 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.st-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 34px; padding: 6px 8px;
border: 1px solid var(--line-strong); border-radius: 8px;
background: var(--surface-elevated, #fff); color: var(--ink);
font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.2;
cursor: pointer; transition: border-color 140ms, background-color 140ms, color 140ms;
}
.st-btn svg { width: 15px; height: 15px; flex: none; }
.st-btn:hover { border-color: var(--teal); background: var(--teal-050); }
.st-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.st-reset.is-on { border-color: #b45309; color: #92400e; background: #fff7ed; }
.st-reset.is-on:hover { background: #ffedd5; }
:root[data-theme="dark"] .st-btn { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .st-btn:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .st-reset.is-on { border-color: #fb923c; color: #fed7aa; background: rgba(251,146,60,.12); }
.pick-row .pick-solo {
margin-left: auto; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--line-strong); background: transparent;
font: inherit; font-size: 11px; font-weight: 650; color: var(--text-soft);
cursor: pointer; opacity: 0; transition: opacity 120ms, color 120ms, border-color 120ms;
}
.pick-row:hover .pick-solo, .pick-row:focus-within .pick-solo, .pick-solo:focus-visible { opacity: 1; }
.pick-row .pick-solo:hover { color: var(--ink); border-color: var(--teal); }
.pick-row .pick-solo + .pick-n { margin-left: 6px; }
@media (hover: none) { .pick-row .pick-solo { opacity: 1; } }
.mb-btn.mb-del { margin-left: 2px; }
/* sopra il minimo c'e' il cestino: il prezzo unitario passa nel tooltip del subtotale */
.mb-step:has(.mb-del) .mb-unit { display: none; }
.st-btn { white-space: nowrap; }
/* ==========================================================================
V10.19: logo del marchio a colori anche nella scheda prodotto (prima grigio
nel tema chiaro); il nome del prodotto si capisce che apre i dettagli
========================================================================== */
.prev-vendor-logo, .prev-vendor-logo[alt] { filter: none; opacity: 1; }
.item-name-btn .item-name-ico {
display: inline-flex; vertical-align: -1px; margin-left: 6px;
width: 15px; height: 15px; padding: 2px; border-radius: 4px;
color: var(--teal-700); background: var(--teal-050);
transition: background-color 140ms, color 140ms;
}
.item-name-btn .item-name-ico svg { width: 100%; height: 100%; }
.item-name-btn:hover .item-name-ico, .item-name-btn:focus-visible .item-name-ico { background: var(--teal-700); color: #fff; }
:root[data-theme="dark"] .item-name-btn .item-name-ico { background: rgba(255,255,255,.08); color: var(--mint, #6ee7b7); }
:root[data-theme="dark"] .item-name-btn:hover { color: #6ee7b7; text-decoration-color: rgba(110,231,183,.6); }
:root[data-theme="dark"] .item-name-btn:hover .item-name-ico { background: #6ee7b7; color: #0d1524; }
/* ==========================================================================
V10.20: collaudo finale grafico (tema scuro, mobile, scheda prodotto)
========================================================================== */
/* tema scuro: colori del tema chiaro rimasti illeggibili */
:root[data-theme="dark"] .eco-note strong, :root[data-theme="dark"] .eco-note svg,
:root[data-theme="dark"] .kicker-ok, :root[data-theme="dark"] .seal-ok, :root[data-theme="dark"] .tag-ok,
:root[data-theme="dark"] .step.was .step-n, :root[data-theme="dark"] .step.was .step-name,
:root[data-theme="dark"] .pick-row .pick-name svg, :root[data-theme="dark"] .density-btn[aria-pressed="true"],
:root[data-theme="dark"] .shelf-chips .chip strong, :root[data-theme="dark"] .item.taken .item-brand { color: var(--mint); }
:root[data-theme="dark"] .ergo-note strong, :root[data-theme="dark"] .ergo-note svg { color: #93b4ff; }
:root[data-theme="dark"] main a:not([class]), :root[data-theme="dark"] .sitefoot a:not([class]),
:root[data-theme="dark"] .entity-privacy a { color: var(--mint); }
:root[data-theme="dark"] .stepper button { color: var(--ink); }
:root[data-theme="dark"] .stepper button:disabled { color: var(--text-mute); opacity: .5; }
:root[data-theme="dark"] .pick-row input { accent-color: var(--teal); }
/* scheda prodotto: chiusura visibile nel tema scuro, foto non in un riquadro bianco, azioni sempre a vista */
:root[data-theme="dark"] .prev-close { background: var(--paper-3, #1b2638); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
:root[data-theme="dark"] .prev-stage { background: #dee3ec; }
:root[data-theme="dark"] .prev-stage img { filter: brightness(.94) saturate(.95); }
.prev-stage { aspect-ratio: auto; height: min(40vh, 340px); }
.prev-actions { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 1px solid var(--line); }
.prev-actions .btn-solid:disabled, .prev-actions .btn-solid[aria-disabled="true"] { background: var(--teal-050); color: var(--teal-700); border: 1px solid rgba(var(--teal-rgb), .35); opacity: 1; }
:root[data-theme="dark"] .prev-actions .btn-solid:disabled, :root[data-theme="dark"] .prev-actions .btn-solid[aria-disabled="true"] { background: rgba(110,231,183,.10); color: var(--mint); border-color: rgba(110,231,183,.35); }
/* chip "Parti da un'esigenza" schiacciati su mobile */
@media (max-width: 1359px) { .needs-chips .chip-filter { flex: none; } }
/* filtri: conteggi delle categorie tagliati con la sidebar stretta */
.pick { grid-template-columns: minmax(0, 1fr); }
.pick-row { min-width: 0; gap: 8px; }
.pick-row .pick-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* vista elenco: nomi su massimo 2 righe */
.rack.dense .item-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* contorni di fuoco su elementi non interattivi (finestre, titoli) */
.dlg-box:focus, .dlg-box:focus-visible, #guideQ:focus, #guideBody:focus, [tabindex="-1"]:focus { outline: none; }
/* pannello bundle vuoto: niente fascia vuota in basso */
.mini-bundle-foot:empty { display: none; }
/* barra del catalogo: niente contenuto che traspare sopra */
.shelf-bar { top: var(--head); box-shadow: 0 -8px 0 0 var(--paper-2), 0 12px 16px -14px rgba(0,0,0,.10); }
:root[data-theme="dark"] .shelf-bar { box-shadow: 0 -8px 0 0 var(--paper-2), 0 12px 16px -14px rgba(0,0,0,.4); }
/* tema scuro: griglia categorie e card */
:root[data-theme="dark"] .cat-index { background: var(--paper); }
:root[data-theme="dark"] .cat-index > .cat-cell { outline: 1px solid var(--line); }
:root[data-theme="dark"] .item-head { padding-bottom: 10px; }
/* codice CNV: a capo pulito */
.seal-code { overflow-wrap: anywhere; text-wrap: balance; }
.masthead.is-scrolled { background: var(--navy); }
@media (max-width: 720px) {
/* barra catalogo compatta: piu' prodotti a vista */
.shelf-bar { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
.shelf-count { flex: 1 1 100%; }
.shelf-tools { width: 100%; flex-wrap: nowrap; gap: 8px; }
.sieve-open { flex: 0 0 auto; }
.shelf-sort { flex: 1 1 0; min-width: 0; }
.shelf-sort label { display: none; }
.shelf-density { order: 0; margin-left: 0; }
/* percorso guidato su mobile */
#guideSheet .guide-foot { flex-direction: row; }
#guideSheet .guide-foot .btn { width: auto; }
.gp-table tr { grid-template-columns: auto 1fr auto; align-items: center; }
.gp-table td:nth-child(4) { text-align: right; }
.brands-item img { max-width: 78%; }
}
#guideBody { scroll-padding-bottom: 24px; padding-bottom: 24px; }
@media (max-width: 560px) {
/* categorie su due colonne: meno scorrimento */
.cat-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-name { font-size: 13px; }
}
@media (max-width: 380px) { .shelf-density { display: none; } }
/* vista elenco: piu' spazio al nome (azione piu' stretta) */
@media (min-width: 721px) {
.rack.dense .item-body { grid-template-columns: minmax(0, 1fr) 88px 132px; }
.rack.dense .item-actions .btn.btn-solid.btn-sm { min-width: 0; width: 100%; }
}