/* LE ICONE DEI RUOLI (web/ruoli_icone.js). Il colore è della FAMIGLIA, mai del singolo ruolo: sei token.
   ⚠️ Quando entrano nell'app i sei --fam-* vanno collegati allo skin creator (CLAUDE.md regola 5). */
:root{
  --fam-sport:#5b9bf0; --fam-famiglia:#f08a93; --fam-cavallo:#e3b55b; --fam-maneggio:#43c78a; --fam-prof:#a78bfa; --fam-profat:#e36bd2;
  --fam-su:#10131c;   /* il disegno sopra un fondo pieno */
}
.ri-f-sport{--fam:var(--fam-sport)} .ri-f-famiglia{--fam:var(--fam-famiglia)} .ri-f-cavallo{--fam:var(--fam-cavallo)}
.ri-f-maneggio{--fam:var(--fam-maneggio)} .ri-f-prof{--fam:var(--fam-prof)} .ri-f-profat{--fam:var(--fam-profat)}
.ri{--ri:44px; position:relative; display:inline-grid; place-items:center; width:var(--ri); height:var(--ri); flex:0 0 auto; color:var(--fam)}
.ri .ri-g{width:52%; height:52%; position:relative}
.ri .ri-sh{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

/* A · LINEA — il disegno nel colore, su un tondo appena velato: discreto, sta bene accanto al testo */
.ri-linea{border-radius:50%; background:color-mix(in srgb, var(--fam) 15%, transparent); border:1px solid color-mix(in srgb, var(--fam) 45%, transparent)}

/* B · PIENO — il tondo pieno, il disegno scuro sopra: si riconosce da lontano, anche piccolo */
.ri-pieno{border-radius:50%; background:var(--fam); color:var(--fam-su)}
.ri-pieno .ri-g{stroke-width:2}

/* C · STEMMA — lo scudo dei circoli e delle squadre: dà «dignità», il ruolo come un'insegna */
.ri-stemma .ri-sh path{fill:color-mix(in srgb, var(--fam) 18%, transparent); stroke:var(--fam); stroke-width:1.6}
.ri-stemma .ri-g{margin-top:-8%; width:48%; height:48%}

/* D · COCCARDA — la coccarda dei concorsi: è il nostro mondo, nessun'altra app la usa */
.ri-coccarda .ri-sh circle{fill:var(--fam)}
.ri-coccarda .ri-sh .ri-anello{fill:none; stroke:var(--fam-su); stroke-opacity:.35; stroke-width:1.4; stroke-dasharray:2.2 2}
.ri-coccarda .ri-sh .ri-nastro{fill:color-mix(in srgb, var(--fam) 70%, var(--fam-su))}
.ri-coccarda{color:var(--fam-su)}
.ri-coccarda .ri-g{margin-top:-17%; width:44%; height:44%; stroke-width:2}