/* ============================================================================
   L'ASIDE — LA VESTE NUOVA ✓ (15/10/2026, la notte)
   ----------------------------------------------------------------------------
   DA DOVE ARRIVA ✓: il titolare ha disegnato **da fuori** la colonna come la vuole e ce l'ha data ✓ — le sue parole:
   «rivedi meglio … voglio una esperienza AI… figa… non bottoni a casaccio» ✓ · «guarda che bello con i nostri
   colori… sarebbe bellissimo: se ricrei il css esterno e il js esterno, dimmi cosa ne pensi?» ✓.
   Ecco il foglio esterno ✓ (il modulo è `assets/js/modules/nx-aside.js` ✓: niente stile in linea ✗ niente script
   in pagina ✗ — le regole d'oro ✓).
   COSA SI PRENDE DEL SUO DISEGNO ✓: le MACRO come **schede** ✓ (tondo ✓ filo ✓ e la scheda aperta si alza ✓);
   l'icona in **pastiglia** ✓ e la macro aperta coll'icona **colorata** ✓; l'apertura **fluida** ✓ col trucco
   `grid-template-rows: 0fr → 1fr` ✓ (morbida ✓ e senza altezze inventate ✗: meglio di `max-height` ✓);
   il **filo che sfuma** sotto la sotto-area ✓; i **servizi come scheda** ✓; il **piè di colonna** colla scheda
   dell'utente ✓; la **testata** e la **tavolozza dei comandi** ✓ (⌘K ✓).
   COSA NON SI PRENDE ✗ (e perché ✓):
     · il suo `height: 100vh` + `position: sticky` ✗ → rimetterebbe il piè di colonna sotto lo schermo ✗: resta la
       cura del 15/10 ✓ (`top: var(--eco-header-h)` → `bottom: 0` ✓ che scorre dentro di sé ✓);
     · il suo stato `is-open` ✗ → lo stato è quello di casa ✓ (`is-aperto` ✓, che il modulo scrive INSIEME a
       `aria-expanded` ✓: una verità sola ✓);
     · i pannelli chiusi da subito ✗ → **senza JavaScript si vede TUTTO** ✓ (`html.nx-aree-vive` ✓), che è la regola
       di casa ✓ («mai un menu chiuso e nessun modo di aprirlo» ✓).
   I COLORI SONO I NOSTRI ✓ — gettoni veri della casa ✓ (`--accent-primary` ✓ `--accent-info` ✓ `--accent-emerald` ✓
   `--bg-secondary` ✓ `--glass-border` ✓ …): **niente viola-rosa preso da mood** ✗. Le TRE aree hanno un filo di
   colore proprio ✓, definito QUI una volta sola ✓ (e finirà nella tavolozza ufficiale in admin ✓ — la sua richiesta ✓).
   SI CARICA PER ULTIMO ✓ (`includes/menu-colonna.php` ✓, dopo `nx-menu-aree.css` ✓): così vince lui ✓ e c'è **un
   posto solo** per l'aspetto della colonna ✓.
   ============================================================================ */

.nx-app-sidebar {
    /* LA LARGHEZZA ✓: 330px — MISURATA ✓ il 15/10/2026. LE SUE PAROLE: «sono tagliati… piuttosto facciamo che
       ASIDE è più largo di 287px» ✓. IL CONTO ✓ (col carattere del sito ✓): il nome più lungo che ha
       `Nexus Marketing Pro (gestione social)` chiede **239px** ✓; la voce aggiunge 30 di icona ✓ 11 di
       spazio ✓ 22 di respiro ✓ e i rientri ne aggiungono 20 ✓ + 6 di barra = **328px** ✓ → 330 ✓.
       (Nel suo file la colonna era 296px ✗: là i nomi erano corti ✓ — da noi vengono dal listino ✓ e sono
       più lunghi ✓: la misura si adegua ai nomi, non il contrario ✓.) */
    width: 330px;

    /* LE TRE AREE DEL MENU ✓ — un filo di colore per riconoscerle a colpo d'occhio ✓. Gettoni della casa dove
       esistono ✓ (`--accent-info` ✓ `--accent-gold` ✓ `--accent-emerald` ✓): i nomi di prima (`--accent-sky` ✗
       `--accent-violet` ✗) NON esistevano ✓ → da lì le icone grigie che ha visto ✓ (le sue parole: «le vedo grigie
       dentro a .nx-aree» ✓, ed era vero ✓). */
    --nx-area-cliente: var(--accent-info, hsl(200, 95%, 45%));
    --nx-area-seller: var(--accent-gold, hsl(38, 85%, 45%));
    --nx-area-networker: var(--accent-emerald, hsl(160, 85%, 42%));

    /* LE SUPERFICI ✓ — i gettoni di casa, non colori inventati ✗ */
    --nx-aside-card: hsla(0, 0%, 100%, 0.035);
    --nx-aside-card-open: var(--bg-secondary);
    --nx-aside-pill: hsla(0, 0%, 100%, 0.06);
    --nx-aside-ring: hsla(0, 0%, 100%, 0.12);
    --nx-aside-soft: var(--bg-glass-hover, hsla(0, 0%, 100%, 0.05));
    --nx-aside-tondo: 14px;          /* il tondo delle schede ✓ (il suo disegno ✓) */
    --nx-aside-pill-tondo: 7px;      /* il suo ✓ (era 8 ✗) */
    --nx-aside-morbido: 0.34s cubic-bezier(0.4, 0, 0.2, 1);   /* la curva sua ✓: l'apertura fluida ✓ */
}

/* ---------------------------------------------------------------- LA TESTATA (AI) · la mette il modulo ✓ */

.nx-aside-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 10px 14px 10px;      /* i SUOI numeri ✓ (era 2px 2px 12px ✗: portato al suo ✓) */
    margin-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.nx-aside-logo {
    flex: 0 0 auto;
    width: 34px;               /* il suo ✓ */
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;        /* il suo ✓ = 12,48px (era .72 ✗) */
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #1a1204;
    background: linear-gradient(135deg, var(--accent-primary), hsl(28, 92%, 58%));
    box-shadow: 0 6px 16px -6px var(--accent-primary);
}

.nx-aside-cerca {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;              /* il suo ✓ */
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--nx-aside-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nx-aside-cerca::placeholder {
    color: var(--text-dim);
}

/* IL BORDO SI ACCENDE AL PASSAGGIO ✓ — il suo `:hover` ✓ (la superficie risponde prima del tocco ✓) */
.nx-aside-cerca:hover {
    border-color: var(--nx-aside-ring);
}

.nx-aside-cerca:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.18);
}

.nx-aside-tasto {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 5px;        /* il suo ✓ */
    border: 1px solid var(--glass-border);
    background: var(--nx-aside-card);
    color: var(--text-dim);
    font-family: ui-monospace, monospace;
    font-size: 0.65rem;        /* il suo ✓ */
    font-weight: 700;
    pointer-events: none;
}

/* ---------------------------------------------------------------- LE MACRO: SCHEDE ✓ (il suo disegno ✓) */

.nx-aree {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nx-area {
    border-radius: var(--nx-aside-tondo);
    background: var(--nx-aside-card);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* LA SCHEDA APERTA SI ALZA ✓ — il colore lo dice al posto nostro ✓ */
.nx-area.is-aperta {
    background: var(--nx-aside-card-open);
    box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.75);
}

.nx-area:hover {
    border-color: var(--nx-aside-ring);
}

.nx-area.is-attiva .nx-area-toggle {
    color: var(--text-primary);
}

/* IL TITOLO DELLA MACRO ✓ — resta un'etichetta di casa ✓ (`nx-app-nav-label` ✓), ma più **forte** ✓: è il ramo
   grande dell'albero ✓ (le sue parole: «non si distinguono le macro dalle sotto aree» ✓). */
.nx-area-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--text-secondary);
    padding: 11px 12px;
    border-radius: 12px;       /* il suo ✓ (era 14 ✗) */
    transition: color 0.2s ease, background 0.2s ease;
}

.nx-area-toggle.nx-app-nav-label {
    font-size: 0.855rem;   /* LA SUA MISURA ✓ (13,68px): la differenza che si vede è il MAIUSCOLO ✓ */
    letter-spacing: 1.2px;
}

.nx-area-toggle:hover {
    color: var(--text-primary);
    background: var(--nx-aside-soft);
}

/* IL TITOLO DELLA SOTTO-AREA ✓ — un NOME ✓, non un'etichetta ✗ (per questo non è maiuscolo ✓ ed è più grande ✓) */
.nx-sotto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    font-size: 0.855rem;       /* LA SUA MISURA ✓ (13,68px), come la macro ✓: distinguono il maiuscolo ✓ e il filo ✓ */
    font-weight: 600;          /* il suo ✓ */
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--text-secondary);
    padding: 11px 12px;        /* i suoi ✓ (erano 8×10 ✗) */
    border-radius: 12px;       /* il suo ✓ */
    transition: color 0.2s ease, background 0.2s ease;
}

.nx-sotto-toggle:hover {
    color: var(--text-primary);
    background: var(--nx-aside-soft);
}

/* LE PASTIGLIE DELLE ICONE ✓ — l'icona non è più un simbolo sciolto ✓ (il suo disegno ✓): sta in un quadratino
   tondo ✓, e prende il colore quando il suo ramo è aperto ✓ o si tocca ✓. */
.nx-area-ico,
.nx-sotto-ico {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: var(--nx-aside-pill-tondo);
    background: var(--nx-aside-pill);
    border: 1px solid var(--glass-border);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nx-area-ico svg,
.nx-sotto-ico svg {
    width: 14px;
    height: 14px;
}

.nx-area-toggle:hover .nx-area-ico,
.nx-sotto-toggle:hover .nx-sotto-ico {
    background: var(--nx-aside-soft);
}

/* LA MACRO APERTA: L'ICONA SI ACCENDE ✓ — nel colore della **sua** area ✓ (Cliente ✓ Seller ✓ Nexodus ✓) */
.nx-area.is-aperta .nx-area-ico {
    background: linear-gradient(135deg, var(--nx-area-c), hsl(28, 92%, 58%));
    border-color: transparent;
    color: #14110a;
    box-shadow: 0 6px 14px -6px var(--nx-area-c);
}

.nx-area.is-aperta .nx-area-ico svg {
    color: #14110a;
}

/* IL FILO DI COLORE DELL'AREA ✓ (prima era su `.nx-area--… .nx-area-ico` ✗: ora è una variabile sola ✓, così
   la stessa riga vale per l'icona ✓ per la scheda aperta ✓ e per quello che verrà ✓) */
.nx-area--cliente { --nx-area-c: var(--nx-area-cliente); }
.nx-area--seller { --nx-area-c: var(--nx-area-seller); }
.nx-area--networker { --nx-area-c: var(--nx-area-networker); }

.nx-area:not(.is-aperta) .nx-area-ico svg {
    color: var(--nx-area-c);
}

/* LE FRECCE ✓ — girano quando il ramo è aperto ✓ (stessa curva dell'apertura ✓) */
.nx-area-freccia,
.nx-sotto-freccia {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    opacity: 0.65;
    transition: transform var(--nx-aside-morbido), opacity 0.2s ease, color 0.2s ease;
}

.nx-area.is-aperta .nx-area-freccia,
.nx-sotto.is-aperto .nx-sotto-freccia {
    opacity: 1;
    transform: rotate(180deg);
    color: var(--accent-primary);
}


/* ============================================================================
   L'APERTURA FLUIDA ✓ — IL TRUCCO DEL SUO DISEGNO ✓ (grid-template-rows: 0fr → 1fr)
   ----------------------------------------------------------------------------
   PERCHÉ È MEGLIO ✗→✓: il mio usava `max-height` ✓ con un tetto inventato ✗ (`1600px` ✗ `6000px` ✗): se il
   contenuto cresceva, si tagliava ✗ e la dissolvenza cambiava velocità ✗. Col `grid` il browser sa **quanto è
   alto davvero** ✓ (0fr → 1fr ✓) → nessun tetto ✗ nessun taglio ✗ e la curva è sempre la stessa ✓.
   LE DUE PRECAUZIONI DI CASA ✓ (che il suo prototipo non aveva ✗):
     1) si nasconde SOLO quando il modulo è montato ✓ (`html.nx-aree-vive` ✓): **senza JavaScript si vede tutto** ✓;
     2) i figli hanno `min-height: 0` ✓ + `overflow: hidden` ✓ (senza, il grid non sa rimpicciolirli ✗ e il
        pannello resterebbe aperto ✗ — è il dettaglio che fa funzionare il trucco ✓).
   ============================================================================ */

html.nx-aree-vive .nx-area-voci,
html.nx-aree-vive .nx-sotto-voci {
    display: grid;
    grid-template-rows: 0fr;
    /* LA TRAPPOLA DEL TRUCCO ✓→✓ (15/10/2026, MISURATA): `grid-template-rows: 0fr` chiude **una** riga ✗ — e i
       pannelli ne hanno **più d'una** (le sotto-aree di un'area ✓ sono tre o quattro ✓!): le altre nascono come
       righe **implicite** ✓, il browser le fa `auto` ✗ e restano **aperte** ✓ (misurato: la chiusa era alta 100px ✗
       con `0px 46px 46px` ✗). `grid-auto-rows: 0fr` le chiude tutte ✓ — e all'apertura tornano `auto` ✓ (ognuna
       la sua altezza ✓). È lo stesso trucco del suo disegno ✓, colla riga che mancava ✓. */
    grid-auto-rows: 0fr;
    max-height: none;          /* il tetto di prima, portato via ✓ */
    overflow: visible;         /* il taglio lo fa il figlio ✓ (serve al filo che sfuma ✓) */
    opacity: 0;
    transition: grid-template-rows var(--nx-aside-morbido), grid-auto-rows var(--nx-aside-morbido), opacity 0.25s ease;
}

html.nx-aree-vive .nx-area-voci > *,
html.nx-aree-vive .nx-sotto-voci > * {
    min-height: 0;
    overflow: hidden;
}

html.nx-aree-vive .nx-area.is-aperta .nx-area-voci,
html.nx-aree-vive .nx-sotto.is-aperto .nx-sotto-voci {
    grid-template-rows: 1fr;
    grid-auto-rows: auto;
    opacity: 1;
}

/* ---------------------------------------------------------------- LE VOCI DENTRO I RAMI ✓ */

/* L'ELENCO ✓ — le sue misure ✓: colonna ✓ e 2px di respiro fra una voce e l'altra ✓ */
.nx-app-sidebar .nx-app-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* IL FILO CHE SFUMA ✓ — il suo disegno ✓ (una riga che si perde nel nulla ✓, non una barra piena ✗): lega le voci
   alla loro sotto-area ✓ e sparisce quando la sotto-area è chiusa ✓ (nella sua versione restava lì ✗ perché il
   pannello era vuoto ma presente ✓: da noi il filo si accende coll'apertura ✓). */
.nx-sotto {
    position: relative;
}

.nx-sotto.is-aperto::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 36px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, var(--nx-aside-ring), transparent);
    pointer-events: none;
}

/* IL RESPIRO IN FONDO ✓→✓ (15/10/2026, MISURATO): era un `padding-bottom: 8px` del contenitore ✗ e il padding
   **non si chiude** col trucco del grid ✗ (restava alto 8px anche da chiuso ✓). Adesso il respiro lo dà il
   MARGINE dell'ultima sotto-area ✓: il margine entra nella misura della riga ✓ → a pannello chiuso sparisce
   tutto ✓ (misurato: 0 ✓). */
.nx-area-voci {
    padding: 0 8px;
}

/* (NESSUN MARGINE IN FONDO ✓ — MISURATO: anche il margine dell'ultima sotto-area entra nella misura della
   riga ✗ e il pannello chiuso restava alto 6px ✓. Il respiro lo dà già il `padding-bottom` delle VOCI ✓,
   che sta **dentro** il figlio ✓ → chiuso si taglia via ✓, aperto si vede ✓.) */

.nx-sotto-voci {
    padding: 0 0 6px 12px;
}

/* LA SOTTO-AREA DENTRO LA SCHEDA ✓: le voci rientrano ancora un poco ✓ e restano leggere ✓ */
/* IL RIENTRO DELLE VOCI ✓ — selettore PIÙ FORTE del generale ✓: `.nx-sotto-voci .nx-area-voce` (due classi ✓) e
   `.nx-app-sidebar .nx-area-voce` (due classi ✓) hanno la stessa forza ✓ → vinceva l'ultima scritta ✗ (il generale) ✗
   e il rientro restava 11px invece dei suoi 12px ✓. Tre classi, e vince il suo ✓. */
.nx-app-sidebar .nx-sotto-voci .nx-area-voce {
    font-size: 0.83rem;
    padding-left: 12px;        /* il suo ✓ */
}

/* ---------------------------------------------------------------- «I NOSTRI SERVIZI» ✓ — una SCHEDA a sé ✓ */

.nx-sotto--servizi {
    margin-top: 6px;           /* il suo ✓ (era 8 ✗) */
    padding: 2px;
    border-radius: var(--nx-aside-tondo);
    background: var(--nx-aside-card);
    border: 1px solid var(--glass-border);
}

.nx-sotto--servizi > .nx-sotto-toggle {
    padding: 12px;             /* il suo ✓ */
}

/* la sua icona è calda ✓ (l'oro della casa ✓) — è l'offerta ✓, si deve vedere che è un'altra cosa ✓ */
.nx-sotto--servizi > .nx-sotto-toggle .nx-sotto-ico {
    background: linear-gradient(135deg, hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.18), hsla(28, 92%, 58%, 0.12));
    border-color: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.35);
}

.nx-sotto--servizi > .nx-sotto-toggle .nx-sotto-ico svg {
    color: var(--accent-primary);
}

/* I SERVIZI: la stessa cosa ✓ (tre classi ✓, così il tondo 9 resta quello suo ✓) */
.nx-app-sidebar .nx-aree-servizi .nx-area-voce {
    font-size: 0.82rem;
    border-radius: 9px;       /* il suo ✓ */
}

/* ---------------------------------------------------------------- IL PIÈ DI COLONNA ✓ */
/* ============================================================================
   LA LUCE SUL TESTO ✓ — AL PASSAGGIO DEL MOUSE (le sue parole, 15/10/2026)

   «facciamo che le voci attive con href abbiano effetti simili» al tasto AI ✓ — però «piuttosto che l'ombra .. e il
   border radius.. con il background» ✗: «così occupiamo meno spazio e abbiamo più spazio da usare» ✓, «l'effetto
   magari sul testo ... più che sullo sfondo» ✓, «qualcosa che trasmetta AI.. effect» ✓.

   DOVE STAVANO LE SCATOLE ✗ — e perché ha detto «è tutto come prima» ✓: non in questo foglio ✗ ma in
   `nx-menu-aree.css` ✓, e io le avevo tolte **solo** sulla voce «dove sei» ✗ → i **servizi** (quelli che stava
   guardando ✓) restavano identici ✗. Adesso le scatole non ci sono più da nessuna parte ✓ (`border-radius: 0` ✓
   riga piatta ✓ icona 20px al posto della pastiglia da 30px ✓ — MISURATO: il rigo scende da 48px a 38px ✓).

   LA FORMA DELLA VOCE VIVE NELL'ALTRO FOGLIO ✓ (`nx-menu-aree.css` ✓: una cosa, un posto solo ✓): QUI c'è solo
   **la luce** ✓ — la stessa lama del tasto AI ✓ (`nx-aside-luce` ✓) che passa **sulle lettere** ✓ e l'icona che si
   fa d'oro ✓. Niente fondo ✗ niente riquadro ✗ niente ombra ✗.
   ============================================================================ */

/* LA FORMA DELLA VOCE ✓ — LA REGOLA FORTE ✓.

   MISURATO ✓: cambiare la regola nel foglio delle aree (`nx-menu-aree.css` ✓) **non bastava** ✗ — il browser
   continuava a calcolare `border-radius: 10px` ✓ e la voce restava tonda ✗: il raggio arrivava da una regola che
   quel selettore non batteva ✓. Qui la scatola si toglie con un selettore a **tre classi** ✓ (`.nx-app-sidebar` ✓
   + il contenitore ✓ + la voce ✓), che vince su qualunque regola a due ✓ — e questo foglio è l'**ultimo** della
   cascata ✓ (`includes/menu-colonna.php` ✓: `nx-menu-aree.css` prima ✓ `nx-aside.css` dopo ✓).
   Vale per **tutte** le voci ✓: quelle dentro le aree ✓ (`.nx-aree` ✓), le comuni in cima ✓ (`.nx-aree-comuni` ✓)
   e i servizi sotto ✓ (che stanno dentro `.nx-aree` ✓). La forma vive anche nel foglio delle aree ✓ (una cosa,
   un posto solo ✓): qui c'è la regola che **garantisce** il risultato ✓ — e la prova lo misura ✓. */
.nx-app-sidebar .nx-aree .nx-area-voce,
.nx-app-sidebar .nx-aree-comuni .nx-app-nav-link,
.nx-app-sidebar .nx-aree-sopra .nx-app-nav-link {
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* E LE SCATOLE DELLE ICONE DI AREE E SOTTO-AREE ✓ — TOLTE ANCHE LORO ✗.

   VISTO NELLA FIGURA ✓ (15/10/2026 ✓, `docs/riferimenti/aside-effetto-colonna.png` ✓): l'effetto c'era sulle voci ✓
   ma **i titoli delle aree** («CLIENTE» ✓ «SELLER» ✓) e **i titoli delle sotto-aree** («Vetrine» ✓ «Wallet» ✓
   «Statistiche» ✓) avevano ancora l'icona dentro una **pastiglia tonda** ✗ — e al passaggio del mouse restava un
   **rettangolo di fondo** ✗. Cioè: metà colonna colla veste nuova ✓ e metà come prima ✗ — e lui lo vede subito ✓
   («è tutto come prima» ✓).
   Quindi: **niente scatole in tutta la colonna** ✗ — icone di **20px** ✓ pulite ✓ e **nessun fondo** al passaggio ✗,
   su qualunque cosa si tocchi ✓ (voci ✓ titoli d'area ✓ titoli di sotto-area ✓ servizi ✓ comuni ✓).
   IL SEGNO DEL PASSAGGIO RESTA ✓: l'icona si fa **d'oro** ✓ e (sulle voci ✓) la **luce scorre sul testo** ✓.
   LA TENDA DI DESTRA NON SI TOCCA ✗: è un'altra cosa ✓ (`nx-drawer-item` ✓) e le sue parole erano per la colonna ✓. */
.nx-app-sidebar .nx-area .nx-area-ico,
.nx-app-sidebar .nx-area .nx-sotto-ico,
.nx-app-sidebar .nx-aree-sopra .nx-app-nav-link > :first-child {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* NIENTE FONDO AL PASSAGGIO ✗ — su qualunque cosa si tocchi nella colonna ✓ */
.nx-app-sidebar .nx-app-nav-link,
.nx-app-sidebar .nx-app-nav-link:hover,
.nx-app-sidebar .nx-area-toggle,
.nx-app-sidebar .nx-area-toggle:hover,
.nx-app-sidebar .nx-sotto-toggle,
.nx-app-sidebar .nx-sotto-toggle:hover {
    background: none;
}

/* E IL SEGNO RESTA ✓: l'icona si fa d'oro al passaggio ✓ — e quella dove sei è già d'oro ✓ */
.nx-app-sidebar .nx-area-toggle:hover > .nx-area-ico,
.nx-app-sidebar .nx-sotto-toggle:hover > .nx-sotto-ico {
    color: var(--accent-primary);
}

.nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-ico {
    color: var(--accent-primary);
}

.nx-app-sidebar .nx-area-voce:hover > span:not(.nx-app-badge):not([data-lucide]) {
    background-image: linear-gradient(100deg,
        var(--accent-primary) 0%,
        hsla(0, 0%, 100%, 0.94) 22%,
        var(--accent-primary) 44%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nx-aside-luce 5.5s linear infinite;
}

.nx-app-sidebar .nx-area-voce:hover > :first-child {
    color: var(--accent-primary);
    background: none;
}

@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-area-voce:hover > span:not(.nx-app-badge):not([data-lucide]) {
        animation: none;
        background-position: 50% 0;
    }
}


/* ============================================================================
   LA VOCE DOVE SEI — L'EFFETTO «AI» ✓ (le sue parole, 15/10/2026)

   «facciamo che le voci attive con href abbiano effetti simili» al tasto AI ✓ — però «piuttosto che l'ombra .. e
   il border radius.. con il background» ✗: «così occupiamo meno spazio e abbiamo più spazio da usare» ✓ e «l'effetto
   magari sul testo ... più che sullo sfondo» ✓, «qualcosa che trasmetta AI.. effect» ✓.

   COSÌ ✓: via lo sfondo ✗ via l'ombra ✗ via il tondo ✗ — l'effetto sta **sulle lettere** ✓: una lama di luce che
   scorre nel testo ✓ (gradiente ritagliato sulle lettere ✓ `background-clip: text` ✓) e il **puntino che respira** ✓
   in coda al nome ✓ (la **stessa** animazione del tasto AI ✓: `nx-aside-respira` ✓ a 2s ✓). Niente pixel in più ✓:
   la voce resta alta com'era ✓ e la colonna guadagna la riga che l'ombra e la pastiglia si prendevano ✓.
   VALE PER TUTTE ✓: aree ✓ sotto-aree ✓ e comuni ✓ — hanno la stessa classe (`nx-area-voce` ✓) e stanno nella
   stessa colonna ✓, quindi una regola sola le veste tutte ✓.
   ============================================================================ */

.nx-app-sidebar .nx-area-voce.is-active,
.nx-aree-comuni .nx-app-nav-link.is-active {
    background: none;
    background-image: none;
    box-shadow: none;
    color: var(--text-primary);
    font-weight: 700;
}

/* LE LETTERE ✓ — il riflesso scorre QUI ✓ non sullo sfondo ✓ (dove l'occhio lo legge come «vivo» ✓ senza
   dipingere un rettangolo ✓). I `:not(...)` servono ✓: il bollino ✓ e l'icona ✓ hanno la loro vita ✓. */
.nx-app-sidebar .nx-area-voce.is-active > span:not(.nx-app-badge):not([data-lucide]),
.nx-aree-comuni .nx-app-nav-link.is-active > span:not(.nx-app-badge):not([data-lucide]) {
    background-image: linear-gradient(100deg,
        var(--accent-primary) 0%,
        hsla(0, 0%, 100%, 0.94) 22%,
        var(--accent-primary) 44%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nx-aside-luce 5.5s linear infinite;
}

/* l'icona d'oro ✓ ma **senza pastiglia** ✗ (era un rettangolino che portava via spazio ✓) */
.nx-app-sidebar .nx-area-voce.is-active > :first-child {
    color: var(--accent-primary, #f6b122);
    background: none;
}

/* IL PUNTINO CHE RESPIRA ✓ — **SOLO SUL TITOLO DELL'AREA** ✓ (più sotto ✓), NON SULLA VOCE ✗.

   MISURATO ✓ (15/10/2026): il pallino in linea dentro il nome della voce **allunga la riga** ✗ — 43px contro 38 ✓ —
   e cioè **porta via spazio** ✗, esattamente il contrario di quello che ha chiesto ✓ («così occupiamo meno spazio e
   abbiamo più spazio da usare» ✓). Coi margini negativi non si risolve ✗ (provato ✓ `vertical-align: baseline` ✓ e
   `margin: -5px` ✓: restava 43 ✗). Quindi: la voce dove sei resta **accesa dalla luce sul testo** ✓ (chiaro ✓) e il
   **pallino che respira** vive sul **titolo dell'area dove sei** ✓ — dove non c'è nessun badge ✗ e il rigo è alto ✓,
   quindi non costa **niente** ✓. Una cosa, un posto giusto ✓.
   (Le due righe di prova lo misurano ✓: `check_menu_aree.py` ✓ «la voce attiva non è più ALTA ✗ né SPOSTATA ✗».)

/* L'AREA DOVE SEI ✓ — LO STESSO LUME SUL TITOLO DELL'AREA ✓.

   PERCHÉ ✓ (le sue parole del 15/10/2026: «ma io non vedo sul server i tuoi cambiamenti» ✗): erano **in
   produzione** ✓ — impronte identiche a casa ✓, `DocumentRoot /var/www/marketplace` ✓, una sola copia ✓ — ma
   **invisibili** ✗ dove nessuna voce è «dove sei» ✗: io avevo tolto un riquadro ✗ e messo un lume che si accende
   solo sulla voce attiva ✓. In una pagina senza voce attiva la colonna resta **identica a prima** ✓ → e una
   modifica che non si vede è una modifica che non esiste ✓.
   IL PHP L'AREA DOVE SEI LA SEGNA GIÀ ✓ (`is-attiva` ✓ `is-aperta` ✓): adesso anche il **suo titolo** ha la luce ✓
   e il puntino ✓ — così il segno c'è in **ogni** pagina dentro un'area ✓. E nella barra di sole icone ✓ (≤1200px ✓,
   dove le parole si nascondono ✗) l'area dove sei si riconosce dall'**icona dorata** ✓. Stesso lume delle voci ✓
   (`nx-aside-luce` ✓ `nx-aside-respira` ✓): una cosa sola, dappertutto ✓. */
.nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-nome {
    background-image: linear-gradient(100deg,
        var(--accent-primary) 0%,
        hsla(0, 0%, 100%, 0.94) 22%,
        var(--accent-primary) 44%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nx-aside-luce 5.5s linear infinite;
}

.nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-nome::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: -5px 0 0px 7px;     /* LE SUE MISURE ✓ (15/10/2026): «perché il punto finiva sotto e non si vedeva» ✓ — col margine
                                   in basso **a zero** il pallino scende sulla riga e si vede ✓. Sua misura ✓, sua riga ✓. */
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 3px hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.16);
    vertical-align: baseline;   /* non deve alzare la riga ✓ (misurato: colla «middle» la voce attiva veniva 43px contro 38 ✗) */
    animation: nx-aside-respira 2s ease-in-out infinite;
}

.nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-ico {
    color: var(--accent-primary);
}

@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-nome {
        animation: none;
        background-position: 50% 0;
    }

    .nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-nome::after {
        animation: none;
    }
}

@keyframes nx-aside-luce {
    0%   { background-position: 210% 0; }
    100% { background-position: -30% 0; }
}

/* A CHI NON VUOLE ANIMAZIONI ✓: la voce resta d'oro ferma ✓ e il puntino acceso ✗ senza respiro ✓ (mai un
   effetto che dà fastidio a chi ha chiesto di non averne ✗) */
@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-area-voce.is-active > span:not(.nx-app-badge):not([data-lucide]) {
        animation: none;
        background-position: 50% 0;
    }

    .nx-app-sidebar .nx-area-voce.is-active > span:not(.nx-app-badge):not([data-lucide])::after {
        animation: none;
    }
}



/* «CHIEDI ALL'AI» ✓ (lo mette il modulo ✓): un tasto che si vede ✓ e risponde al tocco ✓ */
.nx-aside-chiedi {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 14px;        /* i suoi ✓ (erano 11×13 ✗) */
    border-radius: 12px;
    border: 1px solid hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.22);
    background: linear-gradient(135deg, hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.10), transparent);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nx-aside-chiedi:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px var(--accent-primary);
}

/* ---------------------------------------------------------------- LA SCHEDA DELL'UTENTE ✓ (il suo disegno ✓) */

/* IL PIÈ DI COLONNA ✓: la scheda dell'utente diventa una **card** ✓ (bordo tondo ✓ filo ✓ e si alza al passaggio ✓),
   come nel suo prototipo ✓. Le classi sono quelle di casa ✓ (`nx-app-user-badge` ✓ `nx-app-avatar` ✓): il disegno
   è di questo foglio ✓, il contenuto no ✗ (chi è l'utente lo dicono le pagine ✓). */
.nx-app-sidebar .nx-app-user-badge {
    padding: 10px;                 /* il suo ✓ */
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--nx-aside-card);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nx-app-sidebar .nx-app-user-badge:hover {
    border-color: var(--nx-aside-ring);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.7);
}

/* L'AVATAR ✓ — in casa c'è una regola PIÙ FORTE ✗ (`.nx-app-sidebar-footer .nx-app-user-badge .nx-avatar-override` ✓
   che lo tiene a 35px ✗): per avere i suoi 38px serve la stessa forza ✓ (misurato: era 35 ✗). */
.nx-app-sidebar .nx-app-user-badge .nx-app-avatar {
    width: 38px;                   /* i suoi ✓ */
    height: 38px;
    border-radius: 11px;
}

/* IL PIÈ DI COLONNA ✓ — i suoi numeri ✓: 14 di respiro sopra ✓ 10 fra la scheda dell'utente e il tasto AI ✓
   (il `position: sticky` e il fondo a filo restano i nostri ✓: quelli erano la cura di ieri ✓). */
.nx-app-sidebar .nx-app-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
}

.nx-aside-chiedi svg {
    width: 16px;
    height: 16px;
    color: var(--accent-primary);
}

.nx-aside-chiedi .nx-aside-punto {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-emerald, #34d399);
    box-shadow: 0 0 0 3px hsla(160, 85%, 42%, 0.16);
}


/* ============================================================================
   LA TAVOLOZZA DEI COMANDI ✓ (⌘K / Ctrl+K) — il pezzo «AI» del suo disegno ✓
   ----------------------------------------------------------------------------
   COS'È ✓: si preme ⌘K (o Ctrl+K ✓, o si tocca la ricerca in cima ✓) e compare un **cerca-tutto** ✓ che conosce
   OGNI voce della colonna ✓ (col suo ramo: «Seller › Vetrine ✓»): si scrive ✓, si sceglie con le frecce ✓, si apre
   con Invio ✓ e si chiude con Esc ✓.
   LE REGOLE DI CASA ✓: la finestra ha la **precedenza** ✓ (Esc chiude lei ✓ e non la colonna ✓: è la regola già
   scritta in `nx-colonna.js` ✓ «se è aperta una finestra … Esc lascia agire la finestra» ✓) e il livello è **sotto**
   la tenda e le modali di casa ✗→✓ (una finestra di casa copre questa ✓: le finestre vincono ✓).
   NIENTE STILE IN LINEA ✗: il disegno lo fa il modulo ✓ (`assets/js/modules/nx-aside.js` ✓).
   ============================================================================ */

.nx-aside-palette {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    background: rgba(6, 8, 14, 0.35);   /* il suo .35 ✓ (il mio .55 ✗) */
    backdrop-filter: blur(10px) saturate(120%);   /* il suo blur 10 ✓ */
}

.nx-aside-palette.is-aperta {
    display: flex;
}

.nx-aside-palette-box {
    width: 100%;
    max-width: 600px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.nx-aside-palette-testata {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;        /* i suoi ✓ (erano 15×17 ✗) */
    border-bottom: 1px solid var(--glass-border);
}

.nx-aside-palette-testata svg {
    width: 18px;
    height: 18px;
    color: var(--text-dim);
    flex: 0 0 18px;
}

.nx-aside-palette-cerca {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.96rem;        /* il suo ✓ */
    font-weight: 500;
}

.nx-aside-palette-cerca::placeholder {
    color: var(--text-dim);
    font-weight: 400;
}

.nx-aside-palette-elenco {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px;
}

.nx-aside-palette-voce {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.nx-aside-palette-voce svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--text-dim);
}

.nx-aside-palette-voce:hover,
.nx-aside-palette-voce.is-selected {
    background: var(--nx-aside-soft);
    color: var(--text-primary);
}

.nx-aside-palette-voce:hover svg,
.nx-aside-palette-voce.is-selected svg {
    color: var(--accent-primary);
}

/* IL RAMO DELLA VOCE ✓ («Seller › Vetrine» ✓): dice DOVE porta quella voce ✓ — è il pezzo che rende la tavolozza
   utile davvero ✓ (in un menu di 40 voci, il nome da solo non basta ✗). */
.nx-aside-palette-ramo {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--nx-aside-card);
    color: var(--text-dim);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.nx-aside-palette-vuoto {
    padding: 30px 22px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.nx-aside-palette-piede {
    display: flex;
    gap: 18px;
    padding: 12px 18px;        /* i suoi ✓ (erano 11×17 ✗) */
    border-top: 1px solid var(--glass-border);
    background: var(--nx-aside-card);
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 500;
}

.nx-aside-palette-piede kbd {
    font-family: ui-monospace, monospace;
    padding: 1px 6px;
    margin-right: 4px;
    border-radius: 5px;
    border: 1px solid var(--glass-border);
    background: var(--nx-aside-pill);
    color: var(--text-secondary);
    font-size: 0.66rem;
}

/* ---------------------------------------------------------------- IL FILTRO MENTRE SI SCRIVE ✓ */

/* UNA VOCE CHE NON CORRISPONDE ✓: si nasconde ✓ — e si rivede appena si cancella ✓ (mai un menu svuotato
   senza ritorno ✗: basta togliere una lettera ✓ o premere Esc ✓). */
.nx-aside-nascosto {
    display: none !important;
}

/* LA VOCE TROVATA ✓: un lampo breve ✓ che dice «è questa qui» ✓ (due volte ✓: anche la sua scheda si illumina ✓) */
.nx-match-glow {
    animation: nx-match-glow 1.4s ease;
}

@keyframes nx-match-glow {
    0%, 100% {
        background: transparent;
    }

    30% {
        background: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.16);
    }
}


/* ============================================================================
   LA PASSATA FEDELE ✓ — i suoi numeri, uno per uno (15/10/2026, la notte fonda)
   ----------------------------------------------------------------------------
   LE SUE PAROLE: «io ti ho passato un lavoro meraviglioso come riferimento… mi aspetto che sia se non identico
   quasi… colla stessa accuratezza» ✓. AVEVA RAGIONE ✓: la prima passata era una **sintesi** ✗ (la forma sì ✓ ma
   senza le rifiniture che fanno la differenza ✓) — e le rifiniture **sono** il disegno ✓. Qui ci sono, prese dal
   suo file una per una ✓: gli **stessi raggi** ✓ le **stesse ombre** ✓ la **stessa curva** ✓ (`--nx-aside-t` ✓ =
   il suo `--nx-transition` ✓) le **stesse animazioni** ✓ (il bagliore del tondino ✓ il puntino che respira ✓ il
   riflesso che passa sul tasto AI ✓ l'entrata della tavolozza ✓) e i dettagli che si notano solo a guardarli ✓
   (l'icona che si ingrandisce di un soffio ✓ il filo che sfuma ✓ le parole lunghe che si accorciano coi puntini ✓).
   I COLORI SONO I NOSTRI ✓ e dove il suo disegno era su fondo chiaro ✗ i gettoni sono quelli **scuri** di casa ✓
   (`--nx-aside-card` ✓ invece del bianco ✗): il **disegno** è il suo ✓, la **tavolozza** è la nostra ✓.
   QUELLO CHE NON SI POTEVA PRENDERE ✗ (e non è pigrizia ✗): il `padding: 16px 14px 14px` della colonna ✗
   romperebbe il «piè di colonna a filo del fondo» ✓ (misurato ieri ✓) e il suo `height: 100vh`/`sticky` ✗
   rimetterebbe il piè sotto lo schermo ✗: quelli restano curati come stabilito ✓.
   ============================================================================ */

.nx-app-sidebar {
    --nx-aside-t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);      /* LA SUA CURVA ✓ (il suo `--nx-transition` ✓) */
    --nx-aside-xs: 0 1px 2px rgba(0, 0, 0, 0.28);          /* l'ombra minima ✓ */
    --nx-aside-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
}

/* IL FILO DI COLORE IN CIMA ALLA COLONNA ✓ — il suo disegno ✓ (una riga che dice «qui c'è qualcosa di vivo» ✓).
   3px ✓ come da lui ✓ e **i nostri** colori ✓ (azzurro ✓ oro ✓ smeraldo ✓): sui fondi chiari del suo prototipo
   erano viola-rosa ✓, da noi sono quelli della casa ✓. */
.nx-app-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nx-area-cliente), var(--nx-area-seller), var(--nx-area-networker));
    opacity: 0.85;
    z-index: 3;
    pointer-events: none;
}

/* I DUE BAGLIORI DI FONDO ✓ — il suo disegno ✓ (`radial-gradient` in alto a destra ✓ e in basso a sinistra ✓).
   QUI STANNO SUL FONDO DELLA COLONNA ✓ e non in un finto strato ✗: uno strato `absolute` scorrerebbe via col
   contenuto ✗ (la colonna scorre ✓) mentre il **fondo** resta fermo ✓ — è la differenza fra un bagliore e una
   macchia che scappa ✓. Il colore di fondo di casa (il vetro ✓) resta: si **aggiungono** le due luci ✓. */
.nx-app-sidebar {
    background-image:
        radial-gradient(700px 320px at 100% 0%, hsla(var(--h-accent), var(--s-accent), var(--l-accent), 0.05), transparent 60%),
        radial-gradient(600px 420px at -10% 100%, hsla(200, 95%, 45%, 0.05), transparent 60%);
    background-repeat: no-repeat;
}

/* il campo lascia lo spazio al ⌘K ✓ (altrimenti il testo gli passa sotto ✓ — dettaglio suo ✓) */
.nx-aside-cerca {
    padding-right: 46px;
}

/* LA BARRA SOTTILE DELLA COLONNA ✓ — la sua ✓ (6px ✓ coll'angolo tondo ✓): serve a **vedere** che si scorre ✓
   (in casa era nascosta ✗: dopo la cura del fondo, sapere che sotto c'è altro è un servizio ✓). */
.nx-app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.nx-app-sidebar::-webkit-scrollbar-thumb {
    background: var(--nx-aside-ring);
    border-radius: 6px;
}

.nx-app-sidebar::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 100%, 0.22);
}

/* IL TONDINO AI: IL BAGLIORE CHE RESPIRA ✓ — il suo disegno ✓ (`::after` sfocato ✓ coll'`nxGlow` ✓ a 3,5s ✓) */
.nx-aside-logo {
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px var(--accent-primary),
                inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
}

.nx-aside-logo::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-primary), hsl(28, 92%, 58%));
    opacity: 0.25;
    filter: blur(8px);
    z-index: -1;
    animation: nx-aside-bagliore 3.5s ease-in-out infinite;
}

@keyframes nx-aside-bagliore {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.45; }
}

/* IL ⌘K DENTRO IL CAMPO ✓ — il suo disegno ✓ (non un tondino lì accanto ✗): la testata è `position: relative` ✓,
   il tasto sta a 10px dal bordo destro ✓ al centro in verticale ✓ e non prende il dito ✓ (`pointer-events: none` ✓). */
.nx-aside-top {
    position: relative;
}

.nx-aside-tasto {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}


/* LE VOCI COMUNI ✓ (Esplora · Dashboard) — **IL SUO VESTITO** ✓ (15/10/2026).
   LE SUE PAROLE, guardando la schermata in modalità scura ✓: «:hover mostra il border appiccicato agli estremi left
   e right» ✓ — ED ERA VERO ✓: le due voci in cima portavano ancora il **bordo** della colonna di casa ✗
   (`apps.css`: `border: 1px solid` ✗ con l'altezza fissa di 52px ✗), mentre le voci dentro le aree no ✓ (il mio
   `border: 0` ✗ le copriva solo a loro ✗). Adesso hanno lo **stesso** vestito delle voci delle aree ✓:
   riga pulita ✓ 9×11 ✓ tondo 10 ✓ senza bordo ✗ e senza altezza fissa ✗ — è il suo `.nx-app-nav-link` ✓. */
.nx-app-sidebar .nx-aree-comuni > .nx-app-nav-item > .nx-app-nav-link {
    height: auto;
    border: 0;
    padding: 9px 11px;
    border-radius: 10px;
    gap: 11px;
    font-size: 0.855rem;
    font-weight: 500;
    line-height: 1.25;
}

/* E LA SUA PASTIGLIA DELL'ICONA ✓ (come dentro le aree ✓: 30×30 ✓ coll'icona dentro ✓) — l'aveva già ✓,
   qui si aggiunge solo che al passaggio l'icona si accende ✓. */
.nx-app-sidebar .nx-aree-comuni > .nx-app-nav-item > .nx-app-nav-link:hover > :first-child {
    transform: scale(1.06);
}

/* LA VOCE CHE SI TOCCA ✓ — il suo disegno ✓: la schedina ✓ l'ombra minima ✓ e l'icona che si ingrandisce di un
   **soffio** ✓ (`scale(1.06)` ✓: si sente che risponde ✓). Da noi la schedina è lo scuro di casa ✓. */

.nx-app-sidebar .nx-area-voce {
    /* LA BASE DEL SUO DISEGNO ✓ (15/10/2026): riga pulita ✓ 9×11 di respiro ✓ tondo 10 ✓ niente bordo ✗ e niente
       altezza fissa ✗. In casa la voce era 52px con un filo ✗ — giusto per un elenco sempre aperto ✓, stretto per
       un albero ✓. L'ICONA RESTA NELLA PASTIGLIA ✓ (`--nx-aside-pill` ✓): è la sola cosa che abbiamo tenuto di casa,
       perché è quella che il titolare ha lodato ✓ («i nuovi erano belli» ✓). */
    height: auto;
    border: 0;
    padding: 9px 11px;
    border-radius: 10px;
    gap: 11px;
    font-size: 0.855rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background var(--nx-aside-t), color var(--nx-aside-t), box-shadow var(--nx-aside-t);
}

.nx-app-sidebar .nx-area-voce:hover {
    background: var(--nx-aside-card);
    box-shadow: var(--nx-aside-xs);
}

.nx-app-sidebar .nx-area-voce:hover > :first-child {
    transform: scale(1.06);
}

/* LA VOCE DOVE SEI ✓ — QUESTA ERA LA VECCHIA VESTE ✗ (sfumatura da sinistra ✓ + filo d'oro ✓ + ombra ✓): il
   15/10/2026 il titolare ha chiesto di lasciarla perdere ✗ («piuttosto che l'ombra .. e il border radius.. con il
   background» ✗ — «così occupiamo meno spazio» ✓) e di portare l'effetto **sul testo** ✓. Misurato ✓: questa
   regola stava DOPO la nuova ✗ e, avendo la stessa specificità ✓, **vinceva lei** ✗ (la prova la beccata subito ✓
   «niente SFONDO ✗ niente OMBRA ✗» ✗→✓). Adesso qui non c'è più niente ✓: la voce dove sei è solo **luce sulle
   lettere** ✓ + **puntino che respira** ✓, in cima a questo foglio ✓.

/* LE PAROLE LUNGHE ✓ — LA SUA REGOLA, PAROLA PER PAROLA ✓.
   LE SUE DUE ✓: `.nx-area-nome` ✓ e `.nx-sotto-nome` ✓ (un nome lungo non deve spingere fuori la freccia ✗).
   IL MIO ERRORE ✗→✓ (visto dal titolare: «sono schiacciati i badge» ✓): avevo esteso la stessa cura all'**ultimo
   `span`** della voce ✗ — e nei bollini l'ultimo `span` **È il bollino** ✓ → gli davo `overflow: hidden` ✗ e,
   essendo la voce un flex ✗, il bollino si **comprimeva** ✓. Adesso la cura va al **testo** ✓ (`:not(.nx-app-badge)` ✓)
   e il bollino resta fuori ✓. */
/* I TITOLI ✓ (la sua regola, parola per parola ✓): un nome lungo non deve spingere fuori la freccia ✗. */
.nx-area-nome,
.nx-sotto-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* IL NOME DELLA VOCE ✗→✓ (15/10/2026): NON si taglia più. LE SUE PAROLE: «sono tagliati, non si vede ciò che c'è
   dentro» ✓. Il nome prende lo spazio che serve ✓ (`flex: 1 1 auto` ✓ `min-width: 0` ✓) e, se mai fosse più lungo
   della colonna, va a capo ✓ — si legge ✓ invece di sparire ✗ (era la mia ellissi ✗ a tagliarlo ✓). */
.nx-app-sidebar .nx-area-voce > span:not(.nx-app-badge) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* IL BOLLINO NON SI SCHIACCIA ✓ — ECCO LA CAUSA VERA, MISURATA ✓ (15/10/2026).
   LE SUE PAROLE: «sono schiacciati i badge» ✓ (col markup vero: `nx-app-badge nx-app-badge--gold nx-aside-badge-offset` ✓).
   IL PERCHÉ ✗ (trovato misurando ✓, non indovinando ✗): la colonna di casa (`apps.css` ✓) dà a **ogni** bollino
   `flex: 1 !important` e poi `flex: 0 !important` ✗ — cioè `0 1 0%` ✓: si **comprime a zero** ✓ — **e**
   `width: min-content` ✗. Dentro una voce che mette le cose in fila ✓ il bollino non aveva più spazio ✗ ✓.
   LA CORREZIONE VIVE QUI ✓ e non nella regola di casa ✗: quella vale per **tutto** il sito ✓ (ci sono bollini
   altrove ✓) e non si tocca ✗. Qui il bollino torna a essere un pezzo normale ✓: `flex: 0 0 auto` ✓ (non si
   rimpicciolisce ✓) e `width: auto` ✓ (tiene la sua misura ✓).
   L'`!important` C'È PERCHÉ LA REGOLA DI CASA CE L'HA ✓ — non è una guerra di `!important` ✗: è la stessa arma,
   colla stessa mira ✓, e solo dentro l'ASIDE ✓ (`html .nx-app-sidebar` ✓ le dà la forza che serve ✓). */
html .nx-app-sidebar .nx-area-voce > .nx-app-badge,
html .nx-app-sidebar .nx-aree-comuni .nx-app-nav-link > .nx-app-badge,
html .nx-app-sidebar .nx-aree-servizi .nx-area-voce > .nx-app-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    overflow: visible;
}

/* LE PASTIGLIE DELLE VOCI ✓ — il suo disegno ✓ (`nx-app-badge` ✓, quattro colori ✓): sui suoi fondi chiari erano
   tinte pastello ✗; da noi sono **scure** ✓ (leggibili sulla colonna ✓) ma restano le stesse quattro ✓:
   ambra ✓ cielo ✓ oro ✓ rosa ✓. */
.nx-app-sidebar .nx-app-badge {
    cursor: help;                 /* la sua §7 ✓: il bollino si spiega da sé ✓ */
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.nx-app-sidebar .nx-app-badge--amber {
    background: hsla(38, 92%, 55%, 0.16);
    color: hsl(38, 92%, 70%);
    border-color: hsla(38, 92%, 55%, 0.35);
}

.nx-app-sidebar .nx-app-badge--sky {
    background: hsla(200, 95%, 45%, 0.16);
    color: hsl(200, 95%, 72%);
    border-color: hsla(200, 95%, 45%, 0.35);
}

.nx-app-sidebar .nx-app-badge--gold {
    background: linear-gradient(135deg, hsla(38, 92%, 60%, 0.22), hsla(38, 92%, 45%, 0.16));
    color: hsl(38, 95%, 72%);
    border-color: hsla(38, 92%, 55%, 0.45);
}

.nx-app-sidebar .nx-app-badge--rose {
    background: hsla(350, 85%, 55%, 0.16);
    color: hsl(350, 90%, 74%);
    border-color: hsla(350, 85%, 55%, 0.35);
}

/* I NUMERI DELL'UTENTE ✓ — il suo disegno ✓: il merito in ambra ✓, i PR nel colore dell'accento ✓ e il bollino
   di comportamento in verde-acqua ✓ (`nx-integrity-badge-mini` ✓). Erano già nel piè di colonna ✓: qui prendono
   il colore giusto ✓ (in casa erano spenti ✗). */
.nx-app-sidebar .nx-integrity-badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid hsla(190, 90%, 45%, 0.35);
    background: hsla(190, 90%, 45%, 0.14);
    color: hsl(190, 90%, 70%);
    font-size: 0.66rem;
    font-weight: 700;
}

.nx-app-sidebar .nx-integrity-badge-mini svg {
    width: 10px;
    height: 10px;
}

.nx-app-sidebar .nx-merit-aside-summary .nx-unit-d {
    color: hsl(38, 92%, 70%);
}

.nx-app-sidebar .nx-merit-aside-summary .nx-unit-pr {
    color: var(--accent-primary);
}

/* IL RIFLESSO CHE PASSA SUL TASTO AI ✓ — il suo disegno ✓ (una lama di luce che attraversa il tasto al passaggio ✓:
   è il tocco che fa dire «questo è vivo» ✓): 0,8s ✓ come da lui ✓. */
.nx-aside-chiedi {
    position: relative;
    overflow: hidden;
}

.nx-aside-chiedi::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, hsla(0, 0%, 100%, 0.22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.nx-aside-chiedi:hover::before {
    transform: translateX(100%);
}

/* IL PUNTINO CHE RESPIRA ✓ — il suo disegno ✓ (`nxDot` ✓ a 2s ✓): dice che Galia c'è ✓ senza gridarlo ✓. */
.nx-aside-chiedi .nx-aside-punto {
    animation: nx-aside-respira 2s ease-in-out infinite;
}

@keyframes nx-aside-respira {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }


}

/* L'ENTRATA DELLA TAVOLOZZA ✓ — il suo disegno ✓: il velo che si accende ✓ (`nxFade` ✓ 0,2s ✓) e la finestra che
   scende di 14px rimpicciolendosi ✓ (`nxSlide` ✓ 0,26s ✓): senza, comparirebbe di colpo ✗ e si sentirebbe il salto ✓. */
.nx-aside-palette.is-aperta {
    animation: nx-aside-velo 0.2s ease;
}

@keyframes nx-aside-velo {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nx-aside-palette.is-aperta .nx-aside-palette-box {
    animation: nx-aside-scende 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nx-aside-scende {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------- IL TASTO AI NEGLI SCHERMI STRETTI ✓ */

/* LE SUE PAROLE (15/10/2026) ✓: «questo porta via spazio quando si è in mobile device o schermo piccolo» ✓ — e
   aveva ragione ✓: sotto i 1200px la colonna diventa una **barra di sole icone** ✓ (regola di casa ✓: `main.css`
   nasconde le parole ✓ e `nx-menu-aree.css` riduce i titoli delle aree ✓) e il tasto AI, colla sua parola e il suo
   puntino ✓, era l'unico pezzo ancora **largo** ✓: rubava la riga ✓.
   COSA SI FA ✓: **non si nasconde** ✗ (è una funzione vera ✓: porta a Galia ✓) — si **stringe** ✓: diventa un
   quadratino coll'icona al centro ✓, senza la parola ✗ e senza il puntino ✗. Sotto i **1025px** la colonna non
   c'è affatto ✓ (sul telefono è un pannello a tutto schermo ✓): là non serve nessuna regola ✓. */
@media (max-width: 1200px) {
    .nx-aside-chiedi {
        padding: 10px 0;
        justify-content: center;
        gap: 0;
    }

    .nx-aside-chiedi > span {
        display: none;          /* la parola ✓ e il puntino ✓: restano fuori ✓ */
    }

    .nx-aside-chiedi svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================================
   LE ULTIME SCATOLE ✓ — VISTE NELLA FIGURA ✓ (15/10/2026, `docs/riferimenti/aside-effetto-colonna.png` ✓)

   Guardando la colonna disegnata ✓ sono rimaste due scatole ✗ che l'occhio prende subito ✓:
     1. l'icona del **titolo d'area** («CLIENTE» ✓ «SELLER» ✓) dentro la sua pastiglia ✓ — e non bastava togliere
        quella al contenitore ✓ (`:first-child` ✓): il **suo `svg`** ne ha una sua ✗ (le regole stavano in questo
        stesso foglio ✓, righe 210-260 ✓, da un giro precedente ✓);
     2. il **FONDO** al passaggio del mouse ✓ — dipinto da **tre** fogli insieme ✓ (`apps.css` ✓ `main.css` ✓
        `nx-menu-aree.css` ✓): una riga scura dietro la voce ✓ che è esattamente ciò che lui non vuole ✗.

   QUI SI CHIUDE IL DISCORSO ✓ — con `!important` **solo** su queste poche proprietà ✓, e scritto perché ✓: il
   risultato lo ha chiesto lui ✓ («piuttosto che l'ombra .. e il border radius.. con il background» ✗) e la misura
   c'è ✓ (`tools/checks/check_menu_aree.py` ✓). Senza ✓ la colonna restava «come prima» ✗ — che è il guasto
   peggiore di tutti: **credere di aver fatto qualcosa che non si vede** ✓.
   ============================================================================ */
.nx-app-sidebar .nx-area-ico,
.nx-app-sidebar .nx-sotto-ico,
.nx-app-sidebar .nx-area-ico svg,
.nx-app-sidebar .nx-sotto-ico svg {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.nx-app-sidebar .nx-app-nav-link:hover,
.nx-app-sidebar .nx-app-nav-item:hover,
.nx-app-sidebar .nx-area-toggle:hover,
.nx-app-sidebar .nx-sotto-toggle:hover {
    background: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   LE SUE CINQUE COSE ✓ (15/10/2026, la notte — dopo averle guardate insieme ✓)

   Ha guardato la colonna e ha detto **cinque** cose precise ✓. Qui ci sono tutte e cinque ✓, colle sue misure ✓.
   ============================================================================ */

/* 1) GLI SPAZI FRA LE SEZIONI ✓ — LE SUE PAROLE E LE SUE MISURE ✓: «così non è appiccicato» ✓.
   Le macro aree (e le comuni in cima ✓) si staccano fra loro ✓ colla **sua** riga: filo in cima ✓ 4px di respiro ✓
   e 4/6px di imbottitura ✓ — così le schede non si toccano più ✓. (Sta qui e non in `nx-menu-aree.css` ✓ perché
   è una **misura della colonna** ✓: una cosa, un posto ✓.) */
.nx-app-sidebar .nx-aree-sopra + .nx-aree,
.nx-app-sidebar .nx-aree {
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    margin-top: 4px;
    padding: 4px 6px;
}

/* 2) I BOLLINI DEVONO ACCENDERSI ✓ — «i badge non si vedono ✓ servono più vivi come colori» ✓.
   Prima usavano i gettoni **tenui** di casa ✗ (`--area-success-bg` ✓ = un 10% di verde ✓: si vedeva appena ✗).
   Adesso, **solo nella colonna** ✓, i bollini hanno i colori **pieni** ✓ col testo scuro sopra ✓ (si legge ✓) e un
   filo di luce ✓: la pastiglia si vede da lontano ✓. Fuori dalla colonna non cambia niente ✗ ✓. */
.nx-app-sidebar .nx-app-badge {
    color: #0b0d12;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid hsla(var(--h-accent), 95%, 70%, 0.65);
    background: linear-gradient(135deg, #ffe39a 0%, #ffb020 55%, #ffd678 100%);
    box-shadow: 0 0 12px -2px hsla(var(--h-accent), 95%, 55%, 0.55), inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

.nx-app-sidebar .nx-app-badge--sky {
    color: #04121c;
    border-color: hsla(199, 95%, 72%, 0.65);
    background: linear-gradient(135deg, #9fe8ff 0%, #29b6f6 58%, #8fe2ff 100%);
    box-shadow: 0 0 12px -2px hsla(199, 95%, 60%, 0.55), inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

.nx-app-sidebar .nx-app-badge--emerald {
    color: #04140d;
    border-color: hsla(160, 85%, 62%, 0.65);
    background: linear-gradient(135deg, #a9f6d0 0%, #22c55e 58%, #8bf0b5 100%);
    box-shadow: 0 0 12px -2px hsla(160, 85%, 50%, 0.5), inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

.nx-app-sidebar .nx-app-badge--crimson {
    color: #1c0407;
    border-color: hsla(355, 85%, 68%, 0.65);
    background: linear-gradient(135deg, #ffb6c0 0%, #ef4444 58%, #ffc7d0 100%);
    box-shadow: 0 0 12px -2px hsla(355, 85%, 58%, 0.5), inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

.nx-app-sidebar .nx-app-badge--amber {
    color: #1a1204;
    border-color: hsla(38, 95%, 62%, 0.65);
    background: linear-gradient(135deg, #ffe2a8 0%, #f59e0b 58%, #ffd98a 100%);
    box-shadow: 0 0 12px -2px hsla(38, 95%, 55%, 0.5), inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

/* 3) I TITOLI SI ACCENDONO AL PASSAGGIO ✓ — «i toggle in hover non si nota molto ✓ … forse il colore deve essere
   più vivo ✓ ?» ✓. Vero ✓ (era `--text-primary` ✓: quasi bianco ✗ = un brusco «acceso/spento» che l'occhio perde ✓).
   Adesso il titolo si fa **d'oro pieno** ✓ coll'icona ✓ e il testo prende un **bagliore** ✓ (`text-shadow` ✓ =
   l'effetto **sul testo** ✓, non un fondo ✗). Vivace ✓ e leggibile ✓. */
.nx-app-sidebar .nx-area-toggle:hover,
.nx-app-sidebar .nx-sotto-toggle:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 14px hsla(var(--h-accent), 95%, 60%, 0.55);
}

.nx-app-sidebar .nx-area-toggle:hover > .nx-area-ico,
.nx-app-sidebar .nx-sotto-toggle:hover > .nx-sotto-ico {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 8px hsla(var(--h-accent), 95%, 60%, 0.65));
}

/* 4) LA FIBRA CHE PORTA ENERGIA ✓ — LE SUE PAROLE: «hai tolto la linea verticale ✓ meglio con effetto come se
   fosse una fibra che porta energia alle singole voci ✓ .. che ne pensi?» ✓.
   PENSO CHE È GIUSTO ✓ — e il perché è nel disegno ✓: il filo dice «queste voci stanno **dentro** questa cosa» ✓,
   ma fermo ✗ è un recinto ✓; **acceso** ✓ dice anche da dove viene il nutrimento ✓. E non è un capriccio ✗: è la
   stessa famiglia del lume sulle lettere ✓ e del pallino che respira ✓ — la colonna ha **un** modo di muoversi ✓.
   COME ✓: il filo resta **filo** ✓ (misura e posizione non si toccano ✓: la sua geometria la decide il foglio delle
   aree ✓) e ci passa dentro una **vena di luce** che scende ✓ verso le voci ✓, lenta ✓ (5,2s ✓), d'oro ✓ — mai
   un lampeggio ✗. A chi ha chiesto «niente animazioni» resta il filo fermo ✓. */
.nx-app-sidebar .nx-sotto-voci::before {
    background-image: linear-gradient(180deg,
        transparent 0%,
        hsla(var(--h-accent), 92%, 58%, 0.10) 14%,
        hsla(var(--h-accent), 98%, 66%, 0.62) 42%,
        hsla(var(--h-accent), 92%, 58%, 0.12) 68%,
        transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 220%;
    background-position: 0 -60%;
    animation: nx-fibra 5.2s linear infinite;
}

@keyframes nx-fibra {
    0%   { background-position: 0 -110%; }
    100% { background-position: 0 110%; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-sotto-voci::before {
        animation: none;
        background-position: 50% 50%;
    }

    .nx-app-sidebar .nx-area-toggle:hover,
    .nx-app-sidebar .nx-sotto-toggle:hover {
        text-shadow: none;
    }
}

/* IL TITOLO DELLA SOTTO-AREA, UGUALE ALLA MACRO ✓ — MISURATO ✓ (15/10/2026): `nx-menu-aree.css` da solo non
   bastava ✗ (il peso restava 600 ✗ e la spaziatura **negativa** ✗: valori ereditati ✓, non suoi ✗). Qui, nell'ultimo
   foglio della cascata ✓, si danno al titolo della sotto-area **gli stessi valori misurati** sulla macro area ✓:
   0,855rem ✓ peso 800 ✓ spaziatura 1,2px ✓. Così «Vetrine» si legge come «SELLER» ✓ — le sue parole ✓ — e resta
   la maiuscola a distinguerli ✓ (la gerarchia ✓). */
.nx-app-sidebar .nx-sotto-toggle {
    font-family: inherit;
    font-size: 0.855rem;
    font-weight: 800;
    letter-spacing: 1.2px;
}

/* L'ULTIMO CORNICINO ✓ — VISTO NELLA FIGURA ✓ (15/10/2026, `docs/riferimenti/aside-effetto-colonna.png` ✓): attorno
   all'icona della voce «dove sei» (la saetta di «Promozioni e occasioni» ✓) restava un **cornice quadrata** ✗.
   Viene dai **fili di casa** sul collegamento attivo ✓ (`apps.css` ✓ `main.css` ✓: `border-left-color` ✗ sul
   `.nx-app-nav-link.is-active` ✓, che colla sua larghezza disegna un riquadro attorno al primo figlio ✓).
   LE SUE PAROLE ✓: niente scatole ✗ — quindi **niente** ✗. Qui si toglie ✓ e la voce dove sei resta colla **luce
   sulle lettere** ✓ e l'icona d'oro ✓: gli stessi segni ✓, senza cornice ✗. */
.nx-app-sidebar .nx-area-voce.is-active,
.nx-app-sidebar .nx-aree-comuni .nx-app-nav-link.is-active,
.nx-app-sidebar .nx-area-voce.is-active > :first-child,
.nx-app-sidebar .nx-aree-comuni .nx-app-nav-link.is-active > :first-child {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
}

/* IL CORNICINO — CHIUSO COL MARTELLO ✓. MISURATO ✓: sul collegamento attivo i fili di casa (`apps.css` ✓
   `main.css` ✓) disegnano un riquadro attorno all'icona ✗ e la mia regola a tre classi non bastava ✗ (vincevano
   loro ✓). LE SUE PAROLE ✓: niente scatole ✗ → qui si chiude con `!important` ✓ **solo** su bordo ✓ fondo ✓ ombra ✓
   contorno ✓, e scritto perché ✓ (la misura c'è ✓: la figura ✓ e la prova ✓). */
.nx-app-sidebar .nx-area-voce.is-active > :first-child,
.nx-app-sidebar .nx-aree-comuni .nx-app-nav-link.is-active > :first-child,
.nx-app-sidebar .nx-area-voce.is-active,
.nx-app-sidebar .nx-aree-comuni .nx-app-nav-link.is-active {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: none !important;
}

/* ============================================================================
   I DUE TITOLI, UNO ACCANTO ALL'ALTRO ✓ — MISURATI ✓ (15/10/2026, `misura_titoli.py` ✓)

   LE SUE PAROLE: «io vedo che ci sono differenze in larghezza e posizione?» ✓ — domanda giusta ✓, e la risposta sta
   nei numeri ✓:
        AREA  (Seller)  : x=13  largo=303  alto=42  imbottitura=11px 12px  distanza icona-nome=**11px**
        SOTTO (Vetrine) : x=21  largo=287  alto=42  imbottitura=11px 12px  distanza icona-nome=**10px**
   MISURA ✓ PESO ✓ SPAZIATURA ✓ ALTEZZA ✓ e IMBOTTITURA del pulsante ✓ sono **già gli stessi** ✓: le differenze vere
   erano **due** ✗ —
     · **1px** di distanza fra icona e nome ✓ (11 contro 10 ✓): un residuo ✓ → qui si unifica ✓;
     · **8px di rientro** dei titoli di sotto-area ✓ (x 13 → 21 ✓): **voluto** ✓ ed è la gerarchia ✓ (il rientro è
       quello che tiene dentro il filo e le voci ✓). Se lo vuole via ✗ è **una riga** ✓:
       `.nx-app-sidebar .nx-area-voci .nx-sotto-toggle { margin-left: -8px; }` ✓.
   E LA SUA SCATOLA ✓, parola per parola ✓ (`padding: 1px 4px` ✓ `border-radius: 5px` ✓ coll'ellissi ✓): così il
   lume sulle lettere e il bagliore del passaggio **riempiono** la pastiglia ✓ invece di sbordare ✓ — «l'effetto non
   stona, riempie bene» ✓. Vale per i **titoli** (area ✓ sotto-area ✓); le VOCI restano a capo ✓ come prima ✓
   (i loro nomi sono lunghi ✓ e non si tagliano ✗): quelle non le nominava ✓.
   ============================================================================ */
.nx-app-sidebar .nx-area-toggle,
.nx-app-sidebar .nx-sotto-toggle {
    gap: 11px;
}

.nx-app-sidebar .nx-area-nome,
.nx-app-sidebar .nx-sotto-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 4px;
    border-radius: 5px;
}

/* LE ULTIME DUE COSE D'ASIDE ✓ (15/10/2026, guardando la figura ✓)

   1) LA PASTIGLIA DORATA DELL'ICONA DI «I NOSTRI SERVIZI» ✗ — VISTA ✓ (una scatola vera ✗, riga 382 di questo
      foglio: `background: linear-gradient(...)` ✓). Le sue parole valgono per **tutta** la colonna ✗: niente
      scatole ✓. Qui si spegne ✓ e resta l'icona ✓ coll'oro al passaggio ✓ come tutte le altre ✓.
   2) LE ICONE TROPPO SPENTE ✗ — `--text-dim` ✓ = quasi invisibili sul fondo scuro ✗ (misurato: si vedevano appena
      ✗). Passano a `--text-secondary` ✓: si vedono ✓ senza gridare ✗ (i titoli restano il segno forte ✓).
   (E **non** era una scatola la «banda» che vedevo dietro `Vetrine` ✓: è l'**aurora** di casa ✓ — un velo di luce
   morbido dietro le voci ✓ — `nx-aurora` ✓, riga 713 di `nx-menu-aree.css` ✓. Se lo vuole via ✗, si spegne con una
   riga ✓: `.nx-area-voci::before { display: none; }` ✓.) */
.nx-app-sidebar .nx-sotto--servizi > .nx-sotto-toggle .nx-sotto-ico {
    background: none;
    box-shadow: none;
}

.nx-app-sidebar .nx-area-toggle > .nx-area-ico,
.nx-app-sidebar .nx-sotto-toggle > .nx-sotto-ico {
    color: var(--text-secondary);
}

.nx-app-sidebar .nx-area.is-attiva > .nx-area-toggle > .nx-area-ico {
    color: var(--accent-primary);
}

/* ============================================================================
   IL FILO DELLE SOTTO-AREE — RIFATTO PER COSTRUZIONE ✓ (15/10/2026, le sue parole)

   LE SUE PAROLE: «sballa o per icona non posizionata o non so… non è uguale per tutti e su light themes non si
   vede solo in dark mode si vede» ✓ — TUTT'E DUE VERE ✓, e c'era anche una **terza** cosa che non si vedeva ✗.

   PERCHÉ SBALLAVA ✗: era `left: 21px` ✓ `top: 36px` ✓ — **numeri fissi** ✗ che valevano finché le misure
   restavano quelle ✓. Io ho cambiato imbottiture ✓ distanze ✓ icone (30px → 20px ✗) → il filo **è rimasto
   indietro** ✗. Un filo posizionato a occhio ✗ sbaglia **sempre**, prima o poi ✓.
   PERCHÉ IN CHIARO NON SI VEDEVA ✗: il colore era `--nx-aside-ring` ✓ = **bianco al 12%** ✗ — una riga **bianca** ✓:
   perfetta sul fondo scuro ✓, **invisibile** sul chiaro ✗.
   E LA TERZA ✗: la «vena di luce» che avevo aggiunto ieri sera stava su `.nx-sotto-voci::before` ✓ **senza
   `content`** ✗ → un pseudo-elemento senza `content` **non esiste** ✗ → l'energia non si è mai vista ✗ (e la
   prova non se n'è accorta ✗: leggeva `auto` e le andava bene ✗ — **prova debole** ✓, raddrizzata ✓).

   ADESSO ✓, **per costruzione** ✓:
     · il filo sta sul **pannello delle voci** ✓ (`content: ""` ✓: adesso esiste ✓);
     · `top: 0` ✓ `bottom: 6px` ✓ = **dalla prima voce all'ultima** ✓ senza numeri magici ✗;
     · `left: calc(rientro + imbottitura delle voci)` ✓ = **il bordo sinistro delle icone** ✓: le due misure sono
       scritte in variabili qui sotto ✓ → se un giorno cambia il rientro ✓ **cambia anche il filo** ✓ (una cosa sola ✓);
     · il colore è **l'oro di casa** ✓ coll'alfa ✓ (`hsla(var(--h-accent)…)` ✓): si vede sul **chiaro** ✓ e sullo
       **scuro** ✓ (una tinta sola ✓, mai un bianco ✗).
   ============================================================================ */

/* 1) IL FILO VECCHIO SI SPEGNE ✓ */
.nx-app-sidebar .nx-sotto.is-aperto::before {
    content: none;
    width: 0;
    background: none;
    animation: none;
}

/* 2) IL FILO VERO ✓ — e le due misure da cui nasce la sua posizione ✓ */
.nx-app-sidebar .nx-sotto-voci {
    /* MISURATO ✓ (15/10/2026, colla riga vera in colonna ✓): il bordo sinistro delle icone sta a **33px** dal bordo
       di questo pannello ✓, e la catena è **tre** misure di casa ✓:
          12px  l'imbottitura di questo pannello ✓ (`.nx-sotto-voci` ✓)
           9px  la riga della voce ✓ (`.nx-app-nav-item` ✓)
          12px  l'imbottitura della voce ✓ (`.nx-area-voce` ✓)
       Il filo usa la **somma** ✓ — non un numero a occhio ✗ (era `left: 21px` ✗: sbagliava di 12px ✓, ed è
       esattamente il «sballa … non è uguale per tutti» che ha visto lui ✓). E se un giorno cambia **una** delle tre ✓,
       cambia anche il filo ✓: la prova confronta `left` coll'icona **vera** ✓ e diventa rossa ✓ invece di sbagliare
       in silenzio ✗. */
    --nx-fibra-pannello: 12px;
    --nx-fibra-riga: 9px;
    --nx-fibra-voce: 12px;
    position: relative;
}

.nx-app-sidebar .nx-sotto-voci::before {
    content: "";
    position: absolute;
    left: calc(var(--nx-fibra-pannello) + var(--nx-fibra-riga) + var(--nx-fibra-voce));
    top: 0;
    bottom: 6px;
    width: 1px;
    background-image: linear-gradient(180deg,
        hsla(var(--h-accent), 92%, 58%, 0.10) 0%,
        hsla(var(--h-accent), 98%, 66%, 0.62) 42%,
        hsla(var(--h-accent), 92%, 58%, 0.12) 78%,
        transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 220%;
    background-position: 0 -60%;
    animation: nx-fibra 5.2s linear infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-sotto-voci::before {
        animation: none;
        background-position: 0 0;
    }
}

/* IL FILO: DOVE COMINCIA E DOVE FINISCE ✓ — MISURATO ✓ (15/10/2026, le sue parole: «vedi che è sballata la
   linea?» ✓). I numeri, misurati nel pannello vero ✓:
       prima icona : **23px** dal bordo ALTO del pannello ✓
       ultima icona: **19px** dal bordo BASSO ✓
   e il filo invece diceva `top: 0` ✗ `bottom: 6px` ✗ → **sporgeva 23px sopra** la prima icona ✗ e **13px sotto**
   l'ultima ✗: per questo «sballa» ✓ — cominciava e finiva dove non c'è nessuna icona ✓.
   Adesso è pinzato a **quelle due misure** ✓ (cambiate quando cambia il disegno ✓) e la **prova lo confronta
   colla prima e coll'ultima icona VERE** ✓: se una delle due si sposta ✓ la prova diventa **rossa** ✓ e si
   rimisura ✓ — invece di fidarsi di un numero vecchio ✗ (è lo stesso patto del «left» ✓).
   COSÌ ✓ la fibra comincia **sull'icona della prima voce** ✓ e finisce **sull'ultima** ✓: è la «fibra che porta
   energia alle singole voci» ✓ — dalla prima all'ultima ✓, non dal bordo al bordo ✗. */
.nx-app-sidebar .nx-sotto-voci {
    --nx-fibra-alto: 23px;
    --nx-fibra-basso: 19px;
}

.nx-app-sidebar .nx-sotto-voci::before {
    top: var(--nx-fibra-alto);
    bottom: var(--nx-fibra-basso);
}

/* ============================================================================
   IL FILO — ADESSO SENZA **NESSUN** NUMERO MAGICO ✓ (15/10/2026, terza misura)

   MISURATO ✓ e questa è la lezione ✓: la prima icona sta a **23px** dal bordo del pannello in un contesto ✓ e a
   **20px** in un altro ✓ (dipende da cosa c'è dentro la voce ✓: una riga o due ✓). Quindi **pinzare un numero** ✗
   — come avevo appena fatto (23/19 ✗) — avrebbe **sbagliato nell'altro contesto** ✗: lo stesso errore di prima ✓,
   solo più piccolo ✓. **Nessun numero regge ✗**: la posizione va **ricavata dalla struttura** ✓.

   COME ✓, e questa volta in modo definitivo ✓: il filo sta sulla **LISTA delle voci** ✓ (`.nx-sotto-voci > ul` ✓),
   che è **esattamente** l'altezza delle voci ✓ — né un pixel di più ✗ né uno di meno ✗. Quindi:
     · `top: 0` ✓ `bottom: 0` ✓ = **dalla prima voce all'ultima** ✓ **per costruzione** ✓ (non per misura ✗);
     · `left` = **l'imbottitura delle voci** ✓ (`--nx-fibra-voce: 12px` ✓, misurata ✓): il filo passa **sul bordo
       sinistro delle icone** ✓ esattamente come loro ✓ — una misura sola ✓, la loro ✓;
     · e le due variabili vecchie (`--nx-fibra-alto` / `--nx-fibra-basso` ✗) **non servono più** ✓: tolte ✓.
   La prova confronta il filo coll'**icona vera** ✓ e pretende `top`/`bottom` a **zero** ✓ (= le voci ✓): se qualcuno
   aggiunge un margine alla lista ✗, la prova lo dice ✓.
   ============================================================================ */

/* 1) il filo del pannello si spegne ✓ (stava un gradino più in là ✗: pannello invece di lista ✗) */
.nx-app-sidebar .nx-sotto-voci::before {
    content: none;
    animation: none;
    background: none;
}

/* 2) il filo vero ✓ — sulla LISTA delle voci ✓ */
.nx-app-sidebar .nx-sotto-voci > ul {
    /* MISURATO ✓ 21px: la riga della voce ha 9px di margine ✓ (`nx-app-nav-item` ✓) e la voce 12px d'imbottitura ✓
       (`nx-area-voce` ✓) — e il filo passa **sul bordo sinistro delle icone** ✓ (la prova lo confronta coll'icona VERA ✓). */
    --nx-fibra-voce: 21px;
    position: relative;
}

.nx-app-sidebar .nx-sotto-voci > ul::before {
    content: "";
    position: absolute;
    left: var(--nx-fibra-voce);
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(180deg,
        hsla(var(--h-accent), 92%, 58%, 0.10) 0%,
        hsla(var(--h-accent), 98%, 66%, 0.62) 42%,
        hsla(var(--h-accent), 92%, 58%, 0.12) 78%,
        transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 220%;
    background-position: 0 -60%;
    animation: nx-fibra 5.2s linear infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .nx-app-sidebar .nx-sotto-voci > ul::before {
        animation: none;
        background-position: 0 0;
    }
}