/*
 * NemoDSA, sistema di design.
 *
 * Un solo file definisce colori, spaziature, raggi, ombre e componenti di base.
 * Bacheca, percorso di iscrizione e area riservata leggono tutti da qui: cambiare
 * il raggio dei pulsanti o il verde del marchio si fa in un punto, e cambia
 * ovunque. Senza, dopo sei mesi si hanno quattro grigi leggermente diversi e tre
 * bottoni che non si somigliano.
 *
 * DUE REGOLE CHE VINCOLANO LA TAVOLOZZA
 *
 * 1. L'arancione del marchio (#ef8451) non porta mai testo sopra di se': bianco
 *    su quell'arancione da' 2,6:1, sotto il minimo di 4,5:1 richiesto da WCAG AA.
 *    Serve da accento (anelli di focus, bordi attivi), mai da fondo di un
 *    pulsante. Dove serve un colore caldo leggibile si usa il terracotta
 *    (#b8501f), che con il bianco arriva a 5,9:1.
 * 2. Nessuna informazione passa dal solo colore. Ogni stato ha una parola
 *    accanto al pallino, ogni errore ha un simbolo oltre al rosso.
 *
 * SCALA. Spaziature e dimensioni seguono passi di 4px. I raggi hanno tre valori
 * soli: 10px per i controlli, 14px per le schede, pieno per le pillole.
 */

:root {
	/* --- colori del marchio ------------------------------------------- */
	--nemo-verde: #0f393b;
	--nemo-verde-chiaro: #1d5356;
	--nemo-verde-tenue: #eef4f4;
	--nemo-arancio: #ef8451;
	--nemo-terracotta: #b8501f;
	--nemo-terracotta-tenue: #fdf5f0;
	--nemo-crema: #f7f3ef;

	/* --- testo e superfici -------------------------------------------- */
	--nemo-testo: #17201f;
	--nemo-testo-tenue: #5b6665;
	--nemo-fondo: #fbfaf9;
	--nemo-superficie: #ffffff;
	--nemo-bordo: #e3ddd7;
	--nemo-bordo-forte: #94897f;

	/* --- stati -------------------------------------------------------- */
	--nemo-buono: #1c6b3f;
	--nemo-buono-tenue: #eef8f1;
	--nemo-buono-bordo: #7ab895;
	--nemo-attesa: #8a3d14;
	--nemo-attesa-tenue: #fdf5f0;
	--nemo-attesa-bordo: #dfae90;
	--nemo-errore: #a4232b;
	--nemo-errore-tenue: #fdf2f2;
	--nemo-errore-bordo: #d99ba0;

	/* --- forma -------------------------------------------------------- */
	--nemo-r-controllo: 10px;
	--nemo-r-scheda: 14px;
	--nemo-r-pillola: 999px;

	--nemo-s1: 4px;
	--nemo-s2: 8px;
	--nemo-s3: 12px;
	--nemo-s4: 16px;
	--nemo-s5: 20px;
	--nemo-s6: 24px;
	--nemo-s8: 32px;

	--nemo-ombra-1: 0 1px 2px rgba(23, 32, 31, .05);
	--nemo-ombra-2: 0 1px 2px rgba(23, 32, 31, .05), 0 8px 24px rgba(23, 32, 31, .06);
	--nemo-ombra-3: 0 24px 64px rgba(23, 32, 31, .22);

	/* --- tipografia --------------------------------------------------- */
	--nemo-font: 'NemoPoppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/*
	 * La scala tipografica: otto gradini, ognuno con un mestiere dichiarato.
	 * Fuori da questi non si scrive un font-size. Prima la bacheca ne usava
	 * dodici, con salti da mezzo pixel che nessuno legge come gerarchia e che
	 * si vedono solo come sciatteria.
	 */
	--nemo-t-micro: 11px;     /* iniziali, intestazioni di colonna, contatori di sezione */
	--nemo-t-piccolo: 12.5px; /* testo di servizio, note, didascalie */
	--nemo-t-fitto: 13px;     /* corpo delle schermate che elencano dati */
	--nemo-t-base: 14px;      /* corpo standard */
	--nemo-t-medio: 15px;     /* corpo in evidenza */
	--nemo-t-testa: 16px;     /* titolo di un pannello o di una scheda */
	--nemo-t-titolo: 19px;    /* titolo di pagina */
	--nemo-t-numero: 22px;    /* i numeri dei contatori, da leggere di sfuggita */
	--nemo-t-grande: 30px;    /* il titolo piu' grande, uno per schermata */

	/* --- movimento ---------------------------------------------------- */
	--nemo-veloce: .15s ease;
	--nemo-morbido: .26s cubic-bezier(.22, 1, .36, 1);

	/* --- livelli ------------------------------------------------------ */
	--nemo-z-velo: 100000;
	--nemo-z-pannello: 100001;
	--nemo-z-finestra: 100010;
}

/* Il font del marchio, incluso nel plugin e non caricato da terzi. */
@font-face {
	font-family: 'NemoPoppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}

@font-face {
	font-family: 'NemoPoppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
}

@font-face {
	font-family: 'NemoPoppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
	font-family: 'NemoPoppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}

/* ======================================================== componenti base */

.nemo-ds,
.nemo-ds *,
.nemo-ds *::before,
.nemo-ds *::after {
	box-sizing: border-box;
}

.nemo-ds {
	font-family: var(--nemo-font);
	font-size: var(--nemo-t-base);
	line-height: 1.6;
	color: var(--nemo-testo);
	-webkit-font-smoothing: antialiased;
}

/* --- solo per gli assistenti vocali ---------------------------------- */

.nemo-solo-voce {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- controlli -------------------------------------------------------- */

.nemo-ds .nemo-c-input {
	width: 100%;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid var(--nemo-bordo-forte);
	border-radius: var(--nemo-r-controllo);

	/* Solo il colore: la forma abbreviata cancella anche l'immagine della
	   freccetta dei menu a tendina, che restano riquadri muti. */
	background-color: var(--nemo-superficie);
	font-family: inherit;
	font-size: var(--nemo-t-base);
	color: var(--nemo-testo);
	transition: border-color var(--nemo-veloce), box-shadow var(--nemo-veloce);
}

/* Un menu a tendina si disegna la sua freccia, uguale dappertutto. */
.nemo-ds select.nemo-c-input {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6665' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	-webkit-appearance: none;
	appearance: none;
}

.nemo-ds .nemo-c-input:focus {
	outline: none;
	border-color: var(--nemo-verde);
	box-shadow: 0 0 0 3px rgba(15, 57, 59, .12);
}

.nemo-ds .nemo-c-input::placeholder {
	color: var(--nemo-testo-tenue);
	opacity: 1;
}

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

.nemo-ds .nemo-c-bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nemo-s2);
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: var(--nemo-r-controllo);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--nemo-veloce), border-color var(--nemo-veloce), transform var(--nemo-veloce);
}

.nemo-ds .nemo-c-bottone:active {
	transform: translateY(1px);
}

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

.nemo-ds .nemo-c-bottone:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.nemo-ds .nemo-c-bottone--primario {
	background: var(--nemo-verde);
	color: #fff;
}

.nemo-ds .nemo-c-bottone--primario:hover:not(:disabled) {
	background: var(--nemo-verde-chiaro);
}

.nemo-ds .nemo-c-bottone--fantasma {
	background: var(--nemo-superficie);
	border-color: var(--nemo-bordo-forte);
	color: var(--nemo-testo);
}

.nemo-ds .nemo-c-bottone--fantasma:hover:not(:disabled) {
	background: var(--nemo-fondo);
	border-color: var(--nemo-verde);
}

.nemo-ds .nemo-c-bottone--pericolo {
	background: var(--nemo-superficie);
	border-color: var(--nemo-errore);
	color: var(--nemo-errore);
}

.nemo-ds .nemo-c-bottone--pericolo:hover:not(:disabled) {
	background: var(--nemo-errore-tenue);
}

.nemo-ds .nemo-c-bottone--piccolo {
	min-height: 34px;
	padding: 6px 14px;
	font-size: 13px;
}

/* --- pillole di stato ------------------------------------------------- */

.nemo-ds .nemo-c-pillola {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border: 1px solid transparent;
	border-radius: var(--nemo-r-pillola);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.nemo-ds .nemo-c-pillola--buona {
	background: var(--nemo-buono-tenue);
	color: var(--nemo-buono);
	border-color: var(--nemo-buono-bordo);
}

.nemo-ds .nemo-c-pillola--attesa {
	background: var(--nemo-attesa-tenue);
	color: var(--nemo-attesa);
	border-color: var(--nemo-attesa-bordo);
}

.nemo-ds .nemo-c-pillola--errore {
	background: var(--nemo-errore-tenue);
	color: var(--nemo-errore);
	border-color: var(--nemo-errore-bordo);
}

.nemo-ds .nemo-c-pillola--spenta {
	background: #f2f1f0;
	color: var(--nemo-testo-tenue);
	border-color: var(--nemo-bordo-forte);
}

/* --- schede ----------------------------------------------------------- */

.nemo-ds .nemo-c-scheda {
	padding: var(--nemo-s4);
	border: 1px solid var(--nemo-bordo);
	border-radius: var(--nemo-r-scheda);
	background: var(--nemo-superficie);
	box-shadow: var(--nemo-ombra-1);
}

/* --- avatar ----------------------------------------------------------- */

.nemo-ds .nemo-c-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--nemo-verde-chiaro) 0%, var(--nemo-verde) 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

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

.nemo-ds .nemo-c-messaggio {
	padding: 11px 14px;
	border-left: 3px solid var(--nemo-buono);
	border-radius: 0 var(--nemo-r-controllo) var(--nemo-r-controllo) 0;
	background: var(--nemo-buono-tenue);
	color: var(--nemo-buono);
	font-size: 13.5px;
	font-weight: 600;
}

.nemo-ds .nemo-c-messaggio--attenzione {
	border-left-color: var(--nemo-terracotta);
	background: var(--nemo-terracotta-tenue);
	color: var(--nemo-attesa);
}

.nemo-ds .nemo-c-messaggio--errore {
	border-left-color: var(--nemo-errore);
	background: var(--nemo-errore-tenue);
	color: var(--nemo-errore);
}

/* --- movimento ridotto ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.nemo-ds *,
	.nemo-ds *::before,
	.nemo-ds *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* --- contrasto rafforzato --------------------------------------------- */

@media (prefers-contrast: more) {
	:root {
		--nemo-bordo: #8d8278;
		--nemo-bordo-forte: #4a443d;
		--nemo-testo-tenue: #333b3a;
	}
}