/* icone-categoria.css — LE ICONE DI CATEGORIA, in un posto solo.
 *
 * ★★★ Regola di Fabio, 27 agosto 2026: «non possiamo avere più icone che rappresentino un
 * singolo ambiente» · «l'interfaccia deve essere il più possibile unica».
 *
 * ⚠️ Sta in un foglio suo, e non dentro `palette.css`, perché serve anche alle pagine di
 *    `admin/`, che la tavolozza non la caricano — e caricargliela intera per tre icone
 *    vorrebbe dire cambiargli i colori e i pavimenti del testo. L'alternativa era
 *    ricopiare le tre regole di là: due copie della stessa cosa sono il difetto che oggi
 *    abbiamo passato la giornata a togliere.
 *
 * ⚠️ Chi usa `.ndc-ic-*` DEVE caricare questo foglio: senza, l'icona non è brutta — non
 *    c'è proprio. Lo verifica `admin/scripts/arbitro_icone_sezioni.py` (controllo ⑦).
 */

/* ══════════════════════════════════════════════════════════════════════════
   ★★★ LE ICONE DI CATEGORIA — 27 agosto 2026
   Fabio: «le icone che abbiamo scelto devono sostituire eventuali altre icone
   esistenti che rappresentino le categorie».

   Erano tre elenchi di sezioni (`components.js`, `home-mobile.js`,
   `v2-enhancements.js`) e ognuno sceglieva la sua icona per la stessa cosa:
     · arbitri     → fa-gavel (il MARTELLETTO DEL GIUDICE) e fa-whistle
     · allenatori  → fa-user-tie e fa-person-chalkboard
     · calciatori  → fa-user-group e fa-users
   ⚠️ `fa-whistle` non esiste in Font Awesome Free: dove era scritto non si
      vedeva NIENTE, e nessuno se ne era accorto perché un'icona assente non
      dà errore — lascia uno spazio vuoto.

   ★ Il disegno è lo stesso file SVG del segnaposto (`stemmi/_senza_foto_*.svg`):
     una sola forma per categoria, che sia il riempitivo di una scheda o
     l'icona di un menu. Due disegni per la stessa cosa si scollano al primo
     ritocco di uno dei due.

   ⚠️ Si usa `mask-image`, non `background-image`: la maschera prende solo la
      SAGOMA, e il colore lo mette `currentColor` — così l'icona piglia il
      colore della sezione (rosso per gli arbitri, ambra per gli allenatori)
      esattamente come faceva quella del font. Con un `<img>` il colore non si
      eredita e sarebbero rimaste grigie ovunque.
   ⚠️ `width/height:1em`: si dimensionano col `font-size` di chi le contiene,
      come le icone del font che sostituiscono. Nessun chiamante cambia.
   ══════════════════════════════════════════════════════════════════════════ */
.ndc-ic-arbitro,
.ndc-ic-allenatore,
.ndc-ic-giocatore {
    display: inline-block;
    /* ⚠️ 1,15em e non 1em (Fabio: «le icone nuove un po' più evidenti»). Le icone del font
       hanno un riquadro piu' largo dell'altezza — misurate 24x20 dove le nostre stavano a
       20x20 — e in fila una accanto all'altra le nostre pesavano meno. Il tratto e' gia'
       stato allargato stringendo il `viewBox` dei disegni; questo pareggia il riquadro. */
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.ndc-ic-arbitro {
    -webkit-mask-image: url('../stemmi/_senza_foto_arbitro.svg');
            mask-image: url('../stemmi/_senza_foto_arbitro.svg');
}
.ndc-ic-allenatore {
    -webkit-mask-image: url('../stemmi/_senza_foto_allenatore.svg');
            mask-image: url('../stemmi/_senza_foto_allenatore.svg');
}
.ndc-ic-giocatore {
    -webkit-mask-image: url('../stemmi/_senza_foto_giocatore.svg');
            mask-image: url('../stemmi/_senza_foto_giocatore.svg');
}