/* nx-v2.css — 20/10/2026 · Prototipo ambiente di lavoro NexusPrime
   Palette: ORO (identità, denaro, conferme) + BLU (sistema, dati, azioni).
   NESSUN viola: il viola è MOOD, non NexusPrime. */

@import url("/assets/fonts/Space_Grotesk/font.css");
@import url("/assets/fonts/Inter/font.css");   /* TESTO: Inter, servita da noi (come main.css) */

:root{
    /* superfici */
    --nx-bg:hsl(230,40%,6%);
    --nx-bg-soft:hsl(230,33.44%,19.42%);
    --nx-surface:hsl(230,22%,14%);
    --nx-surface-2:hsl(230deg 43.55% 16.29%);
    --nx-surface-3:hsl(230deg 37.7% 19.66%);

    /* fili */
    --nx-line:rgba(255,255,255,.07);
    --nx-line-2:rgba(255,255,255,.12);
    --nx-line-3:rgba(255,255,255,.22);

    /* testo */
    --nx-text:hsl(210,50%,98%);
    --nx-text-mid:hsl(215,30%,75%);
    --nx-text-dim:hsl(220,20%,55%);

    /* identità NexusPrime */
    --nx-gold:hsl(38,90%,55%);
    --nx-gold-deep:#cf8f12;
    --nx-blue:hsl(199,95%,52%);
    --nx-blue-deep:#0d7fbb;

    /* semantica */
    --nx-ok:hsl(160,85%,45%);
    --nx-warn:hsl(38,85%,55%);
    --nx-danger:hsl(355,85%,55%);

    /* gradienti */
    --nx-grad-brand:linear-gradient(135deg,#4c8dff 0%,#7aa8ff 45%,#e8b44a 100%);
    --nx-grad-gold:linear-gradient(135deg,#f6d795,#c9922c);
    --nx-grad-data:linear-gradient(135deg,#4c8dff,#2a6be0);

    /* raggi, ombre, spazi */
    --nx-r-sm:4px;
    --nx-r:6px;
    --nx-r-lg:8px;
    --nx-shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --nx-shadow:0 14px 34px -10px rgba(0,0,0,.6);
    --nx-shadow-gold:0 10px 28px -10px rgba(246,177,34,.45);

    --nx-s1:4px; --nx-s2:8px; --nx-s3:12px; --nx-s4:16px;
    --nx-s5:24px; --nx-s6:32px; --nx-s7:48px; --nx-s8:64px;

    --nx-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    /* 21/10/2026 — IL TESTO E INTER (come `body{font-family:Inter}` di main.css e `--mood-font` del MOOD).
       Space Grotesk resta solo su --nx-font-display, cioe' titoli, occhielli e numeri delle metriche ✓ */
    --nx-font-display:'Space Grotesk','Inter',sans-serif;

    --nx-t:.2s cubic-bezier(.4,0,.2,1);

    /* colonna */
    --nx-col:280px;

    /* trasparenze dei medesimi colori (oro/blu/ok/errore) */
    --nx-blue-a10:rgba(28,169,237,.10);
    --nx-blue-a22:rgba(28,169,237,.22);
    --nx-blue-a35:rgba(28,169,237,.35);
    --nx-gold-a12:rgba(246,177,34,.12);
    --nx-gold-a28:rgba(246,177,34,.28);
    --nx-ok-a10:rgba(17,214,155,.10);
    --nx-ok-a22:rgba(17,214,155,.24);
    --nx-danger-a12:rgba(240,106,106,.12);
    --nx-danger-a26:rgba(240,106,106,.28);
    --nx-danger-a35:rgba(240,106,106,.35);
    --nx-warn-a10:rgba(246,177,34,.10);
    --nx-warn-a25:rgba(246,177,34,.25);
    --nx-hover:rgba(255,255,255,.045);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body.nx-work{
    font-family:var(--nx-font);
    color:var(--nx-text);
    background:var(--nx-bg);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
body.nx-work a{ color:var(--nx-blue); text-decoration:none; }
::selection{ background:rgba(28,169,237,.32); color:#fff; }
:focus-visible{ outline:2px solid var(--nx-blue); outline-offset:2px; border-radius:4px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border-radius:99px; border:2px solid var(--nx-bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.16); }

/* ═══════════════════════════ APP SHELL ═══════════════════════════ */
body.nx-work .nx-app{ display:grid; grid-template-columns:var(--nx-col) minmax(0,1fr); min-height:100vh; }

/* ── colonna di lavoro (NON USATA: l'ASIDE è il NOSTRO — resta come riferimento
      nel caso in cui servisse una colonna interna più avanti) ── */
body.nx-work .nx-col{
    position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; gap:var(--nx-s4);
    padding:16px 12px;
    background:var(--nx-bg-soft);
    border-right:1px solid var(--nx-line);
    overflow-y:auto;
}

body.nx-work .nx-col-brand{
    display:flex; align-items:center; gap:10px;
    padding:2px 8px 10px;
    font-family:var(--nx-font-display); font-weight:700; font-size:.95rem;
    letter-spacing:.01em;
}
body.nx-work .nx-col-brand .mark{
    display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:var(--nx-grad-brand); color:#0b0d12; font-weight:800; font-size:.85rem;
    box-shadow:var(--nx-shadow-gold);
}

/* selettore area: Cliente · Seller · Nexus */
body.nx-work .nx-areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; background:var(--nx-surface); border:1px solid var(--nx-line); border-radius:var(--nx-r-sm); }
body.nx-work .nx-vitalis-area{
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:7px 4px; border-radius:7px; border:none; background:transparent; cursor:pointer;
    font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.02em;
    color:var(--nx-text-dim); transition:var(--nx-t);
}
body.nx-work .nx-vitalis-area:hover{ color:var(--nx-text-mid); }
body.nx-work .nx-vitalis-area.is-on{ background:rgba(246,177,34,.14); color:var(--nx-gold); box-shadow:inset 0 0 0 1px rgba(246,177,34,.35); }

body.nx-work .nx-col-group{ display:grid; gap:2px; }
body.nx-work .nx-col-label{
    padding:8px 10px 4px; font-size:.64rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--nx-text-dim);
}
body.nx-work .nx-col-item{
    position:relative;
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:9px;
    font-size:.85rem; font-weight:500; color:var(--nx-text-mid);
    transition:var(--nx-t);
}
body.nx-work .nx-col-item:hover{ background:var(--nx-surface-2); color:var(--nx-text); }
body.nx-work .nx-col-item svg{ width:16px; height:16px; flex:0 0 auto; opacity:.85; }
body.nx-work .nx-col-item.is-on{ background:var(--nx-gold-a12); color:var(--nx-gold); font-weight:600; }
body.nx-work .nx-col-item.is-on::before{
    content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
    border-radius:0 3px 3px 0; background:var(--nx-gold);
}
body.nx-work .nx-col-item .count{
    margin-left:auto; min-width:20px; padding:1px 6px; border-radius:99px;
    font-size:.68rem; font-weight:800; text-align:center;
    background:rgba(28,169,237,.16); color:var(--nx-blue);
}
body.nx-work .nx-col-item .count.is-gold{ background:rgba(246,177,34,.16); color:var(--nx-gold); }

body.nx-work .nx-col-foot{ margin-top:auto; padding:10px; border-top:1px solid var(--nx-line); font-size:.72rem; color:var(--nx-text-dim); }

/* ═══════════════════════════ TOPBAR ═══════════════════════════ */
body.nx-work .nx-top{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; gap:14px;
    padding:10px 22px;
    background:rgba(10,12,17,.82);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--nx-line);
}
body.nx-work .nx-search{
    flex:1 1 auto; max-width:460px;
    display:flex; align-items:center; gap:8px;
    height:36px; padding:0 12px;
    background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:10px;
    color:var(--nx-text-dim); font-size:.83rem; cursor:text;
}
body.nx-work .nx-search:hover{ border-color:var(--nx-line-3); }
body.nx-work .nx-search svg{ width:15px; height:15px; }
body.nx-work .nx-search .kbd{ margin-left:auto; padding:2px 7px; border-radius:5px; font-size:.68rem; font-weight:700; background:var(--nx-surface-2); border:1px solid var(--nx-line-2); }

.nx-top-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
body.nx-work .nx-ico{
    position:relative; display:grid; place-items:center;
    width:36px; height:36px;
    background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:10px;
    color:var(--nx-text-mid); cursor:pointer; transition:var(--nx-t);
}
body.nx-work .nx-ico:hover{ color:var(--nx-text); border-color:var(--nx-line-3); background:var(--nx-surface-2); }
body.nx-work .nx-ico svg{ width:16px; height:16px; }
body.nx-work .nx-ico .dot{
    position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
    background:var(--nx-gold); border:2px solid var(--nx-surface);
}
body.nx-work .nx-me{
    display:flex; align-items:center; gap:9px; padding:3px 12px 3px 3px;
    background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:99px;
    cursor:pointer; transition:var(--nx-t);
}
body.nx-work .nx-me:hover{ border-color:var(--nx-line-3); }
body.nx-work .nx-me .av{
    display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
    background:var(--nx-grad-gold); color:#14100a; font-weight:800; font-size:.78rem;
}
body.nx-work .nx-me .who{ display:flex; flex-direction:column; line-height:1.15; }
body.nx-work .nx-me .who b{ font-size:.8rem; font-weight:600; }
body.nx-work .nx-me .who span{ font-size:.68rem; color:var(--nx-text-dim); }

/* ═══════════════════════════ PAGINA ═══════════════════════════ */
.nx-page{ padding:26px clamp(16px,2.6vw,34px) 72px; max-width:1440px; }

.nx-hero{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--nx-s5);
    padding:26px 28px;
    margin-bottom: 2rem;
    border-radius:var(--nx-r-lg);
    background:
        linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)),
        radial-gradient(720px 320px at 102% -30%,rgba(28,169,237,.14),transparent 60%),
        radial-gradient(520px 300px at -8% 130%,var(--nx-gold-a12),transparent 60%),
        var(--nx-surface);
    border:1px solid var(--nx-line-2);
    box-shadow:var(--nx-shadow);
}
.nx-hero h1{
    margin:0 0 6px;
    font-family:var(--nx-font-display);
    font-size:clamp(1.5rem,1.1rem+1vw,2.05rem);
    font-weight:700; letter-spacing:-.02em; line-height:1.15;
}
.nx-hero h1 em{ font-style:normal; background:var(--nx-grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nx-hero p{ margin:0; max-width:62ch; font-size:.9rem; line-height:1.55; color:var(--nx-text-mid); }
.nx-eyebrow{
    display:inline-flex; align-items:center; gap:7px;
    margin-bottom:10px; padding:4px 11px; border-radius:99px;
    font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--nx-text-mid); background:rgba(255,255,255,.04); border:1px solid var(--nx-line-2);
}
.nx-eyebrow svg{ width:12px; height:12px; color:var(--nx-ok); }

.nx-hero-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* bottoni */
.nx-v2 .nx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    height:38px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid var(--nx-line-2);
    background: rgb(255 255 255 / 25%);
    color:var(--nx-text);
    font-family:inherit;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--nx-t);
    text-decoration:none;
    white-space:nowrap;
}
.nx-v2 .nx-btn svg{ width:14px; height:14px; }
.nx-v2 .nx-btn:hover{ background:rgba(255,255,255,.08); border-color:var(--nx-line-3); }
.nx-v2 .nx-btn.is-gold{background:#f2ae1f;border-color:transparent;color: #ffffff;box-shadow:var(--nx-shadow-gold);font-weight: 500;}
.nx-v2 .nx-btn.is-gold:hover{ background:#ffbe2e; color:#1a1206; filter:none; }
.nx-v2 .nx-btn.is-blue{ background:var(--nx-grad-data); border-color:transparent; color:#fff; box-shadow:0 8px 20px -8px rgba(28,169,237,.6); }
.nx-v2 .nx-btn.is-blue:hover{ filter:brightness(1.07); }
.nx-v2 .nx-btn.is-quiet{ background:transparent; }
.nx-v2 .nx-btn.is-sm{ height:32px; padding:0 12px; font-size:.76rem; }

/* tabs */
.nx-v2 .nx-tabs{ display:inline-flex; gap:3px; padding:4px; margin-bottom:20px; background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:var(--nx-r); }
.nx-tab{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px; border:none; border-radius:10px; background:transparent;
    font-family:inherit; font-size:.85rem; font-weight:600; color:var(--nx-text-mid);
    cursor:pointer; transition:var(--nx-t);
}
.nx-tab:hover{ color:var(--nx-text); }
.nx-tab svg{ width:15px; height:15px; }
.nx-tab.is-on{ background:rgba(246,177,34,.14); color:var(--nx-gold); box-shadow:inset 0 0 0 1px rgba(246,177,34,.3); }
.nx-tab .count{ padding:1px 6px; border-radius:99px; font-size:.66rem; font-weight:800; background:rgba(28,169,237,.16); color:var(--nx-blue); }

/* ═══════════════════════════ METRICHE ═══════════════════════════ */
/* ANTI-SBORDAMENTO (20/10/2026): con `minmax(228px,1fr)` la colonna non scende sotto 228px
   e su un telefono da 320 la griglia sborda ✗. Con `min(100%,228px)` si adatta ✓. */
.nx-metrics{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));margin-bottom: 2rem;}
.nx-metric{
    padding:18px 18px 14px;
    background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:var(--nx-r);
    transition:var(--nx-t);
}
.nx-metric:hover{ border-color:var(--nx-line-3); transform:translateY(-1px); }
.nx-metric.is-gold{ background:
    linear-gradient(180deg,rgba(246,177,34,.07),rgba(246,177,34,0) 62%), var(--nx-surface);
    border-color:rgba(246,177,34,.26); }
.nx-metric-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.nx-v2 .nx-metric-label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nx-text-dim); }
.nx-metric-ico{
    display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:var(--nx-blue-a10); color:var(--nx-blue); border:1px solid var(--nx-blue-a22);
}
.nx-metric-ico svg{ width:15px; height:15px; }
.nx-metric-ico.is-gold{ background:var(--nx-gold-a12); color:var(--nx-gold); border-color:rgba(246,177,34,.26); }
.nx-metric-val{
    font-family:var(--nx-font-display); font-size:clamp(1.8rem,1.4rem+.9vw,2.2rem);
    font-weight:700; letter-spacing:-.02em; line-height:1;
}
.nx-metric-val small{ font-size:.72em; font-weight:600; color:var(--nx-text-dim); margin-left:4px; }
.nx-metric-val.is-gold{ color:var(--nx-gold); }
.nx-metric-foot{margin-top:8px;font-size:.74rem;color:var(--nx-text-dim);gap: 7px;display: inline-flex;align-items: center;flex-wrap: wrap;}
.nx-spark{ display:block; width:100%; height:30px; margin-top:8px; opacity:.9; }

/* ═══════════════════════════ SEZIONI ═══════════════════════════ */
.nx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin: 34px 2rem 14px;}
.nx-head:first-child{ margin-top:0; }
.nx-head h2{
    display:flex; align-items:center; gap:9px; margin:0;
    font-family:var(--nx-font-display); font-size:1.16rem; font-weight:600; letter-spacing:-.01em;
}
.nx-head h2 svg{ width:17px; height:17px; color:var(--nx-gold); }
.nx-head p{ margin:5px 0 0; max-width:66ch; font-size:.86rem; line-height:1.55; color:var(--nx-text-mid); }
.nx-meta{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border-radius:99px;
    font-size:.7rem;
    font-weight:700;
    color:var(--nx-text-mid);
    background:var(--nx-surface);
    border:1px solid var(--nx-line-2);
    width: max-content;
}
.nx-meta svg{ width:12px; height:12px; }
.nx-meta.is-warn{ color:var(--nx-warn); background:var(--nx-warn-a10); border-color:var(--nx-warn-a25); }
.nx-meta.is-ok{ color:var(--nx-ok); background:var(--nx-ok-a10); border-color:rgba(17,214,155,.25); }

/* scheda "da fare" */
.nx-todo{
    padding:18px;
    background:linear-gradient(180deg,rgba(246,177,34,.055),rgba(246,177,34,0) 60%),var(--nx-surface);
    border:1px solid rgba(246,177,34,.24); border-radius:var(--nx-r);
}
.nx-todo-head{
    display:flex; align-items:center; gap:8px; margin-bottom:4px;
    font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--nx-gold);
}
.nx-todo-head svg{ width:14px; height:14px; }
.nx-todo-desc{ margin:0 0 14px; font-size:.84rem; color:var(--nx-text-mid); }
.nx-todo-item{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
    padding:12px; background:var(--nx-surface-2); border:1px solid var(--nx-line-2); border-radius:var(--nx-r-sm);
}
.nx-todo-body{ display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 280px; }
.nx-todo-thumb{
    width:56px; height:44px; border-radius:8px; flex:0 0 auto;
    display:grid; place-items:center; color:var(--nx-text-dim);
    background:linear-gradient(135deg,var(--nx-blue-a22),rgba(246,177,34,.22));
    border:1px solid var(--nx-line-2);
}
.nx-todo-thumb svg{ width:16px; height:16px; }
.nx-todo-t{ font-size:.9rem; font-weight:600; }
.nx-v2 .nx-tag{
    display:inline-block; margin-top:4px; padding:2px 8px; border-radius:99px;
    font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    background:rgba(242,180,65,.12); color:var(--nx-warn); border:1px solid rgba(242,180,65,.28);
}

/* attività */
.nx-log{ padding:16px 18px; background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:var(--nx-r); }
.nx-log-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.nx-log-head h3{ display:flex; align-items:center; gap:8px; margin:0; font-family:var(--nx-font-display); font-size:.98rem; }
.nx-log-head h3 svg{ width:16px; height:16px; color:var(--nx-blue); }
.nx-log-item{ display:flex; align-items:flex-start; gap:var(--nx-s3); padding:var(--nx-s3); border-radius:var(--nx-r-sm); }
.nx-log-b{ flex:1 1 auto; min-width:0; }
.nx-log-text{ margin:0; }
.nx-log-item > .nx-btn{ margin-left:auto; align-self:center; flex:0 0 auto; }
.nx-log-item > .nx-meta,
.nx-log-item > .nx-pill,
.nx-log-item > .nx-state{ flex:0 0 auto; align-self:center; }
.nx-log-item:hover{ background:rgba(255,255,255,.02); }
.nx-log-mark{
    display:grid; place-items:center; width:30px; height:30px; border-radius:9px; flex:0 0 auto;
    background:var(--nx-ok-a10); color:var(--nx-ok); border:1px solid var(--nx-ok-a22);
}
.nx-log-mark svg{ width:14px; height:14px; }
.nx-log-b{ display:grid; gap:3px; min-width:0; }
.nx-log-who{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.nx-log-who b{ font-size:.87rem; color:var(--nx-text); }
.nx-log-time{ font-size:.72rem; color:var(--nx-text-dim); }
.nx-log-text{
    margin:0; font-size:.82rem; line-height:1.5; color:var(--nx-text-mid);
    /* 21/10/2026 — FLEX, non grid: con il grid la pastiglia e la frase finivano
       su due righe anche quando c'era spazio. Con flex stanno in fila e vanno a capo
       solo quando serve ✓ */
    display:flex; gap:5px; flex-wrap:wrap; align-items:center;
}
.nx-pill{
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:99px; font-size:.68rem; font-weight:800;
    background:var(--nx-ok-a10); color:var(--nx-ok); border:1px solid var(--nx-ok-a22);
}
.nx-pill svg{ width:11px; height:11px; }

/* servizi */
.nx-cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
/* ── LO SPAZIO DENTRO UNA CARD (regola, 22/10/2026) ───────────────────────────
   Lo spazio lo danno TRE cose, in quest'ordine, e nessun'altra:
     1) il respiro dal bordo  → padding della card (18px)
     2) la distanza fra figli → gap del contenitore (12px)
     3) l'aria di un singolo  → margin della SUA classe, se serve
   Per questo i paragrafi hanno margin:0 e padding:0: mettere padding su
   «.nx-card p» sposta SOLO il testo dentro se stesso (disallineandolo dal
   titolo di 7px) e somma 17px al gap, lasciando buchi in ogni card del sito. */
.nx-v2 .nx-card{
    display:flex; flex-direction:column; gap:12px; padding:18px;
    background:var(--nx-surface); border:1px solid var(--nx-line-2); border-radius:var(--nx-r);
    transition:var(--nx-t);
}
.nx-v2 .nx-card:hover{ border-color:var(--nx-line-3); transform:translateY(-2px); box-shadow:var(--nx-shadow); }
.nx-v2 .nx-card.is-on{ background:linear-gradient(180deg,rgba(28,169,237,.055),rgba(28,169,237,0) 62%),var(--nx-surface); border-color:var(--nx-blue-a22); }
.nx-card-top{ display:flex; gap:11px; align-items:flex-start; }
.nx-card-ico{
    display:grid; place-items:center; width:42px; height:42px; border-radius:11px; flex:0 0 auto;
    background:var(--nx-blue-a10); color:var(--nx-blue); border:1px solid var(--nx-blue-a22);
}
.nx-card-ico svg{ width:20px; height:20px; }
.nx-v2 .nx-card.is-on .nx-card-ico{ background:var(--nx-grad-gold); color:#171207; border:none; box-shadow:var(--nx-shadow-gold); }
.nx-v2 .nx-card h3{ margin:0 0 3px; font-family:var(--nx-font-display); font-size:.98rem; font-weight:600; line-height:1.3; }
.nx-v2 .nx-card p{ margin:0; font-size:.84rem; line-height:1.3; color:var(--nx-text-mid); }
.nx-state{
    display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px;
    font-size:.63rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.nx-state svg{ width:11px; height:11px; }
.nx-state.is-active{ background:var(--nx-ok-a10); color:var(--nx-ok); border:1px solid var(--nx-ok-a22); }
.nx-state.is-locked{ background:rgba(255,255,255,.04); color:var(--nx-text-dim); border:1px solid var(--nx-line-2); }
.nx-card-foot{display:flex;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--nx-line);flex-wrap:wrap;justify-content: center;}

/* responsive */
@media (max-width:1080px){
    body.nx-work .nx-app{ grid-template-columns:1fr; }
    body.nx-work .nx-col{
        position:static; height:auto; flex-direction:row; align-items:center; gap:10px;
        overflow-x:auto; padding:10px 14px; border-right:none; border-bottom:1px solid var(--nx-line);
    }
    body.nx-work .nx-col-brand{ padding:0; }
    body.nx-work .nx-col-label, body.nx-work .nx-col-foot{ display:none; }
    body.nx-work .nx-col-group{ display:flex; gap:4px; }
    body.nx-work .nx-col-item{ white-space:nowrap; }
    body.nx-work .nx-col-item.is-on::before{ display:none; }
}
@media (max-width:720px){
    body.nx-work .nx-search{ display:none; }
    body.nx-work .nx-me .who{ display:none; }
    .nx-hero{ padding:20px; }
    .nx-page{ padding:18px 14px 60px; }
    .nx-tabs{ width:100%; }   /* la griglia mobile (in fondo) fa il resto */
}

/* ═══════════════ TESTATA: segnaposto (la testata vera è la nostra) ═══════════════ */
body.nx-work .nx-keep-header{
    display:flex; align-items:center; gap:8px;
    padding:8px 22px;
    font-size:.74rem; color:var(--nx-text-dim);
    background:rgba(255,255,255,.015);
    border-bottom:1px dashed var(--nx-line-2);
}
body.nx-work .nx-keep-header svg{ width:13px; height:13px; }
body.nx-work .nx-keep-header > span{ display:inline-flex; align-items:center; gap:7px; }

/* ═══════════════ ASIDE: segnaposto della NOSTRA colonna ═══════════════
   Non disegniamo una colonna nuova: qui c'è il nostro aside, con la sua larghezza
   vera (266–280 px), così l'impaginazione del prototipo è quella reale. */
body.nx-work .nx-keep-aside{
    position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:18px 14px;
    background:var(--nx-bg-soft);
    border-right:1px dashed var(--nx-line-2);
    text-align:center;
}
body.nx-work .nx-keep-aside > span{
    display:inline-flex; align-items:center; gap:7px;
    font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--nx-text-dim);
}
body.nx-work .nx-keep-aside > span svg{ width:14px; height:14px; }
body.nx-work .nx-keep-aside small{ font-size:.68rem; line-height:1.5; color:var(--nx-text-dim); opacity:.8; }

@media (max-width:1080px){
    body.nx-work .nx-keep-aside{
        position:static; height:auto; flex-direction:row; justify-content:flex-start;
        padding:10px 14px; border-right:none; border-bottom:1px dashed var(--nx-line-2);
    }
    body.nx-work .nx-keep-aside small{ display:none; }
}

/* ═══════════════ OGGI ═══════════════ */
.nx-today{
    display:grid;
    gap:14px;
    padding:16px 18px;
    background:var(--nx-surface);
    border:1px solid var(--nx-line-2);
    border-radius:var(--nx-r);
    margin-bottom: 2rem;
}
.nx-today-title{
    display:flex; align-items:center; gap:8px;
    font-family:var(--nx-font-display); font-size:.98rem; font-weight:600;
}
.nx-today-title svg{ width:16px; height:16px; color:var(--nx-gold); }
.nx-today-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom: var(--nx-s2);}
.nx-today-item{
    /* 21/10/2026 — il titolo va su una riga sua e l'icona si allinea alla PRIMA riga:
       con `align-items:center` l'icona galleggiava a metà del paragrafo e «Titolo descrizione»
       scorreva come un muro di testo ✗ */
    display:flex; align-items:flex-start; gap:11px;
    padding:12px 14px; border-radius:var(--nx-r-sm);
    background:var(--nx-surface-2); border:1px solid var(--nx-line);
    font-size:.82rem; line-height:1.5; color:var(--nx-text-mid);
    text-decoration:none;
    transition:var(--nx-t);
}
.nx-today-item:hover{
    border-color:var(--nx-line-3); color:var(--nx-text);
    background:var(--nx-surface); transform:translateY(-1px);
}
.nx-today-item:focus-visible{ outline:2px solid var(--nx-blue); outline-offset:2px; }
.nx-today-item b{
    display:block; margin-bottom:2px;
    font-weight:700; line-height:1.35; color:var(--nx-text);
}
.nx-today-item.is-gold{ background:rgba(246,177,34,.08); border-color:rgba(246,177,34,.22); }
.nx-today-item.is-gold b{ color:var(--nx-gold); }
.nx-today-ico{
    display:grid; place-items:center; width:30px; height:30px; border-radius:8px; flex:0 0 auto;
    background:var(--nx-blue-a10); color:var(--nx-blue); border:1px solid rgba(28,169,237,.20);
}
.nx-today-ico svg{ width:15px; height:15px; }
.nx-today-item.is-gold .nx-today-ico{ background:var(--nx-gold-a12); color:var(--nx-gold); border-color:var(--nx-gold-a28); }

.nx-today-prof{ display:flex; align-items:center; gap:10px; font-size:.76rem; color:var(--nx-text-dim); }
.nx-today-prof b{ color:var(--nx-text); }
.nx-today-prof a{ color:var(--nx-blue); font-weight:600; }
.nx-bar{ flex:1 1 auto; height:6px; max-width:220px; border-radius:99px; background:var(--nx-surface-3); overflow:hidden; }
.nx-bar span{ display:block; height:100%; border-radius:99px; background:var(--nx-grad-gold); }

/* ═══════════════ TELEFONO ═══════════════ */
/* ═══════════════ TEMA CHIARO (obbligatorio: si accende dalla nav standard) ═══════════════
   Stessi nomi di token, valori chiari. Il resto del CSS non cambia una riga. */
[data-theme="light"]{
    color-scheme:light;

    --nx-bg:#f4f6fb;
    --nx-bg-soft:#ffffff;
    --nx-surface:#ffffff;
    --nx-surface-2:#f2f5fa;
    --nx-surface-3:#e6ebf3;

    --nx-line:rgba(16,26,43,.07);
    --nx-line-2:rgba(16,26,43,.13);
    --nx-line-3:rgba(16,26,43,.24);

    --nx-text:#0f1a2b;
    --nx-text-mid:#46536a;
    --nx-text-dim:#75808f;

    --nx-gold:#b8791a;          /* più scuro: leggibile sul bianco */
    --nx-gold-deep:#8a5c12;
    --nx-blue:#1a7fbf;
    --nx-blue-deep:#1f4fb0;

    --nx-ok:#11996a;
    --nx-warn:#b8791a;
    --nx-danger:#c8403f;

    --nx-grad-gold:linear-gradient(135deg,#f0c76b,#b47f1f);
    --nx-grad-data:linear-gradient(135deg,#3e7bf0,#2455b8);
    --nx-grad-brand:linear-gradient(135deg,#3e7bf0 0%,#6f9cf7 45%,#c9922c 100%);

    --nx-shadow-sm:0 2px 8px rgba(16,26,43,.06);
    --nx-shadow:0 12px 28px -12px rgba(16,26,43,.18);
    --nx-shadow-gold:0 8px 20px -10px rgba(184,121,26,.35);

    --nx-hover:rgba(16,26,43,.05);}

[data-theme="light"] body.nx-work{ background:var(--nx-bg); }
[data-theme="light"] ::selection{ background:rgba(44,102,217,.18); color:#0f1a2b; }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:rgba(16,26,43,.14); border-color:var(--nx-bg); }

.nx-btn{
    display: flex;
    padding: 2px 12px;
    align-items: center;
    border-radius: 9px;
}
[data-theme="light"] .nx-btn:not(.is-gold):not(.is-blue):not(.is-quiet):not(.nx-btn--primary):not(.nx-btn-primary){background: rgb(255 235 59 / 52%);}
[data-theme="light"] .nx-btn:not(.is-gold):not(.is-blue):not(.is-quiet):not(.nx-btn--primary):not(.nx-btn-primary):hover{ background:rgba(16,26,43,.07); }
[data-theme="light"] .nx-btn.is-gold{background: rgb(36 36 229);color: #ffffff;}
[data-theme="light"] .nx-btn.is-blue{ background:var(--nx-grad-data); color:#fff; }
[data-theme="light"] body.nx-work .nx-keep-header{ background:rgba(16,26,43,.022); }
[data-theme="light"] .nx-log-item:hover{ background:rgba(16,26,43,.03); }
[data-theme="light"] body.nx-work .nx-areas{ background:var(--nx-surface-2); }
[data-theme="light"] .nx-state.is-locked{ background:rgba(16,26,43,.04); }
[data-theme="light"] .nx-eyebrow{ background:rgba(16,26,43,.03); }

[data-theme="light"] .nx-hero{
    background:
        radial-gradient(720px 320px at 102% -30%,rgba(44,102,217,.09),transparent 62%),
        radial-gradient(520px 300px at -8% 130%,rgba(184,121,26,.07),transparent 62%),
        var(--nx-surface);
}
[data-theme="light"] .nx-metric.is-gold{
    background:linear-gradient(180deg,rgba(184,121,26,.06),rgba(184,121,26,0) 62%),var(--nx-surface);
}
[data-theme="light"] .nx-todo{
    background:linear-gradient(180deg,rgba(184,121,26,.05),rgba(184,121,26,0) 60%),var(--nx-surface);
}
[data-theme="light"] .nx-card.is-on{
    background:linear-gradient(180deg,rgba(44,102,217,.05),rgba(44,102,217,0) 62%),var(--nx-surface);
}
[data-theme="light"] body.nx-work .nx-col-item.is-on{ background:rgba(184,121,26,.09); }
[data-theme="light"] body.nx-work .nx-vitalis-area.is-on{ background:rgba(184,121,26,.10); }
[data-theme="light"] .nx-tab.is-on{ background:rgba(184,121,26,.10); }
[data-theme="light"] body.nx-work .nx-me .av{ color:#fff; }
[data-theme="light"] body.nx-work .nx-col-brand .mark{ color:#fff; }
[data-theme="light"] .nx-card.is-on .nx-card-ico{ color:#fff; }

/* pulsante tema dentro la nav */
body.nx-work .nx-keep-header{ justify-content:space-between; }
body.nx-work .nx-theme{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; border-radius:8px;
    background:transparent; border:1px solid var(--nx-line-2);
    color:var(--nx-text-mid); font-family:inherit; font-size:.72rem; font-weight:600;
    cursor:pointer; transition:var(--nx-t);
}
body.nx-work .nx-theme:hover{ color:var(--nx-text); border-color:var(--nx-line-3); }
body.nx-work .nx-theme svg{ width:13px; height:13px; }
body.nx-work .nx-theme .i-sun{ display:none; }
[data-theme="light"] body.nx-work .nx-theme .i-sun{ display:inline-block; }
[data-theme="light"] body.nx-work .nx-theme .i-moon{ display:none; }
@media (max-width:720px){ .nx-theme span{ display:none; } }

/* ═══════════════ TELEFONO ═══════════════ */
@media (max-width:720px){
    body.nx-work .nx-col{ padding:8px 10px; }
    body.nx-work .nx-col-brand{ font-size:.86rem; }
    body.nx-work .nx-col-brand .mark{ width:26px; height:26px; }
    body.nx-work .nx-col-item{ padding:8px; font-size:.8rem; }
    body.nx-work .nx-col-item .count{ display:none; }
    body.nx-work .nx-areas{ display:none; }            /* l'area si sceglie dalla testata, non qui */
    body.nx-work .nx-keep-header{ padding:7px 14px; font-size:.7rem; }
    .nx-hero{ padding:18px 16px; border-radius:16px; }
    .nx-hero h1{ font-size:1.34rem; line-height:1.2; }
    .nx-hero p{ font-size:.84rem; }
    .nx-hero-actions{ width:100%; }
    .nx-hero-actions .nx-btn{ flex:1 1 auto; justify-content:center; }
    .nx-today{ padding:14px; }
    .nx-today-grid{ grid-template-columns:1fr 1fr; }
    .nx-today-item{ font-size:.76rem; padding:9px 10px; }
    .nx-today-prof{ flex-wrap:wrap; }
    .nx-bar{ max-width:100%; order:3; flex-basis:100%; }
    .nx-metrics{ grid-template-columns:1fr; gap:10px; }
    .nx-metric{ padding:14px; }
    .nx-metric-val{ font-size:1.9rem; }
    .nx-spark{ height:26px; }
    .nx-head{ margin:26px 0 12px; }
    .nx-head h2{ font-size:1.05rem; }
    .nx-todo{ padding:14px; }
    .nx-todo-body{ flex:1 1 50px; gap:9px; }
    .nx-todo-item{ flex-direction:column; align-items:stretch; }
    .nx-todo-item .nx-hero-actions{ width:100%; }
    .nx-todo-item .nx-btn{ flex:1 1 auto; justify-content:center; }
    .nx-cards{ grid-template-columns:1fr; }
    .nx-log{ padding:14px; }
    .nx-log-item{ padding:8px 0; }
}

/* quando la pagina sta DENTRO il nostro layout (dash-main): niente doppio margine */
/* 20/10/2026 — LARGHEZZA STANDARD = 1400px, come la Dashboard ✓.
   Prima: padding 0 e max-width:none → la pagina si allargava fino a 1480 di `.layout-container` ✗
   («max-width devi usare il modo standard 1400 px come in dashboard»).
   Ora il tetto è dichiarato QUI, nel modulo, così vale anche se un altro foglio
   caricato dopo prova ad allargarla ✓. Sulla dashboard non cambia niente: il padre
   `.nx-app-workspace > *` la fermava già a 1400 ✓. */
.nx-page--inside{ padding:0; max-width:1400px; margin-left:auto; margin-right:auto; }

/* descrizione della scheda servizio: massimo 2 righe, poi «Leggi tutto» apre la skill */
.nx-card-desc{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.nx-card-more{
    display:inline-flex; align-items:center; gap:4px; margin-top:-4px;
    font-size:.78rem; font-weight:700; color:var(--nx-blue); text-decoration:none;
}
.nx-card-more:hover{ text-decoration:underline; }
.nx-card-more::after{ content:'→'; }

/* ═══════════════ TAB SU TELEFONO — SCROLL ORIZZONTALE (20/10/2026) ═══════════════
   Una riga sola, si scorre col dito. Le tab NON si schiacciano (flex:0 0 auto),
   non vanno a capo (nowrap) e lo scorrimento si aggancia (scroll-snap).
   La sfumatura a destra è l'unico indizio che "c'è altro": senza, sembra finita. */
@media (max-width:720px){
    .nx-tabs{
        display:flex; flex-wrap:nowrap; align-items:stretch; gap:4px;
        width:100%; padding:5px;
        overflow-x:auto; overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        scrollbar-width:none;                 /* Firefox */
        -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
        mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
    }
    .nx-tabs::-webkit-scrollbar{ display:none; height:0; }   /* Chrome / Safari */
    .nx-tab{
        flex:0 0 auto;                         /* niente compressione */
        white-space:nowrap;
        min-height:44px;                       /* bersaglio da dito */
        scroll-snap-align:start;
        padding:10px 14px;
        font-size:.8rem;
    }
    .nx-tab svg{ flex:0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LISTA A COLONNE (`nx-log is-tabella`) — 20/10/2026
   Segnalato: «tutto spazio morto a destra» ✗. La voce di `nx-log` è pensata per
   l'attività (una colonna stretta); un registro di persone dentro una scheda da
   1400 px lasciava 1000 px vuoti. Qui la stessa lista diventa una TABELLA vera:
   iniziale · nome · email · data · stato, con le colonne che si dividono lo spazio ✓.
   ═══════════════════════════════════════════════════════════════════════════════ */
.nx-log.is-tabella .nx-log-testa,
.nx-log.is-tabella .nx-log-item{
    display:grid;
    grid-template-columns:36px minmax(150px,1fr) minmax(200px,1.5fr) 110px 118px;
    grid-template-areas:"ico nome mail data stato";
    align-items:center;
    gap:16px;
}
/* le cinque celle, nominate: ai punti di rottura cambia solo la disposizione ✓ */
.nx-log.is-tabella .nx-log-mark{ grid-area:ico; }
.nx-log.is-tabella .nx-riga-nome{ grid-area:nome; }
.nx-log.is-tabella .nx-riga-mail{ grid-area:mail; }
.nx-log.is-tabella .nx-riga-data{ grid-area:data; }
.nx-log.is-tabella .nx-log-item > .nx-meta,
.nx-log.is-tabella .nx-log-item > .nx-state{ grid-area:stato; }
.nx-log.is-tabella .nx-log-testa{
    padding:0 10px 9px;
    margin-bottom:2px;
    border-bottom:1px solid var(--nx-line-2);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--nx-text-dim);
}
.nx-log.is-tabella .nx-log-item{
    padding:11px 10px;
    border-bottom:1px solid var(--nx-line);
}
.nx-log.is-tabella .nx-log-item:last-child{ border-bottom:0; }
.nx-log.is-tabella .nx-log-item:hover{ background:var(--nx-hover); }
.nx-log.is-tabella .nx-log-mark{
    width:34px; height:34px; border-radius:10px;
    font-size:.8rem; font-weight:800;
}
.nx-log.is-tabella .nx-riga-nome{
    font-size:.88rem; font-weight:700; color:var(--nx-text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nx-log.is-tabella .nx-riga-mail{
    font-size:.82rem; color:var(--nx-text-mid);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nx-log.is-tabella .nx-riga-data{
    font-size:.78rem; color:var(--nx-text-dim);
    font-variant-numeric:tabular-nums;
}
.nx-log.is-tabella .nx-state,
.nx-log.is-tabella .nx-meta{ justify-self:start; }/* ── RESPONSIVE (20/10/2026) ──────────────────────────────────────────────────
   Tre misure, tutte verificate sui numeri delle colonne:
   ≥1101 cinque colonne · 641–1100 due righe · ≤640 elenco in colonna */
@media (max-width:1100px){
    .nx-log.is-tabella .nx-log-testa{ display:none; }
    .nx-log.is-tabella .nx-log-item{
        grid-template-columns:36px minmax(0,1fr) auto;
        grid-template-areas:
            "ico nome stato"
            "ico mail data";
        row-gap:4px;
        padding:11px 8px;
    }
}

@media (max-width:640px){
    .nx-log.is-tabella{ padding:14px 12px; }
    .nx-log.is-tabella .nx-log-head{ flex-wrap:wrap; gap:6px; margin-bottom:10px; }
    .nx-log.is-tabella .nx-log-item{
        grid-template-columns:32px minmax(0,1fr);
        grid-template-areas:
            "ico nome"
            "ico mail"
            "ico data"
            "ico stato";
        row-gap:3px;
        padding:12px 6px;
    }
    .nx-log.is-tabella .nx-log-mark{ align-self:start; width:30px; height:30px; border-radius:9px; }
    .nx-log.is-tabella .nx-riga-nome,
    .nx-log.is-tabella .nx-riga-mail{ white-space:normal; overflow-wrap:anywhere; }
}

/* righe cliccabili → profilo pubblico (20/10/2026)
   `.nx-log-item` diventa un <a>: resta una griglia, ma senza sottolineatura e con il fuoco visibile ✓ */
.nx-log.is-tabella a.nx-log-item{ color:inherit; text-decoration:none; cursor:pointer; }
.nx-log.is-tabella a.nx-log-item:focus-visible{ outline:2px solid var(--nx-blue); outline-offset:-2px; border-radius:10px; }

/* foto nelle schede e link-scheda (20/10/2026) — servono alla Cronologia */
.nx-v2 .nx-card.nx-card--link{ color:inherit; text-decoration:none; }
.nx-foto{
    display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
    border-radius:calc(var(--nx-r) - 6px);
    background:var(--nx-surface-2);
}
.nx-card-foot .nx-meta{ font-weight:700; }

/* ═══ CAMPI, STATI VUOTI, CENTRATURE — solo token (20/10/2026) ═══════════════════
   Regola d'oro: NIENTE valori in linea nelle pagine. Se serve un pezzo, sta qui ✓
   e usa i var(--nx-*) come fa la Panoramica v2 ✓. */
.nx-campo{
    width:100%; box-sizing:border-box;
    padding:calc(var(--nx-s1) * 2.5) calc(var(--nx-s1) * 3);
    border:1px solid var(--nx-line-2); border-radius:var(--nx-r-sm);
    background:var(--nx-bg); color:var(--nx-text);
    font:inherit; font-size:.82rem;
}
.nx-campo:focus{ outline:2px solid var(--nx-blue); outline-offset:-2px; }

.nx-log-vuoto{
    margin:0;
    padding:var(--nx-s1) calc(var(--nx-s1) * 2.5) calc(var(--nx-s1) * 2.5);
    font-size:.82rem; line-height:1.5; color:var(--nx-text-mid);
}

.nx-centro{ display:flex; align-items:center; justify-content:center; }

/* il QR deve restare su fondo BIANCO anche nel tema scuro, altrimenti non si legge ✓ */
.nx-qr{
    width:clamp(120px, 32vw, 150px); aspect-ratio:1;
    padding:var(--nx-s1); border-radius:var(--nx-r-sm);
    background:#ffffff;
}

/* distanza fra un blocco e il successivo — classe dedicata, niente margini in linea ✓
   (non uso `.nx-cards{margin-bottom}` perché nella Panoramica v2 la distanza la dà `.nx-head`) */
.nx-blocco{ margin-bottom: var(--nx-s6); }

/* dentro le schede: niente troncature strane e icone piccole allineate al testo ✓ */
.nx-min{ min-width:0; }
.nx-card-desc svg{ width:12px; height:12px; vertical-align:-1px; color:var(--nx-text-dim); }

/* ═══ BARRE E AREE — per «Presenze e attività» (20/10/2026) ═══════════════════════
   Tutto con i token: altezze, spazi e colori vengono da var(--nx-*), non da numeri inventati. */
.nx-rail{
    height:var(--nx-s1); margin-top:var(--nx-s3);
    border-radius:99px; background:var(--nx-line-2); overflow:hidden;
}
.nx-rail-fill{ height:100%; border-radius:99px; background:var(--nx-grad-brand); }

.nx-vitalis-aree{ display:grid; gap:0; }
.nx-vitalis-area{
    display:grid; grid-template-columns:minmax(120px,1fr) auto;
    gap:var(--nx-s2) var(--nx-s4); align-items:center;
    padding:var(--nx-s3) 0; border-bottom:1px solid var(--nx-line);
}
.nx-vitalis-area:last-child{ border-bottom:0; }
.nx-vitalis-area-nome{ font-size:.86rem; font-weight:600; color:var(--nx-text); }
.nx-vitalis-area-perc{ font-size:.82rem; font-weight:800; color:var(--nx-blue); font-variant-numeric:tabular-nums; }
.nx-vitalis-area .nx-rail{ grid-column:1 / -1; margin-top:0; }
.nx-vitalis-area-tempo{ grid-column:1 / -1; font-size:.74rem; color:var(--nx-text-dim); }

/* TITOLO SU UNA RIGA, stile marketplace (20/10/2026)
   Segnalato: «va su due righe con i tre puntini in stile marketplace… non è un sito di notizie».
   Le schede di una vetrina devono restare allineate e leggibili a colpo d'occhio: il titolo
   sta su UNA riga con ellissi ✓ e il testo intero resta nel `title` del collegamento ✓.
   (Non uso `-webkit-line-clamp`: è proprio quello che produceva le due righe col «…» ✗.) */
.nx-v2 .nx-card.nx-card--link h3{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.nx-v2 .nx-card.nx-card--link .nx-card-desc{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    -webkit-line-clamp:unset; -webkit-box-orient:initial;
}

/* ═══ PAGINA INTERA IN v2 (`nx-v2-body`) — 20/10/2026 ═════════════════════════════
   `/payment/acquisti` mostrava titoli NERI su fondo NERO: la pagina caricava ANCHE il vecchio
   `nx-acquisto.css` (palette sua + prefers-color-scheme) mentre i testi si coloravano col `body`.
   Qui la pagina è autosufficiente: fondo, testo e barra vengono TUTTI dai token v2 ✓ */
.nx-v2-body{
    margin:0;
    background:var(--nx-bg);
    color:var(--nx-text);
    font-family:var(--nx-font);
    min-height:100vh;
}
.nx-v2-body a{ color:var(--nx-blue); text-decoration:none; }

.nx-barra{
    display:flex; align-items:center; justify-content:space-between; gap:var(--nx-s4);
    padding:calc(var(--nx-s3) + var(--nx-s1)) clamp(var(--nx-s4), 3vw, var(--nx-s6));
    background:var(--nx-surface);
    border-bottom:1px solid var(--nx-line-2);
}
.nx-barra-marchio{
    font-family:var(--nx-font-display); font-size:.95rem; font-weight:800;
    letter-spacing:-.01em; color:var(--nx-text);
}
.nx-barra-marchio span{ font-weight:400; color:var(--nx-text-mid); margin-left:var(--nx-s1); }
.nx-barra-link{
    display:inline-flex; align-items:center; gap:var(--nx-s1);
    font-size:.82rem; font-weight:600; color:var(--nx-text-mid);
}
.nx-barra-link:hover{ color:var(--nx-gold); }

@media (max-width:640px){
    .nx-barra{ padding:var(--nx-s3) var(--nx-s4); }
    .nx-barra-marchio{ font-size:.86rem; }
    .nx-barra-link span{ display:none; }   /* resta la freccia */
}

/* numeri e pastiglie composti bene (20/10/2026) — «3h 0m75%» era attaccato ✗ */
.nx-metric-val small{ margin-left:var(--nx-s1); }
.nx-metric-val{ font-variant-numeric:tabular-nums; }
.nx-log.is-tabella .nx-riga-data{ text-align:right; }
.nx-log.is-tabella .nx-log-testa span:nth-child(4){ text-align:right; }
.nx-log.is-tabella .nx-log-item > .nx-meta,
.nx-log.is-tabella .nx-log-item > .nx-pill,
.nx-log.is-tabella .nx-log-item > .nx-state{ justify-self:end; text-align:center; min-width:7.5em; }

/* TABELLA DEI PERIODI (`nx-log is-tabella is-periodi`) — 20/10/2026
   Segnalato: «le tabelle sono fatte male». Le colonne generiche (pensate per nome/email) davano
   troppo spazio al tempo e allineavano male i numeri. Qui le misure sono per i periodi ✓ */
.nx-log.is-tabella.is-periodi .nx-log-testa,
.nx-log.is-tabella.is-periodi .nx-log-item{
    /* 20/10/2026 — «tra tempo totale e livello di attenzione c'è così tanto spazio che ci passa
       una nav» ✗: le colonne con larghezza fissa lasciavano vuoto dentro la colonna del tempo.
       Ora le colonne si misurano sul contenuto (max-content) e partono da sinistra ✓ */
    grid-template-columns:36px max-content max-content max-content max-content;
    justify-content:start;
    column-gap:var(--nx-s6);
}
.nx-log.is-tabella.is-periodi .nx-riga-mail{ text-align:right; font-variant-numeric:tabular-nums; }
.nx-log.is-tabella.is-periodi .nx-riga-data{ text-align:center; }
.nx-log.is-tabella.is-periodi .nx-log-testa span:nth-child(3){ text-align:right; }
.nx-log.is-tabella.is-periodi .nx-log-testa span:nth-child(4){ text-align:center; }

@media (max-width:1100px){
    .nx-log.is-tabella.is-periodi .nx-log-item{
        grid-template-columns:36px minmax(0,1fr) auto;
        grid-template-areas:"ico nome stato" "ico mail stato";
    }
}
@media (max-width:640px){
    .nx-log.is-tabella.is-periodi .nx-log-item{
        grid-template-columns:32px minmax(0,1fr);
        grid-template-areas:"ico nome" "ico mail" "ico data" "ico stato";
    }
    .nx-log.is-tabella.is-periodi .nx-riga-mail{ text-align:left; }
}

/* l'introduzione della scheda Promozioni (20/10/2026) */
.nx-promo-intro{ margin-bottom:var(--nx-s6); }
.nx-promo-intro .nx-today{ margin-bottom:0; }

/* ═══ TABELLA VERA (`nx-tabella`) — 20/10/2026 ═════════════════════════════════════
   Segnalato: «se non è una tabella non va trattata come tabella … i contenuti li vedo
   raggruppati a sinistra». Giusto: `nx-log` è un elenco, non una tabella. Per i dati
   tabellari ora c'è una <table> vera: colonne distribuite, intestazioni allineate,
   numeri a destra con cifre tabellari ✓ */
.nx-pannello{
    background:var(--nx-surface);
    border:1px solid var(--nx-line-2);
    border-radius:var(--nx-r);
    padding: var(--nx-s5) var(--nx-s5) var(--nx-s5);
}
.nx-pannello .nx-log-head{ margin-bottom:var(--nx-s3); }
.nx-tabella-wrap{ overflow-x:auto; }
.nx-tabella{ width:100%; border-collapse:collapse; font-size:.86rem; }
.nx-tabella th{
    text-align:left; white-space:nowrap;
    padding:var(--nx-s2) var(--nx-s3);
    border-bottom:1px solid var(--nx-line-2);
    font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    color:var(--nx-text-dim);
}
.nx-tabella td{
    padding:var(--nx-s3);
    border-bottom:1px solid var(--nx-line);
    color:var(--nx-text-mid);
    vertical-align:middle;
}
.nx-tabella td strong.nx-text-primary{
    display: block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-tabella tbody tr:last-child td{ border-bottom:0; }
.nx-tabella tbody tr:hover{ background:var(--nx-hover); }
.nx-tabella td:first-child{ color:var(--nx-text); font-weight:600; }
.nx-tabella .is-num{ text-align:right; font-variant-numeric:tabular-nums; color:var(--nx-text); font-weight:600; }

@media (max-width:640px){
    .nx-pannello{ padding:var(--nx-s3) var(--nx-s3) var(--nx-s1); }
    .nx-tabella th, .nx-tabella td{ padding:var(--nx-s2); font-size:.8rem; }
}

/* ═══ SCHEDA PROMOZIONI in v2 (`nx-v2`) — 20/10/2026 ══════════════════════════════
   Segnalato: «?tab=promo è un mix, non è ottimizzata al nuovo stile».
   I moduli e il Radar usavano classi vecchie (nx-promo-*, nx-app-table, btn-primary).
   Qui quelle classi, DENTRO una sezione v2, prendono l'aspetto del nuovo sistema:
   stesse superfici, stessi bordi, stesse pastiglie ✓. Il markup dei moduli resta
   identico (campi, action e JS non si toccano). */
.nx-promo-cards{
    display:grid; gap:var(--nx-s4);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
    margin-bottom:var(--nx-s5);
    align-items:start;
}

/* schede */
.nx-v2 .nx-promo-creation-card,
.nx-v2 .nx-coupon-generator-card{
    display:flex; flex-direction:column; gap:var(--nx-s3);
    padding:var(--nx-s4);
    background:var(--nx-surface);
    border:1px solid var(--nx-line-2);
    border-radius:var(--nx-r);
}
.nx-v2 .nx-promo-radar-card{
    padding:var(--nx-s4) var(--nx-s4) var(--nx-s2);
    background:var(--nx-surface);
    border:1px solid var(--nx-line-2);
    border-radius:var(--nx-r);
}
.nx-v2 .nx-promo-creation-card .nx-app-card-header,
.nx-v2 .nx-coupon-generator-card .nx-app-card-header,
.nx-v2 .nx-promo-radar-card .nx-app-card-header{
    display:flex; flex-direction:column; gap:var(--nx-s1);
    padding:0; margin:0 0 var(--nx-s2); background:none; border:0;
}
.nx-v2 .nx-promo-creation-card .nx-app-card-title,
.nx-v2 .nx-coupon-generator-card .nx-app-card-title,
.nx-v2 .nx-promo-radar-card .nx-app-card-title{
    display:flex; align-items:center; gap:var(--nx-s2); margin:0;
    font-family:var(--nx-font-display); font-size:.98rem; font-weight:600; color:var(--nx-text);
}
.nx-v2 .nx-protocol-description{ margin:0; font-size:.84rem; line-height:1.55; color:var(--nx-text-mid); }

/* campi */
.nx-v2 .nx-promo-creation-card .nx-app-form-group,
.nx-v2 .nx-coupon-generator-card .nx-app-form-group{ display:grid; gap:var(--nx-s1); }
.nx-v2 .nx-promo-creation-card .nx-app-item-label,
.nx-v2 .nx-coupon-generator-card .nx-app-item-label{
    font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--nx-text-dim);
}
.nx-v2 .nx-promo-creation-card .nx-promo-field,
.nx-v2 .nx-coupon-generator-card .nx-promo-field,
.nx-v2 .nx-promo-creation-card .nx-elite-select,
.nx-v2 .nx-coupon-generator-card .nx-elite-select{
    width:100%; box-sizing:border-box;
    padding:calc(var(--nx-s1) * 2.5) calc(var(--nx-s1) * 3);
    border:1px solid var(--nx-line-2); border-radius:var(--nx-r-sm);
    background:var(--nx-bg); color:var(--nx-text); font:inherit; font-size:.82rem;
}
.nx-v2 .nx-promo-field:focus,
.nx-v2 .nx-elite-select:focus{ outline:2px solid var(--nx-blue); outline-offset:-2px; }
.nx-v2 .nx-promo-form-row{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--nx-s3);
}
.nx-v2 .promo-creation-actions{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:var(--nx-s3); margin-top:var(--nx-s2); flex-wrap:wrap;
}

/* pulsanti di questi due moduli */
.nx-v2 .nx-promo-creation-card .btn-primary,
.nx-v2 .nx-promo-creation-card .btn-gold,
.nx-v2 .nx-coupon-generator-card .btn-primary,
.nx-v2 .nx-coupon-generator-card .btn-gold{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--nx-s2);
    width:100%; padding:calc(var(--nx-s1) * 3) var(--nx-s4);
    border:0; border-radius:var(--nx-r-sm); cursor:pointer;
    font-size:.86rem; font-weight:800; color:#171207;
    background:var(--nx-grad-gold); box-shadow:var(--nx-shadow-gold);
}
.nx-v2 .nx-promo-creation-card .btn-primary:hover,
.nx-v2 .nx-coupon-generator-card .btn-gold:hover{ filter:brightness(1.06); }

/* Radar: tabella vera con lo stile del modulo */
.nx-v2 .data-table-container{ overflow-x:auto; }
.nx-v2 .nx-app-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.nx-v2 .nx-app-table th{
    text-align:left; white-space:nowrap; padding:var(--nx-s2) var(--nx-s3);
    border-bottom:1px solid var(--nx-line-2);
    font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--nx-text-dim);
}
.nx-v2 .nx-app-table td{ padding:var(--nx-s3); border-bottom:1px solid var(--nx-line); color:var(--nx-text-mid); }
.nx-v2 .nx-app-table tbody tr:last-child td{ border-bottom:0; }
.nx-v2 .nx-app-table tbody tr:hover{ background:var(--nx-hover); }

/* pastiglie e codici dentro il Radar */
.nx-v2 .nx-promo-code{
    display:inline-block; padding:var(--nx-s1) var(--nx-s2); border-radius:var(--nx-r-sm);
    background:var(--nx-surface-2); border:1px dashed var(--nx-line-3);
    font-family:ui-monospace, monospace; font-size:.78rem; color:var(--nx-text); cursor:pointer;
}
.nx-v2 .nx-promo-discount-badge{
    display:inline-block; padding:2px var(--nx-s2); border-radius:99px;
    background:var(--nx-gold-a12); border:1px solid var(--nx-gold-a28);
    color:var(--nx-gold); font-size:.72rem; font-weight:800;
}
.nx-v2 .nx-beneficiary-tag{
    display:inline-flex; align-items:center; gap:var(--nx-s1);
    font-size:.76rem; color:var(--nx-text-mid);
}
.nx-v2 .nx-status-pill{
    display:inline-flex; align-items:center; gap:4px;
    padding:2px var(--nx-s2); border-radius:99px;
    font-size:.63rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.nx-v2 .nx-status-pill.is-gold{ background:var(--nx-gold-a12); color:var(--nx-gold); border:1px solid var(--nx-gold-a28); }
.nx-v2 .nx-status-pill.is-sky,
.nx-v2 .nx-status-pill.is-success{ background:var(--nx-ok-a10); color:var(--nx-ok); border:1px solid var(--nx-ok-a22); }
.nx-v2 .nx-status-pill.is-error{ background:var(--nx-danger-a12); color:var(--nx-danger); border:1px solid var(--nx-danger-a26); }
.nx-v2 .nx-promo-action-group{ display:flex; gap:var(--nx-s1); justify-content:flex-end; }
.nx-v2 .nx-edit-trigger,
.nx-v2 .nx-revoke-trigger{
    display:grid; place-items:center; width:30px; height:30px;
    border-radius:var(--nx-r-sm); border:1px solid var(--nx-line-2);
    background:var(--nx-surface-2); color:var(--nx-text-mid); cursor:pointer;
}
.nx-v2 .nx-edit-trigger:hover{ color:var(--nx-blue); border-color:var(--nx-blue-a35); }
.nx-v2 .nx-revoke-trigger:hover{ color:var(--nx-danger); border-color:var(--nx-danger-a35); }

@media (max-width:640px){
    .nx-v2 .nx-promo-form-row{ grid-template-columns:1fr; }
    .nx-v2 .promo-creation-actions{ flex-direction:column; align-items:stretch; }
}

/* pezzi che servono ai moduli (promo e non solo) — tutti con i token ✓ */
.nx-card-head{display:grid;gap:var(--nx-s1);margin-bottom: var(--nx-s5);}
.nx-card-head h3{
    display:flex; align-items:center; gap:var(--nx-s2); margin:0;
    font-family:var(--nx-font-display); font-size:.98rem; font-weight:600; color:var(--nx-text);
}
.nx-card-head p{ margin:0; font-size:.84rem; line-height:1.55; color:var(--nx-text-mid); }

.nx-campo-gruppo{ display:grid; gap:var(--nx-s1); margin-bottom:var(--nx-s3); }
.nx-campo-label{
    font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--nx-text-dim);
}
.nx-campo-riga{display:grid;grid-template-columns:1fr 1fr;gap:var(--nx-s3);align-items: baseline;}
.nx-code{
    display:inline-block; padding:var(--nx-s1) var(--nx-s2); border-radius:var(--nx-r-sm);
    background:var(--nx-surface-2); border:1px dashed var(--nx-line-3);
    font-family:ui-monospace, monospace; font-size:.76rem; color:var(--nx-text); cursor:pointer;
    white-space:nowrap;
}
.nx-clamp-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:.84rem; line-height:1.45; color:var(--nx-text-mid);
}
.nx-azioni{ display:flex; gap:var(--nx-s1); justify-content:flex-end; }
.nx-ico-btn{
    display:grid; place-items:center; width:30px; height:30px; cursor:pointer;
    border-radius:var(--nx-r-sm); border:1px solid var(--nx-line-2);
    background:var(--nx-surface-2); color:var(--nx-text-mid);
}
.nx-ico-btn svg{ width:14px; height:14px; }
.nx-ico-btn:hover{ color:var(--nx-blue); border-color:var(--nx-blue-a35); }
.nx-ico-btn.is-danger:hover{ color:var(--nx-danger); border-color:var(--nx-danger-a35); }
.nx-tabella-empty{padding:var(--nx-s4) var(--nx-s3);text-align:center;color:var(--nx-text-dim);font-size:.84rem;text-align: left;}

@media (max-width:640px){ .nx-campo-riga{ grid-template-columns:1fr; } }

/* ═══ MODULI in v2 (`nx-form`) — 20/10/2026 ═══════════════════════════════════════
   Segnalato: «i form sono diventati orfani». Il <form> non aveva classe: i gruppi
   restavano attaccati al titolo e i campi senza ritmo. Ora il modulo ha una griglia
   propria, i campi respirano e il pulsante chiude la scheda con una riga di stacco ✓ */
.nx-form{ display:grid; gap:var(--nx-s3); margin-top:var(--nx-s2); }
.nx-form .nx-campo-gruppo{ margin-bottom:0; }
.nx-form .nx-campo-riga{gap: var(--nx-s4);margin-bottom: var(--nx-s5);}
.nx-form select.nx-campo{ appearance:none; cursor:pointer; }
.nx-form .nx-card-foot{
    margin-top:var(--nx-s2);
    margin-bottom: var(--nx-s5);
    padding-top:var(--nx-s3);
    border-top:1px solid var(--nx-line);
}
.nx-form .nx-card-foot .nx-btn{flex: 0 0 auto;}

/* colonne che non si devono schiacciare (20/10/2026) */
.nx-tabella td:first-child,
.nx-tabella th:first-child{ width:1%; white-space:nowrap; }
.nx-tabella td:last-child,
.nx-tabella th:last-child{ width:1%; white-space:nowrap; text-align:right; }

/* ═══ PAGINE FUORI DALL'APP SHELL (admin) — 20/10/2026 ═════════════════════════════
   Catena standard anche senza `main.nx-app-workspace`: .nx-contenitore (max 1400,
   padding laterale dai token) → .nx-page--inside (padding 0) → .nx-v2 (token) ✓ */
.nx-contenitore{
    width:100%; max-width:1400px; margin-left:auto; margin-right:auto;
    padding:var(--nx-s5) clamp(var(--nx-s4), 2.6vw, var(--nx-s6)) var(--nx-s7);
}
.nx-azioni-piede{
    display:flex; flex-wrap:wrap; gap:var(--nx-s2); margin-top:var(--nx-s4);
}

/* ═══ FONDO DI PAGINA — lo STESSO del marketplace (20/10/2026) ═════════════════════
   `assets/css/main.css` definisce il fondo scuro del sito:
       html[data-theme="dark"] body{ radial-gradient(#1a1b2e → #16213e 45% → #0d0d1a) }
   Le pagine che NON caricano `main.css` (es. `/admin/oggi`) restavano senza: ora chi ha
   `body.nx-v2-body` prende lo stesso fondo, chiaro o scuro che sia ✓ */
.nx-v2-body{ background:var(--nx-bg); color:var(--nx-text); min-height:100vh; font-family:var(--nx-font); }

html[data-theme="dark"] .nx-v2-body{
    background: radial-gradient(circle at center, #1a1b2e 0%, #16213e 45%, #0d0d1a 100%) !important;
    background-attachment: fixed !important;
}
html[data-theme="light"] .nx-v2-body{ background:var(--nx-bg); }

/* pulsante di azione distruttiva (usato negli incassi) */
.nx-v2 .nx-btn.is-danger{ color:var(--nx-danger); border-color:var(--nx-danger-a35); }
.nx-v2 .nx-btn.is-danger:hover{ background:var(--nx-danger-a12); }

/* spazi delle pagine amministrative in v2 (20/10/2026) — niente margini in linea ✓ */
.nx-v2 .nx-sezione{ margin-top:var(--nx-s5); }
.nx-v2 .nx-avviso{ margin-bottom:var(--nx-s4); }

/* riga di comandi dentro una tabella (liquidazioni/incassi) */
.nx-form-riga{display:flex;flex-wrap:wrap;gap:var(--nx-s2);align-items: center;}
.nx-form-riga .nx-campo{ width:auto; min-width:12ch; flex:1 1 12ch; }

/* il font su TUTTO ciò che sta dentro una sezione v2 (20/10/2026)
   — serve alle pagine di altre APP (VHost) dove il foglio locale impone un altro carattere */
.nx-v2, .nx-v2 *{ font-family:var(--nx-font); }
.nx-v2 h1, .nx-v2 h2, .nx-v2 h3, .nx-v2 h4, .nx-v2 .nx-metric-val, .nx-v2 .nx-eyebrow{
    font-family:var(--nx-font-display);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   «OGGI» — il grassetto DENTRO la frase (22/10/2026)
   Sua segnalazione: «il testo va a capo con <b> … e viene spezzato». Causa: la regola qui
   sopra `.nx-today-item b{ display:block; margin-bottom:2px }` rendeva BLOCCO ogni <b>,
   compresi quelli di enfasi dentro la frase:
       <span><b>La fattura giusta</b> Il <b>tipo di fatturazione</b> decide il documento…</span>
   diventava quattro righe staccate ✗.

   Ora: il PRIMO <b> del testo resta il titolo (riga sua), gli altri tornano dentro la frase.
   Nessun cambio di markup: si riconosce il primo per posizione (`:first-child`).
   ═══════════════════════════════════════════════════════════════════════════════════ */
.nx-today-item b{ display:inline; margin-bottom:0; }
.nx-today-item > span:not(.nx-today-ico) > b:first-child{
    display:block; margin-bottom:2px;
}
/* nell'elemento dorato il titolo è oro, l'enfasi dentro la frase resta inchiostro */
.nx-today-item.is-gold > span:not(.nx-today-ico) > b:first-child{ color:var(--nx-gold); }
.nx-today-item.is-gold > span:not(.nx-today-ico) b:not(:first-child){ color:var(--nx-text); }

/* ═══════════════════════════════════════════════════════════════════════════════════
   VITALIS — la nota che spiega cosa si sta guardando (22/10/2026)
   Sua domanda: «è connesso al NX-D? dovremmo scriverlo che qui si vede quanto si matura».
   Risposta misurata: NO. Questa scheda misura TEMPO (`re_user_activity_logs`), l'NX-D è MERITO
   (`re_users.loyalty_points`). La nota lo dice in due righe e porta alla scheda giusta.
   Superficie piatta, filo d'oro a sinistra: nessuna sfumatura.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.nx-vitalis-nota {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 var(--nx-s5, 24px);
    padding: 14px 18px;
    border-radius: var(--nx-r, 6px);
    background: var(--nx-surface-2, #f2f5fa);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
    border-left: 3px solid var(--nx-gold, #b8791a);
}
.nx-vitalis-nota-testo { flex: 1 1 380px; min-width: 0; }
.nx-vitalis-nota-testo > b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-family: var(--nx-font, 'Inter', system-ui, sans-serif);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nx-text-mid, #46536a);
}
.nx-vitalis-nota-testo > b svg { width: 14px; height: 14px; color: var(--nx-gold, #b8791a); }
.nx-vitalis-nota-testo p {
    margin: 0 0 4px;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--nx-text-mid, #46536a);
}
.nx-vitalis-nota-testo p:last-child { margin-bottom: 0; }
.nx-vitalis-nota-testo strong { color: var(--nx-text, #0f1a2b); }

.nx-vitalis-nota-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 13px;
    border-radius: 8px;
    border: 1px solid var(--nx-gold, #b8791a);
    color: var(--nx-gold, #b8791a);
    background: transparent;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.nx-vitalis-nota-link svg { width: 14px; height: 14px; }
.nx-vitalis-nota-link:hover { background: rgba(246, 177, 34, .12); }

@media (max-width: 620px) {
    .nx-vitalis-nota { padding: 12px 14px; gap: 12px; }
    .nx-vitalis-nota-link { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   LA RETE — persone, non righe di tabella (22/10/2026)
   Sua richiesta: «non è meglio delle card? sono persone… tipo social sarebbe figo»
   + «già qui possono apparire i permessi».
   Ogni invitato è una scheda: cerchio con l'iniziale, nome, email, da quando c'è,
   se è attivo e — la parte nuova — che permesso hai sulla sua vetrina.
   Superfici piatte, filetti da 1 px, oro solo per lo stato «concesso».
   ═══════════════════════════════════════════════════════════════════════════════════ */
.nx-rete { margin: 0 0 var(--nx-s5, 24px); }
.nx-rete-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.nx-rete-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--nx-font-display, 'Space Grotesk', 'Inter', sans-serif);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--nx-text, #0f1a2b);
}
.nx-rete-head h3 svg { width: 16px; height: 16px; color: var(--nx-gold, #b8791a); }

.nx-rete-avviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .78rem;
    color: var(--nx-text-mid, #46536a);
    background: rgba(246, 177, 34, .10);
    border: 1px solid rgba(246, 177, 34, .30);
    width: max-content;
}
.nx-rete-avviso svg { width: 14px; height: 14px; color: var(--nx-gold, #b8791a); flex: 0 0 14px; }

.nx-rete-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 12px;
}

.nx-persona {
    container-type: inline-size;   /* serve al @container qui sotto: si adatta la SCHEDA, non lo schermo */
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
    transition: border-color .16s ease, box-shadow .16s ease;
}
.nx-persona:hover {
    border-color: var(--nx-line-3, rgba(16, 26, 43, .24));
    box-shadow: 0 6px 18px -14px rgba(16, 26, 43, .5);
}

.nx-persona-top {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.nx-persona-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-family: var(--nx-font-display, 'Space Grotesk', 'Inter', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--nx-gold-deep, #8a5c12);
    background: rgba(246, 177, 34, .14);
    border: 1px solid rgba(246, 177, 34, .32);
}
.nx-persona-id { display: grid; gap: 2px; min-width: 0; }
.nx-persona-id b {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nx-text, #0f1a2b);
}
.nx-persona-id .nx-nome-testo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* IL BOLLINO BLU: profilo vivo (account attivo). Non è un'iscrizione: un profilo che esiste e lavora. */
.nx-verificato {
    display: inline-grid;
    place-items: center;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: #1a7fbf;
}
.nx-verificato svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
    fill: rgba(26, 127, 191, .12);
}
[data-theme="dark"] .nx-verificato { color: #4fb3ea; }
[data-theme="dark"] .nx-verificato svg { fill: rgba(79, 179, 234, .16); }

/* testo solo per i lettori di schermo */
.nx-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.nx-persona-mail {
    font-size: .73rem;
    color: var(--nx-text-dim, #75808f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-persona-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.nx-persona-perm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;              /* se non ci stanno, il bottone va sotto invece di sbordare */
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--nx-line, rgba(16, 26, 43, .07));
    min-width: 0;
}
.nx-persona-perm > * { min-width: 0; max-width: 100%; }
.nx-persona-form { margin: 0; display: flex; min-width: 0; max-width: 100%; }

/* il permesso: quattro stati, quattro colori di significato */
.nx-perm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nx-perm svg { width: 11px; height: 11px; }
.nx-perm.is-null { color: var(--nx-text-dim, #75808f); background: rgba(16, 26, 43, .05); border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13)); }
.nx-perm.is-wait { color: var(--nx-warn, #b8791a); background: rgba(246, 177, 34, .12); border: 1px solid rgba(246, 177, 34, .32); }
.nx-perm.is-ok   { color: var(--nx-ok, #11996a);   background: rgba(17, 153, 106, .10); border: 1px solid rgba(17, 153, 106, .30); }
.nx-perm.is-no   { color: var(--nx-danger, #c8403f); background: rgba(200, 64, 63, .10); border: 1px solid rgba(200, 64, 63, .28); }

.nx-persona-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--nx-line-3, rgba(16, 26, 43, .24));
    background: transparent;
    color: var(--nx-text-mid, #46536a);
    font: inherit;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.nx-persona-btn svg { width: 12px; height: 12px; }
.nx-persona-btn:hover { border-color: var(--nx-text-mid, #46536a); color: var(--nx-text, #0f1a2b); background: var(--nx-surface-2, #f2f5fa); }
.nx-persona-btn.is-on { border-color: var(--nx-gold, #b8791a); color: var(--nx-gold, #b8791a); }
.nx-persona-btn.is-on:hover { background: rgba(246, 177, 34, .12); }


@media (max-width: 560px) {
    .nx-rete-grid { grid-template-columns: 1fr; }
}
/* quando la scheda e' stretta (o il testo del permesso e' lungo), il bottone va a capo
   e prende tutta la larghezza: cosi' non sborda mai, ne' in italiano ne' nelle altre lingue */
@container (max-width: 300px) {
    .nx-persona-perm { align-items: stretch; }
    .nx-persona-perm > * { flex: 1 1 100%; }
    .nx-persona-btn { width: 100%; justify-content: center; }
    .nx-persona-form { flex: 1 1 100%; }
}

/* ── la proposta di collaborazione dentro la scheda persona ─────────────────── */
.nx-persona-collab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.nx-persona-collab-form {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.nx-persona-campo {
    flex: 1 1 110px;
    min-width: 0;
    height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
    background: var(--nx-surface-2, #f2f5fa);
    color: var(--nx-text, #0f1a2b);
    font: inherit;
    font-size: .74rem;
}
.nx-persona-campo::placeholder { color: var(--nx-text-dim, #75808f); }
.nx-persona-campo:focus {
    outline: none;
    border-color: var(--nx-gold, #b8791a);
    background: var(--nx-surface, #fff);
}
@container (max-width: 300px) {
    .nx-persona-collab-form { flex-wrap: wrap; }
    .nx-persona-campo { flex: 1 1 100%; }
    .nx-persona-collab-form .nx-persona-btn { width: 100%; justify-content: center; }
}

/* ── «La tua rete» dentro Vitalis ────────────────────────────────────────────── */
.nx-vitalis-rete {
    margin: 0 0 var(--nx-s5, 24px);
    padding: 16px 18px;
    border-radius: var(--nx-r, 6px);
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
}
.nx-vitalis-rete-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.nx-vitalis-rete-head > b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nx-font-display, 'Space Grotesk', 'Inter', sans-serif);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--nx-text, #0f1a2b);
}
.nx-vitalis-rete-head > b svg { width: 16px; height: 16px; color: var(--nx-gold, #b8791a); }

.nx-vitalis-rete-numeri {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.nx-vitalis-rete-numeri > div {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--nx-surface-2, #f2f5fa);
    border: 1px solid var(--nx-line, rgba(16, 26, 43, .07));
}
.nx-vitalis-rete-numeri b {
    display: block;
    font-family: var(--nx-font-display, 'Space Grotesk', 'Inter', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--nx-text, #0f1a2b);
    font-variant-numeric: tabular-nums;
}
.nx-vitalis-rete-numeri span {
    display: block;
    margin-top: 2px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nx-text-dim, #75808f);
}

.nx-vitalis-rete-nota {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--nx-text-mid, #46536a);
}
.nx-vitalis-rete-nota strong { color: var(--nx-text, #0f1a2b); }

@media (max-width: 620px) {
    .nx-vitalis-rete-numeri { grid-template-columns: 1fr; }
}

/* stato «scaduto» (invito/proposta oltre i 15 giorni): grigio, non rosso — non è un torto, è tempo passato */
.nx-perm.is-scad {
    color: var(--nx-text-dim, #75808f);
    background: rgba(16, 26, 43, .06);
    border: 1px dashed var(--nx-line-3, rgba(16, 26, 43, .24));
}

/* ── inviti per email: modulo + elenco (22/10/2026) ─────────────────────────── */
.nx-inviti-email {
    margin: 0 0 var(--nx-s5, 24px);
    padding: 16px 18px;
    border-radius: var(--nx-r, 6px);
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
}
.nx-inviti-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.nx-inviti-form .nx-persona-campo { flex: 1 1 190px; height: 30px; }
.nx-inviti-nota {
    margin: 0 0 12px;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--nx-text-dim, #75808f);
}
.nx-inviti-nota strong { color: var(--nx-text-mid, #46536a); }

.nx-inviti-lista { display: grid; gap: 8px; }
.nx-invito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--nx-surface-2, #f2f5fa);
    border: 1px solid var(--nx-line, rgba(16, 26, 43, .07));
    min-width: 0;
}
.nx-invito-id { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.nx-invito-id b {
    font-size: .82rem;
    font-weight: 700;
    color: var(--nx-text, #0f1a2b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-invito-id .nx-meta { font-size: .7rem; }

/* ── riepilogo rete: inviti ≠ profili (22/10/2026) ───────────────────────────── */
.nx-rete-riepilogo {
    margin: 0 0 var(--nx-s5, 24px);
    padding: 14px 18px;
    border-radius: var(--nx-r, 6px);
    background: var(--nx-surface-2, #f2f5fa);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
    border-left: 3px solid var(--nx-gold, #b8791a);
}
.nx-rete-riepilogo-testo {
    margin: 0 0 12px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--nx-text-mid, #46536a);
}
.nx-rete-riepilogo-testo strong { color: var(--nx-text, #0f1a2b); }
.nx-rete-riepilogo-numeri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.nx-rete-riepilogo-numeri .nx-num {
    display: grid;
    justify-items: center;      /* numero e parola sullo stesso asse */
    align-content: center;
    gap: 1px;
    padding: 9px 8px;
    border-radius: 8px;
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-line, rgba(16, 26, 43, .07));
    text-align: center;
}
.nx-rete-riepilogo-numeri b {
    display: block;
    font-family: var(--nx-font-display, 'Space Grotesk', 'Inter', sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--nx-text, #0f1a2b);
    font-variant-numeric: tabular-nums;
}
.nx-rete-riepilogo-numeri span {
    display: block;
    margin-top: 2px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nx-text-dim, #75808f);
}
@media (max-width: 760px) {
    .nx-rete-riepilogo-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── card invito: due tab che slittano (codice ↔ QR) ────────────────────────── */
.nx-invito-card { display: grid; gap: 12px; }
.nx-inv-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--nx-surface-2, #f2f5fa);
    border: 1px solid var(--nx-line-2, rgba(16, 26, 43, .13));
}
.nx-inv-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nx-text-mid, #46536a);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.nx-inv-tab svg { width: 14px; height: 14px; }
.nx-inv-tab:hover { color: var(--nx-text, #0f1a2b); }
.nx-inv-tab.is-active {
    background: var(--nx-surface, #fff);
    color: var(--nx-text, #0f1a2b);
    box-shadow: 0 1px 3px rgba(16, 26, 43, .12);
}

.nx-inv-panel { display: none; }
.nx-inv-panel.is-active { display: block; }
.nx-inv-qr-nota {
    margin: 8px 0 0;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--nx-text-dim, #75808f);
    text-align: center;
}

/* ── le due card invito: affiancate su desktop, impilate su telefono ─────────── */
.nx-inv-couple {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin: 0 0 var(--nx-s5, 24px);
}
.nx-inv-couple > .nx-card {
    margin-bottom: 0;          /* lo spazio lo dà la griglia, non la singola card */
    min-width: 0;
    height: 100%;              /* le due colonne restano alte uguali */
}
.nx-inv-couple .nx-inv-panel { min-width: 0; }

@media (max-width: 980px) {
    .nx-inv-couple { grid-template-columns: 1fr; gap: 14px; }
    .nx-inv-couple > .nx-card { height: auto; }
}

/* ── inviti in attesa: scheda TRATTEGGIATA (non è ancora un profilo) ─────────── */
.nx-persona.is-pending {
    border-style: dashed;
    border-color: rgb(37 96 197 / 61%);   /* blu: «esiste un invito, non ancora un profilo» */
    background: transparent;
}
.nx-persona.is-pending:hover {
    border-color: rgb(37 96 197);
    background: rgba(37, 96, 197, .04);
}
.nx-persona-avatar.is-pending {
    background: transparent;
    border-style: dashed;
    border-color: rgb(37 96 197 / 61%);
    color: rgb(37 96 197);
}
.nx-persona-avatar.is-pending svg { width: 18px; height: 18px; }

/* la riga che separa «persone» da «inviti in attesa» dentro la stessa griglia */
.nx-rete-sep {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nx-text-dim, #75808f);
    /* 22/10/2026 — LA SUA CORREZIONE ✓ («come sempre ci voglio io nella correzione»): il respiro a sinistra
       lo dà l'etichetta ✓, così il titolo del gruppo sta sulla stessa verticale del gettone ✓ e non a filo
       del bordo ✗. */
    padding: 5px 11px;
}

/* la scadenza al posto del finto bottone: è un'informazione, non un'azione */
.nx-scade {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nx-text-dim, #75808f);
    white-space: nowrap;
}

/* ═══ LA NOTA SOTTO IL NUMERO — differenziata (22/10/2026) ═════════════════════
   Tre livelli fissi in ogni metrica: ETICHETTA → NUMERO → NOTA.
   La nota di norma è testo grigio (spiega il numero). Quando invece porta uno
   STATO diventa targhetta con il fondo colorato: così si vede a colpo d'occhio
   quali numeri chiedono qualcosa e quali no. Il colore non è decorazione:
   lavanda = «aspetta una persona», oro = soldi, blu = rete, verde = fatto.  */
.nx-metric-foot.is-targa{
    display:inline-flex; align-items:center; gap:7px;
    margin-top:9px; padding:2px 11px; border-radius:5px;
    font-size:.74rem; font-weight:700; letter-spacing:.01em;
    background:rgb(193 192 245 / 14%);
    color:#b9b6f2;
}
[data-theme="light"] .nx-metric-foot.is-targa{
    background:rgb(193 192 245 / 31%);
    color:#4f4bb0;
}
.nx-metric-foot.is-targa svg{ width:12px; height:12px; }

/* le tinte che significano qualcosa */
.nx-metric-foot.is-targa.is-gold{ background:var(--nx-gold-a12); color:var(--nx-gold); }
.nx-metric-foot.is-targa.is-blue{ background:var(--nx-blue-a10); color:var(--nx-blue); }
.nx-metric-foot.is-targa.is-ok{   background:var(--nx-ok-a10);   color:var(--nx-ok);   }
.nx-metric-foot.is-targa.is-warn{ background:var(--nx-warn-a10); color:var(--nx-warn); }
[data-theme="light"] .nx-metric-foot.is-targa.is-gold{ background:rgba(184,121,26,.10); color:#8b5a10; }
[data-theme="light"] .nx-metric-foot.is-targa.is-blue{ background:var(--nx-blue-a10);  color:var(--nx-blue-deep); }
[data-theme="light"] .nx-metric-foot.is-targa.is-ok{   background:rgba(17,153,106,.10); color:#0e7a55; }
[data-theme="light"] .nx-metric-foot.is-targa.is-warn{ background:rgba(184,121,26,.10); color:#8b5a10; }

/* una nota lunga non deve diventare una pillola larga tutta la card */
.nx-metric-foot.is-targa{ max-width:100%; }

/* riserva: se arriva un blocco vecchio SENZA classe (cache, vecchio markup),
   si centra lo stesso. `:not([class])` tocca solo i div senza attributo class. */
.nx-rete-riepilogo-numeri > div:not([class]) {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    padding: 9px 8px;
    border-radius: 8px;
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-line, rgba(16, 26, 43, .07));
    text-align: center;
}



/* ═══════════════════════════ GETTONI DELLA RICHIESTA DI PATROCINIO (22/10/2026)
   LE SUE PAROLE, TRE VOLTE ✓ — l'ultima è quella che conta ✓: «ma sono sempre banner … immagina se ho 200
   richieste? è un casino lunghe lingue che non sono organizzate» ✓.

   QUINDI ✓: non una riga lunga per richiesta ✗ ma **gettoni compatti in griglia** ✓ —
   · larghezza uguale ✓ (`minmax(260px,1fr)` ✓): le colonne si allineano ✓ e l'occhio scorre ✓;
   · dentro ogni gettone le informazioni sono **impilate** ✓ (chi + tipo ✓ vetrina ✓ data + risposte ✓) e non
     si allargano ✗: il nome lungo si taglia coi puntini ✓ (il titolo intero resta nel `title` ✓);
   · con **più di 12** richieste la griglia scorre dentro un tetto ✓ (`is-lunga` ✓): 200 richieste non
     allungano la pagina di 200 righe ✗ — restano un blocco solo ✓.

   I gettoni sono di casa ✓ (pastiglia ✓, oro = identità ✓: `--nx-gold` ✓ `--nx-gold-a12` ✓ `--nx-gold-a28` ✓);
   le due risposte sono due tondi ✓ (verde = sì ✓ rosso = no ✓) coi gettoni di casa ✓.
   Classi di questa cosa sola ✓ (`nx-gettone…` ✓: nessuna collisione, controllato con `tools/css_collisioni.php` ✓). */

.nx-v2 .nx-gettoni-griglia{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:10px;
}
/* tante richieste ✓ → la griglia scorre dentro un tetto ✓ (la pagina non diventa lunga 200 righe ✗) */
.nx-v2 .nx-gettoni-griglia.is-lunga{
    max-height:56vh;
    overflow-y:auto;
    padding-right:6px;
}

.nx-v2 .nx-gettone{
    display:flex; flex-direction:column; gap:8px;
    min-width:0;
    padding:11px 12px;
    border-radius:12px;
    /* 22/10/2026 — LA SUA CORREZIONE ✓: il fondo è **quello dei tooltip** ✓ (`--tooltip-bg` ✓, gettone di casa
       che cambia da sé col tema ✓: scuro nel tema scuro ✓, bianco nel chiaro ✓) invece del velo d'oro fisso ✗.
       Il filo d'oro resta ✓: è l'identità della richiesta ✓, senza colorare tutta la superficie ✗. */
    background:var(--tooltip-bg);
    border:1px solid var(--nx-gold-a28);
}

.nx-v2 .nx-gettone-top{ display:flex; align-items:center; gap:9px; min-width:0; }
.nx-v2 .nx-gettone-ico{
    display:grid; place-items:center; flex:0 0 auto;
    width:30px; height:30px; border-radius:50%;
    background:var(--nx-grad-gold); color:#171207;
    box-shadow:var(--nx-shadow-gold);
}
.nx-v2 .nx-gettone-ico svg{ width:15px; height:15px; }
.nx-v2 .nx-gettone-chi{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.nx-v2 .nx-gettone-chi b{
    font-size:.84rem; font-weight:800; color:var(--nx-text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nx-v2 .nx-gettone-tipo{
    align-self:flex-start;
    font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:var(--nx-gold);
    padding:1px 6px; border-radius:99px;
    background:var(--nx-gold-a12); border:1px solid var(--nx-gold-a28);
}
.nx-v2 .nx-gettone-vetrina{
    font-size:.78rem; font-weight:700; color:var(--nx-gold); text-decoration:none;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nx-v2 .nx-gettone-vetrina:hover{ text-decoration:underline; }
.nx-v2 .nx-gettone-piede{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:auto;
}
.nx-v2 .nx-gettone-data{ font-size:.68rem; color:var(--nx-text-dim); min-height:1em; }
.nx-v2 .nx-gettone-azioni{ display:flex; gap:5px; margin:0; }
.nx-v2 .nx-gettone-btn{
    display:grid; place-items:center;
    width:26px; height:26px; padding:0;
    border-radius:50%;
    border:1px solid var(--nx-line-2);
    background:transparent;
    color:var(--nx-text-mid);
    cursor:pointer;
    transition:var(--nx-t);
}
.nx-v2 .nx-gettone-btn svg{ width:13px; height:13px; }
.nx-v2 .nx-gettone-btn.is-si{ color:var(--nx-ok); border-color:var(--nx-ok-a22); }
.nx-v2 .nx-gettone-btn.is-si:hover{ background:var(--nx-ok-a10); }
.nx-v2 .nx-gettone-btn.is-no{ color:var(--nx-danger); border-color:var(--nx-danger-a26); }
.nx-v2 .nx-gettone-btn.is-no:hover{ background:var(--nx-danger-a12); }

/* ═══════════════════════════ ISTRUZIONI E GRAFICO (22/10/2026)
   LE SUE PAROLE sulla scheda Intelligence: «fatico a comprendere cosa sia … è importante che sia comprensibile a
   tutti gli admin» ✓. Per spiegare una pagina servono due pezzi che nello standard non c'erano:
     · `.nx-istruzione` — un punto numerato con titolo e due righe di spiegazione ✓ (`.nx-cards` li mette in fila ✓);
     · `.nx-chart-box` — l'altezza del grafico ✓ (Chart.js con `maintainAspectRatio:false` ha bisogno di un
       contenitore con un'altezza vera, altrimenti disegna 0px ✗ — è anche il motivo per cui un grafico può
       sembrare «vuoto» ✓).
   NIENTE COLORI INVENTATI ✗: solo i gettoni di casa ✓ (`--nx-gold` ✓ `--nx-line` ✓ `--nx-text*` ✓).
   Classi di questa cosa sola ✓: nessuna collisione (`tools/css_collisioni.php` ✓). */
.nx-v2 .nx-istruzione{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.nx-v2 .nx-istruzione-n{
    display:grid; place-items:center; flex:0 0 auto;
    width:24px; height:24px; border-radius:50%;
    background:var(--nx-gold-a12); border:1px solid var(--nx-gold-a28);
    color:var(--nx-gold); font-size:.72rem; font-weight:800;
}
.nx-v2 .nx-istruzione b{ display:block; margin-bottom:2px; color:var(--nx-text); font-size:.86rem; }
.nx-v2 .nx-istruzione p{ margin:0; font-size:.8rem; line-height:1.35; color:var(--nx-text-mid); }
.nx-v2 .nx-chart-box{ position:relative; height:280px; width:100%; }
@media (max-width:640px){ .nx-v2 .nx-chart-box{ height:220px; } }