/* ==========================================================================
   NITIDO — design system
   Parete bianca, grigio galleria solo nelle zone di lavoro, filetti sottili,
   inchiostro freddo e un solo accento: il vino. DM Serif Display solo per i nomi
   delle coppie, il saluto e un numero grande per vista; Geist per tutto il resto
   (titoli delle pagine compresi), con cifre tabellari. Le foto non si filtrano mai.

   Carico DOPO Bootstrap 5.3: la sezione 9 ("ponte Bootstrap") ridisegna i
   componenti Bootstrap che le pagine non ancora rifatte usano ancora, così
   sembrano già parte di Nitido. Le classi nuove hanno il prefisso nx-.

   Indice
    1. Token (1b: profondità)    7. Livelli: profondità di campo, cassetto,
    2. Base                         palette ⌘K, toast
    3. Marchio e staffa AF       8. Movimento: messa a fuoco
    4. Cornice (shell)           9. Ponte Bootstrap
    5. Contenuto e testate      10. Classi ereditate (kanban, task)
    6. Componenti               11. Larghezze  12. Passaggio del mouse
                                13. Movimento ridotto   14. Pagine editoriali: Oggi
                                15. Profondità del CRM (palette Grafite)
   ========================================================================== */

/* ───────────────────────── 1. Token ───────────────────────── */
:root {
  /* colori */
  --nx-wall: #FFFFFF;          /* parete: tutta l'app */
  --nx-grey: #F4F5F6;          /* grigio galleria: solo zone di lavoro (campi, riquadri) */
  --nx-rule: #E6E8EB;          /* filetto */
  --nx-track: #DCE0E4;         /* binari di barre e interruttori */
  --nx-line: #D5D9DE;          /* bordo dei bottoni secondari e dei chip */
  --nx-ink: #0E1114;           /* testo */
  --nx-ink2: #5F656D;          /* testo secondario (AA sul bianco) */
  --nx-ink-h: #262B31;         /* inchiostro al passaggio */
  --nx-ring: #6B7280;          /* anelli di spunta e lucchetti */
  --nx-mute: #9AA1A9;          /* solo icone attenuate, mai testo */
  --nx-hover: #F7F8F9;         /* un solo grigio di passaggio, su bianco */
  --nx-wine: #6B1E2C;          /* pulsante principale, voce attiva, «da incassare», la & */
  --nx-wine-hi: #7B2839;
  --nx-wine-lo: #631A28;
  --nx-veil: #F3EDEE;          /* vino velato: fondi di badge e voce attiva */
  --nx-wine-line: #E3CBD0;     /* vino chiaro: linee e binari sottili (scheda di lavoro, linea del tempo) */
  --nx-paid: #1F6B4F;          /* Pagato */
  --nx-paid-veil: #EAF2EE;
  --nx-wait: #4A5563;          /* In attesa */
  --nx-wait-veil: #EEF0F3;
  --nx-glass: rgba(255, 255, 255, .72);

  /* raggi */
  --nx-r-xs: 6px;
  --nx-r-sm: 9px;
  --nx-r: 10px;                /* bottoni */
  --nx-r-md: 12px;             /* campi */
  --nx-r-lg: 16px;             /* card, copertine */
  --nx-r-xl: 20px;             /* pannelli */
  --nx-r-2xl: 24px;            /* cassetto, modali */
  --nx-r-pill: 999px;

  /* ombre fredde a più livelli */
  --nx-sh-1: 0 1px 1px rgba(16, 24, 40, .03), 0 2px 6px -2px rgba(16, 24, 40, .07);
  --nx-sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -10px rgba(16, 24, 40, .10), 0 28px 56px -28px rgba(16, 24, 40, .16);
  --nx-sh-print: 0 1px 2px rgba(16, 24, 40, .07), 0 14px 28px -14px rgba(16, 24, 40, .22), 0 46px 90px -42px rgba(16, 24, 40, .36);
  --nx-sh-float: 0 0 0 1px rgba(16, 24, 40, .04), 0 14px 32px -10px rgba(16, 24, 40, .16), 0 40px 80px -30px rgba(16, 24, 40, .26);
  --nx-sh-card: 0 0 0 1px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -10px rgba(16, 24, 40, .10);

  /* spaziature (scala da 4) */
  --nx-s-1: 4px;  --nx-s-2: 8px;  --nx-s-3: 12px; --nx-s-4: 16px;
  --nx-s-5: 20px; --nx-s-6: 24px; --nx-s-7: 28px; --nx-s-8: 36px;
  --nx-s-9: 48px; --nx-s-10: 64px;

  /* tipografia */
  --nx-f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-f-serif: "DM Serif Display", "Times New Roman", serif;
  --nx-fs-xs: 12px;
  --nx-fs-sm: 13px;
  --nx-fs: 14px;
  --nx-fs-md: 15px;
  --nx-fs-lg: 16px;

  /* movimento */
  --nx-ease: cubic-bezier(.25, 1, .5, 1);
  --nx-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --nx-ease-focus: cubic-bezier(.2, .7, .2, 1);

  /* misure della cornice */
  --nx-side-w: 240px;
  --nx-top-h: 60px;
  --nx-gutter: 40px;
  --nx-max: 1440px;

  color-scheme: light;
}

/* ───────────────────────── 1b. Profondità del CRM: tre piani ─────────────────────────
   Palette «Grafite» (scelta il 23/10/2026): la cornice (menù e barra), il tavolo (lo sfondo del lavoro), i fogli
   bianchi con dentro le zone di lavoro grigie; il vino resta l'accento. I token nuovi stanno in :root e non cambiano
   nulla da soli. Quelli che ridefiniscono token esistenti (grigio, velo, vino chiaro, stati) valgono solo sotto
   body.nx-crm, cioè dentro la cornice di base.html: le pagine pubbliche, i PDF e le email restano come prima. */
:root {
  /* cornice: il menù laterale */
  --nx-frame: #FFFFFF;           /* fondo del menù */
  --nx-frame-line: #E3E6EA;      /* filetto a destra del menù */
  --nx-frame-ink: #0E1114;       /* testo e marchio del menù */
  --nx-frame-ink2: #5F656D;      /* testo secondario del menù: gruppi, icone, studio */
  --nx-frame-hover: #F7F8F9;     /* voce del menù al passaggio del mouse */
  --nx-frame-on: #F4ECEE;        /* fondo della voce attiva */
  --nx-frame-on-ink: #0E1114;    /* testo della voce attiva */
  --nx-frame-on-icon: #6B1E2C;   /* icona della voce attiva */
  --nx-frame-on-sh: none;        /* ombra della voce attiva */
  --nx-frame-mark: transparent;  /* segnalibro a sinistra della voce attiva */
  --nx-frame-tile: #0E1114;      /* tessera con l'iniziale dello studio */
  --nx-frame-tile-ink: #FFFFFF;  /* iniziale dentro la tessera */
  --nx-frame-tile-ring: transparent; /* anello attorno al marchio */
  --nx-frame-badge: #F4ECEE;     /* fondo dei contatori nel menù */
  --nx-frame-badge-ink: #6B1E2C; /* numero dei contatori nel menù */
  --nx-frame-dot: #6B1E2C;       /* puntino del marchio e delle iniziali */
  --nx-frame-card: #FFFFFF;      /* fondo del riquadro «prossimo matrimonio» in fondo al menù */
  --nx-frame-card-sh: var(--nx-sh-2); /* ombra di quel riquadro */
  --nx-frame-card-line: #E6E8EB; /* filetto dentro quel riquadro */
  --nx-frame-card-ink: #0E1114;  /* testo di quel riquadro */
  --nx-frame-card-ink2: #5F656D; /* testo secondario di quel riquadro */
  --nx-frame-card-hover: #F7F8F9; /* quel riquadro al passaggio del mouse */
  /* cornice: la barra in alto sta sul tavolo */
  --nx-top-bg: transparent;      /* fondo della barra a riposo */
  --nx-top-bg-s: rgba(241, 243, 245, .82); /* fondo della barra quando la pagina scorre */
  --nx-top-solid: #F1F3F5;       /* colore pieno del tavolo, per i contorni dei puntini sulla barra */
  /* tavolo, foglio, zona di lavoro */
  --nx-canvas: #F1F3F5;          /* tavolo: lo sfondo dell'area di lavoro */
  --nx-canvas-line: #DDE1E5;     /* filetto e binari sul tavolo */
  --nx-sheet: #FFFFFF;           /* foglio: elenchi, schede, riquadri */
  --nx-sheet-line: rgba(16, 24, 40, .07); /* bordo quasi invisibile del foglio */
  --nx-shadow-rgb: 16, 24, 40;   /* colore delle ombre dei fogli (terne r, g, b) */
  --nx-accent: #34404E;          /* colore di carattere: ardesia, per staffe e piccoli titoli */
  /* stati in più */
  --nx-prog: #36506B;            /* In corso */
  --nx-prog-veil: #E8EEF5;       /* fondo di In corso */

  /* misure dei fogli */
  --nx-r-sheet: var(--nx-r-lg);  /* raggio dei fogli: 16 px */
  --nx-gap-sheet: 24px;          /* spazio fra un foglio e il successivo */
  --nx-gap-col: 28px;            /* spazio fra le colonne di fogli (prima 64 px di filetto) */
  --nx-sheet-pad: 24px;          /* margine interno di un foglio-scheda */
  --nx-sheet-padx: 20px;         /* margine interno delle righe di un elenco */
  --nx-hang: 0px;                /* il velo della riga in primo piano riempie il foglio, non esce */
  --nx-sheet-sh: 0 1px 2px rgba(var(--nx-shadow-rgb), .04), 0 6px 16px -10px rgba(var(--nx-shadow-rgb), .10); /* ombra appena percettibile */
  --nx-sheet-ring: 0 0 0 1px var(--nx-sheet-line), var(--nx-sheet-sh); /* bordo + ombra del foglio */
}
@media (max-width: 767px) {
  :root { --nx-gap-sheet: 16px; --nx-gap-col: 16px; --nx-sheet-pad: 16px; --nx-sheet-padx: 14px; --nx-hang: 0px; }
}
/* dentro la cornice i token esistenti prendono i valori di «Grafite»; fuori (accesso, portale, prenotazioni) restano quelli di prima */
body.nx-crm {
  --nx-grey: #F5F6F8;          /* zona di lavoro dentro i fogli: campi, riquadri (era #F4F5F6) */
  --nx-veil: #F4ECEE;          /* vino velato: badge, voce attiva, «in ritardo» (era #F3EDEE) */
  --nx-wine-line: #C9A3AB;     /* vino chiaro per linee e bordi (era #E3CBD0, troppo pallido su un foglio) */
  --nx-paid-veil: #E7F1EC;     /* fondo di Pagato (era #EAF2EE) */
  --nx-wait: #5F656D;          /* In attesa: lo stesso grigio del testo secondario (era #4A5563) */
}

/* ───────────────────────── 2. Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nx-wall); }
html.nx-lock { overflow: hidden; }
body {
  margin: 0;
  background: var(--nx-wall);
  color: var(--nx-ink);
  font-family: var(--nx-f-ui);
  font-size: var(--nx-fs);
  line-height: 1.45;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 2px; }
::selection { background: var(--nx-veil); color: var(--nx-ink); }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--nx-r-xs); font: 500 12px/1 var(--nx-f-ui); color: var(--nx-ink2);
  background: #fff; box-shadow: inset 0 0 0 1px var(--nx-rule), 0 1px 0 var(--nx-rule);
}

.nx-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.nx-i--sm { width: 15px; height: 15px; }
.nx-i--xs { width: 13px; height: 13px; }
.nx-i--lg { width: 22px; height: 22px; }

.nx-serif { font-family: var(--nx-f-serif); font-weight: 400; letter-spacing: -.01em; }
.nx-amp { font-family: var(--nx-f-serif); font-style: italic; font-weight: 400; color: var(--nx-wine); padding: 0 .05em; }
.nx-num { font-variant-numeric: tabular-nums; }
.nx-unit { font-size: .5em; font-weight: 500; color: var(--nx-ink2); letter-spacing: 0; margin-left: .16em; }
.nx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-nw { white-space: nowrap; }
.nx-muted { color: var(--nx-ink2); }
.nx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--nx-r); background: var(--nx-ink); color: #fff; text-decoration: none; }
.nx-skip:focus { top: 12px; }

/* ───────────────────────── 3. Marchio e staffa AF ───────────────────────── */
/* la staffa AF: quattro angoli, come nel mirino della fotocamera */
.nx-brk, .nx-af {
  --c: rgba(255, 255, 255, .96); --l: 12px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l) no-repeat;
}
/* il logo (scelta di Francesco del 9/10/2026, «il punto sulla i»): «nitido» minuscolo in Geist; le due i
   sono senza punto (ı) e il punto è disegnato tondo (Geist lo ha quadrato), il primo vino: «il giorno».
   Misure prese a 300 px e scritte in em, valgono a ogni grandezza. Niente angoli da mirino: Nitido è per
   tutti i fornitori del matrimonio, non solo per i fotografi. Il macro sta in _logo.html. */
.nx-wm {
  position: relative; display: inline-flex; align-items: center; padding: 5px 10px 7px;
  font: 600 24px/1 var(--nx-f-ui); letter-spacing: -.05em; color: var(--nx-ink); text-decoration: none;
}
.nx-wm:hover { color: var(--nx-ink); }
/* la tessera dell'app accanto alla scritta (22/10/2026, tavola A): alta 1.15 em, a 0.35 em dalla n */
.nx-logo-mark { flex: none; width: 1.15em; height: 1.15em; margin-right: .35em; transform: translateY(-.03em); }
.nx-logo-i { position: relative; display: inline-block; }
.nx-logo-dot {
  position: absolute; left: 50%; top: .128em; width: .135em; height: .135em; margin-left: -.04em;
  border-radius: 50%; background: currentColor;
}
.nx-logo-dot.is-day { background: var(--nx-wine); }

/* ───────────────────────── 4. Cornice (shell) ───────────────────────── */
/* niente z-index sui contenitori della pagina: le modali Bootstrap (dentro il contenuto)
   devono restare sopra il loro velo, che Bootstrap aggiunge in fondo al body */
.nx-app {
  position: relative; display: grid; grid-template-columns: var(--nx-side-w) minmax(0, 1fr);
  min-height: 100vh; transition: transform 440ms var(--nx-ease-drawer);
}
html.nx-layered .nx-app { transform: scale(.985); }

/* barra laterale: moduli bloccati come voci vere, nessun vuoto morto */
.nx-side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  background: #fff; box-shadow: 1px 0 0 var(--nx-rule); z-index: 25;
}
.nx-side-in {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 16px 12px 6px;
}
.nx-side-in::-webkit-scrollbar { display: none; }
.nx-side.is-more .nx-side-foot { box-shadow: 0 -1px 0 var(--nx-rule), 0 -10px 18px -12px rgba(16, 24, 40, .22); }
.nx-brand { display: flex; align-items: center; gap: 6px; padding: 6px 4px 8px 6px; }
.nx-studio {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: var(--nx-r-md);
  color: var(--nx-ink); text-decoration: none; transition: background .2s;
}
.nx-studio-mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; overflow: hidden;
  font: 600 14px/1 var(--nx-f-ui); color: #fff; background: var(--nx-ink);
}
.nx-studio-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.nx-studio-mark.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--nx-rule); }
.nx-studio b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-studio small { display: block; font-size: 12px; color: var(--nx-ink2); line-height: 1.3; }
.nx-studio > span:nth-child(2) { min-width: 0; }
.nx-studio > .nx-i { margin-left: auto; color: var(--nx-ink2); }

.nx-nav { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.nx-ng { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.nx-ng-h {
  display: flex; align-items: center; justify-content: space-between; height: 24px; margin: 0; padding: 0 10px;
  font-size: 12.5px; font-weight: 500; color: var(--nx-ink2);
}
.nx-pchip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--nx-r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--nx-ink); background: #fff;
  box-shadow: inset 0 0 0 1px var(--nx-line);
}
.nx-ni {
  position: relative; display: flex; align-items: center; gap: 11px; height: 30px; padding: 0 10px; border-radius: var(--nx-r-sm);
  white-space: nowrap; color: var(--nx-ink); font-weight: 500; font-size: 13.5px; text-decoration: none;
  transition: background .15s, color .15s;
}
.nx-ni > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* <code> nei testi d'aiuto (segnaposto newsletter ecc.): niente rosa né monospace di Bootstrap */
code { font-family: inherit; font-size: .92em; color: var(--nx-wine); background: var(--nx-veil, #F3EDEE); padding: 1px 5px; border-radius: 4px; }
/* Esci è un form POST (protezione CSRF): il bottone si comporta come le altre voci */
.nx-logout-form { margin: 0; display: contents; }
button.nx-ni { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.nx-ni > .nx-i { color: var(--nx-ink2); transition: color .15s; }
.nx-ni[aria-current="page"] { background: var(--nx-veil); font-weight: 600; }
.nx-ni[aria-current="page"] > .nx-i { color: var(--nx-wine); }
.nx-ni.is-locked { height: 27px; color: var(--nx-ink2); font-weight: 400; }
.nx-ni.is-locked > .nx-i { color: var(--nx-mute); }
.nx-ni.is-locked > .nx-i.nx-lk { margin-left: auto; width: 12px; height: 12px; color: var(--nx-ring); }
.nx-nbadge {
  margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px; border-radius: var(--nx-r-pill);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--nx-wine); background: var(--nx-veil);
}

/* il piede: una card sola. Sopra il prossimo matrimonio, sotto il piano */
.nx-side-foot { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 12px 14px; transition: box-shadow .2s; }
.nx-sf { border-radius: 14px; background: #fff; box-shadow: var(--nx-sh-2); overflow: hidden; }
.nx-sf-next {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; padding: 12px;
  color: var(--nx-ink); text-decoration: none; transition: background .2s;
}
.nx-sf-next .nx-mono { width: 40px; height: 40px; font-size: 15px; }
.nx-sf-tx { display: flex; flex-direction: column; min-width: 0; }
.nx-sf-tx small { font-size: 12.5px; line-height: 16px; color: var(--nx-ink2); }
.nx-sf-tx strong { font: 400 17px/20px var(--nx-f-serif); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.nx-sf-tx em { font-style: normal; font-size: 12.5px; line-height: 16px; color: var(--nx-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nx-sf-tx em b { font-weight: 500; color: var(--nx-ink); }
.nx-mini-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px;
  font-size: 12.5px; white-space: nowrap; color: var(--nx-ink2); text-decoration: none; transition: color .2s, background .2s;
}
.nx-sf-next + .nx-mini-plan { box-shadow: inset 0 1px 0 var(--nx-rule); }
.nx-mini-plan b { font-weight: 600; color: var(--nx-ink); display: inline-flex; align-items: center; gap: 3px; }
.nx-mini-plan b .nx-i { transition: transform .2s var(--nx-ease); }

/* voci che esistono solo nel foglio «Altro» del telefono */
.nx-sheet-only { display: none !important; }

/* barra in alto: trasparente a pagina ferma, vetro bianco quando si scorre.
   Il vetro (sfondo + backdrop-filter) sta su ::before e non sulla barra: un elemento
   con backdrop-filter diventa la "radice" dello sfocato dei figli, e i menu a comparsa
   (anche loro in vetro) sfocherebbero solo la barra, lasciando leggere la pagina sotto. */
.nx-main { min-width: 0; position: relative; }
.nx-top {
  position: sticky; top: 0; z-index: 20; height: var(--nx-top-h);
  box-shadow: 0 1px 0 rgba(230, 232, 235, 0); transition: box-shadow .25s;
}
.nx-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, 0); transition: background-color .25s;
}
.nx-top.is-scrolled { box-shadow: 0 1px 0 var(--nx-rule), 0 12px 24px -20px rgba(16, 24, 40, .25); }
.nx-top.is-scrolled::before {
  background: var(--nx-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.nx-top-in { height: 100%; max-width: var(--nx-max); margin: 0 auto; padding: 0 var(--nx-gutter); display: flex; align-items: center; gap: 8px; }
.nx-top-brand { display: none; }
.nx-search {
  display: flex; align-items: center; gap: 10px; width: min(420px, 42%); min-width: 0; flex: 0 1 auto; height: 38px;
  padding: 0 8px 0 12px; border: 0; border-radius: var(--nx-r); color: var(--nx-ink2); background: var(--nx-grey);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s;
}
.nx-search > span:first-of-type { flex: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-keys { display: inline-flex; gap: 3px; flex: none; }
.nx-top-sp { flex: 1; }
.nx-pop { position: relative; flex: none; }
.nx-ibtn {
  position: relative; flex: none; width: 38px; height: 38px; border: 0; border-radius: var(--nx-r); display: grid; place-items: center;
  color: var(--nx-ink2); background: none; cursor: pointer; transition: background .15s, color .15s, transform .12s;
}
.nx-ibtn:active { transform: scale(.97); }
.nx-ibtn[aria-expanded="true"] { background: var(--nx-hover); color: var(--nx-ink); }
.nx-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-wine); box-shadow: 0 0 0 2px #fff; }
.nx-lang {
  height: 38px; padding: 0 10px; border: 0; border-radius: var(--nx-r); display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--nx-f-ui); color: var(--nx-ink2); background: none; cursor: pointer; transition: background .15s, color .15s;
}
.nx-lang[aria-expanded="true"] { background: var(--nx-hover); color: var(--nx-ink); }
.nx-avatar {
  flex: none; width: 32px; height: 32px; margin: 0 8px 0 4px; border: 0; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--nx-f-ui); color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line);
  cursor: pointer; transition: box-shadow .15s;
}
.nx-avatar[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--nx-ink); }
.nx-m-only { display: none; }

/* menu a comparsa in vetro bianco */
.nx-glass {
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nx-sh-float);
}
.nx-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; padding: 6px; border-radius: 14px;
  transform-origin: top right; animation: nx-pop-in 180ms var(--nx-ease) both;
}
/* i menu della barra in alto stanno sopra testo fitto: vetro quasi pieno, sempre leggibile */
.nx-top .nx-menu.nx-glass { background: rgba(255, 255, 255, .96); }
.nx-menu[hidden] { display: none; }
.nx-menu form { margin: 0; }
.nx-menu a, .nx-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--nx-r-sm);
  font: 400 13.5px var(--nx-f-ui); color: var(--nx-ink); background: none; text-align: left; text-decoration: none; cursor: pointer;
}
.nx-menu a > .nx-i, .nx-menu button > .nx-i { color: var(--nx-ink2); }
.nx-menu-h { margin: 0; padding: 8px 10px; font-size: 12.5px; color: var(--nx-ink2); line-height: 1.35; }
.nx-menu-h b { display: block; font-size: 13.5px; font-weight: 600; color: var(--nx-ink); }
.nx-menu hr { border: 0; height: 1px; margin: 4px 6px; background: var(--nx-rule); opacity: 1; }
.nx-menu [role="menuitemradio"] .nx-i { margin-left: auto; color: var(--nx-ink); opacity: 0; }
.nx-menu [role="menuitemradio"][aria-checked="true"] { font-weight: 600; }
.nx-menu [role="menuitemradio"][aria-checked="true"] .nx-i { opacity: 1; }
.nx-notif { width: 340px; padding: 8px; border-radius: 18px; }
.nx-notif .nx-menu-h { font-size: 14px; font-weight: 600; color: var(--nx-ink); padding: 8px 10px 6px; }
.nx-notif-it { min-height: 52px !important; padding: 8px 10px !important; gap: 12px !important; border-radius: var(--nx-r-md) !important; }
.nx-notif-ic { width: 36px; height: 36px; border-radius: var(--nx-r); display: grid; place-items: center; flex: none; color: var(--nx-ink); background: var(--nx-grey); }
.nx-notif-it b { font-weight: 600; }
.nx-notif-empty { margin: 0; padding: 6px 10px 12px; font-size: 13px; color: var(--nx-ink2); line-height: 1.45; }
@keyframes nx-pop-in { from { opacity: 0; transform: scale(.97); } }

/* tab bar del telefono: «Nuova richiesta» al centro, sotto il pollice */
.nx-tabbar { display: none; }

/* ───────────────────────── 5. Contenuto e testate ───────────────────────── */
.nx-content { position: relative; display: block; padding-bottom: 96px; overflow-x: clip; }
.nx-wrap { position: relative; max-width: var(--nx-max); margin: 0 auto; padding: 24px var(--nx-gutter) 0; }
/* luce soffusa dietro l'intestazione: solo grigio freddo, appena percettibile */
.nx-horizon {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--nx-top-h)); height: 560px; pointer-events: none;
  background:
    radial-gradient(560px 260px at 16% 0%, rgba(96, 110, 132, .05), transparent 70%),
    radial-gradient(900px 420px at 58% -8%, rgba(96, 110, 132, .07), transparent 72%);
}

.nx-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 28px; }
.nx-ph-t { min-width: 0; flex: 1 1 360px; }
.nx-ph-kick { margin: 0 0 6px; font-size: 13.5px; font-weight: 500; color: var(--nx-ink2); }
.nx-ph-title { margin: 0; font: 600 28px/1.15 var(--nx-f-ui); letter-spacing: -.022em; color: var(--nx-ink); }
.nx-ph-sub { margin: 10px 0 0; font-size: 15px; color: var(--nx-ink2); max-width: 70ch; }
.nx-ph-sub b, .nx-ph-sub strong { color: var(--nx-ink); font-weight: 500; }
.nx-ph-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ───────────────────────── 6. Componenti ───────────────────────── */
/* bottoni */
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border: 0;
  border-radius: var(--nx-r); font: 500 13.5px/1 var(--nx-f-ui); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .2s, box-shadow .2s, color .2s, filter .2s, transform .12s;
}
.nx-btn:active { transform: scale(.97); }
.nx-btn[disabled], .nx-btn.is-disabled { cursor: default; opacity: .5; transform: none; pointer-events: none; }
.nx-btn--primary {
  color: #fff; background: linear-gradient(180deg, var(--nx-wine-hi) 0%, var(--nx-wine) 55%, var(--nx-wine-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(60, 10, 20, .2), 0 8px 18px -8px rgba(107, 30, 44, .55);
}
.nx-btn--primary:hover, .nx-btn--primary:focus { color: #fff; }
.nx-btn--secondary { background: #fff; color: var(--nx-ink); box-shadow: inset 0 0 0 1px var(--nx-line), 0 1px 2px rgba(16, 24, 40, .05); }
.nx-btn--secondary:hover { color: var(--nx-ink); }
.nx-btn--ghost { background: none; color: var(--nx-ink2); padding: 0 10px; }
.nx-btn--ink { background: var(--nx-ink); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); }
.nx-btn--ink:hover { color: #fff; }
.nx-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--nx-r-sm); }
.nx-btn--lg { height: 46px; padding: 0 20px; font-size: 14.5px; border-radius: var(--nx-r-md); }
.nx-btn--block { width: 100%; }
.nx-lnk {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: 13px; font-weight: 500;
  color: var(--nx-ink2); text-decoration: none; border-radius: 8px; transition: color .15s;
}
.nx-lnk .nx-i { transition: transform .2s var(--nx-ease); }

/* stati: tre colori e basta. Solo «da incassare» ha il fondo vino velato */
.nx-st {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  flex: none; line-height: 1;
}
.nx-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.nx-st--paid { color: var(--nx-paid); }
.nx-st--wait { color: var(--nx-wait); }
.nx-st--due { color: var(--nx-wine); background: var(--nx-veil); padding: 0 9px; border-radius: var(--nx-r-pill); }
.nx-st--deadline { color: var(--nx-ink); }
.nx-st--deadline::before { background: var(--nx-wine); }
.nx-st--muted { color: var(--nx-ink2); }
.nx-st--muted::before { background: var(--nx-mute); }

/* chip e contatori */
.nx-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--nx-r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line);
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.nx-chip.is-on { background: var(--nx-ink); color: #fff; box-shadow: none; }
.nx-chip--ok .nx-i { color: var(--nx-paid); }
.nx-count-chip {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--nx-r-pill); display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--nx-wine); background: var(--nx-veil);
}

/* sezioni separate da un filetto con etichetta */
.nx-sec { padding-top: 18px; box-shadow: inset 0 1px 0 var(--nx-rule); margin-bottom: 36px; min-width: 0; }
.nx-sec-h { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 10px; }
.nx-sec-t { margin: 0; font: 600 16px/1.3 var(--nx-f-ui); letter-spacing: -.01em; color: var(--nx-ink); }
.nx-sec-sub { font-size: 13px; color: var(--nx-ink2); }
.nx-sec-h .nx-lnk { margin-left: auto; }
.nx-sec-b { min-width: 0; }

/* pannello: bianco pieno e profondità morbida, nessun contorno */
.nx-pane { position: relative; border-radius: var(--nx-r-xl); background: #fff; box-shadow: var(--nx-sh-2); }
.nx-pane-in { padding: 22px 24px; }
.nx-well { border-radius: 14px; background: var(--nx-grey); padding: 16px 18px; }

/* tabelle "lavoro": dense, righe da 44px, solo filetti orizzontali */
.nx-table-wrap { overflow-x: auto; margin: 0 -12px; padding: 0 12px; -webkit-overflow-scrolling: touch; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nx-table th {
  height: 36px; padding: 0 12px; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--nx-ink2); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--nx-rule);
}
.nx-table td { height: 44px; padding: 6px 12px; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--nx-rule); }
.nx-table tr:last-child td { box-shadow: none; }
.nx-table .is-num, .nx-table .nx-r { text-align: right; font-variant-numeric: tabular-nums; }
.nx-table .is-name { font: 400 16px/1.2 var(--nx-f-serif); letter-spacing: -.005em; }
.nx-table a { color: inherit; text-decoration: none; }
.nx-table tbody tr { transition: background .15s; }
.nx-table .nx-cell-sub { display: block; font-size: 12.5px; color: var(--nx-ink2); margin-top: 1px; font-family: var(--nx-f-ui); }

/* moduli: campi su grigio galleria */
.nx-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.nx-span-1 { grid-column: span 1; } .nx-span-2 { grid-column: span 2; } .nx-span-3 { grid-column: span 3; }
.nx-span-4, .nx-span-full { grid-column: 1 / -1; }
.nx-field { min-width: 0; display: flex; flex-direction: column; }
.nx-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 500; color: var(--nx-ink2); }
.nx-req { color: var(--nx-wine); }
.nx-input {
  width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: var(--nx-r-md); outline: 0;
  color: var(--nx-ink); background: var(--nx-grey); font: 400 14px var(--nx-f-ui); color-scheme: light;
  transition: box-shadow .15s, background .15s;
}
.nx-input::placeholder { color: var(--nx-ink2); opacity: .8; }
.nx-input:focus { box-shadow: inset 0 0 0 1.5px var(--nx-ink); background: #fff; }
.nx-input:disabled, fieldset:disabled .nx-input { color: var(--nx-ink2); background: #F9FAFA; cursor: default; }
.nx-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.nx-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F656D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.nx-input--color { padding: 6px; width: 64px; cursor: pointer; }
.nx-input--file { height: auto; min-height: 44px; padding: 8px 10px; font-size: 13px; }
.nx-input--file::file-selector-button {
  margin-right: 10px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; font: 500 12.5px var(--nx-f-ui);
  color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line); cursor: pointer;
}
.nx-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--nx-ink2); line-height: 1.4; }
.nx-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.nx-check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--nx-ring); background: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, box-shadow .15s;
}
.nx-check input::after {
  content: ""; width: 10px; height: 10px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nx-check input:checked { background: var(--nx-ink); box-shadow: none; }
.nx-check input:checked::after { opacity: 1; }
.nx-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.nx-thumb-logo { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--nx-ink2); }
.nx-thumb-logo img { max-height: 40px; max-width: 140px; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--nx-rule); padding: 4px; }

/* avviso in linea (non un alert colorato): un punto e una frase */
.nx-note {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--nx-grey);
  font-size: 13.5px; color: var(--nx-ink); line-height: 1.45;
}
.nx-note > .nx-i { margin-top: 1px; color: var(--nx-ink2); }
.nx-note--due { background: var(--nx-veil); }
.nx-note--due > .nx-i { color: var(--nx-wine); }
.nx-note b, .nx-note strong { font-weight: 600; }

/* stato vuoto elegante */
.nx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px 36px; }
.nx-empty-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--nx-ink2); background: var(--nx-grey); margin-bottom: 14px; }
.nx-empty-ic .nx-i { width: 22px; height: 22px; }
.nx-empty-t { margin: 0; font: 600 16px/1.3 var(--nx-f-ui); letter-spacing: -.01em; }
.nx-empty-x { margin: 6px 0 0; max-width: 44ch; font-size: 13.5px; color: var(--nx-ink2); text-wrap: pretty; }
.nx-empty-a { margin-top: 16px; }

/* KPI "didascalia": numero ed etichetta sulla stessa riga, segno a destra, descrizione sotto */
.nx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; box-shadow: inset 0 1px 0 var(--nx-rule); }
.nx-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 0 15px; color: var(--nx-ink); text-decoration: none; }
.nx-kpis:not(.nx-kpis--4) > .nx-kpi:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--nx-rule); }
.nx-kpi-h { display: flex; align-items: center; gap: 12px; min-height: 28px; min-width: 0; }
.nx-kpi-t { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin: 0; white-space: nowrap; }
.nx-kpi-v { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -.02em; display: inline-flex; align-items: baseline; }
.nx-kpi-v .nx-unit { font-size: .56em; }
.nx-kpi-l { font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.nx-kpi-g { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; min-width: 0; height: 20px; }
.nx-kpi-d { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--nx-ink2); text-wrap: pretty; }
.nx-spark { align-items: flex-end; gap: 2px; width: 84px; }
.nx-spark i { flex: 1; min-height: 2px; border-radius: 1.5px; background: var(--nx-track); }
.nx-spark i.is-now { background: var(--nx-ink); }
.nx-split { display: flex; gap: 3px; flex: 0 1 84px; min-width: 40px; height: 6px; }
.nx-split i { height: 100%; border-radius: 3px; background: var(--nx-wine); transition: flex-grow .6s var(--nx-ease); }
.nx-split i:nth-child(2) { background: color-mix(in srgb, var(--nx-wine) 55%, #fff); }
.nx-split i:nth-child(3) { background: color-mix(in srgb, var(--nx-wine) 30%, #fff); }

/* monogramma piccolo: la foto che non c'è ancora */
.nx-mono {
  width: 36px; height: 36px; border-radius: var(--nx-r); display: inline-grid; place-items: center; flex: none;
  grid-auto-flow: column; justify-content: center; align-items: center;
  font: 400 14px/1 var(--nx-f-serif); letter-spacing: -.02em; color: var(--nx-ink); background: var(--nx-grey);
}
.nx-mono .nx-amp { font-size: .9em; padding: 0 .04em; }

/* copertina di coppia: foto intatta o monogramma tipografico, mirino AF */
.nx-cover { display: block; color: var(--nx-ink); text-decoration: none; min-width: 0; }
.nx-cover-ph {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--nx-r-lg); overflow: hidden;
  background: var(--nx-grey); box-shadow: var(--nx-sh-print); transition: box-shadow .5s var(--nx-ease);
}
.nx-cover-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* mai filtri */
.nx-cover-ph.is-mono { box-shadow: var(--nx-sh-2); }
.nx-cover-mono {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%), var(--nx-grey);
}
.nx-cover-ini {
  display: inline-flex; align-items: baseline; font: 400 clamp(64px, 11vw, 120px)/.9 var(--nx-f-serif); letter-spacing: -.03em;
  color: var(--nx-ink);
}
.nx-cover-ini .nx-amp { font-size: .78em; padding: 0 .08em; }
.nx-cover-cap { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 12.5px; font-weight: 500; color: var(--nx-ink2); max-width: 30ch; }
.nx-cover-cap i { width: 3px; height: 3px; border-radius: 50%; background: var(--nx-mute); }
.nx-af {
  position: absolute; left: 50%; top: 40%; width: 72px; height: 72px; margin: -36px 0 0 -36px; pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .4)) drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
  transition: transform .25s var(--nx-ease);
}
/* sul monogramma il mirino inquadra le iniziali, in inchiostro secondario */
.nx-cover-ph.is-mono .nx-af { --c: var(--nx-ring); --l: 14px; --w: 1.25px; left: 14%; top: 16%; width: 72%; height: 68%; margin: 0; filter: none; }
.nx-cover-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; min-width: 0; container-type: inline-size; }
.nx-cover-id { min-width: 0; }
.nx-cover-kick { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--nx-ink2); }
.nx-cover-n { margin: 0; font: 400 clamp(32px, 11cqi, 56px)/1 var(--nx-f-serif); letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-cover-when { margin: 8px 0 0; font-size: 14px; color: var(--nx-ink2); display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.nx-cover-when b { color: var(--nx-ink); font-weight: 500; }
.nx-cover-when span { display: inline-flex; align-items: center; gap: 5px; }
.nx-countdown { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin: 0; text-align: right; }
.nx-countdown b { font: 400 clamp(56px, 18cqi, 96px)/.8 var(--nx-f-serif); letter-spacing: -.035em; }
.nx-countdown span { font-size: 13px; font-weight: 500; color: var(--nx-ink2); margin-top: 8px; }
.nx-cover.is-small .nx-cover-n { font-size: 17px; }

/* piani: confronto */
.nx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.nx-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; border-radius: var(--nx-r-xl);
  background: var(--nx-grey);
}
.nx-plan.is-hi { background: #fff; box-shadow: var(--nx-sh-2), 0 0 0 1px rgba(16, 24, 40, .04); }
.nx-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.nx-plan-name { margin: 0; font: 600 20px/1.2 var(--nx-f-ui); letter-spacing: -.02em; }
.nx-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 2px; }
.nx-plan-price b { font-size: 36px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.nx-plan-price span { font-size: 13.5px; color: var(--nx-ink2); }
.nx-plan-year { margin: 0; font-size: 12.5px; color: var(--nx-ink2); }
.nx-plan-lead { margin: 14px 0 0; font-size: 13.5px; color: var(--nx-ink2); min-height: 40px; }
.nx-plan-list { list-style: none; margin: 16px 0 20px; padding: 14px 0 0; box-shadow: inset 0 1px 0 var(--nx-rule); display: flex; flex-direction: column; gap: 9px; }
.nx-plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.nx-plan-list li.is-head { font-size: 12.5px; font-weight: 500; color: var(--nx-ink2); }
.nx-yes { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: -1px; color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line); }
.nx-yes .nx-i { width: 10px; height: 10px; stroke-width: 2.6; }
.nx-plan.is-hi .nx-yes { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.nx-plan-foot { margin-top: auto; }
.nx-plan-foot .nx-btn { width: 100%; height: 44px; }
.nx-plan-foot form { margin: 0; }
.nx-plan-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--nx-ink2); text-align: center; }
.nx-cur-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--nx-r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line); white-space: nowrap;
}
.nx-cur-chip .nx-i { width: 13px; height: 13px; color: var(--nx-paid); stroke-width: 2.4; }
.nx-lockcall {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 28px; padding: 16px 18px;
  border-radius: var(--nx-r-xl); background: #fff; box-shadow: var(--nx-sh-2), 0 0 0 1px rgba(16, 24, 40, .04);
}
.nx-lockcall-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--nx-ink); }
.nx-lockcall p { margin: 0; }
.nx-lockcall b { display: block; font-size: 15px; font-weight: 600; }
.nx-lockcall span { font-size: 13.5px; color: var(--nx-ink2); }

/* matrice moduli × piani, su grigio galleria */
.nx-matrix { padding: 8px 10px 12px; border-radius: var(--nx-r-xl); background: var(--nx-grey); }
.nx-matrix table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nx-matrix th, .nx-matrix td { height: 38px; padding: 0 12px; box-shadow: inset 0 -1px 0 var(--nx-rule); }
.nx-matrix thead th { height: 44px; font-size: 13px; font-weight: 600; text-align: center; }
.nx-matrix thead th:first-child { text-align: left; }
.nx-matrix td:not(:first-child) { text-align: center; width: 112px; }
.nx-matrix td:not(:first-child) > * { margin: 0 auto; }
.nx-matrix tr.is-group td { height: 34px; padding-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--nx-ink2); vertical-align: bottom; }
.nx-matrix tbody tr:last-child td { box-shadow: none; }
.nx-matrix .is-cur { background: rgba(255, 255, 255, .7); }
.nx-no { display: block; width: 12px; height: 2px; border-radius: 1px; background: var(--nx-ring); }

/* pagina di accesso */
.nx-login-body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow-x: hidden; }
.nx-login-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 50% -8%, rgba(96, 110, 132, .06), transparent 72%),
    radial-gradient(520px 300px at 12% 110%, rgba(107, 30, 44, .035), transparent 70%);
}
.nx-login { position: relative; width: min(400px, 100%); animation: nx-focus-in 700ms var(--nx-ease-focus) both; }
.nx-login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.nx-login-brand .nx-wm { font-size: 40px; padding: 10px 18px 13px; }
.nx-login-studio { margin: 0; font-size: 13.5px; color: var(--nx-ink2); }
.nx-login-card { padding: 28px 28px 24px; border-radius: var(--nx-r-2xl); background: #fff; box-shadow: var(--nx-sh-2), 0 0 0 1px rgba(16, 24, 40, .04); }
.nx-login-card h1 { margin: 0 0 4px; font: 600 20px/1.25 var(--nx-f-ui); letter-spacing: -.02em; }
.nx-login-card > p { margin: 0 0 22px; font-size: 13.5px; color: var(--nx-ink2); }
.nx-login-card .nx-field + .nx-field { margin-top: 16px; }
.nx-login-card .nx-btn { width: 100%; height: 46px; margin-top: 22px; font-size: 14.5px; }
.nx-login-msg { margin-bottom: 18px; }
.nx-login-card > p.nx-login-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--nx-ink2); }
.nx-login-foot { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: var(--nx-ink2); }

/* ───────────────────────── 7. Livelli ───────────────────────── */
/* profondità di campo: la pagina va fuori fuoco in due tempi, senza velo scuro */
.nx-dof {
  position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; --dw: min(560px, calc(100vw - 24px));
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: backdrop-filter 300ms var(--nx-ease-drawer), -webkit-backdrop-filter 300ms var(--nx-ease-drawer), visibility 0s 300ms;
}
.nx-dof.is-s1 {
  visibility: visible; pointer-events: auto; -webkit-backdrop-filter: blur(6px) brightness(.97); backdrop-filter: blur(6px) brightness(.97);
  transition-duration: 150ms; transition-delay: 0s;
}
.nx-dof.is-s2 { -webkit-backdrop-filter: blur(11px) brightness(.94); backdrop-filter: blur(11px) brightness(.94); transition-duration: 420ms; }
.nx-dof::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--nx-ease-drawer);
  background: linear-gradient(270deg, rgba(16, 24, 40, .08) calc(var(--dw) + 12px), rgba(16, 24, 40, 0) calc(var(--dw) + 92px));
}
.nx-dof.is-s2.is-drawer::after { opacity: 1; }

/* cassetto laterale generico */
.nx-drawer {
  position: fixed; z-index: 60; top: 12px; right: 12px; bottom: 12px; width: min(560px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: var(--nx-r-2xl); overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), 0 24px 60px -16px rgba(16, 24, 40, .28), 0 60px 120px -40px rgba(16, 24, 40, .3);
  transform: translateX(calc(100% + 28px)); visibility: hidden;
  transition: transform 280ms var(--nx-ease-drawer), visibility 0s 280ms;
}
.nx-drawer:focus { outline: none; }
.nx-drawer.is-open { transform: none; visibility: visible; transition: transform 380ms var(--nx-ease-drawer), visibility 0s; }
.nx-drawer-top { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 6px; }
.nx-drawer-top .nx-ibtn {
  color: var(--nx-ink); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(16, 24, 40, .18);
}
.nx-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px 26px 28px; scrollbar-width: thin; }
.nx-drawer-body > h2:first-child, .nx-drawer-title { margin: 30px 0 14px; font: 600 24px/1.2 var(--nx-f-ui); letter-spacing: -.02em; }
.nx-drawer-actions {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--nx-rule);
}
.nx-drawer-actions .nx-btn { flex: 1; height: 44px; }
.nx-drawer-grab { display: none; }
.nx-drawer-loading { display: grid; place-items: center; min-height: 200px; color: var(--nx-ink2); font-size: 13.5px; }

/* palette ⌘K in vetro bianco */
.nx-kpal { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; }
.nx-kpal[hidden] { display: none; }
.nx-kbox { width: 640px; max-width: 100%; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .94); animation: nx-pop-in 180ms var(--nx-ease) both; }
.nx-kin { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; box-shadow: 0 1px 0 var(--nx-rule); }
.nx-kin > .nx-i { color: var(--nx-ink2); }
.nx-kin input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--nx-ink); font: 400 16px var(--nx-f-ui);
  -webkit-appearance: none; appearance: none;
}
.nx-kin input::-webkit-search-cancel-button { display: none; }
.nx-kin input::placeholder { color: var(--nx-ink2); }
.nx-klist { max-height: min(420px, 52vh); overflow-y: auto; padding: 6px 8px 8px; scrollbar-width: thin; }
.nx-kgrp { padding: 10px 10px 6px; font-size: 12.5px; font-weight: 500; color: var(--nx-ink2); }
.nx-kit {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 11px;
  text-align: left; color: var(--nx-ink); background: none; text-decoration: none; cursor: pointer;
}
.nx-kit[aria-selected="true"] { background: var(--nx-grey); color: var(--nx-ink); }
.nx-k-ic {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; overflow: hidden;
  color: var(--nx-ink2); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-rule);
}
.nx-k-ic.nx-mono { width: 32px; height: 32px; box-shadow: none; font-size: 12.5px; color: var(--nx-ink); background: var(--nx-grey); }
.nx-kit[aria-selected="true"] .nx-k-ic.nx-mono { background: #fff; }
.nx-k-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-k-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-k-t.is-couple { font: 400 17px/1.15 var(--nx-f-serif); letter-spacing: -.005em; }
.nx-k-s { font-size: 12.5px; color: var(--nx-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-k-go { margin-left: auto; color: var(--nx-mute); }
.nx-kempty { padding: 26px 12px; text-align: center; color: var(--nx-ink2); font-size: 14px; }
.nx-kfoot { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; box-shadow: 0 -1px 0 var(--nx-rule); font-size: 12px; color: var(--nx-ink2); }
.nx-kfoot span { display: inline-flex; align-items: center; gap: 6px; }

/* toast in vetro bianco (i messaggi flash) */
.nx-toasts {
  position: fixed; z-index: 58; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column-reverse;
  align-items: center; gap: 8px; width: min(480px, calc(100vw - 32px)); pointer-events: none;
}
.nx-toast {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 8px 8px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.4; color: var(--nx-ink); pointer-events: auto;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nx-sh-float); animation: nx-toast-in 320ms var(--nx-ease) both;
}
.nx-toast.is-out { animation: nx-toast-out 220ms var(--nx-ease) both; }
.nx-toast-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--nx-wait); }
.nx-toast-ic .nx-i { width: 13px; height: 13px; stroke-width: 2.4; }
.nx-toast--ok .nx-toast-ic { background: var(--nx-paid); }
.nx-toast--err .nx-toast-ic, .nx-toast--warn .nx-toast-ic { background: var(--nx-wine); }
.nx-toast-tx { flex: 1; min-width: 0; padding: 4px 0; }
.nx-toast-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--nx-r-sm); display: grid; place-items: center; color: var(--nx-ink2); background: none; cursor: pointer; }
@keyframes nx-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes nx-toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
body.nx-has-layer .nx-toasts { opacity: 0; visibility: hidden; }
/* con una finestra Bootstrap aperta l'avviso resta sopra il suo velo (gli avvisi del browser ci stavano sopra) */
body.modal-open .nx-toasts { z-index: 1090; }

/* conferma: la finestra di Nitido al posto di confirm(); al centro, al telefono sale dal basso come il cassetto */
.nx-conf {
  box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0;
  border-radius: var(--nx-r-2xl); background: #fff; color: var(--nx-ink); font-family: var(--nx-f-ui);
  box-shadow: var(--nx-sh-float); animation: nx-conf-in 220ms var(--nx-ease) both;
}
.nx-conf::backdrop { background: rgba(14, 17, 20, .38); }
.nx-conf-in { padding: 22px 22px 18px; }
.nx-conf:not([open]) { display: none; }
.nx-conf-q { margin: 0; font: 500 15px/1.4 var(--nx-f-ui); color: var(--nx-ink); text-wrap: pretty; }
.nx-conf-tx { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--nx-ink2); white-space: pre-line; text-wrap: pretty; }
.nx-conf-tx[hidden] { display: none; }
.nx-conf-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@keyframes nx-conf-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes nx-conf-up { from { transform: translateY(100%); } }
@media (max-width: 767px) {
  .nx-conf {
    width: 100%; margin: auto 0 0;
    border-radius: 24px 24px 0 0; animation: nx-conf-up 380ms var(--nx-ease-drawer) both;
  }
  .nx-conf-in { padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); }
  .nx-conf-a { flex-direction: column-reverse; }
  .nx-conf-a .nx-btn { width: 100%; height: 44px; }
}

/* ───────────────────────── 8. Movimento: messa a fuoco ───────────────────────── */
/* solo alla prima visita della sessione (vedi lo script in testa a base.html):
   i blocchi entrano dal fuori fuoco al nitido, uno dopo l'altro, in ordine di lettura */
@keyframes nx-focus-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(8px); }
  60% { filter: blur(0); }
  to { opacity: 1; filter: none; transform: none; }
}
html.nx-intro .nx-wrap > :not(script):not(style):not(template) { animation: nx-focus-in 620ms var(--nx-ease-focus) both; animation-delay: 60ms; }
html.nx-intro .nx-wrap > :nth-child(2) { animation-delay: 130ms; }
html.nx-intro .nx-wrap > :nth-child(3) { animation-delay: 200ms; }
html.nx-intro .nx-wrap > :nth-child(4) { animation-delay: 270ms; }
html.nx-intro .nx-wrap > :nth-child(5) { animation-delay: 340ms; }
html.nx-intro .nx-wrap > :nth-child(6) { animation-delay: 410ms; }
html.nx-intro .nx-wrap > :nth-child(n+7) { animation-delay: 480ms; }
html.nx-intro .nx-sf { animation: nx-focus-in 620ms var(--nx-ease-focus) 300ms both; }
/* il mirino cerca il fuoco e si ferma sulla copertina quando la foto è nitida */
html.nx-intro .nx-cover-ph .nx-af { animation: nx-af-lock 520ms var(--nx-ease-focus) 560ms both; }
@keyframes nx-af-lock {
  0% { opacity: 0; transform: scale(1.45); }
  50% { opacity: 1; transform: scale(.92); }
  75% { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}

/* ───────────────────────── 9. Ponte Bootstrap ─────────────────────────
   Le pagine non ancora rifatte usano Bootstrap 5.3: qui i suoi componenti
   prendono i token di Nitido. Quando una pagina passa alle classi nx- queste
   regole semplicemente smettono di servirle. */
:root {
  --bs-body-font-family: var(--nx-f-ui);
  --bs-body-font-size: .875rem;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--nx-ink);
  --bs-body-color-rgb: 14, 17, 20;
  --bs-body-bg: var(--nx-wall);
  --bs-secondary-color: var(--nx-ink2);
  --bs-tertiary-bg: var(--nx-grey);
  --bs-border-color: var(--nx-rule);
  --bs-border-color-translucent: rgba(16, 24, 40, .08);
  --bs-border-radius: var(--nx-r);
  --bs-border-radius-sm: var(--nx-r-sm);
  --bs-border-radius-lg: var(--nx-r-lg);
  --bs-primary: var(--nx-wine);
  --bs-primary-rgb: 107, 30, 44;
  --bs-link-color: var(--nx-ink);
  --bs-link-color-rgb: 14, 17, 20;
  --bs-link-hover-color: var(--nx-ink-h);
  --bs-link-hover-color-rgb: 38, 43, 49;
  --bs-emphasis-color: var(--nx-ink);
  --bs-heading-color: var(--nx-ink);
  --bs-focus-ring-color: rgba(14, 17, 20, .25);
}
a { text-decoration-color: var(--nx-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
b, strong, .fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 600 !important; }
hr { border-color: var(--nx-rule); opacity: 1; }

/* titoli: tutti in Geist. DM Serif solo per nomi delle coppie, saluto (.nx-greet) e
   un numero grande per vista (.nx-bignum): mai per i titoli delle pagine o i KPI */
/* (i titoli con una classe nx- hanno già il loro stile: il ponte non li tocca) */
.nx-wrap :is(h1, .h1):not([class*="nx-"]) { font: 600 26px/1.2 var(--nx-f-ui) !important; letter-spacing: -.022em; color: var(--nx-ink) !important; }
.nx-wrap h1:is(.display-1, .display-2, .display-3, .display-4):not([class*="nx-"]) { font: 500 44px/1.05 var(--nx-f-ui) !important; letter-spacing: -.03em; }
.nx-greet { margin: 0; font: 400 34px/1.1 var(--nx-f-serif); letter-spacing: -.012em; color: var(--nx-ink); }
.nx-bignum { font-family: var(--nx-f-serif) !important; font-weight: 400 !important; letter-spacing: -.02em; }
.nx-wrap :is(h2, .h2):not([class*="nx-"]) { font: 600 22px/1.25 var(--nx-f-ui); letter-spacing: -.02em; color: var(--nx-ink); }
.nx-wrap :is(h3, .h3):not([class*="nx-"]) { font: 600 19px/1.3 var(--nx-f-ui); letter-spacing: -.015em; }
.nx-wrap :is(h4, .h4):not([class*="nx-"]) { font: 600 17px/1.3 var(--nx-f-ui); letter-spacing: -.01em; }
.nx-wrap :is(h5, .h5):not([class*="nx-"]) { font: 600 15px/1.35 var(--nx-f-ui); }
.nx-wrap :is(h6, .h6):not([class*="nx-"]) { font: 600 13.5px/1.35 var(--nx-f-ui); }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--nx-f-ui); font-weight: 500 !important; letter-spacing: -.03em; line-height: 1.05;
}
.display-4 { font-size: 40px; } .display-5 { font-size: 34px; } .display-6 { font-size: 28px; }
.lead { font-size: 15px; font-weight: 400; color: var(--nx-ink2); }
.small, small { font-size: 12.5px; }
.text-uppercase.small, .text-uppercase.x-small, th.text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.form-label { letter-spacing: 0; }

/* colori di utilità: vino solo dove serve un accento, il resto inchiostro */
.text-primary { color: var(--nx-ink) !important; }
.text-secondary, .text-muted, .text-body-secondary { color: var(--nx-ink2) !important; }
.text-success { color: var(--nx-paid) !important; }
.text-danger { color: var(--nx-wine) !important; }
.text-warning { color: var(--nx-wine) !important; }
.text-info { color: var(--nx-wait) !important; }
.text-dark, .text-body { color: var(--nx-ink) !important; }
.bg-light, .bg-body-tertiary, .bg-body-secondary { background-color: var(--nx-grey) !important; }
.bg-white, .bg-body { background-color: #fff !important; }
.bg-primary { background-color: var(--nx-wine) !important; }
.bg-dark { background-color: var(--nx-ink) !important; }
.bg-success { background-color: var(--nx-paid) !important; }
.bg-danger { background-color: var(--nx-wine) !important; }
.bg-warning { background-color: var(--nx-veil) !important; }
.bg-info { background-color: var(--nx-wait-veil) !important; }
.bg-secondary { background-color: var(--nx-ink2) !important; }
/* sfondi "attenuati" (bg-opacity-10/25/50): i velati di Nitido, non il colore pieno */
.bg-success:is(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50) { background-color: var(--nx-paid-veil) !important; }
:is(.bg-primary, .bg-danger, .bg-warning):is(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50) { background-color: var(--nx-veil) !important; }
:is(.bg-info, .bg-secondary, .bg-dark):is(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50) { background-color: var(--nx-wait-veil) !important; }
.bg-white:is(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50) { background-color: var(--nx-grey) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--nx-rule) !important; }
.border-primary { border-color: var(--nx-ink) !important; }
.border-danger { border-color: var(--nx-wine) !important; }
.border-success { border-color: var(--nx-paid) !important; }
.border-warning { border-color: #D8BFC4 !important; }
.border-info { border-color: var(--nx-wait) !important; }
.border-dark { border-color: var(--nx-ink) !important; }
.border-start.border-4, .border-start.border-3, .border-start.border-5 { border-left-width: 3px !important; }
.shadow-sm { box-shadow: var(--nx-sh-1) !important; }
.shadow { box-shadow: var(--nx-sh-2) !important; }
.shadow-lg { box-shadow: var(--nx-sh-float) !important; }
.rounded { border-radius: var(--nx-r) !important; }
.rounded-3 { border-radius: var(--nx-r-md) !important; }
.rounded-4 { border-radius: var(--nx-r-lg) !important; }
.rounded-pill { border-radius: var(--nx-r-pill) !important; }

/* card → pannello bianco con profondità morbida */
.card {
  --bs-card-border-width: 0; --bs-card-border-radius: var(--nx-r-lg); --bs-card-inner-border-radius: var(--nx-r-lg);
  --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: 14px; --bs-card-cap-padding-x: 18px;
  --bs-card-spacer-y: 18px; --bs-card-spacer-x: 18px; --bs-card-bg: #fff;
  border: 0; box-shadow: var(--nx-sh-card);
}
.card.shadow-sm, .card.shadow { box-shadow: var(--nx-sh-card) !important; }
.card.border-0 { box-shadow: var(--nx-sh-card); }
/* le card "colorate" di Bootstrap tornano pannelli normali: nessun contorno, niente arcobaleno */
.card:is(.border-primary, .border-danger, .border-success, .border-warning, .border-info, .border-dark, .border-secondary):not(.border-start) {
  border: 0 !important; box-shadow: var(--nx-sh-card) !important;
}
.card.border-start { border-left: 3px solid var(--nx-rule) !important; }
.card.border-start.border-primary { border-left-color: var(--nx-ink) !important; box-shadow: var(--nx-sh-card) !important; }
.card.border-start.border-danger { border-left-color: var(--nx-wine) !important; box-shadow: var(--nx-sh-card) !important; }
.card.border-start.border-success { border-left-color: var(--nx-paid) !important; box-shadow: var(--nx-sh-card) !important; }
.card.border-start.border-warning, .card.border-start.border-info { border-left-color: var(--nx-wait) !important; box-shadow: var(--nx-sh-card) !important; }
.card-header, .card-footer { background: transparent; border-color: var(--nx-rule); }
.card-header { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--nx-ink); }
.card-header[class*="bg-"], .card-header.text-white { background: transparent !important; color: var(--nx-ink) !important; }
.card-header .text-white, .card-header.text-white * { color: var(--nx-ink) !important; }
.card-title { font-weight: 600; }
.card.bg-light { box-shadow: none; }
.card.text-white:not(.bg-dark) { color: var(--nx-ink) !important; }
/* card a colore pieno (bg-primary/success/danger/secondary/warning/info, con o senza
   text-white): pannello bianco, testo inchiostro, filetto di 3px a sinistra nel colore
   dello stato. Il vino resta un accento, il verde solo "Pagato". */
.card:is(.bg-primary, .bg-success, .bg-danger, .bg-secondary, .bg-warning, .bg-info) {
  --bs-card-bg: #fff; --bs-card-color: var(--nx-ink); background-color: #fff !important; color: var(--nx-ink) !important;
  border-left: 3px solid var(--nx-ring) !important; box-shadow: var(--nx-sh-card) !important;
}
.card.bg-primary, .card.bg-danger { border-left-color: var(--nx-wine) !important; }
.card.bg-success { border-left-color: var(--nx-paid) !important; }
.card:is(.bg-warning, .bg-info) { border-left-color: var(--nx-wait) !important; }
.card:is(.bg-primary, .bg-success, .bg-danger, .bg-secondary, .bg-warning, .bg-info) :is(.text-white, .text-light, .link-light) { color: var(--nx-ink) !important; }
.card:is(.bg-primary, .bg-success, .bg-danger, .bg-secondary, .bg-warning, .bg-info) :is(.text-white-50, .opacity-75, .opacity-50) { color: var(--nx-ink2) !important; opacity: 1 !important; }
.card:is(.bg-primary, .bg-success, .bg-danger, .bg-secondary, .bg-warning, .bg-info) .btn-close-white { filter: none; }
/* testo bianco su fondo scuro (bg-dark, alert-dark): i titoli seguono il colore del contenitore */
.nx-wrap .text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit !important; }

/* tabelle → "lavoro": filetti orizzontali, righe da 44px */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--nx-ink); --bs-table-border-color: var(--nx-rule);
  --bs-table-striped-bg: #FAFBFB; --bs-table-hover-bg: var(--nx-hover); --bs-table-active-bg: var(--nx-grey);
  font-size: 13.5px; margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--nx-rule); }
.table > tbody > tr > td { height: 44px; vertical-align: middle; }
.table > thead > tr > th, .table > :not(caption) > * > th {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--nx-ink2);
  background: transparent; border-bottom: 1px solid var(--nx-rule); white-space: nowrap;
}
.table > thead.table-light > tr > th, .table-light, .table-dark, thead.table-dark th {
  --bs-table-bg: transparent; --bs-table-color: var(--nx-ink2); background: transparent !important; color: var(--nx-ink2) !important;
}
.table-sm > :not(caption) > * > * { padding: 7px 10px; }
.table-sm > tbody > tr > td { height: 36px; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table-bordered > :not(caption) > * { border-width: 0; }
.table > :last-child > tr:last-child > * { border-bottom-color: transparent; }
.table-responsive, .nx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-success { --bs-table-bg: var(--nx-paid-veil); }
.table-danger, .table-warning { --bs-table-bg: var(--nx-veil); }
.table-info, .table-primary, .table-secondary { --bs-table-bg: var(--nx-grey); }

/* bottoni */
.btn {
  --bs-btn-font-family: var(--nx-f-ui); --bs-btn-font-size: 13.5px; --bs-btn-font-weight: 500; --bs-btn-line-height: 1.2;
  --bs-btn-padding-x: 15px; --bs-btn-padding-y: 9px; --bs-btn-border-radius: var(--nx-r); --bs-btn-border-width: 0;
  --bs-btn-focus-box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(14, 17, 20, .35);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0;
  transition: background .2s, box-shadow .2s, color .2s, filter .2s, transform .12s;
}
.btn:active { transform: scale(.98); }
.btn-sm, .btn-group-sm > .btn { --bs-btn-padding-x: 11px; --bs-btn-padding-y: 6px; --bs-btn-font-size: 13px; --bs-btn-border-radius: var(--nx-r-sm); min-height: 32px; }
.btn-lg, .btn-group-lg > .btn { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 12px; --bs-btn-font-size: 14.5px; --bs-btn-border-radius: var(--nx-r-md); min-height: 46px; }
.btn.w-100 { display: flex; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--nx-wine); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nx-wine);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nx-wine-lo); --bs-btn-disabled-bg: var(--nx-wine); --bs-btn-disabled-color: #fff;
  background: linear-gradient(180deg, var(--nx-wine-hi) 0%, var(--nx-wine) 55%, var(--nx-wine-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(60, 10, 20, .2), 0 8px 18px -8px rgba(107, 30, 44, .55);
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-outline-light, .btn-outline-info, .btn-outline-warning {
  --bs-btn-color: var(--nx-ink); --bs-btn-bg: #fff; --bs-btn-hover-color: var(--nx-ink); --bs-btn-hover-bg: #fff;
  --bs-btn-active-color: var(--nx-ink); --bs-btn-active-bg: var(--nx-grey); --bs-btn-disabled-color: var(--nx-ink2); --bs-btn-disabled-bg: #fff;
  box-shadow: inset 0 0 0 1px var(--nx-line), 0 1px 2px rgba(16, 24, 40, .05);
}
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-dark,
.btn-outline-secondary.active, .btn-outline-primary.active, .btn-outline-dark.active {
  --bs-btn-active-bg: var(--nx-ink); --bs-btn-active-color: #fff; color: #fff; background: var(--nx-ink); box-shadow: none;
}
.btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--nx-ink); --bs-btn-hover-bg: var(--nx-ink-h); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nx-ink-h); box-shadow: 0 1px 2px rgba(16, 24, 40, .2); }
/* il principale è sempre vino: anche le vecchie CTA verdi (btn-success). Il verde resta
   solo come stato «Pagato» e sui bottoni WhatsApp */
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--nx-wine); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nx-wine);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nx-wine-lo); --bs-btn-disabled-bg: var(--nx-wine); --bs-btn-disabled-color: #fff;
  background: linear-gradient(180deg, var(--nx-wine-hi) 0%, var(--nx-wine) 55%, var(--nx-wine-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(60, 10, 20, .2), 0 8px 18px -8px rgba(107, 30, 44, .55);
}
.btn-success:is(:has(.bi-whatsapp, .fa-whatsapp), .nx-wa) {
  --bs-btn-bg: var(--nx-paid); --bs-btn-hover-bg: #1A5C44; --bs-btn-active-bg: #1A5C44; --bs-btn-disabled-bg: var(--nx-paid);
  background: var(--bs-btn-bg); box-shadow: 0 1px 2px rgba(16, 24, 40, .15);
}
.btn-success:is(:has(.bi-whatsapp, .fa-whatsapp), .nx-wa):hover { background: var(--bs-btn-hover-bg); }
.btn-outline-success { --bs-btn-color: var(--nx-paid); --bs-btn-bg: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nx-paid); --bs-btn-active-bg: var(--nx-paid); --bs-btn-active-color: #fff; box-shadow: inset 0 0 0 1px rgba(31, 107, 79, .35); }
.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--nx-wine); --bs-btn-bg: #fff; --bs-btn-hover-color: var(--nx-wine); --bs-btn-hover-bg: var(--nx-veil);
  --bs-btn-active-color: var(--nx-wine); --bs-btn-active-bg: var(--nx-veil); box-shadow: inset 0 0 0 1px rgba(107, 30, 44, .3);
}
.btn-warning { --bs-btn-color: var(--nx-wine); --bs-btn-bg: var(--nx-veil); --bs-btn-hover-color: var(--nx-wine); --bs-btn-hover-bg: #EDE3E5; --bs-btn-active-bg: #EDE3E5; }
.btn-info { --bs-btn-color: var(--nx-wait); --bs-btn-bg: var(--nx-wait-veil); --bs-btn-hover-color: var(--nx-ink); --bs-btn-hover-bg: #E4E7EC; --bs-btn-active-bg: #E4E7EC; }
/* text-white su un bottone che nel ponte è chiaro (info, warning, outline...) sparirebbe: segue il bottone */
.btn:is(.btn-info, .btn-warning, .btn-danger, .btn-light, .btn-secondary, .btn-link, .btn-outline-secondary, .btn-outline-primary,
        .btn-outline-dark, .btn-outline-light, .btn-outline-info, .btn-outline-warning, .btn-outline-danger).text-white { color: var(--bs-btn-color) !important; }
.btn-link { --bs-btn-color: var(--nx-ink2); --bs-btn-hover-color: var(--nx-ink); --bs-btn-active-color: var(--nx-ink); text-decoration: none; box-shadow: none; }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 2px rgba(14, 17, 20, .25); opacity: .55; }
.btn-group > .btn, .btn-group-vertical > .btn { box-shadow: inset 0 0 0 1px var(--nx-line); }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn-check:checked + .btn { box-shadow: none; }

/* badge → pillole tenui */
.badge {
  --bs-badge-font-size: 12px; --bs-badge-font-weight: 500; --bs-badge-padding-x: 9px; --bs-badge-padding-y: 4px;
  --bs-badge-border-radius: var(--nx-r-pill); --bs-badge-color: var(--nx-ink);
  letter-spacing: 0; line-height: 1.2; vertical-align: middle;
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--nx-veil) !important; color: var(--nx-wine) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--nx-paid-veil) !important; color: var(--nx-paid) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--nx-veil) !important; color: var(--nx-wine) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--nx-veil) !important; color: var(--nx-wine) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--nx-wait-veil) !important; color: var(--nx-wait) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--nx-grey) !important; color: var(--nx-ink2) !important; border: 0 !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--nx-ink) !important; color: #fff !important; }
.badge.bg-white { background: #fff !important; color: var(--nx-ink) !important; box-shadow: inset 0 0 0 1px var(--nx-line); }
.badge.text-dark:not(.bg-light):not(.bg-white) { color: inherit !important; }
.badge.border { border: 0 !important; }

/* avvisi → note su grigio, non riquadri colorati */
.alert {
  --bs-alert-border-radius: 14px; --bs-alert-padding-x: 16px; --bs-alert-padding-y: 13px;
  border: 0; background: var(--nx-grey); color: var(--nx-ink); font-size: 13.5px;
}
.alert-success { background: var(--nx-paid-veil); color: #174F3B; }
.alert-danger { background: var(--nx-veil); color: var(--nx-wine); }
.alert-warning { background: var(--nx-veil); color: var(--nx-ink); }
.alert-info, .alert-primary, .alert-secondary, .alert-light { background: var(--nx-grey); color: var(--nx-ink); }
.alert-dark { background: var(--nx-ink); color: #fff; }
.alert .alert-link { color: inherit; }
.alert-heading { font-weight: 600; }

/* campi di modulo su grigio galleria */
.form-control, .form-select {
  min-height: 40px; padding: 8px 13px; border: 0; border-radius: var(--nx-r-md); font-size: 14px; color: var(--nx-ink);
  background-color: var(--nx-grey); box-shadow: none; transition: box-shadow .15s, background-color .15s;
}
.form-select {
  padding-right: 36px;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F656D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: right 11px center;
}
.form-control:focus, .form-select:focus { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--nx-ink); border: 0; }
.form-control::placeholder { color: var(--nx-ink2); opacity: .8; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #F9FAFA; color: var(--nx-ink2); }
.form-control-sm, .form-select-sm { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; border-radius: var(--nx-r-sm); }
.form-control-lg, .form-select-lg { min-height: 46px; font-size: 15px; border-radius: var(--nx-r-md); }
.form-control-color { width: 64px; padding: 5px; }
textarea.form-control { line-height: 1.5; }
.form-label { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--nx-ink2); }
.form-text { font-size: 12.5px; color: var(--nx-ink2); }
/* tendine di stato colorate (Produzione: bg-success/danger/warning/secondary con
   text-white): fondo velato e testo nel colore dello stato, mai il colore pieno.
   Il vino resta un accento: «da fare» urgente è vino velato, non una colonna vino. */
.form-select:is(.bg-success, .bg-danger, .bg-warning, .bg-secondary, .bg-info, .bg-light) { font-weight: 500; }
.form-select.bg-success {
  background-color: var(--nx-paid-veil) !important; color: var(--nx-paid) !important;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-select.bg-danger {
  background-color: var(--nx-veil) !important; color: var(--nx-wine) !important;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1E2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-select:is(.bg-warning, .bg-info) {
  background-color: var(--nx-wait-veil) !important; color: var(--nx-wait) !important;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-select:is(.bg-secondary, .bg-light) { background-color: var(--nx-grey) !important; color: var(--nx-ink2) !important; }
.form-select:is(.bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary, .bg-light):focus { box-shadow: inset 0 0 0 1.5px currentColor; }
.form-select option { color: var(--nx-ink); background: #fff; }
.form-control.border-primary, .form-select.border-primary { border: 0 !important; }
.input-group-text { border: 0; border-radius: var(--nx-r-md); background: var(--nx-grey); color: var(--nx-ink2); font-size: 13.5px; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { box-shadow: inset -1px 0 0 #fff; }
.input-group > .btn { box-shadow: inset 0 0 0 1px var(--nx-line); }
.form-check-input { border-color: var(--nx-ring); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(14, 17, 20, .12); border-color: var(--nx-ink); }
.form-check-input:checked { background-color: var(--nx-ink); border-color: var(--nx-ink); }
.form-switch .form-check-input { width: 2.2em; border-color: var(--nx-track); background-color: var(--nx-track); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--nx-paid); border-color: var(--nx-paid); }
.form-range::-webkit-slider-thumb { background: var(--nx-ink); }
.was-validated .form-control:invalid, .form-control.is-invalid { box-shadow: inset 0 0 0 1.5px var(--nx-wine); }
.invalid-feedback { color: var(--nx-wine); }

/* schede (nav-tabs) → testo con sottolineatura vino sulla scheda attiva */
.nav-tabs {
  --bs-nav-tabs-border-width: 0; --bs-nav-link-color: var(--nx-ink2); --bs-nav-link-hover-color: var(--nx-ink);
  gap: 4px; box-shadow: inset 0 -1px 0 var(--nx-rule); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
  border: 0; border-radius: 0; padding: 10px 12px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  color: var(--nx-ink2); background: none; box-shadow: inset 0 -2px 0 transparent;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--nx-ink); font-weight: 600; background: none; box-shadow: inset 0 -2px 0 var(--nx-wine); }
.nav-pills { --bs-nav-pills-border-radius: var(--nx-r-sm); --bs-nav-pills-link-active-bg: var(--nx-ink); --bs-nav-link-color: var(--nx-ink2); }
.nav-link { color: var(--nx-ink2); }

/* menu a tendina → vetro bianco */
.dropdown-menu {
  --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: 14px; --bs-dropdown-padding-x: 6px; --bs-dropdown-padding-y: 6px;
  --bs-dropdown-font-size: 13.5px; --bs-dropdown-link-color: var(--nx-ink); --bs-dropdown-link-hover-bg: var(--nx-hover);
  --bs-dropdown-link-active-bg: var(--nx-grey); --bs-dropdown-link-active-color: var(--nx-ink); --bs-dropdown-item-border-radius: var(--nx-r-sm);
  --bs-dropdown-item-padding-y: 8px; --bs-dropdown-item-padding-x: 10px; --bs-dropdown-divider-bg: var(--nx-rule);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nx-sh-float);
}
.dropdown-item { border-radius: var(--nx-r-sm); }
.dropdown-header { font-size: 12.5px; color: var(--nx-ink2); }

/* modali → cassetto al centro, con profondità di campo */
.modal { --bs-modal-border-width: 0; --bs-modal-border-radius: var(--nx-r-2xl); --bs-modal-inner-border-radius: var(--nx-r-2xl); --bs-modal-box-shadow: var(--nx-sh-float); --bs-modal-header-border-color: transparent; --bs-modal-footer-border-color: var(--nx-rule); --bs-modal-padding: 20px 24px; --bs-modal-header-padding: 20px 24px 6px; }
.modal-content { border: 0; box-shadow: var(--nx-sh-float); }
.modal-title { font: 600 18px/1.3 var(--nx-f-ui); letter-spacing: -.015em; }
.modal-header.bg-primary, .modal-header.bg-dark, .modal-header.bg-danger, .modal-header.bg-success, .modal-header.bg-warning, .modal-header.bg-info, .modal-header.text-white {
  background: transparent !important; color: var(--nx-ink) !important;
}
.modal-header .btn-close-white { filter: none; }
.modal-footer { gap: 8px; }
.modal-backdrop { --bs-backdrop-bg: #101828; --bs-backdrop-opacity: .12; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.offcanvas { --bs-offcanvas-border-width: 0; box-shadow: var(--nx-sh-float); }
.offcanvas-backdrop.show { opacity: .12; }
.toast { --bs-toast-border-width: 0; --bs-toast-border-radius: 14px; --bs-toast-box-shadow: var(--nx-sh-float); --bs-toast-bg: rgba(255, 255, 255, .92); }

/* liste */
.list-group { --bs-list-group-border-color: var(--nx-rule); --bs-list-group-border-radius: var(--nx-r-lg); --bs-list-group-item-padding-x: 14px; --bs-list-group-item-padding-y: 10px; --bs-list-group-action-hover-bg: var(--nx-hover); --bs-list-group-action-active-bg: var(--nx-grey); --bs-list-group-active-bg: var(--nx-veil); --bs-list-group-active-border-color: var(--nx-rule); --bs-list-group-active-color: var(--nx-ink); }
.list-group-item { font-size: 13.5px; }
.list-group-item.active { font-weight: 600; color: var(--nx-ink); }
.list-group-item.active .badge { background: #fff !important; color: var(--nx-wine) !important; }
.list-group-flush > .list-group-item { background: transparent; }

/* paginazione */
.pagination { --bs-pagination-border-width: 0; --bs-pagination-color: var(--nx-ink2); --bs-pagination-hover-color: var(--nx-ink); --bs-pagination-hover-bg: var(--nx-hover); --bs-pagination-active-bg: var(--nx-ink); --bs-pagination-active-color: #fff; --bs-pagination-disabled-bg: transparent; --bs-pagination-bg: transparent; --bs-pagination-focus-box-shadow: 0 0 0 2px rgba(14, 17, 20, .25); gap: 4px; }
.page-link { border-radius: var(--nx-r-sm) !important; min-width: 34px; text-align: center; font-weight: 500; }

/* barre di avanzamento, fisarmonica, spinner */
.progress, .progress-stacked { --bs-progress-height: 6px; --bs-progress-bg: var(--nx-rule); --bs-progress-border-radius: var(--nx-r-pill); --bs-progress-bar-bg: var(--nx-ink); }
.progress-bar.bg-success { background-color: var(--nx-paid) !important; }
.progress-bar.bg-warning, .progress-bar.bg-danger { background-color: var(--nx-wine) !important; }
.progress-bar.bg-info { background-color: var(--nx-wait) !important; }
.accordion { --bs-accordion-border-color: var(--nx-rule); --bs-accordion-border-radius: var(--nx-r-lg); --bs-accordion-inner-border-radius: var(--nx-r-lg); --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(14, 17, 20, .2); --bs-accordion-active-bg: var(--nx-grey); --bs-accordion-active-color: var(--nx-ink); --bs-accordion-btn-font-size: 14px; }
.accordion-button { font-weight: 600; }
.spinner-border, .spinner-grow { color: var(--nx-ink2); }
.tooltip { --bs-tooltip-bg: var(--nx-ink); --bs-tooltip-border-radius: var(--nx-r); --bs-tooltip-font-size: 12.5px; --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 7px; }
.popover { --bs-popover-border-color: transparent; --bs-popover-box-shadow: var(--nx-sh-float); --bs-popover-border-radius: 14px; }

/* importi: mai spezzati tra simbolo e cifra (le colonne numeriche sono allineate a destra) */
.nx-money, .table td.text-end, .table th.text-end { white-space: nowrap; }

/* colonna filtri a sinistra di una lista (anno, stato, fee…): da 1200px in su è una
   colonna; sotto, i riquadri stanno in fila sopra la lista e le liste di scelta (.nx-hlist)
   diventano una riga di pillole. La classe va sull'elemento che contiene i riquadri.
   .nx-filters--top: filtri sempre sopra la lista, a ogni larghezza (quando la tabella
   ha bisogno di tutto lo spazio, come in Produzione). */
.nx-filters--top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }
.nx-filters--top > * { margin: 0 !important; min-width: 0; }
.nx-filters--top > .nx-filters-wide { grid-column: 1 / -1; }
.nx-filters--top > .card:has(> .nx-hlist) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.nx-filters--top > .card:has(> .nx-hlist) > .card-header { border: 0; padding-right: 4px; }
.nx-filters--top .list-group.nx-hlist { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.nx-filters--top .list-group.nx-hlist > .list-group-item {
  width: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 0 !important; border-radius: var(--nx-r-pill) !important; background: var(--nx-grey); margin: 0;
}
.nx-filters--top .list-group.nx-hlist > .list-group-item.active { background: var(--nx-veil); color: var(--nx-ink); }
@media (max-width: 1199.98px) {
  .nx-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }
  .nx-filters.sticky-top { position: static !important; }
  .nx-filters > * { margin: 0 !important; min-width: 0; }
  .nx-filters > .nx-filters-wide { grid-column: 1 / -1; }
  .nx-filters > .card:has(> .card-header:first-child + .nx-hlist:last-child) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nx-filters > .card:has(> .card-header:first-child + .nx-hlist:last-child) > .card-header { border: 0; padding-right: 4px; }
  .nx-filters .list-group.nx-hlist { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
  .nx-filters .list-group.nx-hlist > .list-group-item {
    width: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border: 0 !important; border-radius: var(--nx-r-pill) !important; background: var(--nx-grey); margin: 0;
  }
  .nx-filters .list-group.nx-hlist > .list-group-item.active { background: var(--nx-veil); color: var(--nx-ink); }
  .nx-filters .list-group.nx-hlist > .list-group-item .ms-auto { margin-left: 0 !important; }
  .nx-filters .list-group.nx-hlist > .list-group-item :is(br, small) { display: none; }
}

/* contenitori Bootstrap dentro la cornice: la larghezza la dà .nx-wrap */
.nx-wrap > .container, .nx-wrap > .container-fluid { max-width: none; padding-left: 0 !important; padding-right: 0 !important; }
.nx-wrap .sticky-top { top: calc(var(--nx-top-h) + 12px) !important; z-index: 15 !important; }

/* tabelle più larghe del loro riquadro: dissolvenza sul bordo che nasconde colonne
   (nitido.js mette .is-scrollable / .is-scrolled / .is-end mentre si scorre).
   La larghezza della sfumatura a destra è --nx-fade (56px); una barra che vuole più spazio la ridefinisce. */
.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--nx-fade, 56px)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--nx-fade, 56px)), transparent); }
.is-scrollable.is-scrolled:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - var(--nx-fade, 56px)), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - var(--nx-fade, 56px)), transparent); }
.is-scrollable.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
/* con una finestra aperta dentro la tabella la sfumatura si toglie (vedi nitido.js) */
.is-scrollable.nx-mask-off { -webkit-mask-image: none !important; mask-image: none !important; }

/* FullCalendar (Calendario): bottoni bianchi con filetto, oggi in vino velato */
.fc {
  --fc-border-color: var(--nx-rule); --fc-page-bg-color: #fff; --fc-neutral-bg-color: var(--nx-grey);
  --fc-today-bg-color: var(--nx-veil); --fc-list-event-hover-bg-color: var(--nx-hover);
  --fc-button-text-color: var(--nx-ink); --fc-button-bg-color: #fff; --fc-button-border-color: var(--nx-line);
  --fc-button-hover-bg-color: var(--nx-hover); --fc-button-hover-border-color: var(--nx-ink);
  --fc-button-active-bg-color: var(--nx-ink); --fc-button-active-border-color: var(--nx-ink);
  --fc-event-bg-color: var(--nx-wait); --fc-event-border-color: var(--nx-wait); --fc-event-text-color: #fff;
  font-family: var(--nx-f-ui); font-size: 13.5px;
}
.fc .fc-toolbar-title { font: 600 20px/1.2 var(--nx-f-ui); letter-spacing: -.02em; text-transform: capitalize; }
.fc .fc-button { border-radius: var(--nx-r-sm); font-size: 13px; font-weight: 500; padding: 6px 12px; text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-button-primary:disabled { color: var(--nx-ink2); background: var(--nx-grey); border-color: transparent; opacity: 1; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--nx-ink2); font-weight: 500; text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--nx-wine); font-weight: 600; }
.fc .fc-daygrid-event { border-radius: 6px; padding: 1px 4px; font-weight: 500; }
.fc a { text-decoration: none; }

/* punti di stato al posto dei pallini colorati (🟢🟡🔴) nelle pagine del ponte */
.nx-pt { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; flex: none; background: var(--nx-wait); }
.nx-pt--paid { background: var(--nx-paid); }
.nx-pt--wine { background: var(--nx-wine); }
.nx-pt--mute { background: var(--nx-mute); }
/* tessere dei moduli (dashboard): icona a tratto su grigio galleria, niente emoji */
.nx-tile-ic { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; color: var(--nx-ink); background: var(--nx-grey); }
.nx-tile-ic .nx-i { width: 22px; height: 22px; }
.nx-tile-ic .bi { font-size: 20px; line-height: 1; }

/* pagine di errore (error.html): la card del login con due azioni */
.nx-err-code { margin: 0 0 8px !important; font-size: 12.5px !important; font-weight: 500; color: var(--nx-wine) !important; }
.nx-err-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.nx-login-card .nx-err-actions .nx-btn { flex: 1 1 150px; width: auto; margin-top: 0; }

/* ───────────────────────── 10. Classi ereditate (da atelier.css) ───────────────────────── */
/* Pipeline kanban delle richieste (inquiry_pipeline.html) */
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.kanban-col { background: var(--nx-grey); border-radius: var(--nx-r-lg); padding: 12px; min-height: 220px; }
.kanban-col-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 10px; }
.kanban-col-title { font-size: 13.5px; font-weight: 600; color: var(--nx-ink); display: inline-flex; align-items: center; gap: 7px; }
.kanban-col-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-wait); }
.kanban-col[data-status="booked"] .kanban-col-title::before { background: var(--nx-paid); }
.kanban-col[data-status="lost"] .kanban-col-title::before { background: var(--nx-mute); }
.kanban-col[data-status="new"] .kanban-col-title::before { background: var(--nx-wine); }
.kanban-count { font-size: 13px; font-weight: 600; color: var(--nx-ink2); }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; max-height: 72vh; overflow-y: auto; padding: 2px; }
.kanban-card {
  background: #fff; border-radius: var(--nx-r-md); padding: 12px 14px; cursor: grab; box-shadow: var(--nx-sh-1), 0 0 0 1px rgba(16, 24, 40, .04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card .kc-name { display: block; font: 400 17px/1.2 var(--nx-f-serif); color: var(--nx-ink); text-decoration: none; }
.kanban-card .kc-meta { font-size: 12.5px; color: var(--nx-ink2); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.kanban-card .kc-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.kanban-ghost { opacity: .35; }
.kanban-drag { transform: rotate(1.5deg); box-shadow: var(--nx-sh-float); }
.kanban-empty { font-size: 12.5px; color: var(--nx-ink2); text-align: center; padding: 14px 0 6px; }

/* Task (tasks.html, _task_row.html) */
.task-row { padding: .6rem 0; box-shadow: inset 0 -1px 0 var(--nx-rule); }
.task-row:last-child { box-shadow: none; }
.task-title { font-weight: 500; }
.task-row.task-done .task-title { text-decoration: line-through; text-decoration-color: var(--nx-mute); color: var(--nx-ink2); }
.task-status {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; height: 24px; padding: 0 10px; border: 0;
  border-radius: var(--nx-r-pill); font-size: 12px; font-weight: 500; color: var(--nx-wait); background: var(--nx-wait-veil); line-height: 1;
}
.task-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.task-status-doing { color: var(--nx-wine); background: var(--nx-veil); }
.task-status-done { color: var(--nx-paid); background: var(--nx-paid-veil); }
button.task-status { cursor: pointer; }
.task-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nx-grey); color: var(--nx-ink); font-size: 11px; font-weight: 600; }
.task-body { padding: .75rem 0 .25rem 0; }
.task-note { border-left: 2px solid var(--nx-rule); padding-left: .7rem; margin-bottom: .6rem; }
.task-group-title { font-size: 13px; font-weight: 600; color: var(--nx-ink2); }

/* ───────────────────────── 11. Larghezze ───────────────────────── */
/* finestre basse: le voci entrano senza scorrere, il piede si stringe */
@media (min-width: 768px) and (min-height: 960px) {
  .nx-ni { height: 32px; } .nx-ni.is-locked { height: 29px; } .nx-ng { margin-top: 10px; }
}
@media (min-width: 768px) and (max-height: 839px) {
  .nx-side-in { padding-top: 10px; } .nx-brand { padding-top: 3px; padding-bottom: 4px; } .nx-studio { padding: 4px 10px; }
  .nx-nav { margin-top: 6px; } .nx-ni { height: 27px; } .nx-ni.is-locked { height: 25px; } .nx-ng { margin-top: 4px; } .nx-ng-h { height: 20px; }
  .nx-side-foot { padding: 6px 12px 10px; } .nx-mini-plan { min-height: 36px; }
}
@media (min-width: 768px) and (max-height: 759px) {
  .nx-sf-next { display: none; } .nx-mini-plan { box-shadow: none !important; }
}
@media (min-width: 768px) and (max-height: 680px) {
  .nx-ni { height: 24px; } .nx-ni.is-locked { height: 22px; } .nx-ng-h { height: 18px; } .nx-ng { margin-top: 3px; }
}

@media (max-width: 1180px) {
  :root { --nx-side-w: 228px; --nx-gutter: 32px; }
  .nx-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-kpis--4 > .nx-kpi:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--nx-rule); }
}
@media (max-width: 980px) {
  .nx-search .nx-keys { display: none; }
  .nx-plans { grid-template-columns: minmax(0, 1fr); }
  .nx-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-span-3 { grid-column: 1 / -1; }
  .kanban-board { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}

/* ───── telefono: la barra laterale diventa il foglio «Altro», arriva la tab bar ───── */
@media (max-width: 767px) {
  :root { --nx-top-h: 56px; --nx-gutter: 16px; }
  .nx-app { grid-template-columns: minmax(0, 1fr); }
  .nx-top-in { padding: 0 6px 0 12px; gap: 2px; }
  .nx-top-brand { display: flex; align-items: center; min-width: 0; }
  .nx-top-brand .nx-wm { padding: 4px 9px 6px; }
  .nx-search, .nx-lang-pop, .nx-avatar-pop, .nx-top-new { display: none !important; }
  .nx-m-only { display: grid; }
  .nx-ibtn { width: 44px; height: 44px; }
  .nx-wrap { padding-top: 12px; }
  .nx-content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .nx-horizon { height: 420px; background: radial-gradient(520px 300px at 70% -6%, rgba(96, 110, 132, .07), transparent 74%); }
  .nx-notif { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; }

  /* la barra laterale come foglio dal basso */
  .nx-side {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 62; height: 88vh; height: 88dvh;
    border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px -20px rgba(16, 24, 40, .35);
    transform: translateY(100%); visibility: hidden;
    transition: transform 300ms var(--nx-ease-drawer), visibility 0s 300ms;
  }
  .nx-side.is-open { transform: none; visibility: visible; transition: transform 400ms var(--nx-ease-drawer), visibility 0s; }
  .nx-side.is-dragging { transition: none; }
  .nx-side-in { padding: 40px 14px 12px; }
  .nx-sheet-only { display: flex !important; }
  .nx-sheet-grab { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 2; touch-action: none; cursor: grab; }
  .nx-sheet-grab::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 5px; background: var(--nx-track); }
  .nx-sheet-close { position: absolute; top: 12px; right: 12px; z-index: 3; }
  .nx-sheet-close.nx-sheet-only { display: grid !important; place-items: center; }
  .nx-sheet-h { margin: 0; padding: 0 10px 6px; font: 600 22px/1.2 var(--nx-f-ui); letter-spacing: -.015em; }
  .nx-sheet-new { width: calc(100% - 20px); height: 48px; margin: 10px 10px 4px; font-size: 15px; }
  .nx-brand, .nx-side .nx-studio { display: none; }
  .nx-ni { height: 44px; font-size: 15px; }
  .nx-ni.is-locked { height: 42px; }
  .nx-ng-h { height: 30px; font-size: 13px; }
  .nx-sheet-lang { gap: 8px; padding: 18px 10px 0; }
  .nx-sheet-lang form { flex: 1; margin: 0; }
  .nx-sheet-lang button { width: 100%; height: 44px; border: 0; border-radius: var(--nx-r-pill); font: 500 13.5px var(--nx-f-ui); color: var(--nx-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--nx-line); }
  .nx-sheet-lang button[aria-pressed="true"] { background: var(--nx-ink); color: #fff; box-shadow: none; }
  .nx-side-foot { flex: none; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  .nx-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -1px 0 var(--nx-rule);
  }
  .nx-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; min-width: 0;
    padding: 0 2px; border: 0; border-radius: 12px; font: 500 11.5px var(--nx-f-ui); color: var(--nx-ink2); background: none;
    white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer;
  }
  .nx-tab .nx-i { width: 22px; height: 22px; }
  .nx-tab[aria-current="page"] { color: var(--nx-ink); font-weight: 600; }
  .nx-tab[aria-current="page"] .nx-i { color: var(--nx-wine); }
  .nx-tab[aria-current="page"]::before { content: ""; position: absolute; top: -6px; width: 24px; height: 2px; border-radius: 2px; background: var(--nx-wine); }
  .nx-tab .nx-nbadge { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; height: 18px; min-width: 18px; font-size: 11px; padding: 0 5px; box-shadow: 0 0 0 2px #fff; color: #fff; background: var(--nx-ink); }
  .nx-tab-new { color: var(--nx-ink); }
  .nx-tab-new .nx-tn {
    width: 46px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(180deg, var(--nx-wine-hi), var(--nx-wine) 55%, var(--nx-wine-lo));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(107, 30, 44, .55); transition: transform .12s;
  }
  .nx-tab-new .nx-tn .nx-i { width: 20px; height: 20px; color: #fff; }
  .nx-tab-new:active .nx-tn { transform: scale(.95); }

  .nx-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); }

  .nx-dof { --dw: 100vw; }
  .nx-dof::after { background: linear-gradient(0deg, rgba(16, 24, 40, .08) 88dvh, rgba(16, 24, 40, 0) calc(88dvh + 56px)); }
  .nx-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 92vh; height: 92dvh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .nx-drawer-grab { display: block; position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 5; }
  .nx-drawer-grab::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 5px; background: var(--nx-track); }
  .nx-drawer-body { padding: 26px 18px 24px; }
  .nx-kpal { padding: 10px; }
  .nx-kfoot { display: none; }

  .nx-ph { margin-bottom: 20px; }
  .nx-ph-title { font-size: 24px; }
  .nx-greet { font-size: 28px; }
  .nx-ph-sub { font-size: 14px; margin-top: 6px; }
  .nx-ph-actions { width: 100%; }
  .nx-wrap :is(h1, .h1):not([class*="nx-"]) { font-size: 23px !important; }
  .nx-wrap h1:is(.display-1, .display-2, .display-3, .display-4):not([class*="nx-"]) { font-size: 36px !important; }
  .nx-kpis, .nx-kpis--4 { column-gap: 20px; }
  .nx-kpi-h { flex-wrap: wrap; row-gap: 7px; }
  .nx-kpi-g { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
  .nx-kpi-l { white-space: normal; }
  .nx-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nx-form-grid > .nx-field { grid-column: 1 / -1; }
  .nx-cover-ph { aspect-ratio: 4 / 3.4; }
  .nx-countdown b { font-size: 64px; }
  .nx-lockcall { grid-template-columns: 40px minmax(0, 1fr); }
  .nx-lockcall .nx-btn { grid-column: 1 / -1; }
  .nx-matrix-wrap, .nx-hide-sm { display: none; }
  .kanban-board { grid-template-columns: minmax(0, 1fr); }
  .nx-login-card { padding: 24px 20px 20px; }
}

/* ───────────────────────── 12. Passaggio del mouse (solo puntatori veri) ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .nx-btn--primary:hover { filter: brightness(1.08); }
  .nx-btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--nx-ink), 0 1px 2px rgba(16, 24, 40, .05); }
  .nx-btn--ghost:hover { color: var(--nx-ink); background: var(--nx-hover); }
  .nx-btn--ink:hover { background: var(--nx-ink-h); }
  .nx-lnk:hover { color: var(--nx-ink); }
  .nx-lnk:hover .nx-i { transform: translateX(2px); }
  .nx-studio:hover { background: var(--nx-hover); }
  .nx-ni:hover { background: var(--nx-hover); color: var(--nx-ink); }
  .nx-ni[aria-current="page"]:hover { background: var(--nx-veil); }
  .nx-ni:hover > .nx-i { color: var(--nx-ink); }
  .nx-ni[aria-current="page"]:hover > .nx-i { color: var(--nx-wine); }
  .nx-ni.is-locked:hover > .nx-i.nx-lk { color: var(--nx-ink); }
  .nx-sf-next:hover, .nx-mini-plan:hover { background: var(--nx-hover); color: var(--nx-ink); }
  .nx-mini-plan:hover b .nx-i { transform: translateX(2px); }
  .nx-search:hover { box-shadow: inset 0 0 0 1px var(--nx-line); color: var(--nx-ink); }
  .nx-ibtn:hover, .nx-lang:hover { background: var(--nx-hover); color: var(--nx-ink); }
  .nx-avatar:hover { box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .nx-menu a:hover, .nx-menu button:hover { background: var(--nx-hover); }
  .nx-toast-x:hover { background: var(--nx-grey); color: var(--nx-ink); }
  .nx-chip:hover { box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .nx-chip.is-on:hover { box-shadow: none; }
  .nx-kpi:is(a):hover .nx-kpi-l { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .nx-table tbody tr:hover { background: var(--nx-hover); }
  a.nx-cover:hover .nx-cover-ph:not(.is-mono) { box-shadow: 0 1px 2px rgba(16, 24, 40, .07), 0 18px 32px -14px rgba(16, 24, 40, .26), 0 56px 100px -44px rgba(16, 24, 40, .42); }
  a.nx-cover:hover .nx-af { transform: scale(.94); }
  .nx-kit:hover { background: var(--nx-hover); }
  .nx-kit[aria-selected="true"]:hover { background: var(--nx-grey); }
  /* ponte */
  .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-info:hover, .btn-outline-warning:hover {
    box-shadow: inset 0 0 0 1px var(--nx-ink), 0 1px 2px rgba(16, 24, 40, .05);
  }
  .btn-primary:hover, .btn-success:hover { filter: brightness(1.08); }
  .btn-success:is(:has(.bi-whatsapp, .fa-whatsapp), .nx-wa):hover { filter: none; }
  .card.nx-hoverable:hover, a.card:hover { box-shadow: var(--nx-sh-2); }
  .kanban-card:hover { box-shadow: var(--nx-sh-2), 0 0 0 1px rgba(16, 24, 40, .06); transform: translateY(-1px); }
  .kanban-card .kc-name:hover { color: var(--nx-ink); text-decoration: underline; }
  .list-group-item-action:hover:not(.active) { background: var(--nx-hover); }
}

/* ───────────────────────── 13. Movimento ridotto ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; }
  html.nx-layered .nx-app { transform: none; }
  .nx-drawer, .nx-drawer.is-open, .nx-side, .nx-side.is-open { transition: opacity 120ms, visibility 0s 120ms; }
  .nx-drawer { transform: none; opacity: 0; }
  .nx-drawer.is-open { opacity: 1; transition: opacity 120ms, visibility 0s; }
  html.nx-intro .nx-wrap > *, html.nx-intro .nx-sf, html.nx-intro .nx-af { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .nx-side { transform: none; opacity: 0; }
  .nx-side.is-open { opacity: 1; }
}

/* stampa: solo il contenuto */
@media print {
  .nx-side, .nx-top, .nx-tabbar, .nx-toasts, .nx-kpal, .nx-drawer, .nx-dof, .nx-horizon { display: none !important; }
  .nx-app { display: block; }
  .nx-wrap { padding: 0; max-width: none; }
}

/* larghezza di lettura per moduli lunghi (Profilo Studio, impostazioni) */
.nx-narrow { max-width: 980px; }

/* ───────────────────────── 14. Pagine editoriali: Oggi ─────────────────────────
   Dalla tavola editoriale (docs/nitido/design/tavola-editoriale/14-editoriale.css, tavole 01 e 03)
   con le scelte di Francesco 1A 2A 3A 4B: «Nuova richiesta» resta vino pieno, i soldi attesi e in
   ritardo restano vino, angoli, ombre e margini sono quelli di oggi (sezioni 1 e 6), il conto alla
   rovescia ha la scala dell'obiettivo. Solo token di colore: niente bianco o nero scritti a mano.
   Le classi nuove (nx-mast, nx-sh, nx-figs, nx-row...) le riusano le pagine rifatte dopo; le
   correzioni al ponte Bootstrap (sezione 9) valgono solo dentro .nx-oggi. */
:root {
  --nx-rule-strong: var(--nx-ink);  /* il filetto pieno di testate e totali */
  --nx-mark: 2px;                   /* segnalibro vino */
  --nx-hang: 20px;                  /* quanto il velo e il segnalibro escono dalla colonna (12 sul telefono) */
  /* scala DM Serif (telefono più sotto) */
  --nx-t-count: 88px; --nx-t-money: 56px; --nx-t-hello: 48px; --nx-t-fig: 40px; --nx-t-sec: 26px;
  --nx-t-list: 20px; --nx-t-quote: 18px;
  /* Geist */
  --nx-t-dek: 17px; --nx-t-eb: 11px; --nx-t-meta: 13px; --nx-eb-track: .12em;
  --nx-gap-sec: 56px; --nx-gap-col: 64px; --nx-row-h: 64px;
}

/* il ponte Bootstrap, solo qui: niente margini di p/ul/figure, link senza sottolineatura, grassetto 500 */
:where(.nx-oggi) :is(p, ul, ol, figure, h1, h2, h3) { margin: 0; }
:where(.nx-oggi) :is(ul, ol) { padding: 0; list-style: none; }
:where(.nx-oggi) a { color: inherit; text-decoration: none; }
.nx-oggi :is(b, strong) { font-weight: 500 !important; }
.nx-oggi .nx-st { height: auto; line-height: 1.35; align-items: baseline; }   /* stato = pallino + parola sulla riga */
.nx-oggi .nx-st::before { align-self: center; }
.nx-phone { display: none !important; }

/* sul telefono la pagina mostra il prossimo matrimonio: il riquadro della cornice sarebbe un doppione */
.nx-page-oggi.nx-has-prossimo .nx-sf-next { display: none; }
.nx-page-oggi.nx-has-prossimo .nx-sf-next + .nx-mini-plan { box-shadow: none; }

/* testo */
.nx-eb {                                               /* etichetta: maiuscolo spaziato, poche parole */
  margin: 0; font: 600 var(--nx-t-eb)/1.35 var(--nx-f-ui); letter-spacing: var(--nx-eb-track);
  text-transform: uppercase; color: var(--nx-ink2); white-space: nowrap;
}
.nx-eb--ink { color: var(--nx-ink); }
.nx-eb--wine { color: var(--nx-wine); }
.nx-mt { margin: 0; font-size: var(--nx-t-meta); line-height: 1.35; color: var(--nx-ink2); white-space: nowrap; }
.nx-hello { margin: 0; font: 400 var(--nx-t-hello)/1.02 var(--nx-f-serif); letter-spacing: -.024em; color: var(--nx-ink); text-wrap: balance; }
.nx-dek { margin: 12px 0 0; max-width: 64ch; font-size: var(--nx-t-dek); line-height: 1.5; color: var(--nx-ink2); text-wrap: pretty; }
.nx-dek b { color: var(--nx-ink); }
.nx-dek a {                                            /* 44 px da toccare, sottolineatura vino sul testo */
  padding: 12px 0; color: var(--nx-ink); font-weight: 500;
  background: linear-gradient(var(--nx-wine), var(--nx-wine)) 0 100% / 100% 1.5px no-repeat; background-origin: content-box;
}
.nx-amp--ui { padding: 0; margin: 0 -.02em; }           /* la & serif dentro una riga in Geist */
.nx-ul {                                               /* link editoriale a filetto; zona da toccare alta 44 px */
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-height: 44px; padding: 12px 0; margin: -12px 0;
  color: var(--nx-ink); font-size: 13px; font-weight: 500; white-space: nowrap;
  background: linear-gradient(var(--nx-ink), var(--nx-ink)) 0 100% / 100% 1px no-repeat; background-origin: content-box;
}
.nx-ul .nx-i { width: 13px; height: 13px; }
.nx-later {                                            /* l'azione di riserva della riga in primo piano */
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 12px 0; margin: -12px 0 -12px 6px;
  font-size: 13px; font-weight: 500; color: var(--nx-ink2); white-space: nowrap;
  background: linear-gradient(var(--nx-line), var(--nx-line)) 0 100% / 100% 1px no-repeat; background-origin: content-box;
}
.nx-warm { margin: 0; font: italic 400 var(--nx-t-quote)/1.4 var(--nx-f-serif); color: var(--nx-ink); text-wrap: pretty; }
.nx-warm em { font-style: italic; color: var(--nx-wine); }
.nx-none { margin: 14px 0 0; font-size: 14px; color: var(--nx-ink2); }

/* soldi: incassati verde, attesi e in ritardo vino (scelta 2A) */
.nx-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-amt--exp { color: var(--nx-wine); }
.nx-amt--late { color: var(--nx-wine); font-weight: 500; }
.nx-amt--tot { font-weight: 600; }
.nx-st--exp, .nx-st--late { color: var(--nx-wine); }
.is-due { color: var(--nx-wine); }

/* testata: data, settimana, anno operativo, studio; sotto il doppio filetto (uno per pagina) */
.nx-mast { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; padding-bottom: 10px; }
.nx-mast-l, .nx-mast-r { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.nx-mast i { width: 3px; height: 3px; border-radius: 50%; background: var(--nx-mute); align-self: center; flex: none; }
.nx-rule2 { height: 6px; margin: 0; border: 0; border-top: 2px solid var(--nx-rule-strong); border-bottom: 1px solid var(--nx-rule-strong); opacity: 1; background: none; }
.nx-year { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; }
.nx-year label { cursor: pointer; }
.nx-year-sel {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; min-height: 44px; margin: -12px 0; padding: 12px 18px 12px 0; border: 0; border-radius: 0;
  font: 600 var(--nx-t-eb)/1.35 var(--nx-f-ui); letter-spacing: var(--nx-eb-track); color: var(--nx-ink); cursor: pointer;
  background: linear-gradient(var(--nx-ink), var(--nx-ink)) 0 calc(100% - 10px) / calc(100% - 18px) 1px no-repeat,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F656D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center / 12px no-repeat;
}
.nx-year-sel option { font: 400 14px var(--nx-f-ui); letter-spacing: 0; }

/* la tavola: colonna principale e colonna a destra separata da un filetto */
.nx-board { display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: var(--nx-gap-col); margin-top: 24px; }
.nx-board.is-solo { grid-template-columns: minmax(0, 1fr); }
.nx-col-main { min-width: 0; display: flex; flex-direction: column; }
.nx-col-side { min-width: 0; padding-left: 40px; margin-left: -24px; box-shadow: inset 1px 0 0 var(--nx-rule); }
.nx-side-blk + .nx-side-blk { margin-top: 36px; }
.nx-hi { margin-bottom: 24px; }
.nx-blk { margin-top: var(--nx-gap-sec); min-width: 0; }
.nx-todo { margin-top: 36px; }
.nx-feat { display: none; }

/* titolo di sezione: numero vino in corsivo, titolo serif, filetto che riempie la riga */
.nx-sh { display: grid; grid-template-columns: auto auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 12px; margin-bottom: 8px; }
.nx-sh--plain { grid-template-columns: auto minmax(16px, 1fr) auto; }
.nx-sh--bare { grid-template-columns: auto auto minmax(16px, 1fr); }
.nx-sh--plain.nx-sh--bare { grid-template-columns: auto minmax(16px, 1fr); }
.nx-sh-n { font: italic 400 19px/1 var(--nx-f-serif); color: var(--nx-wine); }
.nx-sh-t { margin: 0; font: 400 var(--nx-t-sec)/1.1 var(--nx-f-serif); letter-spacing: -.014em; white-space: nowrap; color: var(--nx-ink); }
.nx-sh-r { align-self: center; height: 1px; background: var(--nx-rule); }
.nx-sh-x { display: inline-flex; align-items: baseline; gap: 16px; }

/* cifre chiave: colonne divise da filetti verticali */
.nx-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--nx-rule); border-bottom: 1px solid var(--nx-rule); }
.nx-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-figs--1 { grid-template-columns: minmax(0, 1fr); }
.nx-fig { display: flex; flex-direction: column; min-width: 0; padding: 14px 20px; color: var(--nx-ink); transition: background .15s; }
.nx-fig:first-child { padding-left: 0; }
.nx-fig + .nx-fig { box-shadow: inset 1px 0 0 var(--nx-rule); }
.nx-fig-v { display: flex; align-items: baseline; margin: 10px 0 6px; font: 400 var(--nx-t-fig)/.95 var(--nx-f-serif); letter-spacing: -.025em; }
.nx-fig-v .nx-unit, .nx-cash-v .nx-unit { font-family: var(--nx-f-ui); font-size: .42em; }
.nx-unit--pre { margin: 0 .16em 0 0; }
/* il simbolo della valuta sta staccato dalla cifra: «3.290,00 €» */
.nx-unit--soldi { margin-left: .5em; }
.nx-unit--pre.nx-unit--soldi { margin: 0 .5em 0 0; }
.nx-fig-d { margin: 0; font-size: 13px; line-height: 1.45; color: var(--nx-ink2); text-wrap: pretty; }
.nx-fig-d b { color: var(--nx-ink); }
.nx-fig-d .nx-st { font-size: 13px; }

/* «Da fare oggi»: monogramma, chi e perché, quando, un'azione */
.nx-rows { list-style: none; margin: 0; padding: 0; }
.nx-row {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto;
  grid-template-areas: "thumb text when acts"; align-items: center; column-gap: 16px;
  min-height: var(--nx-row-h); padding: 10px 0; border-bottom: 1px solid var(--nx-rule);
}
.nx-row > .nx-thumb { grid-area: thumb; }
.nx-row-t { grid-area: text; min-width: 0; }
.nx-row-w { grid-area: when; justify-self: end; text-align: right; font-size: 13.5px; font-weight: 500; color: var(--nx-ink); white-space: nowrap; }
.nx-row-w.is-due { color: var(--nx-wine); }
.nx-row-a { grid-area: acts; justify-self: end; display: flex; align-items: center; gap: 10px; }
.nx-row-a .nx-btn--sm { min-width: 96px; }
.nx-row-b { grid-area: more; display: flex; align-items: center; gap: 10px; min-width: 0; }
.nx-name { margin: 0; font: 400 var(--nx-t-list)/1.2 var(--nx-f-serif); letter-spacing: -.006em; color: var(--nx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-name--task { font: 500 15px/1.35 var(--nx-f-ui); letter-spacing: -.005em; white-space: normal; }
.nx-dot-due { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--nx-wine); vertical-align: middle; }
.nx-meta { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--nx-ink2); text-wrap: pretty; }   /* va a capo, mai tagliata */
.nx-meta b { color: var(--nx-ink); }
.nx-meta .is-due { font-weight: 500; }
.nx-meta-w { display: none; }
/* la riga in primo piano: segnalibro vino + velo, i bottoni sotto il testo */
.nx-row.is-focus {
  z-index: 0; border-bottom-color: transparent; padding: 16px 0; row-gap: 12px;
  grid-template-columns: 48px auto minmax(0, 1fr) auto; grid-template-areas: "thumb text text when" ". acts more more";
}
.nx-row.is-focus::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--nx-hang)); right: calc(-1 * var(--nx-hang)); z-index: -1;
  border-radius: 0 var(--nx-r-lg) var(--nx-r-lg) 0; background: var(--nx-veil);
}
.nx-row.is-focus::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--nx-hang)); width: var(--nx-mark); background: var(--nx-wine); }
.nx-row.is-focus .nx-thumb, .nx-row.is-focus .nx-thumb-ic { background: var(--nx-wall); }
.nx-row.is-focus .nx-row-a { justify-self: start; }
.nx-todo-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 18px 0 0; font-size: 13px; color: var(--nx-ink2); }

/* il monogramma «Classico»: piccolo nelle righe (angoli di oggi, scelta 3A), grande 4:5 per il prossimo */
.nx-thumb {
  position: relative; width: 48px; height: 48px; border-radius: var(--nx-r); background: var(--nx-grey); flex: none;
  display: inline-grid; place-items: center; color: var(--nx-ink);
}
.nx-thumb > .nx-i { color: var(--nx-ink2); }
.nx-thumb-m { font: 400 17px/1 var(--nx-f-serif); letter-spacing: -.02em; white-space: nowrap; }
.nx-thumb-m i { font-style: italic; color: var(--nx-wine); font-size: .78em; padding: 0 .05em; }
.nx-thumb-ic {                                         /* il tipo di cosa da fare */
  position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--nx-wall); color: var(--nx-ink2); box-shadow: 0 0 0 1px var(--nx-rule);
}
.nx-thumb-ic .nx-i { width: 11px; height: 11px; stroke-width: 1.8; }
.nx-classico-a { display: block; }
.nx-classico {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--nx-r-lg); background: var(--nx-grey); box-shadow: var(--nx-sh-2);
  display: grid; place-items: center; overflow: hidden; container-type: inline-size;
}
.nx-classico-ini {
  position: relative; display: inline-flex; align-items: baseline; padding: 20px 30px 28px; margin-top: -24px;
  font: 400 min(112px, 35cqi)/1 var(--nx-f-serif); letter-spacing: -.03em; color: var(--nx-ink);
}
.nx-classico-ini i { font-style: italic; color: var(--nx-wine); font-size: .75em; padding: 0 .11em 0 .02em; }
.nx-classico-ini .nx-brk { position: absolute; inset: 0; --c: color-mix(in srgb, var(--nx-ink) 55%, transparent); --l: 18px; --w: 1.5px; }
.nx-classico-cap {
  position: absolute; left: 16px; right: 16px; bottom: 22px; display: flex; justify-content: center; align-items: baseline; gap: 10px;
  font-size: 12px; white-space: nowrap; min-width: 0;
}
.nx-classico-cap b { flex: none; color: var(--nx-ink); letter-spacing: .02em; }
.nx-classico-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-ink2); }
.nx-classico-cap i { width: 3px; height: 3px; border-radius: 50%; background: var(--nx-mute); align-self: center; flex: none; }

/* il prossimo matrimonio: nome, conto alla rovescia, scala dell'obiettivo (scelta 4B) */
.nx-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.nx-next-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.nx-next-id { min-width: 0; }
.nx-next-n { margin: 0; font: 400 38px/1.02 var(--nx-f-serif); letter-spacing: -.02em; text-wrap: balance; }
.nx-next-w { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--nx-ink2); }
.nx-next-w b { color: var(--nx-ink); }
.nx-count { margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.nx-count-n { padding-right: .05em; font: 400 var(--nx-t-count)/.78 var(--nx-f-serif); letter-spacing: -.04em; color: var(--nx-ink); }
.nx-count-n--word { font-size: calc(var(--nx-t-count) * .5); line-height: 1; }
.nx-count .nx-eb { margin-top: 10px; }
.nx-count-s { margin: 12px 0 0; font-size: 13px; color: var(--nx-ink2); }
.nx-count-s b { color: var(--nx-ink); }
.nx-lens { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.nx-lens text { font: 500 10.5px var(--nx-f-ui); fill: var(--nx-ink2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nx-lens text.is-end { fill: var(--nx-ink); font-weight: 600; }
.nx-lens text.is-now { fill: var(--nx-wine); font-weight: 600; letter-spacing: .12em; }
.nx-lens .l-track { stroke: var(--nx-track); stroke-width: 1.5; }
.nx-lens .l-done { stroke: var(--nx-ink); stroke-width: 2; }
.nx-lens .l-tick { stroke: var(--nx-ink2); stroke-width: 1; }
.nx-lens .l-minor { stroke: var(--nx-mute); stroke-width: 1; }
.nx-lens .l-end { stroke: var(--nx-ink); stroke-width: 1.5; }
.nx-lens .l-now { fill: var(--nx-wine); }

/* elenchi brevi: data, chi, puntini di guida, stato */
.nx-kv { list-style: none; margin: 0; padding: 0; }
.nx-kv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--nx-rule-strong); }
.nx-kv li { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--nx-rule); font-size: 13.5px; }
.nx-kv li:last-child { border-bottom: 0; }
.nx-kv small { font-size: 12.5px; color: var(--nx-ink2); white-space: nowrap; }
.nx-kv .nx-serif { min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-kv-name { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-kv-d { width: 88px; flex: none; font-size: 13px; font-weight: 500; color: var(--nx-ink); white-space: nowrap; }
.nx-kv .nx-st { flex: none; }
.nx-lead { flex: 1 1 0; min-width: 0; height: 1em; align-self: baseline;
  background: radial-gradient(circle, var(--nx-mute) .75px, transparent 1px) 0 calc(100% - 3px) / 5px 3px repeat-x; }
.nx-kv-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nx-ink2); }
.nx-kv li.is-2 { flex-wrap: wrap; row-gap: 0; }
.nx-kv li.is-2 .nx-kv-sub { flex-basis: 100%; margin-top: 3px; }
.nx-kv li.nx-kv-none { color: var(--nx-ink2); }
/* data, chi e stato su una riga; se non ci stanno lo stato va a capo, a destra (mai il nome tagliato) */
.nx-kv--wrap li { flex-wrap: wrap; row-gap: 2px; }
.nx-kv--wrap li > :last-child { margin-left: auto; }
.nx-kv-more { margin: 14px 0 0; }

/* richieste in corso: le fasi come un indice */
.nx-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--nx-rule); }
.nx-stage { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; color: inherit; transition: background .15s; }
.nx-stage:first-child { padding-left: 0; }
.nx-stage + .nx-stage { box-shadow: inset 1px 0 0 var(--nx-rule); }
.nx-stage-n { font: 400 var(--nx-t-fig)/.95 var(--nx-f-serif); letter-spacing: -.025em; color: var(--nx-ink); }
.nx-after { margin: 14px 0 0; }

/* il tuo anno: una riga da oggi a dodici mesi. Punto = matrimonio, tacca vino = oggi.
   HTML con le posizioni in %: i nomi dei mesi restano a 11 px a ogni larghezza */
.nx-strip { margin-top: 16px; }
.nx-strip--phone { display: none; }
.nx-yr { position: relative; height: 50px; }
.nx-yr + .nx-yr { margin-top: 4px; }
.nx-yr-base { position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--nx-line); }
.nx-yr-t { position: absolute; top: 22px; width: 1px; height: 8px; background: var(--nx-mute); }
.nx-yr-t.is-y { top: 10px; height: 20px; background: var(--nx-ink); }
.nx-yr-y { position: absolute; left: 5px; top: -1px; font: 600 11px/1 var(--nx-f-ui); color: var(--nx-ink); white-space: nowrap; }
.nx-yr-t.is-end .nx-yr-y { left: auto; right: 5px; }
.nx-yr-m { position: absolute; top: 36px; transform: translateX(-50%); font: 500 11px/1 var(--nx-f-ui); color: var(--nx-ink2); white-space: nowrap; }
.nx-yr-d {
  position: absolute; top: 26.5px; width: 8.4px; height: 8.4px; margin: -4.2px 0 0 -4.2px; border-radius: 50%;
  background: var(--nx-ink); box-shadow: 0 0 0 1px var(--nx-wall);
}
.nx-yr-now { position: absolute; left: 0; top: 10px; width: 2px; height: 22px; background: var(--nx-wine); }
.nx-yr-now .nx-yr-y { left: 6px; color: var(--nx-wine); }
.nx-year-f { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-top: 14px; }
.nx-year-f .nx-warm { max-width: 64ch; }
.nx-legend { display: flex; flex: none; flex-wrap: wrap; gap: 6px 18px; padding-top: 5px; font-size: 12px; color: var(--nx-ink2); }
.nx-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nx-legend .k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-ink); }
.nx-legend .k-now { width: 2px; height: 12px; background: var(--nx-wine); }

/* da incassare: la cifra e chi deve cosa */
.nx-cash { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 56px; align-items: start; margin-top: 18px; }
.nx-cash-v { display: flex; align-items: baseline; margin: 14px 0 8px; font: 400 var(--nx-t-money)/.95 var(--nx-f-serif); letter-spacing: -.03em; color: var(--nx-ink); }
.nx-cash-s { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--nx-ink2); text-wrap: pretty; }
.nx-cash-s b { color: var(--nx-ink); }

/* larghezze intermedie: la colonna a destra va sotto, in due colonne */
@media (max-width: 1120px) and (min-width: 768px) {
  .nx-board { grid-template-columns: minmax(0, 1fr); }
  .nx-col-side {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; align-items: start;
    margin: var(--nx-gap-sec) 0 0; padding: 24px 0 0; box-shadow: inset 0 1px 0 var(--nx-rule);
  }
  .nx-col-side { grid-template-rows: auto 1fr; }
  .nx-col-side #prossimo { grid-row: 1 / span 2; }
  .nx-side-blk + .nx-side-blk { margin-top: 0; }
  .nx-cash { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 960px) and (min-width: 768px) {
  .nx-figs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-figs--4 .nx-fig:nth-child(odd) { padding-left: 0; box-shadow: none; }
  .nx-figs--4 .nx-fig:nth-child(n+3) { border-top: 1px solid var(--nx-rule); }
}

/* telefono (tavola 03): prossimo matrimonio compatto in cima, poi la lista, poi le cifre */
@media (max-width: 767px) {
  :root {
    --nx-hang: 12px; --nx-gap-sec: 40px; --nx-row-h: 56px;
    --nx-t-count: 64px; --nx-t-money: 40px; --nx-t-hello: 34px; --nx-t-fig: 32px; --nx-t-sec: 22px; --nx-t-list: 18px; --nx-t-dek: 16px;
  }

  /* titolo di sezione: se la nota a destra non ci sta, va a capo sotto, allineata a destra */
  .nx-sh { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
  .nx-sh-r { flex: 1 0 16px; }
  .nx-sh-x { margin-left: auto; }

  .nx-desk { display: none !important; }
  .nx-phone { display: revert !important; }
  .nx-mast { padding-bottom: 8px; flex-wrap: nowrap; }
  .nx-mast-l { gap: 10px; }
  .nx-mast-l > i, .nx-mast-l > p + i + p { display: none; }   /* sul telefono la data e l'anno, non la settimana */
  .nx-hello { margin-top: 16px; }
  .nx-dek { margin-top: 6px; }
  .nx-board { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .nx-col-side { display: none; }
  .nx-hi { order: 0; margin-bottom: 0; }
  .nx-feat { order: 1; }
  .nx-todo { order: 2; margin-top: 22px; }
  .nx-figs { order: 3; margin-top: 30px; }
  .nx-req { order: 4; }
  .nx-sh-x .nx-ul { display: none; }
  .nx-oggi .nx-btn { height: 44px; font-size: 14px; }

  /* il prossimo matrimonio compatto: al massimo 140 px */
  .nx-feat {
    display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; margin-top: 16px; padding: 12px 0;
    border-top: 1px solid var(--nx-rule-strong); border-bottom: 1px solid var(--nx-rule); color: inherit;
  }
  .nx-feat .nx-classico { border-radius: var(--nx-r); box-shadow: none; }
  .nx-feat .nx-classico-ini { font-size: 18px; padding: 6px 7px 7px; margin-top: 0; }
  .nx-feat .nx-classico-ini .nx-brk { --l: 5px; --w: 1.1px; }
  .nx-feat-t { min-width: 0; }
  .nx-feat-n { margin: 4px 0 0; font: 400 22px/1.05 var(--nx-f-serif); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nx-feat-w { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--nx-ink2); }
  .nx-feat-w b { color: var(--nx-ink); }
  .nx-feat .nx-count .nx-eb { margin-top: 6px; }

  /* righe compatte: monogramma, chi e perché · quando, un bottone. La riga in primo piano ha sotto le altre azioni */
  .nx-row, .nx-row.is-focus {
    grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "thumb text acts";
    column-gap: 12px; row-gap: 0; min-height: 60px; padding: 9px 0;
  }
  .nx-row.is-focus { grid-template-areas: "thumb text acts" ". more more"; row-gap: 4px; padding: 11px 0 10px; }
  .nx-row-w { display: none; }
  .nx-meta-w { display: inline; }
  .nx-row-a, .nx-row.is-focus .nx-row-a { justify-self: end; }
  .nx-row-a .nx-btn, .nx-row-a .nx-btn--sm { min-width: 0; padding: 0 14px; }
  .nx-row-b { flex-wrap: wrap; }
  .nx-row-b .nx-btn { height: 40px; }
  /* pagamento segnalato: la riga ha il nome lungo (coppia · rata · importo · metodo · giorno) e due pulsanti;
     al telefono il testo prende tutta la larghezza e i pulsanti vanno sotto, affiancati, invece di
     schiacciarlo in una colonna stretta. Il nome va a capo, senza puntini. Dopo le regole di base della riga. */
  .nx-row.nx-row--pagamento, .nx-row.nx-row--pagamento.is-focus {
    grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "thumb text" ". acts"; row-gap: 10px;
  }
  .nx-row--pagamento .nx-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .nx-row--pagamento .nx-row-a, .nx-row.nx-row--pagamento.is-focus .nx-row-a { justify-self: stretch; }
  .nx-row--pagamento .nx-row-a .nx-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .nx-name { font-size: var(--nx-t-list); }
  .nx-name--task { font-size: 14.5px; }
  .nx-meta { margin-top: 2px; line-height: 1.35; }
  .nx-thumb { width: 40px; height: 40px; }
  .nx-thumb-m { font-size: 14px; }
  .nx-thumb-ic { width: 18px; height: 18px; right: -5px; bottom: -5px; }
  .nx-thumb-ic .nx-i { width: 10px; height: 10px; }

  .nx-figs--3, .nx-figs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-fig { padding: 14px 16px 16px; }
  .nx-fig:nth-child(odd) { padding-left: 0; box-shadow: none; }
  .nx-fig:nth-child(n+3) { border-top: 1px solid var(--nx-rule); }
  .nx-figs--1 .nx-fig, .nx-figs--2 .nx-fig { padding-top: 14px; }
  .nx-stage { padding: 12px 12px 14px; }
  .nx-stage .nx-eb { white-space: normal; }
  .nx-strip--desk { display: none; }
  .nx-strip--phone { display: block; }
  .nx-yr-d { width: 7.2px; height: 7.2px; margin: -3.6px 0 0 -3.6px; }
  .nx-year-f { flex-direction: column; gap: 12px; }
  .nx-cash { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 12px; }
  .nx-cash-v { margin-top: 10px; }
}

/* passaggio del mouse (solo puntatori veri) */
@media (hover: hover) and (pointer: fine) {
  .nx-row:not(.is-focus):hover::after {
    content: ""; position: absolute; left: calc(-1 * var(--nx-hang)); top: 16px; bottom: 16px; width: var(--nx-mark); background: var(--nx-ink);
  }
  .nx-name a:hover, .nx-next-n a:hover, .nx-kv a.nx-serif:hover, .nx-kv-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--nx-line); }
  .nx-ul:hover { background-size: 100% 2px; }
  .nx-later:hover { color: var(--nx-ink); }
  a.nx-fig:hover .nx-eb, a.nx-stage:hover .nx-eb { color: var(--nx-ink); }
  a.nx-fig:hover, a.nx-stage:hover { background: var(--nx-hover); }
  .nx-year-sel:hover { color: var(--nx-wine); }
}

/* ───────────────────────── 15. Profondità del CRM: tre piani ─────────────────────────
   Palette «Grafite» (23/10/2026): cornice (menù e barra), tavolo (lo sfondo), fogli bianchi con le zone di lavoro grigie
   dentro. Le regole uguali per tutte le pagine: i componenti comuni (nx-...) stanno qui, quelle di una pagina nel suo
   file in pagine/. Tutte sotto .nx-crm (il body di base.html): le pagine pubbliche, i PDF e le email non cambiano.
   I colori sono token (sezione 1b). Quando serve cambiare un tono si cambia il token, non la regola. */

/* il tavolo: lo sfondo dell'area di lavoro (la parete bianca resta per le pagine pubbliche) */
html:has(> body.nx-crm), body.nx-crm { background: var(--nx-canvas); }

.nx-crm .nx-sh-r { background: var(--nx-canvas-line); }

/* un foglio: bianco, raggio, bordo quasi invisibile, ombra appena percettibile */
.nx-crm .nx-figs,
.nx-crm .nx-stages,
.nx-crm .nx-strip,
.nx-crm .nx-cash,
.nx-crm .nx-rows,
.nx-crm .nx-side-blk {
  background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring);
}

/* ───────────────────────── Cornice: menù e barra in alto ───────────────────────── */
.nx-crm .nx-side { background: var(--nx-frame); box-shadow: 1px 0 0 var(--nx-frame-line); }

.nx-crm .nx-side.is-more .nx-side-foot { box-shadow: 0 -1px 0 var(--nx-frame-line); }

.nx-crm .nx-side .nx-wm,
.nx-crm .nx-side .nx-studio,
.nx-crm .nx-side .nx-ni { color: var(--nx-frame-ink); }

.nx-crm .nx-side .nx-studio small,
.nx-crm .nx-side .nx-studio > .nx-i,
.nx-crm .nx-side .nx-ng-h,
.nx-crm .nx-side .nx-ni > .nx-i,
.nx-crm .nx-side .nx-ni.is-locked { color: var(--nx-frame-ink2); }

.nx-crm .nx-side .nx-ni.is-locked > .nx-i { color: var(--nx-frame-ink2); opacity: .7; }

.nx-crm .nx-side .nx-studio-mark { background: var(--nx-frame-tile); color: var(--nx-frame-tile-ink); }

.nx-crm .nx-side .nx-ni[aria-current="page"] {
  background: var(--nx-frame-on); color: var(--nx-frame-on-ink); box-shadow: var(--nx-frame-on-sh);
}

.nx-crm .nx-side .nx-ni[aria-current="page"] > .nx-i { color: var(--nx-frame-on-icon); }

.nx-crm .nx-side .nx-ni[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nx-frame-mark);
}

.nx-crm .nx-side .nx-nbadge { background: var(--nx-frame-badge); color: var(--nx-frame-badge-ink); }

.nx-crm .nx-side .nx-logo-mark { border-radius: 7px; box-shadow: 0 0 0 1px var(--nx-frame-tile-ring); }

.nx-crm .nx-side .nx-logo-dot.is-day { background: var(--nx-frame-dot); }

.nx-crm .nx-side .nx-sf { background: var(--nx-frame-card); box-shadow: var(--nx-frame-card-sh); }

.nx-crm .nx-side .nx-sf-tx strong,
.nx-crm .nx-side .nx-sf-tx em b,
.nx-crm .nx-side .nx-mini-plan b { color: var(--nx-frame-card-ink); }

.nx-crm .nx-side .nx-sf-tx small,
.nx-crm .nx-side .nx-sf-tx em,
.nx-crm .nx-side .nx-mini-plan { color: var(--nx-frame-card-ink2); }

.nx-crm .nx-side .nx-sf-next + .nx-mini-plan { box-shadow: inset 0 1px 0 var(--nx-frame-card-line); }

.nx-crm .nx-side .nx-sf .nx-amp,
.nx-crm .nx-side .nx-sf .nx-thumb-m i { color: var(--nx-frame-dot); }

/* barra in alto: sul tavolo (o sulla cornice); i campi bianchi restano leggibili */
.nx-crm .nx-top::before { background: var(--nx-top-bg); }

.nx-crm .nx-top.is-scrolled::before { background: var(--nx-top-bg-s); }

.nx-crm .nx-top.is-scrolled { box-shadow: 0 1px 0 var(--nx-canvas-line); }

.nx-crm .nx-search { background: var(--nx-sheet); box-shadow: inset 0 0 0 1px var(--nx-sheet-line); }

.nx-crm .nx-dot { box-shadow: 0 0 0 2px var(--nx-top-solid); }

@media (hover: hover) and (pointer: fine) {
  .nx-crm .nx-side .nx-studio:hover,
  .nx-crm .nx-side .nx-ni:hover { background: var(--nx-frame-hover); color: var(--nx-frame-ink); }
  .nx-crm .nx-side .nx-ni:hover > .nx-i { color: var(--nx-frame-ink); }
  .nx-crm .nx-side .nx-ni[aria-current="page"]:hover { background: var(--nx-frame-on); color: var(--nx-frame-on-ink); }
  .nx-crm .nx-side .nx-ni[aria-current="page"]:hover > .nx-i { color: var(--nx-frame-on-icon); }
  .nx-crm .nx-side .nx-sf-next:hover,
  .nx-crm .nx-side .nx-mini-plan:hover { background: var(--nx-frame-card-hover); color: var(--nx-frame-card-ink); }
  .nx-crm .nx-search:hover { box-shadow: inset 0 0 0 1px var(--nx-line); }
}

/* Carattere della cornice «Grafite»: menù bianco con il suo filetto a destra, voce attiva sul velo vino, barra in alto sul tavolo. */

/* ───────────────────────── Testi e stati ───────────────────────── */
.nx-crm .nx-eb:not(.nx-eb--ink):not(.nx-eb--wine) { color: var(--nx-accent); }

.nx-crm .nx-st--paid { color: var(--nx-paid); }

.nx-crm .nx-st--wait { color: var(--nx-wait); }

/* la frase di Nitido resta; i numeri sono vino e grassetto, la sottolineatura compare al passaggio (e al telefono, dove non c'è passaggio) */
.nx-crm .nx-dek a {
  color: var(--nx-wine); font-weight: 600; background-size: 100% 0; transition: background-size .15s;
}

.nx-crm .nx-dek a:focus-visible { background-size: 100% 1.5px; outline: 0; }

.nx-crm .nx-dek b.is-due,
.nx-crm .nx-dek b { color: var(--nx-ink); }

.nx-crm .nx-dek b.is-due { color: var(--nx-wine); font-weight: 600 !important; }

@media (hover: hover) and (pointer: fine) {
  .nx-crm .nx-dek a:hover { background-size: 100% 1.5px; }
}

@media (hover: none) {
  .nx-crm .nx-dek a { background-size: 100% 1px; }
}

/* ───────────────────────── Cifre e riquadri: un foglio solo ───────────────────────── */
.nx-crm .nx-figs { border: 0; overflow: hidden; }

.nx-crm .nx-fig { padding: 18px var(--nx-sheet-padx); }

.nx-crm .nx-fig:first-child { padding-left: var(--nx-sheet-padx); }

.nx-crm .nx-stages { border: 0; overflow: hidden; }

.nx-crm .nx-stage { padding: 16px var(--nx-sheet-padx) 18px; }

.nx-crm .nx-stage:first-child { padding-left: var(--nx-sheet-padx); }

.nx-crm .nx-strip { margin-top: 12px; padding: 14px 24px 8px; }

.nx-crm .nx-cash { margin-top: 12px; padding: var(--nx-sheet-pad); }

.nx-crm .nx-year-f { margin-top: 18px; }

.nx-crm .nx-fig:nth-child(odd),
.nx-crm .nx-figs--4 .nx-fig:nth-child(odd) { padding-left: var(--nx-sheet-padx); }

.nx-crm .nx-col-side { padding-left: 0; margin-left: 0; box-shadow: none; }

.nx-crm .nx-side-blk { padding: var(--nx-sheet-pad); }

.nx-crm .nx-side-blk + .nx-side-blk { margin-top: var(--nx-gap-sheet); }

.nx-crm .nx-side-blk .nx-classico { box-shadow: none; }

.nx-crm .nx-kv-h { border-bottom-color: var(--nx-rule); }

.nx-crm .nx-kv li:first-child { padding-top: 12px; }

/* ───────────────────────── Elenchi: il foglio con le righe ───────────────────────── */
/* il titolo del gruppo sta sul tavolo, sopra il foglio; dentro, filetti chiari e la riga si accende al passaggio */
.nx-crm .nx-rows { margin-top: 8px; }

.nx-crm .nx-row {
  padding-left: var(--nx-sheet-padx); padding-right: var(--nx-sheet-padx); border-bottom-color: var(--nx-rule);
}

.nx-crm .nx-rows > li:last-child .nx-row,
.nx-crm .nx-rows > .nx-row:last-child { border-bottom: 0; }

.nx-crm .nx-row.is-focus { padding-left: var(--nx-sheet-padx); padding-right: var(--nx-sheet-padx); }

.nx-crm .nx-row.is-focus::before { left: 6px; right: 6px; top: 6px; bottom: 6px; border-radius: var(--nx-r-md); }

.nx-crm .nx-row.is-focus::after { left: 6px; top: 6px; bottom: 6px; border-radius: var(--nx-r-md) 0 0 var(--nx-r-md); }

.nx-crm .nx-row.is-focus { border-bottom-color: transparent; }

.nx-crm .nx-rows > :first-child { border-radius: var(--nx-r-sheet) var(--nx-r-sheet) 0 0; }

.nx-crm .nx-rows > :last-child { border-radius: 0 0 var(--nx-r-sheet) var(--nx-r-sheet); }

.nx-crm .nx-rows > :only-child { border-radius: var(--nx-r-sheet); }

.nx-crm .nx-row.is-focus .nx-thumb { background: var(--nx-sheet); }

.nx-crm .nx-chip:not(.is-on) { background-color: var(--nx-sheet); }

@media (hover: hover) and (pointer: fine) {
  .nx-crm .nx-row:hover { background: var(--nx-hover); }
  .nx-crm .nx-row.is-focus:hover { background: none; }
  .nx-crm .nx-row:not(.is-focus):hover::after { left: 0; top: 14px; bottom: 14px; }
}

.nx-crm .nx-input,
.nx-crm .nx-select,
.nx-crm .nx-textarea { background-color: var(--nx-grey); }

/* azioni secondarie tranquille: con il mouse attenuate a riposo, accese sulla riga, sul foglio e con la tastiera; al telefono restano accese */
@media (hover: hover) and (pointer: fine) {
  .nx-crm .nx-row-b .nx-btn--secondary { opacity: .5; transition: opacity .15s; }
  .nx-crm .nx-row:hover .nx-row-b .nx-btn--secondary,
  .nx-crm .nx-row:focus-within .nx-row-b .nx-btn--secondary { opacity: 1; }
}

/* stampa: il tavolo torna bianco, i fogli restano con il solo bordo, senza ombre */
@media print {
  :root { --nx-canvas: var(--nx-wall); --nx-canvas-line: var(--nx-rule); --nx-sheet-ring: 0 0 0 1px var(--nx-sheet-line); }
  .nx-crm .nx-figs, .nx-crm .nx-stages, .nx-crm .nx-strip, .nx-crm .nx-cash, .nx-crm .nx-rows, .nx-crm .nx-side-blk { box-shadow: none; }
}