/*
 * Area studente: stile del cruscotto lato utente.
 *
 * Sta tutto qui e si carica solo sulle pagine che contengono lo shortcode
 * [icheiron_area_studente]. Le variabili in cima sono i pochi punti da
 * toccare per allineare la pagina al brand dell'accademia.
 */

/* Le variabili stanno su :root e non dentro .ich-area, perche' servono anche
   alla pagina "Il mio account", che e' un'altra pagina. */
:root {
	--ich-oro: #b8892b;
	--ich-oro-chiaro: #f6efe1;
	--ich-inchiostro: #2b2723;
	--ich-grigio: #6f6862;
	--ich-linea: #e6e1d9;
	--ich-fondo: #fffdfa;
	--ich-verde: #3f7d52;
	--ich-verde-chiaro: #e8f2eb;
	--ich-attesa: #9a6b12;
	--ich-attesa-chiaro: #fdf3dd;
	--ich-raggio: 14px;
}

.ich-area {
	max-width: 940px;
	margin: 0 auto;
	color: var(--ich-inchiostro);
	font-size: 17px;
	line-height: 1.6;
}

.ich-area *,
.ich-area *::before,
.ich-area *::after { box-sizing: border-box; }

/* ⚠️ Il tema sottolinea tutti i link con `.page-content a`, che ha due
   componenti di specificita' e batte una classe sola. Dentro l'area i link
   sono pulsanti, pastiglie e voci di elenco, e la sottolineatura li sporca.
   La classe si ripete di proposito (.ich-area.ich-area) per salire di
   specificita' senza appendersi a classi del tema, che un domani potrebbero
   cambiare nome. */
.ich-area.ich-area a { text-decoration: none; }
.ich-area.ich-area .ich-corso__spiega a,
.ich-area.ich-area .ich-login__aiuto a,
.ich-area.ich-area p > a:not(.ich-btn) { text-decoration: underline; }

/* Testata --------------------------------------------------------------- */

.ich-testata {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--ich-linea);
}

.ich-testata img,
.ich-testata .icheiron-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.ich-occhiello {
	margin: 0;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ich-oro);
}

.ich-nome {
	margin: 2px 0 0;
	font-size: 30px;
	line-height: 1.2;
}

/* Navigazione a pastiglie ----------------------------------------------- */

.ich-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 26px;
}

.ich-chip {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--ich-linea);
	background: #fff;
	color: var(--ich-grigio);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ich-chip:hover,
.ich-chip:focus {
	border-color: var(--ich-oro);
	background: var(--ich-oro-chiaro);
	color: var(--ich-oro);
}

/* Continua da qui ------------------------------------------------------- */

.ich-continua {
	background: var(--ich-oro-chiaro);
	border-radius: var(--ich-raggio);
	padding: 22px 24px;
	margin-bottom: 26px;
}

.ich-continua__label {
	margin: 0;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ich-oro);
}

.ich-continua h3 {
	margin: 6px 0 16px;
	font-size: 22px;
	line-height: 1.3;
}

/* Avviso ---------------------------------------------------------------- */

.ich-avviso {
	background: var(--ich-attesa-chiaro);
	border: 1px solid #ecd9a8;
	border-radius: var(--ich-raggio);
	padding: 15px 18px;
	margin: 0 0 26px;
	font-size: 16px;
	color: #6b4e0d;
}

/* Sezioni --------------------------------------------------------------- */

.ich-sezione { margin-bottom: 38px; }

.ich-titolo {
	font-size: 20px;
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ich-linea);
	scroll-margin-top: 24px;
}

/* La riga che spiega cosa c'e' in una sezione: senza, "Il mio percorso" non
   si capisce nemmeno guardandolo. */
.ich-spiega {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ich-grigio);
	max-width: 68ch;
}

.ich-vuoto { color: var(--ich-grigio); }

/* Schede corso ---------------------------------------------------------- */

.ich-corsi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.ich-corso {
	background: var(--ich-fondo);
	border: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.ich-corso--completato { border-color: #cfe0d4; }
.ich-corso--aspetta-seminario { border-color: #ecd9a8; }

.ich-corso__nome {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
}

.ich-corso__spiega {
	margin: 0;
	font-size: 15px;
	color: var(--ich-grigio);
}

/* Badge di stato -------------------------------------------------------- */

.ich-badge {
	margin: 0;
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: #f0ece5;
	color: var(--ich-grigio);
}

.ich-badge--completato { background: var(--ich-verde-chiaro); color: var(--ich-verde); }
.ich-badge--aspetta-seminario { background: var(--ich-attesa-chiaro); color: var(--ich-attesa); }
.ich-badge--in-corso { background: var(--ich-oro-chiaro); color: var(--ich-oro); }

/* Barra di progresso ---------------------------------------------------- */

.ich-barra {
	width: 100%;
	height: 7px;
	background: #eee9e1;
	border-radius: 999px;
	overflow: hidden;
}

.ich-barra span {
	display: block;
	height: 100%;
	background: var(--ich-oro);
}

.ich-percento {
	margin: 0;
	font-size: 13px;
	color: var(--ich-grigio);
}

/* Le due parti ---------------------------------------------------------- */

.ich-parti { width: 100%; font-size: 15px; }

.ich-parti summary {
	cursor: pointer;
	color: var(--ich-grigio);
	font-size: 14px;
}

.ich-parti ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.ich-parte {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px dashed var(--ich-linea);
	color: var(--ich-grigio);
}

.ich-parte--completato span:last-child { color: var(--ich-verde); font-weight: 600; }

.ich-parte a { color: var(--ich-oro); text-decoration: none; }
.ich-parte a:hover,
.ich-parte a:focus { text-decoration: underline; }

/* Pulsanti -------------------------------------------------------------- */

.ich-btn {
	display: inline-block;
	background: var(--ich-oro);
	color: #fff;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	transition: opacity .15s ease;
}

.ich-btn:hover,
.ich-btn:focus { opacity: .88; color: #fff; }

.ich-btn--grande { padding: 13px 26px; font-size: 16px; }

.ich-btn--chiaro {
	background: transparent;
	color: var(--ich-oro);
	border: 1px solid var(--ich-oro);
}

.ich-btn--chiaro:hover,
.ich-btn--chiaro:focus { background: var(--ich-oro-chiaro); color: var(--ich-oro); }

/* Attestati ------------------------------------------------------------- */

.ich-attestato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
	margin-bottom: 12px;
	background: var(--ich-fondo);
}

.ich-attestato--attesa { background: #fbf9f6; border-style: dashed; }

.ich-attestato__data {
	display: block;
	font-size: 14px;
	color: var(--ich-grigio);
	margin-top: 3px;
}

/* Percorso -------------------------------------------------------------- */

.ich-percorso {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ich-percorso li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-bottom: 1px solid var(--ich-linea);
}

.ich-percorso__disc {
	display: block;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ich-oro);
}

.ich-percorso__data {
	display: block;
	font-size: 14px;
	color: var(--ich-grigio);
}

.ich-percorso__poi {
	font-size: 15px;
	color: var(--ich-grigio);
	text-align: right;
}

/* Iniziazioni ----------------------------------------------------------- */

.ich-iniziazioni {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ich-iniziazioni li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ich-linea);
}

.ich-ini__data { color: var(--ich-grigio); font-size: 15px; }

/* Riquadri di sezione ----------------------------------------------------
   Tre tinte tenui della stessa famiglia: distinguono le zone senza spezzare
   la pagina. Il colore vive nel bordo superiore, che e' il segnale, mentre il
   fondo resta appena accennato. */

.ich-riquadro {
	border-radius: var(--ich-raggio);
	padding: 26px 28px;
}

/* Il colore lo porta il fondo, e il titolo lo dichiara: niente barre
   colorate, che con gli angoli tondi si assottigliano e stonano. */
.ich-riquadro .ich-titolo {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 6px;
}

.ich-riquadro--percorso { background: #f8f2e6; }
.ich-riquadro--percorso .ich-titolo { color: #8f6a1f; }

.ich-riquadro--iniziazioni { background: #eaf3ec; }
.ich-riquadro--iniziazioni .ich-titolo { color: #2f6b43; }

.ich-riquadro--account {
	background: #f0eff4;
	margin-top: 44px;
	margin-bottom: 0;
}

.ich-riquadro--account .ich-account__titolo { color: #574f70; }

.ich-riquadro--percorso .ich-percorso li,
.ich-riquadro--iniziazioni .ich-iniziazioni li { border-bottom-color: rgba(0, 0, 0, .07); }

.ich-riquadro--percorso .ich-percorso li:last-child,
.ich-riquadro--iniziazioni .ich-iniziazioni li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Area account: un'altra zona del sito, e si deve vedere ----------------- */

.ich-account__titolo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 19px;
	border: 0;
	padding: 0;
	scroll-margin-top: 24px;
}

.ich-account__testo {
	margin: 0 0 18px;
	font-size: 15.5px;
	color: var(--ich-grigio);
	max-width: 62ch;
}

.ich-icona {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.ich-btn--ingranaggio {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	color: var(--ich-inchiostro);
	border: 1px solid #d8d1c6;
}

.ich-btn--ingranaggio:hover,
.ich-btn--ingranaggio:focus {
	background: #fff;
	color: var(--ich-oro);
	border-color: var(--ich-oro);
	opacity: 1;
}

/* Il rimando all'area studente, dentro "Il mio account" ------------------ */

.ich-ritorno-riga { margin-bottom: 22px; }

a.ich-ritorno.ich-ritorno,
a.ich-ritorno.ich-ritorno:hover,
a.ich-ritorno.ich-ritorno:focus { text-decoration: none; }

.ich-ritorno {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid #b8892b;
	color: #b8892b;
	background: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.ich-ritorno:hover,
.ich-ritorno:focus { background: #f6efe1; color: #b8892b; }

/* Titolo di area dentro "I miei corsi" ---------------------------------- */

.ich-area-nome {
	margin: 26px 0 12px;
	font-size: 15px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ich-oro);
}

.ich-area-nome:first-of-type { margin-top: 4px; }

/* Ospite e modulo di accesso -------------------------------------------- */

.ich-area--ospite { padding: 20px 0 40px; }

.ich-area--ospite .ich-nome { margin-bottom: 6px; }

.ich-login {
	max-width: 420px;
	margin-top: 22px;
	padding: 26px 28px;
	background: var(--ich-fondo);
	border: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
}

.ich-login p { margin: 0 0 14px; }

.ich-login label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
}

.ich-login input[type="text"],
.ich-login input[type="password"] {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d8d1c6;
	border-radius: 9px;
	font-size: 16px;
	background: #fff;
}

.ich-login input[type="text"]:focus,
.ich-login input[type="password"]:focus {
	outline: 2px solid var(--ich-oro);
	outline-offset: 1px;
	border-color: var(--ich-oro);
}

.ich-login .login-remember label {
	font-weight: 400;
	color: var(--ich-grigio);
}

.ich-login input[type="submit"] {
	background: var(--ich-oro);
	color: #fff;
	border: 0;
	padding: 12px 26px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.ich-login input[type="submit"]:hover { opacity: .88; }

.ich-login__aiuto {
	margin: 16px 0 0;
	font-size: 15px;
}

.ich-login__aiuto a { color: var(--ich-grigio); }

/* Schermi piccoli ------------------------------------------------------- */

@media (max-width: 600px) {
	.ich-nome { font-size: 24px; }
	.ich-corsi { grid-template-columns: 1fr; }
	.ich-percorso__poi { text-align: left; }
}

/* =======================================================================
   "Il mio account": l'area amministrativa di WooCommerce.

   Da quando la pagina non passa piu' dal widget di Elementor, il markup e'
   quello nativo di WooCommerce e lo stile lo mette il tema, che e' volutamente
   spartano: la navigazione usciva come un elenco puntato e ogni link
   sottolineato. Qui le si da' la stessa lingua dell'area studente.

   Tutto e' dentro `.woocommerce-account` di proposito: carrello, checkout e
   pagine prodotto non devono essere toccati.
   ======================================================================= */

.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
	color: var(--ich-inchiostro);
}

/* Il rimando all'area studente sta in cima, sopra le due colonne: la riga
   occupa tutta la larghezza, il link dentro resta una pastiglia. */
.woocommerce-account .woocommerce > .ich-ritorno-riga {
	flex: 0 0 100%;
	margin-bottom: 4px;
}

/* La colonna di sinistra ------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 250px;
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
	overflow: hidden;
	background: var(--ich-fondo);
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--ich-linea);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	color: var(--ich-inchiostro);
	text-decoration: none;
	font-size: 16px;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	background: var(--ich-oro-chiaro);
	color: var(--ich-oro);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ich-oro-chiaro);
	color: var(--ich-oro);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--ich-grigio);
}

/* La colonna di destra --------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 320px;
	float: none;
	width: auto;
	min-width: 0;
	font-size: 17px;
	line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 14px; }

.woocommerce-account .woocommerce-MyAccount-content a { color: var(--ich-oro); }

/* Tabelle (ordini, download) --------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
	overflow: hidden;
	font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ich-linea);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: #f4f1ec;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ich-grigio);
}

/* Moduli (indirizzi, dati account) --------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select {
	width: 100%;
	max-width: 460px;
	padding: 11px 13px;
	border: 1px solid #d8d1c6;
	border-radius: 9px;
	font-size: 16px;
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: 2px solid var(--ich-oro);
	outline-offset: 1px;
	border-color: var(--ich-oro);
}

/* Pulsanti --------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
	display: inline-block;
	background: var(--ich-oro);
	color: #fff;
	border: 0;
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover { opacity: .88; }

/* Avvisi di WooCommerce -------------------------------------------------- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	list-style: none;
	padding: 14px 18px;
	border-radius: var(--ich-raggio);
	background: var(--ich-oro-chiaro);
	margin: 0 0 20px;
}

.woocommerce-account .woocommerce-error { background: #fdecec; }

/* Schermi piccoli -------------------------------------------------------- */

@media (max-width: 700px) {
	.woocommerce-account .woocommerce { display: block; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 26px; }
}

/* Stessa ragione della doppia classe qui sopra: il tema sottolinea, e queste
   sono voci di menu e pulsanti, non link nel testo. */
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
	text-decoration: none;
}

/* Materiali del corso ---------------------------------------------------- */

/* Stanno DENTRO la scheda del corso, non in una sezione a parte: un manuale
   e' del corso, e sganciarlo da li' obbligherebbe lo studente a cercarlo. */
.ich-materiali {
	width: 100%;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--ich-linea);
}

.ich-materiali__titolo {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ich-grigio);
}

.ich-materiali__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ich-materiale {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 15px;
}

.ich-materiale + .ich-materiale { border-top: 1px solid var(--ich-linea); }

.ich-materiale__nome { font-weight: 600; }

/* Il materiale non ancora sbloccato resta in elenco con scritto il perche':
   un file che sparisce senza spiegazione e' la mail alla segreteria. */
.ich-materiale--attesa { flex-wrap: wrap; color: var(--ich-grigio); }
.ich-materiale--attesa .ich-materiale__nome { font-weight: 500; }

.ich-materiale__motivo {
	flex: 1 1 100%;
	font-size: 13.5px;
	color: var(--ich-attesa);
	background: var(--ich-attesa-chiaro);
	border-radius: 8px;
	padding: 6px 10px;
}

.ich-materiali__nota {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ich-grigio);
}

/* Lo stesso elenco, quando lo shortcode [icheiron_materiali] lo mette dentro
   una lezione di LearnDash: li' non c'e' la scheda del corso intorno. */
.ich-materiali--solo {
	max-width: 720px;
	margin: 24px 0;
	padding: 18px 22px;
	border: 1px solid var(--ich-linea);
	border-top: 1px solid var(--ich-linea);
	border-radius: var(--ich-raggio);
	background: var(--ich-fondo);
	color: var(--ich-inchiostro);
}

.ich-materiali--solo .ich-materiali__titolo {
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ich-inchiostro);
}

/* Le date del ciclo: richiuse, perche' sono la risposta a una domanda precisa
   e non qualcosa da rileggere ogni volta che si apre la pagina. */
.ich-date {
	margin: 10px 0 0;
	font-size: 0.92rem;
}

.ich-date > summary {
	cursor: pointer;
	color: var(--ich-grigio);
	padding: 4px 0;
}

.ich-date__titolo {
	margin: 8px 0 4px;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ich-grigio);
}

.ich-date__elenco {
	margin: 0 0 6px;
	padding-left: 18px;
}

.ich-date__elenco li { margin: 2px 0; }

.ich-date--passata {
	color: var(--ich-grigio);
	text-decoration: line-through;
}

.ich-date__periodo { margin: 2px 0; font-weight: 600; }

.ich-date__avviso {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var(--ich-grigio);
}

/* Il saldo: una riga per iscrizione, con la cifra vera e da quando e' aggiornata. */
.ich-saldo { display: block; }

.ich-saldo__titolo {
	margin: 0 0 6px;
	font-weight: 700;
}

.ich-saldo__riga { margin: 3px 0; }

.ich-saldo__nota {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--ich-grigio);
}

/* La fascia dell'anteprima: deve essere impossibile non vederla, altrimenti si
   crede di guardare la propria pagina. */
.ich-anteprima {
	margin: 0 0 18px;
	padding: 10px 14px;
	background: #fdf6e6;
	border: 1px solid #ecd9a8;
	border-left: 4px solid var(--ich-oro);
	border-radius: 4px;
	font-size: 0.92rem;
	color: var(--ich-inchiostro);
}

.ich-anteprima a { margin-left: 4px; }

/* Un pulsante che c'e' ma non si puo' premere: si vede che esiste, e si capisce
   che qui non funziona. */
.ich-btn--spento {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

/* L'iconcina "i" accanto alla nota sui materiali: piccola, tonda, e con un
   bersaglio abbastanza grande da poterci cliccare anche col pollice. */
.ich-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 4px;
	border: 1px solid var(--ich-oro);
	border-radius: 50%;
	color: var(--ich-oro);
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.ich-info:hover,
.ich-info:focus {
	background: var(--ich-oro);
	color: #fff;
}