@charset "UTF-8";

/*!
Theme Name: Albo Fornitori Interporto Pordenone
Author: Interporto di Pordenone (IPCI)
Description: Tema del portale "IPCI - Iscrizione Elenco Operatori Economici": iscrizione online degli operatori economici all'Albo Fornitori di Interporto di Pordenone e gestione delle domande da parte dell'ufficio albo.
Version: 1.0.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: albo-fornitori-interporto-pordenone
Tags: translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Albo Fornitori Interporto Pordenone is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- Variables (design token, popolati in Fase 1)
	- Fonts (Poppins self-hosted)
	- Normalize
	- Typography
	- Elements
	- Links
	- Forms
# Layout
	- Header (nota, vedi Auth)
	- Footer (nota, vedi Auth)
	- Auth (schermate di accesso)
	- Sidebar
	- Topbar
	- Content (guscio dell'area riservata)
	- Grid
# Components
	- Buttons
	- Status banner
	- Switch (toggle di consenso)
	- Consent (consenso legale in creazione account)
	- Legal modal (popup dei documenti legali)
	- Cards
	- Stepper (indicatore di completamento)
	- Avanzamento (elenco dei passi in dashboard)
	- Wizard (moduli di iscrizione, categorie, riepilogo)
	- Tabella (elenchi, filtri e pastiglie dell'area amministrativa)
	- Comunicazioni (annunci di gruppo, modulo di invio, archivio)
	- Chip (pastiglie cliccabili degli elenchi di ancore)
	- Indice (sezioni delle pagine lunghe)
	- Pericolo (eliminazioni e conferme che non si annullano)
	- Impostazioni (schermata di configurazione dell'ufficio albo)
	- Media (didascalie e gallerie dentro i documenti legali)
# Utilities
	- Accessibility
	- Tema (chiaro/scuro)
	- Accessibility toolbar (pannello a comparsa)
	- Alignments
--------------------------------------------------------------*/
@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-400.woff2) format("woff2");
}

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

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

@font-face {
	font-family: Poppins;
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-italic-400.woff2) format("woff2");
}

@font-face {
	font-family: Poppins;
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-italic-600.woff2) format("woff2");
}

@font-face {
	font-family: Poppins;
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-italic-700.woff2) format("woff2");
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text, #2c343f);
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* `overflow-wrap: anywhere` sui titoli non e' una scelta tipografica:
   e' cio' che impedisce a una parola sola di allargare l'intera pagina.
   Un titolo e' spesso una parola lunga e indivisibile — "Amministratore",
   "Comunicazioni" — e a 320px con il testo portato al 200% non ci sta:
   il testo debordava, la pagina scorreva in orizzontale, e la cosa era
   **invisibile a qualunque controllo basato sugli elementi**, perche' a
   sfondare era un nodo di testo e non un riquadro. L'ha trovata una
   bisezione del DOM, nascondendo un ramo alla volta finche'
   `scrollWidth` non e' calato. */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 1rem;
	overflow-wrap: anywhere;
}

h1 {
	font-size: 1.75rem;
	font-weight: 400;
}

h2 {
	font-size: 1.375rem;
}

h3 {
	font-size: 1.125rem;
}

h4,
h5,
h6 {
	font-size: 1rem;
}

/* Etichetta breve in maiuscolo: intestazioni di card e di sezione
   ("REFERENTE", "ANAGRAFICA", "PROCEDURA ISCRIZIONE"). */
.overline {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.text-muted {
	color: var(--color-text-muted, #5f6873);
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */

/* I colori di partenza erano quelli dello starter theme (#4169e1 e il
   viola dei link visitati): non stanno nella palette del portale.
   Qui il colore e' $color-focus, 7,78:1 su bianco, lo stesso del link
   "vai al contenuto" e del pulsante testuale.

   Quello che era piu' grave e' sparito: `a:focus { outline: thin
   dotted; }`. Ha specificita' 0-1-1 e batteva la regola
   `:focus-visible` di utilities/_accessibility.scss (0-1-0), quindi
   *ogni link del portale* perdeva l'anello di focus da 3px e si
   ritrovava il puntinato sottile del browser. Le sole regole di focus
   restano quelle in un posto solo.

   Niente stato :visited: su un'applicazione dietro login segnala
   quali documenti l'utente ha aperto senza aggiungere nulla di utile,
   e non ha corrispettivo nella palette. */
a {
	color: var(--color-focus, #0b4fa8);
}

/* Le voci di sidebar e topbar hanno colore e decorazione propri, con
   selettori a classe piu' specifici di questi: non vengono toccate. */
a:hover,
a:active {
	color: #3169b1;
}

/* Forms
--------------------------------------------- */

/* Il portale e' quasi tutto moduli da compilare: queste regole sono la
   base che riusano il wizard di iscrizione (Fase 3) e le viste
   dell'ufficio albo (Fase 5), non solo le schermate di accesso.

   Tre cose non sono negoziabili e stanno qui una volta sola: il
   controllo e' alto almeno $tap-target-min, il bordo stacca dal fondo
   piu' di 3:1 (WCAG 1.4.11) e lo stato di errore non e' affidato al
   solo colore ma a bordo + icona + testo. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 3px;
	color: var(--color-text, #2c343f);
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	width: 100%;
}

textarea {
	min-height: calc(44px * 2);
	resize: vertical;
}

/* Caselle e scelte esclusive: 20px invece dei 13 di serie del browser.
   La misura stava scritta in due componenti diversi
   (components/_wizard.scss e components/_comunicazioni.scss) e la
   casella "Rimuovi il documento caricato" dei campi di caricamento non
   era in nessuno dei due: restava larga 13px in mezzo a caselle da 20.
   Una regola sola, qui, e non c'e' piu' una terza casella che se ne
   dimentica. L'area cliccabile buona la garantisce comunque l'etichetta
   associata, che e' alta $tap-target-min. */
input[type="checkbox"],
input[type="radio"] {
	height: 20px;
	width: 20px;
}

/* Il segnaposto non e' un'etichetta: resta piu' chiaro del testo
   digitato ma sopra 4.5:1, cosi' si legge comunque. */
::placeholder {
	color: var(--color-text-muted, #5f6873);
	opacity: 1;
}

/* Campo
--------------------------------------------- */
.field {
	margin-bottom: 1.5rem;
}

.field__label {
	color: var(--color-text, #2c343f);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.field__help {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0 0 0.5rem;
}

.field__control {
	position: relative;
}

/* Stato di errore: bordo piu' spesso perche' il colore da solo non
   basta a chi non lo distingue (WCAG 1.4.1). */
.field--invalid .field__input,
.field--invalid select,
.field--invalid textarea {
	border-color: #c94e3d;
	border-width: 2px;
}

.field__error {
	align-items: flex-start;
	color: #c94e3d;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.25rem;
	margin: 0.25rem 0 0;
}

.field__error[hidden] {
	display: none;
}

.field__error svg {
	flex: 0 0 auto;
	margin-top: 0.0625rem;
}

/* Mostra/nascondi password
--------------------------------------------- */

/* Il pulsante sta dentro il campo ma resta un bersaglio pieno: e' il
   controllo piu' piccolo di tutta la schermata. */
.field__control--toggle .field__input {
	padding-right: calc(44px + 0.25rem);
}

.field__toggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 3px;
	bottom: 0;
	color: var(--color-text-muted, #5f6873);
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	position: absolute;
	right: 0;
	top: 0;
}

.field__toggle:hover {
	color: var(--color-text, #2c343f);
}

.field__toggle[hidden] {
	display: none;
}

/* Riepilogo degli errori
--------------------------------------------- */

/* Il contenitore riceve il focus da JavaScript (tabindex="-1"): il
   focus programmato non sempre fa scattare :focus-visible, quindi
   l'anello viene disegnato anche su :focus. */
.form-errors {
	margin-bottom: 1.5rem;
}

.form-errors[hidden] {
	display: none;
}

.form-errors:focus {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 2px;
}

.form-errors__list {
	margin: 0.5rem 0 0;
	padding-left: 1rem;
}

.form-errors__list li + li {
	margin-top: 0.25rem;
}

.form-errors__list a {
	color: #b54232;
}

/* Gruppo di campi
--------------------------------------------- */

/* `min-width: 0` qui e non solo su `.fieldset`: il browser da' a ogni
   fieldset `min-width: min-content`, e uno senza classe (il "A chi
   inviare" delle comunicazioni) si allargava sul menu a selezione
   multipla e usciva dalla card di 38px gia' a 320px — un 1.4.10 vero, non
   solo nel caso con il testo al 200%. */
fieldset {
	border: 0;
	margin: 0 0 1.5rem;
	min-width: 0;
	padding: 0;
}

legend {
	color: var(--color-text, #2c343f);
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

/* Campo numerico corto: un ordinamento a tre cifre non ha motivo di
   occupare tutta la larghezza della colonna. */
.field__input--stretto {
	max-width: 8rem;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */

/* Footer
--------------------------------------------- */

/* Schermate di autenticazione
--------------------------------------------- */

/* Accedi, crea account, password dimenticata, reimposta password,
   conferma email: una colonna sola, centrata, senza la sidebar
   dell'area riservata.

   Il vecchio portale metteva il modulo in una fascia bianca a tutta
   larghezza dentro una griglia Bootstrap a 12 colonne con offset. Qui
   e' una card centrata: stessa impaginazione a occhio, ma la larghezza
   e' legata al testo e non a un numero di colonne, cosi' regge anche
   sotto i 480px dove il layout legacy si accavallava. */
.auth {
	align-items: center;
	background-color: var(--color-background, #f5f5f5);
	color: var(--color-text, #2c343f);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: 1.5rem 1rem;
}

.auth__main {
	width: 100%;
}

/* Bordo, non solo l'ombra: `$color-surface` e `$color-background`
   (entrambi theme-aware) restano vicini di proposito nel tema scuro
   (`#1e2126` contro `#16181c`) — un'ombra scura non si vede su un
   fondo gia' scuro, e senza bordo la card si confondeva col resto
   della pagina. `$color-border-strong`, lo stesso token gia' usato sui
   controlli di modulo altrove nel tema, aggiunge un confine visibile
   in entrambi i temi senza introdurre un colore nuovo. */
.auth__card {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(44, 52, 63, 0.12);
	margin: 0 auto;
	max-width: 27rem;
	padding: 2rem 1.5rem;
	width: 100%;
}

@media (min-width: 768px) {

	.auth__card {
		padding: 3rem 2rem;
	}
}

/* Documenti di contenuto
--------------------------------------------- */

/* Le condizioni d'uso e il regolamento passano dallo stesso guscio
   delle schermate pubbliche — ci si arriva da un link del modulo di
   iscrizione, quindi devono somigliargli — ma con una colonna piu'
   larga: 27rem sono giuste per un modulo di accesso e strette per un
   regolamento, che a quella misura diventa una colonna di parole
   spezzate. 46rem stanno intorno alle 75 battute per riga, la misura
   che si legge senza perdere il segno a fine riga. */
.auth-page--documento .auth__card {
	max-width: 46rem;
	text-align: left;
}

/* Il titolo del documento sta a sinistra come il testo che introduce:
   centrarlo su una colonna di 46rem lo staccherebbe dal paragrafo che
   apre, e su un testo lungo il centro non aiuta a trovare l'inizio. */
.auth-page--documento .auth__title {
	text-align: left;
}

.documento {
	text-align: left;
}

.documento > :first-child {
	margin-top: 0;
}

.documento > :last-child {
	margin-bottom: 0;
}

.documento h2 {
	font-size: 1.375rem;
	margin: 2rem 0 0.75rem;
}

.documento h3 {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.5rem;
}

.documento p,
.documento ul,
.documento ol {
	margin: 0 0 1rem;
}

.documento ul,
.documento ol {
	padding-left: 1.5rem;
}

/* Il contenuto scritto dal cliente va reso spezzabile: il tema non sa
   quali parole ci finiranno (stessa nota gia' scritta in CLAUDE.md sul
   reflow). Sta su p/li, non sul solo .documento, perche' sono gli
   elementi che portano davvero il testo. */
.documento p,
.documento li {
	overflow-wrap: anywhere;
}

.documento li {
	margin-bottom: 0.25rem;
}

.documento table {
	border-collapse: collapse;
	width: 100%;
}

.documento th,
.documento td {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	padding: 0.5rem;
	text-align: left;
}

/* Un documento lungo puo' essere spezzato in piu' pagine da
   <!--nextpage-->: i numeri sono link, e devono essere bersagli veri. */
.documento__pagine {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.documento__pagine a,
.documento__pagine > span:not(:first-child) {
	display: inline-block;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
	text-align: center;
}

/* Intestazione
--------------------------------------------- */

/* Il logo e' decorativo (alt=""): il nome del portale e' scritto
   subito sotto, ripeterlo nell'alternativa testuale farebbe sentire la
   stessa cosa due volte. */
.auth__brand {
	margin-bottom: 1.5rem;
	text-align: center;
}

.auth__logo {
	height: auto;
	max-width: 48px;
}

/* Accesso, creazione dell'account e recupero della password: il logo
   largo l'80% della colonna. Crea-account e' lo stesso box di Accedi (ci si
   arriva da li') e aveva il logo a 48px: un salto di misura fra due schermate
   consecutive.

   Sono le schermate in cui si arriva da fuori — da un segnalibro, da un
   collegamento in una email — e in cui, prima di digitare una password,
   si vuole riconoscere dove si e'. A 48px il logo e' un francobollo
   alto diciotto pixel in cui la scritta non si legge: la stessa ragione
   per cui la conferma dell'indirizzo lo porta gia' a 220px.

   Il recupero della password sono **due** pagine — la richiesta e la
   scelta della nuova — e valgono insieme: ingrandirne una sola avrebbe
   lasciato un francobollo illeggibile a meta' percorso.

   Serve `width` e non `max-width`: quest'ultimo mette un tetto ma non
   fa crescere l'immagine oltre la propria misura naturale, e il logo si
   sarebbe fermato a 269px — il 73% della colonna, non l'80%.
   Ingrandirlo non costa nulla perche' e' un SVG, e `height: auto` piu'
   il rapporto dichiarato nell'`img` lo tengono in proporzione. */
.page-template-accedi .auth__logo,
.page-template-crea-account .auth__logo,
.page-template-password-dimenticata .auth__logo,
.page-template-reimposta-password .auth__logo {
	max-width: 80%;
	width: 80%;
}

/* La pagina di conferma dell'indirizzo e' la prima cosa del portale che
   un fornitore apre venendo da fuori — dalla mail, spesso su telefono —
   e a 48px il logo e' un francobollo di 18 pixel d'altezza in cui la
   scritta non si legge. Qui e' grande abbastanza da riconoscere chi
   scrive. Sulle altre schermate pubbliche resta com'era: li' si arriva
   gia' sapendo dove si e'. */
.page-template-verifica-email .auth__logo {
	max-width: 220px;
}

/* Nome del portale, in grande: stessa misura del nome "VDR" nelle
   schermate di accesso della Virtual Data Room. */
.auth__portal {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0.75rem 0 0;
	overflow-wrap: anywhere;
}

.auth__org {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

.auth__title {
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
	text-align: center;
}

.auth__intro {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0 0 1.5rem;
	text-align: center;
}

/* Modulo
--------------------------------------------- */
.auth__form {
	margin: 0;
}

.auth__consents {
	margin-bottom: 1.5rem;
}

/* Riga dei due link sotto i campi: "Password dimenticata?" a sinistra,
   "Crea nuovo utente" a destra, come nel vecchio portale. Sotto i 480px
   vanno in colonna invece di stringersi fino a spezzare le parole. */
.auth__links {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin: 0 0 1.5rem;
}

.auth__links--single {
	justify-content: center;
	margin: 1.5rem 0 0;
}

/* I link della riga restano bersagli comodi anche da tablet. */
.auth__links a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

/* Sottolineatura al passaggio e al focus: un secondo segnale oltre al
   colore. Sta qui e non in base/_links.scss perche' li' colpirebbe
   anche le voci di navigazione, che hanno text-decoration: none con
   una specificita' piu' bassa di `a:hover`. */
.auth a:hover,
.auth a:focus-visible {
	text-decoration: underline;
}

/* Piede
--------------------------------------------- */
.auth__footer {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin-top: 2rem;
	text-align: center;
}

.auth__footer p {
	margin: 0;
}

/* Specificita' con due classi apposta: `.auth__footer p { margin: 0 }`
   qui sopra (0-1-1) batterebbe un `.auth__footer-links` da solo (0-1-0)
   e il margine sparirebbe di nuovo, stessa trappola gia' documentata
   per `.switch__input` in components/_switch.scss. */
.auth__footer .auth__footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: center;
	margin-top: 0.5rem;
}

/* Sidebar
--------------------------------------------- */

/* Un solo componente, due varianti di contenuto: operatore economico
   e ufficio albo. La differenza sta nelle voci e nell'aria-label del
   <nav>, non nello stile. */
.sidebar {
	background-color: #2c343f;
	bottom: 0;
	color: #a7adb5;
	display: flex;
	flex-direction: column;
	left: 0;
	overflow-y: auto;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: transform 0.2s ease;
	width: 240px;
	z-index: 300;
	--focus-ring-color: #a9d2ff;
}

.sidebar.is-open {
	transform: translateX(0);
}

@media (min-width: 1024px) {

	.sidebar {
		transform: translateX(0);
	}
}

/* Testata: il logo ufficiale, largo quanto la colonna.
   Fino alla Fase 8 erano un segno da 32px piu' la scritta "Elenco
   Operatori Economici" scritta in HTML accanto. Adesso la scritta e'
   quella del logo — che sul fondo scuro va in bianco, da cui la
   variante `-bianco` del file — e il nome accessibile del link sta
   nell'alt dell'immagine: tolto lo <span>, senza alt il collegamento
   resterebbe senza nome. */
.sidebar__brand {
	color: #fff;
	display: block;

	/* La colonna e' un contenitore flex verticale, quindi le sue parti
     si lasciano comprimere quando il contenuto supera l'altezza dello
     schermo. La testata pero' non deve: comprimendola, il logo — che
     ha un'altezza propria e non la perde — resta grande e finisce
     sopra la prima voce del menu. Succedeva con l'indice delle
     sezioni aperto su una pagina lunga. */
	flex: 0 0 auto;
	line-height: 1.25;
	min-height: 60px;
	padding: 1rem;
	text-decoration: none;
}

.sidebar__logo {
	display: block;
	height: auto;
	width: 100%;
}

.sidebar__nav {
	flex: 0 0 auto;
	padding-bottom: 1.5rem;
}

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

/* Etichetta di gruppo ("PROCEDURA ISCRIZIONE" / "GESTIONE UTENTI").
   È un <li> di sola presentazione: non entra nel conteggio delle
   voci navigabili. */
.sidebar__heading {
	color: #979ea7;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 1.5rem 1rem 0.5rem;
	text-transform: uppercase;
}

.sidebar__divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 0 1rem 0.5rem;
}

.sidebar__link {
	align-items: center;
	color: #a7adb5;
	display: flex;
	font-size: 0.9375rem;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	text-decoration: none;
	width: 100%;
}

.sidebar__link:hover,
.sidebar__link:focus {
	background-color: #3c434d;
	color: #fff;
}

/* Voce corrente. Lo stato non è affidato al solo colore: c'è la
   barra a sinistra, il peso del testo, e soprattutto aria-current
   nel markup — requisito WCAG 1.4.1 (uso del colore). */
.sidebar__link[aria-current="page"] {
	background-color: #3c434d;
	box-shadow: inset 3px 0 0 #709ed8;
	color: #fff;
	font-weight: 600;
}

.sidebar__icon {
	flex: 0 0 auto;
}

.sidebar__label {
	flex: 1 1 auto;
}

/* Sotto-menu "Categorie" (Cat A1 / A2 / A3) */
.sidebar__toggle {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

.sidebar__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.sidebar__toggle[aria-expanded="true"] .sidebar__chevron {
	transform: rotate(180deg);
}

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

.sidebar__toggle[aria-expanded="false"] + .sidebar__submenu {
	display: none;
}

.sidebar__submenu .sidebar__link {
	font-size: 0.875rem;
	padding-left: 3rem;
}

/* Velo che copre il contenuto quando la sidebar è aperta sotto
   $bp-desktop. */
.sidebar-overlay {
	background-color: rgba(44, 52, 63, 0.5);
	border: 0;
	display: none;
	inset: 0;
	position: fixed;
	z-index: 200;
}

.sidebar-overlay.is-visible {
	display: block;
}

@media (min-width: 1024px) {

	.sidebar-overlay.is-visible {
		display: none;
	}
}

/* Indice delle sezioni della pagina aperta
--------------------------------------------- */

/* Sta sotto la voce corrente, e solo sotto quella. E' un <nav> dentro
   il <nav> della colonna: la colonna elenca le pagine, questo elenca le
   sezioni della pagina che si sta guardando. Compare anche nel pannello
   che si apre su schermo stretto — chi lo apre a meta' pagina puo'
   saltare a una sezione senza risalire in cima. */
.sidebar__indice-lista {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	list-style: none;
	margin: 0.5rem 0 0.5rem calc(1rem + 10px);
	padding: 0;
}

.sidebar__indice-link {
	color: #a7adb5;
	display: block;
	font-size: 0.8125rem;
	line-height: 1.25;

	/* Le voci d'indice sono tante — nove su A2 — e col bersaglio pieno
     la colonna diventerebbe piu' alta dello schermo. Restano
     comodamente cliccabili perche' la riga occupa tutta la larghezza
     disponibile. */

	/* La colonna e' larga 240px fissi: un nome d'area lungo, col testo
     ingrandito, andrebbe a spingere fuori il pannello. */
	overflow-wrap: break-word;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.sidebar__indice-link:hover,
.sidebar__indice-link:focus {
	background-color: #3c434d;
	color: #fff;
}

/* Sezione corrente: barretta + peso, non il solo colore (WCAG 1.4.1).
   Nel markup c'e' anche aria-current, che lo script mette e toglie. */
.sidebar__indice-link.is-corrente {
	box-shadow: inset 3px 0 0 #709ed8;
	color: #fff;
	font-weight: 600;
}

/* Topbar
--------------------------------------------- */
.topbar {
	align-items: center;
	background-color: var(--color-surface, #fff);
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	display: flex;

	/* Se il contenuto non ci sta, la barra va a capo invece di sfondare
     la pagina. Serve col testo ingrandito: la pastiglia del ruolo
     raddoppia insieme al resto, e a 1024px con il testo al 200%
     "Esci" usciva dalla finestra. Una barra su due righe e' cio' che
     1.4.4 si aspetta; una pagina che scorre di lato no. */
	flex-wrap: wrap;
	gap: 1rem;
	min-height: 60px;
	padding: 0 1rem;
	position: sticky;
	top: 0;
	z-index: 100;
}

@media (min-width: 768px) {

	.topbar {
		padding: 0 2rem;
	}
}

/* Apre la sidebar sotto $bp-desktop. È un <button> con
   aria-expanded e aria-controls, non un link a "#". */
.topbar__menu-toggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 3px;
	color: var(--color-text, #2c343f);
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.topbar__menu-toggle:hover {
	background-color: var(--color-background, #f5f5f5);
}

@media (min-width: 1024px) {

	.topbar__menu-toggle {
		display: none;
	}
}

.topbar__spacer {
	flex: 1 1 auto;
}

/* "Log out": l'icona da sola non basta, serve il testo accanto
   (WCAG 2.1 AA, nome accessibile). Sotto il breakpoint tablet il
   testo resta ma si stringe, non sparisce. */
.topbar__action {
	align-items: center;
	border-radius: 3px;
	color: var(--color-text-muted, #5f6873);
	display: inline-flex;
	font-size: 0.875rem;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.75rem;
	text-decoration: none;
}

.topbar__action:hover,
.topbar__action:focus {
	background-color: var(--color-background, #f5f5f5);
	color: var(--color-text, #2c343f);
}

/* Ruolo di chi sta guardando
--------------------------------------------- */

/* Accanto a "Esci", perche' e' li' che si guarda quando ci si chiede
   "in quale account sono?". Tre colori ben diversi fra loro e non tre
   sfumature di blu: servono a riconoscere l'account a colpo d'occhio,
   e due azzurri vicini non lo fanno. Il colore non porta informazione
   da solo — il ruolo c'e' scritto (WCAG 1.4.1). */
.topbar__ruolo {
	border-radius: 999px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;

	/* `nowrap` tiene "Sei entrato come: Ufficio Tecnico" su una riga
     sola, che e' l'aspetto giusto in una barra. Ma con il testo al
     200% dentro a una finestra da 320px quella frase misura piu' della
     barra e allargava la pagina: il tetto la lascia andare a capo solo
     quando l'alternativa e' uscire dallo schermo. */
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0.25rem 0.75rem;
	white-space: nowrap;
}

@media (max-width: 480px) {

	.topbar__ruolo {
		white-space: normal;
	}
}

/* L'operatore economico: azzurro, come il resto di cio' che riguarda
   la sua procedura. */
.topbar__ruolo--operatore {
	background-color: #1b7bbe;
}

/* L'ufficio albo: la tinta della colonna amministrativa. */
.topbar__ruolo--ufficio {
	background-color: #2c343f;
}

/* L'amministratore di WordPress non e' un utente del portale: vede
   schermate che nessun ruolo di portale vedrebbe cosi', e la pastiglia
   glielo ricorda. */
.topbar__ruolo--admin {
	background-color: #a8680d;
}

/* Quando la barra non ci sta piu' — hamburger, briciola, ruolo e
   "Esci" sommano piu' della larghezza della finestra e la pagina
   comincia a scorrere di lato (WCAG 1.4.10) — si tolgono le due cose
   che si possono togliere senza perdere niente: la briciola, che
   ripete parola per parola il titolo stampato due centimetri piu'
   sotto, e la parola "Esci", che resta come nome accessibile del
   collegamento accanto alla sua icona. Il ruolo resta: e' l'unico
   posto in cui e' scritto.

   Qui la soglia e' in pixel come nel resto del tema, e non in `em` per
   farla crescere col testo: nelle **media query** l'unita' `em` si
   misura sul carattere di default del browser e **non vede** il
   `font-size` scritto nel CSS, quindi una soglia in `em` non scatta
   quando il testo viene ingrandito da pagina. Di quel caso si occupa
   `flex-wrap` qui sopra. */
@media (max-width: 767px) {

	/* Anche gli spazi vanno stretti: a 320px il solo respiro fra le
     quattro parti della barra vale piu' della pastiglia del ruolo. */
	.topbar {
		gap: 0.5rem;
		padding: 0 0.75rem;
	}

	.topbar__breadcrumb,
	.topbar__azione-testo {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/* App shell
--------------------------------------------- */

/* Guscio dell'area riservata: sidebar fissa a sinistra, topbar in
   alto, contenuto a destra. Sotto $bp-desktop la sidebar esce dal
   flusso e diventa un pannello richiudibile (vedi layout/_sidebar). */
.app {
	background-color: var(--color-background, #f5f5f5);
	color: var(--color-text, #2c343f);
	min-height: 100vh;
}

.app__main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
}

@media (min-width: 1024px) {

	.app__main {
		margin-left: 240px;
	}
}

/* Il <main> avvolge intestazione e corpo (template-parts/app/header):
   prende il posto che il corpo aveva nella colonna, cosi' il pie' di
   pagina resta in fondo anche su una pagina corta. */
.app__contenuto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/* Intestazione di pagina: titolo a sinistra, eventuale sottotitolo
   sotto (es. codice fiscale e numero d'iscrizione). */
.page-header {
	background-color: var(--color-surface, #fff);
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	padding: 1.5rem;
}

.page-header__title {
	margin: 0;
}

.page-header__subtitle {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

/* Riga informativa in piu', sotto il sottotitolo (es. "questo numero
   serve anche per l'assistenza") — piu' piccola del sottotitolo, non
   un secondo fatto sullo stesso piano. */
.page-header__nota {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

/* Intestazione in tinta piena scura (schermata "Benvenuto"). Nel
   vecchio portale qui c'era una fotografia; finché non ne arriva una
   dal cliente il fondo è il solo token scuro, e il testo bianco ci sta
   sopra a 12.57:1 senza bisogno di nessun velo. */
.page-header--media {
	background-color: #2c343f;
	color: #fff;
}

.page-header--media .page-header__subtitle,
.page-header--media .page-header__nota {
	color: rgba(255, 255, 255, 0.85);
}

/* Variante con fotografia. Il velo scuro non è decorativo: senza, il
   testo bianco finisce su una foto di cui non si può garantire il
   contrasto.
   Sta in una classe a parte, e non dentro `--media`, per una ragione
   pratica: un `::before` sopra il fondo impedisce ad axe di misurare
   il contrasto e trasforma titolo e sottotitolo in due "incomplete"
   da sciogliere a mano a ogni verifica. Senza foto il velo non serve,
   quindi non c'è, e il controllo automatico torna a funzionare. */
.page-header--foto {
	background-position: center;
	background-size: cover;
	position: relative;
}

.page-header--foto::before {
	background-color: rgba(44, 52, 63, 0.65);
	content: "";
	inset: 0;
	position: absolute;
}

.page-header--foto > * {
	position: relative;
}

/* Corpo della pagina */
.page-body {
	flex: 1 1 auto;
	margin: 0 auto;
	max-width: 1440px;
	padding: 1.5rem;
	width: 100%;
}

@media (min-width: 768px) {

	.page-header,
	.page-body {
		padding: 2rem;
	}
}

/* Riserva in fondo alla pagina per il bottone di accessibilita', fisso in
   basso a destra (sass/utilities/_accessibility-toolbar.scss): senza
   questo margine in piu' l'ultima riga di una pagina che arriva fin li'
   (es. il riquadro "Attenzione" di /benvenuto/) finisce sotto al cerchio,
   letteralmente coperta — trovato scorrendo /benvenuto/ non scrollata a
   una risoluzione desktop comune (1366x900). La misura segue lo stesso
   respiro del bottone a ogni livello ($tap-target-min + il suo offset dal
   bordo + uno spazio di rispetto), non un numero indovinato. */
.page-body {
	padding-block-end: calc(0.25rem + 44px + 1rem);
}

@media (min-width: 768px) {

	.page-body {
		padding-block-end: calc(1rem + 44px + 1.5rem);
	}
}

/* Footer minimo del portale */
.app__footer {
	border-top: 1px solid var(--color-border, #e1e3e4);
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	padding: 1.5rem;
	text-align: center;
}

.app__footer p {
	margin: 0;
}

.app__footer .app__footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: center;
	margin-top: 0.5rem;
}

/* Grid
--------------------------------------------- */

/* Griglia dei blocchi: nella vista di riepilogo admin le card stanno
   affiancate (ANAGRAFICA / ALTRI DATI, poi CAT A1 / A2 / A3), su
   schermo stretto vanno in colonna. */
.grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

/* Una griglia che segue una card — o che ne precede una — prende la
   stessa distanza che le card tengono fra loro. Senza, in dashboard il
   riquadro dell'avanzamento e quelli delle istruzioni si toccano. */
.card + .grid,
.grid + .grid,
.grid + .card {
	margin-top: 1.5rem;
}

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

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

/* Buttons
--------------------------------------------- */

/* Tutte le varianti piene usano i token `-strong`: le tinte legacy
   sotto testo bianco stavano fra 1.79:1 e 3.53:1, quindi sotto la
   soglia AA (vedi base/_variables.scss). */
.btn {
	align-items: center;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	display: inline-flex;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.25;

	/* Un `inline-flex` si dimensiona su `max-content`, che non ha
     tetto: l'etichetta piu' lunga decide la larghezza del pulsante
     anche quando supera la finestra. A 320px con il testo al 200%
     "Salva le impostazioni" produceva un pulsante da 321px dentro a
     una pagina da 320, e la pagina scorreva. Il tetto glielo mette
     `max-width`; `flex-wrap` lascia che icona ed etichetta vadano su
     due righe invece di comprimersi, e `overflow-wrap` che la parola
     si spezzi se anche una riga sola non basta. */
	flex-wrap: wrap;
	max-width: 100%;
	min-height: 44px;
	overflow-wrap: anywhere;
	padding: 0.5rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* `display: inline-flex` qui sopra batte sempre lo user-agent — che e'
   l'unico posto dove vive `[hidden] { display: none }` — perche' un
   foglio di stile dell'autore ha sempre la precedenza sullo
   user-agent, qualunque sia la specificita'. Senza questo, un pulsante
   con l'attributo `hidden` resterebbe visibile lo stesso: capitato
   davvero riordinando le categorie (Fase 12), provando senza
   JavaScript. Stessa famiglia di .field__error[hidden] e
   .field__toggle[hidden] in base/_forms.scss. */
.btn[hidden] {
	display: none;
}

/* Pulsante di sola icona: resta comunque un bersaglio pieno, e il
   nome accessibile arriva da aria-label sul controllo. */
.btn--icon {
	min-width: 44px;
	padding: 0.5rem;
}

.btn--primary {
	background-color: #3877c8;
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: #3169b1;
	color: #fff;
}

.btn--success {
	background-color: #2c8652;
	color: #fff;
}

.btn--success:hover,
.btn--success:focus {
	background-color: #246f44;
	color: #fff;
}

.btn--danger {
	background-color: #c94e3d;
	color: #fff;
}

.btn--danger:hover,
.btn--danger:focus {
	background-color: #b54232;
	color: #fff;
}

/* Il pulsante "visualizza" dei PDF era ambra su bianco: 1.79:1.
   Qui l'ambra scura regge il testo bianco a 4.52:1. */
.btn--warning {
	background-color: #a8680d;
	color: #fff;
}

.btn--warning:hover,
.btn--warning:focus {
	background-color: #8c560b;
	color: #fff;
}

.btn--secondary {
	background-color: var(--color-surface, #fff);
	border-color: var(--color-border-strong, #c9cdd2);
	color: var(--color-text, #2c343f);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background-color: var(--color-background, #f5f5f5);
	border-color: var(--color-text-muted, #5f6873);
}

.btn--link {
	color: var(--color-focus, #0b4fa8);
	min-height: auto;
	padding: 0;
	text-decoration: underline;
}

/* Disabilitato: non basta abbassare l'opacità, che porterebbe il
   testo sotto soglia e comunicherebbe lo stato col solo colore.
   Il controllo va marcato disabled/aria-disabled nel markup. */
.btn:disabled,
.btn[aria-disabled="true"] {
	background-color: var(--color-border, #e1e3e4);
	border-color: var(--color-border-strong, #c9cdd2);
	color: var(--color-text-muted, #5f6873);
	cursor: not-allowed;
}

.btn--block {
	width: 100%;
}

/* Pulsante da riga di tabella. Il minimo di 44px resta sull'altezza:
   si riduce il respiro orizzontale, non il bersaglio da toccare. */
.btn--piccolo {
	font-size: 0.8125rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* Status banner
--------------------------------------------- */

/* Messaggio di esito: conferma di salvataggio, errore di invio,
   avviso sui formati ammessi. Diverso dalla card: è compatto, sta
   in linea sopra il contenuto a cui si riferisce, ed è pensato per
   comparire dinamicamente.
   Tre segnali ridondanti per lo stesso stato — icona, colore e
   testo — perché il colore da solo non basta (WCAG 1.4.1). Il
   markup aggiunge role="status" (o role="alert" per gli errori)
   così che lo screen reader lo annunci quando appare. */
.banner {
	align-items: flex-start;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: 3px;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
}

.banner__icon {
	flex: 0 0 auto;
	margin-top: 0.125rem;
}

/* `min-width: 0` c'era gia' e serve: accanto a un'icona che non si
   restringe (`flex: 0 0 auto`) un elemento flex si fermerebbe alla
   propria larghezza minima. Ma da solo non basta, perche' quella
   larghezza minima e' la parola piu' lunga: a 320px con il testo al
   200% una parola sola faceva scorrere la pagina, e serve poter
   spezzare anche dentro alla parola. */
.banner__content {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.banner__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.banner__text {
	margin: 0.25rem 0 0;
}

.banner__text:first-child {
	margin-top: 0;
}

/* Fase 11 (pannello di accessibilità, tema chiaro/scuro): un link dentro
   il banner erediterebbe altrimenti il colore di default di base/_links.scss
   ($color-focus, diventato tema-aware), che nel tema scuro diventa un blu
   chiaro pensato per un fondo scuro — e qui il fondo resta il pastello
   fisso del banner. Letterale, come il testo del banner qui sopra. */
.banner a {
	color: #0b4fa8;
}

/* Fondo tenue e testo scuro: il rapporto resta sopra 11:1 in tutte
   le varianti, mentre l'icona porta la tinta piena.

   Fase 11 (pannello di accessibilità, tema chiaro/scuro): il testo è
   letterale (`#2c343f`, non `$color-text`) apposta — questi fondi tenui
   sono colori semantici fissi (successo/errore/avviso/informazione), non
   superficie neutra, e non seguono il tema. Con `$color-text` (diventato
   custom property theme-aware in base/_variables.scss) il testo sarebbe
   diventato quasi bianco su un fondo rimasto chiaro nel tema scuro —
   trovato scansionando con axe-core a tema scuro attivo. */
.banner--success {
	background-color: #e9f8ef;
	border-color: #2c8652;
	color: #2c343f;
}

.banner--success .banner__icon {
	color: #2c8652;
}

.banner--danger {
	background-color: #faedeb;
	border-color: #c94e3d;
	color: #2c343f;
}

.banner--danger .banner__icon {
	color: #c94e3d;
}

.banner--warning {
	background-color: #fef6ec;
	border-color: #a8680d;
	color: #2c343f;
}

.banner--warning .banner__icon {
	color: #a8680d;
}

.banner--info {
	background-color: #eef7fd;
	border-color: #1b7bbe;
	color: #2c343f;
}

.banner--info .banner__icon {
	color: #1b7bbe;
}

/* Switch (toggle di consenso)
--------------------------------------------- */

/* Sotto la resa a interruttore c'e' una checkbox vera: `appearance:
   none` cambia solo il disegno, non l'elemento, quindi restano tutti i
   comportamenti nativi (tabulazione, barra spaziatrice, invio nel POST
   senza JavaScript).

   Lo stato non e' dato dal solo colore: la pallina si sposta e la
   pastiglia cambia bordo, cosi' si distingue anche in scala di grigi.
   Nella modalita' a contrasto forzato di Windows i colori scelti qui
   verrebbero ignorati e resterebbe una pastiglia vuota: li' si torna
   alla checkbox di sistema. */
.switch {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.75rem;

	/* La pallina ha una misura fissa e non si restringe: l'etichetta
     accanto deve poterlo fare, altrimenti a 320px con il testo al
     200% la riga del consenso allarga la pagina. `max-width` tiene
     l'insieme dentro alla colonna. */
	max-width: 100%;
	min-height: 44px;
}

.switch__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Il selettore porta `input` davanti alla classe, e non e' pedanteria.
   In base/_forms.scss c'e' `input[type="checkbox"] { height: 20px;
   width: 20px }`, che ha specificita' 0-1-1 e batte la sola classe
   (0-1-0): senza `input` qui davanti, la pastiglia da 46x26 non e' mai
   esistita e l'interruttore restava un cerchietto da 20px. Il difetto
   non si vedeva perche' fino alla Fase 8 nessuna schermata mostrava un
   interruttore gia' acceso all'apertura: da spento il cerchietto passa
   per una casella, da acceso la pallina scorre di 20px, esce dal
   controllo e finisce sopra la prima lettera dell'etichetta. */
input.switch__input {
	appearance: none;
	background-color: var(--color-surface, #fff);
	border: 2px solid var(--color-border-strong, #c9cdd2);
	border-radius: 999px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 26px;
	margin: 0;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 46px;
}

.switch__input::before {
	background-color: var(--color-text-muted, #5f6873);
	border-radius: 50%;
	content: "";
	height: 16px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform 0.15s ease, background-color 0.15s ease;
	width: 16px;
}

.switch__input:checked {
	background-color: #2c8652;
	border-color: #2c8652;
}

.switch__input:checked::before {
	background-color: var(--color-surface, #fff);
	transform: translateX(20px);
}

.switch__input:hover {
	border-color: var(--color-text-muted, #5f6873);
}

.switch__label {
	font-size: 1rem;
}

.field--invalid .switch__input {
	border-color: #c94e3d;
}

@media (forced-colors: active) {

	input.switch__input {
		appearance: auto;
		height: auto;
		width: auto;
	}

	.switch__input::before {
		content: none;
	}
}

/* Consenso legale (creazione account)
--------------------------------------------- */

/* Il wrapper .consent e' condiviso con altri switch dell'area riservata
   (impostazioni, conferme distruttive, vedi components/_switch.scss e
   components/_pericolo.scss): vive qui perche' e' qui che la frase
   unica del consenso ne ha bisogno, non perche' sia esclusivo di questo
   file. */
.consent {
	margin-bottom: 1rem;
}

/* Etichetta + casella: allineamento in alto perche' il testo, ora una
   frase intera col link dentro, va tipicamente su due righe a 320px —
   centrare verticalmente sposterebbe la casella a meta' frase. */
.consent__option {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	max-width: 100%;
	min-height: 44px;
}

/* Nessun appearance: none, nessuna misura personalizzata: eredita i
   20x20 di base/_forms.scss (input[type="checkbox"]). E' la scelta
   voluta — una checkbox vera, non un interruttore restilizzato — e
   siccome non prova a vincere sulla specificita' di quella regola, la
   trappola descritta li' (0-1-1 batte una classe sola) qui non si pone:
   se in futuro servisse una misura diversa, il selettore andrebbe
   scritto `input.consent__input`, come gia' annotato per
   .switch__input. */
.consent__input {
	flex: 0 0 auto;
	margin: 0;
	margin-top: 0.1875rem;
}

.consent__text {
	font-size: 1rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Il titolo del documento e' il link: risalta rispetto al resto della
   frase. Nessun min-height da bersaglio a se' stante (WCAG 2.5.5/2.5.8
   escludono i link dentro una frase di testo continuo): il bersaglio
   "buono" per la casella resta la <label> intera, gia' alta almeno
   $tap-target-min. */
.consent__link {
	font-weight: 600;
}

/* Niente appearance: none vuol dire niente bordo disegnato a mano da
   sovrascrivere: un outline, che il browser disegna sempre intorno al
   riquadro del controllo indipendentemente da come lo renderizza,
   regge meglio di border-color su una checkbox nativa. */
.field--invalid .consent__input {
	outline: 2px solid #c94e3d;
	outline-offset: 2px;
}

@media (min-width: 768px) {

	.consent {
		align-items: center;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
	}

	.consent .field__error {
		flex-basis: 100%;
	}
}

/* Popup dei documenti legali
--------------------------------------------- */

/* `color` esplicito, non solo `background-color`: il foglio di stile
   nativo del browser per `<dialog>` dichiara un proprio `color`
   (`CanvasText`, che senza `color-scheme: dark` dichiarato resta nero)
   più specifico della semplice eredità — senza questa riga il testo di
   `.documento` dentro (che non fissa un proprio colore, eredita) restava
   nero letterale sopra un fondo ormai scuro. Trovato scansionando il
   popup a vista, non con axe-core: il nero è comunque testo vero sopra
   uno sfondo vero, quindi tecnicamente misurabile, ma la combinazione
   emerge solo aprendo il popup nel tema scuro. */
.legal-modal {
	background-color: var(--color-surface, #fff);
	border: 0;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(44, 52, 63, 0.12);
	color: var(--color-text, #2c343f);
	margin: auto;
	max-height: calc(100vh - 4rem);
	max-width: 60rem;
	padding: 0;
	width: calc(100% - 2rem);
}

.legal-modal::backdrop {
	background-color: rgba(44, 52, 63, 0.5);
}

/* L'intestazione resta ferma in alto mentre il testo scorre: titolo e
   pulsante di chiusura sono sempre raggiungibili, anche a pagina 30 di un
   regolamento. Lo scorrimento e' del pannello, non del dialog: lo sticky
   si aggancia al contenitore che scorre. */
.legal-modal__panel {
	max-height: inherit;
	overflow-y: auto;
	width: 100%;
}

.legal-modal__header {
	align-items: center;
	background-color: var(--color-surface, #fff);
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.75rem 0.75rem 0.75rem 1.5rem;
	position: sticky;
	top: 0;
	z-index: 1;
}

.legal-modal__close {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 3px;
	color: var(--color-text-muted, #5f6873);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.legal-modal__close:hover {
	color: var(--color-text, #2c343f);
}

.legal-modal__title {
	font-size: 1.125rem;
	margin: 0;
}

.legal-modal__body {
	padding: 1.5rem 1.5rem 2rem;
}

@media (min-width: 768px) {

	.legal-modal__header {
		padding-left: 2rem;
	}

	.legal-modal__body {
		padding: 1.5rem 2rem 3rem;
	}
}

/* Senza appearance: none non serve toccare la checkbox in contrasto
   forzato (a differenza di .switch__input): resta il controllo di
   sistema. Il popup si', perche' box-shadow sparisce in quella
   modalita' e senza un bordo il riquadro si confonderebbe con la
   pagina sotto. */
@media (forced-colors: active) {

	.legal-modal {
		border: 1px solid CanvasText;
	}
}

/* Cards
--------------------------------------------- */

/* Blocco con intestazione colorata e corpo bianco. È il mattone
   ricorrente del vecchio portale: lo si trova sia come riquadro di
   sezione nei moduli ("REFERENTE", "LEGALE RAPPRESENTANTE") sia
   come blocco di riepilogo lato admin ("ANAGRAFICA", "CAT A1").
   Il colore dell'intestazione indica lo STATO del blocco, non il
   suo tipo: nel vecchio portale tutte le intestazioni erano coral
   anche quando non c'era nessun errore, il che rendeva il colore
   una decorazione priva di significato. */
.card {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e1e3e4);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(44, 52, 63, 0.08);
	overflow: hidden;
}

.card + .card {
	margin-top: 1.5rem;
}

/* ...ma non dentro una griglia, dove la distanza la da' gia' `gap`.
   Il margine in piu' non allargava lo spazio: spingeva in basso la
   seconda e la terza card **della stessa riga**, che partivano 24px
   sotto la prima. Si vedeva sulle due dashboard, dove le card sono
   affiancate. */
.grid > .card + .card {
	margin-top: 0;
}

.card__header {
	align-items: center;
	background-color: var(--color-background, #f5f5f5);
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	color: var(--color-text, #2c343f);
	display: flex;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1rem;
}

.card__title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.card__body {
	padding: 1rem;
}

@media (min-width: 768px) {

	.card__body {
		padding: 1.5rem;
	}
}

/* Corpo con una tabella a filo dei bordi.

   Una tabella dentro una card, con il padding del corpo attorno e la sua
   fascia grigia d'intestazione sotto quella della card, sembra una
   tabella dentro una tabella: due cornici e due fasce per un solo
   elenco. Qui la tabella arriva ai bordi della card, la fascia della
   card fa da intestazione e quella delle colonne resta bianca con un
   filetto. Testi e note sotto la tabella conservano il loro respiro. */
.card__body--a-filo {
	padding: 0;
}

.card__body--a-filo > .tabella .tabella__griglia thead th {
	background-color: var(--color-surface, #fff);
}

.card__body--a-filo > .tabella .tabella__griglia thead th,
.card__body--a-filo > .tabella .tabella__griglia tbody tr:last-child th,
.card__body--a-filo > .tabella .tabella__griglia tbody tr:last-child td {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
}

.card__body--a-filo > :not(.tabella) {
	margin-left: 1rem;
	margin-right: 1rem;
}

.card__body--a-filo > :not(.tabella):first-child {
	margin-top: 1rem;
}

.card__body--a-filo > :not(.tabella):last-child {
	margin-bottom: 1rem;
}

.card__body--a-filo > .tabella + :not(.tabella) {
	margin-top: 1rem;
}

@media (min-width: 768px) {

	.card__body--a-filo > :not(.tabella) {
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}

	.card__body--a-filo > :not(.tabella):first-child {
		margin-top: 1.5rem;
	}

	.card__body--a-filo > :not(.tabella):last-child {
		margin-bottom: 1.5rem;
	}

	.card__body--a-filo > .tabella + :not(.tabella) {
		margin-top: 1.5rem;
	}
}

/* Varianti di stato. Il testo dell'intestazione è bianco, quindi il
   fondo usa sempre il token `-strong`. */
.card--success .card__header {
	background-color: #2c8652;
	border-bottom-color: #2c8652;
	color: #fff;
}

.card--danger .card__header {
	background-color: #c94e3d;
	border-bottom-color: #c94e3d;
	color: #fff;
}

.card--warning .card__header {
	background-color: #a8680d;
	border-bottom-color: #a8680d;
	color: #fff;
}

.card--info .card__header {
	background-color: #1b7bbe;
	border-bottom-color: #1b7bbe;
	color: #fff;
}

.card--primary .card__header {
	background-color: #3877c8;
	border-bottom-color: #3877c8;
	color: #fff;
}

/* Card vuota: nel vecchio portale i blocchi senza dati apparivano
   semplicemente vuoti (o con un warning PHP a schermo). Qui il vuoto
   è dichiarato. */
.card__empty {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.875rem;
	margin: 0;
}

/* Stepper — indicatore di completamento
--------------------------------------------- */

/* Mostra a che punto è la procedura di iscrizione. Qui c'è solo il
   componente visivo: gli stati veri li calcolano la Fase 3 (wizard)
   e la Fase 4 (area utente).
   Quattro stati: non iniziato / in corso / completo / con errori.
   Ognuno ha icona e testo propri, non solo un colore, e il testo di
   stato è esposto agli screen reader anche quando è visivamente
   compresso in una pastiglia. */
.step-status {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 0.25rem 0.5rem;
}

.step-status__icon {
	flex: 0 0 auto;
}

/* Ambra e non grigio: e' un avviso, non una cosa in attesa. */
.step-status--todo {
	background-color: #fef6ec;
	color: #8c560b;
}

.step-status--doing {
	background-color: #eef7fd;
	color: #176aa3;
}

.step-status--done {
	background-color: #e9f8ef;
	color: #246f44;
}

.step-status--error {
	background-color: #faedeb;
	color: #b54232;
}

/* Dentro la sidebar i fondi tenui non funzionano: sul blu scuro la
   pastiglia diventa il solo colore della tinta piena, e resta
   l'icona a distinguere lo stato. */
.sidebar .step-status {
	background-color: transparent;
	padding: 0;
}

.sidebar .step-status--todo {
	color: #f3b760;
}

.sidebar .step-status--doing {
	color: #70b9eb;
}

.sidebar .step-status--done {
	color: #46c37b;
}

.sidebar .step-status--error {
	color: #da8478;
}

/* Avanzamento della procedura
--------------------------------------------- */

/* L'elenco dei passi in dashboard, con lo stato di ciascuno e le voci
   che mancano. Le pastiglie sono quelle di components/_stepper: qui
   c'è solo l'impaginazione dell'elenco.
   È un elenco numerato, ma il numero del browser starebbe accanto al
   titolo e all'utente non serve: quello che deve saltare all'occhio è
   lo stato. La numerazione resta nel markup (<ol>) per gli screen
   reader e sparisce dalla resa visiva. */
.avanzamento {
	list-style: none;
	margin: 0;
	padding: 0;
}

.avanzamento__voce {
	border-top: 1px solid var(--color-border, #e1e3e4);
	padding: 0.75rem 0;
}

.avanzamento__voce:first-child {
	border-top: 0;
	padding-top: 0;
}

.avanzamento__voce:last-child {
	padding-bottom: 0;
}

.avanzamento__titolo {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-weight: 600;
	gap: 0.5rem;
	margin: 0;
}

/* Le voci mancanti sono un dettaglio del passo, non un elenco a sé:
   rientrate e in corpo minore, così l'elenco dei passi resta leggibile
   anche quando ne manca mezza dozzina. */
.avanzamento__mancanti {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
	padding-left: 1.5rem;
}

.avanzamento__mancanti li + li {
	margin-top: 0.25rem;
}

.avanzamento__conteggio {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.875rem;
	margin: 0.25rem 0 0;
}

.avanzamento__azione {
	margin: 1.5rem 0 0;
}

/* Wizard di iscrizione
--------------------------------------------- */
.wizard__intro {
	color: var(--color-text-muted, #5f6873);
	margin: 0 0 1.5rem;
	max-width: 62ch;
}

.wizard__form .card {
	margin-bottom: 1.5rem;
}

.wizard__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.wizard__nota {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0;
}

.wizard__copia-sede {
	margin: 0 0 1rem;
}

/* L'asterisco dei campi necessari all'invio. Il significato e' spiegato
   in cima al modulo: da solo un asterisco non dice niente. */
.field__required {
	color: #c94e3d;
	font-weight: 700;
}

/* Allegati
--------------------------------------------- */
.field__file-current,
.field__modello {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.field__file input[type="file"] {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 3px;
	font-size: 0.8125rem;
	min-height: 44px;
	padding: 0.5rem;
	width: 100%;
}

.field__remove {
	align-items: center;
	color: var(--color-text-muted, #5f6873);
	display: flex;
	font-size: 0.8125rem;
	gap: 0.5rem;
	margin-top: 0.5rem;
	min-height: 44px;
}

/* Elenco delle voci di categoria
--------------------------------------------- */
.voci {
	list-style: none;
	margin: 0;
	padding: 0;
}

.voce {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	padding: 0.75rem 0;
}

.voce:last-child {
	border-bottom: 0;
}

.voce__scelta {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.25rem 0;
}

.voce__scelta input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

.voce__codice {
	font-weight: 600;
	margin-right: 0.5rem;
}

.voce__qualificatore {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0 calc(20px + 0.75rem);
}

.voce__qualificatore-label {
	font-size: 0.8125rem;
}

.voce__qualificatore select {
	max-width: 12rem;
	width: auto;
}

/* A3: ogni voce e' un fieldset, le prestazioni sono caselle vere.
   Nel vecchio portale era una griglia di caselle senza etichetta:
   da tastiera e con uno screen reader era indecifrabile. */
.voce__gruppo {
	border: 0;
	margin: 0;
	padding: 0;
}

.voce__legend {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 0.25rem;
	padding: 0;
}

.voce__prestazioni {
	display: grid;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0.5rem 0 0 calc(20px + 0.75rem);
	padding: 0;
}

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

	.voce__prestazioni {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.voce__prestazioni label {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.8125rem;
	gap: 0.5rem;
	min-height: 44px;
}

/* Indice delle categorie
--------------------------------------------- */
.categorie-indice {
	display: grid;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {

	.categorie-indice {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.categorie-indice__titolo {
	font-size: 1.125rem;
	margin: 0 0 0.5rem;
}

/* Il titolo della card e' il modo in cui si entra nella categoria: e'
   il bersaglio principale del riquadro, non una parola sottolineata in
   mezzo a una frase. Da solo sarebbe alto 25px, sotto il minimo che la
   Fase 1 si e' data. */
.categorie-indice__titolo a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.categorie-indice__conteggio {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0;
}

/* Riepilogo
--------------------------------------------- */
.riepilogo {
	margin: 0;
}

.riepilogo__riga {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	display: grid;
	gap: 0.25rem;
	padding: 0.5rem 0;
}

.riepilogo__riga:last-child {
	border-bottom: 0;
}

@media (min-width: 768px) {

	.riepilogo__riga {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: 1rem;
	}
}

.riepilogo dt {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
}

/* I valori sono roba scritta dall'utente: indirizzi email, PEC, nomi di
   file. Sono parole singole lunghe, che nella colonna di destra non ci
   stanno e che senza questa riga **escono dalla card e vengono
   tagliate** dal suo overflow: hidden — non troncate con i puntini,
   proprio tagliate a meta' lettera. Si vede ingrandendo il testo al
   200%, che e' il criterio 1.4.4 delle WCAG: a quel punto la colonna e'
   larga 206px e un indirizzo email ne chiede 367. */
.riepilogo dd {
	margin: 0;
	overflow-wrap: break-word;
}

/* Rinvio della mail di conferma: sta sotto il banner di avviso e non
   dentro, perche' il banner e' una regione live (role status/alert) e un
   controllo dentro una regione live viene riletto a ogni aggiornamento. */
.resend-form {
	margin: -1rem 0 1.5rem;
}

/* Cosa manca in questa pagina
--------------------------------------------- */

/* E' un `<details>` con addosso le classi del banner: il colore e il
   bordo li porta `.banner--warning`, qui c'e' solo cio' che serve a
   farlo aprire e chiudere. `.banner` e' `display: flex`, che su un
   `<details>` non funziona — riga e contenuto devono impilarsi — quindi
   la disposizione a riga si sposta sul `<summary>`. */
.mancanti-pagina {
	display: block;
}

.mancanti-pagina__sommario {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.75rem;

	/* Via il triangolino del browser: al suo posto c'e' la freccia del
     set di icone del portale, in fondo alla riga. `list-style` copre
     i browser moderni, lo pseudo-elemento copre i WebKit piu' vecchi. */
	list-style: none;
}

.mancanti-pagina__sommario::-webkit-details-marker {
	display: none;
}

/* Titolo e testo sono `<span>` — dentro un `<summary>` un `<p>` non ci
   sta bene — quindi vanno impilati a mano. */
.mancanti-pagina .banner__title,
.mancanti-pagina .banner__text {
	display: block;
}

.mancanti-pagina__freccia {
	flex: 0 0 auto;
	margin-top: 0.125rem;
	transition: transform 0.2s ease;
}

.mancanti-pagina[open] .mancanti-pagina__freccia {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

	.mancanti-pagina__freccia {
		transition: none;
	}
}

/* L'elenco dentro l'avviso giallo. A colonne, e per un motivo: su
   Anagrafica appena aperta le voci sono ventidue, e in fila unica
   l'elenco diventerebbe un muro. */
.mancanti-pagina__elenco {
	column-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	justify-items: start;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	row-gap: 0.5rem;
}

/* Le pastiglie qui stanno su un fondo ambra: il bianco pieno stacca da
   solo, senza bisogno di caricare il contorno. */
.mancanti-pagina__elenco .chip {
	border-color: #f3b760;
}

/* Tabelle, pastiglie e filtri dell'area amministrativa
--------------------------------------------- */

/* Contenitore scorrevole. Una tabella con sei colonne non entra in
   375px, e lasciarla sfondare la pagina renderebbe illeggibile tutto il
   resto: scorre dentro il suo riquadro. Il contenitore è raggiungibile
   da tastiera (tabindex nel markup) perché chi non usa il mouse deve
   poterlo scorrere, e ha un nome accessibile, altrimenti sarebbe una
   fermata di Tab che non annuncia niente. */
.tabella {
	overflow-x: auto;

	/* `position: relative` non è decorativo. Dentro le celle ci sono
     span .screen-reader-text, che stanno in posizione assoluta: senza
     un antenato posizionato si ancorano al blocco contenitore iniziale
     invece che al riquadro scorrevole, **sfuggono al ritaglio** e
     allargano l'intera pagina. A 375px la tabella era contenuta
     correttamente e la pagina scorreva lo stesso fino a 683px, per due
     span larghi un pixel. */
	position: relative;
	width: 100%;
}

.tabella__griglia {
	border-collapse: collapse;
	min-width: 44rem;
	width: 100%;
}

/* Due colonne di testo non hanno bisogno dei 44rem delle tabelle larghe. */
.tabella__griglia--compatta {
	min-width: 0;
}

.tabella__griglia th,
.tabella__griglia td {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: middle;
}

.tabella__griglia thead th {
	background-color: var(--color-background, #f5f5f5);
	color: var(--color-text-muted, #5f6873);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tabella__griglia tbody tr:last-child th,
.tabella__griglia tbody tr:last-child td {
	border-bottom: 0;
}

.tabella__principale {
	display: block;
	font-weight: 600;
}

.tabella__secondario {
	color: var(--color-text-muted, #5f6873);
	display: block;
	font-size: 0.8125rem;
}

.tabella__mancante {
	color: var(--color-text-muted, #5f6873);
	font-style: italic;
}

/* La cella resta una cella di tabella: con `display: flex` sul <td> usciva
   dal dimensionamento delle colonne e, con `flex-wrap`, l'ultimo pulsante
   andava a capo. I pulsanti stanno in un contenitore interno, sempre su una
   riga; `width: 1%` + `nowrap` fanno stringere la colonna sul contenuto. */
.tabella__azioni {
	white-space: nowrap;
	width: 1%;
}

.tabella__azioni-lista {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
}

/* Pastiglia di stato. Come per lo stepper, lo stato è dato dal testo:
   il colore accompagna, non informa da solo. */

/* `nowrap` tiene la pastiglia su una riga, che e' giusto dentro a una
   cella di tabella: "Da completare" spezzato in due sembra due stati.
   Ma non deve poter sfondare la pagina: fuori dalla tabella la stessa
   pastiglia porta etichette lunghe ("inviata a 30 operatori"), e con il
   testo al 200% dentro a una finestra da 320px misurava 317px e
   allargava tutto. Il tetto la fa andare a capo solo quando l'unica
   alternativa e' uscire dallo schermo. */
.badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	max-width: 100%;
	padding: 0.25rem 0.5rem;
	white-space: nowrap;
}

@media (max-width: 480px) {

	.badge {
		white-space: normal;
	}
}

.badge--bozza {
	background-color: var(--color-border, #e1e3e4);
	color: var(--color-text, #2c343f);
}

.badge--inviata {
	background-color: #eef7fd;
	color: #176aa3;
}

.badge--completa {
	background-color: #e9f8ef;
	color: #246f44;
}

.badge--ferma,
.badge--warning {
	background-color: #fef6ec;
	color: #8c560b;
}

/* Barra dei filtri: i campi si affiancano quando c'è spazio e vanno in
   colonna quando non ce n'è. */
.filtri {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {

	.filtri {
		align-items: end;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.filtri__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Schede: le tre categorie nella gestione del catalogo (`.tab-gruppi`,
   collegamenti a pagine, `aria-current`) e le sezioni delle Impostazioni
   (`.schede`, js/schede.js, `aria-selected`). Due meccanismi, un aspetto
   solo: le regole sono le stesse e stanno insieme apposta, perche' scritte
   due volte avevano gia' preso strade diverse — le Impostazioni erano 5px
   piu' alte, con il testo attaccato in alto (`inline-block` non centra in
   verticale un `min-height`).

   La scheda attiva si riconosce anche senza colore (WCAG 1.4.1): lo
   dicono `aria-current`/`aria-selected` a chi ascolta, e a vista il fondo
   pieno contro il contorno. Senza JavaScript i pannelli delle
   Impostazioni restano tutti visibili e le schede sono ancore. */
.tab-gruppi__lista,
.schede__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La distanza dal contenuto la da' il contenitore esterno: in
   `.tab-gruppi` la lista e' dentro un `<nav>`, e il margine di base delle
   `<ul>` (24px) si sommava al suo. Le Impostazioni non hanno contenitore:
   la lista e' lei stessa il blocco. */
.tab-gruppi,
.schede__lista {
	margin-bottom: 1rem;
}

.tab-gruppi__voce,
.schede__voce {
	align-items: center;
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 999px;
	color: var(--color-text, #2c343f);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	max-width: 100%;
	min-height: 44px;
	overflow-wrap: anywhere;
	padding: 0.25rem 1rem;
	text-decoration: none;
}

.tab-gruppi__voce[aria-current="page"],
.schede__voce[aria-selected="true"] {
	background-color: #3877c8;
	border-color: #3877c8;
	color: #fff;
}

.schede__pannello[hidden] {
	display: none;
}

/* Sotto-schede (es. dentro a Email): piu' leggere delle principali, cosi' si
   leggono come un secondo livello. La scheda attiva resta riconoscibile senza
   colore: sottolineatura spessa e grassetto, oltre a `aria-selected`. */
.schede--secondarie > .schede__lista {
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	gap: 1rem;
	padding-bottom: 0;
}

.schede--secondarie .schede__voce {
	background-color: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	color: var(--color-text, #2c343f);
	padding-inline: 0.25rem;
}

.schede--secondarie .schede__voce[aria-selected="true"] {
	background-color: transparent;
	border-bottom-color: #3877c8;
	color: var(--color-text, #2c343f);
	font-weight: 700;
}

/* Paginazione degli elenchi. */
.paginazione {
	margin-top: 1.5rem;
}

.paginazione ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.paginazione a,
.paginazione span {
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 3px;
	display: inline-block;
	min-width: 44px;
	padding: 0.5rem 0.75rem;
	text-align: center;
	text-decoration: none;
}

.paginazione .current {
	background-color: #3877c8;
	border-color: #3877c8;
	color: #fff;
}

/* Azioni sulla scheda di un operatore: ogni azione è un modulo a sé,
   separato dal precedente da una linea. */
.azioni__form + .azioni__form {
	border-top: 1px solid var(--color-border, #e1e3e4);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.azioni__nota {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.875rem;
	margin: 0 0 0.75rem;
}

/* L'avviso "mancano delle voci" non e' una nota di servizio: sta
   accanto al pulsante che chiude l'esame di una domanda, e deve
   staccarsi dal grigio del testo attorno. Il colore non e' l'unico
   segnale — la frase comincia con "Attenzione:". */
.azioni__nota--attenzione {
	background-color: #fef6ec;
	border-left: 3px solid #a8680d;
	color: var(--color-text, #2c343f);
	padding: 0.5rem 0.75rem;
}

/* Numero grande della dashboard amministratore. */
.conteggio {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.conteggio__nota {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.875rem;
	margin: 0.25rem 0 1rem;
}

/* Colonna della selezione
   Stretta quanto la casella: e' un comando, non un dato, e allargarla
   sposterebbe a destra la colonna che si legge davvero. */
.tabella__scelta {
	width: 1%;
	white-space: nowrap;
}

/* La casella deve restare un bersaglio raggiungibile col dito: 20px di
   controllo dentro una cella con il padding della tabella non bastano,
   e questa e' l'unica colonna che si tocca. */
.tabella__casella {
	cursor: pointer;
	height: 20px;
	width: 20px;
}

/* Catalogo delle categorie (Ufficio Tecnico): classi SOA di A1
--------------------------------------------------------------- */

/* Usata dalla singola casella di conferma della rinomina del codice
   (template-parts/albo/categorie-elenco.php): le classi SOA di una voce
   sono invece un <select multiple>, non un gruppo di caselle. */
.checkbox-group__item {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.8125rem;
	gap: 0.5rem;
	min-height: 44px;
}

/* La conferma di ridenominazione di un codice gia' scelto da qualcuno:
   compare solo su quella riga, quindi deve farsi notare senza diventare
   un banner a piena larghezza dentro una cella di tabella. */
.tabella__nota {
	color: #a8680d;
	font-size: 0.8125rem;
	margin-top: 0.5rem;
	max-width: 22rem;
}

.tabella__nota .checkbox-group__item {
	align-items: flex-start;
}

/* Vista di riordino
--------------------------------------------------------------- */
.riordino {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.riordino__voce {
	align-items: center;
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e1e3e4);
	border-radius: 6px;
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
}

/* Il trascinamento e' un'aggiunta per chi ha il mouse: la maniglia lo
   segnala col cursore, ma non e' lei a rendere la voce trascinabile
   (e' l'attributo draggable sull'elemento intero). */
.riordino__maniglia {
	color: var(--color-text-muted, #5f6873);
	cursor: grab;
	display: flex;
	flex: 0 0 auto;
}

.riordino__testo {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.riordino__codice {
	font-weight: 600;
	margin-right: 0.5rem;
}

.riordino__azioni {
	display: flex;
	flex: 0 0 auto;
	gap: 0.25rem;
}

/* Stati applicati da js/albo-categorie-riordino.js durante il
   trascinamento: la voce che si sta spostando si smorza, quella su cui
   sta per atterrare si segnala con un bordo. Senza JavaScript queste
   classi non compaiono mai. */
.riordino__voce--trascinata {
	opacity: 0.5;
}

.riordino__voce--sopra {
	border-color: #3877c8;
	border-style: dashed;
}

/* Comunicazioni
--------------------------------------------- */

/* Elenco delle comunicazioni: lo usano l'archivio dell'ufficio albo e
   la pagina dell'operatore, che mostrano le stesse cose con due
   contorni diversi. E' una lista ordinata vera (<ol>) perche' l'ordine
   cronologico e' informazione, non impaginazione. */
.comunicazioni {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comunicazione {
	border-top: 1px solid var(--color-border, #e1e3e4);
	padding: 1.5rem 0;
}

.comunicazione:first-child {
	border-top: 0;
	padding-top: 0;
}

.comunicazione:last-child {
	padding-bottom: 0;
}

/* Non letta: la barra a sinistra accompagna la pastiglia "nuova", non
   la sostituisce. Il colore da solo non deve mai essere l'unica
   informazione (WCAG 1.4.1). */
.comunicazione--nuova {
	border-left: 3px solid #a8680d;
	padding-left: 1rem;
}

.comunicazione__titolo {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.125rem;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
}

.comunicazione__meta {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
	margin: 0 0 0.5rem;
}

.comunicazione__testo {
	margin-bottom: 0.75rem;
}

.comunicazione__testo p:last-child {
	margin-bottom: 0;
}

.comunicazione__esito {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.comunicazione__nota {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
}

/* Invio ancora in corso: la coda si smaltisce a lotti, quindi e' uno
   stato di attesa e non un esito. */
.badge--attesa {
	background-color: #eef7fd;
	color: #176aa3;
}

/* Modulo di invio
--------------------------------------------- */

/* Il fieldset serve al significato, non alla grafica: il bordo di
   serie del browser lo trasformerebbe in un riquadro dentro la card. */
.fieldset {
	border: 0;
	margin: 0 0 1.5rem;
	min-width: 0; /* senza questo un fieldset non si stringe sotto il contenuto */
	padding: 0;
}

/* Una `legend` non si comporta come un blocco qualunque: non si
   restringe sotto la propria larghezza di contenuto e ignora le regole
   di larghezza del genitore. Con il testo al 200% "Data
   dell'azzeramento" sporgeva di cinque pixel e faceva scorrere la
   pagina. Il tetto piu' l'a capo dentro la parola risolvono senza
   toccare il resto. */
.fieldset__legend {
	color: var(--color-text, #2c343f);
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0;
}

/* In errore il bordo torna, ma su un lato solo: e' la stessa riga
   verticale che segna gli altri campi sbagliati, e vale come segnale
   in piu' rispetto al testo dell'errore (WCAG 1.4.1). */
.fieldset--invalid {
	border-left: 2px solid #c94e3d;
	padding-left: 0.75rem;
}

/* Una scelta con la sua spiegazione sotto: la casella e l'etichetta
   stanno in riga, la nota va a capo allineata al testo. */
.scelta {
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: 0.75rem;
	margin-bottom: 0.75rem;
}

/* La colonna `1fr` non basta a garantire che il contenuto ci stia: una
   traccia di griglia non scende sotto la larghezza minima di cio' che
   contiene, e quella e' la parola piu' lunga dell'etichetta. Con il
   testo al 200% dentro a una finestra da 320px, "Comunicazioni" da sola
   misura piu' della colonna: la riga si allargava e con lei la pagina.
   `min-width: 0` toglie quel pavimento, `overflow-wrap` permette alla
   parola di spezzarsi quando anche cosi' non ci sta. */
.scelta > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Il margine superiore allinea la casella alla prima riga
   dell'etichetta, che ha il suo padding sopra. */
.scelta__input {
	align-self: start;
	margin: 0.75rem 0 0;
}

.scelta__label {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0;
}

.scelta__testo {
	font-weight: 600;
}

/* Quante persone ci sono nel gruppo. E' il dato che nel vecchio
   portale mancava: li' si confermava un invio senza sapere verso
   quante persone stesse partendo. */
.scelta__conteggio {
	background-color: #ebf2fa;
	border-radius: 999px;
	color: #3169b1;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	white-space: nowrap;
}

.scelta__nota {
	grid-column: 2;
	margin: 0 0 0.5rem;
}

.field__input--testo {
	min-height: 10rem;
}

/* Selettore dei destinatari (SlimSelect)
--------------------------------------------- */

/* Il file vendorizzato in css/slim-select.css non si tocca: la
   libreria si adatta interamente tramite le sue custom property
   `--ss-*`, definite su :root nel file stesso. Qui le si ridefinisce
   con i token del tema — appoggiandosi alle custom property di
   base/_variables.scss/utilities/_tema.scss, non a valori letterali,
   cosi' il selettore segue da solo il chiaro/scuro senza una seconda
   regola qui sotto. `--ss-primary-color` e `--ss-focus-color` restano
   letterali: sono colori semantici (brand/focus), non di superficie.

   Il selettore e' `html:root`, non il semplice `:root` che usa anche
   il file vendorizzato: stessa specificita' vorrebbe dire "vince chi
   viene dopo nell'HTML", e style.css (dove questa regola finisce
   compilata) e' registrato prima di css/slim-select.css in
   functions.php, quindi verrebbe stampato per primo e perderebbe
   contro i valori di serie della libreria. Un elemento in piu' nel
   selettore vince a prescindere dall'ordine di stampa. */
html:root {
	--ss-primary-color: #3877c8;
	--ss-bg-color: var(--color-surface);
	--ss-font-color: var(--color-text);
	--ss-placeholder-color: var(--color-text-muted);
	--ss-border-color: var(--color-border-strong);
	--ss-focus-color: var(--color-focus);
	--ss-border-radius: 3px;

	/* Stesso minimo di ogni altro controllo del portale (WCAG 2.5.8),
     non i 40px di serie della libreria. */
	--ss-main-height: 44px;
	--ss-search-height: 44px;
	--ss-option-height: 44px;
}

/* Pastiglia del non letto in sidebar
--------------------------------------------- */

/* `position: relative` non e' decorativo: dentro c'e' uno span
   .screen-reader-text in posizione assoluta, e senza un antenato
   posizionato si ancorerebbe al blocco contenitore iniziale invece che
   qui — uscendo da qualunque ritaglio e allargando la pagina. E' gia'
   successo due volte in questo progetto, sul Sito e sulle tabelle
   dell'ufficio albo. */
.sidebar__badge {
	background-color: #f3b760;
	border-radius: 999px;
	color: #2c343f; /* 7.04:1 sull'ambra, e l'ambra sta 7.04:1 sul fondo scuro */
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
	min-width: 1.5rem;
	padding: 0.25rem 0.5rem;
	position: relative;
	text-align: center;
}

/* Pulsante sotto un banner della dashboard */
.dashboard-azione {
	margin: calc(1rem * -1) 0 1.5rem;
}

/* Home amministratore: ultime comunicazioni e ultime richieste
   affiancate, con le righe allineate fra le due colonne.

   Le due card sono indipendenti, quindi di loro ogni voce e' alta quanto
   il proprio contenuto e le righe si sfasano. Con `subgrid` le voci delle
   due liste diventano righe della stessa griglia esterna: ogni riga
   prende l'altezza della piu' alta delle due, e i pulsanti "Vai a tutte"
   finiscono alla stessa altezza anche quando una colonna ha meno voci.
   Righe: intestazione, 5 voci (lo stesso numero di
   page-templates/amministratore.php), pulsante. Solo da tablet in su:
   sotto, le card stanno in colonna e non c'e' niente da allineare. Senza
   subgrid il blocco @supports non si applica e resta l'impaginazione di
   prima. */
@supports (grid-template-rows: subgrid) {

	@media (min-width: 768px) {

		.grid--anteprime {
			grid-template-rows: auto repeat(5, auto) auto;
			row-gap: 0;
		}

		.grid--anteprime > .card {
			display: grid;
			grid-row: span 7;
			grid-template-rows: subgrid;
		}

		.grid--anteprime > .card > .card__body {
			display: grid;
			grid-row: span 6;
			grid-template-rows: subgrid;
		}

		.grid--anteprime .comunicazioni {
			display: grid;
			grid-row: span 5;
			grid-template-rows: subgrid;
		}

		/* Il pulsante sta in fondo alla sua riga, cosi' i due "Vai a
       tutte" si allineano anche se una colonna e' piu' corta. */
		.grid--anteprime > .card > .card__body > p:last-child {
			align-self: end;
			margin-bottom: 0;
		}

		/* Lo stato vuoto e' un paragrafo solo: occupa tutto il corpo e sta in
       alto. E' anche il `p:last-child` del corpo, quindi senza
       `align-self: start` la regola del pulsante qui sopra lo spingerebbe
       in fondo alla card. */
		.grid--anteprime > .card > .card__body > p.card__empty {
			align-self: start;
			grid-row: 1/-1;
		}
	}
}

/* Richieste: i messaggi di una conversazione
--------------------------------------------- */

/* Chi ha scritto cosa si legge in quattro modi, non nel solo colore
   (WCAG 1.4.1): la riga "Tu" / nome in testa, il fondo, il filetto a
   sinistra e il rientro dal lato opposto a chi parla. Il fondo e' per
   chi scorre in fretta; gli altri tre restano a chi i colori non li
   distingue o li ha sostituiti (tema scuro, contrasto forzato). */
.messaggi {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.messaggi .messaggio {
	border: 1px solid var(--color-border, #e1e3e4);
	border-left-width: 4px;
	border-radius: 6px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.75rem 1rem;
}

/* Battono le regole di .comunicazione (bordo solo in alto, niente
   padding sul primo e sull'ultimo): qui ogni messaggio e' un riquadro. */
.messaggi .messaggio:first-child,
.messaggi .messaggio:last-child {
	padding: 0.75rem 1rem;
}

.messaggio--mio {
	background-color: var(--color-messaggio-mio, #e1ecf9);
	border-left-color: #3877c8;
	margin-left: min(8%, 3rem);
}

.messaggio--altrui {
	background-color: var(--color-background, #f5f5f5);
	border-left-color: var(--color-border-strong, #c9cdd2);
	margin-right: min(8%, 3rem);
}

/* Non letto: il filetto diventa ambra, accanto alla pastiglia "nuovo"
   che dice la stessa cosa a parole. */
.messaggi .messaggio.comunicazione--nuova {
	border-left-color: #a8680d;
	border-left-width: 4px;
	padding-left: 1rem;
}

.messaggio .comunicazione__meta {
	margin-bottom: 0.25rem;
}

/* Chip
--------------------------------------------- */

/* Pastiglia cliccabile. La usano i due elenchi di collegamenti brevi
   che stanno in cima alle pagine — l'indice delle sezioni e l'elenco di
   cosa manca — dove le voci sono tante, corte e tutte della stessa
   natura: il riquadro le fa leggere come una serie di bersagli invece
   che come un blocco di testo sottolineato.

   La sottolineatura sparisce e non e' una perdita: sono elenchi fatti
   **solo** di collegamenti, quindi non c'e' un testo circostante da cui
   distinguerli, e il riquadro e' comunque una differenza che non
   dipende dal colore. */

/* Il raggio e' quello delle card, non quello a pastiglia. Con
   `$radius-pill` un'etichetta lunga — "Anagrafica azienda:
   Dichiarazione presa visione MOG" va a capo tre volte — si ritrova
   agli angoli una curva alta quanto meta' del riquadro, che entra
   dentro al testo. Il raggio tondo funziona su una riga sola, e qui
   una riga sola non e' garantita. */
.chip {
	background-color: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 6px;
	display: inline-block;
	line-height: 1.25;

	/* Non piu' larga di cio' che la contiene, e con le parole che
     possono spezzarsi. Le due cose insieme, perche' da sole non
     bastano: a 320px con il testo al 200% la parola "Azzeramento"
     misura da sola piu' della colonna, e senza `overflow-wrap` il
     `max-width` non ha modo di rispettarla — la pastiglia sfondava la
     pagina di sedici pixel. Spezzare una parola e' brutto; una pagina
     che scorre in orizzontale e' inutilizzabile. */
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
}

.chip:hover,
.chip:focus {
	background-color: #ebf2fa;
	border-color: #3877c8;
}

/* La sezione in cui ci si trova, marcata dallo script che segue lo
   scorrimento. Il pieno e il grassetto sono due segni, non uno solo:
   il colore da solo non basta (WCAG 1.4.1), e nel markup c'e' anche
   `aria-current`. */
.chip.is-corrente {
	background-color: #3877c8;
	border-color: #3877c8;
	color: #fff;
	font-weight: 600;
}

/* Indice delle sezioni
--------------------------------------------- */

/* Compare due volte sulla stessa pagina: qui, in cima al contenuto, e
   nella colonna di sinistra (vedi layout/_sidebar). Sono due
   navigazioni distinte, con due nomi distinti — non e' la stessa cosa
   stampata due volte per pigrizia: questo si legge all'inizio, quello
   resta fermo mentre si scorre. */
.indice {
	background-color: var(--color-background, #f5f5f5);
	border: 1px solid var(--color-border, #e1e3e4);
	border-radius: 6px;
	margin-bottom: 1.5rem;
	padding: 1rem;
}

.indice__titolo {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

/* In fila, che vanno a capo, non incolonnate. Le voci sono pastiglie:
   incolonnarle voleva dire lasciare fra una e l'altra il vuoto della
   colonna che avanzava, e una pastiglia larga 100px dentro una colonna
   da 208 sembra messa li' per sbaglio. Cosi' stanno vicine e la riga si
   riempie. Le etichette lunghe ("FORNITURA DI ATTREZZATURE, PRODOTTI E
   MATERIALI") occupano semplicemente piu' spazio nella fila: dentro la
   pastiglia il testo puo' andare a capo, quindi non spinge fuori
   niente. */
.indice__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* `min-width: 0` non e' una formalita': un elemento flex non scende
   sotto la propria larghezza minima di contenuto, e quella e' la parola
   piu' lunga dell'etichetta. Con il testo ingrandito al 200% una parola
   sola supera la colonna, la voce si rifiuta di restringersi e allarga
   l'intera pagina. */
.indice__lista > li {
	min-width: 0;
}

/* Bersagli
--------------------------------------------- */

/* La barra in alto e' `position: sticky`: senza questo margine, saltare
   a una sezione ne infilerebbe l'intestazione sotto la barra, e si
   arriverebbe a una card apparentemente senza titolo. */
[id^="sez-"],
#elimina {
	scroll-margin-top: calc(60px + 1rem);
}

/* Anche i campi sono bersagli: il riquadro "in questa pagina manca..."
   collega ogni voce al proprio campo. Lo stacco qui e' piu' generoso
   perche' il fuoco va sul controllo, mentre la sua etichetta sta
   sopra: con il solo stacco della barra si arriverebbe su una casella
   di cui non si legge il nome. */
.field__input {
	scroll-margin-top: calc(60px + 4rem);
}

/* Zona pericolosa
--------------------------------------------- */

/* Il riquadro in fondo alla scheda dell'operatore, e i moduli di
   conferma delle azioni che non si annullano. Non e' uno stile a se':
   e' una card `--danger` con dentro due moduli che devono restare
   distinti a colpo d'occhio, perche' hanno conseguenze diverse.

   Il riquadro riceve il focus quando ci si arriva dal collegamento
   "Elimina" di un elenco (`#elimina` + `tabindex="-1"`): senza, chi
   naviga da tastiera atterrerebbe in cima alla scheda e dovrebbe
   ripercorrerla tutta. L'anello di focus si toglie perche' e' una
   destinazione, non un comando — ma solo qui, e solo su questo
   contenitore. */
.card--danger [tabindex="-1"]:focus,
.card--danger:focus {
	outline: none;
}

.pericolo__intro {
	margin-top: 0;
}

.pericolo__elenco {
	background-color: #faedeb;
	border-radius: 3px;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem 0.75rem 2rem;
}

.pericolo__elenco li + li {
	margin-top: 0.5rem;
}

.pericolo__titolo {
	font-size: 1.125rem;
	margin: 0 0 0.5rem;
}

.pericolo__resta {
	color: var(--color-text-muted, #5f6873);
	margin: 0 0 1rem;
}

.pericolo__form .consent {
	margin-bottom: 1rem;
}

.pericolo__separatore {
	border: 0;
	border-top: 1px solid var(--color-border, #e1e3e4);
	margin: 1.5rem 0;
}

/* Impostazioni
--------------------------------------------- */

/* La schermata di configurazione dell'ufficio albo. Le card sono quelle
   di sempre: qui c'e' solo cio' che serve ai campi che non esistevano
   altrove — una coppia giorno/mese e un pulsante di salvataggio che
   deve restare visibile in fondo a una pagina lunga. */
.impostazioni__intro {
	margin-top: 0;
}

.impostazioni__data {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Il giorno e' un numero di due cifre e il mese un elenco chiuso:
   lasciarli larghi quanto la colonna direbbe che ci si aspetta molto
   piu' testo di quello che ci sta. */
.impostazioni__data .field {
	flex: 0 1 12rem;
	min-width: 0;
}

.field__input--corto {
	max-width: 8rem;
}

.impostazioni__prossima {
	background-color: #eef7fd;
	border-radius: 3px;
	margin-bottom: 0;
	padding: 0.75rem 1rem;
}

/* Il pulsante di salvataggio chiude un modulo alto tre schermate: se
   fosse attaccato all'ultima card sembrerebbe di quella card e non di
   tutto quanto. */
.impostazioni__salva {
	margin: 1.5rem 0;
}

/* Nota sotto un blocco di azioni: piu' piccola dell'intro, perche' e'
   una precisazione e non l'istruzione principale. */
.impostazioni__nota {
	margin-bottom: 0;
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
}

/* Piu' pulsanti di scaricamento affiancati.
   `flex-wrap` non e' decorativo: ogni pulsante porta un'etichetta lunga
   ("Scarica tutti gli allegati (zip)"), e a 320px o con il testo al 200%
   tre pulsanti in fila uscirebbero dal riquadro. Ogni modulo e' un form
   a se' — sono azioni diverse con nonce diversi — quindi devono stare
   sulla stessa riga senza che il markup li annidi. */
.azioni-elenco {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.azioni-elenco form {
	margin: 0;
}

/* Quante righe sono spuntate. Lo aggiorna js/albo-selezione.js in una
   regione `aria-live`, quindi il cambio viene annunciato: chi non vede
   le caselle deve poter sapere su quante domande sta per agire. */
.azioni-scelta__conteggio {
	font-weight: 600;
	margin: 0 0 0.75rem;
}

/* L'estensione a tutto l'elenco sta fra le caselle della tabella e i
   pulsanti, dove la si legge prima di premere: e' l'unico comando che
   cambia *su cosa* si sta per agire. */
.azioni-scelta__estendi {
	margin-bottom: 0.75rem;
}

/* Modelli da compilare: due colonne da tablet in su, una sola sotto. Il
   `minmax(0, 1fr)` impedisce a un nome di file lungo di allargare la
   colonna. */
.impostazioni__moduli {
	display: grid;
	gap: 0 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {

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

/* Elenco dei destinatari delle email (js/email-destinatari.js).
   Ogni riga porta un indirizzo e il suo "Rimuovi": `min-width: 0` e
   `overflow-wrap` perche' un indirizzo lungo non deve sfondare la
   riga a 320px o con il testo al 200%. */
.destinatari__elenco {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.destinatari__elenco li {
	align-items: center;
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.5rem 0;
}

.destinatari__indirizzo {
	min-width: 0;
	overflow-wrap: anywhere;
}

.destinatari__aggiungi {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.destinatari__aggiungi input.field__input {
	flex: 1 1 14rem;
	min-width: 0;
}

/* Media
--------------------------------------------- */

/* L'unico posto del portale in cui passa the_content() sono i documenti
   di contenuto (page.php: condizioni d'uso, regolamento). Le regole
   stavano invece su .entry-content, .page-content e .comment-content —
   i contenitori di Underscores, spariti insieme ai suoi template — e
   quindi non si applicavano piu' a niente: un'immagine con didascalia
   incollata nel regolamento sarebbe uscita senza stile. */

/* Il contenuto dei documenti legali lo scrive il cliente dall'editor:
   qui possono comparire parole lunghe quanto si vuole — un indirizzo,
   un riferimento normativo, una parola composta. A 320px con il testo
   al 200% una di queste allargava la pagina. Non e' una questione di
   stile: e' il contenuto che il tema non controlla, e va reso capace di
   andare a capo. */
.documento {
	overflow-wrap: anywhere;
}

.documento__voce--1 {
	margin-left: 1rem;
}

.documento__voce--2 {
	margin-left: 1.5rem;
}

.documento__nota {
	font-size: 0.8125rem;
}

.documento img {
	height: auto;
	max-width: 100%;
}

.documento .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

.wp-caption-text,
.gallery-caption {
	color: var(--color-text-muted, #5f6873);
	font-size: 0.8125rem;
}

/* L'appendice del Regolamento (inc/categorie-catalogo.php): codice e
   descrizione su una riga, voci staccate quanto basta a distinguerle. */
.documento__elenco li + li {
	margin-top: 0.5rem;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Focus visibile
--------------------------------------------- */

/* L'anello di focus deve staccare almeno 3:1 dal colore adiacente.
   Il colore vive in una custom property perché nei contesti scuri
   (sidebar) va invertito: il valore chiaro e quello scuro sono
   entrambi verificati in base/_variables.scss. */
:root {
	--focus-ring-color: var(--color-focus, #0b4fa8);
}

:focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 2px;
}

/* Nessuna regola rimuove l'outline: se un componente ha bisogno di un
   focus diverso lo ridefinisce, non lo azzera. */

/* Rispetta la preferenza di sistema per il movimento ridotto. */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Le tre scelte esplicite del pannello di accessibilità
   (template-parts/components/accessibility-toolbar.php) accanto a "Come
   il sistema" (che non aggiunge nessuna classe, e lascia decidere solo
   la media query sopra). "Ridotte" rispecchia esattamente il blocco
   sopra: non porta i ritardi di animazione/transizione, perché qui non
   ce n'è uno strutturale da coprire come nel progetto gemello Sito. */
html.a11y-movimento-ridotto *,
html.a11y-movimento-ridotto *::before,
html.a11y-movimento-ridotto *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	transition-duration: 0.01ms !important;
}

/* "Disattivate" (2026-09-17): rimozione vera, non quasi-istantanea. A
   differenza di "Ridotte" non c'è bisogno di azzerare anche i ritardi
   di animazione/transizione: `none` rimuove l'animazione/transizione
   per intero, quindi non resta nessun ritardo da coprire. */
html.a11y-movimento-disattivo *,
html.a11y-movimento-disattivo *::before,
html.a11y-movimento-disattivo *::after {
	animation: none !important;
	scroll-behavior: auto !important;
	transition: none !important;
}

/* "Complete" è il caso inverso: chi ha *prefers-reduced-motion: reduce*
   a livello di sistema ma vuole comunque vedere le animazioni del
   portale. Fra due regole `!important` sullo stesso elemento e
   proprietà vince l'ordine nel foglio, non la specificità del
   selettore: scritte dopo la media query, queste annullano il blocco
   sopra — `revert` riporta la proprietà al valore che avrebbe senza
   questa dichiarazione. */
html.a11y-movimento-pieno *,
html.a11y-movimento-pieno *::before,
html.a11y-movimento-pieno *::after {
	animation-duration: revert !important;
	animation-iteration-count: revert !important;
	scroll-behavior: revert !important;
	transition-duration: revert !important;
}

/* Dimensione testo (pannello di accessibilità)
--------------------------------------------- */

/* Una sola dichiarazione invece di classi discrete per ogni passo: la
   base tipografica del tema è tutta in rem (base/_variables.scss), che
   segue il font-size del root, quindi scala tutto il testo insieme. */
html {
	font-size: calc(100% * var(--a11y-scala-testo, 1));
}

/* Attenuazione colori (pannello di accessibilità)
--------------------------------------------- */

/* Il JS del pannello scrive in `--a11y-filtro` la lista di funzioni
   `filter` attive (oggi solo `saturate`): una custom property e non una
   classe, per poter comporre piu' filtri senza litigarsi la proprieta'. */
html {
	filter: var(--a11y-filtro, none);
}

/* Nascondi immagini (pannello di accessibilità)
--------------------------------------------- */

/* `display: none` come nel Sito (allineato il 2026-10-01): con
   `visibility: hidden` restava lo spazio riservato. Le icone
   dell'interfaccia (stampate da
   albo_fornitori_interporto_pordenone_icon()) restano visibili: non
   sono contenuto, sono controlli — nessuna passa per <img>.

   `:not(a img)` esclude le immagini dentro un link — il logo del
   portale (`.sidebar__brand`) è un'ancora con la sola immagine come
   contenuto: nasconderla toglie il link dall'albero di accessibilità
   (`display: none` esclude esattamente come `visibility: hidden`), e senza
   testo alternativo il link resta senza nome. Trovato con axe-core
   (regola "link-name"), non a occhio. */
html.a11y-nascondi-immagini img:not(a img),
html.a11y-nascondi-immagini video:not(a video),
html.a11y-nascondi-immagini picture:not(a picture) {
	display: none;
}

/* Allinea il testo a sinistra (pannello di accessibilità)
--------------------------------------------- */
html.a11y-allinea-sinistra p,
html.a11y-allinea-sinistra li,
html.a11y-allinea-sinistra blockquote,
html.a11y-allinea-sinistra h1,
html.a11y-allinea-sinistra h2,
html.a11y-allinea-sinistra h3,
html.a11y-allinea-sinistra h4,
html.a11y-allinea-sinistra h5,
html.a11y-allinea-sinistra h6 {
	text-align: left !important;
}

/* Spaziatura testo e interlinea (pannello di accessibilità)
--------------------------------------------- */

/* Due controlli indipendenti nel pannello, due custom property
   indipendenti qui. "Standard" non scrive nulla; gli altri tre passi di
   ciascuno sono livelli crescenti, non una scala che scende sotto lo
   standard. Il passo "Media" della spaziatura coincide coi minimi del
   criterio WCAG 1.4.12; quello dell'interlinea con l'1.5 che lo stesso
   criterio chiede. */
html {
	letter-spacing: var(--a11y-spaziatura-lettere, normal);
	word-spacing: var(--a11y-spaziatura-parole, normal);
}

html.a11y-interlinea p,
html.a11y-interlinea li,
html.a11y-interlinea blockquote {
	line-height: var(--a11y-interlinea, inherit);
}

/* Link "salta al contenuto": visibile solo quando riceve il focus,
   prima voce raggiungibile da tastiera in ogni pagina. */
.skip-link:focus {
	background-color: var(--color-surface, #fff);
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(44, 52, 63, 0.12);
	color: var(--color-focus, #0b4fa8);
	font-weight: 600;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	top: 0.5rem;
	z-index: 400;
}

/*--------------------------------------------------------------
# Utilities — Tema (chiaro/scuro), pannello di accessibilità
--------------------------------------------------------------*/

/* I sei token neutri di base/_variables.scss (superficie, fondo pagina,
   bordi, testo) sono custom property: qui vivono i due soli posti che
   li ridefiniscono. La sidebar resta letterale (già scura in entrambi i
   temi) e i colori semantici (primary/success/danger/warning/info)
   restano letterali — sono brand, non superficie.

   "Come il sistema" basta con la sola media query. La scelta esplicita
   di "Chiaro"/"Scuro" dal pannello aggiunge `data-a11y-tema` su
   `<html>`, che vince sempre per specificità grazie a
   `:not([data-a11y-tema="light"])`.

   `--color-border` nel tema scuro non è la stessa proporzione del
   chiaro: agganciato allo stesso scarto minimo di `#e1e3e4` su
   `#f5f5f5` (un delta di ~20 su 245, quasi invisibile) il risultato era
   `#34383e` su un fondo `#1e2126` — 1.37:1, sotto qualunque soglia
   utile, e il difetto dietro "card/intestazione/tabella che si
   confondono con la pagina" trovato scansionando a vista `.card`,
   `.page-header` e `.topbar` in tutta l'area riservata (non solo la
   card di accesso, corretta a parte prima di questa). Un occhio
   distingue due grigi chiari vicini molto meglio di due grigi scuri
   altrettanto vicini — lo stesso principio già scritto per le velature
   del progetto gemello Sito. Qui il bordo scuro riusa direttamente il
   valore già verificato di `--color-border-strong` (1.90:1 su
   `--color-surface`, confermato a vista sulla card di accesso): i due
   token restano distinti nel chiaro, dove lo scarto funziona, e
   convergono nello scuro, dove serve la stessa intensità per essere
   entrambi visibili. */
:root {
	--color-surface: #fff;
	--color-background: #f5f5f5;
	--color-border: #e1e3e4;
	--color-border-strong: #c9cdd2;
	--color-text: #2c343f;
	--color-text-muted: #5f6873;
	--color-focus: #0b4fa8;
	--color-messaggio-mio: #e1ecf9;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-a11y-tema="light"]) {
		--color-surface: #1e2126;
		--color-background: #16181c;
		--color-border: #484d55;
		--color-border-strong: #484d55;
		--color-text: #eef0f2;
		--color-text-muted: #a7adb5;
		--color-focus: #a9d2ff;
		--color-messaggio-mio: #253852;
	}
}

:root[data-a11y-tema="dark"] {
	--color-surface: #1e2126;
	--color-background: #16181c;
	--color-border: #484d55;
	--color-border-strong: #484d55;
	--color-text: #eef0f2;
	--color-text-muted: #a7adb5;
	--color-focus: #a9d2ff;
	--color-messaggio-mio: #253852;
}

/* Logo delle schermate di autenticazione nel tema scuro
--------------------------------------------- */

/* `header-auth.php` stampa **due** `<img>` sovrapposti (non un SVG
   inlineato come in Sito: qui il logo e' un file esterno, il fill non
   si puo' selezionare da CSS) — la scritta scura di sempre
   (`logo-interporto.svg`) e la sua variante gia' pronta nel tema con
   la scritta bianca (`logo-interporto-bianco.svg`, gia' in uso nella
   sidebar, sempre scura). La stella multicolore e' identica nei due
   file: cambia solo il fill della scritta. Si sceglie quale mostrare
   con `display`, non scambiando il `src`: niente richiesta di rete in
   piu' al cambio di tema, e nessuno scatto visibile. */
.auth__logo--scuro {
	display: none;
}

html[data-a11y-tema="dark"] .auth__logo--chiaro {
	display: none;
}

html[data-a11y-tema="dark"] .auth__logo--scuro {
	display: block;
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .auth__logo--chiaro {
		display: none;
	}

	html:not([data-a11y-tema="light"]) .auth__logo--scuro {
		display: block;
	}
}

/* Contrasto elevato (pannello di accessibilità)
--------------------------------------------- */

/* Il testo di base ($color-text, 12.57:1 su bianco) è già molto scuro in
   entrambi i temi: nessuna correzione necessaria lì. Tutto il resto di
   questo blocco (2026-09-17) porta davvero al 7:1 AAA (WCAG 1.4.6) le
   scritte e gli elementi grafici che oggi il contrasto elevato non
   toccava — prima si limitava ai soli bordi/focus ring. */
html.a11y-contrasto-alto :focus-visible {
	outline-width: 4px;
}

/* Link sempre sottolineati, come nel Sito: il colore da solo non basta a
   distinguerli dal testo. I pulsanti (.btn) sono ancore ma si riconoscono
   dalla forma, non dalla sottolineatura. */
html.a11y-contrasto-alto a:not(.btn) {
	text-decoration: underline;
}

/* Bordi: da un elenco fisso di selettori a un override di proprietà.
   `--color-border`/`--color-border-strong` sono già var()-backed e
   consumate da .card, input/select/textarea, .switch__input,
   .btn--secondary, .chip, le celle di tabella, il separatore di
   .avanzamento e altri — sovrascrivere la proprietà estende la copertura
   a tutti loro insieme, senza elencarli uno per uno. Non è un obbligo
   WCAG (nessuna soglia AAA per la grafica non testuale, solo il 3:1 AA di
   1.4.11), ma risponde a "anche le grafiche" in modo coerente e con meno
   codice del vecchio elenco. */
html.a11y-contrasto-alto {
	--color-border: var(--color-text);
	--color-border-strong: var(--color-text);
}

/* .badge--bozza è l'unico punto del tema che usa $color-border come
   *sfondo*, non come bordo (sass/components/_tabella.scss) — con l'alias
   sopra il suo sfondo diventerebbe uguale al testo ($color-text sopra),
   cioè invisibile (0:1). Trovato caricando davvero /amministratore/riepilogo/
   con axe-core mirato solo alla pagina, non nel giro di scansione
   iniziale: il piano l'aveva segnato "già 12.57:1, non serve toccarlo" —
   vero per lo sfondo originale, falso una volta alterato da questa stessa
   regola. Si ripristina il valore letterale non alterato di
   --color-border per i due temi, la stessa tecnica delle eccezioni sopra. */
html.a11y-contrasto-alto .badge--bozza {
	background-color: #e1e3e4;
}

@media (prefers-color-scheme: dark) {

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .badge--bozza {
		background-color: #484d55;
	}
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] .badge--bozza {
	background-color: #484d55;
}

/* Testo muto: alias al testo pieno (già ≥12.57:1 in entrambi i temi),
   TRANNE nei due usi che WCAG esenta come testo incidentale — un
   controllo disabilitato o un segnaposto scuriti fino a sembrare
   attivi/compilati sarebbero un difetto, non un miglioramento. I due
   ripristini sotto riportano semplicemente il valore originale, non
   alterato, di --color-text-muted per quei soli casi — stesso schema a
   tre blocchi (chiaro di default, scuro via media query, scuro esplicito)
   già in uso in questo file per gli altri token. */
html.a11y-contrasto-alto {
	--color-text-muted: var(--color-text);
}

html.a11y-contrasto-alto .btn:disabled,
html.a11y-contrasto-alto .btn[aria-disabled="true"],
html.a11y-contrasto-alto ::placeholder {
	color: #5f6873;
}

/* .btn:disabled usa anche $color-border come sfondo
   (sass/components/_buttons.scss), secondo punto — oltre a
   .badge--bozza sopra — in cui l'alias di --color-border diventerebbe
   il testo: senza questo ripristino il pulsante disabilitato avrebbe
   un fondo quasi nero e un testo grigio medio, ~2.2:1, praticamente
   illeggibile anche per uno stato esente dal 7:1. Trovato calcolando
   il contrasto reale dopo l'alias, non nel giro di scansione
   automatica. */
html.a11y-contrasto-alto .btn:disabled,
html.a11y-contrasto-alto .btn[aria-disabled="true"] {
	background-color: #e1e3e4;
}

@media (prefers-color-scheme: dark) {

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .btn:disabled,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .btn[aria-disabled="true"],
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) ::placeholder {
		color: #a7adb5;
	}

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .btn:disabled,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .btn[aria-disabled="true"] {
		background-color: #484d55;
	}
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] .btn:disabled,
html.a11y-contrasto-alto[data-a11y-tema="dark"] .btn[aria-disabled="true"],
html.a11y-contrasto-alto[data-a11y-tema="dark"] ::placeholder {
	color: #a7adb5;
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] .btn:disabled,
html.a11y-contrasto-alto[data-a11y-tema="dark"] .btn[aria-disabled="true"] {
	background-color: #484d55;
}

/* Pulsanti, intestazioni di card e pastiglia di ruolo in barra: le
   triadi semantiche (primary/success/danger/warning/info) sono letterali
   di brand, non custom property, e restano identiche nei due temi (non
   sono superficie) — quindi bastano selettori diretti, un valore
   ciascuno, validi ovunque quella tinta "-strong" porti testo bianco
   sopra: .btn--*, .card--* .card__header, .topbar__ruolo--*. Scuriti dal
   tono "-strong" di partenza fino a superare 7:1 col testo bianco sopra
   (formula WCAG, luminanza relativa), dove oggi le triadi si fermano al
   solo 4.5:1 AA. Trovato con axe-core (color-contrast-enhanced), non solo
   sui pulsanti previsti inizialmente: anche le intestazioni delle card di
   stato e la pastiglia "Sei entrato come" della barra superiore usano le
   stesse tinte "-strong". */
html.a11y-contrasto-alto .btn--primary,
html.a11y-contrasto-alto .btn--primary:hover,
html.a11y-contrasto-alto .btn--primary:focus,
html.a11y-contrasto-alto .card--primary .card__header,
html.a11y-contrasto-alto .tab-gruppi__voce[aria-current="page"],
html.a11y-contrasto-alto .schede__voce[aria-selected="true"],
html.a11y-contrasto-alto .paginazione .current,
html.a11y-contrasto-alto .chip.is-corrente {
	background-color: #295894;
}

html.a11y-contrasto-alto .btn--success,
html.a11y-contrasto-alto .btn--success:hover,
html.a11y-contrasto-alto .btn--success:focus,
html.a11y-contrasto-alto .card--success .card__header {
	background-color: #21633d;
}

html.a11y-contrasto-alto .btn--danger,
html.a11y-contrasto-alto .btn--danger:hover,
html.a11y-contrasto-alto .btn--danger:focus,
html.a11y-contrasto-alto .card--danger .card__header {
	background-color: #953a2d;
}

html.a11y-contrasto-alto .btn--warning,
html.a11y-contrasto-alto .btn--warning:hover,
html.a11y-contrasto-alto .btn--warning:focus,
html.a11y-contrasto-alto .card--warning .card__header,
html.a11y-contrasto-alto .topbar__ruolo--admin {
	background-color: #7c4d0a;
}

/* $color-info-strong non ha una variante .btn--info nel tema, ma torna
   comunque come fondo con testo bianco sopra in due posti: l'intestazione
   della card informativa e la pastiglia di ruolo dell'operatore
   economico. */
html.a11y-contrasto-alto .card--info .card__header,
html.a11y-contrasto-alto .topbar__ruolo--operatore {
	background-color: #115c8c;
}

/* .topbar__ruolo--ufficio usa $color-sidebar (#2c343f) col testo bianco,
   già 12.57:1: nessuna correzione. */

/* Pastiglie di stato (.badge, .step-status): il testo "-hover" sopra il
   proprio fondo "-soft" va calcolato contro quel fondo tenue reale, non
   contro il bianco — la soglia si raggiunge con un tono più scuro dello
   stesso "-hover" di partenza. .badge--bozza usa già $color-text su
   $color-border, 12.57:1: non serve toccarlo. */
html.a11y-contrasto-alto .badge--inviata,
html.a11y-contrasto-alto .badge--attesa,
html.a11y-contrasto-alto .step-status--doing {
	color: #135786;
}

html.a11y-contrasto-alto .badge--completa,
html.a11y-contrasto-alto .step-status--done {
	color: #1e5d39;
}

html.a11y-contrasto-alto .badge--ferma,
html.a11y-contrasto-alto .badge--warning,
html.a11y-contrasto-alto .step-status--todo {
	color: #784a09;
}

html.a11y-contrasto-alto .step-status--error {
	color: #8a3226;
}

/* Variante scura della sidebar (.sidebar .step-status--*). Calibrati
   inizialmente solo contro il fondo a riposo (#2c343f, $color-sidebar) —
   ma la riga intera e' dentro `.sidebar__link`/`.sidebar__indice-link`,
   che al passaggio del mouse schiariscono lo sfondo a
   $color-sidebar-raised (#3c434d, sass/layout/_sidebar.scss): un tono di
   testo pensato per il fondo piu' scuro perde margine su quello piu'
   chiaro. Misurato dal vivo (hover reale, contrasto elevato acceso) il
   2026-09-18: tutti e quattro scendevano a 5.6-5.7:1 in hover, sotto
   7:1. Ricalcolati contro **#3c434d**, il piu' chiaro dei due fondi — chi
   regge li' regge a maggior ragione sul fondo a riposo piu' scuro, quindi
   un tono solo basta per i due stati. */
html.a11y-contrasto-alto .sidebar .step-status--todo {
	color: #f8d4a0;
}

html.a11y-contrasto-alto .sidebar .step-status--doing {
	color: #b9ddf5;
}

html.a11y-contrasto-alto .sidebar .step-status--done {
	color: #afe5c6;
}

html.a11y-contrasto-alto .sidebar .step-status--error {
	color: #f2d2cd;
}

/* Messaggi di errore reali (testo assistivo, non esente): .field__error
   usa lo stesso tono AAA di .btn--danger, calcolato sullo stesso
   $color-danger-strong di partenza. .form-errors__list a usa invece
   $color-danger-hover come punto di partenza (5.54:1 col bianco, ancora
   sotto AAA) — non è nell'elenco del piano ma è lo stesso tipo di testo
   assistivo su link di errore, quindi corretto con lo stesso criterio. */
html.a11y-contrasto-alto .field__error,
html.a11y-contrasto-alto .form-errors__list a,
html.a11y-contrasto-alto .field__required {
	color: #953a2d;
}

/* Testo della sidebar (.sidebar, sempre scura indipendentemente dal
   tema): $color-sidebar-text (5.56:1) e $color-sidebar-heading (4.65:1)
   sono letterali fissi come il fondo su cui stanno, non custom property —
   trovato con axe-core, non nell'elenco iniziale del piano. Un solo tono
   più chiaro copre voci di menu, indice di sezione ed etichette di
   gruppo: la gerarchia fra loro resta leggibile via maiuscolo/spaziatura
   (etichette di gruppo) e peso/barra laterale (voce corrente), non solo
   via colore. */
html.a11y-contrasto-alto .sidebar,
html.a11y-contrasto-alto .sidebar__link,
html.a11y-contrasto-alto .sidebar__indice-link,
html.a11y-contrasto-alto .sidebar__heading {
	color: #c3c7ce;
}

/* La voce corrente (.sidebar__link[aria-current="page"]) ha un fondo
   proprio più chiaro ($color-sidebar-raised, #3c434d) e testo bianco: più
   specifico della regola sopra per via dell'attributo, altrimenti
   erediterebbe #c3c7ce e scenderebbe a 5.88:1 su quel fondo (trovato con
   axe-core). Il bianco lì è già a 9.99:1, nessuna sostituzione di colore
   necessaria — solo evitare che la regola sopra lo sovrascriva. */
html.a11y-contrasto-alto .sidebar__link[aria-current="page"],
html.a11y-contrasto-alto .sidebar__indice-link.is-corrente {
	color: #fff;
}

/* .banner: testo e link sono letterali apposta (fondi tenui semantici
   fissi, non superficie che segue il tema) — un override globale su
   --color-text/--color-focus non li raggiunge. Il testo base (#2c343f) è
   già oltre 11:1, nessuna correzione. Il link (#0b4fa8) varia da 6.81:1 a
   7.49:1 secondo la variante: un unico tono più scuro copre tutte e
   quattro. Le icone -strong dentro .banner__icon sono grafica non
   testuale, già oltre 3:1 AA — nessun obbligo AAA, nessuna modifica. */
html.a11y-contrasto-alto .banner a {
	color: #0b4da5;
}

/* --color-focus (link di default e anello di focus) è già conforme:
   7.78:1/7.14:1 in chiaro, 7.99:1 in scuro — nessuna modifica qui. */

/* Pannello di accessibilità
--------------------------------------------- */

/* Bottone fisso, angolo in basso a destra. Fino al 2026-09-11 stava a un
   offset fisso dal bordo che sovrapponeva il contenuto ogni volta che lo
   schermo non aveva margine vuoto fuori dall'area di contenuto (sidebar +
   $content-max-width lasciano poco o nessun margine sulla maggior parte
   degli schermi), corretto allora con un `right` calcolato sugli stessi
   token che `.page-body`/`.page-header` usano per il proprio `padding`.
   Decisione del 2026-09-17: allineare il bottone a quello del progetto
   gemello Sito (sass/components/_accessibility-toolbar.scss), che sta a
   filo del bordo destro (`right: 0`) a ogni larghezza — accettando che la
   sovrapposizione risolta l'11/09 possa ripresentarsi su schermi larghi
   senza margine naturale a destra della colonna di contenuto. */
.a11y-toolbar__toggle {
	align-items: center;
	background-color: #3877c8;
	border: none;
	border-radius: 999px;
	bottom: 0.25rem;
	box-shadow: 0 2px 8px rgba(44, 52, 63, 0.12);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	position: fixed;
	right: 0;
	width: 44px;
	z-index: 500;
}

.a11y-toolbar__toggle:hover {
	background-color: #3169b1;
}

/* Stesso gradino di Sito allo stesso breakpoint: solo il distacco dal
   basso cresce da $bp-tablet, il bordo destro resta a filo (right: 0) a
   ogni larghezza. */
@media (min-width: 768px) {

	.a11y-toolbar__toggle {
		bottom: 1rem;
	}
}

/* Da mobile il bottone e' invadente (stessa scelta del Sito, 2026-09-11):
   il cerchio non scende sotto il bersaglio tattile, quindi si riduce solo
   il peso visivo — icona piu' piccola e un filo di trasparenza a riposo,
   piena su hover/focus. L'area cliccabile resta invariata. */
@media (max-width: 63.9375rem) {

	.a11y-toolbar__toggle {
		opacity: 0.75;
	}

	.a11y-toolbar__toggle .icon {
		block-size: 1.125rem;
		inline-size: 1.125rem;
	}

	.a11y-toolbar__toggle:hover,
	.a11y-toolbar__toggle:focus {
		opacity: 1;
	}
}

/* Si apre come finestra grande al centro, non come fumetto a fianco del
   bottone: il velo dietro segnala che il resto della pagina è
   momentaneamente sospeso, ed è la superficie su cui chiudere con un
   click "fuori". */
.a11y-toolbar__velo {
	background-color: rgba(0, 0, 0, 0.5);
	inset: 0;
	position: fixed;
	z-index: 500;
}

.a11y-toolbar__panel {
	background-color: var(--color-surface, #fff);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(44, 52, 63, 0.12);
	left: 50%;
	max-height: 85vh;
	max-width: 32rem;
	overflow-y: auto;
	padding: 2rem;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2rem);
	z-index: 501;
}

.a11y-toolbar__panel[hidden],
.a11y-toolbar__velo[hidden] {
	display: none;
}

.a11y-toolbar__title {
	color: var(--color-text, #2c343f);
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}

.a11y-toolbar__chiudi {
	background: none;
	border: none;
	color: var(--color-text, #2c343f);
	cursor: pointer;
	height: 44px;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 44px;
}

.a11y-toolbar__righe {
	list-style: none;
	margin: 0;
	padding: 0;
}

.a11y-toolbar__riga {
	align-items: center;
	border-bottom: 1px solid var(--color-border, #e1e3e4);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 44px;
	padding: 0.75rem 0;
}

.a11y-toolbar__riga:last-child {
	border-bottom: none;
}

.a11y-toolbar__etichetta {
	color: var(--color-text, #2c343f);
	font-size: 1rem;
}

/* Tendina (Tema, Dimensioni, Spaziatura, Interlinea, Animazioni)
--------------------------------------------- */

/* `appearance: none` toglie anche la freccia nativa: senza una propria
   una tendina non si distingue da una casella di testo. Un'immagine di
   sfondo invece di un `::after` — un `<select>` non ne accetta uno in
   modo affidabile su tutti i motori — con due colori diversi per i due
   temi, perché una data URI non può leggere `currentColor`. */
.a11y-toolbar__tendina {
	appearance: none;
	background-color: var(--color-surface, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%232c343f' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	border: 2px solid var(--color-border-strong, #c9cdd2);
	border-radius: 3px;
	color: var(--color-text, #2c343f);
	cursor: pointer;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 0.8125rem;
	min-height: 2.5rem;
	padding: 0 2rem 0 0.75rem;
}

html[data-a11y-tema="dark"] .a11y-toolbar__tendina {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23eef0f2' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .a11y-toolbar__tendina {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23eef0f2' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

/* Interruttore (Contrasto elevato, Attenuazione
   colori, Nascondi immagini, Allinea il testo a sinistra)
--------------------------------------------- */

/* Bottone vero, `role="switch"` nel markup: lo stato non lo dice solo
   il colore (che cambia) ma anche la posizione del pallino.

   `#7d838c` letterale e non `$color-border-strong` per il binario
   spento: quel token è theme-aware e nel tema scuro vale `#484d55`,
   quasi lo stesso grigio del fondo del pannello (`$color-surface`,
   `#1e2126`) — il pallino, se a sua volta theme-aware, ci sparisce
   sopra (misurato: 1.90:1, sotto il 3:1 di un componente non
   testuale). Un grigio medio letterale, uguale in entrambi i temi,
   regge invece 3.82:1 col pannello chiaro e 4.22:1 con quello scuro —
   e lo stesso 3.82:1 contro il pallino bianco sotto. */
.a11y-toolbar__interruttore {
	background-color: #7d838c;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 1.5rem;
	padding: 0;
	position: relative;
	transition: background-color 0.15s ease;
	width: 2.75rem;
}

.a11y-toolbar__interruttore[aria-checked="true"] {
	background-color: #3877c8;
}

/* Pallino bianco letterale con un'ombra propria, non `$color-surface`:
   da solo `$color-surface` diventerebbe `#1e2126` nel tema scuro,
   sparendo sopra un binario comunque scuro (stesso ragionamento del
   binario sopra). */
.a11y-toolbar__pallino {
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(44, 52, 63, 0.35);
	height: 1.125rem;
	left: 0.1875rem;
	position: absolute;
	top: 0.1875rem;
	transition: transform 0.15s ease;
	width: 1.125rem;
}

.a11y-toolbar__interruttore[aria-checked="true"] .a11y-toolbar__pallino {
	transform: translateX(1.25rem);
}

.a11y-toolbar__reset {
	background: none;
	border: 1px solid var(--color-border-strong, #c9cdd2);
	border-radius: 3px;
	color: var(--color-text, #2c343f);
	cursor: pointer;
	margin-top: 0.75rem;
	min-height: 44px;
	padding: 0 1rem;
	width: 100%;
}

/* Sotto i 480px il pannello occupa quasi tutta la larghezza, ma resta
   centrato. */
@media (max-width: 30rem) {

	.a11y-toolbar__panel {
		padding: 1.5rem;
	}
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}