/* ============================================================================================
 * JURA Club — Icone · FILE GENERATO, NON MODIFICARE A MANO
 * Sorgente: Font Awesome Pro 7.3.1 (https://fontawesome.com/license, licenza commerciale)
 * Generatore: frontend/app/icone/genera.mjs — le icone vengono da icone/mappa.mjs e dalle viste.
 * Contiene 81 icone in 2 stili; il foglio intero del pacchetto ne porta
 * ~4.300 e pesa 155 KB, oltre il tetto per file di C62. Per aggiungere un'icona: usarla in una
 * vista o nella mappa, poi rigenerare (vedi l'intestazione del generatore).
 * ============================================================================================ */

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/font/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/font/fa-solid-900.woff2") format("woff2");
}

.fa-regular, .fa-solid, .fa {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: "Font Awesome 7 Pro";
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 400);
  line-height: 1;
  text-align: center;
  text-rendering: auto;
  width: var(--fa-width, 1.25em);
}

:is(.fa-regular, .fa-solid, .fa)::before {
  content: var(--fa) / "";
}

@supports not (content: "" / "") {
  :is(.fa-regular, .fa-solid, .fa)::before { content: var(--fa); }
}

.fa-regular { --fa-style: 400; }
.fa-solid { --fa-style: 900; }

/* IT: Un glifo per variabile, per le regole del portale che disegnano un'icona da CSS (banner,
 *     stati vuoti): content: var(--fa-icona-NOME) con font-family: var(--fa-famiglia). */
:root {
  --fa-famiglia: "Font Awesome 7 Pro";
  --fa-icona-arrow-left: "\f060";
  --fa-icona-arrow-right: "\f061";
  --fa-icona-arrow-right-arrow-left: "\f0ec";
  --fa-icona-arrow-up-right-from-square: "\f08e";
  --fa-icona-ban: "\f05e";
  --fa-icona-bars: "\f0c9";
  --fa-icona-bell: "\f0f3";
  --fa-icona-book: "\f02d";
  --fa-icona-building: "\f1ad";
  --fa-icona-calendar-days: "\f073";
  --fa-icona-chart-line: "\f201";
  --fa-icona-chart-pie: "\f200";
  --fa-icona-check: "\f00c";
  --fa-icona-circle-check: "\f058";
  --fa-icona-circle-dashed: "\e105";
  --fa-icona-circle-info: "\f05a";
  --fa-icona-circle-question: "\f059";
  --fa-icona-circle-xmark: "\f057";
  --fa-icona-clipboard-check: "\f46c";
  --fa-icona-clipboard-user: "\f7f3";
  --fa-icona-clock-rotate-left: "\f1da";
  --fa-icona-cookie: "\f563";
  --fa-icona-door-open: "\f52b";
  --fa-icona-download: "\f019";
  --fa-icona-envelope: "\f0e0";
  --fa-icona-exclamation: "\21";
  --fa-icona-eye: "\f06e";
  --fa-icona-file-circle-plus: "\e494";
  --fa-icona-file-contract: "\f56c";
  --fa-icona-file-invoice: "\f570";
  --fa-icona-file-lines: "\f15c";
  --fa-icona-file-shield: "\e4f0";
  --fa-icona-file-signature: "\f573";
  --fa-icona-filter: "\f0b0";
  --fa-icona-fingerprint: "\f577";
  --fa-icona-flask: "\f0c3";
  --fa-icona-folder-open: "\f07c";
  --fa-icona-gauge-high: "\f625";
  --fa-icona-gavel: "\f0e3";
  --fa-icona-globe: "\f0ac";
  --fa-icona-hand-holding-dollar: "\f4c0";
  --fa-icona-handshake: "\f2b5";
  --fa-icona-heart-pulse: "\f21e";
  --fa-icona-hourglass-half: "\f252";
  --fa-icona-house: "\f015";
  --fa-icona-id-badge: "\f2c1";
  --fa-icona-id-card: "\f2c2";
  --fa-icona-inbox: "\f01c";
  --fa-icona-key: "\f084";
  --fa-icona-layer-group: "\f5fd";
  --fa-icona-link: "\f0c1";
  --fa-icona-list-check: "\f0ae";
  --fa-icona-lock: "\f023";
  --fa-icona-magnifying-glass: "\f002";
  --fa-icona-money-check: "\f53c";
  --fa-icona-paper-plane: "\f1d8";
  --fa-icona-pen-to-square: "\f044";
  --fa-icona-percent: "\25";
  --fa-icona-plus: "\2b";
  --fa-icona-print: "\f02f";
  --fa-icona-reply: "\f3e5";
  --fa-icona-right-from-bracket: "\f2f5";
  --fa-icona-right-to-bracket: "\f2f6";
  --fa-icona-rotate-left: "\f2ea";
  --fa-icona-route: "\f4d7";
  --fa-icona-scale-balanced: "\f24e";
  --fa-icona-shield-check: "\f2f7";
  --fa-icona-shield-halved: "\f3ed";
  --fa-icona-signature: "\f5b7";
  --fa-icona-sitemap: "\f0e8";
  --fa-icona-sliders: "\f1de";
  --fa-icona-stamp: "\f5bf";
  --fa-icona-triangle-exclamation: "\f071";
  --fa-icona-upload: "\f093";
  --fa-icona-user-plus: "\f234";
  --fa-icona-user-shield: "\f505";
  --fa-icona-user-tie: "\f508";
  --fa-icona-users: "\f0c0";
  --fa-icona-wallet: "\f555";
  --fa-icona-wrench: "\f0ad";
  --fa-icona-xmark: "\f00d";
}
/* IT: Larghezza fissa per le colonne di icone (barra laterale): i glifi non hanno tutti la
 *     stessa larghezza, e senza questa i testi accanto non si allineano. */
.fa-fw { --fa-width: 1.25em; }

/* IT: La taglia grande, per le intestazioni di schermata. Le tre righe compensano l'altezza di
 *     riga e l'allineamento verticale come fa il foglio d'origine. */
.fa-lg {
  font-size: calc(20 / 16 * 1em);
  line-height: calc(1 / 20 * 1em);
  vertical-align: calc((6 / 20 - 0.375) * 1em);
}

.fa-arrow-left { --fa: "\f060"; }
.fa-arrow-right { --fa: "\f061"; }
.fa-arrow-right-arrow-left { --fa: "\f0ec"; }
.fa-arrow-up-right-from-square { --fa: "\f08e"; }
.fa-ban { --fa: "\f05e"; }
.fa-bars { --fa: "\f0c9"; }
.fa-bell { --fa: "\f0f3"; }
.fa-book { --fa: "\f02d"; }
.fa-building { --fa: "\f1ad"; }
.fa-calendar-days { --fa: "\f073"; }
.fa-chart-line { --fa: "\f201"; }
.fa-chart-pie { --fa: "\f200"; }
.fa-check { --fa: "\f00c"; }
.fa-circle-check { --fa: "\f058"; }
.fa-circle-dashed { --fa: "\e105"; }
.fa-circle-info { --fa: "\f05a"; }
.fa-circle-question { --fa: "\f059"; }
.fa-circle-xmark { --fa: "\f057"; }
.fa-clipboard-check { --fa: "\f46c"; }
.fa-clipboard-user { --fa: "\f7f3"; }
.fa-clock-rotate-left { --fa: "\f1da"; }
.fa-cookie { --fa: "\f563"; }
.fa-door-open { --fa: "\f52b"; }
.fa-download { --fa: "\f019"; }
.fa-envelope { --fa: "\f0e0"; }
.fa-exclamation { --fa: "\21"; }
.fa-eye { --fa: "\f06e"; }
.fa-file-circle-plus { --fa: "\e494"; }
.fa-file-contract { --fa: "\f56c"; }
.fa-file-invoice { --fa: "\f570"; }
.fa-file-lines { --fa: "\f15c"; }
.fa-file-shield { --fa: "\e4f0"; }
.fa-file-signature { --fa: "\f573"; }
.fa-filter { --fa: "\f0b0"; }
.fa-fingerprint { --fa: "\f577"; }
.fa-flask { --fa: "\f0c3"; }
.fa-folder-open { --fa: "\f07c"; }
.fa-gauge-high { --fa: "\f625"; }
.fa-gavel { --fa: "\f0e3"; }
.fa-globe { --fa: "\f0ac"; }
.fa-hand-holding-dollar { --fa: "\f4c0"; }
.fa-handshake { --fa: "\f2b5"; }
.fa-heart-pulse { --fa: "\f21e"; }
.fa-hourglass-half { --fa: "\f252"; }
.fa-house { --fa: "\f015"; }
.fa-id-badge { --fa: "\f2c1"; }
.fa-id-card { --fa: "\f2c2"; }
.fa-inbox { --fa: "\f01c"; }
.fa-key { --fa: "\f084"; }
.fa-layer-group { --fa: "\f5fd"; }
.fa-link { --fa: "\f0c1"; }
.fa-list-check { --fa: "\f0ae"; }
.fa-lock { --fa: "\f023"; }
.fa-magnifying-glass { --fa: "\f002"; }
.fa-money-check { --fa: "\f53c"; }
.fa-paper-plane { --fa: "\f1d8"; }
.fa-pen-to-square { --fa: "\f044"; }
.fa-percent { --fa: "\25"; }
.fa-plus { --fa: "\2b"; }
.fa-print { --fa: "\f02f"; }
.fa-reply { --fa: "\f3e5"; }
.fa-right-from-bracket { --fa: "\f2f5"; }
.fa-right-to-bracket { --fa: "\f2f6"; }
.fa-rotate-left { --fa: "\f2ea"; }
.fa-route { --fa: "\f4d7"; }
.fa-scale-balanced { --fa: "\f24e"; }
.fa-shield-check { --fa: "\f2f7"; }
.fa-shield-halved { --fa: "\f3ed"; }
.fa-signature { --fa: "\f5b7"; }
.fa-sitemap { --fa: "\f0e8"; }
.fa-sliders { --fa: "\f1de"; }
.fa-stamp { --fa: "\f5bf"; }
.fa-triangle-exclamation { --fa: "\f071"; }
.fa-upload { --fa: "\f093"; }
.fa-user-plus { --fa: "\f234"; }
.fa-user-shield { --fa: "\f505"; }
.fa-user-tie { --fa: "\f508"; }
.fa-users { --fa: "\f0c0"; }
.fa-wallet { --fa: "\f555"; }
.fa-wrench { --fa: "\f0ad"; }
.fa-xmark { --fa: "\f00d"; }

/* ============================================================================================
 * JURA Club — Le icone DENTRO i componenti del portale (L-020)
 * IT: Questa parte del foglio è scritta a mano e il generatore la accoda alle regole di Font
 *     Awesome: un solo file servito, due sorgenti. Qui non c'è nessun codice di carattere —
 *     quelli sono generati — ma il modo in cui un'icona sta accanto al testo in ciascun
 *     componente del telaio: barra laterale, intestazione, selettore di lingua, segno d'esito.
 *     Le regole di ogni componente restano nel loro foglio (`base.css`, `componenti.css`):
 *     questo blocco aggiunge, non sovrascrive.
 * ============================================================================================ */

/* --- Barra laterale ---------------------------------------------------------------------------
 * IT: L'icona è tenue come il testo di una voce non corrente, e passa al colore forte insieme al
 *     testo. La voce corrente la porta PIENA (solid, 900): stesso glifo, altro peso — è la stessa
 *     firma del filetto d'oro, detta una seconda volta senza una seconda vernice. */
.sidebar__etichetta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.sidebar__voce .fa-regular { color: var(--colore-testo-tenue); font-size: var(--testo-md); }
.sidebar__voce:hover .fa-regular { color: var(--colore-testo-forte); }
.sidebar__voce[aria-current="page"] .fa-regular { --fa-style: 900; color: var(--colore-accento); }

/* --- Intestazione di schermata ---------------------------------------------------------------
 * IT: Il riquadro tinto lega il titolo alla voce di menù (stesso glifo) senza gridare: dieci per
 *     cento del primario sul fondo, il primario sul glifo. Misura fissa, così i titoli su due
 *     righe non lo deformano. */
.intestazione__titolo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.intestazione__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--colore-primario) 10%, transparent);
  color: var(--colore-primario);
  font-size: var(--testo-lg);
}

/* --- Selettore di lingua ---------------------------------------------------------------------
 * IT: Il globo eredita il colore della barra che lo ospita (scura in alto, chiara nel sito). */
.selettore-lingua__icona {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  opacity: 0.75;
}

/* --- Segno d'esito ---------------------------------------------------------------------------
 * IT: Il cerchio pieno esiste già (`componenti.css`); dentro ci sta la sola spunta o il solo
 *     punto esclamativo, a dodici pixel — un cerchio in un cerchio sarebbe stato un bersaglio. */
.fascia-esito__segno .fa-solid { font-size: 12px; }

/* --- Bottoni e collegamenti ------------------------------------------------------------------
 * IT: Il bottone è già `inline-flex` con il suo `gap`: l'icona ci entra da sé. Nei collegamenti
 *     del piè invece il testo è in linea, e l'icona ha bisogno di un'ombra di spazio. */
.piede-sito__voci .fa-regular { margin-right: var(--sp-1); opacity: 0.8; }

/* --- Catalogo dei componenti -------------------------------------------------------------------
 * IT: La griglia di tutte le icone servite (`/_catalogo`): nome accanto ai due stili. */
.catalogo-icone {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.catalogo-icone li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--testo-sm); }
.catalogo-icone .fa-regular, .catalogo-icone .fa-solid { font-size: var(--testo-md); color: var(--colore-primario); }

/* --- Banner: il glifo lo decide la VARIANTE, da CSS --------------------------------------------
 * IT: Cinque varianti, cinque glifi, nessun markup: il banner è già `flex` con il suo `gap`, e lo
 *     pseudo-elemento diventa il primo elemento della riga. Il colore è lo stesso del filetto a
 *     sinistra, così l'icona e il bordo dicono la stessa cosa. La variabile per icona la emette il
 *     generatore (`--fa-icona-<nome>`), e il presidio conta anche queste come «usate». */
.banner { --icona-banner: var(--fa-icona-circle-info); }
.banner::before {
  content: var(--icona-banner);
  font-family: var(--fa-famiglia);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  flex: 0 0 auto;
  font-size: var(--testo-md);
  color: var(--stato-info);
  -webkit-font-smoothing: antialiased;
}
/* IT: Il colore sta sulla variante, per esteso: il risolutore dei colori (`rese`) segue solo i
 *     ruoli di `tokens.css`, e una variabile locale gli sarebbe ignota — a ragione. */
.banner--ok     { --icona-banner: var(--fa-icona-circle-check); }
.banner--ok::before     { color: var(--stato-ok); }
.banner--attesa { --icona-banner: var(--fa-icona-hourglass-half); }
.banner--attesa::before { color: var(--stato-attesa); }
.banner--errore { --icona-banner: var(--fa-icona-circle-xmark); }
.banner--errore::before { color: var(--stato-errore); }
.banner--avviso { --icona-banner: var(--fa-icona-triangle-exclamation); }
.banner--avviso::before { color: var(--colore-accento); }

/* --- Stato vuoto ----------------------------------------------------------------------------
 * IT: Un vassoio vuoto sopra il titolo, tenue: dice «qui non c'è niente» prima che lo dica il testo. */
.stato-vista::before {
  content: var(--fa-icona-inbox);
  font-family: var(--fa-famiglia);
  font-weight: 400;
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
  color: var(--colore-testo-tenue);
  -webkit-font-smoothing: antialiased;
}