/* UBIQA — icone.

   Regola: nessuna emoticon. Le emoji sono pittogrammi a colori, disegnati da
   altri, che su Android e iPhone vengono resi in modo diverso e stonano con
   un applicativo tecnico. Qui si usano solo segni geometrici a tratto, dello
   stesso peso del marchio, che prendono il colore del testo in cui stanno.

   Tecnica: l'SVG fa da MASCHERA e il colore viene da «currentColor». Così
   un'icona dentro un pulsante acceso diventa scura, dentro una riga spenta
   diventa grigia, senza doverne tenere due versioni.

   Uso:  <i class="ic ic-cestino"></i>
   In JavaScript:  ico('cestino')  →  la stessa stringa. */

.ic,
[class^='ic-'],
[class*=' ic-']{
  display:inline-block;
  width:1.05em; height:1.05em;
  vertical-align:-.16em;
  background-color:currentColor;
  -webkit-mask-image:var(--m);   mask-image:var(--m);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  flex:none;
}
.ic-lg{width:1.3em;height:1.3em}

/* --- i disegni. Tratto 1.6 su griglia 24, angoli vivi: la stessa mano del
       reticolo del marchio. --- */

/* cestino: contenitore trapezoidale e coperchio */
.ic-cestino{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 6h16M9 6V4h6v2M6.5 6l1 14h9l1-14M10 10v6M14 10v6'/%3E%3C/svg%3E")}

/* matita: barra inclinata con punta */
.ic-matita{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E")}

/* impostazioni: tre cursori, non un ingranaggio */
.ic-regola{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.1' fill='%23000'/%3E%3Ccircle cx='15' cy='12' r='2.1' fill='%23000'/%3E%3Ccircle cx='7' cy='17' r='2.1' fill='%23000'/%3E%3C/svg%3E")}

/* documento: foglio con angolo piegato */
.ic-doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E")}

/* PDF: foglio con una barra piena, per distinguerlo a colpo d'occhio */
.ic-pdf{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Crect x='8.5' y='13' width='7' height='4' fill='%23000' stroke='none'/%3E%3C/svg%3E")}

/* immagine: riquadro con orizzonte e sole */
.ic-immagine{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3.5' y='5' width='17' height='14'/%3E%3Cpath d='M3.5 16l5-5 4 4 3-3 5 5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.4' fill='%23000'/%3E%3C/svg%3E")}

/* fotocamera: riquadro con cerchio */
.ic-foto{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3.5 7h4l1.5-2h6L16.5 7h4v12h-17z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E")}

/* video: riquadro con triangolo di riproduzione */
.ic-video{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3.5' y='6' width='13' height='12'/%3E%3Cpath d='M16.5 11l4-3v8l-4-3z' fill='%23000'/%3E%3C/svg%3E")}

/* audio: onde concentriche */
.ic-audio{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2'/%3E%3C/svg%3E")}

/* microfono: capsula e base */
.ic-microfono{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='9' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M5.5 12a6.5 6.5 0 0013 0M12 18.5V21'/%3E%3C/svg%3E")}

/* graffetta: due tratti a U */
.ic-allega{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M17 8.5l-7.5 7.5a3.2 3.2 0 01-4.5-4.5l8.5-8.5a4.6 4.6 0 016.5 6.5l-8.5 8.5'/%3E%3C/svg%3E")}

/* puntina: cerchio con asta — appartenenza al progetto */
.ic-puntina{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='9' r='4.5'/%3E%3Cpath d='M12 13.5V21M7 4.5h10'/%3E%3C/svg%3E")}

/* collegamento: due anelli di catena stilizzati */
.ic-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7L11.5 7'/%3E%3Cpath d='M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7L12.5 17'/%3E%3C/svg%3E")}

/* chat: riquadro con coda */
.ic-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}

/* persone: due profili astratti — commesse e utenti */
.ic-persone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 20a5.5 5.5 0 0111 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 010 5.6M17 15.2a5.5 5.5 0 013.5 4.8'/%3E%3C/svg%3E")}

/* mappa: foglio piegato con reticolo */
.ic-mappa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3.5 6.5l6-2.5 5 2.5 6-2.5v15l-6 2.5-5-2.5-6 2.5z'/%3E%3Cpath d='M9.5 4v15M14.5 6.5v15'/%3E%3C/svg%3E")}

/* provvedimento: foglio con righe e sigillo */
.ic-atto{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M5 3h10l4 4v14H5z'/%3E%3Cpath d='M8 9h6M8 12h8M8 15h4'/%3E%3Ccircle cx='16' cy='17' r='2.4'/%3E%3C/svg%3E")}

/* volo: triangolo con traccia — il drone, non un aeroplano */
.ic-volo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 3l5 9H7z' fill='%23000'/%3E%3Cpath d='M4 16h16M6.5 20h11'/%3E%3C/svg%3E")}

/* misura: riga graduata */
.ic-misura{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2.5' y='8' width='19' height='8'/%3E%3Cpath d='M7 8v3M12 8v4M17 8v3'/%3E%3C/svg%3E")}

/* rilievo: reticolo di mira — lo stesso segno del marchio */
.ic-rilievo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000'/%3E%3Cpath d='M12 1.5v3.5M12 19v3.5M1.5 12h3.5M19 12h3.5'/%3E%3C/svg%3E")}

/* scadenza: quadrante con lancette */
.ic-scadenza{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E")}

/* evento: quadrato con marca superiore */
.ic-evento{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3.5' y='5.5' width='17' height='15'/%3E%3Cpath d='M3.5 10h17M8 3v5M16 3v5'/%3E%3C/svg%3E")}