/* Noleggiando.com — components.css · la libreria dei componenti .nlg-*
La fonte è il Brand Book: ogni classe rende un componente che il capitolo 04 (e, per gli strutturali,
il § 5.1 e il § 5.9) mostra, con gli stati che lì si vedono. Nessuna variante che il libro non mostra.
Tre regole del foglio:
1 · Solo token semantici e di componente (tokens/). Mai un primitivo, mai un valore letterale: una misura
nuova di componente si dichiara in tokens/spacing.css o tokens/colors.css, livello 3.
2 · Nessun box-sizing globale. Chi ne ha bisogno lo dichiara su di sé (campo, bottone). Un reset qui
ri-misurerebbe i contenitori di sezione, dove max-width è la colonna di contenuto e non la scatola
col padding dentro (MONTAGGIO-PAGINE.md § 8).
3 · Nessun selettore di elemento nudo: il foglio si carica anche nel libro, e non deve toccare niente
che non porti una classe .nlg-.
LA DIFESA DELL'INCHIOSTRO — perché i selettori dei componenti cliccabili sono scritti due volte.
Un bottone che è un si fa portare via il colore dalla regola dei collegamenti della pagina: su un
fondo blu diventa blu su blu, illeggibile, senza un errore in console. Ridichiararlo su
a.nlg-btn:link/:visited, specificità (0,2,1), non basta: una regola scoped della pagina — .testata a:hover,
.piede a — ha la stessa specificità e, caricata dopo, vince; e :link/:visited non coprono passaggio,
focus e pressione, quindi al passaggio il colore tornava indietro. È il difetto 9.3.1 del prototipo.
La forma usata qui è a.nlg-btn.nlg-btn:is(:link,:visited,:hover,:focus,:active) : la classe ripetuta
porta la specificità a (0,3,1) in ogni stato, e :is() li prende tutti. La doppiezza non è un vezzo:
toglierla riapre il difetto. Vale per ogni componente cliccabile che può essere un . */
/* ═══ 4.1.1 · Bottoni — altezza 44, quattro gerarchie, sei stati ═══════════════════════════════════ */
.nlg-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--nlg-s-2);
height:var(--nlg-tap-min);padding:0 var(--nlg-btn-pad);border:0;border-radius:var(--nlg-r-md);
background:var(--nlg-action);color:var(--nlg-text-onaction);font-family:var(--nlg-font-ui);font-weight:700;
font-size:var(--nlg-fs-button);line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background var(--nlg-t-fast) var(--nlg-ease),border-color var(--nlg-t-fast) var(--nlg-ease),filter var(--nlg-t-fast) var(--nlg-ease)}
.nlg-btn:hover{background:var(--nlg-action-hover)} /* luce chiara scurisce, scura schiarisce: lo dice il token */
.nlg-btn:active{background:var(--nlg-action-press);transform:translateY(var(--nlg-linea))}
.nlg-btn:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)} /* anello di 3 px staccato di 3 px */
.nlg-btn:disabled,.nlg-btn[aria-disabled="true"]{background:var(--nlg-surface-2);color:var(--nlg-disabled);cursor:not-allowed;transform:none;filter:none}
/* accento — solo per il contatto diretto, sempre con inchiostro scuro */
.nlg-btn--accento{background:var(--nlg-btn-accento);color:var(--nlg-btn-accento-ink)}
.nlg-btn--accento:hover{background:var(--nlg-btn-accento);filter:brightness(.95)}
.nlg-btn--accento:active{background:var(--nlg-btn-accento)}
/* secondario — a bordo */
.nlg-btn--secondario{border:var(--nlg-bordo-comando) solid var(--nlg-border-strong);background:var(--nlg-surface-1);color:var(--nlg-text-1)}
.nlg-btn--secondario:hover,.nlg-btn--secondario:active{background:var(--nlg-surface-1);border-color:var(--nlg-action)}
/* terziario — testuale */
.nlg-btn--terziario{padding:0 var(--nlg-s-3);background:transparent;color:var(--nlg-blue-ink)}
.nlg-btn--terziario:hover,.nlg-btn--terziario:active{background:transparent;text-decoration:underline}
/* il bottone che tiene una scelta — l'unico con lo stato «selezionato» (aria-pressed) */
.nlg-btn--scelta{padding:0 var(--nlg-btn-pad-scelta);border:var(--nlg-bordo-comando) solid var(--nlg-border-strong);background:var(--nlg-surface-1);color:var(--nlg-text-1)}
.nlg-btn--scelta:hover,.nlg-btn--scelta:active{background:var(--nlg-surface-1);border-color:var(--nlg-action)}
.nlg-btn--scelta[aria-pressed="true"]{border-color:var(--nlg-action);background:var(--nlg-info-bg);color:var(--nlg-blue-ink)}
/* sul campo di marca (§ 5.4.1, § 5.6.2): il primario si inverte, il secondario passa al bordo chiaro */
.nlg-btn--su-marca{background:var(--nlg-surface-1);color:var(--nlg-blue-ink)}
.nlg-btn--su-marca:hover,.nlg-btn--su-marca:active{background:var(--nlg-info-bg)}
.nlg-btn--su-marca-secondario{border:var(--nlg-bordo-comando) solid var(--nlg-text-onaction);background:transparent;color:var(--nlg-text-onaction)}
.nlg-btn--su-marca-secondario:hover,.nlg-btn--su-marca-secondario:active{background:transparent;border-color:var(--nlg-text-onaction);text-decoration:underline}
/* la difesa dell'inchiostro, una riga per gerarchia */
a.nlg-btn.nlg-btn:is(:link,:visited,:hover,:focus,:active){text-decoration:none;color:var(--nlg-text-onaction)}
a.nlg-btn.nlg-btn--accento.nlg-btn--accento:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-btn-accento-ink)}
a.nlg-btn.nlg-btn--secondario.nlg-btn--secondario:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-text-1)}
a.nlg-btn.nlg-btn--terziario.nlg-btn--terziario:is(:link,:visited,:focus,:active){color:var(--nlg-blue-ink)}
a.nlg-btn.nlg-btn--terziario.nlg-btn--terziario:hover{color:var(--nlg-blue-ink);text-decoration:underline}
a.nlg-btn.nlg-btn--su-marca.nlg-btn--su-marca:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-blue-ink)}
a.nlg-btn.nlg-btn--su-marca-secondario.nlg-btn--su-marca-secondario:is(:link,:visited,:focus,:active){color:var(--nlg-text-onaction)}
a.nlg-btn.nlg-btn--su-marca-secondario.nlg-btn--su-marca-secondario:hover{color:var(--nlg-text-onaction);text-decoration:underline}
/* ═══ 4.1.2 · Campi — il campo singolo ═══════════════════════════════════════════════════════════════ */
.nlg-campo{box-sizing:border-box;width:100%;height:var(--nlg-tap-min);padding:0 var(--nlg-s-4);
border:var(--nlg-bordo-comando) solid var(--nlg-border-strong);border-radius:var(--nlg-r-md);
background:var(--nlg-surface-1);color:var(--nlg-text-1);font-family:var(--nlg-font-text);font-size:var(--nlg-campo-fs);
outline:none;transition:border-color var(--nlg-t-fast) var(--nlg-ease)}
textarea.nlg-campo{height:auto;min-height:calc(var(--nlg-tap-min) * 2);padding:var(--nlg-s-3) var(--nlg-s-4);line-height:var(--nlg-lh-body-sm)}
.nlg-campo:focus{border-color:var(--nlg-action);box-shadow:var(--nlg-focus-halo)} /* a fuoco: bordo blu e alone tenue */
.nlg-campo[aria-invalid="true"]{border-color:var(--nlg-error)} /* in errore: il rosso degli errori */
.nlg-campo:disabled{background:var(--nlg-surface-2);border-color:var(--nlg-border);color:var(--nlg-disabled);cursor:not-allowed}
.nlg-campo[readonly]{background:var(--nlg-surface-2);border-color:var(--nlg-border);color:var(--nlg-text-1)}
.nlg-etichetta{display:block;margin:0 0 var(--nlg-s-2);font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-fs-body-sm);color:var(--nlg-text-1)}
.nlg-aiuto{display:block;margin-top:var(--nlg-s-2);font-family:var(--nlg-font-text);font-size:var(--nlg-tip-fs);color:var(--nlg-text-3)}
.nlg-errore{display:block;margin-top:var(--nlg-s-2);font-family:var(--nlg-font-text);font-size:var(--nlg-tip-fs);color:var(--nlg-error-ink)}
/* ═══ 4.1.3 · Card, badge, chip, tab ═════════════════════════════════════════════════════════════════ */
/* card — raggio 12; la superficie reagisce, il contenuto no */
.nlg-card{position:relative;display:flex;flex-direction:column;gap:var(--nlg-s-2);padding:var(--nlg-s-5);
background:var(--nlg-surface-1);border:var(--nlg-linea) solid var(--nlg-border);border-radius:var(--nlg-r-lg);
box-shadow:var(--nlg-shadow-sm);color:var(--nlg-text-1);text-decoration:none;
transition:transform var(--nlg-t-fast) var(--nlg-ease),box-shadow var(--nlg-t-fast) var(--nlg-ease)}
.nlg-card--interattiva{cursor:pointer}
.nlg-card--interattiva:hover{transform:translateY(calc(var(--nlg-card-alza) * -1));box-shadow:var(--nlg-shadow-md)}
.nlg-card--interattiva:active{transform:none;box-shadow:var(--nlg-shadow-sm)}
.nlg-card--interattiva:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-card[aria-disabled="true"]{background:var(--nlg-surface-2);color:var(--nlg-text-3);box-shadow:none;transform:none;cursor:not-allowed}
.nlg-card[aria-selected="true"],.nlg-card[aria-pressed="true"]{border-color:var(--nlg-action);background:var(--nlg-info-bg)}
a.nlg-card.nlg-card:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-text-1);text-decoration:none}
.nlg-card__categoria,.nlg-card__codice{font-family:var(--nlg-font-mono);font-size:var(--nlg-fs-caption);color:var(--nlg-text-3)}
.nlg-card__titolo{margin:0;font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-fs-h4);line-height:var(--nlg-lh-h4);color:inherit}
.nlg-card__stato{position:absolute;top:var(--nlg-s-4);right:var(--nlg-s-4)}
.nlg-card__piede{display:flex;align-items:center;justify-content:space-between;gap:var(--nlg-s-3);margin-top:auto;padding-top:var(--nlg-s-3);border-top:var(--nlg-linea) solid var(--nlg-border)}
/* badge — i cinque stati dell'attrezzatura; l'unica pillola del sistema; colore, bordo e testo insieme */
.nlg-badge{display:inline-flex;align-items:center;padding:var(--nlg-badge-pad);border:var(--nlg-linea) solid var(--nlg-border-strong);
border-radius:var(--nlg-r-pill);background:var(--nlg-surface-2);color:var(--nlg-text-2);font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-comando-fs);line-height:1.2;white-space:nowrap}
.nlg-badge--disponibile{background:var(--nlg-success-bg);border-color:var(--nlg-success-border);color:var(--nlg-success-ink)}
.nlg-badge--in-rientro{background:var(--nlg-warning-bg);border-color:var(--nlg-warning-border);color:var(--nlg-warning-ink)}
.nlg-badge--non-disponibile{background:var(--nlg-error-bg);border-color:var(--nlg-error-border);color:var(--nlg-error-ink)} /* il rosso degli errori, mai il Rosso Raggera */
.nlg-badge--in-consegna{background:var(--nlg-info-bg);border-color:var(--nlg-info-border);color:var(--nlg-info-ink)}
.nlg-badge--in-manutenzione{} /* la resa di base: neutra */
.nlg-badge--compatto{padding:var(--nlg-s-1) var(--nlg-s-3);font-size:var(--nlg-badge-fs-compatto)} /* dentro la card */
/* chip — il filtro applicato, sempre visibile e sempre rimovibile; raggio 6 */
.nlg-chip{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--nlg-s-2);height:var(--nlg-comando-h);padding:0 var(--nlg-s-3);
border:var(--nlg-linea) solid var(--nlg-border-strong);border-radius:var(--nlg-r-sm);background:var(--nlg-surface-1);color:var(--nlg-text-1);
font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-comando-fs);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer}
.nlg-chip:hover{border-color:var(--nlg-action)}
.nlg-chip:active{border-color:var(--nlg-action);background:var(--nlg-surface-2)}
.nlg-chip:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-chip:disabled,.nlg-chip[aria-disabled="true"]{color:var(--nlg-disabled);border-color:var(--nlg-border);cursor:not-allowed}
.nlg-chip[aria-pressed="true"]{background:var(--nlg-info-bg)}
.nlg-chip__togli{font-family:var(--nlg-font-ui);color:var(--nlg-text-2)}
a.nlg-chip.nlg-chip:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-text-1);text-decoration:none}
/* tab — nessun raggio: la sua forma è la barra sotto la parola */
.nlg-tabs{display:flex;gap:var(--nlg-s-1);align-items:flex-end;overflow-x:auto;overflow-y:hidden;border-bottom:var(--nlg-linea) solid var(--nlg-border);scrollbar-width:thin}
.nlg-tab{display:inline-flex;align-items:center;flex:none;min-height:var(--nlg-tap-min);padding:0 var(--nlg-s-4);margin-bottom:calc(var(--nlg-linea) * -1);
border:0;border-bottom:var(--nlg-segno) solid transparent;border-radius:var(--nlg-r-sm) var(--nlg-r-sm) 0 0;background:transparent;
color:var(--nlg-text-2);font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-tab-fs);line-height:1.2;white-space:nowrap;cursor:pointer}
.nlg-tab:hover{color:var(--nlg-text-1);background:var(--nlg-surface-2)}
.nlg-tab:active{color:var(--nlg-text-1);background:var(--nlg-border)}
.nlg-tab:focus-visible{outline:none;color:var(--nlg-text-1);box-shadow:var(--nlg-focus-ring)}
.nlg-tab:disabled,.nlg-tab[aria-disabled="true"]{color:var(--nlg-disabled);background:transparent;cursor:not-allowed}
.nlg-tab[aria-selected="true"]{color:var(--nlg-text-1);border-bottom-color:var(--nlg-action)}
.nlg-tabpanel{padding-top:var(--nlg-s-5)}
/* ═══ 4.1.4 · Form e moduli — tre rese ════════════════════════════════════════════════════════════ */
.nlg-modulo{display:flex;flex-direction:column;gap:var(--nlg-s-5)} /* resa 1 · a colonna singola */
.nlg-modulo--due{display:grid;grid-template-columns:var(--nlg-g2, repeat(2,minmax(0,1fr)));gap:var(--nlg-s-5) var(--nlg-gutter)} /* resa 2 */
.nlg-modulo--due .nlg-modulo__intera{grid-column:1 / -1}
.nlg-modulo--in-linea{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--nlg-s-3)} /* resa 3 */
.nlg-modulo--in-linea .nlg-modulo__voce{flex:1 1 var(--nlg-voce-min);min-width:0}
.nlg-modulo__azioni{display:flex;flex-wrap:wrap;gap:var(--nlg-s-3);align-items:center}
.nlg-modulo--due .nlg-modulo__azioni{grid-column:1 / -1}
/* ═══ 4.1.7 · Feedback di sistema — quattro voci, sempre con parole ══════════════════════════════════ */
.nlg-avviso{display:flex;flex-direction:column;gap:var(--nlg-s-2);padding:var(--nlg-s-5);border:var(--nlg-linea) solid var(--nlg-info-border);border-radius:var(--nlg-r-lg);background:var(--nlg-info-bg)}
.nlg-avviso__etichetta{font-family:var(--nlg-font-mono);font-size:var(--nlg-etichetta-fs);letter-spacing:var(--nlg-ls-overline);text-transform:uppercase;color:var(--nlg-info-ink)}
.nlg-avviso__titolo{margin:0;font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-fs-body);color:var(--nlg-text-1)}
.nlg-avviso__testo{margin:0;font-family:var(--nlg-font-text);font-size:var(--nlg-fs-body-sm);line-height:var(--nlg-lh-body-sm);color:var(--nlg-text-2)}
.nlg-avviso--conferma{background:var(--nlg-success-bg);border-color:var(--nlg-success-border)}
.nlg-avviso--conferma .nlg-avviso__etichetta{color:var(--nlg-success-ink)}
.nlg-avviso--attenzione{background:var(--nlg-warning-bg);border-color:var(--nlg-warning-border)} /* il giallo qui è fondo, non inchiostro */
.nlg-avviso--attenzione .nlg-avviso__etichetta{color:var(--nlg-warning-ink)}
.nlg-avviso--errore{background:var(--nlg-error-bg);border-color:var(--nlg-error-border)}
.nlg-avviso--errore .nlg-avviso__etichetta{color:var(--nlg-error-ink)}
.nlg-avviso--informazione{} /* la resa di base */
/* ═══ 4.1.8 · Flussi, stati e avanzamenti ═══════════════════════════════════════════════════════════ */
.nlg-sagoma{display:block;border-radius:var(--nlg-r-md);background:var(--nlg-surface-2)} /* in attesa: ferma, della forma del contenuto */
.nlg-passi{display:flex;flex-direction:column;gap:var(--nlg-s-2)}
.nlg-passi__barra{display:flex;gap:calc(var(--nlg-s-1) * .75);height:var(--nlg-s-3)} /* l'indicatore a passi del § 3.2.2 */
.nlg-passi__segmento{flex:1;border-radius:calc(var(--nlg-s-1) / 2);background:var(--nlg-surface-2)}
.nlg-passi__segmento--fatto{background:var(--nlg-action)}
.nlg-passi__nomi{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(var(--nlg-s-1) * .75);font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-tip-fs);color:var(--nlg-text-2)}
.nlg-passi__nomi [aria-current="step"]{color:var(--nlg-text-1)}
/* ═══ 4.2.2 · Dati e tabelle ═════════════════════════════════════════════════════════════════════════ */
.nlg-tabella-cornice{overflow-x:auto;border:var(--nlg-linea) solid var(--nlg-border);border-radius:var(--nlg-r-lg)} /* sul telefono scorre qui, la pagina mai */
.nlg-tabella{width:100%;min-width:var(--nlg-riga-min);border-collapse:collapse;font-family:var(--nlg-font-text);font-size:var(--nlg-fs-body-sm);color:var(--nlg-text-1)}
.nlg-tabella th{padding:var(--nlg-s-3) var(--nlg-s-4);text-align:left;font-family:var(--nlg-font-mono);font-weight:500;font-size:var(--nlg-th-fs);letter-spacing:var(--nlg-ls-overline);text-transform:uppercase;color:var(--nlg-text-3);white-space:nowrap}
.nlg-tabella th[aria-sort="ascending"],.nlg-tabella th[aria-sort="descending"]{color:var(--nlg-text-1)}
.nlg-tabella tbody th{font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-fs-body-sm);letter-spacing:0;text-transform:none;color:var(--nlg-text-1)}
.nlg-tabella td{padding:0 var(--nlg-s-4);text-align:left}
.nlg-tabella tbody tr{height:var(--nlg-tap-min);border-top:var(--nlg-linea) solid var(--nlg-border)} /* densità normale: l'altezza del tocco */
.nlg-tabella--compatta tbody tr{height:var(--nlg-comando-h)} /* compatta: desktop, mai su touch */
.nlg-tabella tbody tr:hover{background:var(--nlg-surface-2)}
.nlg-tabella tbody tr[aria-selected="true"]{background:var(--nlg-info-bg)}
.nlg-tabella .nlg-num{text-align:right;font-family:var(--nlg-font-mono);font-variant-numeric:tabular-nums}
.nlg-tabella .nlg-consigliata{background:var(--nlg-info-bg)}
/* ═══ 4.3.1 · Icona informativa — un comando di 44, sempre con un tooltip dietro ════════════════════ */
.nlg-info{display:inline-flex;align-items:center;justify-content:center;width:var(--nlg-tap-min);height:var(--nlg-tap-min);padding:0;border:0;
border-radius:var(--nlg-r-md);background:transparent;color:var(--nlg-text-3);cursor:pointer}
.nlg-info:hover,.nlg-info[aria-expanded="true"]{color:var(--nlg-text-1)}
.nlg-info:active{color:var(--nlg-text-1);background:var(--nlg-surface-2)}
.nlg-info:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-info:disabled{color:var(--nlg-disabled);cursor:not-allowed}
/* ═══ 4.3.2 · Tooltip e popover — il tooltip descrive, il popover contiene ══════════════════════════ */
.nlg-ancora-tip{position:relative;display:inline-flex}
.nlg-tooltip{position:absolute;left:50%;bottom:calc(100% + var(--nlg-s-2));transform:translateX(-50%);z-index:5;width:max-content;max-width:var(--nlg-pop-w);
padding:var(--nlg-s-2) var(--nlg-s-3);border-radius:var(--nlg-r-md);background:var(--nlg-text-1);color:var(--nlg-canvas);
font-family:var(--nlg-font-text);font-size:var(--nlg-tip-fs);line-height:var(--nlg-lh-caption);box-shadow:var(--nlg-shadow-md);text-wrap:pretty}
.nlg-tooltip[hidden]{display:none}
.nlg-tooltip--sotto{bottom:auto;top:calc(100% + var(--nlg-s-2))}
.nlg-popover{position:absolute;left:0;top:calc(100% + var(--nlg-s-2));z-index:6;display:flex;flex-direction:column;gap:var(--nlg-s-4);width:var(--nlg-pop-w);max-width:80vw;
padding:var(--nlg-s-4);background:var(--nlg-surface-1);border:var(--nlg-linea) solid var(--nlg-border-strong);border-radius:var(--nlg-r-lg);box-shadow:var(--nlg-shadow-md);outline:none}
.nlg-popover[hidden]{display:none}
/* ═══ 4.3.3 · Modali — la modale dei punti di interesse del libro ═══════════════════════════════════ */
.nlg-modale{box-sizing:border-box;width:min(calc(var(--nlg-pop-w) * 2),100%);max-height:100%;min-height:var(--nlg-modale-h,auto);padding:0;margin:auto;
border:var(--nlg-linea) solid var(--nlg-border-strong);border-radius:var(--nlg-modale-r,var(--nlg-r-xl));background:var(--nlg-surface-1);color:var(--nlg-text-1);box-shadow:var(--nlg-shadow-lg)}
.nlg-modale::backdrop{background:var(--nlg-scrim)}
.nlg-modale__testata{display:flex;align-items:center;justify-content:space-between;gap:var(--nlg-s-3);padding:var(--nlg-s-3) var(--nlg-s-4);border-bottom:var(--nlg-linea) solid var(--nlg-border)}
.nlg-modale__titolo{margin:0;font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-fs-body);color:var(--nlg-text-1)}
.nlg-modale__chiudi{display:inline-flex;align-items:center;justify-content:center;width:var(--nlg-tap-min);height:var(--nlg-tap-min);padding:0;border:var(--nlg-linea) solid var(--nlg-border-strong);
border-radius:var(--nlg-r-pill);background:var(--nlg-surface-1);color:var(--nlg-text-2);font-family:var(--nlg-font-mono);font-size:var(--nlg-fs-body-lg);cursor:pointer}
.nlg-modale__chiudi:hover{color:var(--nlg-text-1);border-color:var(--nlg-action)}
.nlg-modale__chiudi:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-modale__corpo{display:flex;flex-direction:column;gap:var(--nlg-s-4);padding:var(--nlg-s-5);overflow:auto}
.nlg-modale__piede{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nlg-s-3);padding:var(--nlg-s-3) var(--nlg-s-4);border-top:var(--nlg-linea) solid var(--nlg-border)}
/* ═══ Occhiello — l'etichetta mono sopra un titolo (§ 2.2.1) ═════════════════════════════════════════ */
.nlg-occhiello{margin:0 0 var(--nlg-s-2);font-family:var(--nlg-font-mono);font-weight:500;font-size:var(--nlg-fs-overline);line-height:1.4;letter-spacing:var(--nlg-ls-overline);text-transform:uppercase;color:var(--nlg-blue-ink)}
/* ═══ 5.1.1 · Header ═════════════════════════════════════════════════════════════════════════════════ */
.nlg-utility{height:var(--nlg-utility-h);background:var(--nlg-text-1);color:var(--nlg-canvas)} /* in inchiostro pieno; sparisce allo scorrimento */
.nlg-utility__riga{max-width:var(--nlg-container);height:100%;margin:0 auto;padding:0 var(--nlg-margine);display:flex;align-items:center;justify-content:flex-end;gap:var(--nlg-s-5);font-family:var(--nlg-font-ui);font-size:var(--nlg-fs-caption)}
a.nlg-utility__voce.nlg-utility__voce:is(:link,:visited,:hover,:focus,:active){color:var(--nlg-canvas);text-decoration:none}
.nlg-header{position:sticky;top:0;z-index:40;background:var(--nlg-surface-1);border-bottom:var(--nlg-linea) solid var(--nlg-border);transition:box-shadow var(--nlg-t-base) var(--nlg-ease)}
.nlg-header__riga{max-width:var(--nlg-container);height:var(--nlg-testata-h);margin:0 auto;padding:0 var(--nlg-margine);display:flex;align-items:center;gap:var(--nlg-s-5);transition:height var(--nlg-t-base) var(--nlg-ease)}
.nlg-header--ridotto{box-shadow:var(--nlg-shadow-sm)}
.nlg-header--ridotto .nlg-header__riga{height:var(--nlg-testata-h-ridotta)}
.nlg-header__voci{display:flex;align-items:stretch;gap:var(--nlg-s-5);height:100%;margin-left:auto}
.nlg-header__voce{display:inline-flex;align-items:center;gap:var(--nlg-s-1);height:100%;border:0;border-bottom:var(--nlg-segno) solid transparent;background:transparent;
color:var(--nlg-text-2);font-family:var(--nlg-font-ui);font-weight:600;font-size:var(--nlg-fs-body-sm);text-decoration:none;cursor:pointer}
.nlg-header__voce:hover{color:var(--nlg-text-1)}
.nlg-header__voce:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-header__voce[aria-current="page"],.nlg-header__voce[aria-expanded="true"]{color:var(--nlg-text-1);border-bottom-color:var(--nlg-action)}
a.nlg-header__voce.nlg-header__voce:is(:link,:visited,:focus,:active){color:var(--nlg-text-2);text-decoration:none}
a.nlg-header__voce.nlg-header__voce:is(:hover,[aria-current="page"]){color:var(--nlg-text-1)}
.nlg-header__azione{height:var(--nlg-comando-h)} /* l'unico comando che non sparisce mai */
@media (prefers-reduced-motion:reduce){.nlg-header,.nlg-header__riga{transition:none}}
/* ═══ 5.1.4 · Mega menu ══════════════════════════════════════════════════════════════════════════════ */
.nlg-mega{position:absolute;left:0;right:0;top:100%;z-index:39;background:var(--nlg-surface-1);border-bottom:var(--nlg-linea) solid var(--nlg-border);box-shadow:var(--nlg-shadow-md)}
.nlg-mega[hidden]{display:none}
.nlg-mega__griglia{max-width:var(--nlg-container);margin:0 auto;padding:var(--nlg-s-6) var(--nlg-margine);display:grid;grid-template-columns:var(--nlg-g4, repeat(4,minmax(0,1fr)));gap:var(--nlg-s-5) var(--nlg-gutter)}
.nlg-mega__gruppo{display:flex;align-items:center;min-height:var(--nlg-comando-h);margin:0;font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-fs-body-sm);color:var(--nlg-text-1)}
.nlg-mega__categorie{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nlg-mega__categoria{display:flex;align-items:center;min-height:var(--nlg-comando-h);font-family:var(--nlg-font-text);font-size:var(--nlg-fs-body-sm);text-decoration:none}
a.nlg-mega__categoria.nlg-mega__categoria:is(:link,:visited,:focus,:active){color:var(--nlg-text-2)}
a.nlg-mega__categoria.nlg-mega__categoria:hover{color:var(--nlg-blue-ink)}
.nlg-mega__categoria:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
.nlg-mega__piede{max-width:var(--nlg-container);margin:0 auto;padding:var(--nlg-s-3) var(--nlg-margine) var(--nlg-s-5);border-top:var(--nlg-linea) solid var(--nlg-border)}
/* ═══ 5.1.2 · Footer — quattro fasce nell'ordine fisso ═══════════════════════════════════════════════ */
.nlg-footer{background:var(--nlg-surface-2);color:var(--nlg-text-2);font-family:var(--nlg-font-text);font-size:var(--nlg-fs-body-sm)}
.nlg-footer__azione{background:var(--nlg-action);color:var(--nlg-text-onaction)}
.nlg-footer__fascia{max-width:var(--nlg-container);margin:0 auto;padding:var(--nlg-s-6) var(--nlg-margine);display:grid;grid-template-columns:var(--nlg-g3, repeat(3,minmax(0,1fr)));gap:var(--nlg-s-5) var(--nlg-gutter)}
.nlg-footer__gruppo{margin:0 0 var(--nlg-s-2);font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-fs-body-sm);color:var(--nlg-text-1)}
.nlg-footer__voci{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nlg-footer__voce{display:flex;align-items:center;min-height:var(--nlg-comando-h);text-decoration:none}
a.nlg-footer__voce.nlg-footer__voce:is(:link,:visited,:focus,:active){color:var(--nlg-text-2)}
a.nlg-footer__voce.nlg-footer__voce:hover{color:var(--nlg-blue-ink)}
.nlg-footer__legale{max-width:var(--nlg-container);margin:0 auto;padding:var(--nlg-s-4) var(--nlg-margine) var(--nlg-s-6);display:flex;flex-direction:column;gap:var(--nlg-s-2);font-size:var(--nlg-fs-caption);color:var(--nlg-text-3)}
/* ═══ 5.9 · Banner del consenso — le preferenze esposte, accetta e rifiuta di pari peso ═══════════════ */
.nlg-consenso{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--nlg-surface-1);border-top:var(--nlg-linea) solid var(--nlg-border-strong);box-shadow:var(--nlg-shadow-lg)}
.nlg-consenso__riga{max-width:var(--nlg-container);margin:0 auto;padding:var(--nlg-s-5) var(--nlg-margine);display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--nlg-s-5)}
.nlg-consenso__titolo{margin:0;font-family:var(--nlg-font-ui);font-weight:700;font-size:var(--nlg-fs-h4);color:var(--nlg-text-1)}
.nlg-consenso__preferenze{display:flex;flex-wrap:wrap;gap:var(--nlg-s-4)}
.nlg-interruttore{display:inline-flex;align-items:center;gap:var(--nlg-s-2);min-height:var(--nlg-tap-min);padding:0;border:0;background:transparent;color:var(--nlg-text-1);font-family:var(--nlg-font-ui);font-size:var(--nlg-fs-body-sm);cursor:pointer}
.nlg-interruttore__traccia{position:relative;width:calc(var(--nlg-s-7) - var(--nlg-s-2));height:var(--nlg-s-5);border-radius:var(--nlg-r-pill);background:var(--nlg-border-strong);transition:background var(--nlg-t-fast) var(--nlg-ease)}
.nlg-interruttore__traccia::after{content:"";position:absolute;top:var(--nlg-s-1);left:var(--nlg-s-1);width:var(--nlg-s-4);height:var(--nlg-s-4);border-radius:var(--nlg-r-pill);background:var(--nlg-surface-1);transition:transform var(--nlg-t-fast) var(--nlg-ease)}
.nlg-interruttore[aria-checked="true"] .nlg-interruttore__traccia{background:var(--nlg-action)}
.nlg-interruttore[aria-checked="true"] .nlg-interruttore__traccia::after{transform:translateX(var(--nlg-s-4))}
.nlg-interruttore:disabled{color:var(--nlg-text-3);cursor:not-allowed}
.nlg-interruttore:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring);border-radius:var(--nlg-r-md)}
.nlg-consenso__pillola{position:fixed;left:var(--nlg-margine);bottom:var(--nlg-s-4);z-index:60;display:inline-flex;align-items:center;height:var(--nlg-pillola-h);padding:0 var(--nlg-s-3);
border:var(--nlg-linea) solid var(--nlg-border-strong);border-radius:var(--nlg-r-pill);background:var(--nlg-surface-1);color:var(--nlg-text-2);font-family:var(--nlg-font-ui);font-size:var(--nlg-fs-caption);cursor:pointer}
.nlg-consenso__pillola:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring)}
/* ── 4.1.9 · Icona fluttuante ─────────────────────────────────────────────────────────────────────
L'avvio del canale diretto che accompagna la pagina: UNA per pagina, sempre in basso a destra, sotto
i veli del consenso (§ 5.9) e delle modali (§ 4.3.3): z-index sotto --nlg-z-velo. È un collegamento
senza logica propria: l'href porta il numero della sede a cui la sessione è attribuita, e lo compone
il sito. Il glifo è quello del canale, riprodotto com'è; l'etichetta è per gli screen reader.
Due varianti approvate: --canale (il verde del marchio, token dei terzi, deroga D1) e --palette. */
.nlg-fluttuante{box-sizing:border-box;position:fixed;right:var(--nlg-flutt-margine);bottom:var(--nlg-flutt-margine);z-index:var(--nlg-z-fluttuante);
width:var(--nlg-flutt-misura);height:var(--nlg-flutt-misura);border-radius:var(--nlg-r-pill);
display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
background:var(--nlg-action);color:var(--nlg-text-onaction);box-shadow:var(--nlg-shadow-md);
transition:transform var(--nlg-t-fast) var(--nlg-ease),box-shadow var(--nlg-t-fast) var(--nlg-ease),background var(--nlg-t-fast) var(--nlg-ease)}
.nlg-fluttuante:hover{transform:translateY(calc(var(--nlg-linea) * -1));box-shadow:var(--nlg-shadow-lg);background:var(--nlg-action-hover)}
.nlg-fluttuante:active{transform:translateY(0);box-shadow:var(--nlg-shadow-sm)}
.nlg-fluttuante:focus-visible{outline:none;box-shadow:var(--nlg-focus-ring),var(--nlg-shadow-md)}
.nlg-fluttuante svg{width:var(--nlg-flutt-glifo);height:var(--nlg-flutt-glifo);fill:currentColor;display:block}
.nlg-fluttuante--canale{background:var(--nlg-terzi-whatsapp);color:var(--nlg-terzi-whatsapp-ink)} /* deroga D1: il verde solo qui */
.nlg-fluttuante--canale:hover{background:var(--nlg-terzi-whatsapp);filter:brightness(.94)}
.nlg-fluttuante--palette{background:var(--nlg-action);color:var(--nlg-text-onaction)}
.nlg-fluttuante--palette:hover{background:var(--nlg-action-hover)}
.nlg-fluttuante--in-cornice{position:absolute} /* nelle anteprime del libro e in Layout 1-1 l'icona sta nel riquadro della pagina, non nella finestra */
@media (prefers-reduced-motion:reduce){.nlg-fluttuante{transition:none}}
/* ── 5.10.4 · Banner «Noleggiare con Noleggiando», variante 1: il cerchio che si disegna attorno al nome ─────────
Tracciato a due giri disegnato con lo stroke (pathLength 100): si disegna in 1,4 s con la curva del § 4.4.3, resta,
si spegne e ricomincia ogni 6 s; nel rosso delle barre, spessore 9. Con «riduci movimento» resta fermo, già disegnato. */
.nlg-cerchio{fill:none;stroke:var(--nlg-bar-red);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:nlg-cerchio 6s cubic-bezier(.2,.7,.3,1) .6s infinite}
@keyframes nlg-cerchio{0%{stroke-dashoffset:100;opacity:1}24%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}84%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@media (prefers-reduced-motion:reduce){.nlg-cerchio{animation:none;stroke-dashoffset:0;opacity:1}}