/**
 * Sistema visivo delle console (cliente e amministratore).
 *
 * Trascrizione dei mockup della proposta di progetto: fondo avorio, sidebar
 * scura con voci raggruppate, card bianche, titoli in grazie e corpo in
 * bastoni, accenti verde/corallo/oro.
 *
 * Due scelte deliberate:
 *
 * 1. Ogni colore è dichiarato, mai ereditato. Le console vivono dentro temi
 *    qualsiasi, chiari o scuri: un solo valore lasciato al tema (tipicamente
 *    il colore del testo) produce testo bianco su bianco.
 * 2. Nessuna richiesta a terze parti. Il carattere del marchio è ospitato sul
 *    nostro dominio (vedi `@font-face` qui sotto): nessuna chiamata fuori, e
 *    con `font-display: swap` il testo si legge subito, col carattere di
 *    ripiego, mentre il file arriva.
 *
 * Revisione grafica di agosto 2026: un colore solo, l'arancio del marchio, e
 * quattro grigi. Il colore vuol dire una cosa sola — «qui si tocca» — e tutto
 * il resto (evidenza, stato, categoria) si fa con peso, fondo e posizione.
 */

/* ── Il carattere del marchio ─────────────────────────────────────────
 *
 * Atkinson Hyperlegible, licenza SIL OFL, ospitato in casa. È nato per
 * l'ipovisione: le lettere che di solito si confondono (I l 1, O 0, b d) sono
 * disegnate diverse. Per un sito che si legge in strada, con una mano e in
 * sette lingue, è la scelta giusta anche a prescindere dal marchio.
 *
 * Quattro file e non due: il sottoinsieme «latin» non contiene č š ž đ, e il
 * sito si legge anche in sloveno e croato. `unicode-range` fa scaricare il
 * secondo file solo a chi ne ha davvero bisogno.
 */

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-regular-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-bold-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* I token stanno su ENTRAMBE le superfici della console: il guscio
   (`.advtr-console`) e la schermata di accesso, che è una pagina a sé e vive
   fuori dal guscio. Erano dichiarati solo sul guscio, e la conseguenza si
   vedeva: `.ac-btn-primario` sulla schermata di accesso trovava
   `background: var(--ac-azione)` non risolto — cioè trasparente — e il
   bottone «Accedi» era testo nero su bianco, senza fondo. Lo stesso inciampo
   già pagato in `cliente.css`: un token che non risolve non eredita niente,
   sparisce. */

.advtr-console,
.ac-accesso {
	/* Superfici */
	--ac-fondo: #e6e6e6;
	--ac-carta: #ffffff;
	--ac-carta-tenue: #f7f7f7;
	--ac-bordo: #d8d8d8;
	--ac-scuro: #0c0e0b;
	--ac-scuro-alto: #262626;

	/* Testo */
	--ac-testo: #0c0e0b;
	/* Un gradino più scuro di quanto dicesse la consegna: #6b6b6b su fondo
	   #e6e6e6 dà 4.27:1, appena sotto la soglia, e questo è il colore dei
	   sottotitoli — cioè di metà delle spiegazioni della console. */
	--ac-tenue: #5f5f5f;
	--ac-inverso: #ffffff;
	--ac-inverso-tenue: #a8a8a8;

	/* L'unico colore oltre ai grigi è l'arancio dell'azione, più in basso.
	   Il rosso resta per il solo errore di sistema e le cancellazioni: è
	   l'unica cosa che si legge senza istruzioni (vedi §7 della consegna). */
	--ac-rosso: #b3261e;
	--ac-grigio: #5f5f5f;

	--ac-raggio: 12px;
	--ac-ombra: 0 1px 2px rgba(12, 14, 11, 0.06), 0 8px 24px rgba(12, 14, 11, 0.06);

	/* Un carattere solo, due pesi. Georgia esce dai titoli: il marchio ha il
	   suo, e un titolo in grazie accanto a un corpo in bastoni faceva sembrare
	   la console di un'altra casa rispetto al sito. */
	--ac-brand: "Atkinson Hyperlegible", Verdana, "DejaVu Sans", Tahoma, sans-serif;
	--ac-serif: var(--ac-brand);
	--ac-sans: var(--ac-brand);

	/* Semantica dell'azione: l'arancio è il colore di ciò che si tocca, e non
	   fa nient'altro. Il testo sopra l'arancio è NERO, mai bianco: bianco su
	   #fe9903 sta a 2.2:1, nero a 9.1:1. */
	--ac-azione: #fe9903;
	--ac-azione-testo: #0c0e0b;
	--ac-azione-premuta: #d97f00;
	--ac-azione-velo: #fff3e0;
	--ac-fuoco: #fe9903;
}

.advtr-console {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	min-height: 640px;
	margin: 0 auto;
	max-width: 1180px;
	background: var(--ac-fondo);
	color: var(--ac-testo);
	font-family: var(--ac-sans);
	font-size: 14px;
	line-height: 1.6;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--ac-ombra);
}

.advtr-console *,
.advtr-console *::before,
.advtr-console *::after {
	box-sizing: inherit;
}

/* ── Pagina intera ───────────────────────────────────────────────── */
/* La console occupa il documento: nessun contenitore del tema attorno. */

body.advtr-console-pagina {
	margin: 0;
	padding: 0;
	background: #e6e6e6;
}

.advtr-console-pagina .advtr-console {
	max-width: none;
	min-height: 100vh;
	margin: 0;
	border-radius: 0;
	box-shadow: none;

	/* 🚨 Questa riga è la barra laterale fissa. Sul guscio c'è
	   `overflow: hidden`, che serve agli angoli stondati quando la console è
	   incorniciata dentro una pagina del tema — ma a pagina intera gli angoli
	   sono a zero, e quell'`hidden` non taglia più niente: fa solo danno.
	   
	   Un antenato con overflow diverso da `visible` diventa il contenitore di
	   scorrimento di ciò che sta dentro, e un elemento `sticky` si appiccica a
	   QUEL contenitore, non alla finestra. Il guscio non scorre — scorre la
	   pagina — quindi la barra non si appiccicava mai: la dichiarazione
	   `position: sticky` c'era dal primo giorno e non ha mai fatto niente.
	   Misurato il 20 agosto 2026: dopo 1200px di scorrimento la barra stava a
	   `top: -1200`. Il difetto peggiore da trovare è quello che ha già la sua
	   regola scritta e giusta. */
	overflow: visible;
}

.advtr-console-pagina .ac-lato {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.advtr-console-pagina .ac-corpo {
	padding: 34px 40px 48px;
}

@media (max-width: 900px) {

	.advtr-console-pagina .ac-lato {
		position: static;
		height: auto;
	}

	.advtr-console-pagina .ac-corpo {
		padding: 20px 16px 26px;
	}
}

/* ── Sidebar ─────────────────────────────────────────────────────── */

.ac-lato {
	display: flex;
	flex-direction: column;
	background: var(--ac-scuro);
	color: var(--ac-inverso);
	padding: 22px 0 16px;
}

/* Dal 20 agosto 2026 il marchio è un link al sito pubblico: `text-decoration`
   e `color` servono perché adesso è una <a>, e il contorno di fuoco perché è
   la prima cosa che si raggiunge col tasto di tabulazione entrando in console. */

.ac-marchio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px 22px;
	font-family: var(--ac-serif);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;

	/* `align-self` perché la barra è una colonna flex e i figli si stirano:
	   senza, il link era largo quanto tutta la barra e alto 155px, e si
	   usciva dalla console cliccando il vuoto accanto al logo. Adesso il
	   bersaglio è il logo, che è quello che uno mira. */
	align-self: flex-start;
}

.ac-marchio:hover .ac-logo,
.ac-marchio:focus-visible .ac-logo {
	opacity: 0.82;
}

.ac-marchio:focus-visible {
	outline: 3px solid var(--ac-azione);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Nella sidebar (fondo scuro) serve il logo bianco; sulla scheda di accesso,
   che è bianca, si usa la variante scura — stesso disegno, stessa alpha. */
.ac-logo {
	display: block;
	height: 56px;
	width: auto;
	flex: none;
}

.ac-logo-accesso {
	height: 64px;
	margin: 0 auto;
}

.ac-gruppo {
	margin-top: 18px;
	padding: 0 20px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ac-inverso-tenue);
}

.ac-gruppo:first-of-type {
	margin-top: 0;
}

.ac-voce {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1px 10px;
	padding: 8px 10px;
	border-radius: 7px;
	color: var(--ac-inverso);
	text-decoration: none;
	font-size: 13.5px;
}

.ac-voce::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ac-inverso-tenue);
	flex: none;
}

.ac-voce:hover {
	background: var(--ac-scuro-alto);
	color: #fff;
}

.ac-voce.attiva {
	background: var(--ac-scuro-alto);
	color: #fff;
	font-weight: 600;
}

.ac-voce.attiva::before {
	background: var(--ac-azione);
}

.ac-utente {
	margin: auto 12px 0;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ac-scuro-alto);
	border-radius: 9px;
}

.ac-utente-sigla {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--ac-scuro);
	color: var(--ac-azione);
	font-family: var(--ac-serif);
	font-weight: 700;
	font-size: 13px;
}

/* La sidebar e' una colonna fissa da 232px. Senza permettere a questo blocco
   di restringersi, un nome utente lungo — e qui il nome utente e' l'email —
   allarga la riga e spinge "Esci" FUORI dalla sidebar: misurato 55px oltre il
   bordo, quindi invisibile e non cliccabile. */
.ac-utente-testi {
	min-width: 0;
}

.ac-utente-nome {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
	color: #fff;
	line-height: 1.3;
}

.ac-utente-ruolo {
	font-size: 11px;
	color: var(--ac-inverso-tenue);
}

.ac-esci {
	margin-left: auto;

	/* Non deve mai cedere spazio: e' l'unica via d'uscita dalla console. */
	flex: none;
	color: var(--ac-inverso-tenue);
	text-decoration: none;
	font-size: 11px;
}

.ac-esci:hover {
	color: #fff;
}

/* ── Contenuto ───────────────────────────────────────────────────── */

.ac-corpo {
	padding: 26px 28px 34px;
	min-width: 0;
}

.ac-testa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ac-titolo {
	margin: 0;
	font-family: var(--ac-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ac-testo);
}

.ac-sottotitolo {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--ac-tenue);
}

/* ── Avvisi ──────────────────────────────────────────────────────── */

.ac-avviso {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 20px;
	border-radius: var(--ac-raggio);
	background: var(--ac-carta);
	border: 1px solid var(--ac-bordo);
	border-left: 4px solid var(--ac-tenue);
}

.ac-avviso.ok {
	border-left-color: var(--ac-scuro);
}

.ac-avviso.errore {
	border-left-color: var(--ac-rosso);
}

.ac-avviso.attesa {
	border-left-color: var(--ac-azione);
	background: var(--ac-azione-velo);
	border-color: #f3ddb8;
}

.ac-avviso-testo {
	min-width: 0;
}

.ac-avviso-titolo {
	font-weight: 700;
	color: var(--ac-testo);
}

.ac-avviso-dett {
	font-size: 12.5px;
	color: var(--ac-tenue);
}

.ac-avviso .ac-btn {
	margin-left: auto;
	flex: none;
}

/* ── Card ────────────────────────────────────────────────────────── */

.ac-card {
	background: var(--ac-carta);
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	padding: 18px 20px;
}

.ac-card-titolo {
	margin: 0;
	font-family: var(--ac-serif);
	font-size: 16px;
	font-weight: 700;
}

.ac-card-sottotitolo {
	margin: 1px 0 14px;
	font-size: 12px;
	color: var(--ac-tenue);
}

.ac-griglia {
	display: grid;
	gap: 16px;
	margin-bottom: 20px;
}

.ac-griglia-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Gli indicatori sono cinque e possono cambiare ancora: la griglia si riempie
   da sé invece di avere il numero scritto nella classe. Sotto i 150px per
   colonna vanno a capo. */
.ac-griglia-kpi {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ac-griglia-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac-griglia-3-2 {
	grid-template-columns: 3fr 2fr;
}

/* ── KPI ─────────────────────────────────────────────────────────── */

.ac-kpi {
	position: relative;
	background: var(--ac-carta);
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	padding: 14px 16px 18px;
	overflow: hidden;
}

.ac-kpi-eti {
	font-size: 12px;
	color: var(--ac-tenue);
}

.ac-kpi-valore {
	font-family: var(--ac-serif);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	margin: 2px 0 4px;
}

.ac-kpi-delta {
	font-size: 11.5px;
	font-weight: 700;
}

.ac-kpi-delta.su,
.ac-kpi-delta.giu {
	color: var(--ac-testo);
}

.ac-kpi-delta.pari {
	color: var(--ac-tenue);
}

.ac-kpi-barra {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 10px;
	height: 3px;
	border-radius: 2px;
	background: var(--ac-scuro);
}

/* ── Barre orizzontali (sezioni più viste) ───────────────────────── */

.ac-barre {
	display: grid;
	gap: 8px;
}

.ac-barra-riga {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
}

.ac-barra-pista {
	background: var(--ac-fondo);
	border-radius: 5px;
	height: 20px;
	overflow: hidden;
}

.ac-barra-riemp {
	height: 100%;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 7px;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	min-width: 30px;
	background: var(--ac-scuro);
}

/* Le barre erano di cinque colori diversi, uno per riga. Non serviva a niente:
   quale riga sia lo dice l'etichetta accanto, e il colore non portava nessuna
   informazione in più — cambiava e basta. Con una tavolozza sola due righe
   sarebbero diventate identiche e una avrebbe perso il contrasto (bianco su
   arancio, 2.15:1). Quindi tutte uguali: è anche il modo giusto di disegnare
   un grafico a barre, dove la lunghezza è il dato e il colore no. */

/* ── Bottoni ─────────────────────────────────────────────────────── */

.ac-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 7px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

/* Sopra l'arancio si scrive in nero: bianco su #fe9903 sta a 2.2:1. Vale anche
   qui, dove si lavora al chiuso — il contrasto non è una questione di luce
   soltanto, è di quanti anni hanno gli occhi di chi guarda. */

.ac-btn-primario {
	background: var(--ac-azione);
	color: var(--ac-azione-testo);
}

.ac-btn-primario:hover {
	background: var(--ac-azione-premuta);
	color: var(--ac-azione-testo);
}

/* Era verde perché «salva» era l'unica azione positiva; ora l'azione è una
   sola in tutto il progetto e ha un colore solo. */

.ac-btn-verde {
	background: var(--ac-azione);
	color: var(--ac-azione-testo);
}

.ac-btn-verde:hover {
	background: var(--ac-azione-premuta);
	color: var(--ac-azione-testo);
}

.ac-btn-primario:active,
.ac-btn-verde:active,
.ac-btn-neutro:active,
.ac-btn-fragile:active {
	transform: translateY(1px);
}

.ac-btn:focus-visible {
	outline: 3px solid var(--ac-fuoco);
	outline-offset: 3px;
}

/* Sul chiaro l'arancio da solo si confonde col bottone arancio: l'alone
   bianco lo stacca dal fondo della scheda. */
.ac-btn-primario:focus-visible,
.ac-btn-verde:focus-visible {
	box-shadow: 0 0 0 5px #fff3e0;
}

.ac-btn:disabled,
.ac-btn[aria-disabled="true"] {
	background: var(--ac-fondo);
	color: var(--ac-inverso-tenue);
	border-color: var(--ac-bordo);
	cursor: not-allowed;
	transform: none;
}

.ac-btn-neutro {
	background: var(--ac-carta);
	color: var(--ac-testo);
	border-color: var(--ac-bordo);
}

.ac-btn-neutro:hover {
	background: var(--ac-carta-tenue);
	color: var(--ac-testo);
}

.ac-btn-fragile {
	background: transparent;
	color: var(--ac-rosso);
	border-color: var(--ac-bordo);
	padding: 5px 12px;
	font-size: 12px;
}

.ac-btn-fragile.conferma {
	background: var(--ac-rosso);
	color: #fff;
	border-color: var(--ac-rosso);
}

/* ── Pill ────────────────────────────────────────────────────────── */

.ac-pill {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ac-tenue);
}

/* Le pillole di stato. «Attesa» è l'unica arancione, perché è l'unica che
   chiede di fare qualcosa; le altre raccontano un fatto e sono scure. Se
   fossero tutte colorate, il colore non direbbe più niente — che è esattamente
   il problema da cui è partita questa revisione. */

.ac-pill.ok {
	background: var(--ac-scuro);
	color: #fff;
}

/* Il pieno arancio è del bottone e di nient'altro: una pillola piena sembrava
   una cosa da premere. Qui basta il velo, il bordo e il pallino — si vede da
   lontano ed è chiaro che è uno stato, non un comando. */

.ac-pill.oro,
.ac-pill.attesa {
	background: var(--ac-azione-velo);
	color: var(--ac-testo);
	border: 1px solid var(--ac-azione);
	padding: 2px 9px 2px 7px;
}

.ac-pill.oro::before,
.ac-pill.attesa::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 50%;
	background: var(--ac-azione);
	vertical-align: 1px;
}

/* ── Stato vuoto ─────────────────────────────────────────────────── */

/* Lo stato vuoto della console non è un errore: è una casella dell'inbox
   svuotata. Niente tratteggio, che sembra un segnaposto da riempire. */

.ac-vuoto {
	background: var(--ac-carta);
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	padding: 40px 28px;
	text-align: center;
}

.ac-vuoto h3 {
	margin: 0 0 6px;
	font-family: var(--ac-serif);
	font-size: 18px;
}

.ac-vuoto p {
	margin: 0 auto;
	max-width: 460px;
	color: var(--ac-tenue);
}

/* ── Grafico ─────────────────────────────────────────────────────── */

/* Il riquadro tiene la colonna delle tacche e la tela del disegno.
   Il testo vive qui fuori dall'SVG: dentro si scalerebbe col disegno e in una
   colonna stretta le cifre sparirebbero.
   L'aria in cima serve alle etichette dei valori, che stanno sopra il loro
   punto: sul picco — che tocca la riga più alta — uscirebbero dal riquadro. */
.ac-grafico-riquadro {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding-top: 14px;
}

.ac-grafico-scala {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 10.5px;
	color: var(--ac-tenue);
	text-align: right;
	min-width: 22px;
	/* Le tacche stanno all'altezza delle righe: mezza riga di testo sopra e
	   sotto le allinea allo 0 e alla cima invece che ai bordi del riquadro. */
	padding: 4px 0;
	font-variant-numeric: tabular-nums;
}

.ac-grafico-tela {
	position: relative;
	flex: 1;
	min-width: 0;
}

/* Altezza fissa: con lo scalamento uniforme, in una colonna stretta il
   riquadro diventava una striscia di 70px e l'etichetta del picco finiva
   addosso al sottotitolo della card. */
.ac-grafico {
	display: block;
	width: 100%;
	height: 170px;
}

.ac-grafico-punto {
	position: absolute;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ac-scuro);
	box-sizing: border-box;
}

.ac-grafico-punto.notevole {
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
}

.ac-grafico-valore {
	position: absolute;
	transform: translate( -50%, -160% );
	font-size: 11px;
	font-weight: 700;
	color: var(--ac-testo);
	background: rgba( 255, 255, 255, 0.85 );
	border-radius: 3px;
	padding: 0 3px;
	pointer-events: none;
	white-space: nowrap;
}

.ac-grafico-asse {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	margin-left: 30px;
	font-size: 10.5px;
	color: var(--ac-tenue);
}

.ac-grafico-dati {
	margin-top: 10px;
	font-size: 12.5px;
}

.ac-grafico-dati summary {
	cursor: pointer;
	color: var(--ac-testo);
	text-decoration: underline 1px;
}

.ac-grafico-griglia {
	stroke: var(--ac-fondo);
	stroke-width: 1;
}

.ac-grafico-base {
	stroke: var(--ac-bordo);
	stroke-width: 1;
}

.ac-grafico-scorri {
	overflow-x: auto;
	max-height: 260px;
	overflow-y: auto;
}

.ac-grafico-tabella {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.ac-grafico-tabella th,
.ac-grafico-tabella td {
	text-align: left;
	padding: 3px 8px;
	border-bottom: 1px solid var(--ac-bordo);
}

.ac-grafico-tabella td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ac-grafico-tabella tbody th {
	font-weight: 400;
	color: var(--ac-tenue);
}

.ac-grafico-tabella tfoot th,
.ac-grafico-tabella tfoot td {
	border-top: 1px solid var(--ac-bordo);
	border-bottom: 0;
	font-weight: 700;
}

/* ── Adattamento ─────────────────────────────────────────────────── */

@media (max-width: 900px) {

	.advtr-console {
		grid-template-columns: 1fr;
	}

	.ac-lato {
		padding-bottom: 10px;
	}

	.ac-utente {
		margin-top: 14px;
	}

	.ac-griglia-4,
	.ac-griglia-2,
	.ac-griglia-3-2 {
		grid-template-columns: 1fr;
	}

	.ac-griglia-kpi {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.ac-corpo {
		padding: 20px 16px 26px;
	}
}

/* ── Schermata di accesso ────────────────────────────────────────── */
/* Vive fuori da .advtr-console: è una pagina a sé, non una sezione. */

.ac-accesso {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
	background: var(--ac-scuro);
	font-family: var(--ac-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ac-testo);
}

.ac-accesso *,
.ac-accesso *::before,
.ac-accesso *::after {
	box-sizing: inherit;
}

.ac-accesso-scheda {
	width: 100%;
	max-width: 400px;
	padding: 32px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ac-accesso-marchio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	font-family: var(--ac-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--ac-testo);
}

.ac-accesso-titolo {
	margin: 0 0 4px;
	font-family: var(--ac-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ac-testo);
}

.ac-accesso-nota {
	margin: 0 0 8px;
	font-size: 13.5px;
	color: var(--ac-tenue);
}

.ac-accesso label {
	display: block;
	margin: 16px 0 6px;
	font-size: 13px;
	font-weight: 600;
}

.ac-accesso input[type="text"],
.ac-accesso input[type="email"],
.ac-accesso input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ac-bordo);
	border-radius: 7px;
	background: #fff;
	color: var(--ac-testo);
	font: inherit;
}

.ac-accesso input:focus {
	outline: 2px solid var(--ac-fuoco);
	outline-offset: 1px;
	border-color: var(--ac-fuoco);
}

.ac-accesso-ricorda {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
}

.ac-accesso-invia {
	width: 100%;
	margin-top: 22px;
	padding: 11px 18px;
	text-align: center;
	font-size: 14px;
}

.ac-accesso-alt {
	margin: 18px 0 0;
	text-align: center;
	font-size: 13px;
}

.ac-accesso-alt a {
	color: var(--ac-tenue);
}

.ac-accesso-avviso {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 7px;
	border-left: 4px solid var(--ac-tenue);
	background: var(--ac-carta-tenue);
	font-size: 13px;
}

.ac-accesso-avviso.ok {
	border-left-color: var(--ac-scuro);
}

.ac-accesso-avviso.errore {
	border-left-color: var(--ac-rosso);
}

/* ══ Telefono ═════════════════════════════════════════════════════ */

@media (max-width: 700px) {

	/* Il menu diventa una riga che scorre: impilato, nove voci spingono
	   il contenuto sotto due schermate di altezza. */

	.ac-lato {
		padding: 14px 0 10px;
	}

	.ac-lato nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 12px 4px;
	}

	.ac-lato nav::-webkit-scrollbar {
		display: none;
	}

	.ac-gruppo {
		display: none;
	}

	.ac-voce {
		flex: none;
		margin: 0;
		padding: 10px 14px;
		white-space: nowrap;
		background: var(--ac-scuro-alto);
	}

	.ac-marchio {
		padding: 0 16px 14px;
	}

	.ac-logo {
		height: 44px;
	}

	.ac-utente {
		margin: 12px;
	}

	.ac-corpo {
		padding: 20px 16px 28px;
	}

	.ac-titolo {
		font-size: 21px;
	}

	.ac-kpi-valore {
		font-size: 26px;
	}

	/* Tabelle: scorrono in orizzontale invece di far scorrere la pagina. */

	.ac-tabella-scorri,
	.advtr-tabella-scorri {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -16px;
		padding: 0 16px;
	}

	.advtr-tabella {
		min-width: 520px;
	}

	/* Aree tattili: sotto i 44px il dito sbaglia. */

	.ac-btn,
	.advtr-btn {
		padding: 12px 18px;
	}

	.ac-avviso {
		flex-direction: column;
		align-items: flex-start;
	}

	.ac-avviso .ac-btn {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}

	.ac-accesso-scheda {
		padding: 24px 20px;
	}
}

/* ── Elenchi tabellari ───────────────────────────────────────────── */

.ac-cerca {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ac-cerca input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	padding: 9px 14px;
	border: 1px solid var(--ac-bordo);
	border-radius: 999px;
	background: var(--ac-carta);
	color: var(--ac-testo);
	font: inherit;
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
}

.ac-cerca-azzera {
	font-size: 13px;
	color: var(--ac-tenue);
	text-decoration: none;
}

.ac-tabella-scorri {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--ac-carta);
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
}

.ac-tabella {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.ac-tabella th,
.ac-tabella td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--ac-bordo);
}

.ac-tabella tbody tr:last-child td {
	border-bottom: 0;
}

.ac-tabella tbody tr:hover {
	background: var(--ac-carta-tenue);
}

.ac-tabella th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ac-tenue);
	background: var(--ac-carta-tenue);
	white-space: nowrap;
}

.ac-tabella code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--ac-fondo);
	font-size: 12px;
}

.ac-cella-tenue {
	color: var(--ac-tenue);
	font-size: 12px;
}

/* Le azioni stanno su una riga sola: a capo diventano una colonna
   disordinata di bottoni di larghezze diverse. */

.ac-azioni-cella {
	display: flex;
	gap: 6px;
	align-items: center;
	white-space: nowrap;
}

.ac-azione-form {
	margin: 0;
	display: inline;
}

.ac-azioni-cella .ac-btn {
	padding: 6px 12px;
	font-size: 12px;
}

@media (max-width: 700px) {

	.ac-tabella {
		min-width: 720px;
	}

	.ac-tabella-scorri {
		margin: 0 -16px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}

.ac-barra-azioni {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ac-barra-azioni .ac-azione-form {
	display: inline-block;
}

/* Riquadro di eliminazione in fondo alle schede di dettaglio. Il bordo rosso
   tenue lo separa dai campi senza gridare: è l'ultima cosa che si legge, non
   la prima che si nota. */
.ac-zona-fragile {
	margin-top: 22px;
	border-color: rgba( 179, 38, 30, 0.28 );
}

.ac-zona-fragile .ac-card-titolo {
	color: var(--ac-rosso);
}

.ac-zona-fragile .ac-azioni-cella {
	margin-top: 12px;
}

/* Il "Genera" sta accanto al campo password, non sotto: è un gesto solo. */
.advtr-genera {
	margin-top: 8px;
}

.advtr-form input[readonly] {
	background: var(--ac-fondo);
	color: var(--ac-tenue);
	cursor: default;
}

/* ── Immagini della scheda (gestite dentro la console) ───────────── */

.ac-media-titolo {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.ac-media-riga {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 14px;
}

.ac-media-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.ac-media-item {
	margin: 0;
	padding: 8px;
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	background: var(--ac-carta-tenue);
	text-align: center;
}

.ac-media-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 8px;
}

.ac-media-upload {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ac-media-upload input[type="file"] {
	font-size: 13px;
	max-width: 100%;
}

/* ── Categorie ───────────────────────────────────────────────────── */

.ac-cat-pallino {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: -1px;
	box-shadow: 0 0 0 1px rgba( 12, 14, 11, 0.15 );
}

.ac-cat-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}

.ac-cat-form input[type="text"] {
	min-width: 160px;
}

.ac-cat-form input[type="color"] {
	width: 42px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--ac-bordo);
	border-radius: 6px;
	background: var(--ac-carta);
	cursor: pointer;
}

/* Le fasce orarie della categoria: caselle piccole in fila, dentro lo stesso
   form del nome e del colore. Sono cinque e stanno in una riga di tabella già
   affollata, quindi niente etichette lunghe: l'orario sta nel `title`. */

.ac-cat-fasce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	font-size: 12px;
	color: var(--ac-grigio);
}

.ac-cat-fasce label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	cursor: pointer;
}

/* Le frasi, nella pagina delle impostazioni. */

.ac-fasce {
	display: grid;
	gap: 12px;
	margin-top: 12px;
}

.ac-fascia {
	display: grid;
	gap: 4px;
}

.ac-fascia-testa {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
}

.ac-fascia input[type="text"] {
	width: 100%;
}

.ac-fascia small {
	color: var(--ac-grigio);
	font-size: 12px;
}

.ac-cat-icona-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 34px;
	border: 1px solid var(--ac-bordo);
	border-radius: 6px;
	background: var(--ac-carta);
	color: var(--ac-testo);
	font-size: 16px;
	cursor: pointer;
}

.ac-cat-icona-btn:hover {
	border-color: var(--ac-scuro);
}

/* ── Le voci della home ───────────────────────────────────────────────
 *
 * Sei righe dentro un form solo: icona a sinistra, i tre campi accanto. La
 * riga è una griglia e non un flex a capo libero, perché i titoli dei riquadri
 * si leggono in colonna quando si decide che cosa mettere in home — e in
 * colonna si vedono le ripetizioni.
 */

.ac-voci {
	display: grid;
	gap: 10px;
}

/* ⚠️ `.ac-voce` **non** si può usare qui: è già il nome delle voci del menu
   nella colonna di sinistra (templates/console/layout.php). Ci sono cascato:
   le regole qui sotto, chiamate così, avevano trasformato il menu in una fila
   di pastiglie bianche vuote. Il prefisso `.ac-voci-` tiene le due cose
   separate — e il guaio si è visto solo perché la schermata è stata guardata. */

.ac-voci-riga {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	background: var(--ac-carta);
}

.ac-voci-riga .ac-cat-icona-btn {
	flex: none;
	width: 44px;
	height: 40px;
}

.ac-voci-campi {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 8px;
	flex: 1;
	min-width: 0;
}

/* Sotto gli 860px i tre campi vanno in colonna: affiancati diventavano tre
   fessure in cui non si legge nemmeno il testo che c'è dentro. */

@media ( max-width: 860px ) {

	.ac-voci-campi {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Finestra di scelta: UNA per pagina, condivisa da tutte le righe. Con
   duecento icone, ripeterla in ogni form vorrebbe dire migliaia di SVG. */
.ac-icone-finestra {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(12, 14, 11, 0.55);
	padding: 40px 16px;
	overflow: auto;
}

.ac-icone-finestra.aperta {
	display: block;
}

.ac-icone-pannello {
	max-width: 720px;
	margin: 0 auto;
	background: var(--ac-carta);
	border-radius: var(--ac-raggio);
	box-shadow: var(--ac-ombra);
	overflow: hidden;
}

.ac-icone-testa {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ac-bordo);
}

.ac-icone-cerca {
	flex: 1;
}

.ac-icone-corpo {
	padding: 8px 16px 18px;
	max-height: 60vh;
	overflow-y: auto;
}

.ac-icone-gruppo h4 {
	margin: 14px 0 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ac-tenue);
}

.ac-icone-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 6px;
}

.ac-icone-voce {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--ac-carta-tenue);
	color: var(--ac-testo);
	font-size: 17px;
	cursor: pointer;
}

.ac-icone-voce:hover {
	background: var(--ac-scuro);
	color: #fff;
}


.ac-cat-icona-vista {
	display: inline-block;
	margin-right: 6px;
	font-size: 15px;
	vertical-align: -1px;
}

/* ── Proposte di modifica ────────────────────────────────────────── */

.ac-proposta {
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	padding: 14px 16px;
	margin-top: 14px;
	background: var(--ac-carta-tenue);
}

.ac-proposta-testa {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ac-proposta-testa .ac-btn {
	margin-left: auto;
}

.ac-proposta-diff th,
.ac-proposta-diff td {
	vertical-align: top;
	padding: 6px 10px;
}

/* Il vecchio si legge ma non compete; il nuovo è quello che si sta per
   pubblicare, e deve saltare all'occhio. */
.ac-diff-prima {
	color: var(--ac-tenue);
	text-decoration: line-through;
	text-decoration-color: rgba( 12, 14, 11, 0.35 );
}

.ac-diff-dopo {
	color: var(--ac-testo);
	font-weight: 600;
}

.ac-proposta-azioni {
	margin-top: 12px;
}

/* Rifiuto in linea: il motivo sta accanto al pulsante, perché un rifiuto senza
   motivo è quello che si voleva togliere di mezzo. */
.ac-respingi {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.ac-respingi input[type="text"] {
	width: 170px;
	padding: 5px 8px;
	border: 1px solid var(--ac-bordo);
	border-radius: 6px;
	font-size: 12.5px;
	background: var(--ac-carta);
	color: var(--ac-testo);
}

/* ── La tabella degli orari ───────────────────────────────────────────
 *
 * Sette righe, e la riga chiusa si riconosce da lontano: si spegne invece di
 * mostrare due caselle vuote uguali a tutte le altre. Chi compila deve poter
 * controllare la settimana con un colpo d'occhio, non rileggendo quattordici
 * caselle una per una.
 */

.advtr-ore {
	display: grid;
	gap: 6px;
	margin: 8px 0 4px;
}

.advtr-ore-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.advtr-ore-testa .advtr-aiuto {
	flex: 1 1 260px;
	margin: 0;
}

.advtr-ore-riga {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 7px 10px;
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	background: var(--ac-carta);
}

.advtr-ore-giorno {
	flex: 0 0 84px;
	font-size: 13px;
	font-weight: 700;
}

.advtr-ore-fascia {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--ac-tenue);
}

.advtr-ore-fascia input[type="time"] {
	width: 104px;
	min-height: 38px;
	padding: 4px 8px;
	border: 1px solid var(--ac-bordo);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--ac-testo);
	background: var(--ac-carta);
}

.advtr-ore-svuota {
	margin-left: auto;
	padding: 6px 12px;
	border: 1px solid var(--ac-bordo);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 12px;
	color: var(--ac-tenue);
	cursor: pointer;
}

.advtr-ore-svuota:hover {
	border-color: var(--ac-scuro);
	color: var(--ac-testo);
}

/* ── Interruttori ─────────────────────────────────────────────────────
 *
 * Una spunta che accende o spegne qualcosa, con sotto la riga che dice cosa
 * succede. Un riquadro e non una casella nuda perché queste spunte non sono
 * un campo del modulo: sono una decisione, e vanno lette prima di essere
 * premute.
 *
 * ⚠️ Il contenitore nel selettore NON è ornamentale. `.advtr-form label` è
 * una classe più un elemento, e batterebbe una classe sola: senza
 * `.ac-interruttori` davanti, il riquadro tornerebbe `display: block` — cioè
 * una riga di testo sciolta, che è esattamente com'era comparso nelle
 * Impostazioni la prima volta. In questo progetto le regole «tutti i label» e
 * «tutti i link» sono già lì, e vanno battute, non ignorate.
 */

.ac-interruttori {
	display: grid;
	gap: 8px;
	margin: 0 0 6px;
}

.ac-interruttori .ac-interruttore {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--ac-bordo);
	border-radius: var(--ac-raggio);
	background: var(--ac-carta);
	font-weight: 400;
	cursor: pointer;
}

.ac-interruttori .ac-interruttore input {
	margin-top: 3px;
	flex: none;
}

/* Solo il titolo dell'interruttore va a capo: `strong` senza figlio diretto
   prendeva anche i grassetti dentro la nota, e «Attenzione:» finiva su una
   riga sua sembrando il titolo di un blocco nuovo. */

.ac-interruttori .ac-interruttore > span > strong {
	display: block;
	font-size: 14px;
}

.ac-interruttori .ac-interruttore small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ac-tenue);
}

/* Con la spunta accesa le sette righe si sbiadiscono ma restano compilabili:
   i due casi convivono, e chi riceve su appuntamento solo di pomeriggio ha
   tutte e due le cose da dire. Toccando la tabella l'aria torna piena, così
   non si compila alla cieca. */

.advtr-ore.e-appuntamento .advtr-ore-riga,
.advtr-ore.e-appuntamento .advtr-ore-testa {
	opacity: 0.5;
}

.advtr-ore.e-appuntamento .advtr-ore-riga:hover,
.advtr-ore.e-appuntamento .advtr-ore-riga:focus-within,
.advtr-ore.e-appuntamento .advtr-ore-testa:hover {
	opacity: 1;
}

/* Il giorno chiuso: sbiadito, ma i campi restano raggiungibili — si torna ad
   aprire senza dover ripremere niente. */

.advtr-ore-riga.e-chiuso {
	background: var(--ac-carta-tenue);
}

.advtr-ore-riga.e-chiuso .advtr-ore-giorno {
	color: var(--ac-tenue);
}

.advtr-ore-riga.e-chiuso .advtr-ore-svuota {
	border-color: var(--ac-scuro);
	color: var(--ac-testo);
	font-weight: 700;
}

@media (max-width: 700px) {

	.advtr-ore-giorno {
		flex-basis: 100%;
	}

	.advtr-ore-fascia input[type="time"] {
		width: 92px;
	}

	.advtr-ore-svuota {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* ── Completezza della scheda ─────────────────────────────────────────
 *
 * Sta in cima all'area clienti ed è la prima cosa che si legge entrando.
 *
 * Nessun rosso e nessun allarme: una scheda a metà non è un errore, è una
 * cosa da finire. Il riquadro racconta cosa manca e perché conviene, e la
 * barra dice a che punto si è — l'arancio qui è l'unico posto in cui non
 * vuol dire «premi», ma è il colore di ciò che si sta costruendo, e il numero
 * accanto lo spiega senza bisogno di leggere una legenda.
 */

.advtr-compl {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--ac-bordo);
	border-left: 4px solid var(--ac-azione);
	border-radius: var(--ac-raggio);
	background: var(--ac-carta);
}

/* Finita: il taglio colorato si spegne. Niente coccarde — la ricompensa è
   che il riquadro smette di chiedere. */

.advtr-compl.e-completa {
	border-left-color: var(--ac-bordo);
}

.advtr-compl-titolo {
	margin: 0;
	font-size: 15px;
}

.advtr-compl-titolo strong {
	font-size: 17px;
}

.advtr-compl-barra {
	height: 8px;
	margin: 10px 0 12px;
	border-radius: 999px;
	background: var(--ac-fondo);
	overflow: hidden;
}

.advtr-compl-riemp {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ac-azione);
}

.advtr-compl.e-completa .advtr-compl-riemp {
	background: var(--ac-scuro);
}

.advtr-compl-lista {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
}

.advtr-compl-lista li {
	font-size: 13.5px;
}

/* Il perché va a capo sotto il nome: sono due cose diverse — che cosa manca,
   e che cosa cambia se lo aggiungi. Sulla stessa riga si legge solo la prima. */

.advtr-compl-perche {
	display: block;
	margin-top: 1px;
	color: var(--ac-tenue);
	font-size: 12.5px;
}

.advtr-compl-nota {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ac-tenue);
}

/* ── La conferma prima della revisione ────────────────────────────────
 *
 * `<dialog>` del browser: il velo dietro è `::backdrop`, il fuoco ci resta
 * dentro da solo e Esc chiude. Qui si veste, non si reimplementa.
 */

.advtr-conferma-revisione {
	width: min( 460px, calc( 100vw - 32px ) );
	padding: 0;
	border: 1px solid var(--ac-bordo, #d8d8d8);
	border-radius: 14px;
	background: #fff;
	color: var(--ac-testo, #0c0e0b);
	font-family: var(--ac-sans, "Atkinson Hyperlegible", Verdana, sans-serif);
	box-shadow: 0 20px 60px rgba( 12, 14, 11, 0.3 );
}

.advtr-conferma-revisione::backdrop {
	background: rgba( 12, 14, 11, 0.55 );
}

.advtr-conferma-corpo {
	padding: 22px 24px 20px;
}

.advtr-conferma-titolo {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

.advtr-conferma-testo {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--ac-tenue, #5f5f5f);
}

.advtr-conferma-revisione label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.advtr-conferma-revisione textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ac-bordo, #d8d8d8);
	border-radius: 7px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 14px;
	resize: vertical;
}

.advtr-conferma-revisione textarea:focus-visible {
	outline: 3px solid var(--ac-fuoco, #fe9903);
	outline-offset: 2px;
}

/* «Invia» a destra e in arancio, «Torna al modulo» accanto e di contorno:
   la via d'uscita si vede, ma non è quella che si preme per abitudine. */

.advtr-conferma-azioni {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

@media ( max-width: 480px ) {

	.advtr-conferma-azioni {
		flex-direction: column-reverse;
	}

	.advtr-conferma-azioni .advtr-btn {
		width: 100%;
		text-align: center;
	}
}

/* La nota del cliente nella coda di approvazione. */

.ac-proposta-nota {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--ac-azione-velo);
	border: 1px solid #f3ddb8;
	font-size: 13.5px;
}