/**
 * Fedeltà.
 *
 * PERCHE' QUESTO FOGLIO E' PICCOLO
 * La sezione non e' stata riscritta ma **spostata e rivestita**: il JavaScript
 * della fedelta' cerca 251 identificatori nel documento, e rifare il markup da
 * zero ne romperebbe una parte senza potersene accorgere (assegnare punti vuole
 * un chip e un socio, riscattare vuole un premio: nella demo non si prova
 * niente di tutto questo).
 *
 * Quindi qui c'e' il vestito dell'intestazione nuova, e il resto continua a
 * usare `mytap-fidelity.css`. Quando i pannelli sotto verranno rifatti uno per
 * volta, quel foglio si svuotera' e questo crescera'.
 */

.fedelta-testa { padding: 0 0 4px; }

@media (max-width: 900px) { .fedelta-testa { padding: 0 16px 4px; } }
@media (max-width: 640px) { .fedelta-testa { padding: 0 15px 4px; } }

/* ── Le vecchie linguette ──────────────────────────────────────────── */

/**
 * Nel disegno «Premi» e «Aspetto» sono bottoni nell'intestazione, non linguette
 * in una barra a parte. La barra viene spenta, **non tolta dal markup**: i suoi
 * bottoni sono gli stessi che `deskFidSetTab()` accende e spegne per segnare
 * quale pannello e' aperto. Toglierli vorrebbe dire inseguire quella funzione
 * dentro un file da 2935 righe per un guadagno estetico.
 */
.mt-dashboard #fid-wrap .fid-main-tabs { display: none !important; }

/* Il bottone dell'intestazione che corrisponde al pannello aperto si accende,
   cosi' si capisce dove si e' anche senza le linguette. */
.fedelta-testa .nk-btn.gh[data-fid-vai].attivo {
    background: color-mix(in oklch, var(--nk-accent) 10%, var(--nk-ink));
    border-color: color-mix(in oklch, var(--nk-accent) 34%, var(--nk-line));
    color: var(--nk-accent);
    font-weight: 650;
}

/* ── Le due schede del banco ───────────────────────────────────────── */

.fedelta-banco { margin-top: 14px; }

/* La barra di ricerca e' quella di prima, spostata qui dentro dal JavaScript:
   perde il vestito vecchio e prende quello del kit, senza cambiare markup. */
.fedelta-cerca .fid-search-box {
    display: flex; align-items: center; gap: 9px;
    background: var(--nk-ink) !important;
    border: 1px solid var(--nk-line) !important;
    border-radius: 999px !important;
    padding: 9px 15px !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
}
.fedelta-cerca .fid-search-box input {
    border: 0 !important; outline: 0 !important; background: none !important;
    font-family: var(--nk-font) !important; font-size: 13px !important;
    color: var(--nk-paper) !important;
    width: 100%; padding: 0 !important;
}
.fedelta-cerca .fid-search-box svg { color: var(--nk-muted-2); flex-shrink: 0; }

/* ── Il ritorno alla schermata principale ──────────────────────────── */

.fedelta-indietro { display: inline-block; margin-bottom: 10px; font-size: 12.5px; }
.fedelta-indietro[hidden] { display: none; }

.fedelta-scorciatoie { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fedelta-scorciatoie[hidden] { display: none; }

.fedelta-solo-principale[hidden] { display: none !important; }

/* ── Scegliere il cliente a cui assegnare ──────────────────────────── */

.fedelta-scegli { position: relative; }

.fedelta-scelti {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
    background: var(--nk-ink);
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-md);
    box-shadow: 0 4px 24px rgb(0 0 0 / .12);
    padding: 5px;
    max-height: 240px; overflow-y: auto;
}
.fedelta-scelti[hidden] { display: none; }

.fedelta-scelta {
    display: block; width: 100%; text-align: left;
    border: 0; background: none; cursor: pointer;
    padding: 8px 11px; border-radius: var(--nk-r-xs);
    font-family: var(--nk-font);
}
.fedelta-scelta:hover { background: var(--nk-ink-2); }
.fedelta-scelta-nome { display: block; font-size: 13px; font-weight: 600; color: var(--nk-paper); }
.fedelta-scelta-sotto { display: block; font-size: 11.5px; color: var(--nk-muted); margin-top: 1px; }
.fedelta-nessuno { padding: 10px 11px; font-size: 12.5px; color: var(--nk-muted); }

/* Chi hai scelto, al posto del campo di ricerca: cosi' si vede a colpo d'occhio
   a chi stanno per andare i punti, che e' l'errore piu' facile da fare. */
.fedelta-scelto {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px;
    border: 1px solid color-mix(in oklch, var(--nk-accent) 26%, var(--nk-line));
    background: color-mix(in oklch, var(--nk-accent) 5%, var(--nk-ink));
    border-radius: var(--nk-r-sm);
}
.fedelta-scelto[hidden] { display: none; }

.fedelta-importo { display: flex; gap: 8px; align-items: center; margin-top: 9px; }
.fedelta-importo .nk-inp { flex: 1; min-width: 0; }
.fedelta-importo .nk-btn { flex-shrink: 0; }

.fedelta-banco .nk-esito { display: block; margin: 8px 0 0; }
.fedelta-banco .nk-esito:empty { display: none; }

/* ── La tabella «Iscritti» ─────────────────────────────────────────── */

.fid-iscritti { margin: 14px 0; padding: 16px; }
.fid-iscritti .nk-card-top { margin-bottom: 12px; }
.fid-iscritti-cerca { flex: 1; min-width: 150px; max-width: 260px; }

/* Il campo di ricerca e' quello di prima, spostato qui dal JavaScript: perde il
   vestito vecchio e prende quello del kit, senza cambiare markup. */
.fid-iscritti-cerca .fid-search-box {
    display: flex; align-items: center; gap: 9px;
    background: var(--nk-ink) !important;
    border: 1px solid var(--nk-line) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    box-shadow: none !important; margin: 0 !important; max-width: none !important;
}
.fid-iscritti-cerca .fid-search-box input {
    border: 0 !important; outline: 0 !important; background: none !important;
    font-family: var(--nk-font) !important; font-size: 12.5px !important;
    color: var(--nk-paper) !important; width: 100%; padding: 0 !important;
}
.fid-iscritti-cerca .fid-search-box svg { color: var(--nk-muted-2); flex-shrink: 0; }

.fid-iscritti-recapito { font-size: 11.5px; color: var(--nk-muted); margin-top: 1px; }
.fid-iscritti-azione { text-align: right; white-space: nowrap; }
.fid-iscritti-fermo { color: var(--nk-warn-ink) !important; font-weight: 550; }
.fid-iscritti-premio { cursor: pointer; font-family: var(--nk-font); }
.fid-iscritti tbody tr:hover td { background: var(--nk-ink); }

/**
 * ⚠ QUI C'ERA UNA MEDIA QUERY CHE NASCONDEVA IL DOPPIONE **SOLO SUL COMPUTER**.
 *
 * Diceva: «l'elenco a schede resta nel documento ma sul computer lo copre la
 * tabella». Il guaio e' quel *sul computer*: sotto i 901px l'elenco tornava
 * acceso, **sotto la tabella**, e sul telefono si vedevano due volte gli stessi
 * iscritti. Chi lavora sul computer non poteva accorgersene: li' era giusto.
 *
 * L'elenco doppio non c'e' piu' (04/08/2026). La barra vecchia si nasconde
 * adesso a **tutte** le larghezze: la ricerca e' quella dentro la scheda
 * «Iscritti», trapiantata li' da `fedelta-testa.js`.
 *
 * La lezione: nascondere un doppione con una media query non toglie il
 * doppione, lo sposta a una larghezza che non guardi.
 */
.mt-dashboard #desk-fid-tab-clienti .fid-toolbar { display: none !important; }

/* ── Premi ─────────────────────────────────────────────────────────── */

.fid-premi-guscio { display: block; }

/**
 * TRE COLONNE, non «quante ce ne stanno».
 *
 * La griglia usava `.nk-g2` del kit, che e' `auto-fit minmax(215px, 1fr)`: su
 * uno schermo largo diventano **cinque colonne** di schede strette. E' la stessa
 * trappola gia' presa con Pagine: il valore del disegno mostra il numero giusto
 * di colonne solo perche' nel mockup gli elementi sono pochi. Il numero di
 * colonne si decide, non si lascia decidere alla larghezza.
 */
#dFidRewardsList { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) { #dFidRewardsList { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { #dFidRewardsList { grid-template-columns: minmax(0, 1fr); } }

.fid-premio { padding: 14px; }
.fid-premio + .fid-premio { margin-top: 0; }   /* lo spazio lo fa la griglia */

.fid-premio-riga { display: flex; gap: 11px; align-items: flex-start; }
.fid-premio-corpo { flex: 1; min-width: 0; }

.fid-premio-testa { display: flex; align-items: center; gap: 8px; }
.fid-premio-nome {
    margin: 0; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fid-premio-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* La foto del premio: quadrata, come nel disegno */
.mt-dashboard #desk-fid-tab-premi .dFidPremioThumb {
    width: 74px; height: 74px; flex-shrink: 0;
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--nk-muted-2);
    overflow: hidden;
    border: 0; padding: 0; margin: 0;
}
.mt-dashboard #desk-fid-tab-premi .dFidPremioThumb img {
    width: 100%; height: 100%; object-fit: cover;
}

/* L'ultima casella della griglia: tratteggiata, come nel disegno */
.fid-premio-aggiungi {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px;
    min-height: 112px;
    border: 1.5px dashed var(--nk-line-2);
    border-radius: var(--nk-r-md);
    background: transparent;
    font-family: var(--nk-font); font-size: 13px; font-weight: 550;
    color: var(--nk-muted);
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.fid-premio-aggiungi:hover {
    border-color: color-mix(in oklch, var(--nk-accent) 45%, var(--nk-line-2));
    color: var(--nk-accent);
    background: color-mix(in oklch, var(--nk-accent) 4%, transparent);
}
.fid-premio-piu { font-size: 24px; line-height: 1; opacity: .45; }

/* ── I campi del kit dentro il contenitore vecchio ─────────────────── */

/**
 * ⚠ SENZA QUESTO BLOCCO I CAMPI NUOVI ESCONO CON IL VESTITO VECCHIO.
 *
 * `mytap-fidelity.css` ha una regola che prende **ogni** campo dentro
 * `#fid-wrap` per tipo, non per classe:
 *
 *     #fid-wrap input[type="text"], #fid-wrap input[type="number"],
 *     #fid-wrap input[type="url"], #fid-wrap textarea, #fid-wrap select { ... }
 *
 * e ci mette `!important` su bordo, sfondo e colore. Un `.nk-inp` scritto qui
 * dentro se lo prende tutto: fondo bianco al 60%, angoli da 11px e un
 * `margin-bottom: 14px` che sballa le distanze. Non da' nessun errore, si vede
 * solo aprendo la schermata, ed e' la stessa trappola gia' presa tre volte
 * (`#pages-wrap` e `#dCrm-wrap` spenti sotto i 900px).
 *
 * Si rimedia qui e non togliendo la regola vecchia, perche' quella veste ancora
 * i pannelli della fedelta' che nessuno ha rifatto (il telefono, la creazione
 * del programma, le finestre). Se ne va con l'ultimo di quelli.
 *
 * Ci vuole `.mt-dashboard` davanti: senza, le due regole hanno la stessa forza
 * e vince l'ultima caricata, che non e' detto sia questa.
 */
.mt-dashboard #fid-wrap .nk-inp {
    width: 100%;
    background: var(--nk-ink) !important;
    border: 1px solid var(--nk-line) !important;
    color: var(--nk-paper) !important;
    border-radius: var(--nk-r-sm);
    padding: 10px 13px;
    margin-bottom: 0;
    font-family: var(--nk-font);
    font-size: 13px;
}
.mt-dashboard #fid-wrap .nk-inp:focus {
    border-color: color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--nk-accent) 14%, transparent);
    outline: 0;
}

/**
 * ⚠ E DUE REGOLE VECCHIE ARRIVANO QUI **ATTRAVERSO GLI IDENTIFICATORI**.
 *
 * Sono il prezzo della regola di questa sezione: gli `id` si tengono perche' li
 * cerca il JavaScript, e `mytap-fidelity.css` li usa come appigli del vestito
 * vecchio. Vestendo per nome, prendono anche il markup nuovo:
 *
 *     #fid-wrap #dFidCardInner { width: 240px; padding: 20px !important;
 *                                border-radius: 18px !important }
 *     #fid-wrap #dFidCfgBtnPoints, ...Stamps, ...Private { flex: 1;
 *                                padding: 9px !important; border-radius: 11px !important }
 *
 * La tessera usciva larga **240px** dentro una colonna da 320, e i tre bottoni
 * del tipo di programma erano tre rettangoli stirati a un terzo di scheda
 * ciascuno invece delle pastiglie del disegno.
 *
 * **Anche qui vanno gli identificatori.** Due `id` pesano piu' di un `id` e due
 * classi, quindi `.mt-dashboard #fid-wrap .fedelta-wcard` perderebbe lo stesso,
 * `!important` o no. E' brutto e va scritto una volta: se ne va con
 * `mytap-fidelity.css`, quando l'ultimo pannello vecchio sara' rifatto.
 */
.mt-dashboard #fid-wrap #dFidCardInner {
    width: auto;
    max-width: 300px;
    padding: 16px !important;
    border-radius: var(--nk-r-md) !important;
}
.mt-dashboard #fid-wrap #dFidCfgBtnPoints,
.mt-dashboard #fid-wrap #dFidCfgBtnStamps,
.mt-dashboard #fid-wrap #dFidCfgBtnPrivate {
    flex: 0 0 auto;
    padding: 7px 15px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-family: var(--nk-font);
}

/* ── Aspetto tessera ───────────────────────────────────────────────── */

/**
 * LE DUE COLONNE DEL DISEGNO.
 *
 * A sinistra i campi, a destra l'anteprima che segue mentre si sceglie. La
 * seconda e' larga 320px fisse **e sta ferma mentre si scorre**: sotto ai campi
 * c'e' roba per piu' di uno schermo, e un'anteprima che scappa in alto non serve
 * a niente, perche' la si guarda proprio mentre si cambia un campo.
 *
 * Sotto i 1000px vanno una sotto l'altra, con l'anteprima **prima**: su uno
 * schermo stretto la cosa che si vuole vedere per prima e' la tessera.
 */
/**
 * IL CAPPELLO DI LARGHEZZA, e perche' non e' quello del disegno.
 *
 * Nel disegno l'app intera sta in 1240px, quindi l'area dei contenuti e' ~1000
 * e le due colonne vengono 660 + 320. **Copiando quel 1000 la schermata resta
 * con una spanna di vuoto a destra** su qualunque schermo vero: la misura del
 * disegno vale per il mockup, che l'app se la disegna dentro un riquadro suo.
 *
 * Il cappello serve lo stesso, perche' senza, su uno schermo da 1866 la colonna
 * dei campi arriva a 1250px e ogni etichetta costa una traversata dell'occhio.
 * Ma va sulla larghezza **dell'app**, non su quella del mockup: 1240 lascia i
 * campi a ~900, che e' largo e ancora leggibile.
 *
 * (Su Pagine il cappello andava tolto del tutto: li' e' una galleria e lo spazio
 * in piu' diventa schede in piu'. Qui e' un modulo, e diventerebbe solo fatica.
 * La regola non e' «cappello si / cappello no», e' cosa c'e' dentro.)
 */
.fedelta-split { display: flex; gap: 20px; align-items: flex-start; max-width: 1240px; }
.fedelta-colonna { flex: 1; min-width: 0; }
.fedelta-colonna-anteprima { width: 320px; flex-shrink: 0; }
.fedelta-anteprima { position: sticky; top: 8px; }

@media (max-width: 1000px) {
    /* `align-items: stretch` va rimesso: sopra c'e' `flex-start`, che in una
       colonna non decide piu' l'allineamento verticale ma la **larghezza**, e
       la colonna dei campi si stringeva sul suo contenuto lasciando mezzo
       schermo vuoto a destra. Visto solo misurandolo nel browser. */
    .fedelta-split { flex-direction: column; align-items: stretch; }
    .fedelta-colonna-anteprima { width: 100%; order: -1; }
    .fedelta-anteprima { position: static; }
}

/* I campioni di colore */

.fedelta-campioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fedelta-campione {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 2px solid var(--nk-ink);
    box-shadow: 0 0 0 1px var(--nk-line-2);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.fedelta-campione.on { box-shadow: 0 0 0 2px var(--nk-accent); }
.fedelta-campione:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 3px; }

/**
 * Il «＋» del disegno e' il selettore di colore del sistema, nascosto dentro il
 * campione: apre la tavolozza vera del computer senza che ne scrivessimo una.
 * Il campo resta cliccabile (copre tutto il quadrato) ma invisibile, perche' il
 * suo aspetto lo decide il sistema operativo e non si puo' vestire.
 */
.fedelta-campione-libero {
    position: relative; overflow: hidden;
    background: var(--nk-ink-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--nk-muted-2); font-size: 15px; line-height: 1;
}
.fedelta-campione-libero input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.fedelta-colore-hex {
    font-family: var(--nk-mono, monospace);
    font-size: 11.5px; color: var(--nk-muted);
    letter-spacing: .02em;
}

/* Il logo: il riquadro accanto al bottone «Cambia» */

.fedelta-logo-riga { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* Due identificatori e non una classe: `dFidUploadLogo()` sostituisce il nodo al
   primo caricamento (da `<span>` con l'iniziale a `<img>`), e il vestito deve
   reggere tutti e due senza che quella funzione sappia com'e' fatto. Serve la
   forza di due identificatori per battere `#fid-wrap .upload-avatar` del foglio
   vecchio, che e' ancora caricato. */
.mt-dashboard #fid-wrap #dFidLogoThumb {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink-3);
    border: 1px solid var(--nk-line);
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 600; color: var(--nk-muted-2);
    margin: 0; padding: 0;
}

.fedelta-aspetto .nk-esito:empty { display: none; }

.fedelta-salva { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fedelta-salva .nk-esito { margin-right: 0; }

/* L'anteprima della tessera */

.fedelta-wcard {
    border-radius: var(--nk-r-md);
    padding: 16px;
    color: #fff;
    box-shadow: 0 6px 24px rgb(0 0 0 / .18);
    max-width: 300px;
}
.fedelta-wtop { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.fedelta-wintesta { min-width: 0; }

.mt-dashboard #fid-wrap #dFidCardLogoBox {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 7px;
    background: rgb(255 255 255 / .9);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.mt-dashboard #fid-wrap #dFidCardLogoImg {
    width: 100%; height: 100%;
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #1a1a2e;
}

.fedelta-wname {
    font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fedelta-wtipo { font-size: 10px; opacity: .7; margin-top: 1px; }
.fedelta-wpts { font-size: 29px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.fedelta-wsub { font-size: 10.5px; opacity: .8; margin-top: 3px; }

.fedelta-wbar {
    height: 5px; background: rgb(255 255 255 / .25);
    border-radius: 999px; margin: 13px 0 6px; overflow: hidden;
}
.fedelta-wbar i { display: block; height: 100%; background: rgb(255 255 255 / .9); border-radius: 999px; }

.fedelta-wstamps { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }

.fedelta-wpiede {
    font-size: 9.5px; opacity: .65;
    display: flex; justify-content: space-between; gap: 8px;
    margin-top: 10px;
}

/* ── Come funziona ─────────────────────────────────────────────────── */

/**
 * DUE COLONNE, non due schede una sotto l'altra.
 *
 * Le due schede non hanno niente da dirsi e non si leggono in sequenza: una
 * sono le regole dei punti, l'altra da dove partono i messaggi. Impilate,
 * lasciavano mezzo schermo vuoto a destra e obbligavano a scorrere per vedere
 * la seconda. Affiancate si vedono tutte e due insieme, ed e' la stessa forma
 * della schermata a fianco («Aspetto tessera»), che e' quella da cui si arriva.
 *
 * `align-items: start` e' necessario: se no la scheda dei canali si allunga fino
 * all'altezza dell'altra, che e' molto piu' alta, e resta mezza vuota.
 */
.fedelta-regole {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 20px;
    align-items: start;
    max-width: 1240px;
}

/* Il kit distanzia le schede in verticale (`.nk-card + .nk-card`): dentro una
   griglia lo spazio lo fa gia' il `gap`, e quel margine sfalserebbe le colonne. */
.fedelta-regole .nk-card + .nk-card { margin-top: 0; }

@media (max-width: 1000px) {
    .fedelta-regole { grid-template-columns: minmax(0, 1fr); }
}

.fedelta-modi { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }

.fedelta-modo {
    border: 1px solid var(--nk-line);
    background: var(--nk-ink);
    color: var(--nk-muted);
    border-radius: 999px;
    padding: 7px 15px;
    font-family: var(--nk-font); font-size: 12.5px; font-weight: 550;
    cursor: pointer;
}
.fedelta-modo:hover { color: var(--nk-paper); }
/* `active` e non `on`: e' la classe che accendono `dFidSetType()` e
   `dFidSetConfigType()`, e non si tocca il loro codice per una classe. */
.fedelta-modo.active {
    border-color: color-mix(in oklch, var(--nk-accent) 34%, var(--nk-line));
    background: color-mix(in oklch, var(--nk-accent) 10%, var(--nk-ink));
    color: var(--nk-accent);
    font-weight: 650;
}

/* Il tipo di tessera si sceglie una volta e poi e' bloccato: il puntatore lo
   dice prima del clic, se no si clicca e non succede niente. */
.fedelta-modo.is-locked:not(.active) { opacity: .45; cursor: not-allowed; }

.fedelta-regola-campo { margin-top: 14px; }

.fedelta-euro { display: flex; align-items: center; gap: 9px; }
.fedelta-euro .nk-inp { max-width: 130px; }
.fedelta-euro-coda { font-size: 12.5px; color: var(--nk-muted); }

.fedelta-testo { font-family: var(--nk-mono, monospace); font-size: 12px; line-height: 1.5; resize: vertical; }

/* Lo stato dei canali: chi lo aggiorna gli scrive dentro `style.color`, quindi
   qui si decide solo peso e misura. */
.fedelta-canale-stato { font-size: 11.5px; font-weight: 600; color: var(--nk-muted); }

/* La colonna dei canali e' stretta (400px): lo stato e il collegamento non
   devono spezzarsi mai a meta' parola. A stringersi e' la descrizione, che una
   riga in piu' la regge; `Non configurata / Configura` su due righe no.
   Il restringimento lo fa gia' `.nk-rm` del kit, che ha `min-width: 0`: un
   minimo scritto qui lo toglierebbe, ed e' proprio quello che mandava a capo
   l'azione. */
.fedelta-canali .fedelta-canale-stato,
.fedelta-canali .nk-ra .nk-a { white-space: nowrap; }

/* ── Fedeltà non ancora attiva ─────────────────────────────────────── */

/* Lo stesso cappello delle altre due schermate della sezione, cosi' passando da
   una all'altra il contenuto non salta di larghezza. */
/**
 * ⛔ ED E' UNA COLONNA CON UN `gap`, per la stessa ragione della Home.
 * [17/08/2026, il titolare: «stessa cosa la vedo nella sezione fedeltà vuota,
 * che le card sono troppo attaccate»]
 *
 * Misurato sulla demo di staging, gli stacchi fra i quattro blocchi erano
 * **17, -1, 14**: tre numeri diversi, e il secondo negativo. Il riquadro
 * dell'invito e le tre schede numerate **si toccavano**, perche' `.nk-empty` del
 * kit non ha nessun `margin-bottom` e qui e' l'unico posto dell'app in cui quel
 * riquadro sta **in mezzo** invece che in fondo. Nelle altre quattro schermate
 * che lo usano (Pagine, Clienti, NFC, Automazioni) e' l'ultimo elemento, e il
 * margine che non c'e' non si vede.
 *
 * ⚠ PER QUESTO NON SI TOCCA IL KIT: dare un `margin-bottom` a `.nk-empty`
 * aggiusterebbe questa e aprirebbe un buco in fondo alle altre quattro.
 * Lo spazio lo fa il contenitore, che e' l'unico che sa cosa viene dopo.
 *
 * ⚠ E il modulo nasce `hidden`: con il `gap` un blocco nascosto non lascia
 * spazio vuoto dietro di se', mentre col margine di ognuno bisognava ricordarsi
 * di spegnerlo. E' la stessa cura scritta in `home.css`, trappola 13.
 */
.fedelta-zero {
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.fedelta-zero > * { margin-top: 0; margin-bottom: 0; }

/* Il modulo pero' e' piu' stretto, e alla stessa misura della colonna dei campi
   di «Aspetto tessera»: i moduli di questa sezione stanno tutti a 900. Sopra ci
   sono schede da leggere, e quelle lo spazio se lo prendono volentieri. */
.fedelta-zero-modulo { max-width: 900px; }

.fedelta-zero-invito { padding: 34px 20px; }
.fedelta-zero-invito .nk-empty-i { font-size: 34px; }

/**
 * TRE COLONNE **DECISE**, non «quante ce ne stanno».
 *
 * Le schede sono tre e restano tre: `.nk-g3` del kit e' `auto-fit`, che su uno
 * schermo largo ne mette in fila quante ne entrano e su uno stretto le stringe.
 * Sono numerate («1 ·», «2 ·», «3 ·»): vanno lette in fila, e una che va a capo
 * da sola rompe il conto. Terza volta che serve dirlo, dopo Pagine e Premi.
 */
.fedelta-zero-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 820px) {
    .fedelta-zero-passi { grid-template-columns: minmax(0, 1fr); }
}

/* ⚠ Niente `margin-bottom` qui: lo stacco lo fa il `gap` della colonna. Scritto
   qui vincerebbe sull'azzeramento in cima (stessa specificita', ma viene dopo) e
   questa scheda si staccherebbe di un numero suo dalle altre. */

.fedelta-zero-modulo[hidden] { display: none; }

/* Il bottone che ha appena aperto il modulo resta li' ma spento: da' l'idea
   che il passo sia fatto, invece di sembrare rotto. */
.fedelta-zero-invito .nk-btn:disabled { opacity: .4; }

/* ── I pannelli sotto ──────────────────────────────────────────────── */

/* Il contenitore prende lo spazio del kit, cosi' l'intestazione nuova e i
   pannelli vecchi non si accavallano. Il resto del vestito dei pannelli sta
   ancora in `mytap-fidelity.css`, e passa di qui quando toccherA' a loro. */
.mt-dashboard #fid-wrap { padding-top: 4px; }