/* ==========================================================
   Foglio dei MINISITI — comune a tutti.

   Lo usano la "Guida alla domotica moderna", "Clonare il disco
   di avvio del Mac" e i minisiti che verranno. Niente qui
   dentro è specifico di una guida: se una regola serve a una
   sola, va nel suo foglio, non in questo.

   Nota storica (9 agosto 2026): fino a questa data il file si
   chiamava domotica.css e il prefisso era .dom-, perché la
   domotica era il primo minisito. Il nome era diventato una
   trappola — si toccava una regola credendo di lavorare sulla
   domotica e si muoveva la clonazione — e sono stati
   universalizzati insieme al JavaScript e ai tre helper PHP
   comuni, oggi nel plugin `minisito`.

   Foglio AGGIUNTIVO: si carica dopo stile.css e non ne
   riscrive le regole comuni. Eredita le variabili di colore,
   la famiglia tipografica, i link, il fondo pagina (.fondo)
   e i riquadri della colonna destra (.box-dx, .link-rapidi),
   che vengono riusati tali e quali nella testata.

   Qui stanno solo le classi che il sito principale non ha:
   la testata a tutta larghezza, la barra di navigazione del
   minisito, le schede risorsa, i badge, i filtri e le tabelle
   delle schede tecniche. Tutte con prefisso .mini-.
   ========================================================== */

:root {
	/* toni derivati dalla palette esistente, non nuovi colori */
	--mini-bordo: #DCDCDC;
	--mini-fondo-tenue: #F7F7F7;
	--mini-larghezza: 1140px;
	--mini-testo-largo: 82ch;
}

/* --- Techno --------------------------------------------------
   NON sta più qui. Le classi dei minisiti sono nell'elenco collettivo
   di stile.css, insieme a quelle del sito: era la stessa regola scritta
   due volte, e .mini-menu-titolo stava comunque là. → regola §1

   Chi aggiunge un elemento in Techno lo aggiunge a quell'elenco. */

/* i badge sono minuscoli e tutti in maiuscolo: sul condensato
   servono più aria fra le lettere di quanta ne avessero in Helvetica */
.mini-badge,
.mini-filtro label,
.mini-lettera {
	letter-spacing: 0.06em;
}

/* --- Impianto della pagina ---------------------------------- */

.mini-pagina {
	width: var(--mini-larghezza);
	max-width: 100%;
	margin: 0 auto;
	padding: 12px 15px 0;
}

/* --- Testata ------------------------------------------------
   Stessi tre elementi della testata del sito (logo, fascia
   fotografica, riquadro grigio dei collegamenti rapidi), ma
   distesi su tutta la larghezza invece che sulle tre colonne. */

.mini-testata {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr) var(--fascia-dx);
	align-items: end;
}

.mini-testata-logo img {
	display: block;
}

.mini-testata-foto {
	align-self: stretch;
	position: relative;
	z-index: 1;
	box-shadow: var(--ombra-colonna);
}

.mini-testata-foto img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
}

/* .mini-testata-rapidi e il suo .box-dx non sono dichiarati qui: la fascia
   grigia e il riquadro che ci si appoggia sono gli stessi della testata del
   sito, e stanno in stile.css insieme a .testata-benvenuto. Qui restano solo
   i ritocchi per gli schermi piccoli, in fondo al foglio. */

/* --- Menu di sinistra ----------------------------------------
   Stessa colonna da 208px del sito e stessi pulsanti: il grigio
   con la banda scura e il pallino arancio è già definito in
   stile.css come .menu-sx a, e viene riusato tale e quale.

   Il sito principale però lo sovrascrive con .voce-grafica, che
   sostituisce il pulsante con le due GIF storiche (normale e
   rollover). Qui non si usa: le voci della guida sono tredici e
   cambiano, e ognuna richiederebbe due immagini da rifare. Resta
   la versione CSS, che è l'originale di cui le GIF sono la resa
   grafica — stesse misure, stessi colori, stesso comportamento
   al passaggio del mouse e sulla voce attiva. */

.mini-griglia {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	align-items: stretch;
}

/* il rientro dall'alto e il limite di larghezza sugli schermi piccoli
   arrivano da stile.css, condivisi con la colonna news del sito */

/* al posto del banner newsTitolo.png: stessa funzione, fatto in CSS */
.mini-menu-titolo {
	margin: 0 0 8px;
	padding: 7px 12px;
	background: var(--arancio);
	color: var(--bianco);
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- Corpo --------------------------------------------------
   Stesso foglio bianco ombreggiato della colonna centrale del
   sito, ma largo tutto lo spazio che resta dopo il menu. */

.mini-corpo {
	/* sopra il menu: i pulsanti hanno position:relative per agganciare
	   pallino e filetto, e senza questo si dipingerebbero sopra l'ombra
	   coprendola proprio dove deve vedersi. Stessa ragione per cui
	   .colonna-centro ha z-index nel foglio del sito. */
	position: relative;
	z-index: 1;
	background: var(--bianco);
	box-shadow: var(--ombra-colonna);
	padding: 22px 26px 34px;
	min-height: 420px;
}

/* La classe .contenuto del sito principale porta con sé tutta la
   tipografia (corpo 14px, titoli arancio, elenchi con marcatore
   arancio). Qui si ritocca solo la scala dei titoli: a 1140px di
   larghezza un h1 di 14px sparisce, e questa guida ha gerarchie
   più profonde delle pagine istituzionali. */

.mini-contenuto h3 {
	font-size: 15px;
}

.mini-occhiello {
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--grigio-riga);
	color: var(--grigio-bottone);
	font-size: 15px;
	max-width: var(--mini-testo-largo);
}

/* Il testo discorsivo resta su una misura leggibile anche quando
   la pagina è larga; schede, tabelle ed elenchi si allargano. */
.mini-testo {
	max-width: var(--mini-testo-largo);
}

/* --- Illustrazioni, schemi e fotografie --------------------------
   REGOLA: le illustrazioni d'apertura, gli schemi e le fotografie
   documentarie stanno SEMPRE su una riga propria e CENTRATI nella
   colonna di testo, alla loro misura naturale.

   Serve perché stile.css fa flottare a sinistra le immagini di
   contenuto e le riduce a 282px: giusto per una foto affiancata al
   testo, sbagliato per un disegno che va letto, dove i particolari a
   quella misura diventano illeggibili.

   Riconoscimento dal nome del file — "illustrazione…", "schema…" o
   "fotografia…" — come già fa stile.css per le altre eccezioni: chi
   aggiunge un'immagine non deve toccare il CSS, basta che la chiami
   così. */
.mini-contenuto figure:has(img[src*="illustrazione"]),
.mini-contenuto figure:has(img[src*="schema"]),
.mini-contenuto figure:has(img[src*="fotografia"]) {
	float: none;
	margin: 6px auto 26px;
	max-width: 100%;
	text-align: center;
}

/* l'illustrazione resta alla misura delle immagini di contenuto del
   sito, 282px: centrata, non allargata alla colonna */
.mini-contenuto figure:has(img[src*="illustrazione"]) img {
	display: block;
	margin: 0 auto;
	max-width: var(--larghezza-illustrazione);
	width: 100%;
	height: auto;
}

/* gli schemi no: contengono scritte, e a 282px non si leggerebbero */
.mini-contenuto figure:has(img[src*="schema"]) img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Le fotografie stanno in mezzo, a 460px. Non sono disegni: quello che
   il lettore deve riconoscere è un particolare fisico — la forma di un
   connettore, il numero di poli, il taglio di uno slot — e a 282px
   quel particolare sparisce. Ma non contengono scritte da leggere come
   gli schemi, quindi allargarle a tutta colonna sarebbe solo ingombro.
   La misura viene dalla larghezza della fascia fotografica della
   testata (659px) meno i margini della colonna di testo. */
.mini-contenuto figure:has(img[src*="fotografia"]) img {
	display: block;
	margin: 0 auto;
	max-width: 460px;
	width: 100%;
	height: auto;
}

/* Didascalia: serve alle fotografie storiche, dove per licenza vanno
   citati autore e licenza. Piccola e grigia, non deve competere col
   testo corrente; il collegamento resta dritto perché non è prosa. */
.mini-contenuto figure figcaption {
	margin: 7px auto 0;
	max-width: 560px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--grigio-bottone);
	text-align: center;
}

.mini-contenuto figure figcaption a {
	font-style: normal;
}

/* stile.css fa rientrare di 30px ogni ul/ol dentro .contenuto e stacca
   gli <li> di 5px: giusto per un elenco puntato, sbagliato per le griglie
   di schede, che così perderebbero una colonna. Il selettore deve avere
   più peso di ".contenuto ul", da cui la doppia classe. */
.mini-contenuto .mini-elenco,
.mini-contenuto .mini-percorsi,
.mini-contenuto .mini-alfabeto {
	padding-left: 0;
}

.mini-contenuto .mini-elenco > li,
.mini-contenuto .mini-percorsi > li,
.mini-contenuto .mini-alfabeto > li {
	margin-bottom: 0;
}

/* --- Percorsi di lettura (home) ------------------------------ */

.mini-percorsi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 24px 0 8px;
	padding: 0;
	list-style: none;
}

.mini-percorso {
	display: block;
	padding: 16px 18px;
	background: var(--mini-fondo-tenue);
	border: 1px solid var(--mini-bordo);
	border-top: 3px solid var(--arancio);
	color: var(--grigio-testo);
	font-style: normal;
	font-weight: normal;
}

.mini-percorso:hover {
	color: var(--grigio-testo);
	background: var(--arancio-tenue);
	border-color: var(--arancio);
}

.mini-percorso strong {
	display: block;
	color: var(--arancio);
	font-size: 15px;
	margin-bottom: 6px;
}

.mini-percorso p {
	margin: 0 0 10px;
}

.mini-percorso ol {
	margin: 0;
	padding-left: 20px;
	font-size: 13px;
}

/* --- Filtri e ricerca ---------------------------------------- */

.mini-filtri {
	margin: 0 0 22px;
	padding: 14px 16px;
	background: var(--mini-fondo-tenue);
	border: 1px solid var(--mini-bordo);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
}

.mini-filtro {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mini-filtro label {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--grigio-bottone);
}

/* bordo, raggio, carattere, colori e stato di fuoco arrivano dalla regola
   dei campi di inserimento in stile.css, condivisa col modulo di contatto:
   qui resta solo l'imbottitura, più stretta perché la barra dei filtri
   deve stare su una riga sola */
.mini-filtro select,
.mini-cerca input {
	padding: 7px 9px;
}

.mini-cerca {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 200px;
}

.mini-cerca input {
	width: 100%;
}

.mini-cerca .mini-scorciatoia {
	font-size: 11px;
	color: var(--grigio-bottone);
}

/* Il tasto disegnato: bordo inferiore doppio, come il rilievo di un tasto
   vero. Nato per la riga «premi Ctrl+K» della barra di ricerca, che è dove
   compariva l'unico <kbd> dei minisiti; la guida all'avvio del Mac ne è
   piena, e sarebbe stata la stessa decisione presa due volte. Il selettore
   quindi non è più .mini-cerca kbd ma tutto il corpo della pagina: stesso
   oggetto, stessa regola. → regola §1

   La barra di ricerca resta coperta perché sta dentro .mini-contenuto. */
.mini-contenuto kbd {
	font-family: inherit;
	border: 1px solid var(--grigio-riga);
	border-bottom-width: 2px;
	border-radius: 3px;
	padding: 0 4px;
	background: var(--bianco);
}

.mini-azzera {
	padding: 8px 14px;
	border: 1px solid var(--grigio-riga);
	border-radius: 3px;
	background: var(--bianco);
	font-family: inherit;
	font-size: 13px;
	font-weight: bold;
	color: var(--grigio-testo);
	cursor: pointer;
}

.mini-azzera:hover {
	border-color: var(--arancio);
	color: var(--arancio);
}

.mini-conteggio {
	margin: -10px 0 18px;
	font-size: 12px;
	color: var(--grigio-bottone);
}

/* senza JavaScript i filtri non farebbero nulla: si nascondono
   e restano visibili tutte le voci, che sono già nell'HTML */
.mini-solo-js {
	display: none;
}

/* --- Schede risorsa ------------------------------------------ */

.mini-elenco {
	display: grid;
	/* 258px e non di più: con il menu a sinistra restano circa 850px utili,
	   e sotto questa misura le schede scenderebbero a due colonne */
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.mini-scheda {
	display: flex;
	flex-direction: column;
	padding: 14px 16px 12px;
	background: var(--bianco);
	border: 1px solid var(--mini-bordo);
	border-left: 3px solid var(--grigio-riga);
}

.mini-scheda:hover {
	border-left-color: var(--arancio);
}

.mini-scheda[data-stato="dormiente"],
.mini-scheda[data-stato="archiviato"],
.mini-scheda[data-stato="dismesso"] {
	background: var(--mini-fondo-tenue);
}

.mini-scheda-nome {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.3;
}

.mini-scheda-nome a {
	color: var(--arancio);
}

.mini-scheda-nome a:hover {
	text-decoration: underline;
}

.mini-scheda-desc {
	margin: 0 0 12px;
	font-size: 13px;
	flex: 1;
}

.mini-scheda-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

.mini-scheda-link {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding-top: 9px;
	border-top: 1px solid var(--grigio-riga);
	font-size: 12px;
}

.mini-scheda-link a {
	color: var(--grigio-bottone);
}

.mini-scheda-link a:hover {
	color: var(--arancio);
}

.mini-scheda-verifica {
	margin-left: auto;
	color: #9A9A9A;
	font-size: 11px;
	white-space: nowrap;
}

/* --- Badge ---------------------------------------------------- */

.mini-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 2px;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--grigio-box);
	color: var(--grigio-bottone);
	border: 1px solid var(--mini-bordo);
}

.mini-badge-tipo {
	background: var(--grigio-bottone);
	color: var(--bianco);
	border-color: var(--grigio-bottone);
}

.mini-badge-livello-base {
	background: #EAF3EA;
	color: #3F6B3F;
	border-color: #CBE0CB;
}

.mini-badge-livello-intermedio {
	background: #FBF2E3;
	color: #8A6212;
	border-color: #EBDCBD;
}

.mini-badge-livello-avanzato {
	background: var(--arancio-tenue);
	color: #B23F13;
	border-color: #F1CDBD;
}

.mini-badge-lingua-it {
	background: var(--bianco);
	color: var(--arancio);
	border-color: var(--arancio);
}

.mini-badge-stato-dormiente,
.mini-badge-stato-archiviato,
.mini-badge-stato-dismesso {
	background: #F3E7E7;
	color: #9B3A2E;
	border-color: #E2C8C4;
}

/* --- Indice alfabetico ---------------------------------------- */

.mini-alfabeto {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.mini-alfabeto a {
	display: block;
	min-width: 26px;
	padding: 4px 6px;
	text-align: center;
	background: var(--grigio-box);
	border: 1px solid var(--mini-bordo);
	color: var(--grigio-testo);
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
}

.mini-alfabeto a:hover {
	background: var(--arancio);
	border-color: var(--arancio);
	color: var(--bianco);
}

.mini-alfabeto .mini-vuota {
	opacity: 0.35;
	pointer-events: none;
}

.mini-lettera {
	margin: 26px 0 10px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--arancio);
	color: var(--arancio);
	font-size: 17px;
	scroll-margin-top: 12px;
}

/* --- Tabelle delle schede tecniche e del glossario ------------- */

.mini-tabella {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 24px;
	font-size: 13px;
}

.mini-tabella th {
	text-align: left;
	vertical-align: top;
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--arancio);
	white-space: nowrap;
	width: 210px;
}

.mini-tabella td {
	padding: 10px 0;
	border-bottom: 1px solid var(--grigio-riga);
	vertical-align: top;
}

.mini-glossario {
	margin: 0;
}

.mini-glossario dt {
	margin-top: 18px;
	color: var(--arancio);
	font-weight: bold;
}

.mini-glossario dd {
	margin: 4px 0 0;
	max-width: var(--mini-testo-largo);
}

/* usata anche fuori dal glossario, per esempio nel registro */
.mini-sigla {
	color: var(--grigio-bottone);
	font-weight: normal;
	font-style: italic;
}

.mini-glossario .mini-vedi {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--grigio-bottone);
}

/* --- Riquadri redazionali -------------------------------------- */

/* filetto arancio e fondo tenue arrivano da stile.css, dove sono condivisi
   con l'esito del modulo di contatto: qui solo la misura */
.mini-nota {
	margin: 20px 0;
	padding: 14px 18px;
	max-width: var(--mini-testo-largo);
}

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

.mini-nota strong {
	color: var(--arancio);
}

/* --- Firma dell'opera -------------------------------------------
   Compare due volte con lo stesso testo: sotto il titolo, dove fa da
   riga d'autore e dice quanto è fresca la pagina, e in chiusura come
   colofone. In fondo sta fuori dal <main>, perché è informazione
   sulla pagina e non contenuto. */

.mini-firma {
	font-size: 12px;
	line-height: 1.65;
	color: var(--grigio-bottone);
}

.mini-firma-opera {
	font-style: italic;
	color: var(--grigio-testo);
}

.mini-firma strong {
	color: var(--grigio-testo);
}

/* stile.css impagina i <time> dentro .contenuto come le date degli
   articoli: blocco, arancioni, in grassetto. Qui è una data in mezzo a
   una frase e deve restare tale, altrimenti manda a capo anche il punto. */
.mini-firma time {
	display: inline;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: normal;
	white-space: nowrap;
}

/* subito sotto il titolo, prima del sottotitolo esplicativo: è la riga
   d'autore, quindi niente filetto — a chiudere il blocco di testata ci
   pensa l'occhiello che la segue */
.mini-firma-testa {
	margin: 0 0 14px;
	max-width: var(--mini-testo-largo);
}

/* la data va a capo: sulla riga d'autore è un'informazione distinta */
.mini-firma-testa .mini-firma-data {
	display: block;
	color: #9A9A9A;
}

/* in fondo pagina: colofone */
.mini-firma-fondo {
	margin: 34px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--grigio-riga);
}

/* rimando al sito, sotto il foglio bianco */
.mini-ritorno {
	margin: 14px 0 0;
}

.mini-vuoto {
	padding: 26px;
	text-align: center;
	color: var(--grigio-bottone);
	background: var(--mini-fondo-tenue);
	border: 1px dashed var(--mini-bordo);
}

/* --- Adattamento a schermi piccoli ------------------------------ */

@media (max-width: 900px) {
	.mini-testata {
		grid-template-columns: 1fr;
	}

	.mini-testata-foto {
		box-shadow: none;
		min-height: 0;
	}

	.mini-testata-foto img {
		position: static;
	}

	.mini-testata-rapidi {
		background-size: 100% 100%;
	}

	.mini-testata-rapidi .box-dx {
		width: 100%;
		height: auto;
	}

	.mini-corpo {
		padding: 18px 14px 26px;
		box-shadow: none;
	}

	/* come il sito principale sotto i 900px: il menu smette di essere
	   una colonna e si impila sopra il contenuto */
	.mini-griglia {
		grid-template-columns: 1fr;
	}

	.mini-colonna-sx {
		max-width: 320px;
	}
}

@media (max-width: 560px) {
	.mini-filtri {
		flex-direction: column;
		align-items: stretch;
	}

	.mini-elenco {
		grid-template-columns: 1fr;
	}

	.mini-tabella th {
		width: auto;
		white-space: normal;
	}
}

/* --- Stampa ------------------------------------------------------ */

@media print {
	.mini-colonna-sx,
	.mini-testata-rapidi,
	.mini-filtri,
	.mini-alfabeto,
	.mini-ritorno {
		display: none;
	}

	.mini-griglia {
		grid-template-columns: 1fr;
	}

	.mini-corpo {
		box-shadow: none;
		padding: 0;
	}

	.mini-elenco {
		grid-template-columns: 1fr 1fr;
	}
}