/*
 * Wizard di iscrizione NemoDSA.
 *
 * Il linguaggio visivo e' quello delle app che la gente usa tutti i giorni:
 * una scheda centrata e stretta, campi puliti su fondo tenue, una sola azione
 * evidente in fondo, l'avanzamento a segmenti in cima. Serve a far sentire il
 * percorso familiare a chi lo apre dal telefono.
 *
 * Due cose pero' sono state cambiate rispetto a quel modello, e non per gusto.
 *
 * 1. IL COLORE DEL PULSANTE PRINCIPALE. L'arancione del marchio (#ef8451) con
 *    testo bianco sopra da' un contrasto di 2,6:1, sotto il minimo di 4,5:1
 *    richiesto da WCAG AA. Su un sito che si rivolge anche a persone con
 *    difficolta' visive non e' un dettaglio. Il pulsante usa quindi il verde
 *    scuro del marchio (12,6:1) e l'arancione resta dov'e' decorativo:
 *    avanzamento, bordo del campo attivo, anello di focus.
 *
 * 2. IL GRIGIO DEI TESTI SECONDARI. Il grigio chiaro tipico di quelle interfacce
 *    (#8e8e8e) sta a 3,5:1 e sarebbe illeggibile per chi cerchiamo di aiutare.
 *    Qui il testo di servizio sta a #55605f, che supera 7:1.
 *
 * Il corpo minimo e' 16px ovunque, anche negli aiuti: sotto quella soglia iOS
 * ingrandisce la pagina da solo quando si tocca un campo, e l'utente si ritrova
 * il modulo fuori schermo.
 */

.nemo-wizard {
	/*
	 * I colori, i raggi e le spaziature arrivano dal sistema di design.
	 * Qui restano i due valori propri del percorso di iscrizione: la variante
	 * scura dell'arancione per gli stati premuti, e un'interlinea piu' ampia
	 * del solito, che aiuta chi ha difficolta' di lettura a non perdere la riga.
	 */
	--nemo-arancio-scuro: #d2835e;
	--nemo-interlinea: 1.65;

	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 0 24px;
	color: var(--nemo-testo);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: var(--nemo-interlinea);
	text-align: left;
}

.nemo-wizard *,
.nemo-wizard *::before,
.nemo-wizard *::after {
	box-sizing: inherit;
}

/* Modalita' alta leggibilita', attivata dall'interruttore e ricordata. */
.nemo-wizard[data-leggibilita="alta"] {
	--nemo-interlinea: 2;
	font-size: 19px;
	letter-spacing: 0.02em;
	word-spacing: 0.12em;
}

.nemo-wizard[data-leggibilita="alta"] .nemo-input,
.nemo-wizard[data-leggibilita="alta"] .nemo-etichetta {
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- avanzamento */

.nemo-avanzamento {
	display: flex;
	gap: 4px;
	margin: 0 0 10px;
}

.nemo-segmento {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #ddd7d1;
	transition: background-color 0.25s ease;
}

/*
 * Il segmento percorso usa una terracotta piu' profonda dell'arancione del
 * marchio: l'arancione originale, accanto al grigio dei segmenti da fare, sta a
 * 1,8:1 e chi distingue male i colori non vedrebbe dove e' arrivato. Il testo
 * "Passo 2 di 7" resta comunque la fonte principale dell'informazione.
 */
.nemo-segmento.is-fatto {
	background: var(--nemo-terracotta);
}

.nemo-avanzamento-testo {
	margin: 0 0 24px;
	color: var(--nemo-testo-tenue);
	font-size: 16px;
	font-weight: 500;
}

/* ---------------------------------------------------------------------- form */

.nemo-form {
	margin: 0;
	padding: 20px 22px 22px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: #fff;
}

.nemo-titolo {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nemo-verde);
}

.nemo-titolo:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 6px;
	border-radius: 4px;
}

/*
 * E' la riga che spiega il riquadro, e sta fra il titolo e il contenuto: con
 * 26px sotto, il titolo restava per aria e il corpo sembrava un'altra cosa.
 */
.nemo-intro {
	margin: 0 0 14px;
	color: var(--nemo-testo-tenue);
}

/* --------------------------------------------------------------------- campi */

.nemo-campo {
	margin: 0 0 22px;
}

.nemo-campo--corta {
	max-width: 190px;
}

.nemo-etichetta {
	display: block;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
	color: var(--nemo-testo);
}

.nemo-facoltativo {
	font-weight: 400;
	color: var(--nemo-testo-tenue);
}

.nemo-aiuto-campo {
	margin: 0 0 8px;
	color: var(--nemo-testo-tenue);
	font-size: 16px;
}

.nemo-input {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 13px 15px;
	border: 1px solid var(--nemo-bordo-forte);
	border-radius: 10px;
	background: var(--nemo-fondo);
	color: var(--nemo-testo);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nemo-input:hover {
	border-color: #6f665d;
}

.nemo-input:focus {
	outline: none;
	border-color: var(--nemo-arancio);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(239, 132, 81, 0.28);
}

.nemo-input:focus-visible {
	outline: 2px solid transparent;
}

textarea.nemo-input {
	min-height: 110px;
	resize: vertical;
}

/*
 * La freccia si disegna qui perche' quella di serie cambia da navigatore a
 * navigatore e in alcuni lascia la tendina alta come un pulsante, spaiata
 * rispetto agli altri campi. Il fondo va scritto in forma estesa: la scorciatoia
 * "background:" cancellerebbe l'immagine della freccia.
 */
select.nemo-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a443e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px 9px;
	cursor: pointer;
}

.nemo-campo.is-errato .nemo-input {
	border-color: var(--nemo-errore);
	background: var(--nemo-errore-tenue);
}

/* ----------------------------------------------------- spunte e scelte */

.nemo-gruppo {
	margin: 0;
	padding: 0;
	border: 0;
}

.nemo-gruppo .nemo-etichetta {
	padding: 0;
}

.nemo-spunta-riga {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	margin: 0 0 6px;
	padding: 9px 12px;
	border: 1px solid var(--nemo-bordo-forte);
	border-radius: 10px;
	background: var(--nemo-fondo);
	cursor: pointer;
}

.nemo-spunta-riga:hover {
	border-color: #6f665d;
}

.nemo-spunta-riga:focus-within {
	border-color: var(--nemo-arancio);
	box-shadow: 0 0 0 3px rgba(239, 132, 81, 0.28);
}

.nemo-spunta {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 3px 0 0;
	accent-color: var(--nemo-verde);
	cursor: pointer;
}

.nemo-etichetta--spunta {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* --------------------------------------------------------------- messaggi */

.nemo-errore {
	display: flex;
	gap: 7px;
	margin: 8px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--nemo-errore);
	border-radius: 0 8px 8px 0;
	background: var(--nemo-errore-tenue);
	color: var(--nemo-errore);
	font-size: 16px;
	font-weight: 500;
}

.nemo-errore::before {
	content: "\26A0";
	flex: 0 0 auto;
}

.nemo-errore[hidden] {
	display: none;
}

.nemo-avviso {
	margin: 8px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--nemo-arancio);
	border-radius: 0 8px 8px 0;
	background: #fdf6f2;
	font-size: 16px;
}

.nemo-nota {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 16px;
}

.nemo-nota p {
	margin: 0;
}

.nemo-nota--buona {
	border-left: 3px solid var(--nemo-buono);
	background: var(--nemo-buono-tenue);
	color: var(--nemo-buono);
}

.nemo-nota--attenzione {
	border-left: 3px solid var(--nemo-arancio);
	background: #fdf6f2;
}

.nemo-status:not(:empty) {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--nemo-crema);
	font-size: 16px;
}

/* ---------------------------------------------------------------- pulsanti */

.nemo-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
}

.nemo-bottone {
	min-height: 52px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nemo-bottone:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 3px;
}

.nemo-bottone--principale {
	flex: 1 1 auto;
	background: var(--nemo-verde);
	color: #fff;
}

.nemo-bottone--principale:hover {
	background: var(--nemo-verde-chiaro);
}

.nemo-bottone--secondario {
	background: #fff;
	border-color: var(--nemo-bordo-forte);
	color: var(--nemo-testo);
}

.nemo-bottone--secondario:hover {
	border-color: #6f665d;
	background: var(--nemo-fondo);
}

.nemo-bottone--minore {
	min-height: 44px;
	padding: 10px 16px;
	background: #fff;
	border-color: var(--nemo-bordo-forte);
	color: var(--nemo-testo);
	font-size: 16px;
	font-weight: 500;
}

.nemo-bottone[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --------------------------------------------------------------- file e firma */

.nemo-file-stato {
	margin: 8px 0 0;
	color: var(--nemo-testo-tenue);
	font-size: 16px;
}

.nemo-firma {
	margin: 10px 0 0;
}

.nemo-firma-area {
	display: block;
	width: 100%;
	height: 190px;
	border: 2px dashed var(--nemo-bordo-forte);
	border-radius: 10px;
	background: #fff;
	touch-action: none;
	cursor: crosshair;
}

.nemo-firma-area:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 3px;
}

.nemo-firma-azioni {
	display: flex;
	gap: 10px;
	margin: 10px 0 0;
}

.nemo-alternativa {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--nemo-bordo);
	border-radius: 10px;
	background: var(--nemo-fondo);
}

.nemo-alternativa summary {
	min-height: 32px;
	font-weight: 600;
	cursor: pointer;
}

.nemo-alternativa summary:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- soccorso */

.nemo-soccorso {
	margin: 22px 0 0;
	padding: 16px 18px;
	border-radius: var(--nemo-r-scheda);
	background: var(--nemo-crema);
	font-size: 16px;
}

.nemo-soccorso p {
	margin: 0;
}

.nemo-soccorso a {
	color: var(--nemo-verde);
	font-weight: 600;
}

.nemo-soccorso-nota {
	margin-top: 6px !important;
	color: var(--nemo-testo-tenue);
}

/* ------------------------------------------------------------ leggibilita' */

/*
 * L'interruttore sta in alto a destra e si prende una riga per se'. Quella riga
 * pero' e' vuota per tutta la sua larghezza, e sotto il titolo della pagina
 * sembra un buco. Si tiene basso: fa la sua figura senza allontanare il
 * contenuto dal titolo.
 */
.nemo-leggibilita {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 6px;
}

.nemo-leggibilita button {
	min-height: 34px;
	padding: 5px 14px;
	border: 1px solid var(--nemo-bordo-forte);
	border-radius: 17px;
	background: #fff;
	color: var(--nemo-testo-tenue);
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.nemo-leggibilita button[aria-pressed="true"] {
	background: var(--nemo-verde);
	border-color: var(--nemo-verde);
	color: #fff;
}

.nemo-leggibilita button:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ schermi */

@media (max-width: 640px) {
	.nemo-form {
		padding: 22px 16px 20px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.nemo-titolo {
		font-size: 23px;
	}

	.nemo-azioni {
		flex-direction: column-reverse;
	}

	.nemo-bottone {
		width: 100%;
	}

	.nemo-campo--corta {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nemo-wizard * {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-contrast: more) {
	.nemo-wizard {
		--nemo-bordo: #6b6660;
		--nemo-testo-tenue: #333b3a;
	}
}

/* ========================================================================
 * Area riservata del socio.
 *
 * Stesso linguaggio del wizard: schede su fondo chiaro, una cosa per volta,
 * una sola azione evidente per riquadro. In cima lo stato dell'iscrizione,
 * perche' e' la domanda per cui il socio entra qui: "sono a posto o no?".
 * ===================================================================== */

.nemo-area {
	max-width: 720px;
}

.nemo-pannello {
	margin: 0 0 14px;
	padding: 18px 22px 20px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: #fff;
}

.nemo-pannello h2 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--nemo-verde);
}

.nemo-pannello h3 {
	margin: 18px 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--nemo-verde);
}

/* --------------------------------------------------------------- profilo */

/*
 * La carta d'identita' del socio: quello che l'associazione sa di lui e che
 * lui non cambia da solo. Si legge, non si compila, e si vede subito che e'
 * cosi' perche' non ha ne' riquadri ne' pulsanti.
 */
.nemo-profilo-testa {
	margin: 0 0 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--nemo-bordo);
}

.nemo-profilo-nome {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--nemo-verde);
}

.nemo-profilo-tipo {
	margin: 4px 0 0;
	color: var(--nemo-testo-tenue);
}

.nemo-dati-griglia {
	display: grid;
	gap: 14px 24px;
	grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
	margin: 0;
}

.nemo-dato {
	margin: 0;
	min-width: 0;
}

.nemo-dato-etichetta {
	margin: 0 0 2px;
	font-size: 15px;
	color: var(--nemo-testo-tenue);
}

.nemo-dato-valore {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--nemo-testo);
	/*
	 * "break-word" e non "anywhere": un indirizzo email si spezza solo se non
	 * ci sta, non appena la colonna si stringe un po'. Spezzarlo prima lo rende
	 * illeggibile proprio a chi lo deve ricopiare.
	 */
	overflow-wrap: break-word;
}

.nemo-dato-nota {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--nemo-testo-tenue);
}

/* ------------------------------------------------------- stato in cima */

.nemo-pannello--stato {
	border-left: 5px solid var(--nemo-bordo-forte);
}

.nemo-pannello-testa {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nemo-pannello-testa h2 {
	margin: 0;
}

.nemo-pallino {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--nemo-bordo-forte);
}

/*
 * Il colore non e' l'unico segnale: accanto al pallino c'e' sempre la parola
 * ("Iscrizione attiva", "in scadenza"), perche' chi non distingue i colori
 * deve poter capire lo stesso.
 */
.nemo-pannello--attiva { border-left-color: #1c6b3f; }
.nemo-pannello--attiva .nemo-pallino { background: #1c6b3f; }
.nemo-pannello--in_scadenza,
.nemo-pannello--in_attesa { border-left-color: var(--nemo-terracotta); }
.nemo-pannello--in_scadenza .nemo-pallino,
.nemo-pannello--in_attesa .nemo-pallino { background: var(--nemo-terracotta); }
.nemo-pannello--scaduta,
.nemo-pannello--respinta { border-left-color: var(--nemo-errore); }
.nemo-pannello--scaduta .nemo-pallino,
.nemo-pannello--respinta .nemo-pallino { background: var(--nemo-errore); }

.nemo-scadenza-data {
	margin: 0;
	color: var(--nemo-testo-tenue);
	font-size: 16px;
}

/* ----------------------------------------------------- coordinate banca */

.nemo-bonifico {
	margin: 18px 0 0;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--nemo-crema);
}

.nemo-bonifico h3 {
	margin-top: 0;
}

.nemo-bonifico-conto {
	margin: 0 0 12px;
	font-weight: 600;
}

.nemo-bonifico-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(148, 137, 127, 0.34);
}

.nemo-bonifico-riga:last-child {
	border-bottom: 0;
}

.nemo-bonifico-etichetta {
	flex: 0 0 110px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nemo-testo-tenue);
}

.nemo-bonifico-valore {
	flex: 1 1 auto;
	min-width: 0;
	font-family: Menlo, Consolas, monospace;
	font-size: 15px;
	word-break: break-all;
}

/* ------------------------------------------------------- figli e elenchi */

.nemo-schede-figli,
.nemo-elenco-documenti {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.nemo-scheda-figlio {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 8px;
	padding: 13px 16px;
	border: 1px solid var(--nemo-bordo);
	border-radius: 10px;
	background: var(--nemo-fondo);
}

.nemo-scheda-nota {
	color: var(--nemo-testo-tenue);
	font-size: 15px;
}

.nemo-documento {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	padding: 13px 16px;
	border: 1px solid var(--nemo-bordo);
	border-radius: 10px;
	background: var(--nemo-fondo);
}

.nemo-documento-nome {
	flex: 1 1 240px;
	font-weight: 600;
}

.nemo-pillola {
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
}

.nemo-pillola--buona {
	background: var(--nemo-buono-tenue);
	color: var(--nemo-buono);
	border: 1px solid var(--nemo-buono);
}

.nemo-pillola--attesa {
	background: #fdf6f2;
	color: #8a3d14;
	border: 1px solid var(--nemo-terracotta);
}

.nemo-pillola--spento {
	background: #f2f1f0;
	color: var(--nemo-testo-tenue);
	border: 1px solid var(--nemo-bordo-forte);
}

/* --------------------------------------------------------------- moduli */

.nemo-form-area {
	margin: 0;
}

.nemo-form-area + .nemo-form-area {
	margin-top: 0;
}

.nemo-documento .nemo-form-area {
	flex: 0 0 auto;
}

/*
 * Nell'elenco dei messaggi l'oggetto e la data stanno su una riga e la pillola
 * si allinea a destra. Col solo flex, su uno schermo stretto, la pillola
 * scivolava sotto in mezzo al vuoto e sembrava riferita a niente.
 */
.nemo-messaggi .nemo-documento {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 4px;
}

.nemo-messaggi .nemo-documento-nome {
	grid-column: 1;
}

.nemo-messaggi .nemo-scheda-nota {
	grid-column: 1;
	grid-row: 2;
}

.nemo-messaggi .nemo-pillola {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: end;
	white-space: nowrap;
}

.nemo-scheda-tipo .nemo-etichetta--spunta strong {
	display: block;
}

.nemo-promemoria {
	margin: 0 0 24px;
	padding-left: 22px;
	line-height: var(--nemo-interlinea);
}

.nemo-promemoria li {
	margin-bottom: 6px;
}

.nemo-area .nemo-azioni {
	margin-top: 18px;
}

@media (max-width: 640px) {
	.nemo-pannello {
		padding: 20px 16px 22px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.nemo-pannello--stato {
		border-left: 5px solid var(--nemo-bordo-forte);
	}

	.nemo-bonifico-etichetta {
		flex-basis: 100%;
	}
}

/* ======================================================= come si paga */

.nemo-paga-quando {
	margin: 0 0 16px;
	color: var(--nemo-testo-tenue, #5b6665);
	line-height: 1.6;
}

.nemo-paga-importo {
	margin: 0 0 18px;
	font-size: 17px;
}

.nemo-paga-importo strong {
	color: var(--nemo-verde, #0f393b);
	font-size: 23px;
	font-weight: 700;
}

.nemo-paga-modo {
	margin-bottom: 16px;
	padding: 18px 20px;
	border: 1px solid var(--nemo-bordo, #e3ddd7);
	border-radius: var(--nemo-r-scheda, 14px);
	background: #fff;
}

.nemo-paga-modo h4 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--nemo-verde, #0f393b);
}

/* Il modo piu' rapido sta per primo e si vede che lo e'. */
.nemo-paga-modo--carta {
	border-color: var(--nemo-buono-bordo, #7ab895);
	background: var(--nemo-buono-tenue, #eef8f1);
}

.nemo-paga-carta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.nemo-paga-azione {
	flex: 1 1 280px;
	min-width: 0;
}

.nemo-paga-azione p {
	margin: 0 0 14px;
	line-height: 1.6;
}

.nemo-paga-nota {
	margin: 12px 0 0 !important;
	color: var(--nemo-testo-tenue, #5b6665);
	font-size: 15px;
}

.nemo-paga-qr {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.nemo-paga-qr svg {
	display: block;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--nemo-bordo, #e3ddd7);
}

.nemo-paga-qr span {
	color: var(--nemo-testo-tenue, #5b6665);
	font-size: 15px;
	text-align: center;
}

@media (max-width: 560px) {
	.nemo-paga-carta {
		gap: 18px;
	}

	.nemo-paga-qr {
		width: 100%;
	}
}

/* --- Riepilogo dell'ultimo passo --------------------------------------- */

.nemo-wizard .nemo-riepilogo {
	margin: 0 0 24px;
}

.nemo-wizard .nemo-riepilogo-blocco {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: var(--nemo-fondo);
}

.nemo-wizard .nemo-riepilogo-blocco h3 {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--nemo-verde);
}

.nemo-wizard .nemo-riepilogo dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px 20px;
	margin: 0;
}

.nemo-wizard .nemo-riepilogo dt {
	margin: 0;
	color: var(--nemo-testo-tenue);
	font-size: 15px;
}

.nemo-wizard .nemo-riepilogo dd {
	margin: 0;
	color: var(--nemo-testo);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Su uno schermo stretto due colonne spezzano le parole: meglio in fila. */
@media (max-width: 540px) {
	.nemo-wizard .nemo-riepilogo dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.nemo-wizard .nemo-riepilogo dd {
		margin-bottom: 12px;
	}
}

/* --- Schermata finale --------------------------------------------------- */

.nemo-wizard--conclusa .nemo-promemoria {
	margin-top: 20px;
}

/* --- Anteprima del file appena scelto ---------------------------------- */

.nemo-wizard .nemo-anteprima {
	margin-top: 12px;
	padding: 10px;
	background: var(--nemo-fondo);
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-controllo);
}

.nemo-wizard .nemo-anteprima-immagine {
	display: block;
	max-width: 100%;
	max-height: 260px;
	margin: 0 auto;
	border-radius: 4px;
}

.nemo-wizard .nemo-anteprima-immagine[hidden] {
	display: none;
}

.nemo-wizard .nemo-anteprima-nota {
	margin-top: 8px;
	color: var(--nemo-testo-tenue);
	font-size: 15px;
	text-align: center;
	overflow-wrap: anywhere;
}

/* --- Moduli da leggere prima di firmare -------------------------------- */

.nemo-wizard .nemo-modulo {
	margin: 0 0 20px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: var(--nemo-superficie);
	overflow: hidden;
}

.nemo-wizard .nemo-modulo.is-letto {
	border-color: var(--nemo-verde);
}

.nemo-wizard .nemo-modulo-titolo {
	margin: 0;
	padding: 14px 18px;
	background: var(--nemo-fondo);
	border-bottom: 1px solid var(--nemo-bordo);
	font-size: 17px;
	color: var(--nemo-verde);
}

.nemo-wizard .nemo-modulo-testo {
	max-height: 320px;
	padding: 4px 18px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nemo-wizard .nemo-modulo-testo:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: -3px;
}

.nemo-wizard .nemo-modulo-testo h4 {
	margin: 18px 0 6px;
	font-size: 16px;
	color: var(--nemo-verde);
}

.nemo-wizard .nemo-modulo-testo p {
	margin: 0 0 12px;
}

.nemo-wizard .nemo-modulo-stato {
	margin: 0;
	padding: 0 18px 14px;
	min-height: 1.6em;
	color: var(--nemo-testo-tenue);
	font-size: 15px;
}

/* Una spunta spenta deve sembrare spenta, non rotta. */
.nemo-wizard .nemo-spunta:disabled + .nemo-etichetta--spunta {
	color: var(--nemo-testo-tenue);
}

/* --- Firma col telefono ------------------------------------------------- */

.nemo-wizard .nemo-firma-qr {
	margin-top: 14px;
	padding: 16px;
	background: var(--nemo-superficie);
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-controllo);
	text-align: center;
}

.nemo-wizard .nemo-firma-qr[hidden] {
	display: none;
}

.nemo-wizard .nemo-firma-qr-codice svg {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.nemo-wizard .nemo-firma-qr-stato {
	margin: 12px 0 0;
	color: var(--nemo-testo-tenue);
	font-size: 15px;
}

@media (max-width: 540px) {
	.nemo-wizard .nemo-modulo-testo {
		max-height: 260px;
	}
}

/* --- Il passo della firma, a tappe -------------------------------------- */

.nemo-wizard .nemo-tappa {
	margin: 0 0 14px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: var(--nemo-superficie);
	overflow: hidden;
}

.nemo-wizard .nemo-tappa-testa {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
}

.nemo-wizard .nemo-tappa-segno {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--nemo-fondo);
	font-size: 20px;
	line-height: 1;
}

.nemo-wizard .nemo-tappa-nomi {
	display: block;
	min-width: 0;
}

.nemo-wizard .nemo-tappa-numero {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nemo-testo-tenue);
}

.nemo-wizard .nemo-tappa-titolo {
	display: block;
	margin-top: 2px;
	font-size: 18px;
	font-weight: 700;
	color: var(--nemo-verde);
}

.nemo-wizard .nemo-tappa-sotto {
	display: block;
	margin-top: 4px;
	color: var(--nemo-testo-tenue);
}

.nemo-wizard .nemo-tappa-dentro {
	padding: 0 18px 18px;
}

.nemo-wizard .nemo-tappa-avanti {
	width: 100%;
	margin-top: 6px;
}

/* Una tappa finita si richiude e resta come promemoria di quello che hai già
   fatto: sparire del tutto farebbe sembrare di aver perso un pezzo. */
.nemo-wizard .nemo-tappe.ha-javascript .nemo-tappa .nemo-tappa-dentro {
	display: none;
}

.nemo-wizard .nemo-tappe.ha-javascript .nemo-tappa.is-aperta .nemo-tappa-dentro {
	display: block;
}

.nemo-wizard .nemo-tappe.ha-javascript .nemo-tappa:not(.is-aperta):not(.is-fatta) {
	opacity: 0.55;
}

.nemo-wizard .nemo-tappa.is-aperta {
	border-color: var(--nemo-verde);
	box-shadow: 0 2px 10px rgba(15, 57, 59, 0.08);
}

.nemo-wizard .nemo-tappa.is-fatta .nemo-tappa-segno {
	background: var(--nemo-verde);
	color: #fff;
	font-size: 0;
}

.nemo-wizard .nemo-tappa.is-fatta .nemo-tappa-segno::after {
	content: "\2713";
	font-size: 22px;
	line-height: 1;
}

.nemo-wizard .nemo-tappa.is-fatta .nemo-tappa-sotto {
	display: none;
}

/* --- Firma col telefono -------------------------------------------------- */

.nemo-wizard .nemo-altra-via {
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--nemo-fondo);
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-controllo);
}

.nemo-wizard .nemo-altra-via-riga {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.nemo-wizard .nemo-altra-via-segno {
	flex: 0 0 auto;
	font-size: 26px;
	line-height: 1;
}

.nemo-wizard .nemo-altra-via-testo {
	flex: 1 1 200px;
	min-width: 0;
}

.nemo-wizard .nemo-altra-via-testo strong {
	display: block;
	color: var(--nemo-verde);
}

.nemo-wizard .nemo-altra-via-testo span {
	display: block;
	font-size: 15px;
	color: var(--nemo-testo-tenue);
}

.nemo-wizard .nemo-firma-qr-passi {
	margin: 16px 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.nemo-wizard .nemo-firma-qr-passi li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}

.nemo-wizard .nemo-firma-qr-numero {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--nemo-verde);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.nemo-wizard .nemo-firma-qr-icona {
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
}

.nemo-wizard .nemo-nota-campo {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--nemo-fondo);
	border-left: 3px solid var(--nemo-verde);
	border-radius: var(--nemo-r-controllo);
	color: var(--nemo-testo-tenue);
}

@media (max-width: 540px) {
	.nemo-wizard .nemo-tappa-testa {
		padding: 14px;
		gap: 10px;
	}

	.nemo-wizard .nemo-tappa-dentro {
		padding: 0 14px 14px;
	}
}

/* --- Pagina riservata ai soci -------------------------------------------- */

.nemo-riservata {
	max-width: 560px;
	margin: 24px auto;
	padding: 28px 26px;
	background: var(--nemo-superficie);
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--nemo-testo);
}

.nemo-riservata-segno {
	margin: 0 0 10px;
	font-size: 34px;
	line-height: 1;
}

.nemo-riservata h2 {
	margin: 0 0 10px;
	font-size: 21px;
	color: var(--nemo-verde);
}

.nemo-riservata p {
	margin: 0 0 16px;
	line-height: 1.6;
	color: var(--nemo-testo-tenue);
}

.nemo-riservata-azioni {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

/* ------------------------------------------------------------------ accesso */

/*
 * Il modulo per entrare e' corto: due campi e un pulsante. Se restasse largo
 * come il percorso di iscrizione sembrerebbe vuoto, quindi si stringe.
 */
.nemo-accesso {
	max-width: 460px;
}

.nemo-accesso .nemo-intro {
	margin-bottom: 20px;
}

.nemo-accesso .nemo-spunta-riga {
	margin-bottom: 18px;
}

/* Un solo pulsante, e occupa tutta la riga: non c'e' altro da scegliere. */
.nemo-form-accesso .nemo-bottone--principale {
	display: block;
	width: 100%;
}

.nemo-accesso-aiuti {
	margin: 18px 0 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.7;
	color: var(--nemo-testo-tenue);
}

.nemo-accesso-aiuti a {
	color: var(--nemo-verde);
}

.nemo-accesso-aiuti a:hover {
	text-decoration: none;
}

.nemo-accesso-azioni {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.nemo-accesso-azioni .nemo-bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* --------------------------------------------------- voci dell'area socio */

/*
 * Da telefono le voci sono una riga sola che scorre di lato, come le storie in
 * cima a un'applicazione: si trascina col dito e si vedono tutte senza che la
 * pagina diventi un muro di quadrati. Da schermo largo diventano una colonna a
 * sinistra, e il contenuto si apre accanto.
 */
.nemo-area-corpo {
	display: block;
}

.nemo-scelta-guscio {
	position: relative;
	margin: 0 0 16px;
}

.nemo-scelta {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 28px 2px 2px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.nemo-scelta::-webkit-scrollbar {
	display: none;
}

/*
 * L'ultima voce sfuma sul bordo destro: dice che la riga continua. Si fa con
 * una maschera e non con una sfumatura colorata, perche' il fondo lo decide il
 * tema del sito: una sfumatura verso il nostro crema, sopra un fondo bianco o
 * scuro, sarebbe una macchia.
 */
@supports (mask-image: linear-gradient(#000, #000)) {
	.nemo-scelta {
		mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	}
}

.nemo-scelta-voce {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
	padding: 8px 16px 8px 8px;
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-pillola);
	background: var(--nemo-superficie);
	color: var(--nemo-testo);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: border-color var(--nemo-veloce), background-color var(--nemo-veloce), color var(--nemo-veloce);
}

.nemo-scelta-icona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--nemo-verde-tenue);
	color: var(--nemo-verde);
	transition: background-color var(--nemo-veloce), color var(--nemo-veloce);
}

.nemo-scelta-icona svg {
	width: 19px;
	height: 19px;
}

.nemo-scelta-voce:hover {
	border-color: var(--nemo-bordo-forte);
	color: var(--nemo-testo);
}

.nemo-scelta-voce.is-scelta {
	border-color: var(--nemo-verde);
	background: var(--nemo-verde);
	color: #fff;
}

.nemo-scelta-voce.is-scelta .nemo-scelta-icona {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.nemo-scelta-voce:focus-visible {
	outline: 3px solid var(--nemo-arancio);
	outline-offset: 2px;
}

/*
 * Finche' JavaScript non ha acceso gli scomparti si vedono tutti i riquadri:
 * e' quello che deve succedere se lo script non arriva.
 */
.nemo-area[data-una-per-volta] .nemo-sezione[hidden] {
	display: none;
}

/* --------------------------------------------- da schermo largo, due colonne */

@media (min-width: 900px) {
	.nemo-area {
		max-width: 1000px;
	}

	.nemo-area-corpo {
		display: grid;
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}

	.nemo-scelta-guscio {
		margin: 0;
		position: sticky;
		/* Sotto la barra nera di WordPress, quando c'e'. */
		top: calc(16px + var(--wp-admin-bar-height, 0px));
	}

	.nemo-scelta {
		mask-image: none;
		-webkit-mask-image: none;
		flex-direction: column;
		gap: 4px;
		overflow: visible;
		padding: 8px;
		border: 1px solid var(--nemo-bordo);
		border-radius: var(--nemo-r-scheda);
		background: var(--nemo-superficie);
	}

	.nemo-scelta-voce {
		width: 100%;
		border-color: transparent;
		border-radius: var(--nemo-r-controllo);
		background: transparent;
		white-space: normal;
	}

	.nemo-scelta-voce:hover {
		border-color: transparent;
		background: var(--nemo-fondo);
	}

	.nemo-scelta-voce.is-scelta {
		border-color: transparent;
	}

	/*
	 * I campi non si allargano quanto la colonna: una riga di testo lunga
	 * settecento pixel si perde, e un campo "CAP" largo come lo schermo dice a
	 * chi lo compila che ci va dentro molto piu' di cinque cifre.
	 */
	.nemo-area-contenuto .nemo-campo,
	.nemo-area-contenuto .nemo-intro,
	.nemo-area-contenuto .nemo-nota {
		max-width: 560px;
	}
}

/* ------------------------------------------------------------- il contatore */

/*
 * I giorni che mancano si leggono da lontano: cifre grandi, una per riquadro,
 * come un contatore meccanico. Sotto, una barra dice quanta parte dell'anno e'
 * gia' passata. Il colore da solo non basta mai: sopra c'e' la parola, e il
 * numero resta scritto per esteso per chi usa un lettore di schermo.
 */
.nemo-conto {
	margin: 16px 0 0;
}

.nemo-conto-etichetta {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nemo-testo-tenue);
}

.nemo-conto-cifre {
	display: flex;
	gap: 5px;
	margin: 0 0 12px;
}

.nemo-conto-cifra {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	padding: 6px 4px 8px;
	border-radius: 8px;
	background: var(--nemo-verde);
	color: var(--nemo-crema);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.nemo-conto-barra {
	position: relative;
	height: 8px;
	margin: 0 0 10px;
	border-radius: 4px;
	overflow: hidden;
	/* I trattini danno la scala, come le tacche di un indicatore. */
	background:
		repeating-linear-gradient(90deg, var(--nemo-bordo) 0 1px, transparent 1px 10%),
		var(--nemo-crema);
}

.nemo-conto-riempimento {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--nemo-verde);
	transition: width var(--nemo-morbido);
}

.nemo-conto-data {
	margin: 0;
	color: var(--nemo-testo-tenue);
	font-size: 16px;
}

/* Scaduta: le cifre passano al rosso, e sopra c'e' scritto perche'. */
.nemo-conto--passata .nemo-conto-cifra {
	background: var(--nemo-errore);
	color: #fff;
}

.nemo-conto--passata .nemo-conto-riempimento {
	background: var(--nemo-errore);
}

@media (max-width: 520px) {
	.nemo-conto-cifra {
		min-width: 38px;
		font-size: 36px;
	}
}

/* Si legge ma non si vede: serve ai lettori di schermo. */
.nemo-wizard .nemo-nascosto-visivo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nemo-cronologia {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nemo-tappa-storica {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--nemo-bordo);
}

.nemo-tappa-storica:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nemo-tappa-quando {
	color: var(--nemo-testo-tenue);
	font-size: 16px;
}

.nemo-tappa-cosa {
	color: var(--nemo-testo);
	line-height: 1.5;
}

@media (max-width: 520px) {
	.nemo-tappa-storica {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}