/*
 * AZ Appuntamenti - lo stile del riquadro.
 *
 * I valori NON sono inventati: sono quelli del sito, presi dal tema e dal
 * modulo candidature. Teal #067781, testo #083141, pannelli #EBF2F4, bordi
 * #D7E3E7, campi con raggio 10px, pulsanti a pillola. I caratteri non si
 * ricaricano: `font: inherit` prende Jost e Mulish dal tema.
 *
 * LA LARGHEZZA. Il riquadro si ferma a 1440px e sta al centro. E' una via di
 * mezzo trovata a tentativi: a tutta pagina (1600 e passa) una domanda di quattro parole
 * si stira e l'occhio deve attraversare mezzo schermo per andare
 * dall'etichetta al campo; a 900 avanzava spazio ai lati senza motivo. A 1140
 * i tre campi stanno comodi in riga e gli orari entrano in una griglia larga -
 * a 1440 ce ne stanno due file in piu' senza che il testo si stiri. Oltre
 * questa misura le domande e i campi ricominciano a soffrire: e' il limite.
 * La larghezza in piu' la usa la griglia degli orari, che infila quanti
 * riquadri ci stanno invece di un numero fisso di colonne.
 */

.az-app {
	--az-app-teal: #067781;
	--az-app-teal-scuro: #04565d;
	--az-app-ink: #083141;
	--az-app-soft: #EBF2F4;
	--az-app-line: #D7E3E7;
	--az-app-spento: #E4EAEC;
	--az-app-tenue: #4a6673;
	--az-app-ombra: 0 1px 2px rgba(8,49,65,.04), 0 10px 28px rgba(8,49,65,.07);

	/* I caratteri si prendono dalle VARIABILI DEL TEMA, non si riscrivono.
	   Somigliare al sito e' fragile: il giorno che cambiate il font del tema,
	   una copia resta indietro e stona. Cosi' invece il riquadro cambia
	   insieme al resto, e se un domani quelle variabili non ci fossero piu'
	   ricade sul carattere ereditato, che e' comunque quello giusto. */
	--az-app-titoli: var(--wp--preset--font-family--jost, inherit);
	--az-app-testo: var(--wp--preset--font-family--mulish, inherit);

	font-family: var(--az-app-testo);
	color: var(--az-app-ink);
	font-size: 16px;
	line-height: 1.5;
	width: 100%;
	/* Il pannello prende il tenue del sito, non il bianco: su una pagina
	   bianca un riquadro bianco non e' un riquadro, e' un pezzo di pagina
	   con un bordo intorno. Cosi' invece il bianco resta a quello su cui si
	   clicca - sedi, giorni, orari, campi - e si legge subito cosa e'
	   toccabile e cosa e' solo sfondo. E' lo schema del modulo candidature. */
	background: var(--az-app-soft);
	border: 1px solid #dbe6e9;
	border-radius: 22px;
	/* Ombra corta: una sfocatura larga su un riquadro di 1140px e' l'area
	   piu' costosa da ridisegnare di tutta la pagina. */
	box-shadow: 0 1px 2px rgba(8,49,65,.04), 0 4px 12px rgba(8,49,65,.05);
	padding: 20px 16px 24px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}
.az-app *, .az-app *::before, .az-app *::after { box-sizing: border-box; }

.az-app-carica { color: var(--az-app-tenue); padding: 14px 0; }

/* --- la barra dei passi --- */
/* La barra dei passi, con il filo che si riempie mano a mano.
   Il filo sta DIETRO le tappe (z-index) e si ferma dove arriva il passo
   corrente: e' l'unico modo per far vedere quanto manca senza scrivere
   "passo 2 di 4", che e' un'informazione da modulo, non da sito. */
.az-app-barra {
	position: relative;
	display: flex; align-items: stretch; gap: 6px;
	list-style: none; margin: 0 0 24px; padding: 0;
}
.az-app-barra::before,
.az-app-barra::after {
	content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px;
	border-radius: 2px; z-index: 0;
}
.az-app-barra::before { background: var(--az-app-spento); }
.az-app-barra::after {
	background: var(--az-app-teal); right: auto;
	width: calc((100% - 24px) * var(--az-app-avanzamento, 0));
	transition: width .34s cubic-bezier(.22,.61,.36,1);
}
.az-app-tappa { position: relative; z-index: 1; }
.az-app-tappa {
	flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px;
	padding: 9px 10px; border-radius: 12px; background: transparent;
	border: 1px solid transparent; font-size: 13px;
	transition: background .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.az-app-tappa.az-app-attivo { background: #fff; border-color: #dfeaed; }
.az-app-tappa.az-app-fatto { cursor: pointer; }
.az-app-tappa.az-app-fatto:hover { background: rgba(255,255,255,.65); }
.az-app-pallino {
	width: 24px; height: 24px; flex: none; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 12px; background: var(--az-app-spento); color: var(--az-app-tenue);
	transition: background .25s cubic-bezier(.22,.61,.36,1), color .25s ease;
}
.az-app-attivo .az-app-pallino { background: var(--az-app-teal); color: #fff; }
.az-app-fatto .az-app-pallino { background: #CDE5E8; color: var(--az-app-teal); }
.az-app-tappa-testo { min-width: 0; }
.az-app-tappa-nome { display: block; font-weight: 700; letter-spacing: -.1px; font-family: var(--az-app-titoli); }
.az-app-futuro .az-app-tappa-nome { color: #9fb2ba; font-weight: 600; }
.az-app-tappa-valore {
	display: block; font-size: 12px; color: var(--az-app-tenue);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* L'altezza minima che ha preso il posto dell'animazione dell'altezza.
   Le schermate sono diverse - due sedi contro quattordici orari - e senza
   una misura di fondo il pannello si accorciava e allungava a ogni passo.
   Fissato un minimo, il salto quasi non c'e' piu': si risolve con lo
   spazio invece che con il movimento, e lo spazio non costa fotogrammi. */
.az-app-schermata { min-height: 400px; }

/* Il riquadro dichiara di essere un mondo a se': quello che cambia qui
   dentro non obbliga il browser a rifare i conti su tutta la pagina - che
   di roba ne ha parecchia. */
.az-app { contain: layout style; }

/* --- il movimento fra le schermate ---

   Tre regole, e tutte e tre servono a non far sembrare il riquadro nervoso.

   1. Si anima SOLO al cambio di schermata: la classe `az-app-anima` la mette
      il JavaScript, e non la mette quando ridisegna per un orario scelto o
      per un errore. Un'animazione che riparte a ogni tocco e' la definizione
      di scatto.
   2. Il verso racconta dove si va: da destra andando avanti, da sinistra
      tornando indietro.
   3. `backwards` e non `both`: con `both` l'animazione TRATTIENE la posizione
      finale anche dopo, e da quel momento il sollevamento al passaggio del
      mouse non funziona piu' - l'animazione vince sullo stile. Con
      `backwards` l'elemento, finito il movimento, torna a essere governato
      dalle sue regole normali.

   La curva e' la stessa dappertutto (.22,.61,.36,1): parte decisa e si posa
   piano, che e' come si muovono le cose pesanti. Le durate stanno tutte fra
   i 300 e i 340 millisecondi - sotto i 200 non si vede, sopra i 400 si
   aspetta. */
@keyframes az-app-da-destra { from { opacity: 0; transform: translate3d(24px, 0, 0); } }
@keyframes az-app-da-sinistra { from { opacity: 0; transform: translate3d(-24px, 0, 0); } }
@keyframes az-app-su { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

.az-app-anima.az-app-avanti > * { animation: az-app-da-destra .34s cubic-bezier(.22,.61,.36,1) backwards; }
.az-app-anima.az-app-indietro > * { animation: az-app-da-sinistra .34s cubic-bezier(.22,.61,.36,1) backwards; }
.az-app-anima > *:nth-child(2) { animation-delay: .045s; }
.az-app-anima > *:nth-child(3) { animation-delay: .09s; }
.az-app-anima > *:nth-child(n+4) { animation-delay: .13s; }

/* I contenitori delle opzioni non si muovono: si muovono le opzioni dentro,
   una dopo l'altra. Animare tutti e due farebbe due movimenti sovrapposti. */
.az-app-anima > .az-app-sedi,
.az-app-anima > .az-app-chip,
.az-app-anima > .az-app-giorni,
.az-app-anima > .az-app-orari { animation: none; }

.az-app-anima .az-app-sede,
.az-app-anima .az-app-motivo,
.az-app-anima .az-app-giorno,
.az-app-anima .az-app-ora { animation: az-app-su .3s cubic-bezier(.22,.61,.36,1) backwards; }
.az-app-anima .az-app-sede:nth-child(1),
.az-app-anima .az-app-motivo:nth-child(1),
.az-app-anima .az-app-giorno:nth-child(1),
.az-app-anima .az-app-ora:nth-child(1) { animation-delay: .06s; }
.az-app-anima .az-app-sede:nth-child(2),
.az-app-anima .az-app-motivo:nth-child(2),
.az-app-anima .az-app-giorno:nth-child(2),
.az-app-anima .az-app-ora:nth-child(2) { animation-delay: .09s; }
.az-app-anima .az-app-sede:nth-child(3),
.az-app-anima .az-app-motivo:nth-child(3),
.az-app-anima .az-app-giorno:nth-child(3),
.az-app-anima .az-app-ora:nth-child(3) { animation-delay: .12s; }
.az-app-anima .az-app-motivo:nth-child(4),
.az-app-anima .az-app-giorno:nth-child(4),
.az-app-anima .az-app-ora:nth-child(4) { animation-delay: .15s; }
.az-app-anima .az-app-motivo:nth-child(5),
.az-app-anima .az-app-giorno:nth-child(5),
.az-app-anima .az-app-ora:nth-child(5) { animation-delay: .17s; }
.az-app-anima .az-app-giorno:nth-child(n+6),
.az-app-anima .az-app-ora:nth-child(n+6) { animation-delay: .19s; }
/* Oltre il quinto si smette di animare: ogni elemento che entra per conto
   suo e' un livello in piu' da comporre, e quattordici insieme si sentono.
   Gli ultimi entrano con il contenitore, e nessuno se ne accorge. */
.az-app-anima .az-app-giorno:nth-child(n+6),
.az-app-anima .az-app-ora:nth-child(n+6) { animation: none; }

.az-app-domanda {
	margin: 0 0 6px; font-size: 22px; line-height: 1.2; letter-spacing: -.3px;
	font-family: var(--az-app-titoli); font-weight: 600;
}
.az-app-domanda:focus { outline: none; }
.az-app-sotto { margin: 0 0 20px; color: var(--az-app-tenue); font-size: 15px; }

/* --- sedi --- */
.az-app-sedi { display: flex; flex-direction: column; gap: 12px; }
.az-app-sede {
	display: flex; align-items: center; gap: 14px;
	width: 100%; text-align: left; font: inherit; font-size: 16px; cursor: pointer;
	padding: 17px; border-radius: 16px; background: #fff; color: var(--az-app-ink);
	border: 2px solid var(--az-app-line);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
.az-app-sede:hover { border-color: var(--az-app-teal); box-shadow: var(--az-app-ombra); transform: translateY(-1px); }
/* Il bordo e' SEMPRE di 2px, trasparente quando non e' scelto: portarlo da
   1 a 2 al momento della scelta sposterebbe di un pixel tutto il contenuto
   della scheda, e quel salto si vede e costa un ricalcolo dell'impaginazione
   proprio mentre parte l'animazione. */
.az-app-sede.az-app-scelto { border-color: var(--az-app-teal); box-shadow: 0 8px 24px rgba(6,119,129,.16); }
.az-app-pin { flex: none; color: var(--az-app-tenue); display: flex; }
.az-app-sede:hover .az-app-pin, .az-app-sede.az-app-scelto .az-app-pin { color: var(--az-app-teal); }
.az-app-sede-testo { flex: 1; min-width: 0; }
.az-app-sede-nome { display: block; font-weight: 700; font-size: 17px; }
.az-app-sede-via { display: block; font-size: 13px; color: var(--az-app-tenue); margin-top: 3px; }
.az-app-freccia { flex: none; color: #b3c6cc; display: flex; }
.az-app-sede:hover .az-app-freccia { color: var(--az-app-teal); }

/* --- motivi --- */
.az-app-chip { display: flex; flex-wrap: wrap; gap: 10px; }
.az-app-motivo {
	font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
	padding: 13px 20px; border-radius: 999px; background: #fff; color: var(--az-app-ink);
	border: 1px solid var(--az-app-line); transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.az-app-motivo:hover { border-color: var(--az-app-teal); color: var(--az-app-teal); }
.az-app-motivo.az-app-scelto { background: var(--az-app-teal); color: #fff; border-color: var(--az-app-teal); }
.az-app-nota { margin: 14px 0 0; font-size: 14px; color: var(--az-app-tenue); }

/* --- quando --- */
/* La riga dei giorni e la griglia degli orari stanno su due fogli bianchi
   dentro il pannello tenue: sono due domande diverse - che giorno, che ora -
   e separarle con la carta invece che con una riga si legge meglio. E' lo
   stesso impianto delle schede recensioni sul loro fondo. */
.az-app-foglio {
	background: #fff; border: 1px solid #e3edef; border-radius: 16px;
	padding: 14px; margin-bottom: 14px;
}
.az-app-giorni { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.az-app-giorni::-webkit-scrollbar { display: none; }
.az-app-giorno {
	flex: 0 0 auto; min-width: 66px; font: inherit; cursor: pointer; padding: 11px 8px;
	border-radius: 14px; text-align: center; background: #F7FAFB; color: var(--az-app-ink);
	border: 1px solid var(--az-app-line); transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.az-app-giorno:hover:not([disabled]) { border-color: var(--az-app-teal); }
.az-app-giorno.az-app-scelto {
	background: var(--az-app-teal); color: #fff; border-color: var(--az-app-teal);
	box-shadow: 0 6px 16px rgba(6,119,129,.20);
}
.az-app-giorno.az-app-pieno { background: transparent; color: #a6b8bf; border-style: dashed; cursor: not-allowed; }
.az-app-dow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }
.az-app-num { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; font-family: var(--az-app-titoli); }
.az-app-mese { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .65; }

/* Gli orari usano la larghezza che c'e': quanti ce ne stanno, non un numero
   fisso di colonne. E' l'unico punto in cui lo spazio in piu' serve davvero. */
.az-app-orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.az-app-ora {
	font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; padding: 15px 4px;
	border-radius: 12px; background: #F7FAFB; color: var(--az-app-ink); border: 1px solid var(--az-app-line);
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1);
}
.az-app-ora:hover:not([disabled]) { border-color: var(--az-app-teal); color: var(--az-app-teal); transform: translateY(-1px); }
.az-app-ora.az-app-scelto {
	background: var(--az-app-teal); color: #fff; border-color: var(--az-app-teal); font-weight: 700;
	box-shadow: 0 6px 16px rgba(6,119,129,.22);
}
.az-app-ora.az-app-occupato { background: transparent; color: #a6b8bf; border-color: transparent; cursor: not-allowed; text-decoration: line-through; }

.az-app-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12px; color: var(--az-app-tenue); }
.az-app-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.az-app-legenda i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.az-app-l-libero { background: #fff; border: 1px solid var(--az-app-line); }
.az-app-l-scelto { background: var(--az-app-teal); }
.az-app-l-preso { background: #d8e3e6; }

/* LE SAGOME.
   Occupano esattamente il posto dei giorni e degli orari veri, cosi' quando
   i dati arrivano non si sposta niente: cambia solo cosa c'e' dentro. Il
   respiro e' lentissimo e sulla sola trasparenza - deve dire "sto
   arrivando", non chiedere attenzione. */
.az-app-fantasma {
	display: block; background: #dfe8ea; border-color: transparent;
	pointer-events: none; animation: az-app-respiro 1.5s ease-in-out infinite;
}
.az-app-giorno.az-app-fantasma { height: 62px; }
.az-app-ora.az-app-fantasma { height: 50px; }
@keyframes az-app-respiro { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }

/* Il titolino della fascia: piccolo, in maiuscoletto, staccato. Deve dire
   "da qui in poi e' pomeriggio" senza rubare l'occhio ai numeri. */
.az-app-fascia-titolo {
	margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .8px;
	text-transform: uppercase; color: var(--az-app-tenue);
	font-family: var(--az-app-titoli);
	display: flex; align-items: center; gap: 10px;
}
/* Il filetto che accompagna il titolino e' lo stesso motivo del titolo della
   striscia dei loghi in fondo al sito: una riga che finisce dove comincia la
   scritta. Ripetere un motivo che c'e' gia' e' quello che tiene insieme un
   sito, molto piu' che ripetere un colore. */
.az-app-fascia-titolo::after {
	content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28;
}
.az-app-orari + .az-app-fascia-titolo { margin-top: 20px; }

/* La dissolvenza degli orari quando cambia il giorno. */
/* Solo trasparenza, niente spostamento: cambiando giorno si sostituiscono
   quattordici riquadri, e farli anche scivolare raddoppia il lavoro per un
   effetto che a quella velocita' non si distingue. */
.az-app-appare > * { animation: az-app-velo .24s ease backwards; }
@keyframes az-app-velo { from { opacity: 0; } }

/* --- il riepilogo sulla schermata dei dati --- */
.az-app-scelto-riga {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: #fff; border: 1px solid #dfeaed; border-radius: 14px; padding: 14px 16px; margin-bottom: 22px;
	font-size: 15px;
}
.az-app-scelto-icona { color: var(--az-app-teal); flex: none; display: flex; }
.az-app-scelto-riga > span:nth-child(2) { flex: 1; min-width: 180px; }
.az-app-tenue-t { color: var(--az-app-tenue); font-size: 14px; }
.az-app-cambia {
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: none;
	border: none; color: var(--az-app-teal); text-decoration: underline; padding: 4px;
}

/* --- campi --- */
.az-app-campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.az-app-etichetta { display: block; font-weight: 600; font-size: 14px; }
.az-app-etichetta span { font-weight: 400; color: var(--az-app-tenue); }
.az-app-etichetta input, .az-app-etichetta textarea {
	display: block; width: 100%; margin-top: 6px; font: inherit;
	/* 16px non e' un gusto: sotto i 16px iPhone ingrandisce la pagina appena
	   si tocca un campo, e non torna piu' indietro. */
	font-size: 16px;
	border: 1px solid var(--az-app-line); border-radius: 10px; padding: 13px 14px;
	background: #fff; color: var(--az-app-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.az-app-etichetta textarea { resize: vertical; min-height: 74px; }
.az-app-etichetta input:focus, .az-app-etichetta textarea:focus {
	outline: none; border-color: var(--az-app-teal); box-shadow: 0 0 0 3px rgba(6,119,129,.15);
}
.az-app-note-etichetta { display: block; margin-top: 14px; }

.az-app-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.az-app-consenso { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--az-app-tenue); }
.az-app-consenso input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--az-app-teal); }

.az-app-errore { margin: 16px 0 0; padding: 13px 15px; border-radius: 12px; background: #FDECEC; color: #9c2626; font-size: 15px; }

/* --- navigazione fra le schermate --- */
.az-app-navigazione {
	display: flex; flex-direction: column-reverse; gap: 10px;
	margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--az-app-spento);
}
.az-app-bottone {
	font: inherit; font-size: 17px; font-weight: 700; border: none; border-radius: 999px;
	padding: 16px 28px; color: #fff; background: var(--az-app-teal); cursor: pointer; width: 100%;
	box-shadow: 0 8px 22px rgba(6,119,129,.22); transition: background .18s ease, transform .12s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
}
.az-app-bottone:hover:not([disabled]) { background: var(--az-app-teal-scuro); }
.az-app-bottone:active:not([disabled]) { transform: translateY(1px); }
.az-app-bottone[disabled] { background: #A9C4CA; cursor: not-allowed; box-shadow: none; }
.az-app-bottone-chiaro {
	background: #fff; color: var(--az-app-ink); border: 1px solid var(--az-app-line);
	font-weight: 600; box-shadow: none;
}
.az-app-bottone-chiaro:hover:not([disabled]) { background: #fff; border-color: var(--az-app-teal); color: var(--az-app-teal); }

/* --- esito e disdetta --- */
.az-app-esito { text-align: center; max-width: 620px; margin: 0 auto; padding: 12px 0 8px; }
.az-app-esito h3 { margin: 0 0 10px; font-size: 24px; font-family: var(--az-app-titoli); font-weight: 600; }
.az-app-esito p { margin: 0 0 14px; }
.az-app-spunta {
	width: 58px; height: 58px; border-radius: 999px; background: var(--az-app-teal);
	display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
	box-shadow: 0 10px 26px rgba(6,119,129,.28);
}
.az-app-riepilogo { font-size: 18px; font-weight: 700; }
.az-app-esito .az-app-bottone { width: auto; margin-top: 8px; }
.az-app-fermo { padding: 24px 20px; }
.az-app-fermo p { margin: 0; }

/* --- da tablet in su --- */
@media (min-width: 720px) {
	.az-app { padding: 30px 32px 34px; }
	.az-app-schermata { min-height: 430px; }
	.az-app-domanda { font-size: 26px; }
	.az-app-sotto { margin-bottom: 26px; }
	.az-app-campi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.az-app-navigazione { flex-direction: row; justify-content: space-between; align-items: center; }
	.az-app-bottone { width: auto; }
	.az-app-barra { margin-bottom: 28px; }
	.az-app-tappa { padding: 10px 14px; font-size: 14px; }
}

/* Su schermo stretto la barra tiene i pallini e il nome del passo attivo:
   quattro etichette affiancate su 390px sarebbero illeggibili, e togliere del
   tutto la barra lascerebbe senza sapere quanto manca. */
@media (max-width: 719px) {
	.az-app-tappa-testo { display: none; }
	.az-app-tappa.az-app-attivo .az-app-tappa-testo { display: block; }
	.az-app-tappa { flex: 0 0 auto; }
	.az-app-tappa.az-app-attivo { flex: 1 1 auto; }
}

/* Chi ha chiesto meno movimento non ne riceve: niente entrate, niente
   sollevamenti, e nemmeno la transizione dell'altezza - quella la spegne il
   JavaScript, che legge la stessa preferenza. Resta un riquadro che cambia
   schermata e basta, che e' esattamente quello che serve. */
@media (prefers-reduced-motion: reduce) {
	.az-app *, .az-app *::before, .az-app *::after { transition: none !important; animation: none !important; }
	.az-app-ora:hover, .az-app-sede:hover, .az-app-bottone:active { transform: none !important; }
}