/* ==========================================================================
FUSO Italia — tema di marca del portale rete
Valori misurati il 2026-08-04 su https://www.fuso-trucks.de/ (sorgente CSS
e stili calcolati) e sul brand book FUSO Europe 11.2023, pagina 16 per i
codici colore. Spec: docs/superpowers/specs/2026-08-04-fuso-portale-rete-grafica-design.md
DA NON VIOLARE
- Palette chiusa: nessun colore nuovo (brand book p2).
- Angolo 45° e solo 45°: gradiente e taglio del blocco logo (p3/p13/p14).
- Titoli MAI in text-transform:uppercase: romperebbe «eCanter» e
«MAKES e WORK» (p3). Le maiuscole si scrivono nel testo.
- Il grassetto è una famiglia, non un peso: tutte le famiglie a 400.
- Aqua Blue è colore grafico: su bianco dà 2,3:1, mai testo né icone.
- Logo: solo l'asset ufficiale, mai ricostruito (p2, p9-p11).
- Caratteri e texture: presi dal sito FUSO Europe per la revisione interna,
licenza web DA INTESTARE col CI package prima della messa online (LEGGIMI.md).
========================================================================== */
@font-face {
font-family: "HelveticaNeueLTCond";
src: url("asset/fonts/HelveticaNeueLTCond.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "HelveticaNeueLTCondBold";
src: url("asset/fonts/HelveticaNeueLTCondBold.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
:root {
/* Palette ufficiale — brand book p16 */
--fuso-white: #FFFFFF;
--fuso-black: #000000;
--fuso-midnight-blue: #2E3192; /* PMS 280 U / 294 C */
--fuso-aqua-blue: #2ABDBB; /* PMS 3252 U / 3242 C */
--fuso-concrete-grey: #C7C8CA; /* PMS 427 U / 428 C */
--fuso-red: #E10202; /* solo filetto nav attiva/hover, 2px */
/* Grigi e blu di interfaccia, misurati su fuso-trucks.de */
--fuso-ink: #262626;
--fuso-ink-soft: #666F74;
--fuso-link-hover: #6E71D1;
--fuso-line: #D9D9D9;
--fuso-grey-btn: #F0F0F0;
--fuso-grey-block: #EBEDED;
--fuso-grey-sect: #F8F8F8;
--fuso-gradient: linear-gradient(45deg, #2E3192, #2ABDBB);
/* La texture di cemento sta in una variabile perche' la usano in due, testata
e footer — come sul sito FUSO, che per entrambi carica lo stesso file.
Dichiarandola una volta sola, nella pagina autoconsistente viene incorporata
una volta sola: due copie peserebbero 320 KB in piu' a pagina. */
--fuso-cemento: url("asset/fuso-header-bg.jpg");
--fuso-font: "HelveticaNeueLTCond", Arial, Helvetica, sans-serif;
--fuso-font-bold: "HelveticaNeueLTCondBold", "HelveticaNeueLTCond", Arial, sans-serif;
--wrap: 1386px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
}
/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body.fuso {
margin: 0;
background: var(--fuso-white);
color: var(--fuso-ink);
font-family: var(--fuso-font);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
/* Titoli: famiglia bold, peso 400, NIENTE maiuscolo forzato. */
.fuso h1, .fuso h2, .fuso h3 {
font-family: var(--fuso-font-bold);
font-weight: 400;
color: var(--fuso-black);
margin: 0 0 var(--sp-4);
}
.fuso h1 { font-size: 36px; line-height: 36px; }
.fuso h2 { font-size: 36px; line-height: 36px; }
.fuso h3 { font-size: 24px; line-height: 30px; }
.fuso p { margin: 0 0 var(--sp-3); }
.fuso a { color: var(--fuso-midnight-blue); text-underline-offset: 2px; }
.fuso a:hover, .fuso a:focus { color: var(--fuso-link-hover); }
.fuso :focus-visible {
outline: 3px solid var(--fuso-midnight-blue);
outline-offset: 2px;
}
.fuso-wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 0 25px; }
.fuso-griglia {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fuso-vuoto { color: var(--fuso-ink-soft); }
/* ── Testata: due fasce, 96 + 52 px, come fuso-trucks.de ──────────────── */
.fuso-header { width: 100%; background: var(--fuso-white); }
/* La testata va a tutta larghezza, non incolonnata come i contenuti. Sul sito
FUSO la regola `.header__wrapper { max-width: inherit; margin: 0; padding: 0 }`
ribalta di proposito il vincolo a 1386px che vale per il resto della pagina:
cemento e navigazione corrono da bordo a bordo. */
.fuso-header__wrap { max-width: none; margin: 0; padding: 0; width: 100%; }
/* Fascia alta: texture di cemento, elemento grafico ufficiale (p3). */
.fuso-header__top {
height: 96px;
display: flex;
align-items: stretch;
background-image: var(--fuso-cemento);
background-repeat: repeat;
}
/* Blocco logo: gradiente 45° tagliato in diagonale. La firma FUSO sul web. */
.fuso-header__logo {
flex: 0 0 352px;
width: 352px;
height: 96px;
background: var(--fuso-gradient);
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
padding: 30px 0 36px 50px;
}
.fuso-header__logo img { height: 32px; width: auto; display: block; }
/* Il collegamento si stringe sull'immagine: da elemento in linea si allargherebbe
a tutto lo spazio disponibile e l'anello di fuoco finirebbe sull'angolo tagliato.
Il padding con margine negativo allarga solo l'area che si tocca — il logo non
si sposta di un pixel — perche' 24px di altezza sono pochi per un dito. */
.fuso-header__logo a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* Dentro il blocco a gradiente un anello a tinta unica non regge: il bianco
va benissimo sul lato Midnight (10,7:1) ma scende a 2,3:1 sul lato Aqua,
sotto la soglia di 3:1 per gli indicatori di fuoco. Doppio anello — bianco
dentro, velo scuro fuori — così almeno uno dei due è sempre in contrasto,
qualunque punto del gradiente gli capiti sotto. */
.fuso-header__logo a:focus-visible {
outline: 3px solid var(--fuso-white);
outline-offset: 2px;
box-shadow: 0 0 0 8px rgba(0, 0, 0, .55);
}
/* Sul cemento, all'estremita' destra della fascia, l'insegna del servizio:
fissa su tutte le pagine. Non e' un claim «Ready To …» — quelli non si
inventano e non si traducono (brand book p3) — e' il nome dello strumento,
e sta esattamente dove il sito FUSO mette il claim, con le stesse misure
lette li': allineata a destra, nera, Condensed Bold 20/24, 40px dal bordo.
Nera e non Midnight perche' e' cosi' che la tiene FUSO: sul punto piu' scuro
della texture fa 10,9:1 contro i 5,5:1 del Midnight. */
.fuso-header__insegna {
margin-left: auto;
align-self: center;
min-width: 0;
padding-right: 40px;
text-align: right;
font-family: var(--fuso-font-bold);
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: var(--fuso-black);
}
/* Fascia bassa: navigazione, allineata a sinistra sotto il logo. Voce attiva
e hover con filetto rosso FUSO. */
.fuso-nav {
height: 52px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--sp-8);
padding: 0 40px 0 50px;
background: var(--fuso-white);
border-bottom: 1px solid var(--fuso-line);
}
.fuso-nav a {
position: relative;
display: inline-block;
padding: 16px 0;
font-family: var(--fuso-font-bold);
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
color: var(--fuso-black);
text-decoration: none;
}
.fuso-nav a::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--fuso-red);
opacity: 0;
transition: opacity .1s linear;
}
.fuso-nav a:hover, .fuso-nav a:focus { color: var(--fuso-black); }
.fuso-nav a:hover::after,
.fuso-nav a:focus::after,
.fuso-nav a[aria-current="page"]::after { opacity: 1; }
/* ── Banda «dati d'esempio» ───────────────────────────────────────────── */
.fuso-demo {
background: var(--fuso-concrete-grey);
color: var(--fuso-black);
font-size: 14px;
text-align: center;
padding: var(--sp-2) var(--sp-4);
}
/* ── Apertura fotografica ─────────────────────────────────────────────── */
.fuso-hero { position: relative; background: var(--fuso-black); }
.fuso-hero__foto {
display: block;
width: 100%;
height: clamp(220px, 32vw, 420px);
object-fit: cover;
}
.fuso-hero__testo {
position: absolute; left: 0; right: 0; bottom: 0;
padding: var(--sp-8) 0;
/* velatura verticale, la stessa del sito FUSO: non e' l'angolo di marca */
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
}
.fuso-hero__testo h1, .fuso-hero__testo p { color: var(--fuso-white); }
.fuso-hero__testo p { max-width: 62ch; margin-bottom: 0; }
/* ── Riquadri ─────────────────────────────────────────────────────────── */
.fuso-card {
background: var(--fuso-white);
border: 1px solid var(--fuso-line);
padding: var(--sp-4);
}
.fuso-card--surface { background: var(--fuso-grey-sect); border-color: transparent; }
.fuso-teaser {
display: flex; flex-direction: column; gap: var(--sp-2);
text-decoration: none; color: inherit;
border-top: 3px solid var(--fuso-midnight-blue);
transition: box-shadow .15s, transform .15s;
}
.fuso-teaser:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .10); transform: translateY(-2px); }
.fuso-teaser p { color: var(--fuso-ink-soft); font-size: 15px; flex: 1; }
.fuso-teaser .fuso-btn { align-self: flex-start; }
.fuso-kpi { font-family: var(--fuso-font-bold); font-weight: 400; font-size: 40px; line-height: 1; color: var(--fuso-black); }
.fuso-kpi__lab { text-transform: uppercase; font-size: 13px; color: var(--fuso-ink-soft); }
.fuso-news-data { text-transform: uppercase; font-size: 13px; color: var(--fuso-ink-soft); }
/* ── Bottoni: misure prese dal sito ───────────────────────────────────── */
/* Le regole del bottone sono agganciate a `.fuso` di proposito. Un bottone a
volte è un dentro un link (i riquadri di accesso rapido) e a volte è
il link stesso (lo «Scarica il PDF» delle comunicazioni). Nel secondo caso
la regola generica `.fuso a:hover`, che tinge i link di lilla, batterebbe
`.fuso-btn:hover` — pesa uguale ma ha in più il selettore di tipo `a` — e la
scritta resterebbe lilla sul fondo blu invece di diventare bianca.
Agganciando a `.fuso` il bottone guadagna una classe e vince in entrambi i
casi. Se un giorno si toglie `.fuso` da questi selettori, torna il difetto. */
.fuso .fuso-btn {
display: inline-block;
font-family: var(--fuso-font);
font-weight: 400;
font-size: 14px;
line-height: 14px;
letter-spacing: .5px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
padding: 10px 24px;
border: 1px solid var(--fuso-midnight-blue);
border-radius: 0;
background: var(--fuso-grey-btn);
color: var(--fuso-midnight-blue);
cursor: pointer;
transition: background .15s, color .15s;
}
.fuso .fuso-btn:hover, .fuso .fuso-btn:focus {
background: var(--fuso-midnight-blue);
border-color: var(--fuso-midnight-blue);
color: var(--fuso-white);
}
.fuso .fuso-btn--blue { background: var(--fuso-midnight-blue); color: var(--fuso-white); }
/* ── Tabelle: prescrizioni brand book p37 ─────────────────────────────── */
.fuso-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fuso-table th {
font-family: var(--fuso-font-bold);
font-weight: 400;
text-transform: uppercase;
text-align: left;
font-size: 13px;
color: var(--fuso-black);
border-bottom: 1px solid var(--fuso-black);
padding: var(--sp-2);
}
.fuso-table td { padding: var(--sp-2); border-bottom: 1px solid var(--fuso-line); }
.fuso-table tbody tr:hover { background: var(--fuso-grey-sect); }
/* ── Etichette: si distinguono per intensita', non per tinta ──────────── */
.fuso-badge {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
padding: 3px var(--sp-2);
background: var(--fuso-grey-block);
color: var(--fuso-black);
border: 1px solid var(--fuso-line);
}
.fuso-badge--attivo {
background: var(--fuso-midnight-blue);
color: var(--fuso-white);
border-color: var(--fuso-midnight-blue);
}
/* ── Footer, come chiudono i siti FUSO ────────────────────────────────── */
/* Regole COPIATE dal sito FUSO (`.footer`, letto su fuso-trucks.de/branchen/
il 2026-08-04). Il footer non e' bianco: e' cemento, con la fascia a
gradiente del claim incollata sopra. E' lo STESSO file della testata —
`fuso-header-bg.jpg` — quindi il cemento apre e chiude la pagina.
.footer { background-image: url(fuso-header-bg.jpg);
background-repeat: repeat; margin-top: 148px }
.footer__wrapper { padding: 50px 25px 0 }
.footer__bottom__options { border-bottom: 1px solid rgba(38,38,38,.3) }
.footer__bottom__copyright { padding: 12.5px 0 25px }
.footer__bottom__copyright__legal { color: #262626; font-size: 14px;
line-height: 20px }
Su cemento i collegamenti FUSO sono NERI e senza sottolineatura, non blu:
il blu era una nostra scelta da footer bianco e su cemento stonava. */
.fuso-footer {
margin-top: 148px;
background-image: var(--fuso-cemento);
background-repeat: repeat;
color: var(--fuso-ink);
}
.fuso-footer__claim {
background: var(--fuso-gradient);
color: var(--fuso-white);
font-family: var(--fuso-font-bold);
font-size: 16px;
line-height: 20px;
text-align: center;
padding: 18px 32px 20px;
}
.fuso-footer__righe {
display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: flex-start;
padding: 50px 0 var(--sp-8);
font-size: 14px;
line-height: 20px;
}
.fuso-footer a { color: var(--fuso-black); text-decoration: none; transition: color .2s linear; }
/* FUSO passa a rgb(123,123,123), che sarebbe un quattordicesimo colore: si usa
--fuso-ink-soft, che e' il grigio con cui FUSO stessa fa l'hover dei titoli
nello stesso footer. La sottolineatura resta perche' il solo cambio di grigio,
sul cemento, e' un segnale debole. */
.fuso-footer a:hover, .fuso-footer a:focus { color: var(--fuso-ink-soft); text-decoration: underline; }
.fuso-footer__fine {
border-top: 1px solid rgba(38, 38, 38, .3);
padding: 12.5px 0 25px;
font-size: 14px;
line-height: 20px;
color: var(--fuso-ink);
}
/* ══════════════════════════════════════════════════════════════════════
Componenti delle pagine interne (Parco, Garanzie, Lavorazione).
Stanno qui e non nelle singole pagine: sono marca, e la marca ha una
sorgente sola. Una pagina nuova li eredita senza riscriverli.
══════════════════════════════════════════════════════════════════════ */
/* ── Apertura delle pagine interne ────────────────────────────────────── */
/* Gradiente primario come blocco di colore che segna la sezione: e' l'uso che
il brand book gli assegna (p17, «can also be used as a block of colour to
signify a different section within a design»).
Questa regola e' COPIATA dal sito FUSO, dove la fascia si chiama .dealermap
(letta su fuso-trucks.de/branchen/ il 2026-08-04). Li' e' tre righe:
.dealermap { background: linear-gradient(45deg,#2E3192,#2ABDBB);
padding: 80px 0 }
.dealermap h2, .dealermap p { color: #fff }
Gradiente pieno, nessun ritaglio, e 80px di respiro sopra e sotto — e' anche
l'altezza a far leggere la diagonale: su una fascia bassa un gradiente a 45°
sembra orizzontale.
NOTA SUL CONTRASTO: sul lato Aqua il bianco scende, e a fine corsa arriva a
2,3:1. E' cosi' anche sul sito FUSO, dove il testo della fascia sta fra 3,9
e 4,4:1. Qui il testo parte piu' a sinistra e sta un po' meglio, ma resta
sotto i 4,5:1 di riferimento: e' una scelta di fedelta' al marchio, presa in
sessione e segnata nella scheda fra i punti aperti, non una svista.
La fotografia resta la firma della sola Bacheca. */
.fuso-testata-pagina {
background: var(--fuso-gradient);
padding: 80px 0;
}
.fuso-testata-pagina h1,
.fuso-testata-pagina h2,
.fuso-testata-pagina p { color: var(--fuso-white); }
/* Titolo e sommario incolonnati come sul sito, dove il testo della fascia
occupa il terzo sinistro e non corre fino al bordo. */
.fuso-testata-pagina h1,
.fuso-testata-pagina h2 { max-width: 760px; }
.fuso-testata-pagina p { max-width: 62ch; margin-bottom: 0; }
.fuso-testata-pagina .fuso-numerone { color: var(--fuso-white); }
/* ── Moduli: campi, etichette, controlli ──────────────────────────────── */
.fuso-campi {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fuso-campo { margin-bottom: var(--sp-4); }
.fuso-campo:last-child { margin-bottom: 0; }
.fuso-label {
display: block;
font-family: var(--fuso-font-bold);
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .02em;
margin-bottom: var(--sp-1);
}
.fuso-input, .fuso-select, .fuso-textarea {
font-family: var(--fuso-font);
font-weight: 400;
font-size: 15px;
width: 100%;
padding: var(--sp-2);
border: 1px solid var(--fuso-line);
border-radius: 0;
background: var(--fuso-white);
color: var(--fuso-ink);
}
.fuso-input:disabled, .fuso-textarea:disabled, .fuso-select:disabled {
background: var(--fuso-grey-sect);
color: var(--fuso-ink-soft);
}
.fuso-aiuto { font-size: 13px; color: var(--fuso-ink-soft); margin-top: var(--sp-1); }
/* ── Pastiglie di filtro ──────────────────────────────────────────────── */
.fuso-filtri { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.fuso-chip {
font-family: var(--fuso-font-bold);
font-weight: 400;
text-transform: uppercase;
font-size: 13px;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--fuso-concrete-grey);
border-radius: 0;
background: var(--fuso-concrete-grey);
color: var(--fuso-black);
cursor: pointer;
}
.fuso-chip[aria-pressed="true"] {
background: var(--fuso-midnight-blue);
border-color: var(--fuso-midnight-blue);
color: var(--fuso-white);
}
.fuso-chip .n { opacity: .75; margin-left: 6px; }
/* ── Righe chiave/valore, per i riquadri di dettaglio ─────────────────── */
.fuso-kv {
display: flex; justify-content: space-between; gap: var(--sp-4);
padding: 4px 0; border-bottom: 1px solid var(--fuso-line); font-size: 14px;
}
.fuso-kv b { font-family: var(--fuso-font-bold); font-weight: 400; }
/* ── Esiti e avvisi ───────────────────────────────────────────────────── */
.fuso-esito { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.fuso-esito--ok { background: var(--fuso-midnight-blue); color: var(--fuso-white); }
.fuso-esito--ko { background: var(--fuso-concrete-grey); color: var(--fuso-black); }
.fuso-avviso {
background: var(--fuso-concrete-grey); color: var(--fuso-black);
padding: var(--sp-3); font-size: 14px; margin-bottom: var(--sp-6);
}
/* ── Figure e grafici ─────────────────────────────────────────────────── */
.fuso-figura { margin: 0 0 var(--sp-12); }
.fuso-figura figcaption {
font-family: var(--fuso-font-bold); font-weight: 400;
text-transform: uppercase; font-size: 15px; margin-bottom: var(--sp-1);
}
.fuso-nota { font-size: 13px; color: var(--fuso-ink-soft); margin-bottom: var(--sp-3); }
.fuso-legenda {
display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
font-size: 13px; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.fuso-legenda i { width: 12px; height: 12px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
/* Le due serie dei grafici, prescritte dal brand book p37. */
.fuso-legenda .serie-1 { background: var(--fuso-midnight-blue); }
.fuso-legenda .serie-2 { background: var(--fuso-aqua-blue); }
/* Stato «nessun dato»: la cornice del grafico resta, i numeri no. Meglio un
riquadro che dice la verita' di un grafico disegnato su numeri inventati. */
.fuso-senza-dati {
border: 1px dashed var(--fuso-concrete-grey);
background: var(--fuso-grey-sect);
color: var(--fuso-ink-soft);
text-align: center;
padding: var(--sp-12) var(--sp-4);
font-size: 14px;
}
/* ── Blocchi richiudibili ─────────────────────────────────────────────── */
/* Il triangolino resta quello del browser: e' un comando che tutti conoscono
e ridisegnarlo non aggiunge niente. Cambia solo il testo, che si allinea
alle altre etichette della pagina. */
.fuso details { margin-bottom: var(--sp-12); }
.fuso summary {
cursor: pointer;
font-family: var(--fuso-font-bold);
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding: var(--sp-2) 0;
}
/* ── Numero grande d'apertura ─────────────────────────────────────────── */
.fuso-numerone {
font-family: var(--fuso-font-bold); font-weight: 400;
font-size: 72px; line-height: .95;
}
/* ── Due colonne: elenco a sinistra, dettaglio a destra ───────────────── */
.fuso-due { display: grid; gap: var(--sp-6); grid-template-columns: 1fr 380px; align-items: start; }
/* i figli di una griglia non si restringono sotto il contenuto: qui devono,
altrimenti una tabella larga sfonda la colonna */
.fuso-due > * { min-width: 0; }
/* ── Schermi stretti ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
.fuso-header__logo { flex-basis: 260px; width: 260px; padding-left: 25px; }
.fuso-header__insegna { padding-right: 25px; font-size: 17px; line-height: 20px; }
.fuso-nav { padding: 0 25px; }
.fuso-due { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.fuso-header__top { height: 72px; }
.fuso-header__logo { height: 72px; flex-basis: 220px; width: 220px; padding: 22px 0 26px 20px; }
.fuso-header__logo img { height: 24px; }
/* Su telefono l'insegna non ci sta su una riga sola: va a capo da se',
restando allineata a destra come sul sito, dove il claim sta su due righe. */
.fuso-header__insegna { padding-right: 20px; font-size: 15px; line-height: 18px; }
.fuso-nav { height: auto; padding: 0 20px; flex-wrap: wrap; gap: var(--sp-4); }
.fuso-nav a { font-size: 14px; }
.fuso-numerone { font-size: 48px; }
.fuso-filtri { gap: var(--sp-2); }
.fuso h1 { font-size: 28px; line-height: 30px; }
.fuso h2 { font-size: 26px; line-height: 28px; }
.fuso h3 { font-size: 20px; line-height: 24px; }
.fuso-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fuso-footer__claim { padding: 16px 20px 18px; }
/* La foto d'apertura non deve restare un francobollo: con 220px la velatura
del testo ne copriva 177, e del Canter non si vedeva quasi niente. */
.fuso-hero__foto { height: 300px; }
/* Un dito non è un puntatore: tutto ciò che si tocca arriva a 44px di lato,
la misura minima raccomandata (WCAG 2.5.5). A 24px le pastiglie di filtro
si sbagliavano una volta su tre. */
.fuso .fuso-btn,
.fuso-chip {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px;
}
.fuso-chip { padding: 0 var(--sp-3); font-size: 13px; }
.fuso summary { padding: var(--sp-3) 0; min-height: 44px; }
/* 16px non è una scelta estetica: sotto questa misura iOS ingrandisce la
pagina appena si tocca un campo, e poi resta ingrandita. */
.fuso-input, .fuso-select, .fuso-textarea { font-size: 16px; min-height: 44px; }
/* Nel footer i collegamenti stanno uno per riga separati da : a 16px di
altezza sono tre bersagli attaccati. Su telefono diventano righe piene. */
.fuso-footer__righe br { display: none; }
.fuso-footer__righe a { display: block; padding: var(--sp-3) 0; }
}
/* ══════════════════════════════════════════════════════════════════════
AGGIUNTE DEL TEAM SVILUPPO — 2026-08-04, ricollegamento ai dati veri.
Le pagine consegnate erano statiche: questi sono i pochi componenti che
servono al portale funzionante e che nella veste non c'erano. Stanno qui
e non nelle pagine, come chiede il punto 5 di HANDOFF.md.
Nessun colore nuovo: solo variabili gia' dichiarate sopra.
══════════════════════════════════════════════════════════════════════ */
/* Testo per i soli lettori di schermo: serve alle intestazioni di colonna
che a video restano vuote (la colonna del comando «rimuovi riga»). Una
vuota lascia la tabella senza nome per quella colonna. */
.fuso-solo-lettori {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Fumetto dei grafici: nero su bianco, nessuna tinta — la marca nei grafici
la portano le barre, non l'etichetta che le commenta. */
.fuso-tip {
position: fixed; z-index: 9; pointer-events: none;
display: none;
background: var(--fuso-black); color: var(--fuso-white);
font-size: 13px; line-height: 18px;
padding: 6px 10px;
}
.fuso-barra:hover rect.dato { opacity: .75; }
/* Barra di quota dentro una cella di tabella (composizione per modello):
una sola serie, quindi Midnight. La larghezza la scrive il portale. */
.fuso-quota { height: 14px; background: var(--fuso-midnight-blue); }
/* Riga di tabella selezionata: si distingue per intensita', non per tinta
(trappola 6.3). Il filetto Midnight e' lo stesso dell'anello di fuoco. */
.fuso-table tbody tr.fuso-sel { outline: 2px solid var(--fuso-midnight-blue); outline-offset: -2px; }
.fuso-table tbody tr.fuso-cliccabile { cursor: pointer; }
/* Comando compatto: il «rimuovi riga» dentro la tabella dei ricambi. Stesse
regole del bottone, misure ridotte — e sotto i 640px torna a 44px come
tutti gli altri, per la regola del dito. */
.fuso .fuso-btn--mini { padding: 6px 10px; letter-spacing: 0; }
/* Nella tabella dei ricambi i campi stanno dentro le celle: senza margine
proprio, altrimenti la riga cresce e la tabella perde il passo. */
.fuso-table .fuso-input,
.fuso-table .fuso-select { margin: 0; }
/* ══════════════════════════════════════════════════════════════════════
PONTE FALCON — 2026-08-04, dopo la specifica Claim Submission.
Componenti dell'esito dei controlli e dell'anteprima di cio' che si
trasmette. Nessun colore nuovo: il brand book (p2) non ne ammette, e i
colori terziari sono riservati agli ambienti live, mai agli stati di una
interfaccia. I tre livelli di esito si distinguono per FILETTO e
ETICHETTA IN CHIARO, non per tinta: chi non distingue i colori e chi
stampa in bianco e nero deve leggere la stessa cosa.
══════════════════════════════════════════════════════════════════════ */
.fuso-controlli { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.fuso-controllo {
padding: var(--sp-2) var(--sp-3);
border-left: 3px solid var(--fuso-concrete-grey);
background: var(--fuso-grey-sect);
margin-bottom: var(--sp-2);
font-size: 14px; line-height: 20px;
}
/* Bloccante: FALCON rifiuterebbe. Filetto nero, il massimo contrasto che
il CI mette a disposizione. */
.fuso-controllo--bloccante { border-left-color: var(--fuso-black); }
/* Da verificare: probabile problema, oppure regola ambigua nel documento. */
.fuso-controllo--verifica { border-left-color: var(--fuso-midnight-blue); }
/* Non verificabile: ci manca un'anagrafica di FALCON. Filetto tratteggiato
perche' e' un buco, non un giudizio — e un buco non va confuso con un via
libera. */
.fuso-controllo--ignoto {
border-left-style: dashed; background: var(--fuso-white);
color: var(--fuso-ink-soft);
}
.fuso-controllo__campo {
font-family: var(--fuso-font-bold); font-weight: 400;
display: inline-block; margin-right: var(--sp-2);
}
.fuso-controllo__liv {
font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
border: 1px solid currentColor; padding: 1px 5px; margin-right: var(--sp-2);
white-space: nowrap;
}
/* La regola di FALCON che il controllo riproduce, in lingua originale: serve
a chi apre un ticket a Tavant citando il messaggio esatto. */
.fuso-controllo__regola {
display: block; font-size: 12px; color: var(--fuso-ink-soft);
margin-top: 2px; font-style: italic;
}
/* Il JSON che parte: monospazio, perche' qui contano le colonne e i
delimitatori, non l'eleganza. Scorre nel proprio riquadro. */
.fuso-payload {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px; line-height: 18px;
background: var(--fuso-grey-block); color: var(--fuso-ink);
padding: var(--sp-3); margin: 0 0 var(--sp-3);
max-height: 420px; overflow: auto; white-space: pre;
}
/* Riepilogo dei tre conteggi: numero grande, etichetta sotto. */
.fuso-conte { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.fuso-conte div { min-width: 92px; }
.fuso-conte b {
font-family: var(--fuso-font-bold); font-weight: 400;
font-size: 32px; line-height: 1; display: block;
}
.fuso-conte span { font-size: 12px; text-transform: uppercase; color: var(--fuso-ink-soft); }
/* Stato di un prerequisito nella tabella di prontezza: pastiglia neutra,
il senso lo porta la parola. */
.fuso-stato-prereq {
font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
border: 1px solid var(--fuso-concrete-grey); padding: 2px 6px;
white-space: nowrap;
}
.fuso-stato-prereq--presente {
background: var(--fuso-midnight-blue); border-color: var(--fuso-midnight-blue);
color: var(--fuso-white);
}
/* Gruppo di campi che compare solo per certi tipi di richiesta: il titoletto
dice a quale tipo appartiene, altrimenti chi compila non capisce perche'
il modulo gli e' cambiato sotto le mani. */
.fuso-gruppo {
border: 1px solid var(--fuso-line); padding: var(--sp-4);
margin-bottom: var(--sp-4);
}
.fuso-gruppo > h4 {
font-family: var(--fuso-font-bold); font-weight: 400;
text-transform: uppercase; font-size: 13px; letter-spacing: .02em;
margin: 0 0 var(--sp-3);
}
/* Contenitore che scorre per le tabelle larghe.
`display:block; overflow-x:auto` sulla
stessa (vedi la regola a
640px) tiene sulle tabelle di sola lettura, ma NON su quella dei ricambi:
con le larghezze di colonna dichiarate e i campi dentro le celle la pagina
scorreva di 38px a 390px di larghezza. Un contenitore esplicito non dipende
da come il motore tratta una tabella resa blocco, e la tabella dentro resta
una tabella — quindi le colonne restano allineate mentre si scorre. */
.fuso-scorre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* `contain: paint` non è decorazione: senza di lui il contenitore scorreva
correttamente al suo interno (306px visibili su 640) ma la PAGINA cresceva
comunque, e a 390px si spostava di 247px in orizzontale. Provati e scartati
min-width:0, width:100%, overflow:hidden sulla card e display:grid: nessuno
lo ferma. Questo dichiara al motore che i discendenti non contribuiscono
allo scorrimento di chi sta sopra — che è esattamente ciò che serve. */
contain: paint;
}
.fuso-scorre > .fuso-table { display: table; }
@media (max-width: 640px) {
.fuso-conte { gap: var(--sp-4); }
.fuso-conte b { font-size: 26px; }
.fuso-payload { font-size: 11px; }
/* dentro il contenitore comanda il contenitore: la tabella non deve
scorrere due volte, ma non deve nemmeno stringersi sotto il leggibile */
.fuso-scorre > .fuso-table { display: table; min-width: 640px; }
}
/* ══════════════════════════════════════════════════════════════════════
UTENZE — 2026-09-07, richiesta e gestione delle utenze nei sistemi FUSO.
Un solo componente nuovo; il resto della pagina usa quelli sopra.
══════════════════════════════════════════════════════════════════════ */
/* Elenco di caselle con la spiegazione accanto: la scelta dei sistemi da
chiedere. Una casella nuda («OSPREY», «DTD») non dice a chi compila che
cosa sta chiedendo; la riga di aiuto sotto il nome si'. La casella resta
quella del browser, per la stessa ragione del triangolino dei blocchi
richiudibili. La scelta fatta si distingue per filetto, come la riga di
tabella selezionata: niente tinte nuove. */
.fuso-scelte {
display: grid; gap: var(--sp-2);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fuso-scelta {
display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2);
align-items: start; padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--fuso-line); background: var(--fuso-white);
cursor: pointer; font-size: 14px; line-height: 20px;
}
.fuso-scelta input { margin: 3px 0 0; }
.fuso-scelta b { font-family: var(--fuso-font-bold); font-weight: 400; display: block; }
.fuso-scelta span { color: var(--fuso-ink-soft); font-size: 13px; }
.fuso-scelta:has(input:checked) { outline: 2px solid var(--fuso-midnight-blue); outline-offset: -2px; }
/* ══════════════════════════════════════════════════════════════════════
lavorazione FALCON-like — 2026-09-29, coda interna (backoffice.html).
Dettaglio a tutta larghezza con le nove sezioni di FALCON, elenco con
la spunta per il file in blocco, riga a 41 colonne, checklist documenti.
Nessun colore nuovo: solo variabili gia' dichiarate sopra. I nomi hanno
il prefisso «fuso-lav-» per non pestare i componenti delle altre pagine.
══════════════════════════════════════════════════════════════════════ */
/* `hidden` deve vincere anche sui componenti che dichiarano un display
(bottone inline-block, barre flex, righe a griglia): senza questa regola
un bottone nascosto resterebbe a video. Scoped al corpo della pagina. */
.fuso-lav-corpo [hidden] { display: none !important; }
.fuso-lav-corpo { padding-top: var(--sp-12); }
.fuso-lav-blocco { margin-bottom: var(--sp-12); }
.fuso-lav-sottotitolo {
font-family: var(--fuso-font-bold); font-weight: 400;
text-transform: uppercase; font-size: 13px; letter-spacing: .02em;
margin: var(--sp-4) 0 var(--sp-2);
}
/* la nota in linea accanto a un comando: non va a capo da sola come .fuso-nota */
.fuso-lav-nota-inline { display: inline; margin: 0; }
/* Barra dei comandi del dettaglio: i bottoni stanno in fila e vanno a capo
sugli schermi stretti; il gruppo degli esiti da FALCON sta a destra. */
.fuso-lav-azioni {
display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
margin: var(--sp-4) 0;
}
.fuso-lav-gruppo-stati {
display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
margin-left: auto; padding-left: var(--sp-4);
border-left: 1px solid var(--fuso-line);
}
.fuso-lav-gruppo-stati .fuso-label { display: inline; margin: 0 var(--sp-1) 0 0; }
.fuso-lav-file { width: auto; max-width: 100%; }
/* Barra della selezione per il file in blocco, sopra l'elenco. */
.fuso-lav-selezione {
display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
padding: var(--sp-3); margin-bottom: var(--sp-4);
background: var(--fuso-grey-sect); font-size: 14px;
}
.fuso-table .fuso-lav-sel-col { width: 36px; text-align: center; }
/* Le nove sezioni di FALCON: numero, etichetta italiana, nome FALCON. */
.fuso-sezione {
border: 1px solid var(--fuso-line); padding: var(--sp-4);
margin-bottom: var(--sp-6);
}
.fuso-sezione > h3 {
display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline;
margin-bottom: var(--sp-3);
}
.fuso-sezione__n {
font-family: var(--fuso-font-bold); font-size: 16px;
color: var(--fuso-white); background: var(--fuso-midnight-blue);
min-width: 26px; height: 26px; line-height: 26px; text-align: center;
padding: 0 var(--sp-1); align-self: center;
}
.fuso-sezione__falcon {
font-family: var(--fuso-font); font-size: 13px; letter-spacing: .04em;
text-transform: uppercase; color: var(--fuso-ink-soft);
}
/* Il nome del campo in FALCON, in piccolo accanto all'etichetta italiana:
chi digita in FALCON deve ritrovare la stessa parola. */
.fuso-lav-falcon {
font-family: var(--fuso-font); text-transform: none; letter-spacing: 0;
font-size: 11px; color: var(--fuso-ink-soft); margin-left: var(--sp-1);
}
.fuso-lav-motivo { margin-bottom: var(--sp-6); }
.fuso-lav-totali {
display: grid; gap: var(--sp-3);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
margin-top: var(--sp-3);
}
/* Risultati della ricerca del position code, sotto il campo. */
.fuso-lav-risultati {
list-style: none; margin: var(--sp-1) 0 0; padding: 0;
border: 1px solid var(--fuso-line); background: var(--fuso-white);
max-height: 220px; overflow: auto; font-size: 14px;
}
.fuso-lav-risultati li { padding: var(--sp-1) var(--sp-2); cursor: pointer; }
.fuso-lav-risultati li:hover { background: var(--fuso-grey-sect); }
.fuso-lav-risultati b { font-family: var(--fuso-font-bold); font-weight: 400; margin-right: var(--sp-2); }
/* Checklist documenti: una riga per voce, quattro colonne. */
.fuso-lav-check {
display: grid; grid-template-columns: 220px 110px 230px 1fr; gap: var(--sp-2);
align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--fuso-line);
font-size: 14px;
}
.fuso-lav-check b { font-family: var(--fuso-font-bold); font-weight: 400; }
.fuso-lav-check .fuso-input, .fuso-lav-check .fuso-select { margin: 0; }
.fuso-lav-check--testa { border-bottom-color: var(--fuso-black); }
.fuso-lav-check--testa .fuso-label { margin: 0; }
/* La riga a 41 colonne del file in blocco: lettera, nome del campo, valore. */
.fuso-lav-riga41 td:first-child { font-family: var(--fuso-font-bold); white-space: nowrap; width: 56px; }
.fuso-lav-riga41 td:nth-child(2) { white-space: nowrap; width: 260px; }
.fuso-lav-riga41 td:last-child {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
overflow-wrap: anywhere;
}
.fuso-lav-vuoto-cella { color: var(--fuso-ink-soft); font-style: italic; }
.fuso-lav-dettagli { margin-bottom: var(--sp-6); }
.fuso-lav-storia td:first-child { white-space: nowrap; }
@media (max-width: 900px) {
.fuso-lav-check { grid-template-columns: 1fr 1fr; }
.fuso-lav-check--testa { display: none; }
.fuso-lav-gruppo-stati { margin-left: 0; padding-left: 0; border-left: 0; }
.fuso-lav-riga41 td:nth-child(2) { white-space: normal; width: auto; }
}
/* ══════════════════════════════════════════════════════════════════════
CLAIM FALCON-LIKE — 2026-09-29, maschera a due passi (garanzie.html).
La richiesta di garanzia replica le due pagine di FALCON: nove sezioni,
quattro tabelle di righe, la checklist dei documenti. Componenti nuovi
solo dove quelli sopra non bastano; nessun colore nuovo (brand book p2).
══════════════════════════════════════════════════════════════════════ */
/* Il contenitore della pagina e le spaziature che prima stavano in linea
nel markup: qui, come chiede il punto 5 di HANDOFF.md. */
.fuso-claim-pagina { padding-top: var(--sp-12); }
.fuso-claim-sezione { margin-bottom: var(--sp-12); }
.fuso-claim-spazio { margin-bottom: var(--sp-4); }
.fuso-claim-spazio-s { margin-bottom: var(--sp-2); }
.fuso-claim-dopo-tasto { margin-left: var(--sp-2); }
/* Testa di sezione: il titolo italiano e, sotto, il nome che la sezione ha
in FALCON — chi ha davanti anche FALCON deve ritrovarsi a colpo d'occhio. */
.fuso-claim-testa { margin-bottom: var(--sp-4); }
.fuso-claim-testa > h2 { margin-bottom: var(--sp-1); }
.fuso-claim-testa .fuso-aiuto { text-transform: uppercase; letter-spacing: .04em; margin-top: 0; }
.fuso-claim-sezione h3 { margin: var(--sp-6) 0 var(--sp-3); }
.fuso-claim-sezione h3 .fuso-aiuto {
display: inline; margin-left: var(--sp-2);
text-transform: uppercase; letter-spacing: .04em; font-size: 12px;
}
/* Il nome FALCON dentro le intestazioni di colonna: non maiuscolo come
l'intestazione, altrimenti diventa un secondo titolo. */
.fuso-table th .fuso-aiuto { text-transform: none; letter-spacing: 0; font-size: 11px; line-height: 14px; }
/* La fila dei comandi: a capo se non ci stanno, mai uno sopra l'altro
a metà riga. */
.fuso-claim-azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
/* Elenco dei suggerimenti sotto il campo del position code: si apre mentre
si scrive, la riga scelta riempie il campo. Filetto e fondo del CI. */
.fuso-suggerimenti {
list-style: none; margin: var(--sp-1) 0 0; padding: 0;
border: 1px solid var(--fuso-line); background: var(--fuso-white);
max-height: 240px; overflow: auto;
}
.fuso-suggerimenti li {
padding: var(--sp-2); font-size: 14px; line-height: 20px;
border-bottom: 1px solid var(--fuso-line);
}
.fuso-suggerimenti li:last-child { border-bottom: 0; }
.fuso-suggerimenti li[data-codice] { cursor: pointer; }
.fuso-suggerimenti li[data-codice]:hover,
.fuso-suggerimenti li[data-codice]:focus { background: var(--fuso-grey-sect); }
.fuso-suggerimenti b { font-family: var(--fuso-font-bold); font-weight: 400; margin-right: var(--sp-2); }
/* Larghezze delle colonne nelle tabelle delle righe: prima erano stili in
linea sui
. */
.fuso-table th.fuso-claim-col-xs { width: 56px; }
.fuso-table th.fuso-claim-col-s { width: 100px; }
.fuso-table th.fuso-claim-col-m { width: 160px; }
/* Caselle dentro le celle (back order, child parts, pezzo causa): centrate
e grandi abbastanza per un dito. */
.fuso-table td.fuso-claim-centro { text-align: center; }
.fuso-table .fuso-claim-casella { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
/* Contatore dei quattro testi (4.000 caratteri ciascuno in FALCON). */
.fuso-claim-contatore { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.fuso-claim-pagina { padding-top: var(--sp-8); }
.fuso-claim-sezione { margin-bottom: var(--sp-8); }
.fuso-suggerimenti li[data-codice] { min-height: 44px; }
}
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-08), maschera dell'officina.
Il riquadro «Errori» in cima alla pagina, come ERRORS sopra la pagina 2
di FALCON: un elenco solo, tutti gli errori insieme (pagina 1,
salvataggio, Verifica, rifiuti del server). Il rosso FUSO resta un
filetto, come sulla nav, piu' il titolo; il testo resta nero e l'elenco
si legge anche in bianco e nero. «Attenzione» e' il riquadro degli
avvisi che non fermano (i Warnings): filetto Midnight, come «da
verificare». Nessun colore nuovo.
══════════════════════════════════════════════════════════════════════ */
.fuso-errori, .fuso-attenzione {
padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
background: var(--fuso-grey-sect); border-left: 3px solid var(--fuso-black);
font-size: 14px; line-height: 20px;
}
.fuso-errori { border-left-color: var(--fuso-red); border-top: 2px solid var(--fuso-red); }
.fuso-attenzione { border-left-color: var(--fuso-midnight-blue); }
.fuso .fuso-errori h2, .fuso .fuso-attenzione h2 {
font-size: 18px; line-height: 22px; margin: 0 0 var(--sp-2);
}
.fuso .fuso-errori h2 { color: var(--fuso-red); }
.fuso-errori ul, .fuso-attenzione ul { margin: 0; padding-left: 20px; }
.fuso-errori li, .fuso-attenzione li { margin-bottom: var(--sp-1); }
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-04, SP-03, SP-37), maschera dell'officina.
I cinque pulsanti di fondo della pagina 2 nei colori di FALCON: «Elimina»
rosso e «Conferma» (Validate) verde. Il rosso è quello del CI; il verde
del CI non esiste e non si inventa (brand book p2): «Conferma» usa
l'aqua FUSO, il colore del brand più vicino al verde di FALCON, con il
testo nero perché il bianco sull'aqua non si legge. Il dialogo di
conferma dell'eliminazione è l'unico della maschera, come in FALCON.
══════════════════════════════════════════════════════════════════════ */
.fuso .fuso-btn--red { background: var(--fuso-red); border-color: var(--fuso-red); color: var(--fuso-white); }
.fuso .fuso-btn--green { background: var(--fuso-aqua-blue); border-color: var(--fuso-aqua-blue); color: var(--fuso-black); }
.fuso .fuso-btn:disabled { opacity: .55; cursor: default; }
/* L'attributo `hidden` perde contro il `display` di un pulsante (inline-block,
inline-flex sotto i 640px) e della fila dei comandi (flex): «Elimina» fuori
dalla bozza e «Chiudi» prima dell'invio restavano a video (collaudo dal vivo
del 01/10). Qui si rimette in regola. */
.fuso .fuso-btn[hidden], .fuso-claim-azioni[hidden] { display: none; }
.fuso-dialogo {
border: 1px solid var(--fuso-line); border-top: 3px solid var(--fuso-red);
padding: var(--sp-6); max-width: 440px; color: var(--fuso-ink);
}
.fuso-dialogo::backdrop { background: var(--fuso-black); opacity: .45; }
.fuso .fuso-dialogo h2 { font-size: 18px; line-height: 22px; margin: 0 0 var(--sp-2); }
.fuso-dialogo p { margin: 0 0 var(--sp-4); }
.fuso-dialogo .fuso-claim-azioni { margin-bottom: 0; }
/* Sottotitolo di una tabella di righe con il suo «+ Aggiungi riga» a destra,
come la testata di ogni blocco della pagina 2 di FALCON (SP-37). */
.fuso-claim-sottotitolo {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-3);
}
.fuso-claim-sottotitolo h3 { margin: 0; }
/* Il riepilogo della richiesta (il CLAIM SUMMARY di FALCON, SP-03): le celle
che FALCON valorizza da sé restano «—», in grigio, con la nota in fondo;
la riga del totale è in grassetto come TOTAL SUBMITTED AMOUNT. */
.fuso-table td.fuso-claim-falcon { color: var(--fuso-ink-soft); }
.fuso-table tr.fuso-claim-totale td { font-family: var(--fuso-font-bold); border-top: 2px solid var(--fuso-black); }
.fuso-claim-riepilogo-testata { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
@media (max-width: 640px) { .fuso-claim-riepilogo-testata { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-10, SP-11), maschera dell'officina.
Documenti: una riga per file con il suo esito — un file non caricato lo
dice col filetto rosso FUSO, in grassetto e a parole («non caricato: …»),
cosi' si legge anche in bianco e nero. Checklist: la voce da correggere
alla Conferma ha il filetto rosso, come i campi evidenziati di FALCON
(«Resolve the highlighted checklist items»). Il rosso resta un filetto,
come sulla nav; nessun colore nuovo.
══════════════════════════════════════════════════════════════════════ */
.fuso-table td.fuso-claim-doc-ko { font-family: var(--fuso-font-bold); border-left: 3px solid var(--fuso-red); }
.fuso-table tbody tr.fuso-claim-da-correggere { outline: 2px solid var(--fuso-red); outline-offset: -2px; }
/* «Riprova» dentro l'esito di un documento non arrivato al portale: il comando compatto, staccato dal testo. */
.fuso-table td.doc-esito .fuso-btn--mini { margin-left: var(--sp-2); }
/* La tabella dei Documenti sotto i 640px (revisione del 01/10). Dentro il contenitore che scorre
(min-width 640px) a 360px si vedevano solo nome e dimensione: tendina del tipo, esito e X
restavano oltre il bordo, e l'officina non sapeva che un file aspettava una sua scelta o era
stato rifiutato. Qui la riga si impila: il nome con la X accanto, sotto il tipo, sotto l'esito.
Le intestazioni spariscono (la tendina e la X hanno la loro etichetta per i lettori di
schermo); nessun colore nuovo. */
@media (max-width: 640px) {
.fuso-scorre > .fuso-table.fuso-claim-doc-pila { display: block; min-width: 0; }
.fuso-table.fuso-claim-doc-pila thead { display: none; }
.fuso-table.fuso-claim-doc-pila tbody { display: block; }
.fuso-table.fuso-claim-doc-pila tbody tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2);
border-bottom: 1px solid var(--fuso-line);
}
.fuso-table.fuso-claim-doc-pila td { display: block; min-width: 0; border-bottom: 0; overflow-wrap: anywhere; }
.fuso-table.fuso-claim-doc-pila td:nth-child(1) { grid-column: 1; grid-row: 1; }
.fuso-table.fuso-claim-doc-pila td:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; padding-top: 0; }
.fuso-table.fuso-claim-doc-pila td:nth-child(3) { grid-column: 1 / span 2; grid-row: 3; padding-top: 0; }
.fuso-table.fuso-claim-doc-pila td:nth-child(4) { grid-column: 2; grid-row: 1; }
}
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-13, SP-14), maschera dell'officina.
Gli alberi di FALCON: «Seleziona la zona guasto» (sistema → posizione,
radio) e «Seleziona le operazioni» (sistema → posizione → sottogruppo →
operazione, caselle). La finestra è larga come in FALCON (80 %, qui
fino a 720px) con un riquadro che scorre da 380px; i rami si aprono e
chiudono coi nativi. Le voci sono alte 44px sotto i 640px
(un dito). Il collegamento «Zona guasto» / «Scrivi il codice» è un
pulsante vestito da link: il colore dei link del tema, niente di nuovo.
══════════════════════════════════════════════════════════════════════ */
.fuso .fuso-claim-link {
font: inherit; text-transform: inherit; letter-spacing: inherit;
background: none; border: 0; padding: 0; margin: 0;
color: var(--fuso-midnight-blue); text-decoration: underline; text-underline-offset: 2px;
cursor: pointer; text-align: left;
}
.fuso .fuso-claim-link:hover, .fuso .fuso-claim-link:focus { color: var(--fuso-link-hover); }
.fuso-campo > .fuso-claim-link { margin-top: var(--sp-1); font-size: 13px; }
.fuso-claim-testa .fuso-claim-link { font-size: 13px; }
/* le ore che arrivano dal tempario non si toccano (in FALCON sono testo): come un campo spento */
.fuso-claim-pagina .fuso-input[readonly] { background: var(--fuso-grey-sect); color: var(--fuso-ink-soft); }
.fuso-dialogo.fuso-dialogo--albero { width: min(720px, calc(100vw - 32px)); max-width: none; }
.fuso-albero {
max-height: 380px; overflow: auto; margin: var(--sp-3) 0;
border: 1px solid var(--fuso-line); background: var(--fuso-white);
}
/* i blocchi richiudibili della pagina hanno 48px sotto e il titolo in maiuscolo grassetto: nell'albero no,
le voci sono righe di un elenco, testo semplice come in FALCON */
.fuso-albero details { margin: 0; border-bottom: 1px solid var(--fuso-line); }
.fuso-albero details:last-child { border-bottom: 0; }
.fuso-albero details details { border-bottom: 0; }
.fuso-albero summary {
cursor: pointer; padding: var(--sp-2); font-size: 14px; line-height: 20px;
font-family: var(--fuso-font); text-transform: none;
overflow-wrap: anywhere;
}
.fuso-albero summary:hover, .fuso-albero summary:focus { background: var(--fuso-grey-sect); }
.fuso-albero__ramo { padding-left: var(--sp-4); }
.fuso-albero__foglia {
display: flex; gap: var(--sp-2); align-items: flex-start;
padding: var(--sp-1) var(--sp-2); font-size: 14px; line-height: 20px; cursor: pointer;
overflow-wrap: anywhere;
}
.fuso-albero__foglia input { margin: 3px 0 0; flex: none; }
.fuso-albero__foglia:hover { background: var(--fuso-grey-sect); }
.fuso-albero .fuso-vuoto { margin: 0; padding: var(--sp-2); font-size: 13px; }
@media (max-width: 640px) {
.fuso-dialogo.fuso-dialogo--albero { padding: var(--sp-4); }
.fuso-albero summary, .fuso-albero__foglia { min-height: 44px; }
.fuso-albero__ramo { padding-left: var(--sp-2); }
}
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-16, SP-17, SP-18), maschera dell'officina.
Il mezzo è un campo solo con il collegamento di scambio SOTTO
l'etichetta, come «Click here to enter VIN» di FALCON: un link del tema
su una riga sua, staccato dal campo. Nessun colore nuovo.
══════════════════════════════════════════════════════════════════════ */
.fuso-campo > .fuso-claim-link.fuso-claim-scambio { display: block; margin: 0 0 var(--sp-2); }
@media (max-width: 640px) {
/* un dito: il collegamento alto 44px anche se il testo è piccolo */
.fuso-campo > .fuso-claim-link.fuso-claim-scambio { min-height: 44px; }
}
/* ══════════════════════════════════════════════════════════════════════
SPECCHIO FALCON — 2026-10-01 (SP-15, SP-26), maschera dell'officina.
La richiesta inviata si legge soltanto, nella stessa maschera: le due
pagine stanno in un