.cursor-pointer {
      cursor: pointer;
}

/* ============================================================
   Ricerca globale topbar (gc-search)
   ============================================================ */
#gc-search-wrap {
    width: 640px;
    max-width: 100%;
}
#gc-search-wrap .topbar-search {
    width: 640px;
    max-width: 100%;
    padding-right: 2.25rem;
}
.gc-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1080;
    width: 640px;
    max-width: calc(100vw - 32px);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    max-height: 75vh;
    overflow-y: auto;
    padding: .35rem 0;
}
.gc-search-panel .gc-search-group-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color, #6b7280);
    padding: .55rem .95rem .3rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-top: 1px solid var(--bs-border-color, #f1f3f5);
}
.gc-search-panel .gc-search-group-label:first-child {
    border-top: 0;
}
.gc-search-panel .gc-search-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: .25rem 1rem;
    padding: .55rem .95rem;
    color: var(--bs-body-color, #111);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.25;
}
.gc-search-panel .gc-search-item:hover {
    background: var(--app-surface-sunken);
}
.gc-search-panel .gc-search-item.is-active {
    background: var(--app-accent-subtle);
}
.gc-search-panel .gc-search-main {
    min-width: 0;
}
.gc-search-panel .gc-search-title {
    font-weight: 500;
    font-size: .9375rem;
    color: var(--bs-body-color, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gc-search-panel .gc-search-sub {
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gc-search-panel .gc-search-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    white-space: nowrap;
    padding-top: 1px;
}
.gc-search-panel .gc-search-chip {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    letter-spacing: .01em;
    background: var(--bs-secondary-bg, #eef0f3);
    color: var(--bs-secondary-color, #4b5563);
    border: 1px solid transparent;
}
.gc-search-panel .gc-chip-primary {
    background: var(--app-accent-subtle);
    color: var(--app-accent-text);
}
.gc-search-panel .gc-chip-mono {
    background: transparent;
    color: var(--bs-body-color, #111827);
    border-color: var(--bs-border-color, #e5e7eb);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 600;
}
.gc-search-panel .gc-chip-neutral {
    background: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-secondary-color, #6b7280);
}
.gc-search-panel .gc-search-meta-sub {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
    font-variant-numeric: tabular-nums;
}
.gc-search-panel .gc-search-empty,
.gc-search-panel .gc-search-loading {
    padding: .95rem;
    text-align: center;
    color: var(--bs-secondary-color, #6b7280);
    font-size: .9rem;
}
.gc-search-panel mark {
    background: var(--app-accent-subtle);
    color: var(--app-accent-text);
    padding: 0 .1rem;
    border-radius: .15rem;
    font-weight: 600;
}

/* =========================================================
   Gestione Credito — stili modulo (portati da iliopesca)
   ========================================================= */

/* Cifre tabellari: niente shift orizzontale su colonne valuta/numeriche */
.tabular-nums,
table.gc-tabular td.text-end,
table.gc-tabular th.text-end,
table.gc-tabular .fw-bold,
table.gc-tabular .fw-semibold.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Off-canvas dettaglio entità */
.gc-offcanvas-md { width: 600px; max-width: 100%; }

/* Timeline esposizione cliente: riempie la card e scrolla internamente */
.card-body:has(> .gc-timeline-scroll) { display: flex; flex-direction: column; min-height: 0; }
.gc-timeline-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }

/* Iconcina info (componente gc/metric-info) */
.gc-info { display: inline-flex; align-items: center; cursor: help; opacity: .55; vertical-align: -.1em; }
.gc-info > svg, .gc-info > i { width: .9em; height: .9em; }
.gc-info:hover, .gc-info:focus-visible { opacity: .9; }

/* Righe e card cliccabili: si comportano come link (JS delegato in gc-helpers.js) */
.gc-tabular tbody tr[data-href],
tr[data-href] { cursor: pointer; transition: background-color .12s ease; }
.gc-tabular tbody tr[data-href]:hover,
tr[data-href]:hover { background-color: var(--bs-primary-bg-subtle, #e8ecfb) !important; }
.gc-tabular tbody tr[data-href]:focus-visible,
tr[data-href]:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
/* Chevron affordance a destra */
tr[data-href] td:last-child { position: relative; padding-right: 1.75rem !important; }
tr[data-href] td:last-child::after {
    content: "\203A"; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    color: var(--bs-secondary-color, #98a6ad); font-size: 1.25rem; font-weight: 600; line-height: 1;
    opacity: .45; transition: opacity .12s ease, transform .12s ease, color .12s ease; pointer-events: none;
}
tr[data-href]:hover td:last-child::after { opacity: 1; color: var(--app-accent); transform: translateY(-50%) translateX(3px); }
/* Celle con bottoni azione: niente chevron (evita overlap) */
tr[data-href] td.gc-actions-cell { padding-right: .5rem !important; }
tr[data-href] td.gc-actions-cell::after { content: none; }

/* Link nelle tabelle GC e link "promosso" */
.gc-tabular tbody a[href] { text-decoration: none; }
.gc-tabular tbody a[href]:hover,
.gc-tabular tbody a[href]:focus-visible,
.gc-tabular tbody tr[data-href]:hover a[href].fw-medium,
.gc-tabular tbody tr[data-href]:hover a[href].link-reset,
a.gc-link:hover, a.gc-link:focus-visible,
.gc-tabular tbody tr[data-href]:hover a.gc-link {
    color: var(--app-accent); text-decoration: underline; text-underline-offset: 2px;
}
a.gc-link, a.gc-link:visited { color: inherit; text-decoration: none; }

/* Card cliccabile (griglia clienti) */
.card[data-href] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card[data-href]:hover { border-color: var(--app-accent); box-shadow: var(--app-shadow-hover); }
.card[data-href]:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

/* Leggibilità (DESIGN.md §3 — Regola del Corpo Minimo Leggibile): il tema rende
   fs-xxs/fs-xs ~10px. Floor GLOBALE a ≥13px + sizing delle tabelle dato, così ogni
   pagina (moduli, tools, ui-kit) rispetta il minimo senza wrapper dedicati. */
.fs-xxs { font-size: .8125rem !important; }
.fs-xs  { font-size: .8125rem !important; }
table.gc-tabular { font-size: .9375rem; }
table.gc-tabular thead th { font-size: .8125rem; }
/* ============================================================
   Chip / badge — più respiro e un filo più grandi, icona inclusa.
   Globale (vedi DESIGN.md §5). La spaziatura icona↔testo la dà `gap`,
   non i margini: così le icone interne restano centrate e ariose.
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .42em .72em;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.1;
    vertical-align: middle;
}
.badge > svg,
.badge > i[data-lucide] {
    width: 1.05em;
    height: 1.05em;
    margin: 0;              /* spaziatura via gap, non via me-1 */
    flex: 0 0 auto;
}

/* ============================================================
   Bottoni con icona — stessa logica dei badge: la spaziatura
   icona↔testo la dà `gap`, mai margini manuali (me-*) né icona
   incollata al testo. Scoped con :has() sui soli .btn con icona
   figlia diretta: i bottoni solo testo e i controlli generati
   (DataTables, btn-close, ...) restano intatti.
   ============================================================ */
.btn:has(> svg),
.btn:has(> [data-lucide]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
}
.btn > svg,
.btn > [data-lucide] {
    margin: 0;              /* spaziatura via gap, non via me-1 */
    flex: 0 0 auto;
}

/* Badge di stato cliccabile (gc/stato-badge editable): stesso aspetto del
   badge, affordance da cursore + chevron; la tendina la costruisce
   jwd/stato-inline.js appesa a <body>. */
button.gc-stato-badge { cursor: pointer; }
button.gc-stato-badge:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}
.gc-stato-menu { min-width: 11rem; }

/* Cella "nome" cliccabile nelle tabelle: link in ink pieno (interattivo =
   near-black, regola design system), underline solo su hover. */
a.gc-cell-link {
    color: var(--app-ink);
    font-weight: 600;
    text-decoration: none;
}
a.gc-cell-link:hover { text-decoration: underline; }

/* ============================================================
   Select (Tom Select) — bridge sul design system
   Ogni <select> è potenziata da jwd/select.js (regola DESIGN.md §5:
   ogni dropdown è una Tom Select). Qui il tema bootstrap5 del plugin
   viene riagganciato ai token --app-*: niente colori propri.
   ============================================================ */
.ts-wrapper .ts-control {
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    color: var(--app-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
/* Focus: bordo accent + anello tenue (near-black), come gli altri input.
   Le varianti is-valid/is-invalid mantengono i loro colori semantici. */
.ts-wrapper.focus:not(.is-valid):not(.is-invalid) .ts-control {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .12);
}
/* Il placeholder mostra anche il valore precedente all'apertura (fix UX
   in jwd/select.js): deve leggersi come suggerimento, tenue. */
.ts-control > input::placeholder { color: var(--app-ink-faint); }

/* Tendina: Overlay del design system (bordo pieno, ombra overlay) */
.ts-dropdown {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-overlay);
    color: var(--app-ink);
    margin-top: .3rem;
    padding: .25rem;
}
.ts-dropdown .option {
    padding: .45rem .6rem;
    border-radius: calc(var(--app-radius-sm) - 2px);
}
.ts-dropdown .active {
    background: var(--app-accent-subtle);
    color: var(--app-ink);
}
.ts-dropdown .selected { font-weight: 600; }
.ts-dropdown .optgroup-header {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--app-ink-muted);
    background: transparent;
}
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: .45rem .6rem;
    color: var(--app-ink-muted);
}

/* Multipla: le voci scelte sono chip in stile badge (subtle + ink) */
.ts-wrapper.multi .ts-control > .item {
    background: var(--app-accent-subtle);
    color: var(--app-ink);
    border: 0;
    border-radius: var(--app-radius-sm);
    padding: .15rem .45rem;
    font-size: .8125rem;
    line-height: 1.4;
}
.ts-wrapper.multi .ts-control > .item .remove {
    border-left: 0;
    padding: 0 .3rem;
    color: var(--app-ink-muted);
}
.ts-wrapper.multi .ts-control > .item .remove:hover {
    background: transparent;
    color: var(--app-ink);
}
.ts-wrapper .clear-button { color: var(--app-ink-muted); }
.ts-wrapper .clear-button:hover { color: var(--app-ink); }

/* ============================================================
   Select "ricche" (Tom Select, data-ts-rich): thumbnail + sotto-riga
   (jwd/select.js + componente forms/select con 'rich' => true)
   ============================================================ */
.ts-rich { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ts-rich-img {
    width: 34px; height: 34px; flex: 0 0 auto; object-fit: cover;
    border-radius: var(--app-radius-sm); border: 1px solid var(--app-border);
    background: var(--app-surface-sunken);
}
.ts-rich-item .ts-rich-img { width: 22px; height: 22px; }
.ts-rich-body { min-width: 0; }
.ts-rich-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-rich-sub {
    font-size: .78rem; color: var(--app-ink-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   UI Kit / style-guide — helper condivisi (pagine /ui-kit/*)
   ============================================================ */
.uikit-eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--app-ink-muted); }
.uikit-section { margin-bottom: 2.5rem; }
.uikit-section > h4 { font-weight: 600; letter-spacing: -.005em; margin-bottom: .25rem; }
.uikit-lead { color: var(--app-ink-muted); font-size: .9rem; margin-bottom: 1rem; max-width: 72ch; }
.uikit-demo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.uikit-swatch-label { font-size: .72rem; color: var(--app-ink-muted); font-family: ui-monospace, SFMono-Regular, monospace; }
/* ── Respiro verticale del contenuto ──────────────────────────────────────
   Il template lascia .content-page con padding-top:0 sotto la topbar sticky,
   così il primo elemento (es. titolo pagina) risulta incollato all'header.
   Diamo a OGNI pagina un respiro sopra (sotto la topbar) e sotto (prima del footer). */
.content-page > .container-fluid {
    padding-top: var(--app-space-5);    /* 1.5rem sotto la topbar */
    padding-bottom: var(--app-space-6); /* 2rem prima del footer */
}

/* ============================================================
   Feedback azioni — toast flottanti (GC.toast, jwd/toast.js)
   Convenzione: MAI banner di conferma/errore a tutta pagina.
   Stack fisso in basso a destra, superficie ink inversa.
   ============================================================ */
.gc-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090; /* sopra modal (1055) e offcanvas */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    pointer-events: none;
    max-width: min(380px, calc(100vw - 2rem));
}

.gc-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .8rem;
    border-radius: var(--app-radius-lg);
    background: var(--app-ink);
    color: var(--app-surface);
    box-shadow: var(--app-shadow-panel);
    font-size: .8125rem;
    line-height: 1.4;
    animation: gc-toast-in .18s ease-out;
}

.gc-toast-icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gc-toast-success .gc-toast-icon { color: var(--app-success); }
.gc-toast-danger  .gc-toast-icon { color: var(--app-danger); }
.gc-toast-warning .gc-toast-icon { color: var(--app-warning); }
.gc-toast-info    .gc-toast-icon { color: var(--app-info); }

.gc-toast-msg { flex: 1 1 auto; }

.gc-toast-close {
    background: none;
    border: 0;
    padding: 0;
    margin-left: .15rem;
    color: inherit;
    opacity: .55;
    display: inline-flex;
    flex: 0 0 auto;
    cursor: pointer;
}
.gc-toast-close:hover { opacity: 1; }
.gc-toast-close i { width: 14px; height: 14px; }

.gc-toast-out { animation: gc-toast-out .22s ease-in forwards; }

@keyframes gc-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gc-toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* ============================================================
   Popover di conferma inline ([data-confirm], jwd/actions.js):
   sostituisce window.confirm per le azioni distruttive.
   ============================================================ */
.gc-confirm-pop {
    position: fixed;
    z-index: 1091;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-overlay);
    padding: .65rem .75rem;
    max-width: 280px;
}
.gc-confirm-msg { font-size: .8125rem; color: var(--app-ink); margin-bottom: .55rem; }
.gc-confirm-actions { display: flex; gap: .4rem; justify-content: flex-end; }

/* ============================================================
   Pagina documentale (.gc-doc) — testo lungo dentro il guscio
   applicativo.

   Perché serve un trattamento suo: il tema rende il corpo a 13px e
   i titoli di sezione alla stessa identica misura, quindi una
   pagina di prosa diventa un muro uniforme, con righe da oltre 120
   caratteri. Qui il testo È il contenuto, non l'etichetta di un
   dato: prende la scala del design system (corpo 15px, sezione
   20px) e una misura di riga leggibile.

   La gerarchia la fanno scala e RITMO — spazio molto diverso fra
   una sezione e l'altra rispetto a quello fra due paragrafi — non
   bordi e riquadri. L'unica riga orizzontale separa i due livelli
   di lettura, che sono due atti diversi della pagina.
   ============================================================ */
.gc-doc {
    /* L'unità ch è la larghezza dello ZERO, che in una proporzionale è molto
       più larga della lettera media: 68ch davano 90 caratteri per riga, sopra
       il limite. Misurato sul testo vero, 52ch stanno intorno ai 75 — il
       massimo consentito alla prosa, scelto perché il testo vive dentro una
       card e una colonna più stretta lascerebbe la card mezza vuota. */
    --doc-misura: 52ch;
}
.gc-doc p,
.gc-doc ul,
.gc-doc ol {
    font-size: .9375rem;
    line-height: 1.65;
    max-width: var(--doc-misura);
}
.gc-doc p { margin-bottom: .9rem; }
.gc-doc li + li { margin-top: .35rem; }

.gc-doc h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--app-ink);
    margin: 0 0 .85rem;
    max-width: var(--doc-misura);
}
/* Il salto fra sezioni è il triplo dello stacco fra paragrafi: è lì
   che si legge la struttura, senza bisogno di righe o cornici. */
.gc-doc h2:not(:first-child) { margin-top: 3.25rem; }
.gc-doc h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--app-ink);
    margin: 2rem 0 .6rem;
    max-width: var(--doc-misura);
}

/* Apertura di livello: l'unico punto in cui la pagina cambia atto. */
.gc-doc .doc-livello {
    margin: 0 0 2.5rem;
    padding-top: .25rem;
}
.gc-doc .doc-livello + * { margin-top: 0 !important; }
.gc-doc .doc-livello-2 {
    margin-top: 4.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--app-border-strong);
}
.gc-doc .doc-livello-titolo {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--app-ink);
    margin: .5rem 0 .6rem;
    max-width: var(--doc-misura);
}
.gc-doc .doc-livello p { color: var(--app-ink-secondary); }

/* Affermazione: il passaggio che deve restare in mente. Niente
   striscia colorata a lato (vietata dal design system): a staccarla
   bastano lo spazio, il corpo più grande e due filetti. */
.gc-doc .doc-affermazione {
    max-width: 62ch;
    margin: 2rem 0;
    padding: 1.4rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--app-ink);
}
.gc-doc .doc-affermazione p { font-size: inherit; line-height: inherit; margin: 0; max-width: none; }

/* I blocchi che portano dati — tabelle, diagrammi, calcolatore —
   non sono prosa e non seguono la misura del testo. */
.gc-doc .doc-blocco { max-width: none; margin: 1.6rem 0 0; }

/* Il testo vive dentro una card. Quindi i blocchi al suo interno NON possono
   essere altre card: card dentro card è uno dei divieti espliciti del design
   system, e due superfici bianche una dentro l'altra non si distinguono
   comunque. Restano riquadri delimitati da un bordo di 1px, che è il modo in
   cui questo sistema porta la struttura. */
.gc-doc-testo .card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    box-shadow: none;
    margin-bottom: 0;
}
.gc-doc-testo .card > .card-body { padding: 1.15rem 1.25rem; }
.gc-doc .doc-blocco + p { margin-top: 1.6rem; }
.gc-doc .doc-didascalia {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--app-ink-muted);
    max-width: var(--doc-misura);
    margin: .75rem 0 0;
}

/* Indice: 13px come tutto il resto del sistema (il floor del corpo
   minimo leggibile), voce corrente in inchiostro pieno. */
.gc-doc-indice a {
    display: block;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--app-ink-muted);
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: var(--app-radius-sm);
    transition: color .15s ease-out, background-color .15s ease-out;
}
.gc-doc-indice a:hover { color: var(--app-ink); background: var(--app-surface-sunken); }
.gc-doc-indice a.active {
    color: var(--app-ink);
    font-weight: 600;
    background: var(--app-accent-subtle);
}
.gc-doc-indice .doc-indice-titolo {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    padding: 0 .5rem;
    margin: 1.5rem 0 .5rem;
}
.gc-doc-indice > :first-child { margin-top: 0; }


/* ============================================================
   Ambienti: il badge in fondo alla pagina è anche il comando che
   apre le scorciatoie verso gli altri ambienti (footer.php).
   È un <button> con la classe .badge, quindi eredita già respiro,
   gap e colore: qui si toglie solo ciò che il browser mette sui
   bottoni e si dice che è cliccabile.
   ============================================================ */
.gc-ambienti-toggle {
    cursor: pointer;
    font-family: inherit;
    /* La freccetta la disegna un'icona Lucide nel markup, non il
       ::after di Bootstrap: nel resto del gestionale le frecce sono
       Lucide, e due sistemi di icone nello stesso posto si vedono. */
}
.gc-ambienti-toggle::after { display: none; }
.gc-ambienti-toggle[aria-expanded="true"] > i[data-lucide="chevron-up"] { transform: rotate(180deg); }
.gc-ambienti-toggle > i[data-lucide="chevron-up"] { transition: transform .15s ease; }

/* La tendina si apre verso l'alto sopra il footer: l'ombra è quella
   degli overlay, e la larghezza la detta il contenuto (l'hostname). */
.gc-ambienti .dropdown-menu { min-width: 15rem; }
.gc-ambienti .dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }

/* La scheda dell'ambiente su cui si sta guardando, in «Gestione Ambienti».
   L'enfasi la dà il bordo near-black del primario, non un colore semantico:
   «sei qui» non è uno stato del dato, è dove si trova chi legge. */
.gc-ambiente-corrente {
    border-color: var(--app-ink);
}