/* ── COLLEGAMENTI ───────────────────────────────────────────
   [FASE 7, punto 1, 13/08/2026] Montata dal blocco `data-sec="colleg"` del
   disegno.

   Anche qui c'e' pochissimo, ed e' voluto: schede, pastiglie, campi e bottoni
   sono tutti del kit (`nk-card`, `nk-chip`, `nk-inp`, `nk-btn`). Quello che
   segue e' la spaziatura di questa schermata e i due pezzi che il kit non ha:
   la testata di una scheda con la pastiglia a destra, e la differenza fra la
   scheda che si puo' usare e le tre che dicono «non ancora». */

/**
 * ⛔ LE SCHEDE SONO ALTE UGUALI, E PRIMA NO.
 * [18/08/2026, chiesto dal titolare: «vorrei che i riquadri avessero tutti la
 * stessa altezza in modo che sia omogeneo»]
 *
 * Qui c'era `align-items: start`, che e' l'opposto: ogni scheda si fermava
 * all'altezza del proprio contenuto. Misurato sulla schermata vera, sulla
 * stessa riga stavano quattro schede da **432, 354, 486 e 192** pixel.
 *
 * ⚠ `stretch` e' il valore di partenza di una griglia: la riga tolta bastava.
 * Ma stirare e basta lascerebbe **trecento pixel di vuoto** sotto «Cassa o
 * gestionale», e da fuori si legge come una scheda sbagliata, non come una
 * scheda uguale alle altre. Per questo, sotto, l'ultimo blocco di ogni scheda
 * viene spinto in fondo: cosi' i campi e i bottoni si allineano fra loro, e lo
 * spazio in piu' finisce **prima** invece che dopo. Le schede diventano
 * omogenee due volte, nel bordo e nel contenuto.
 */
.colleg-wrap .nk-gr { align-items: stretch; }

.cg-card { display: flex; flex-direction: column; }

/* ⚠ Il blocco che chiude la scheda va in fondo, e la riga che lo fa **non sta
   qui**: sta dove `.cg-campi` e `.cg-piede` sono gia' definiti, piu' sotto.
   Messa qui veniva sovrascritta da quelle, che hanno la stessa specificita' e
   vengono dopo -- ed e' successo davvero: le schede erano alte uguali ma i
   campi restavano a mezz'aria. Una proprieta' si scrive dove sta gia' la
   regola di quell'elemento, non in un blocco a parte. */

/* Nome a sinistra, pastiglia a destra, e il nome si stringe invece di spingere
   la pastiglia fuori: `min-width: 0` perche' in un contenitore flessibile la
   misura minima e' quella del contenuto, non zero. E' la stessa trappola del
   nome della sezione nella barra in alto, presa il 12/08. */
.cg-testa {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 5px;
}
.cg-nome { margin: 0; flex: 1; min-width: 0; }

/* ⇒ LA SCHEDA CHE SI PUO' USARE SI DEVE VEDERE SUBITO.
   Le altre tre raccontano, questa chiede di fare una cosa. Senza un segno,
   quattro schede uguali si leggono tutte e quattro prima di capire quale
   risponde: e' la stessa ragione per cui, sulla Home, la cosa da approvare ha
   due aloni di colore e le altre no. Qui basta molto meno, perche' non e' una
   decisione: e' una casella da riempire. */
.cg-viva {
    border-color: color-mix(in oklch, var(--nk-accent) 34%, var(--nk-line));
}

/* Il perche' farlo adesso. Non e' la descrizione della scheda: e' la ragione
   per cui rimandarlo costa, e va letta prima dei campi. */
.cg-perche {
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: var(--nk-r-sm);
    border-left: 3px solid color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line));
    background: color-mix(in oklch, var(--nk-accent) 6%, transparent);
    font-size: 12px;
    line-height: 1.5;
    color: var(--nk-muted);
}
.cg-perche b { color: var(--nk-paper); }

/* ⇒ IN FONDO ALLA SCHEDA. `margin-top: auto` in una colonna flessibile si
   mangia lo spazio avanzato, e allinea i campi delle quattro schede fra loro
   invece di lasciarli dove finisce il testo.
   ⚠ Lo stacco dal testo sopra passa da `margin` a `padding`: con `auto` il
   margine sparisce quando non c'e' spazio da mangiare, e il campo si
   attaccherebbe alla frase. Il padding invece c'e' sempre. */
.cg-campi { margin-top: auto; padding-top: 12px; }

.cg-lab {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}
.cg-campi .nk-inp + .cg-aiuto { margin-top: 5px; }
.cg-campi .cg-aiuto + .cg-lab { margin-top: 13px; }

.cg-opz {
    font-weight: 400;
    font-size: 11px;
    color: var(--nk-muted-2);
}

.cg-aiuto {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--nk-muted);
}
.cg-aiuto code {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: color-mix(in oklch, var(--nk-line) 40%, transparent);
}

.cg-piede {
    /* In fondo come `.cg-campi`, e per la stessa ragione: vedi la nota la'. */
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
}

/* «Vale per le tue 15 pagine»: la frase che dice cosa cambia rispetto a prima,
   ed e' il motivo per cui questa schermata esiste. Sta accanto al bottone
   perche' e' li' che si guarda nel momento in cui si decide di premere. */
.cg-dove {
    font-size: 11.5px;
    color: var(--nk-muted);
    line-height: 1.35;
}

.cg-esito {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--nk-r-sm);
    font-size: 12.5px;
    line-height: 1.45;
}
.cg-esito.ok {
    background: color-mix(in oklch, var(--nk-ok, #2E7D32) 10%, transparent);
    color: var(--nk-ok, #2E7D32);
}
.cg-esito.no {
    background: color-mix(in oklch, #B3261E 9%, transparent);
    color: #B3261E;
}

/* La cassa non e' «non ancora», e' «non da qui»: bordo tratteggiato come nel
   disegno, che vuol dire un'altra categoria di cosa. */
.cg-sumisura {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

/* Il riquadro del salvataggio: uno solo per tutte e tre le schede. Occupa la
   riga intera anche dentro la griglia a due colonne, perche' non e' una scheda
   fra le altre: e' quello che le chiude. */
.cg-salvataggio { margin-top: 11px; }
/* ⚠ Qui il piede NON sta dentro una scheda: e' la barra di salvataggio in
   fondo alla schermata. Va azzerato anche il padding, se no si porta dietro lo
   stacco che serve solo dentro le schede. */
.cg-salvataggio .cg-piede { margin-top: 0; padding-top: 0; }

/* ── IL BOTTONE «INFO» ──────────────────────────────────────────
   Sta nella testata, fra il nome e la pastiglia. ⚠ E' un `<button>` e non uno
   `<span>` con un `onclick`: si deve poter raggiungere col tabulatore e premere
   con l'Invio, e sotto c'e' un popup che prende il fuoco. Uno `span` cliccabile
   qui vorrebbe dire una guida che chi naviga da tastiera non apre mai. */
.cg-info {
    flex: none;
    border: 1px solid var(--nk-line);
    background: transparent;
    color: var(--nk-muted);
    border-radius: 999px;
    padding: 3px 9px;
    font: inherit;
    font-size: 11.5px;
    line-height: 1.25;
    cursor: pointer;
}
.cg-info:hover {
    color: var(--nk-accent);
    border-color: color-mix(in oklch, var(--nk-accent) 40%, var(--nk-line));
}

/* ── IL POPUP DELLE GUIDE ───────────────────────────────────────
   ⛔ QUI NON C'E' PIU' NESSUNA FINESTRA: e' quella del kit (`nk-ovl` +
   `nk-modal`), e da qui si tocca solo quello che il kit non ha, cioe' come si
   legge il testo di una guida.
   [rifatto il 13/08/2026: «i popup info non funzionano, in piu' devono
   mantenere il design dell'app»] Prima c'era un velo scritto a mano che usava
   le variabili `--nk-…` senza che nessuno le avesse dichiarate, perche' quelle
   le dichiara la classe `.nk`: finestra trasparente, senza bordo, testo del
   colore di sotto. Si apriva davvero, e sembrava che non succedesse niente. */

/* Le guide sono lunghe: i 468px del kit stanno stretti a un elenco di passi
   con dentro degli indirizzi. Si allarga **solo questa** finestra, non
   `.nk-modal`, che e' di tutti. */
#cg-velo .nk-modal { max-width: 560px; }

/* ⚠ Il corpo ha gia' `.nk-modal-body` addosso, che gli da' lo scorrimento e i
   margini: qui si aggiunge solo la misura del testo. Rimettere un `padding` o
   un `overflow` vorrebbe dire due regole che si contendono la stessa cosa. */
.cg-guida-corpo {
    font-size: 12.5px;
    line-height: 1.55;
}
.cg-g-intro { margin: 0 0 11px; color: var(--nk-muted); }
.cg-g-passi { margin: 0; padding-left: 19px; }
.cg-g-passi li { margin-bottom: 9px; }
.cg-g-nota {
    margin: 13px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--nk-line);
    color: var(--nk-muted);
}
.cg-guida-corpo code {
    font-size: 11.5px;
    padding: 1px 4px;
    border-radius: 4px;
    background: color-mix(in oklch, var(--nk-line) 40%, transparent);
    overflow-wrap: anywhere;
}
.cg-guida-corpo a { color: var(--nk-accent); overflow-wrap: anywhere; }

/* Mentre la guida e' aperta la pagina sotto non scorre: su telefono, scorrendo
   dentro la finestra si finisce per muovere quella dietro, e riaprendo il velo
   ci si ritrova in un altro punto della dashboard. */
body.cg-fermo { overflow: hidden; }